/* ============================================================
   Pazy.pl - shared device frame kit
   Physically accurate device chrome. Aesthetic-neutral on purpose:
   only the hardware is styled here, never the app content.
   Link with: <link rel="stylesheet" href="../_shared/frames.css">
   Every frame scales with --scale (default 1).
   ============================================================ */

:where(.dv) {
  --scale: 1;
  --dv-body: #1c1c1e;
  --dv-edge: #3a3a3c;
  --dv-glint: rgba(255, 255, 255, 0.5);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  flex: none;
}

/* ---------- iPhone 16 Pro : 402 x 874 pt ---------- */

.dv-phone {
  position: relative;
  width: calc(402px * var(--scale));
  height: calc(874px * var(--scale));
  border-radius: calc(55px * var(--scale));
  padding: calc(4px * var(--scale));
  background:
    linear-gradient(150deg, #6d6d72 0%, #2c2c2e 18%, #48484a 42%, #1c1c1e 62%, #5a5a5e 88%, #2c2c2e 100%);
  box-shadow:
    0 0 0 calc(1px * var(--scale)) rgba(0, 0, 0, 0.55),
    0 calc(30px * var(--scale)) calc(60px * var(--scale)) calc(-18px * var(--scale)) rgba(0, 0, 0, 0.45),
    inset 0 0 calc(2px * var(--scale)) rgba(255, 255, 255, 0.35);
}

.dv-phone::before,
.dv-phone::after {
  /* titanium side buttons */
  content: "";
  position: absolute;
  width: calc(3px * var(--scale));
  background: linear-gradient(180deg, #4a4a4e, #2c2c2e);
  border-radius: calc(2px * var(--scale));
}
.dv-phone::before {
  left: calc(-3px * var(--scale));
  top: calc(168px * var(--scale));
  height: calc(66px * var(--scale));
  box-shadow:
    0 calc(84px * var(--scale)) 0 0 #3a3a3c,
    0 calc(-72px * var(--scale)) 0 0 #3a3a3c;
}
.dv-phone::after {
  right: calc(-3px * var(--scale));
  top: calc(210px * var(--scale));
  height: calc(102px * var(--scale));
}

.dv-phone > .dv-screen {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: calc(51px * var(--scale));
  background: #fff;
  isolation: isolate;
}

/* content that must scroll inside the phone */
.dv-scroll {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: none;
}
.dv-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* Dynamic Island - 125 x 36 pt, 11 pt from top */
.dv-island {
  position: absolute;
  top: calc(11px * var(--scale));
  left: 50%;
  transform: translateX(-50%);
  width: calc(125px * var(--scale));
  height: calc(36px * var(--scale));
  border-radius: calc(18px * var(--scale));
  background: #000;
  z-index: 40;
  pointer-events: none;
}

/* expanded Live Activity island */
.dv-island-wide {
  width: calc(370px * var(--scale));
  height: calc(160px * var(--scale));
  border-radius: calc(46px * var(--scale));
  pointer-events: auto;
  color: #fff;
  overflow: hidden;
}

.dv-statusbar {
  position: absolute;
  inset: 0 0 auto 0;
  height: calc(59px * var(--scale));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(30px * var(--scale));
  padding-top: calc(12px * var(--scale));
  font-size: calc(15px * var(--scale));
  font-weight: 600;
  letter-spacing: calc(0.2px * var(--scale));
  font-variant-numeric: tabular-nums;
  z-index: 30;
  pointer-events: none;
}
.dv-statusbar .dv-sb-right {
  display: flex;
  align-items: center;
  gap: calc(6px * var(--scale));
}
.dv-statusbar svg { display: block; height: calc(13px * var(--scale)); width: auto; }

.dv-homebar {
  position: absolute;
  bottom: calc(9px * var(--scale));
  left: 50%;
  transform: translateX(-50%);
  width: calc(144px * var(--scale));
  height: calc(5px * var(--scale));
  border-radius: calc(3px * var(--scale));
  background: currentColor;
  opacity: 0.35;
  z-index: 35;
  pointer-events: none;
}

/* safe areas: top 59, bottom 34 */
.dv-safe-top { padding-top: calc(59px * var(--scale)); }
.dv-safe-bottom { padding-bottom: calc(34px * var(--scale)); }

/* ---------- Apple Watch Series 10, 46 mm : 208 x 248 pt ---------- */

.dv-watch {
  position: relative;
  width: calc(238px * var(--scale));
  height: calc(286px * var(--scale));
  border-radius: calc(62px * var(--scale));
  padding: calc(15px * var(--scale)) calc(15px * var(--scale));
  background: linear-gradient(155deg, #7a7a80 0%, #35353a 22%, #56565c 48%, #24242a 74%, #6a6a70 100%);
  box-shadow:
    0 calc(24px * var(--scale)) calc(48px * var(--scale)) calc(-16px * var(--scale)) rgba(0, 0, 0, 0.5),
    inset 0 0 calc(2px * var(--scale)) rgba(255, 255, 255, 0.4);
}

/* Digital Crown + side button */
.dv-watch::before {
  content: "";
  position: absolute;
  right: calc(-7px * var(--scale));
  top: calc(78px * var(--scale));
  width: calc(9px * var(--scale));
  height: calc(34px * var(--scale));
  border-radius: calc(3px * var(--scale));
  background:
    repeating-linear-gradient(180deg, #8a8a90 0 calc(1.5px * var(--scale)), #4a4a50 calc(1.5px * var(--scale)) calc(3px * var(--scale)));
  box-shadow: inset 0 0 calc(2px * var(--scale)) rgba(0, 0, 0, 0.6);
}
.dv-watch::after {
  content: "";
  position: absolute;
  right: calc(-5px * var(--scale));
  top: calc(132px * var(--scale));
  width: calc(6px * var(--scale));
  height: calc(46px * var(--scale));
  border-radius: calc(3px * var(--scale));
  background: linear-gradient(180deg, #5a5a60, #34343a);
}

.dv-watch > .dv-screen {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: calc(48px * var(--scale));
  overflow: hidden;
  background: #000;
  color: #fff;
  isolation: isolate;
}

/* watch band stubs, purely decorative */
.dv-watch-band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.dv-watch-band::before,
.dv-watch-band::after {
  content: "";
  width: calc(150px * var(--scale));
  height: calc(56px * var(--scale));
  background: linear-gradient(90deg, #2a2a2e, #3d3d42 50%, #2a2a2e);
}
.dv-watch-band::before { border-radius: calc(20px * var(--scale)) calc(20px * var(--scale)) calc(6px * var(--scale)) calc(6px * var(--scale)); margin-bottom: calc(-16px * var(--scale)); }
.dv-watch-band::after { border-radius: calc(6px * var(--scale)) calc(6px * var(--scale)) calc(20px * var(--scale)) calc(20px * var(--scale)); margin-top: calc(-16px * var(--scale)); }

/* watchOS status row */
.dv-watch-time {
  position: absolute;
  top: calc(8px * var(--scale));
  right: calc(20px * var(--scale));
  font-size: calc(15px * var(--scale));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  z-index: 20;
}

/* ---------- macOS window ---------- */

.dv-mac {
  position: relative;
  width: 100%;
  border-radius: calc(12px * var(--scale));
  overflow: hidden;
  background: #fff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.12),
    0 calc(40px * var(--scale)) calc(80px * var(--scale)) calc(-24px * var(--scale)) rgba(0, 0, 0, 0.35),
    0 calc(4px * var(--scale)) calc(12px * var(--scale)) rgba(0, 0, 0, 0.1);
}

.dv-traffic {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}
.dv-traffic i {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}
.dv-traffic i:nth-child(1) { background: #ff5f57; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.dv-traffic i:nth-child(2) { background: #febc2e; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }
.dv-traffic i:nth-child(3) { background: #28c840; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.15); }

/* ---------- iOS widget canvases ----------
   iPhone 16 Pro home-screen widget geometry, in pt.
   Corner radius is the iOS 26 continuous-ish 26pt. */

.dv-widget {
  position: relative;
  border-radius: calc(26px * var(--scale));
  overflow: hidden;
  isolation: isolate;
  box-shadow: 0 calc(10px * var(--scale)) calc(24px * var(--scale)) calc(-8px * var(--scale)) rgba(0, 0, 0, 0.28);
}
.dv-w-sm { width: calc(170px * var(--scale)); height: calc(170px * var(--scale)); }
.dv-w-md { width: calc(364px * var(--scale)); height: calc(170px * var(--scale)); }
.dv-w-lg { width: calc(364px * var(--scale)); height: calc(382px * var(--scale)); }

/* Lock Screen widgets */
.dv-lock-circ {
  width: calc(72px * var(--scale));
  height: calc(72px * var(--scale));
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(calc(14px * var(--scale)));
  -webkit-backdrop-filter: blur(calc(14px * var(--scale)));
  color: #fff;
  overflow: hidden;
}
.dv-lock-rect {
  width: calc(160px * var(--scale));
  height: calc(72px * var(--scale));
  border-radius: calc(16px * var(--scale));
  background: rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(calc(14px * var(--scale)));
  -webkit-backdrop-filter: blur(calc(14px * var(--scale)));
  color: #fff;
  overflow: hidden;
}
.dv-lock-inline {
  display: inline-flex;
  align-items: center;
  gap: calc(5px * var(--scale));
  color: rgba(255, 255, 255, 0.92);
  font-size: calc(15px * var(--scale));
  font-weight: 500;
}

/* StandBy: landscape, always-on, dimmed */
.dv-standby {
  /* bez position: relative warstwa .fit (absolute) ucieka do dalszego przodka i ramka zostaje pustym czarnym prostokatem */
  position: relative;
  width: calc(520px * var(--scale));
  height: calc(300px * var(--scale));
  border-radius: calc(34px * var(--scale));
  background: #000;
  overflow: hidden;
  box-shadow: 0 calc(24px * var(--scale)) calc(50px * var(--scale)) calc(-18px * var(--scale)) rgba(0, 0, 0, 0.6);
}

/* ---------- shared helpers ---------- */

.dv-caption {
  margin-top: 14px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.55;
  text-align: center;
}

.dv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 56px;
  align-items: flex-start;
  justify-content: center;
}

.dv-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
}

@media (max-width: 900px) {
  .dv-row { gap: 36px; }
}