/* YFi shared popup primitive — bottom sheet ≤760px, center card desktop.
   Animations: transform/opacity only. No layout thrash. */
:root{
  --yfi-popup-backdrop:rgba(15,23,42,.42);
  --yfi-popup-panel-bg:#fff;
  --yfi-popup-ink:#0F172A;
  --yfi-popup-muted:#64748B;
  --yfi-popup-line:#E2E8F0;
  --yfi-popup-navy:#102d40;
  --yfi-popup-blue:#285deb;
  --yfi-popup-lime:#dfff9c;
  --yfi-popup-whatsapp:#25D366;
  --yfi-popup-android:#3DDC84;
  --yfi-popup-z:3200;
  --yfi-popup-radius-sheet:24px 24px 0 0;
  --yfi-popup-radius-card:24px;
  --yfi-popup-duration:.22s;
  --yfi-popup-ease:cubic-bezier(.22,1,.36,1);
}

.yfi-popup-backdrop{
  position:fixed;inset:0;z-index:var(--yfi-popup-z);
  display:flex;align-items:flex-end;justify-content:center;
  padding:0;
  background:var(--yfi-popup-backdrop);
  /* Keep backdrop color painted before opacity animates — avoids white flash */
  -webkit-backdrop-filter:blur(5px);
  backdrop-filter:blur(5px);
  opacity:0;
  pointer-events:none;
  transition:opacity var(--yfi-popup-duration) var(--yfi-popup-ease);
}
.yfi-popup-backdrop.is-open{
  opacity:1;
  pointer-events:auto;
}

.yfi-popup-panel{
  position:relative;
  display:flex;
  flex-direction:column;
  background:var(--yfi-popup-panel-bg);
  color:var(--yfi-popup-ink);
  width:100%;
  max-width:480px;
  max-height:min(92svh,720px);
  border-radius:var(--yfi-popup-radius-sheet);
  box-shadow:0 -8px 40px rgba(15,23,42,.14);
  /* Clip children so headers don't square-paint over radius (desktop card + mobile sheet) */
  overflow:hidden;
  /* transform/opacity only */
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:
    opacity var(--yfi-popup-duration) var(--yfi-popup-ease),
    transform var(--yfi-popup-duration) var(--yfi-popup-ease);
  padding-bottom:max(16px,env(safe-area-inset-bottom,0px));
  outline:none;
}
.yfi-popup-backdrop.is-open .yfi-popup-panel{
  opacity:1;
  transform:translate3d(0,0,0);
}

.yfi-popup-handle{
  width:36px;height:4px;border-radius:2px;
  background:#E2E8F0;margin:12px auto 0;
}
.yfi-popup-close{
  position:absolute;top:12px;right:12px;
  min-width:44px;min-height:44px;
  border-radius:12px;
  background:#F1F5F9;border:1px solid var(--yfi-popup-line);
  color:var(--yfi-popup-muted);
  display:inline-flex;align-items:center;justify-content:center;
  font-size:20px;line-height:1;cursor:pointer;
  font-family:inherit;touch-action:manipulation;
}
.yfi-popup-close:hover{background:#E2E8F0}

/* Phones: the sheet is dismissed by swiping it down or tapping the page behind
   it, the way every other sheet on a phone works — and the grab handle above
   says so. A floating X on top of that is a second target for the same job, and
   a tap on it is exactly the tap a phone is most likely to swallow. It stays in
   the page for keyboard and screen-reader users, just not on screen. */
@media (max-width:760px){
  .yfi-popup-close{
    position:absolute;width:1px;height:1px;min-width:0;min-height:0;
    padding:0;margin:-1px;border:0;overflow:hidden;white-space:nowrap;
    clip:rect(0 0 0 0);clip-path:inset(50%);
  }
  .yfi-popup-close:focus-visible{
    width:44px;height:44px;min-width:44px;min-height:44px;margin:0;
    top:12px;right:12px;clip:auto;clip-path:none;overflow:visible;
    border:1px solid var(--yfi-popup-line);background:#F1F5F9;
  }
  /* a slightly bolder handle, since it is now the only thing pointing at the gesture */
  .yfi-popup-handle{width:44px;height:5px;background:#CBD5E1;margin-top:10px}
}
.yfi-popup-body{
  padding:16px 20px 8px;
  flex:1;
  min-height:0;
  overflow:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}

/* Desktop: centered card */
@media (min-width:761px){
  .yfi-popup-backdrop{
    align-items:center;
    padding:24px;
  }
  .yfi-popup-panel{
    border-radius:var(--yfi-popup-radius-card); /* 24px all corners */
    overflow:hidden;
    max-height:min(88vh,720px);
    box-shadow:0 24px 64px rgba(15,23,42,.18);
    transform:translate3d(0,10px,0) scale(.98);
  }
  .yfi-popup-backdrop.is-open .yfi-popup-panel{
    transform:translate3d(0,0,0) scale(1);
  }
  .yfi-popup-handle{display:none}
}

@media (prefers-reduced-motion:reduce){
  .yfi-popup-backdrop,
  .yfi-popup-panel{
    transition:none !important;
    animation:none !important;
  }
  .yfi-popup-backdrop.is-open .yfi-popup-panel{
    transform:none;
  }
}

/* Action buttons — ≥44px */
.yfi-popup-actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.yfi-popup-btn{
  min-height:44px;
  padding:12px 16px;
  border-radius:12px;
  border:none;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  touch-action:manipulation;
  transition:opacity .15s ease, transform .15s ease;
}
.yfi-popup-btn:disabled{opacity:.55;cursor:not-allowed}
.yfi-popup-btn-primary{
  background:var(--yfi-popup-blue);
  color:#fff;
  border:1.5px solid var(--yfi-popup-blue);
  box-shadow:0 4px 14px rgba(40,93,235,.22);
}
.yfi-popup-btn-primary:hover:not(:disabled){background:#1f4fd4;border-color:#1f4fd4}
.yfi-popup-btn-primary:active:not(:disabled){transform:scale(.98)}
.yfi-popup-btn-navy{
  background:var(--yfi-popup-navy);
  color:#fff;
}
.yfi-popup-btn-lime{
  background:var(--yfi-popup-lime);
  color:var(--yfi-popup-navy);
}
.yfi-popup-btn-ghost{
  background:#fff;
  color:#374151;
  border:1.5px solid var(--yfi-popup-line);
}
/* Brand CTAs */
.yfi-popup-btn-apple{
  background:#000;
  color:#fff;
}
.yfi-popup-btn-apple.yfi-popup-btn-apple-light{
  background:#fff;
  color:#000;
  border:1.5px solid #111;
}
.yfi-popup-btn-android{
  background:#0B1F14;
  color:#fff;
  box-shadow:inset 0 0 0 2px var(--yfi-popup-android);
}
.yfi-popup-btn-android .yfi-popup-brand-dot,
.yfi-popup-android-accent{color:var(--yfi-popup-android)}
.yfi-popup-btn-whatsapp{
  background:var(--yfi-popup-whatsapp);
  color:#fff;
}


/* Secondary = white/soft + border (DS alternate path) */
.yfi-popup-btn-secondary{
  background:#fff;
  color:var(--yfi-popup-ink);
  border:1.5px solid var(--yfi-popup-line);
}
.yfi-popup-btn-secondary:hover:not(:disabled){background:#f4f7fa;border-color:#c9d7e2}
.yfi-popup-btn-danger{
  background:#d92d20;
  color:#fff;
  border:1.5px solid #d92d20;
}
.yfi-popup-btn-danger:hover:not(:disabled){background:#b42318;border-color:#b42318}

/* Legacy gm-* button bridges → shared popup button system (navy CTA retired) */
.gm-btn{
  width:100%;
  min-height:44px;
  padding:12px 16px;
  border-radius:12px;
  border:1.5px solid transparent;
  font-family:inherit;
  font-size:15px;
  font-weight:700;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  touch-action:manipulation;
  transition:opacity .15s ease, transform .15s ease, background .15s ease, border-color .15s ease;
}
.gm-btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.gm-btn-primary{
  background:var(--yfi-popup-blue);
  color:#fff;
  border-color:var(--yfi-popup-blue);
  box-shadow:0 4px 14px rgba(40,93,235,.22);
}
.gm-btn-primary:hover:not(:disabled){background:#1f4fd4;border-color:#1f4fd4}
.gm-btn-primary:active:not(:disabled){transform:scale(.98)}
.gm-btn-secondary{
  background:#fff;
  color:#374151;
  border-color:var(--yfi-popup-line);
}
.gm-btn-secondary:hover:not(:disabled){background:#f4f7fa;border-color:#c9d7e2}

/* Legacy class bridges — GuestModal / coverage / sheets adopt shared geometry */
.yfi-popup-backdrop.gm-backdrop,
.gm-backdrop.yfi-popup-backdrop{z-index:3000}
.gm-card.yfi-popup-panel,
.yfi-popup-panel.gm-card{/* panel rules above */}

/* When open class not used yet (SSR/first paint), still paint panel bg to avoid flash */
.gm-card{background:#fff}