/* Booking card / bottom sheet, 3-step form, success ticket, CTA bar — DESIGN.md §4.3–4.4, §7.
   Progressive enhancement: without JS (no `.js` on <html>) every step is visible and the
   panel renders inline. With JS the form shows one step at a time (data-step on the form,
   set server-side too so 422 re-renders open on the step with the first error). */

.booking {
  background: var(--surface);
  border-radius: var(--r-2);
  box-shadow: 0 0 0 1.5px var(--ink);
  scroll-margin-top: calc(var(--header-h) + var(--s-4));
}
.booking__head { padding: var(--s-5) var(--s-5) 0; display: grid; gap: var(--s-2); position: relative; background: var(--surface); border-radius: var(--r-2) var(--r-2) 0 0; }
.booking__head h2 { font-size: var(--step-2); font-weight: 800; font-stretch: 80%; line-height: 1.05; }
.booking__head h2:focus { outline: none; }
.booking__grab, .booking__close { display: none; }
.booking__change { font-size: var(--step--1); color: var(--ink-2); }

/* Progress: three road segments */
.progress { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; list-style: none; margin: var(--s-3) 0 0; padding: 0; }
.js .progress { display: grid; }
.progress li { display: grid; gap: 6px; font: 500 0.6875rem/1.2 var(--font-mono); text-transform: uppercase; color: var(--ink-3); letter-spacing: .02em; }
.progress li::before { content: ""; height: 4px; border-radius: 1px; background-color: var(--paper-sunk);
  background-image: linear-gradient(var(--accent), var(--accent)); background-repeat: no-repeat; background-size: 0% 100%;
  transition: background-size var(--dur-step) var(--ease-in-out); }
.progress li[data-state="done"]::before, .progress li[data-state="current"]::before { background-size: 100% 100%; }
.progress li[data-state="current"] { color: var(--ink); }
.progress li[data-state="done"] { color: var(--ink-2); }

/* Recap of earlier answers under the progress bar: "JUTRO · RANO · KRAKÓW  Zmień" */
.booking__recap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--s-3); margin-top: var(--s-2);
  font: 500 0.6875rem/1.4 var(--font-mono); text-transform: uppercase; letter-spacing: .02em; color: var(--ink-2); }
.booking__recap-edit { padding: 6px 0; margin-block: -6px; border: 0; background: none; cursor: pointer;
  font: 600 var(--step--1)/1 var(--font-body); text-transform: none; letter-spacing: 0; color: var(--accent);
  text-decoration: underline; text-underline-offset: 3px; }

.booking-form { padding: var(--s-5); display: grid; gap: var(--s-5); overflow-x: clip; }
.form-alert { display: grid; gap: var(--s-1); }
.form-alert ul { margin: 0; padding-left: 1.1em; }
.form-alert:focus { outline: none; }

.fstep { display: grid; gap: var(--s-5); border: 0; margin: 0; padding: 0; min-width: 0; }
.fstep > legend { float: left; width: 100%; padding: 0; margin-bottom: var(--s-1);
  font: 700 var(--step-1)/1.15 var(--font-display); font-stretch: 85%; }
.fstep > legend + * { clear: both; }
.fstep > legend small { display: block; font: 500 0.6875rem/1.4 var(--font-mono); text-transform: uppercase; color: var(--ink-3); letter-spacing: .02em; }
.fstep + .fstep { padding-top: var(--s-5); border-top: var(--hairline); }
.js .fstep + .fstep { padding-top: 0; border-top: 0; }
.js .fstep > legend { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; margin: 0; float: none; }
.js .booking-form[data-step="1"] .fstep:not([data-step="1"]),
.js .booking-form[data-step="2"] .fstep:not([data-step="2"]),
.js .booking-form[data-step="3"] .fstep:not([data-step="3"]) { display: none; }
.fstep.is-in-forward { animation: step-in-f var(--dur-step) var(--ease-out) both; }
.fstep.is-in-back    { animation: step-in-b var(--dur-step) var(--ease-out) both; }
@keyframes step-in-f { from { opacity: 0; transform: translateX(24px); } }
@keyframes step-in-b { from { opacity: 0; transform: translateX(-24px); } }

.car-fixed { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }

/* Navigation row */
.form-nav { display: flex; gap: var(--s-3); align-items: center; }
.form-nav .btn--signal { flex: 1; }
.form-nav .back { flex: none; width: 56px; min-height: 56px; padding: 0; font-size: var(--step-1); }
.form-nav .back:not(.is-shown) { display: none; }
.label-next { display: none; }
.js .booking-form:not([data-step="3"]) .label-next { display: inline; }
.js .booking-form:not([data-step="3"]) .label-submit { display: none; }
.form-foot { font-size: var(--step--1); color: var(--ink-3); margin-top: calc(var(--s-3) * -1); }
.form-legal { font-size: 0.75rem; line-height: 1.45; color: var(--ink-3); margin-top: calc(var(--s-2) * -1); }
.form-legal a { color: var(--ink-2); }

/* ---------- Success ticket ------------------------------------------- */
.success { display: grid; gap: var(--s-4); padding: var(--s-5); }
.success__icon { width: 48px; height: 48px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; }
/* The circle lands first (never from scale 0), then the check draws. */
.success > .success__icon { animation: icon-land 360ms var(--ease-out) both; }
@keyframes icon-land { from { opacity: 0; transform: scale(.8); } }
.success__icon path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: draw 300ms 220ms var(--ease-out) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h2 { font-size: var(--step-3); font-stretch: 78%; font-weight: 800; line-height: 1; }
.success h2:focus { outline: none; }
.ticket { border: 1.5px solid var(--ink); border-radius: var(--r-2); background: var(--paper); }
.ticket__top { padding: var(--s-4); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--s-3); border-bottom: 2px dashed var(--line-input); }
.ticket__plate { font: 700 var(--step-1)/1 var(--font-mono); letter-spacing: .06em; padding: 8px 10px 8px 30px; border: 1.5px solid var(--ink); border-radius: 3px; background: #fff; position: relative; white-space: nowrap; }
/* EU-style strip: plain blue block with "PL" (no flag artwork) */
.ticket__plate::before { content: "PL"; position: absolute; left: 0; top: 0; bottom: 0; width: 20px; display: grid; align-items: end; justify-items: center; padding-bottom: 5px;
  background: var(--accent); color: var(--accent-ink); font: 700 0.5625rem/1 var(--font-mono); letter-spacing: 0; border-radius: 1px 0 0 1px; }
.ticket dl { margin: 0; padding: var(--s-4); display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-2) var(--s-4); font-size: var(--step--1); }
.ticket dt { font: 500 0.6875rem/1.6 var(--font-mono); text-transform: uppercase; color: var(--ink-3); }
.ticket dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.success .next { color: var(--ink-2); font-size: var(--step--1); }
.success .next ol { margin: var(--s-2) 0 0; padding-left: 1.2em; display: grid; gap: var(--s-1); }
.success > * { animation: rise 320ms var(--ease-out) both; }
.success > *:nth-child(2) { animation-delay: 50ms; }
.success > *:nth-child(3) { animation-delay: 100ms; }
.success > *:nth-child(4) { animation-delay: 150ms; }
.success > *:nth-child(n+5) { animation-delay: 200ms; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
/* The reference plate is the "it's real" moment: a small stamp after the ticket rises. The only bounce
   on the site (~4 % overshoot). No digit scramble — the number must be readable for the phone call. */
.success .ticket__plate { animation: plate-stamp 280ms 380ms cubic-bezier(0.34, 1.36, 0.64, 1) both; }
@keyframes plate-stamp { from { opacity: 0; transform: scale(1.12) rotate(-2deg); } }
/* A stored ticket (same model, same session) is not a new event — it is simply there. */
.success--stored > *, .success--stored .ticket__plate, .success--stored .success__icon path { animation: none; }
.success--stored .success__icon path { stroke-dashoffset: 0; }
.success [data-sheet-only] { display: none; }
.stored-note { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); align-items: baseline; font-size: var(--step--1); color: var(--ink-2); }
.stored-note button { background: none; border: 0; padding: 6px 0; cursor: pointer; }

/* ---------- Sticky CTA bar (mobile, model page) ----------------------- */
.cta-bar { position: fixed; z-index: 35; left: 0; right: 0; bottom: 0;
  padding: var(--s-3) var(--gutter) calc(var(--s-3) + env(safe-area-inset-bottom));
  background: var(--paper); background: color-mix(in srgb, var(--paper) 94%, transparent); border-top: var(--hairline);
  display: none; gap: var(--s-3); align-items: center;
  transform: translateY(0); transition: transform var(--dur-base) var(--ease-out); }
.js .cta-bar { display: flex; }
@supports (backdrop-filter: blur(8px)) { .cta-bar { backdrop-filter: blur(12px) saturate(1.4); background: color-mix(in srgb, var(--paper) 80%, transparent); } }
.cta-bar.is-hidden { transform: translateY(110%); }
.cta-bar__txt { display: grid; line-height: 1.2; min-width: 0; }
.cta-bar__txt b { font: 700 var(--step-0)/1.1 var(--font-display); font-stretch: 85%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cta-bar__txt span { font: 500 0.6875rem/1.3 var(--font-mono); color: var(--ink-3); text-transform: uppercase; }
.cta-bar .btn { margin-left: auto; flex: none; }

.sheet-scrim { position: fixed; inset: 0; z-index: 45; background: var(--scrim); opacity: 0; pointer-events: none;
  transition: opacity var(--dur-exit) var(--ease-out); }
.sheet-scrim.is-open { opacity: 1; pointer-events: auto; transition-duration: var(--dur-sheet); }

/* ---------- Mobile: the panel becomes a bottom sheet (JS only) --------- */
@media (max-width: 1023.98px) {
  .js .booking--sheet {
    position: fixed; z-index: 50; left: 0; right: 0; bottom: 0;
    max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    min-height: min(660px, calc(100vh - 24px)); min-height: min(660px, calc(100dvh - 24px));
    overflow-y: auto; overscroll-behavior: contain;
    border-radius: var(--r-3) var(--r-3) 0 0; box-shadow: var(--shadow-sheet);
    padding-bottom: env(safe-area-inset-bottom);
    transform: translateY(100%);
    transition: transform var(--dur-exit) var(--ease-out), visibility 0s var(--dur-exit);
    visibility: hidden;
  }
  .js .booking--sheet.is-open { transform: translateY(0); visibility: visible;
    transition: transform var(--dur-sheet) var(--ease-drawer), visibility 0s; }
  .js .booking--sheet.is-dragging { transition: none; }
  .js .booking--sheet .booking__head { position: sticky; top: 0; z-index: 2; padding-top: var(--s-2); padding-bottom: var(--s-3); border-bottom: var(--hairline); touch-action: none; border-radius: var(--r-3) var(--r-3) 0 0; }
  .js .booking--sheet .booking__grab { display: block; width: 40px; height: 4px; border-radius: 2px; background: var(--line-input); margin: 2px auto var(--s-2); }
  .js .booking--sheet .booking__close { display: grid; position: absolute; right: var(--s-2); top: var(--s-2); }
  .js .booking--sheet .booking__head h2 { padding-right: var(--tap); }
  .js .booking--sheet .success [data-sheet-only] { display: inline-flex; }
  .js .booking--sheet .success__head { padding-right: var(--tap); }
  body.sheet-open { overflow: hidden; }
}
@media (min-width: 1024px) {
  .cta-bar, .js .cta-bar, .sheet-scrim { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .fstep.is-in-forward, .fstep.is-in-back, .success > *, .success > .success__icon { animation-name: fade-only; }
  .fstep.is-in-forward, .fstep.is-in-back { animation-duration: 160ms; }
  .success__icon path { animation: none; stroke-dashoffset: 0; }
  .success .ticket__plate { animation: fade-only 160ms 200ms both; }
  .success--stored > *, .success--stored .ticket__plate { animation: none; }
  .progress li::before { transition: none; }
  .cta-bar { transition-property: opacity; }
  .cta-bar.is-hidden { transform: none; opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 1023.98px) {
  .js .booking--sheet, .js .booking--sheet.is-open { transform: none !important; transition: opacity var(--dur-base) ease, visibility 0s var(--dur-base); }
  .js .booking--sheet:not(.is-open) { opacity: 0; }
  .js .booking--sheet.is-open { opacity: 1; transition: opacity var(--dur-base) ease, visibility 0s; }
}