/* Booking wizard ============================================================ */

.wizard-header .site-header-inner { justify-content: space-between; }
.wizard-steps ol { display: flex; gap: var(--sp-6); }
.wizard-steps li { display: flex; align-items: center; gap: var(--sp-2); color: var(--ink-400); font-size: var(--fs-sm); font-weight: 600; }
.wizard-step-num {
  width: 26px; height: 26px; border-radius: var(--r-pill);
  background: var(--surface-2); color: var(--ink-400);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-xs); font-weight: 700;
}
.wizard-steps li.is-current .wizard-step-num { background: var(--mint); color: var(--ink); }
.wizard-steps li.is-current { color: var(--ink); }
.wizard-steps li.is-done .wizard-step-num { background: var(--mint-700); color: var(--white); }
.wizard-steps li.is-done { color: var(--ink-700); }
.wizard-step-label { display: none; }
@media (min-width: 860px) { .wizard-step-label { display: inline; } }
@media (max-width: 700px) { .wizard-steps ol { gap: var(--sp-3); } }

/* ---- Wizard shell ----------------------------------------------------------
   Single-column reading width for the form itself; the price panel gets its
   own fixed column only once there's room for both (§A4). */
.wizard-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}
.wizard-main {
  max-width: 680px;
  margin-inline: auto;
  width: 100%;
}
@media (min-width: 1024px) {
  .wizard-layout { grid-template-columns: minmax(0, 1fr) 380px; }
  .wizard-main { max-width: none; margin-inline: 0; }
}
@media (max-width: 1023px) {
  .wizard-layout { padding-bottom: 96px; } /* keeps content clear of the mobile price bar (§A7) */
}

.wizard-step legend {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3);
  color: var(--ink); padding: 0; margin-bottom: var(--sp-6); width: 100%;
}
.wizard-form.js-enhanced .wizard-step { display: none; }
.wizard-form.js-enhanced .wizard-step.is-active { display: block; }
.wizard-form:not(.js-enhanced) .wizard-step { border-bottom: 1px solid var(--line); padding-bottom: var(--sp-7); margin-bottom: var(--sp-7); }

.wizard-actions { display: flex; justify-content: space-between; align-items: center; margin-top: var(--sp-7); gap: var(--sp-4); }

/* ---- Field groups — the single spacing system for every wizard step (§A4) ----
   20px between fields inside a group, 40px between groups, a heading + divider
   between logical blocks (Pickup / Drop-off / When, etc). */
.field-group {
  display: grid;
  gap: 1.25rem; /* 20px — never less between fields in the same group */
  margin-block-end: 2.5rem; /* 40px between groups */
}
.field-group:last-child { margin-block-end: 0; }
.field-group + .field-group { padding-block-start: 2.5rem; border-block-start: 1px solid var(--line); margin-block-start: -2.5rem; }
.field-group__title { display: flex; align-items: center; gap: var(--sp-2); font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-block-end: .25rem; }
.field-group__title svg { color: var(--mint-700); flex-shrink: 0; }
.field-group__hint { font-size: .875rem; color: var(--ink-500); margin-block-end: .75rem; margin-block-start: -1rem; }

/* Stops are their own repeatable card within the route field-group */
.stop-card {
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  padding: var(--sp-4); display: flex; gap: var(--sp-3); align-items: flex-end;
}
.stop-card .field { flex: 1; min-width: 0; }
.stop-reorder { display: flex; flex-direction: column; gap: 2px; }
.stop-reorder button { width: 32px; height: 26px; border: 1px solid var(--line); border-radius: 6px; min-height: 0; }
.stop-remove { flex-shrink: 0; width: 44px; height: 44px; min-height: 44px; border-radius: var(--r-md); border: 1.5px solid var(--line); color: var(--red); }
.stop-remove:hover { background: var(--red-050); border-color: var(--red); }

.route-summary-bar {
  display: flex; align-items: center; gap: var(--sp-3);
  background: var(--mint-050); border-radius: var(--r-md);
  border-inline-start: 4px solid var(--mint);
  padding: var(--sp-4); margin-block-start: 0;
  font-weight: 600; color: var(--ink-700);
  width: 100%;
}
.route-summary-bar svg { color: var(--mint-700); flex-shrink: 0; }

/* ---- Radio-card choice groups (property type, stairs) — replaces native
   selects for options that benefit from being visible at a glance (§A5) ---- */
.choice-grid { display: grid; gap: .75rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choice-card {
  display: flex; flex-direction: column; justify-content: center; gap: .25rem;
  padding: 1rem; min-height: 56px;
  border: 1.5px solid var(--line); border-radius: var(--r-md); background: var(--white);
  font-size: var(--fs-sm); font-weight: 600; color: var(--ink-700);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.choice input:checked + .choice-card { border-color: var(--mint); background: var(--mint-050); box-shadow: var(--shadow-sm); color: var(--ink); }
.choice input:focus-visible + .choice-card { box-shadow: 0 0 0 4px var(--mint-050); }

/* Van picker (step 2) --------------------------------------------------------- */
.van-picker { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--sp-5); }
.van-option { position: relative; }
.van-option input { position: absolute; opacity: 0; pointer-events: none; }
.van-option label {
  display: block; cursor: pointer; min-height: 320px;
  border: 1.5px solid var(--line); border-radius: var(--r-lg);
  padding: 1.25rem; transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.van-option input:checked + label { border-color: var(--mint); background: var(--mint-050); box-shadow: 0 0 0 1px var(--mint); }
.van-option input:focus-visible + label { box-shadow: 0 0 0 4px var(--mint-050); }
.van-option-img { margin: -1.25rem -1.25rem .75rem; width: calc(100% + 2.5rem); border-radius: var(--r-lg) var(--r-lg) 0 0; }
.van-badge {
  position: absolute; top: var(--sp-4); right: var(--sp-4);
  width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--mint); color: var(--ink);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-out);
}
.van-option input:checked ~ .van-badge, .van-option input:checked + label .van-badge { opacity: 1; }
.van-option-price { font-weight: 800; font-size: 1.25rem; color: var(--ink); margin-top: var(--sp-3); }
.van-option-price .price-loading { color: var(--ink-400); font-weight: 600; font-size: var(--fs-sm); }

/* Stepper — 48x48 touch targets (§A6, step 3) --------------------------------- */
.stepper-panel { border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; }
.stepper { display: inline-flex; align-items: center; gap: var(--sp-4); }
.stepper button { width: 48px; height: 48px; min-height: 48px; border-radius: var(--r-pill); background: var(--surface-2); font-weight: 800; font-size: 1.25rem; border: 1.5px solid var(--line); }
.stepper button:hover { background: var(--mint-050); border-color: var(--mint); color: var(--mint-700); }
.stepper output { min-width: 28px; text-align: center; font-weight: 700; font-size: 1.125rem; }
.stepper-sm button { width: 40px; height: 40px; min-height: 40px; font-size: 1.0625rem; }

/* Toggle switch — full-width rows, label left / switch right (§A6) ------------ */
.toggle-row { display: flex; align-items: center; justify-content: space-between; padding-block: 1rem; border-block-end: 1px solid var(--line); gap: var(--sp-4); min-height: 44px; }
.toggle-row:last-child { border-block-end: none; }
.toggle-copy strong { display: block; }
.toggle-copy span { font-size: var(--fs-sm); color: var(--ink-500); }
.switch { position: relative; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.switch-track { position: absolute; inset: 0; background: var(--surface-2); border-radius: var(--r-pill); transition: background var(--dur-fast) var(--ease-out); pointer-events: none; }
.switch-track::after {
  content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px;
  background: var(--white); border-radius: 50%; box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out);
}
.switch input:checked ~ .switch-track { background: var(--mint); }
.switch input:checked ~ .switch-track::after { transform: translateX(20px); }
.switch input:focus-visible ~ .switch-track { box-shadow: 0 0 0 4px var(--mint-050); }

/* Consent checkboxes (step 4) — 12px gap, 44px min touch height (§A6) --------- */
.consent-row { display: flex; align-items: flex-start; gap: .75rem; min-height: 44px; }
.consent-row input[type="checkbox"] { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--mint-700); flex-shrink: 0; }
.consent-row label { font-size: var(--fs-sm); color: var(--ink-700); line-height: 1.5; padding-block: .375rem; cursor: pointer; }

/* Live price panel (desktop) — sticky within the grid column, never fixed
   so it can't ever overlap the footer (§A7) ------------------------------------ */
.live-price-panel {
  position: sticky; top: calc(var(--header-h) + 1.5rem);
  z-index: var(--z-sticky-rail);
  background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--mint);
  border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  padding: var(--sp-6);
}
@media (max-width: 1023px) { .live-price-panel { display: none; } }
.live-price-panel h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-5); }
.price-line { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-2) 0; font-size: var(--fs-sm); border-radius: 6px; transition: background var(--dur-fast) var(--ease-out); }
.price-line.is-updated { background: var(--mint-050); }
.price-line .label { color: var(--ink-700); }
.price-line .detail { display: block; font-size: var(--fs-xs); color: var(--ink-400); }
.price-line .amount { font-weight: 700; white-space: nowrap; }
.price-line.muted .amount { color: var(--ink-400); font-weight: 500; font-style: italic; }
.price-total-row {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 1.5px solid var(--line); margin-top: var(--sp-4); padding-top: var(--sp-4);
}
.price-total-row .amount { font-size: var(--fs-price); font-weight: 800; color: var(--ink); font-family: var(--font-display); }
.price-deposit-note { background: var(--amber-050); border-radius: var(--r-md); padding: var(--sp-4); margin-top: var(--sp-4); font-size: var(--fs-sm); }
.price-estimate-note { font-size: var(--fs-xs); color: var(--ink-400); margin-top: var(--sp-3); }

/* Live price bar (mobile) — fixed, must never cover the continue/pay button
   (§A7 — the most common mobile booking-flow bug, checked explicitly) --------- */
.live-price-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-price-bar);
  background: var(--white); border-top: 1px solid var(--line); box-shadow: var(--shadow-lg);
  padding: var(--sp-3) var(--gutter);
  display: none;
  align-items: center; justify-content: space-between;
  min-height: 72px;
}
@media (max-width: 1023px) { .live-price-bar { display: flex; } }
.live-price-bar .amount { font-size: 1.375rem; font-weight: 800; font-family: var(--font-display); }
.live-price-bar button { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; color: var(--mint-700); min-height: 44px; padding-inline: var(--sp-2); }

.price-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-price-bar);
  background: var(--white); border-radius: var(--r-xl) var(--r-xl) 0 0;
  box-shadow: var(--shadow-lg); padding: var(--sp-6);
  padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom, 0px));
  max-height: 70vh; overflow-y: auto;
  transform: translateY(100%); transition: transform var(--dur-med) var(--ease-out);
}
.price-sheet.is-open { transform: translateY(0); }

/* Payment step ------------------------------------------------------------------- */
#stripePaymentElement { margin: 0; }
.payment-panel { border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; margin-block: 1.25rem; }
.no-stripe-note { background: var(--mint-050); border-radius: var(--r-md); padding: var(--sp-5); margin: var(--sp-5) 0; }
.final-breakdown { border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; margin-block: 1.25rem; }
.final-breakdown .price-line { padding-block: .625rem; }

/* Slim wizard footer — contact + legal only, not the full site footer -------- */
.wizard-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--sp-6);
  margin-top: var(--sp-8);
}
@media (max-width: 1023px) {
  /* Clears the fixed mobile price bar so this content is never hidden behind it. */
  .wizard-footer { padding-bottom: calc(var(--sp-6) + 72px); }
}
.wizard-footer-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
}
.wizard-footer-contact { display: flex; gap: var(--sp-5); flex-wrap: wrap; }
.wizard-footer-contact a { display: inline-flex; align-items: center; gap: var(--sp-2); font-weight: 600; font-size: var(--fs-sm); color: var(--ink-700); }
.wizard-footer-legal { display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: center; font-size: var(--fs-xs); color: var(--ink-400); }
.wizard-footer-legal a { color: var(--ink-500); }