/* =========================================================
   PARKLY — desktop booking modal (new reservation flow).
   Chrome for the desktop "Réserver ma place" CTA card + the 3-step
   modal rendered by assets/parkly-booking-modal.js. Faithful to the
   handoff "Flux de réservation desktop" (layout A — rail récap).

   Scope: ALL SCREENS. The CTA card shows in the hero on every width and
   opens the 3-step modal. On desktop (≥761px) the modal is a centered
   960px panel with the cobalt rail; on mobile (≤760px) it becomes a
   full-width bottom sheet and every surpopup becomes a bottom sheet too
   (handoff §92–97). The old inline funnel is no longer used on the home.
   ========================================================= */

/* ---- Hero CTA card (shown on every width) ---- */
.pk-book-card { display: block; }

/* ---- Animations ----
   Entry animations apply ONLY via the `pk-anim-in` class, which the JS adds
   for a single render (on open / step-open). Because the whole modal HTML is
   rebuilt on every interaction, putting the animation on the base element
   would replay it each time and make the panel/sheet "jump" or re-open. */
@keyframes pkPanel { from { transform: translateY(14px) scale(.985); opacity: .6; } to { transform: none; opacity: 1; } }
@keyframes pkPop   { from { transform: translateY(-6px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes pkStep  { from { transform: translateX(16px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes pkSheet { from { transform: translateY(100%); } to { transform: none; } }
@keyframes pkSpin  { to { transform: rotate(360deg); } }

/* Desktop entry animations (gated by the class so they play once). */
.pk-panel.pk-anim-in { animation: pkPanel .28s cubic-bezier(.22, .61, .36, 1); }
.pk-cal-card > div.pk-anim-in { animation: pkPop .18s ease; }

/* ---- Scrollbars ---- */
.pk-scroll::-webkit-scrollbar { width: 9px; }
.pk-scroll::-webkit-scrollbar-thumb { background: rgba(22, 20, 28, .18); border-radius: 9px; }
.pk-scroll::-webkit-scrollbar-track { background: transparent; }
.cal-times::-webkit-scrollbar { width: 7px; }
.cal-times::-webkit-scrollbar-thumb { background: rgba(22, 20, 28, .16); border-radius: 7px; }
.cal-times::-webkit-scrollbar-track { background: transparent; }

/* ---- Mobile: panel + surpopups become bottom sheets (≤760px) ---- */
@media (max-width: 760px) {
  /* Mobile = full-screen page, not a floating sheet. The overlay is opaque
     (app background) and edge-to-edge so the landing page can NEVER show behind
     the panel — not even during the open animation or when the iOS keyboard is
     up. The panel fills it completely (100dvh, no rounded corners, no shadow).
     `dvh` tracks the visible area, so with interactive-widget=resizes-content
     the whole page shrinks above the keyboard and the panel follows. */
  .pk-overlay {
    place-items: stretch !important;
    padding: 0 !important;
    inset: 0 !important;
    background: #F7F6F3 !important;   /* opaque app bg — nothing behind is ever visible */
    box-sizing: border-box;
    overflow: hidden;
    overscroll-behavior: contain;
  }
  .pk-panel {
    width: 100% !important; max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  /* The sheet slides up only on open (class present), not on every re-render. */
  .pk-panel.pk-anim-in { animation: pkSheet .32s cubic-bezier(.22, .61, .36, 1) !important; }
  .pk-rail { display: none !important; }     /* rail hidden on mobile */
  /* Two columns stack. minmax(0,1fr) (not plain 1fr) lets the single track
     shrink to the sheet width: a bare 1fr keeps an implicit min-content floor,
     and the inputs' default ~20-char intrinsic width would push that track
     wider than the sheet, letting step 2 (coordonnées) scroll sideways. */
  .pk-2col { grid-template-columns: minmax(0, 1fr) !important; }
  .pk-2col > * { min-width: 0 !important; }  /* let children shrink below content size */

  /* Footer fits the narrow width: the redundant total block (already shown in
     the body and on the CTA) is dropped, and the primary CTA takes the
     remaining space so its label never clips or wraps off-screen. */
  .pk-header { padding-top: max(20px, env(safe-area-inset-top)) !important; }
  .pk-footer { padding: 14px 18px !important; gap: 10px !important; }
  .pk-footer__total { display: none !important; }
  .pk-footer__back { flex: none !important; padding: 0 16px !important; }
  .pk-footer__primary { flex: 1 1 auto !important; min-width: 0 !important; padding: 0 16px !important; }
  .pk-scroll {
    padding-bottom: calc(18px + env(safe-area-inset-bottom)) !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain !important;  /* keep scroll INSIDE the panel, never chain to the body */
  }

  /* Every surpopup (calendar / flight / vehicle) becomes a full-screen
     overlay with the card docked to the bottom — a real bottom sheet. */
  .pk-cal-overlay {
    position: fixed !important; inset: 0 !important; z-index: 1100 !important;
    place-items: end stretch !important;
    padding: 0 0 var(--kb, 0px) !important;
    box-sizing: border-box;
    width: 100vw !important;
    max-width: 100vw !important;
    overflow: hidden !important;
  }
  .pk-cal-card {
    width: 100vw !important;
    max-width: 100vw !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
  }
  .pk-cal-card > div {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 22px 22px 0 0 !important;
    border-left: none !important; border-right: none !important; border-bottom: none !important;
    max-height: min(84vh, calc(100dvh - var(--kb, 0px) - 10px)) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, .32) !important;
  }
  .pk-kbd-open .pk-footer { display: none !important; }
  .pk-kbd-open .pk-scroll { padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important; }
  /* iOS keyboard: no darkening while typing. The main panel is already an opaque
     full-screen page, so only the surpopup dim (calendar / vehicle / country
     sheet) needs to fade out — never the main overlay, which must stay opaque so
     the landing page is never revealed. */
  .pk-kbd-open .pk-cal-overlay { background: transparent !important; }
  /* Stay full-screen while typing — the field is brought above the keyboard by
     the panel's own internal scroll, the panel itself does not resize/reposition. */
  .pk-kbd-open .pk-panel {
    height: 100dvh !important;
    max-height: 100dvh !important;
  }
  /* Surpopup sheet slides up only when it opens, not while typing in it. */
  .pk-cal-card > div.pk-anim-in { animation: pkSheet .3s cubic-bezier(.22, .61, .36, 1) !important; }
}

/* Flight sheet polish: keep route/changer controls and manual inputs inside
   narrow iPhone widths, and make the action states look intentional. */
.pk-pop-panel { max-width: 100%; overflow-x: hidden; }
.pk-pop-close { flex: none; }
.pk-flight-route {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; min-width: 0;
}
.pk-flight-route__label {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pk-flight-manual-fields { display: flex; gap: 8px; }
.pk-flight-manual-input { min-width: 0; }
.pk-flight-manual-time { flex: 0 0 120px; }
.pk-flight-manual-btn { box-shadow: 0 4px 14px rgba(8,66,202,.28); }

@media (max-width: 420px) {
  .pk-flight-route { align-items: flex-start; }
  .pk-flight-route__label { white-space: normal; line-height: 1.35; }
  .pk-flight-manual-fields { flex-direction: column; }
  .pk-flight-manual-time { flex: 0 0 auto; width: 100% !important; }
  .pk-flight-manual-btn { min-height: 50px !important; }
}

/* Very narrow iPhones need shorter copy and tighter chrome so the primary
   action stays inside the sheet instead of clipping against the back button. */
@media (max-width: 360px) {
  .pk-panel { height: 100dvh !important; max-height: 100dvh !important; border-radius: 0 !important; }
  .pk-header { padding: 20px 18px 4px !important; }
  .pk-header h2 { font-size: 22px !important; }
  .pk-scroll { padding: 14px 18px calc(20px + env(safe-area-inset-bottom)) !important; }
  .pk-footer { padding: 12px 18px !important; gap: 8px !important; }
  .pk-footer__back { min-width: 104px !important; padding: 0 12px !important; }
  .pk-footer__primary { padding: 0 12px !important; font-size: 15px !important; gap: 6px !important; }
  .pk-primary-price { display: none; }
  .pk-cal-card > div { max-height: 82dvh !important; }
  .cal-times { padding-bottom: 70px !important; }
}