/* ============================================
   Phone Screen Previews - Namespaced under .preview-phone
   Extracted from landing-phone-screens.html
   ============================================ */

/* ── CSS Variables (scoped) ───────────────────── */
.preview-phone {
  --primary: #2D6A4F;
  --primary-light: #40916C;
  --primary-bg: #F4F1DE;
  --primary-border: rgba(45,106,79,0.1);
  --primary-surface: rgba(255,255,255,0.6);
  --text: #2c3e2d;
  --text-secondary: #5a6b5c;
  --muted: #5a6b5c;
  --muted-light: #A3B18A;
  --emerald-pale: #D8F3DC;
  --sand: #F4F1DE;
  --sky: #B7E4C7;
  --coral: #F2CC8F;
  --white-85: rgba(255,255,255,0.85);
  --white-70: rgba(255,255,255,0.7);
  --white-60: rgba(255,255,255,0.6);
  --white-15: rgba(255,255,255,0.15);
  --white-30: rgba(255,255,255,0.3);
  --black-06: rgba(0,0,0,0.06);
  --border: #e5e7eb;
  --input-bg: #f9fafb;
}

/*
  Isolate phone internals from landing page styles:
  - Reset font to system (Quicksand cascades from body otherwise)
  - Reset line-height for dense phone UI
*/
.preview-phone .phone-frame {
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  line-height: 1.4;
  color: var(--text);
}
.preview-phone .phone-frame *,
.preview-phone .phone-frame *::before,
.preview-phone .phone-frame *::after {
  font-family: inherit;
}

/* ── PHONE SCREEN IMAGE (replaces HTML mockups) ──── */
.preview-phone .phone-screen-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 46px;
  display: block;
}

/* ── PHONE FRAME - iPhone bezel ───────────────────── */
.preview-phone .phone-frame {
  width: 375px;
  height: 812px;
  border-radius: 52px;
  background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #111 100%);
  box-shadow:
    0 25px 80px rgba(0,0,0,0.25),
    0 4px 20px rgba(0,0,0,0.15),
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 0 0 1.5px #3a3a3a;
  padding: 6px;
  position: relative;
  flex-shrink: 0;
}

/* Side buttons (volume + power) */
.preview-phone .phone-frame::before {
  content: '';
  position: absolute;
  right: -3px;
  top: 180px;
  width: 4px;
  height: 60px;
  background: linear-gradient(180deg, #3a3a3a, #222, #3a3a3a);
  border-radius: 0 3px 3px 0;
}
.preview-phone .phone-frame::after {
  content: '';
  position: absolute;
  left: -3px;
  top: 160px;
  width: 4px;
  height: 36px;
  background: linear-gradient(180deg, #3a3a3a, #222, #3a3a3a);
  border-radius: 3px 0 0 3px;
  box-shadow: 0 50px 0 0 #2a2a2a;
}

/* Screen types - clip inside bezel with inner radius */
.preview-phone .screen-scanner,
.preview-phone .screen-map,
.preview-phone .screen-share {
  border-radius: 46px;
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Dynamic Island */
.preview-phone .dynamic-island {
  position: absolute;
  top: 6px;
  left: 50%;
  transform: translateX(-50%);
  width: 126px;
  height: 36px;
  background: #000;
  border-radius: 20px;
  z-index: 100;
}

/* Status bar */
.preview-phone .status-bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 54px;
  padding: 10px 24px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 700;
  z-index: 90;
}
.preview-phone .status-bar.light { color: #fff; }
.preview-phone .status-bar.dark { color: var(--text); }
.preview-phone .status-icons { display: flex; gap: 5px; align-items: center; }
.preview-phone .status-icons i { width: 16px; height: 16px; }

/* Home indicator */
.preview-phone .home-indicator {
  position: absolute;
  bottom: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 134px;
  height: 5px;
  border-radius: 3px;
  background: rgba(0,0,0,0.15);
  z-index: 90;
}
.preview-phone .home-indicator.white { background: rgba(255,255,255,0.3); }

/* Force Lucide SVGs */
.preview-phone .phone-frame svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* Quicksand */
.preview-phone .font-qs { font-family: 'Quicksand', sans-serif; }

/* ── SCREEN HEADER ───── */
.preview-phone .screen-header {
  background: var(--primary);
  padding: 54px 20px 16px;
  border-radius: 0 0 20px 20px;
  position: relative;
  z-index: 30;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  will-change: transform;
  transform: translateZ(0);
}
.preview-phone .screen-header.absolute {
  position: absolute;
  top: 0; left: 0; right: 0;
}
.preview-phone .header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.preview-phone .header-text { flex: 1; }
.preview-phone .header-title {
  font-size: 19px;
  font-weight: 700;
  color: #fff;
  margin-top: 8px;
}
.preview-phone .header-subtitle {
  font-size: 11px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}
.preview-phone .header-btns { display: flex; gap: 8px; }
.preview-phone .header-btn {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: var(--white-15);
  display: flex;
  align-items: center;
  justify-content: center;
}
.preview-phone .header-btn i,
.preview-phone .header-btn svg { width: 20px; height: 20px; color: #fff; stroke: #fff; }
.preview-phone .cam-btn i,
.preview-phone .cam-btn svg { width: 20px; height: 20px; color: #fff; stroke: #fff; }

/* ── FLOATING TAB BAR ── */
.preview-phone .tab-bar {
  position: absolute;
  bottom: 20px;
  left: 20px;
  right: 20px;
  background: rgba(255,255,255,0.95);
  border-radius: 40px;
  padding: 8px;
  display: flex;
  z-index: 80;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.preview-phone .tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
}
.preview-phone .tab-item i { width: 18px; height: 18px; color: var(--muted-light); stroke-width: 2; }
.preview-phone .tab-item.active i { color: var(--primary); stroke-width: 2.5; }
.preview-phone .tab-label {
  font-size: 9px;
  font-weight: 600;
  color: var(--muted-light);
  margin-top: 3px;
}
.preview-phone .tab-item.active .tab-label { color: var(--primary); font-weight: 700; }

/* Center tab elevated circle */
.preview-phone .tab-center-circle {
  width: 52px;
  height: 52px;
  border-radius: 26px;
  background: #fff;
  border: 3px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -28px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.preview-phone .tab-center-circle.active {
  background: var(--primary-light);
  border-color: #40916C;
}
.preview-phone .tab-center-circle i { width: 26px; height: 26px; color: var(--muted-light); }
.preview-phone .tab-center-circle.active i { color: #fff; }

/* ══════════════════════════════════════
   SCREEN 1 - MAP
   ══════════════════════════════════════ */
.preview-phone .screen-map {
  width: 100%; height: 100%;
  position: relative;
  background: #e8e6d8;
  overflow: hidden;
}

/* Simplified map tiles */
.preview-phone .map-bg { position: absolute; inset: 0; }
.preview-phone .map-road { position: absolute; background: #d4d1c2; }
.preview-phone .map-road.h { height: 22px; left: 0; right: 0; }
.preview-phone .map-road.v { width: 22px; top: 0; bottom: 0; }
.preview-phone .map-road.h1 { top: 220px; }
.preview-phone .map-road.h2 { top: 400px; }
.preview-phone .map-road.h3 { top: 570px; }
.preview-phone .map-road.v1 { left: 90px; }
.preview-phone .map-road.v2 { left: 195px; }
.preview-phone .map-road.v3 { left: 300px; }
.preview-phone .map-block { position: absolute; background: #ece9db; border-radius: 4px; }
.preview-phone .map-block.b1 { top: 140px; left: 15px; width: 65px; height: 70px; }
.preview-phone .map-block.b2 { top: 145px; left: 105px; width: 78px; height: 65px; }
.preview-phone .map-block.b3 { top: 135px; left: 210px; width: 78px; height: 75px; }
.preview-phone .map-block.b4 { top: 252px; left: 15px; width: 65px; height: 138px; }
.preview-phone .map-block.b5 { top: 252px; left: 105px; width: 78px; height: 138px; }
.preview-phone .map-block.b6 { top: 260px; left: 210px; width: 78px; height: 130px; }
.preview-phone .map-block.b7 { top: 432px; left: 15px; width: 65px; height: 128px; }
.preview-phone .map-block.b8 { top: 432px; left: 105px; width: 78px; height: 128px; }
.preview-phone .map-block.b9 { top: 432px; left: 210px; width: 78px; height: 128px; }
.preview-phone .map-block.b10 { top: 140px; left: 310px; width: 55px; height: 70px; }
.preview-phone .map-block.b11 { top: 252px; left: 310px; width: 55px; height: 138px; }
.preview-phone .map-block.b12 { top: 432px; left: 310px; width: 55px; height: 128px; }

/* Park */
.preview-phone .map-park {
  position: absolute; top: 600px; left: 15px;
  width: 165px; height: 80px;
  background: rgba(163,177,138,0.3);
  border-radius: 12px;
}
.preview-phone .map-park::before,
.preview-phone .map-park::after {
  content: ''; position: absolute;
  background: rgba(163,177,138,0.4); border-radius: 50%;
}
.preview-phone .map-park::before { width: 20px; height: 20px; top: 15px; left: 25px; }
.preview-phone .map-park::after { width: 28px; height: 28px; top: 30px; left: 80px; }

/* User location dot */
.preview-phone .user-dot {
  position: absolute; top: 350px; left: 165px;
  width: 16px; height: 16px;
  z-index: 15;
}
.preview-phone .user-dot-inner {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #4285F4;
  border: 3px solid #fff;
  box-shadow: 0 1px 6px rgba(66,133,244,0.4);
}
.preview-phone .user-dot-ring {
  position: absolute;
  top: -12px; left: -12px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(66,133,244,0.12);
}

/* Logo Markers */
.preview-phone .logo-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}
.preview-phone .marker-circle {
  width: 46px; height: 46px;
  border-radius: 23px;
  background: #fff;
  border: 2.5px solid #D1D5DB;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}
.preview-phone .marker-circle.status-green { border-color: #22c55e; }
.preview-phone .marker-circle.status-yellow { border-color: #eab308; }
.preview-phone .marker-circle.status-default { border-color: #D1D5DB; }
.preview-phone .marker-logo {
  width: 36px; height: 36px;
  border-radius: 18px;
  object-fit: cover;
}
.preview-phone .logo-marker.m1 { top: 280px; left: 120px; }
.preview-phone .logo-marker.m2 { top: 310px; left: 250px; }
.preview-phone .logo-marker.m3 { top: 455px; left: 50px; }
.preview-phone .logo-marker.m4 { top: 490px; left: 240px; }
.preview-phone .logo-marker.m5 { top: 170px; left: 250px; }

.preview-phone .marker-arrow {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #D1D5DB;
  margin-top: -1px;
}
.preview-phone .marker-arrow.green { border-top-color: #22c55e; }
.preview-phone .marker-arrow.yellow { border-top-color: #eab308; }

/* Store Card */
.preview-phone .store-card {
  position: absolute;
  bottom: 100px;
  left: 16px; right: 16px;
  border-radius: 20px;
  padding: 20px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  border: 1px solid var(--white-30);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  z-index: 50;
}
.preview-phone .store-card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.preview-phone .store-card-name {
  font-size: 14px; font-weight: 700; color: var(--text);
  margin-bottom: 2px;
}
.preview-phone .store-card-address {
  display: flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; color: var(--primary-light);
}
.preview-phone .store-card-address i,
.preview-phone .store-card-address svg { width: 10px; height: 10px; display: inline-block; }
.preview-phone .store-info-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 3px;
  margin-bottom: 12px;
}
.preview-phone .status-dot {
  width: 6px; height: 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.preview-phone .status-text { font-size: 11px; font-weight: 600; white-space: nowrap; }
.preview-phone .separator { font-size: 11px; color: var(--muted-light); font-weight: 700; }
.preview-phone .info-text { font-size: 11px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.preview-phone .store-info-row i,
.preview-phone .store-info-row svg { width: 10px; height: 10px; color: var(--muted); flex-shrink: 0; display: inline-block; }
.preview-phone .store-btn-row { display: flex; gap: 10px; }
.preview-phone .navigate-btn {
  flex: 1; height: 44px;
  border-radius: 12px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  color: #fff; font-size: 13px; font-weight: 700;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
}
.preview-phone .navigate-btn i { width: 16px; height: 16px; }
.preview-phone .face-row {
  flex: 1; display: flex; gap: 4px;
}
.preview-phone .face-btn {
  flex: 1; height: 44px;
  border-radius: 14px;
  background: #F3F4F6;
  border: 2px solid transparent;
  display: flex; align-items: center; justify-content: center;
}
.preview-phone .face-btn i { width: 22px; height: 22px; color: var(--muted-light); }
.preview-phone .face-btn.active-green { background: #DCFCE7; border-color: #22c55e; }
.preview-phone .face-btn.active-green i { color: #22c55e; }

/* ══════════════════════════════════════
   SCREEN 2 - SCANNER
   ══════════════════════════════════════ */
.preview-phone .screen-scanner {
  width: 100%; height: 100%;
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  flex-direction: column;
}

/* Camera area */
.preview-phone .camera-area {
  height: 55%;
  position: relative;
  background: linear-gradient(160deg, #1a3a2a 0%, #0d1f15 50%, #1a2a1a 100%);
  overflow: hidden;
}
.preview-phone .camera-area::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 45%, rgba(30,60,40,0.3) 0%, transparent 70%);
}

/* Barcode inside crosshair */
.preview-phone .barcode {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.preview-phone .barcode-bars {
  display: flex;
  align-items: stretch;
  gap: 1.5px;
  height: 72px;
}
.preview-phone .barcode-bars span {
  display: block;
  background: rgba(180, 230, 200, 0.75);
  border-radius: 1px;
}
.preview-phone .barcode-num {
  font-size: 8px;
  letter-spacing: 2px;
  color: rgba(180, 230, 200, 0.6);
  font-family: 'Courier New', monospace;
}
.preview-phone .scan-line {
  position: absolute;
  left: 14px; right: 14px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #40916C, #74c69d, #40916C, transparent);
  border-radius: 1px;
  animation: pp-scanMove 1.8s ease-in-out infinite;
  top: 30px;
  box-shadow: 0 0 8px rgba(64,145,108,0.8);
}
@keyframes pp-scanMove {
  0%   { top: 28px; opacity: 1; }
  50%  { top: 108px; opacity: 1; }
  100% { top: 28px; opacity: 1; }
}

/* Bottle silhouette */
.preview-phone .bottle-ghost {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  opacity: 0.08;
}
.preview-phone .bottle-ghost-cap { width: 18px; height: 10px; background: #88bb99; border-radius: 3px 3px 0 0; margin: 0 auto; }
.preview-phone .bottle-ghost-neck { width: 14px; height: 35px; background: #88bb99; margin: 0 auto; }
.preview-phone .bottle-ghost-shoulder { width: 50px; height: 20px; background: #88bb99; margin: 0 auto; border-radius: 0 0 16px 16px; }
.preview-phone .bottle-ghost-body { width: 50px; height: 100px; background: #88bb99; margin: 0 auto; border-radius: 3px; }
.preview-phone .bottle-ghost-base { width: 54px; height: 10px; background: #88bb99; margin: 0 auto; border-radius: 0 0 4px 4px; }

/* Crosshair */
.preview-phone .crosshair {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 240px; height: 140px;
  animation: pp-crosshairPulse 2.4s ease-in-out infinite;
}
@keyframes pp-crosshairPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50% { transform: translate(-50%, -50%) scale(1.06); }
}
.preview-phone .corner {
  position: absolute;
  width: 28px; height: 28px;
}
.preview-phone .corner.tl { top: 0; left: 0; border-top: 3px solid #40916C; border-left: 3px solid #40916C; border-radius: 12px 0 0 0; }
.preview-phone .corner.tr { top: 0; right: 0; border-top: 3px solid #40916C; border-right: 3px solid #40916C; border-radius: 0 12px 0 0; }
.preview-phone .corner.bl { bottom: 0; left: 0; border-bottom: 3px solid #40916C; border-left: 3px solid #40916C; border-radius: 0 0 0 12px; }
.preview-phone .corner.br { bottom: 0; right: 0; border-bottom: 3px solid #40916C; border-right: 3px solid #40916C; border-radius: 0 0 12px 0; }

/* Torch + Settings buttons */
.preview-phone .cam-btn {
  position: absolute;
  top: 56px;
  width: 44px; height: 44px;
  border-radius: 22px;
  background: var(--white-15);
  border: 1px solid var(--white-30);
  display: flex; align-items: center; justify-content: center;
  z-index: 15;
}
.preview-phone .cam-btn i { width: 20px; height: 20px; color: #fff; }
.preview-phone .cam-btn.left { left: 20px; }
.preview-phone .cam-btn.right { right: 20px; }

/* Panel below camera */
.preview-phone .scanner-panel {
  flex: 1;
  background: #fff;
  border-radius: 24px 24px 0 0;
  margin-top: -24px;
  position: relative;
  z-index: 20;
  border: 1px solid var(--white-60);
  border-bottom: none;
  overflow: hidden;
}
.preview-phone .scanner-panel::before {
  content: '';
  position: absolute; inset: 0;
  background: url('assets/background.png') repeat;
  background-size: 200px;
  opacity: 0.04;
}

/* FoundPanel content */
.preview-phone .found-content {
  padding: 32px 24px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.preview-phone .found-header {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 14px;
  margin-bottom: 16px;
}
.preview-phone .brand-circle {
  width: 48px; height: 48px;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.preview-phone .brand-initial { font-size: 20px; font-weight: 800; color: #fff; }
.preview-phone .found-title { font-size: 15px; font-weight: 700; color: var(--text); }
.preview-phone .found-ean {
  font-size: 10px;
  color: var(--muted-light);
  font-family: 'Menlo', monospace;
  margin-top: 2px;
}

/* Info grid */
.preview-phone .info-grid {
  display: flex; gap: 8px;
  width: 100%;
  margin-bottom: 12px;
}
.preview-phone .info-card {
  flex: 1;
  background: var(--white-70);
  border-radius: 12px;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid var(--black-06);
}
.preview-phone .info-card i { width: 16px; height: 16px; }
.preview-phone .info-card-label {
  font-size: 8px;
  color: var(--muted);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.preview-phone .info-card-value {
  font-size: 12px;
  font-weight: 700;
  color: var(--text);
  margin-top: 1px;
}

/* Nearest store btn */
.preview-phone .nearest-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--primary-surface);
  border-radius: 14px;
  padding: 14px;
  margin-bottom: 12px;
  border: 1px solid var(--primary-border);
}
.preview-phone .nearest-btn-left { display: flex; align-items: center; gap: 10px; flex: 1; }
.preview-phone .nearest-btn-left i { width: 16px; height: 16px; color: var(--primary); }
.preview-phone .nearest-name { font-size: 12px; font-weight: 600; color: var(--text); }
.preview-phone .nearest-address { font-size: 10px; color: var(--primary-light); margin-top: 1px; }
.preview-phone .nearest-dist { font-size: 11px; font-weight: 700; color: var(--primary); margin-top: 1px; }
.preview-phone .nearest-arrow { font-size: 20px; color: var(--primary); font-weight: 300; }

/* Primary CTA */
.preview-phone .primary-btn {
  width: 100%;
  height: 52px;
  border-radius: 16px;
  background: var(--coral);
  display: flex; align-items: center; justify-content: center;
  gap: 8px;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 14px; font-weight: 700;
  color: var(--text);
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  margin-top: 8px;
}
.preview-phone .primary-btn i { width: 18px; height: 18px; }

/* ══════════════════════════════════════
   SCREEN 3 - SHARE (LIST VIEW)
   ══════════════════════════════════════ */
.preview-phone .screen-share {
  width: 100%; height: 100%;
  position: relative;
  background: #f8f9fa;
  overflow: hidden;
}
.preview-phone .screen-share::before {
  content: '';
  position: absolute; inset: 0;
  background: url('assets/background.png') repeat;
  background-size: 200px;
  opacity: 0.04;
  z-index: 0;
}

.preview-phone .share-list {
  position: relative;
  z-index: 1;
  padding: 16px 0 120px;
  display: flex;
  flex-direction: column;
}

/* ShareCard */
.preview-phone .share-card {
  background: #fff;
  border-radius: 16px;
  padding: 16px;
  margin: 0 16px 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
}
.preview-phone .share-top-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.preview-phone .share-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.preview-phone .share-icon-wrap i { width: 20px; height: 20px; color: #fff; stroke-width: 2; }
.preview-phone .share-info { flex: 1; }
.preview-phone .share-title {
  font-size: 13px; font-weight: 700; color: var(--text);
  margin-bottom: 2px;
}
.preview-phone .share-meta {
  display: flex; align-items: center; gap: 4px;
  margin-bottom: 2px;
}
.preview-phone .share-meta i,
.preview-phone .share-meta svg { width: 10px; height: 10px; flex-shrink: 0; display: inline-block; }
.preview-phone .share-meta-text {
  font-size: 11px; font-weight: 500; color: var(--muted);
}
.preview-phone .share-time-row {
  display: flex; align-items: center; gap: 4px;
}
.preview-phone .share-time-row i,
.preview-phone .share-time-row svg { width: 10px; height: 10px; color: var(--muted-light); flex-shrink: 0; display: inline-block; }
.preview-phone .share-time-text { font-size: 10px; font-weight: 500; color: var(--muted-light); }
.preview-phone .share-deposit { font-size: 10px; font-weight: 700; color: var(--primary); }
.preview-phone .share-btn-row {
  display: flex; gap: 10px;
  margin-top: 12px;
}
.preview-phone .share-pickup-btn {
  flex: 1; height: 44px;
  border-radius: 12px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 700;
  color: #fff;
}

/* FAB */
.preview-phone .fab-container {
  position: absolute;
  bottom: 100px; right: 20px;
  width: 56px; height: 56px;
  z-index: 60;
}
.preview-phone .fab-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--primary);
  animation: pp-ringPulse 2s ease-out infinite;
}
.preview-phone .fab-ring:nth-child(2) { animation-delay: 700ms; }
@keyframes pp-ringPulse {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}
.preview-phone .fab-btn {
  position: relative;
  width: 56px; height: 56px;
  border-radius: 28px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 6px 12px rgba(45,106,79,0.35);
  z-index: 2;
}
.preview-phone .fab-btn i { width: 28px; height: 28px; color: #fff; stroke-width: 2.5; }

/* ══════════════════════════════════════
   SCREEN 4 - SHARE MAP VIEW
   ══════════════════════════════════════ */
/* ShareMarker pill */
.preview-phone .share-marker {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}
.preview-phone .share-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #fff;
  border: 2px solid;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.preview-phone .share-pill i { width: 18px; height: 18px; stroke-width: 2.5; }
.preview-phone .share-pill-count {
  font-size: 13px;
  font-weight: 700;
}
.preview-phone .share-pill.selected { color: #fff !important; }
.preview-phone .share-pill.selected i { color: #fff !important; }
.preview-phone .share-pill.selected .share-pill-count { color: #fff !important; }
.preview-phone .share-pill.reserved { border-color: #d1d5db; }
.preview-phone .share-pill.reserved i { color: #9ca3af; }
.preview-phone .share-pill.reserved .share-pill-count {
  color: #9ca3af;
  font-variant-numeric: tabular-nums;
}
.preview-phone .share-pill-arrow {
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  margin-top: -1px;
}

/* ShareMapCard */
.preview-phone .share-map-card {
  position: absolute;
  bottom: 100px;
  left: 16px; right: 16px;
  border-radius: 20px;
  padding: 20px;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--white-30);
  box-shadow: 0 -4px 16px rgba(0,0,0,0.15);
  z-index: 50;
}
.preview-phone .share-map-card .close-btn {
  position: absolute;
  top: 12px; right: 20px;
  width: 28px; height: 28px;
  border-radius: 14px;
  background: #F3F4F6;
  display: flex; align-items: center; justify-content: center;
}
.preview-phone .share-map-card .close-btn i { width: 18px; height: 18px; color: var(--muted-light); stroke-width: 2.5; }
.preview-phone .smc-top-row {
  display: flex; align-items: center; gap: 12px;
  margin-bottom: 10px;
}
.preview-phone .smc-icon-wrap {
  width: 40px; height: 40px;
  border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
}
.preview-phone .smc-icon-wrap i { width: 20px; height: 20px; color: #fff; stroke-width: 2; }
.preview-phone .smc-info { flex: 1; }
.preview-phone .smc-title { font-size: 14px; font-weight: 700; color: var(--text); margin-bottom: 2px; }
.preview-phone .smc-meta {
  display: flex; align-items: center; gap: 4px;
}
.preview-phone .smc-meta i { width: 12px; height: 12px; }
.preview-phone .smc-meta-text { font-size: 11px; font-weight: 600; color: var(--primary-light); }
.preview-phone .smc-info-row {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 3px;
  margin-bottom: 12px;
}
.preview-phone .smc-info-row i,
.preview-phone .smc-info-row svg { width: 10px; height: 10px; color: var(--muted); flex-shrink: 0; display: inline-block; }
.preview-phone .smc-pickup-btn {
  width: 100%; height: 44px;
  border-radius: 12px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 13px; font-weight: 700; color: #fff;
}

/* ══════════════════════════════════════
   SCREEN 5 - SUCCESS POPUP
   ══════════════════════════════════════ */
.preview-phone .success-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}
.preview-phone .success-card {
  background: #fff;
  border-radius: 24px;
  padding: 28px 22px;
  width: 85%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview-phone .success-party-icon {
  width: 56px; height: 56px;
  border-radius: 18px;
  background: var(--sand);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.preview-phone .success-party-icon i,
.preview-phone .success-party-icon svg { width: 30px; height: 30px; color: var(--primary); }
.preview-phone .success-heading {
  font-size: 20px;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 3px;
  text-align: center;
}
.preview-phone .success-subheading {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 16px;
  text-align: center;
}
.preview-phone .success-achieved-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--muted-light);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.preview-phone .milestones-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-bottom: 4px;
}
.preview-phone .milestone-card {
  width: 46%;
  background: transparent;
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.preview-phone .milestone-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.preview-phone .milestone-icon i,
.preview-phone .milestone-icon svg { width: 20px; height: 20px; color: var(--primary); }
.preview-phone .milestone-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--text);
  text-align: center;
  line-height: 1.35;
}
.preview-phone .success-ok-btn {
  width: 100%;
  height: 44px;
  border-radius: 14px;
  background: var(--primary);
  display: flex; align-items: center; justify-content: center;
  border: none;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', sans-serif;
  font-size: 14px; font-weight: 700; color: #fff;
  margin-top: 16px;
}

/* ══════════════════════════════════════
   INTERACTIVITY - hover, cursors, transitions, animations
   ══════════════════════════════════════ */

/* Header buttons */
.preview-phone .header-btn {
  cursor: pointer;
  transition: background 0.2s;
}
.preview-phone .header-btn:hover { background: var(--white-30); }

/* Logo markers on map */
.preview-phone .logo-marker {
  cursor: pointer;
  transition: transform 0.15s;
}
.preview-phone .logo-marker:hover { transform: scale(1.1); }

/* Share markers on map */
.preview-phone .share-marker {
  cursor: pointer;
  transition: transform 0.15s;
}
.preview-phone .share-marker:hover { transform: scale(1.1); }

/* Store card - slide-up animation */
.preview-phone .store-card {
  animation: pp-slideUp 0.4s cubic-bezier(0.22,1,0.36,1);
}
.preview-phone .share-map-card {
  animation: pp-slideUp 0.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes pp-slideUp {
  from { transform: translateY(80px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

/* Navigate button */
.preview-phone .navigate-btn {
  cursor: pointer;
  transition: background 0.2s;
}
.preview-phone .navigate-btn:hover { background: var(--primary-light); }

/* Face buttons */
.preview-phone .face-btn {
  cursor: pointer;
  transition: all 0.15s;
}
.preview-phone .face-btn:hover { opacity: 0.8; }

/* Info cards (scanner result) */
.preview-phone .info-card {
  transition: transform 0.2s;
  cursor: default;
}
.preview-phone .info-card:hover { transform: translateY(-2px); }

/* Nearest store button */
.preview-phone .nearest-btn {
  cursor: pointer;
  transition: transform 0.15s;
}
.preview-phone .nearest-btn:hover { transform: scale(1.02); }

/* Primary CTA (coral button) */
.preview-phone .primary-btn {
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.preview-phone .primary-btn:hover { background: #e8b96e; transform: scale(1.02); }

/* Share cards */
.preview-phone .share-card {
  cursor: pointer;
  transition: transform 0.15s;
}
.preview-phone .share-card:hover { transform: translateY(-2px); }

/* Share pickup button */
.preview-phone .share-pickup-btn {
  cursor: pointer;
  transition: background 0.2s;
}
.preview-phone .share-pickup-btn:hover { background: var(--primary-light); }

/* FAB button */
.preview-phone .fab-btn {
  cursor: pointer;
  transition: transform 0.2s;
}
.preview-phone .fab-btn:hover { transform: scale(1.1); }

/* SMC pickup button */
.preview-phone .smc-pickup-btn {
  cursor: pointer;
  transition: background 0.2s;
}
.preview-phone .smc-pickup-btn:hover { background: var(--primary-light); }

/* Close button on share map card */
.preview-phone .share-map-card .close-btn {
  cursor: pointer;
  transition: background 0.15s;
}
.preview-phone .share-map-card .close-btn:hover { background: #e5e7eb; }

/* Success popup animation */
.preview-phone .success-card {
  animation: pp-successPop 0.4s cubic-bezier(0.22,1,0.36,1);
}
@keyframes pp-successPop {
  from { transform: scale(0.85); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Success OK button */
.preview-phone .success-ok-btn {
  cursor: pointer;
  transition: background 0.2s;
}
.preview-phone .success-ok-btn:hover { background: var(--primary-light); }

/* Tab bar items */
.preview-phone .tab-item {
  cursor: pointer;
  transition: opacity 0.15s;
}
.preview-phone .tab-item:hover { opacity: 0.7; }

/* Camera buttons (torch/settings) */
.preview-phone .cam-btn {
  cursor: pointer;
  transition: background 0.2s;
}
.preview-phone .cam-btn:hover { background: var(--white-30); }

/* Scanner idle panel animations */
.preview-phone .idle-ring {
  animation: pp-ringPulse 2s ease-out infinite;
}
.preview-phone .idle-ring:nth-child(2) { animation-delay: 700ms; }
.preview-phone .idle-arrow {
  animation: pp-bounce 1.6s ease-in-out infinite;
}
@keyframes pp-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(6px); }
}

/* My location button (inline style, but add pointer) */
.preview-phone [data-lucide="locate-fixed"] {
  cursor: pointer;
}

/* ── SCALING & LAYOUT ─────────────────────── */

/*
  transform: scale() doesn't change layout size, so we use a wrapper
  with explicit dimensions matching the visual size, and position the
  phone-frame absolutely inside it.
*/

/*
  Frame is 387×824 (375+12 padding × 812+12 padding).
  Wrapper dimensions = frame × scale.
*/

/* Hero CENTER phone - Scanner (scale 0.62) */
/* 387*0.62=240, 824*0.62=511 */
.preview-phone.preview-phone--hero {
  position: relative;
  width: 240px;
  height: 511px;
  z-index: 3;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1);
}
.preview-phone.preview-phone--hero .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.62);
  transform-origin: top left;
}
.preview-phone.preview-phone--hero:hover {
  transform: scale(1.06);
  z-index: 5;
}

/* Hero SIDE phones - Map & Share Map (scale 0.48) */
/* 387*0.48=186, 824*0.48=396 */
.preview-phone.preview-phone--hero-side {
  position: relative;
  width: 186px;
  height: 396px;
  z-index: 1;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), z-index 0s;
}
.preview-phone.preview-phone--hero-side .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.48);
  transform-origin: top left;
}

/* Left side - rotated, hover: straighten + scale up + come forward */
.preview-phone.preview-phone--left {
  transform: rotate(-6deg);
}
.preview-phone.preview-phone--left:hover {
  transform: rotate(-2deg) scale(1.15) translateX(10px);
  z-index: 5;
}

/* Right side - rotated, hover: straighten + scale up + come forward */
.preview-phone.preview-phone--right {
  transform: rotate(5deg);
}
.preview-phone.preview-phone--right:hover {
  transform: rotate(1deg) scale(1.15) translateX(-10px);
  z-index: 5;
}

/* App section phones - Share List & Success (scale 0.48) */
/* 387*0.48=186, 824*0.48=396 */
.preview-phone.preview-phone--app {
  position: relative;
  width: 186px;
  height: 396px;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), filter 0.4s ease, z-index 0s;
}
.preview-phone.preview-phone--app .phone-frame {
  position: absolute;
  top: 0;
  left: 0;
  transform: scale(0.48);
  transform-origin: top left;
}

/* App phones - hover handled on .app-phone in styles.css */

/* ── RESPONSIVE ─────────────────────── */
@media (max-width: 768px) {
  /* hero center: scale 0.52 → 387*0.52=201, 824*0.52=428 */
  .preview-phone.preview-phone--hero {
    width: 201px;
    height: 428px;
  }
  .preview-phone.preview-phone--hero .phone-frame {
    transform: scale(0.52);
  }

  /* hero side: scale 0.38 → 387*0.38=147, 824*0.38=313 */
  .preview-phone.preview-phone--hero-side {
    width: 147px;
    height: 313px;
  }
  .preview-phone.preview-phone--hero-side .phone-frame {
    transform: scale(0.38);
  }

  /* app: scale 0.38 */
  .preview-phone.preview-phone--app {
    width: 147px;
    height: 313px;
  }
  .preview-phone.preview-phone--app .phone-frame {
    transform: scale(0.38);
  }
}

@media (max-width: 480px) {
  /* hero center: scale 0.38 → 387*0.38=147, 824*0.38=313 */
  .preview-phone.preview-phone--hero {
    width: 147px;
    height: 313px;
  }
  .preview-phone.preview-phone--hero .phone-frame {
    transform: scale(0.38);
  }

  /* hero side: scale 0.26 → 387*0.26=101, 824*0.26=214 */
  .preview-phone.preview-phone--hero-side {
    width: 101px;
    height: 214px;
  }
  .preview-phone.preview-phone--hero-side .phone-frame {
    transform: scale(0.26);
  }

  /* Override inline margins/margin-top on small screens */
  .preview-phone.preview-phone--left {
    margin-top: 24px !important;
    margin-right: -10px !important;
  }
  .preview-phone.preview-phone--right {
    margin-top: 30px !important;
    margin-left: -10px !important;
  }

  /* app: scale 0.34 → 387*0.34=132, 824*0.34=280 */
  .preview-phone.preview-phone--app {
    width: 132px;
    height: 280px;
  }
  .preview-phone.preview-phone--app .phone-frame {
    transform: scale(0.34);
  }
}