/* ==========================================================================
   WST Airport Transfers — Frontend Booking Widget
   Modern Coastal Luxe design system (v1.1)
   ========================================================================== */

/* ─── Design tokens ───────────────────────────────────────────────────────
   Re-tokenised to the White Shell Tours theme (wst/assets/css/tokens.css):
   every token references the theme variable with a hard fallback, so the
   widget matches the theme when it is active and still renders standalone.
   The whole stylesheet below consumes only these tokens — changing them
   here re-skins the entire widget. */
.wst-at-booking-wrap {
  /* Surfaces */
  --wst-bg:                var(--paper, #f5efe6);
  --wst-surface:           var(--white, #fffdf8);
  --wst-surface-low:       var(--paper-2, #ece4d6);
  --wst-surface-soft:      var(--paper-2, #ece4d6);
  --wst-surface-variant:   var(--sand, #e3d6bf);

  /* Borders */
  --wst-outline:           var(--muted, #75726a);
  --wst-outline-variant:   var(--rule, #d8cdb8);
  --wst-divider:           var(--rule, #d8cdb8);

  /* Brand — near-black "ink" is the resting active / primary surface
     (active step circle, primary buttons, selected toggles), exactly like
     the homepage search bar. teal-deep is the hover shade, matching the
     theme's .btn-primary hover. The widget paints primary buttons + the
     active step from `--wst-primary-container`, and the button *hover*
     from `--wst-primary` — hence the assignment below. */
  --wst-primary:           var(--teal-deep, #0a3838);
  --wst-primary-container: var(--ink, #1a201d);
  --wst-primary-tint:      rgba(26, 32, 29, .08);
  --wst-primary-tint-2x:   rgba(26, 32, 29, .16);
  --wst-on-primary:        var(--paper, #fffdf8);
  --wst-primary-fixed:     var(--sand, #e3d6bf);

  /* Tertiary accent for ghost buttons */
  --wst-tertiary:          var(--ink, #1a201d);

  /* Foreground */
  --wst-on-surface:        var(--ink, #1a201d);
  --wst-on-variant:        var(--ink-2, #3a3f3a);
  --wst-secondary:         var(--muted, #75726a);

  /* Feedback */
  --wst-error:             #ba1a1a;
  --wst-error-bg:          #ffdad6;
  --wst-error-on:          #93000a;

  /* Shape — theme radii */
  --wst-radius-sm:         var(--r-sm, 8px);
  --wst-radius:            var(--r-md, 14px);
  --wst-radius-lg:         var(--r-lg, 22px);
  --wst-radius-pill:       9999px;

  /* Elevation — warm, soft ambient shadows matching the theme cards */
  --wst-shadow-ambient:    0 4px 24px rgba(10, 40, 40, .05),
                           0 1px 3px  rgba(10, 40, 40, .04);
  --wst-shadow-hover:      0 30px 50px -28px rgba(10, 40, 40, .32);
  --wst-shadow-sm:         0 1px 2px  rgba(10, 40, 40, .05);

  /* Motion */
  --wst-trans:             280ms cubic-bezier(.2, .8, .2, 1);
  --wst-trans-fast:        180ms cubic-bezier(.4, 0, .2, 1);

  /* Typography — theme fonts (Instrument Serif display + Manrope body) */
  --wst-font-body:         var(--sans, "Manrope", system-ui, -apple-system, sans-serif);
  --wst-font-display:      var(--serif, "Instrument Serif", "Times New Roman", serif);
}

/* ─── Container ───────────────────────────────────────────────────────────
   The wrap paints its own sage background so the widget renders correctly
   regardless of the host page background (Hello Elementor sections often
   ship dark / brand-tinted, which would render our step subtitles in low
   contrast). */
.wst-at-booking-wrap {
  box-sizing: border-box;
  max-width: 1024px;
  margin: 0 auto;
  padding: 40px 24px;
  background-color: var(--wst-bg);
  border-radius: var(--wst-radius-lg);
  font-family: var(--wst-font-body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--wst-on-surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.wst-at-booking-wrap *,
.wst-at-booking-wrap *::before,
.wst-at-booking-wrap *::after { box-sizing: border-box; }

/* Defensive reset — host themes (Hello Elementor, Astra, etc.) and Elementor
   itself frequently apply broad `button { background, color, padding,
   text-transform }` rules that bleed into our toggle/button components. We
   neutralise those defaults inside the wrap so our component selectors below
   define the entire visual state. */
.wst-at-booking-wrap button {
  font-family: inherit;
  font-size: inherit;
  text-transform: none;
  text-shadow: none;
  letter-spacing: normal;
  background-image: none;
  -webkit-appearance: none;
  appearance: none;
}

/* Material Symbols base — subtle weight tuning to match editorial feel */
.wst-at-booking-wrap .material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-feature-settings: 'liga';
  font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
  user-select: none;
}

/* ─── Progress indicator ─────────────────────────────────────────────────── */
.wst-at-progress {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  max-width: 720px;
  margin: 0 auto 56px;
  padding: 0 4px;
}
.wst-at-progress-track,
.wst-at-progress-fill {
  position: absolute;
  top: 16px;
  left: 0;
  height: 2px;
  border-radius: 2px;
  pointer-events: none;
}
.wst-at-progress-track {
  width: 100%;
  background: var(--wst-surface-variant);
}
.wst-at-progress-fill {
  width: 0%;
  background: var(--wst-primary-container);
  transition: width 500ms cubic-bezier(.2, .8, .2, 1);
}
.wst-at-step {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.wst-at-step-num {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--wst-surface-variant);
  color: var(--wst-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.02em;
  transition: background var(--wst-trans), color var(--wst-trans), box-shadow var(--wst-trans);
}
.wst-at-step-num-text { display: inline; }
.wst-at-step-num-check {
  display: none;
  font-size: 18px;
}
.wst-at-step.completed .wst-at-step-num {
  background: var(--wst-primary-container);
  color: var(--wst-on-primary);
}
.wst-at-step.completed .wst-at-step-num-text { display: none; }
.wst-at-step.completed .wst-at-step-num-check { display: inline; }

.wst-at-step.active .wst-at-step-num {
  background: var(--wst-primary-container);
  color: var(--wst-on-primary);
  box-shadow: 0 0 0 4px rgba(26, 32, 29, .18);
}
.wst-at-step-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wst-secondary);
  transition: color var(--wst-trans);
  white-space: nowrap;
}
.wst-at-step.active .wst-at-step-label,
.wst-at-step.completed .wst-at-step-label {
  color: var(--wst-primary-container);
}

/* ─── Step show/hide ─────────────────────────────────────────────────────── */
.wst-at-form-step { display: none; animation: wstAtStepIn 360ms cubic-bezier(.2, .8, .2, 1); }
.wst-at-form-step.active { display: block; }
@keyframes wstAtStepIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Step header ────────────────────────────────────────────────────────── */
.wst-at-booking-wrap .wst-at-step-header { margin-bottom: 32px; }
.wst-at-booking-wrap .wst-at-step-header--centered { text-align: center; max-width: 640px; margin-left: auto; margin-right: auto; }
.wst-at-booking-wrap .wst-at-step-title {
  font-family: var(--wst-font-display);
  font-weight: 500;
  font-size: 40px;
  line-height: 1.2;
  color: var(--wst-on-surface);
  margin: 0 0 12px;
  letter-spacing: -0.005em;
  text-shadow: none;
}
.wst-at-booking-wrap .wst-at-step-subtitle {
  font-size: 17px;
  line-height: 1.6;
  color: var(--wst-secondary);
  margin: 0;
  max-width: 560px;
  text-shadow: none;
}
.wst-at-booking-wrap .wst-at-step-header--centered .wst-at-step-subtitle { margin-left: auto; margin-right: auto; }

/* ─── Card primitive ─────────────────────────────────────────────────────── */
.wst-at-card {
  background: var(--wst-surface);
  border-radius: var(--wst-radius-lg);
  box-shadow: var(--wst-shadow-ambient);
}
.wst-at-card-body { padding: 40px; }
.wst-at-card-title {
  font-family: var(--wst-font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.3;
  color: var(--wst-on-surface);
  margin: 0 0 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--wst-divider);
}

/* ─── Field primitives ───────────────────────────────────────────────────── */
.wst-at-card-body > * + * { margin-top: 28px; }

.wst-at-field-block,
.wst-at-field { display: flex; flex-direction: column; gap: 8px; }

.wst-at-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.wst-at-toggle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
.wst-at-toggle-row > .wst-at-field-block { flex: 1 1 240px; }

.wst-at-label-caps {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wst-secondary);
  margin: 0;
}
.wst-at-label-caps .required {
  color: var(--wst-primary-container);
  margin-left: 2px;
  letter-spacing: normal;
}
.wst-at-optional {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--wst-secondary);
  text-transform: none;
  margin-left: 4px;
}

/* ─── Toggle pills ─────────────────────────────────────────────────────────
   Selectors are deliberately scoped under .wst-at-booking-wrap to win the
   specificity fight against host themes / page builders (Elementor,
   Hello Elementor, etc.) that apply broad `button { ... }` styles. */
.wst-at-booking-wrap .wst-at-toggle-group {
  display: inline-flex;
  background-color: var(--wst-surface-low);
  border-radius: var(--wst-radius);
  padding: 4px;
  gap: 4px;
  width: 100%;
  border: 1px solid var(--wst-outline-variant);
}
.wst-at-booking-wrap .wst-at-toggle,
.wst-at-booking-wrap .wst-at-toggle:hover,
.wst-at-booking-wrap .wst-at-toggle:focus,
.wst-at-booking-wrap .wst-at-toggle:active {
  /* `flex: 1 1 0` (not `1 1 auto`) so each pill gets an equal share of
     the row regardless of label length. With `auto` basis, the active
     pill's bolder text width would steal space from the inactive pill
     and force it to wrap. */
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-radius: calc(var(--wst-radius) - 4px);
  color: var(--wst-secondary);
  font-family: var(--wst-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background-color var(--wst-trans-fast), color var(--wst-trans-fast), box-shadow var(--wst-trans-fast);
  white-space: nowrap;
  line-height: 1;
  text-shadow: none;
  text-decoration: none;
  box-shadow: none;
  min-height: 0;
}
.wst-at-booking-wrap .wst-at-toggle:hover {
  color: var(--wst-primary-container);
}
.wst-at-booking-wrap .wst-at-toggle.active,
.wst-at-booking-wrap .wst-at-toggle.active:hover,
.wst-at-booking-wrap .wst-at-toggle.active:focus,
.wst-at-booking-wrap .wst-at-toggle.active:active {
  background-color: var(--wst-surface);
  color: var(--wst-primary-container);
  box-shadow: var(--wst-shadow-sm);
}
.wst-at-booking-wrap .wst-at-toggle.disabled,
.wst-at-booking-wrap .wst-at-toggle:disabled {
  opacity: .4;
  cursor: not-allowed;
  pointer-events: none;
}
.wst-at-booking-wrap .wst-at-toggle:focus-visible {
  outline: 2px solid var(--wst-primary-container);
  outline-offset: 2px;
}
.wst-at-booking-wrap .wst-at-toggle-icon { font-size: 18px !important; }

/* ─── Inputs / Selects ───────────────────────────────────────────────────── */
.wst-at-input,
.wst-at-booking-wrap select,
.wst-at-booking-wrap textarea {
  width: 100%;
  /* `min-width: 0` is critical: <input type="time">, <input type="date">,
     and even plain text inputs ship with a browser-default intrinsic
     min-width (derived from font-size + the `size` attribute, default 20).
     Inside a flex or grid container, that intrinsic floor would push the
     element wider than its track and overflow the card on small viewports. */
  min-width: 0;
  max-width: 100%;
  padding: 16px;
  background-color: var(--wst-surface-low);
  border: 1px solid var(--wst-outline-variant);
  border-radius: var(--wst-radius-sm);
  font-family: var(--wst-font-body);
  font-size: 16px;
  color: var(--wst-on-surface);
  line-height: 1.5;
  appearance: none;
  -webkit-appearance: none;
  transition: border-color var(--wst-trans-fast), box-shadow var(--wst-trans-fast), background-color var(--wst-trans-fast);
  box-sizing: border-box;
}
.wst-at-input::placeholder,
.wst-at-booking-wrap textarea::placeholder {
  color: var(--wst-secondary);
  opacity: .7;
}
.wst-at-input:focus,
.wst-at-booking-wrap select:focus,
.wst-at-booking-wrap textarea:focus {
  outline: 0;
  border-color: var(--wst-primary-container);
  box-shadow: 0 0 0 3px rgba(26, 32, 29, .15);
  background: var(--wst-surface);
}
.wst-at-booking-wrap textarea { resize: vertical; min-height: 96px; }

.wst-at-select-wrap { position: relative; display: block; }
.wst-at-select-wrap select { padding-right: 48px; cursor: pointer; }
.wst-at-select-chevron {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--wst-secondary);
  font-size: 22px !important;
}

.wst-at-datetime-row { display: flex; gap: 12px; }
.wst-at-input--date { flex: 2 1 0; min-width: 0; }
.wst-at-input--time { flex: 1 1 0; min-width: 0; }

/* Native date/time picker UI normalisation */
.wst-at-input--date::-webkit-calendar-picker-indicator,
.wst-at-input--time::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .6;
  filter: invert(15%) sepia(30%) saturate(800%) hue-rotate(85deg);
}

/* ─── Hotel-name combobox (Step 1 primary destination input) ───────────────
   Type-to-search input with autocomplete dropdown over the local
   locations list (Phase A) and Google Places fallback (Phase B). The
   manual zone+location dropdowns live inside the collapsible below. */
.wst-at-combobox {
  position: relative;
  display: block;
}
/* Inherits everything from `.wst-at-input` — only the side padding
   changes to make room for the search icon (left) and clear button
   (right). Selectors are deliberately scoped to `.wst-at-booking-wrap`
   to win the specificity fight against theme rules that might apply
   `input { padding ... }` broadly (Elementor sometimes does). */
.wst-at-booking-wrap .wst-at-combobox-input,
.wst-at-booking-wrap .wst-at-combobox-input:hover,
.wst-at-booking-wrap .wst-at-combobox-input:focus,
.wst-at-booking-wrap .wst-at-combobox-input:active {
  padding-left: 48px !important;
  padding-right: 44px !important;
}
.wst-at-booking-wrap .wst-at-combobox-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px !important;
  color: var(--wst-secondary);
  pointer-events: none;
  z-index: 2;
}

/* Location combobox variant — no left search icon, chevron on the right
   that rotates when the dropdown is open (UI reads more like a "select"
   than the broader hotel search). */
.wst-at-booking-wrap .wst-at-combobox-input--location,
.wst-at-booking-wrap .wst-at-combobox-input--location:hover,
.wst-at-booking-wrap .wst-at-combobox-input--location:focus,
.wst-at-booking-wrap .wst-at-combobox-input--location:active {
  padding-left: 16px !important;
  padding-right: 44px !important;
}
.wst-at-booking-wrap .wst-at-combobox-chevron-icon {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px !important;
  color: var(--wst-secondary);
  pointer-events: none;
  z-index: 2;
  transition: transform var(--wst-trans), color var(--wst-trans-fast);
}
.wst-at-booking-wrap .wst-at-combobox-input--location[aria-expanded="true"] ~ .wst-at-combobox-chevron-icon {
  transform: translateY(-50%) rotate(180deg);
  color: var(--wst-primary-container);
}
@media (prefers-reduced-motion: reduce) {
  .wst-at-booking-wrap .wst-at-combobox-chevron-icon { transition: color var(--wst-trans-fast); }
}

/* Native location <select> kept in DOM for state but hidden from view —
   the searchable combobox above is the user-facing UI. */
.wst-at-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  pointer-events: none !important;
}
.wst-at-booking-wrap .wst-at-combobox-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  background-image: none;
  color: var(--wst-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: none;
  text-shadow: none;
  min-height: 0;
  transition: background-color var(--wst-trans-fast), color var(--wst-trans-fast);
}
.wst-at-booking-wrap .wst-at-combobox-clear .material-symbols-outlined { font-size: 18px !important; }
@media (hover: hover) {
  .wst-at-booking-wrap .wst-at-combobox-clear:hover {
    background-color: var(--wst-surface-variant);
    color: var(--wst-on-surface);
  }
}
.wst-at-booking-wrap .wst-at-combobox-clear:focus-visible {
  outline: 2px solid var(--wst-primary-container);
  outline-offset: 2px;
}

.wst-at-hotel-suggest {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  background-color: var(--wst-surface);
  border: 1px solid var(--wst-outline-variant);
  border-radius: var(--wst-radius);
  box-shadow: var(--wst-shadow-hover);
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.wst-at-hotel-suggest li {
  padding: 10px 12px;
  border-radius: var(--wst-radius-sm);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
  color: var(--wst-on-surface);
  transition: background-color var(--wst-trans-fast);
}
.wst-at-hotel-suggest li[aria-selected="true"],
.wst-at-hotel-suggest li:focus {
  background-color: var(--wst-surface-low);
  outline: 0;
}
@media (hover: hover) {
  .wst-at-hotel-suggest li:hover {
    background-color: var(--wst-surface-low);
  }
}
.wst-at-hotel-suggest-name { font-weight: 500; }
.wst-at-hotel-suggest-meta {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wst-secondary);
}
.wst-at-hotel-suggest-divider {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wst-secondary);
  pointer-events: none;
}
.wst-at-hotel-suggest-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--wst-divider);
}
.wst-at-hotel-suggest-empty {
  padding: 14px 12px;
  text-align: center;
  font-size: 14px;
  color: var(--wst-secondary);
}
.wst-at-hotel-suggest-empty--clickable {
  cursor: pointer;
  border-radius: var(--wst-radius-sm);
  transition: background-color var(--wst-trans-fast), color var(--wst-trans-fast);
  user-select: none;
}
@media (hover: hover) {
  .wst-at-hotel-suggest-empty--clickable:hover {
    background-color: var(--wst-primary-tint);
    color: var(--wst-primary);
  }
}
.wst-at-hotel-suggest-empty--clickable:focus-visible {
  outline: 2px solid var(--wst-primary-container);
  outline-offset: -2px;
  background-color: var(--wst-primary-tint);
  color: var(--wst-primary);
}
.wst-at-hotel-suggest-empty-arrow {
  display: inline-block;
  margin-left: 6px;
  font-weight: 700;
  color: var(--wst-primary-container);
  animation: wstAtNudge 1.6s ease-in-out infinite;
}
@keyframes wstAtNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(3px); }
}
@media (prefers-reduced-motion: reduce) {
  .wst-at-hotel-suggest-empty-arrow { animation: none; }
}

.wst-at-hotel-note {
  margin-top: 8px !important;
}

/* ─── Manual fallback: collapsible zone+location dropdowns ───────────────
   The whole box is the click target — summary is a full-width row with
   its own padding (rather than padding on the parent), so hover/focus
   states cover the entire surface, not just the text. */
.wst-at-manual-pick {
  margin-top: 16px;
  padding: 0;
  background-color: var(--wst-surface-low);
  border: 1px solid var(--wst-outline-variant);
  border-radius: var(--wst-radius);
  /* `overflow: visible` (default) so the LocationSearch suggest list can
     extend below this container without being clipped. We compensate for
     the lost rounded-corner clipping by giving `summary` and `body` their
     own border-radius rules below — they tile together to match the
     parent's rounded outline without an overflow context. */
  transition: border-color var(--wst-trans-fast);
}
.wst-at-manual-pick > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
  cursor: pointer;
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--wst-tertiary);
  user-select: none;
  /* All four corners rounded when collapsed; only top corners when open
     (the body picks up the bottom corners). The -1px math keeps the inner
     curve hugging the parent's 1px border. */
  border-radius: calc(var(--wst-radius) - 1px);
  transition: background-color var(--wst-trans-fast), color var(--wst-trans-fast);
}
.wst-at-manual-pick[open] > summary {
  border-radius: calc(var(--wst-radius) - 1px) calc(var(--wst-radius) - 1px) 0 0;
}
.wst-at-manual-pick > summary::-webkit-details-marker { display: none; }
.wst-at-manual-pick > summary::marker { content: ''; }

@media (hover: hover) {
  .wst-at-manual-pick > summary:hover {
    background-color: var(--wst-primary-tint);
    color: var(--wst-primary);
  }
}
.wst-at-manual-pick > summary:focus-visible {
  outline: 2px solid var(--wst-primary-container);
  outline-offset: -2px;
  background-color: var(--wst-primary-tint);
  color: var(--wst-primary);
}
.wst-at-manual-pick > summary:active {
  background-color: var(--wst-primary-tint-2x);
}

.wst-at-manual-pick-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  min-width: 0;
}
.wst-at-manual-pick-icon {
  font-size: 18px !important;
  color: var(--wst-secondary);
  transition: color var(--wst-trans-fast);
  flex: 0 0 auto;
}
.wst-at-manual-pick > summary:hover .wst-at-manual-pick-icon,
.wst-at-manual-pick > summary:focus-visible .wst-at-manual-pick-icon,
.wst-at-manual-pick[open] > summary .wst-at-manual-pick-icon {
  color: var(--wst-primary-container);
}

.wst-at-manual-pick-chevron {
  font-size: 22px !important;
  color: var(--wst-secondary);
  flex: 0 0 auto;
  transition: transform var(--wst-trans), color var(--wst-trans-fast);
}
.wst-at-manual-pick > summary:hover .wst-at-manual-pick-chevron,
.wst-at-manual-pick > summary:focus-visible .wst-at-manual-pick-chevron {
  color: var(--wst-primary-container);
}
.wst-at-manual-pick[open] > summary .wst-at-manual-pick-chevron {
  transform: rotate(180deg);
  color: var(--wst-primary-container);
}

.wst-at-manual-pick[open] {
  background-color: var(--wst-surface);
  border-color: var(--wst-primary-container);
}
.wst-at-manual-pick[open] > summary {
  border-bottom: 1px solid var(--wst-divider);
}
.wst-at-manual-pick-body {
  padding: 18px;
  margin-top: 0;
  border-top: 0;
  border-radius: 0 0 calc(var(--wst-radius) - 1px) calc(var(--wst-radius) - 1px);
}
@media (prefers-reduced-motion: reduce) {
  .wst-at-manual-pick-chevron { transition: none; }
}

/* ─── Notes (info / hints) ───────────────────────────────────────────────── */
.wst-at-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 6px 0 0;
  padding: 10px 12px;
  background: var(--wst-primary-tint);
  border-radius: var(--wst-radius-sm);
  font-size: 13px;
  line-height: 1.5;
  color: var(--wst-primary);
  font-weight: 500;
}
.wst-at-note-icon { font-size: 18px !important; flex: 0 0 auto; }

/* ─── Return section divider ─────────────────────────────────────────────── */
.wst-at-return-section {
  padding-top: 28px;
  border-top: 1px solid var(--wst-divider);
}
.wst-at-return-divider {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 20px;
  color: var(--wst-primary-container);
}
.wst-at-return-divider .material-symbols-outlined { font-size: 20px !important; }

/* ─── Inline step error alert ────────────────────────────────────────────── */
.wst-at-step-error {
  margin-top: 20px;
  padding: 14px 18px;
  background: var(--wst-error-bg);
  color: var(--wst-error-on);
  border-radius: var(--wst-radius-sm);
  border: 1px solid rgba(186, 26, 26, .25);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* ─── Step actions (button row) ──────────────────────────────────────────── */
.wst-at-step-actions {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.wst-at-step-actions--split { justify-content: space-between; }
.wst-at-card .wst-at-step-actions {
  margin-top: 0;
  padding: 24px 40px 32px;
}

/* ─── Buttons ────────────────────────────────────────────────────────────
   Specificity-boosted with .wst-at-booking-wrap parent to defeat theme
   rules like `.elementor-button` / `body button` that otherwise repaint
   our CTAs. */
.wst-at-booking-wrap .wst-at-btn,
.wst-at-booking-wrap .wst-at-btn:hover,
.wst-at-booking-wrap .wst-at-btn:focus,
.wst-at-booking-wrap .wst-at-btn:active {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--wst-font-body);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  line-height: 1;
  border-radius: var(--wst-radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--wst-trans), box-shadow var(--wst-trans), background-color var(--wst-trans-fast), color var(--wst-trans-fast), border-color var(--wst-trans-fast);
  text-decoration: none;
  white-space: nowrap;
  text-shadow: none;
  text-transform: none;
  min-height: 0;
}
.wst-at-booking-wrap .wst-at-btn:focus-visible {
  outline: 2px solid var(--wst-primary-container);
  outline-offset: 2px;
}
.wst-at-booking-wrap .wst-at-btn:disabled,
.wst-at-booking-wrap .wst-at-btn[disabled] {
  opacity: .45;
  cursor: not-allowed;
  pointer-events: none;
}
.wst-at-booking-wrap .wst-at-btn-icon { font-size: 18px !important; }

.wst-at-booking-wrap .wst-at-btn--primary,
.wst-at-booking-wrap .wst-at-btn--primary:focus,
.wst-at-booking-wrap .wst-at-btn--primary:active {
  background-color: var(--wst-primary-container);
  background-image: none;
  color: var(--wst-on-primary);
  box-shadow: var(--wst-shadow-ambient);
  border-color: var(--wst-primary-container);
}
.wst-at-booking-wrap .wst-at-btn--primary:hover {
  background-color: var(--wst-primary);
  color: var(--wst-on-primary);
  transform: translateY(-2px);
  box-shadow: var(--wst-shadow-hover);
  border-color: var(--wst-primary);
}

/* Book & Pay Now: pin transform so theme/Elementor `button:hover` rules
   can't introduce scale/translate. Color + shadow still change. */
.wst-at-booking-wrap #wst-at-book-now,
.wst-at-booking-wrap #wst-at-book-now:hover,
.wst-at-booking-wrap #wst-at-book-now:focus,
.wst-at-booking-wrap #wst-at-book-now:active {
  transform: none;
}

.wst-at-booking-wrap .wst-at-btn--ghost,
.wst-at-booking-wrap .wst-at-btn--ghost:focus,
.wst-at-booking-wrap .wst-at-btn--ghost:active {
  background-color: transparent;
  background-image: none;
  color: var(--wst-tertiary);
  border-color: var(--wst-outline-variant);
  box-shadow: none;
}
.wst-at-booking-wrap .wst-at-btn--ghost:hover {
  background-color: var(--wst-surface-soft);
  color: var(--wst-on-surface);
  border-color: var(--wst-outline);
  box-shadow: none;
}

.wst-at-booking-wrap .wst-at-btn--block { width: 100%; }
.wst-at-booking-wrap .wst-at-btn--large { padding: 18px 28px; font-size: 16px; }

/* ─── Loading spinner ────────────────────────────────────────────────────── */
.wst-at-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 64px 24px;
  color: var(--wst-secondary);
  font-size: 15px;
  background: var(--wst-surface);
  border-radius: var(--wst-radius-lg);
  grid-column: 1 / -1;
  box-shadow: var(--wst-shadow-ambient);
}
.wst-at-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid var(--wst-outline-variant);
  border-top-color: var(--wst-primary-container);
  animation: wstAtSpin 700ms linear infinite;
}
@keyframes wstAtSpin { to { transform: rotate(360deg); } }

/* ==========================================================================
   STEP 2 — Vehicle grid
   ========================================================================== */
.wst-at-vehicle-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}

.wst-at-vehicle-card {
  position: relative;
  display: flex;
  /* Column layout at every viewport — image on top, info below. The
     side-by-side row layout was visually unbalanced on desktop because
     the description column wrapped to many lines while the image stayed
     a small square; uniform column cards read better in a 2-up grid. */
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  background: var(--wst-surface);
  border: 2px solid transparent;
  border-radius: var(--wst-radius);
  box-shadow: var(--wst-shadow-ambient);
  cursor: pointer;
  overflow: hidden;
  transition: transform var(--wst-trans), box-shadow var(--wst-trans), border-color var(--wst-trans-fast);
  outline: 0;
}
.wst-at-vehicle-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--wst-shadow-hover);
  border-color: var(--wst-outline-variant);
}
.wst-at-vehicle-card:focus-visible {
  border-color: var(--wst-primary-container);
  box-shadow: 0 0 0 3px rgba(26, 32, 29, .18), var(--wst-shadow-ambient);
}
.wst-at-vehicle-card.selected {
  border-color: var(--wst-primary-container);
  box-shadow: var(--wst-shadow-hover);
}
.wst-at-vehicle-card.selected::after {
  content: 'SELECTED';
  position: absolute;
  top: 0;
  right: 0;
  padding: 6px 12px;
  background: var(--wst-primary-container);
  color: var(--wst-on-primary);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  border-bottom-left-radius: var(--wst-radius);
  z-index: 2;
}

.wst-at-vehicle-thumb {
  flex: 0 0 auto;
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--wst-radius-sm);
  overflow: hidden;
  background: var(--wst-surface-low);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--wst-secondary);
}
.wst-at-vehicle-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wst-at-vehicle-info {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.wst-at-vehicle-info-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}
.wst-at-vehicle-name {
  font-family: var(--wst-font-display);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.25;
  color: var(--wst-on-surface);
  margin: 0;
}
.wst-at-vehicle-check {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--wst-outline-variant);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  font-size: 16px !important;
  transition: background var(--wst-trans-fast), border-color var(--wst-trans-fast), color var(--wst-trans-fast);
  font-family: 'Material Symbols Outlined';
}
.wst-at-vehicle-card:hover .wst-at-vehicle-check { border-color: var(--wst-primary-container); }
.wst-at-vehicle-card.selected .wst-at-vehicle-check {
  background: var(--wst-primary-container);
  border-color: var(--wst-primary-container);
  color: var(--wst-on-primary);
}

.wst-at-vehicle-desc {
  font-size: 14px;
  line-height: 1.55;
  color: var(--wst-secondary);
  margin: 0 0 12px;
}

.wst-at-vehicle-caps {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 12px;
  font-size: 14px;
  color: var(--wst-on-variant);
}
.wst-at-vehicle-caps span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.wst-at-vehicle-caps .material-symbols-outlined {
  font-size: 18px !important;
  color: var(--wst-secondary);
}

.wst-at-features {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}
.wst-at-feature {
  padding: 4px 10px;
  background: var(--wst-primary-tint);
  color: var(--wst-primary);
  border-radius: var(--wst-radius-pill);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.wst-at-vehicle-foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 8px;
}
.wst-at-vehicle-price {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.wst-at-vehicle-price-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wst-secondary);
}
.wst-at-vehicle-price-rs {
  font-family: var(--wst-font-display);
  font-weight: 500;
  font-size: 28px;
  line-height: 1.1;
  color: var(--wst-on-surface);
}

/* ==========================================================================
   STEP 3 — Counters
   ========================================================================== */
.wst-at-capacity-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: var(--wst-surface-low);
  border: 1px solid var(--wst-divider);
  border-radius: var(--wst-radius);
  margin-bottom: 32px !important;
}
.wst-at-capacity-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--wst-primary-tint);
  color: var(--wst-primary-container);
  display: flex;
  align-items: center;
  justify-content: center;
}
.wst-at-capacity-icon .material-symbols-outlined { font-size: 24px !important; font-variation-settings: 'FILL' 1; }
.wst-at-capacity-meta { flex: 1 1 auto; min-width: 0; }
.wst-at-capacity-title {
  font-family: var(--wst-font-display);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.25;
  color: var(--wst-on-surface);
  margin: 0 0 2px;
}
.wst-at-capacity-hint {
  font-size: 14px;
  color: var(--wst-secondary);
  margin: 0;
}

.wst-at-counter-list {
  display: flex;
  flex-direction: column;
}
.wst-at-counter-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--wst-divider);
}
.wst-at-counter-row:first-child { padding-top: 0; }
.wst-at-counter-row:last-child { border-bottom: 0; }
.wst-at-counter-meta { flex: 1 1 auto; min-width: 0; }
.wst-at-counter-name {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--wst-on-surface);
  margin: 0 0 4px;
  letter-spacing: 0.01em;
}
.wst-at-counter-name .required { color: var(--wst-primary-container); margin-left: 2px; }
.wst-at-counter-desc {
  font-size: 13px;
  color: var(--wst-secondary);
  margin: 0;
  line-height: 1.5;
}
.wst-at-booking-wrap .wst-at-counter {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background-color: var(--wst-surface-low);
  border: 1px solid var(--wst-outline-variant);
  border-radius: var(--wst-radius-pill);
  padding: 4px;
}
/* The numeric input must look like part of the pill — no border, no
   background, no padding, no box-shadow. Theme/Elementor stylesheets
   apply broad `input { border: 1px solid; background: ... }` rules and
   give the counter input a visible "box inside a pill" treatment if we
   don't bulletproof every state here. */
.wst-at-booking-wrap .wst-at-counter input,
.wst-at-booking-wrap .wst-at-counter input:hover,
.wst-at-booking-wrap .wst-at-counter input:focus,
.wst-at-booking-wrap .wst-at-counter input:active,
.wst-at-booking-wrap .wst-at-counter input:focus-visible {
  width: 40px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background-color: transparent;
  background-image: none;
  box-shadow: none;
  text-align: center;
  font-family: var(--wst-font-body);
  font-size: 16px;
  font-weight: 600;
  color: var(--wst-on-surface);
  line-height: 1;
  -moz-appearance: textfield;
  appearance: none;
  -webkit-appearance: none;
  outline: 0;
}
.wst-at-booking-wrap .wst-at-counter input::-webkit-outer-spin-button,
.wst-at-booking-wrap .wst-at-counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.wst-at-booking-wrap .wst-at-counter-btn,
.wst-at-booking-wrap .wst-at-counter-btn:focus,
.wst-at-booking-wrap .wst-at-counter-btn:active {
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 50%;
  border: 0;
  background-color: transparent;
  background-image: none;
  color: var(--wst-secondary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--wst-trans-fast), color var(--wst-trans-fast);
  box-shadow: none;
  text-shadow: none;
  min-height: 0;
}
.wst-at-booking-wrap .wst-at-counter-btn--inc { color: var(--wst-primary-container); }

/* Hover treatments are gated behind `(hover: hover)` so touch devices
   don't lock into a "stuck" hover state after tap — mobile browsers
   retain :hover until the user taps elsewhere, which left the + button
   permanently green-tinted after a tap-and-release. */
@media (hover: hover) {
  .wst-at-booking-wrap .wst-at-counter-btn:hover {
    background-color: var(--wst-surface-variant);
    color: var(--wst-on-surface);
  }
  .wst-at-booking-wrap .wst-at-counter-btn--inc:hover {
    background-color: var(--wst-primary-tint);
    color: var(--wst-primary);
  }
}
.wst-at-booking-wrap .wst-at-counter-btn:focus-visible { outline: 2px solid var(--wst-primary-container); outline-offset: 2px; }
.wst-at-booking-wrap .wst-at-counter-btn .material-symbols-outlined { font-size: 20px !important; }

.wst-at-field--special {
  margin-top: 32px !important;
  padding-top: 24px;
  border-top: 1px solid var(--wst-divider);
}

/* ==========================================================================
   STEP 4 — Review & Pay
   ========================================================================== */
.wst-at-review-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}
.wst-at-review-summary { min-width: 0; }
.wst-at-review-pay { min-width: 0; position: sticky; top: 24px; }
.wst-at-pay-card { /* visual treatment hook */ }

.wst-at-summary {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.wst-at-summary .wst-at-summary-dl {
  margin: 0;
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  column-gap: 24px;
  row-gap: 18px;
}
.wst-at-summary dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wst-secondary);
  align-self: center;
}
.wst-at-summary dd {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--wst-on-surface);
  line-height: 1.5;
  word-break: break-word;
}

.wst-at-price-display {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 0 24px;
  border-bottom: 1px solid var(--wst-divider);
  margin-bottom: 24px;
}
.wst-at-price-display .wst-at-label-caps { color: var(--wst-secondary); }
.wst-at-price-rs {
  font-family: var(--wst-font-display);
  font-weight: 500;
  font-size: 44px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--wst-primary-container);
}

.wst-at-secure-note {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding: 14px 16px;
  background: var(--wst-surface-low);
  border-radius: var(--wst-radius-sm);
}
.wst-at-secure-icon {
  font-size: 22px !important;
  color: var(--wst-primary-container);
  flex: 0 0 auto;
}
.wst-at-secure-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--wst-on-surface);
  margin: 0 0 4px;
}
.wst-at-secure-body {
  font-size: 13px;
  line-height: 1.5;
  color: var(--wst-secondary);
  margin: 0;
}

.wst-at-error {
  margin-top: 16px;
  padding: 14px 18px;
  background: var(--wst-error-bg);
  color: var(--wst-error-on);
  border: 1px solid rgba(186, 26, 26, .25);
  border-radius: var(--wst-radius-sm);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.5;
}

/* ==========================================================================
   Responsive — Tablet & mobile
   ========================================================================== */
@media (max-width: 900px) {
  .wst-at-booking-wrap { padding: 32px 18px; }
  .wst-at-progress { margin-bottom: 40px; }
  .wst-at-step-label { display: none; }
  .wst-at-card-body { padding: 28px; }
  .wst-at-card .wst-at-step-actions { padding: 20px 28px 28px; }
  .wst-at-booking-wrap .wst-at-step-title { font-size: 32px; }
  .wst-at-booking-wrap .wst-at-step-subtitle { font-size: 16px; }
  .wst-at-vehicle-grid { grid-template-columns: 1fr; }
  .wst-at-review-grid { grid-template-columns: 1fr; }
  .wst-at-review-pay { position: static; }
  .wst-at-toggle-row { flex-direction: column; gap: 20px; }
  /* In column flex, the `240px` of `flex: 1 1 240px` is interpreted as a
     height basis and each field-block balloons to 240px tall — leaves a
     huge empty gap between Direction and Trip Type. Reset to auto. */
  .wst-at-toggle-row > .wst-at-field-block { flex: 1 1 auto; }
}

@media (max-width: 640px) {
  .wst-at-booking-wrap { padding: 24px 14px; border-radius: var(--wst-radius); }
  /* 20px card-body padding pairs with the 20px toggle-row / field-grid
     gaps below so the 28px inter-field rhythm has matching breathing room
     against the card walls rather than reading cramped. */
  .wst-at-card-body { padding: 20px; }
  .wst-at-card .wst-at-step-actions { padding: 16px 20px 20px; }
  .wst-at-card { border-radius: var(--wst-radius); }
  .wst-at-booking-wrap .wst-at-step-title { font-size: 26px; }
  /* Trim the progress indicator's vertical footprint on phones so the
     wizard card sits higher in view. */
  .wst-at-progress { margin-bottom: 22px; }
  /* `minmax(0, 1fr)` (not bare `1fr`) lets the grid track shrink below the
     intrinsic min-content of its child input. Without this, a single
     <input> with an intrinsic floor of ~200px will push the entire grid
     wider than the card. The 20px gap matches the stacked toggle-row gap
     so vertical and grid rhythm stay even across the step. */
  .wst-at-field-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  /* Cap the suggestion dropdown so an open list can't push the rest of
     the form off-screen on a short phone viewport; it scrolls internally
     (overscroll-behavior:contain is already set on the base rule). */
  .wst-at-hotel-suggest { max-height: 232px; }
  .wst-at-step-actions { flex-direction: column-reverse; align-items: stretch; }
  .wst-at-step-actions--split { flex-direction: column-reverse; }
  .wst-at-step-actions .wst-at-btn { width: 100%; }
  .wst-at-counter-row { flex-direction: column; align-items: flex-start; gap: 12px; }
  .wst-at-counter { align-self: flex-end; }
  .wst-at-summary .wst-at-summary-dl {
    grid-template-columns: 1fr;
    row-gap: 6px;
  }
  .wst-at-summary dd { padding-bottom: 14px; border-bottom: 1px solid var(--wst-divider); }
  .wst-at-summary .wst-at-summary-dl > div:last-child dd { border-bottom: 0; padding-bottom: 0; }
  .wst-at-price-rs { font-size: 36px; }
  .wst-at-capacity-banner { flex-direction: column; align-items: flex-start; }

  /* Toggle pills shrink to fit a narrow viewport. Without min-width:0,
     flex items refuse to shrink below their text width and overflow the
     card to the right. The label can wrap to two tidy centered lines so
     the "tab toggle group" visual is preserved at every phone width —
     stacking them vertically loses the "selected within a group"
     affordance.
     `min-width:0` on the group + each pill lets both `flex:1 1 0` pills
     keep an equal half-share and shrink cleanly; `word-break` is
     deliberately NOT set — it snaps labels mid-word ("Air-port") and the
     fragment then collides with the sibling pill / group border. Normal
     `white-space:normal` wraps only at spaces and the `→` arrow, giving
     two clean lines.
     CRITICAL: every interaction state gets the same padding/font here so
     the focused pill never grows asymmetrically vs the unfocused one. The
     desktop rule's `:focus`/`:active` selectors are (0,2,1) specificity
     and would otherwise outweigh a bare `(0,2,0)` mobile override. */
  .wst-at-booking-wrap .wst-at-toggle-group {
    gap: 4px;
    margin: 0;
  }
  .wst-at-booking-wrap .wst-at-toggle,
  .wst-at-booking-wrap .wst-at-toggle:hover,
  .wst-at-booking-wrap .wst-at-toggle:focus,
  .wst-at-booking-wrap .wst-at-toggle:focus-visible,
  .wst-at-booking-wrap .wst-at-toggle:active {
    flex: 1 1 0;
    margin: 0;
    padding: 11px 8px;
    font-size: 13.5px;
    gap: 5px;
    min-width: 0;
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.25;
    text-align: center;
  }
  /* The label can wrap; the icon must not be squeezed out or compressed. */
  .wst-at-booking-wrap .wst-at-toggle-icon {
    font-size: 16px !important;
    flex: 0 0 auto;
  }

  /* Slightly stronger active treatment on small screens — at this scale
     the soft `--wst-shadow-sm` reads as nothing and the active pill loses
     prominence against the sage container. We deliberately do NOT change
     font-weight between states because bold glyphs are ~5% wider than
     regular and that delta is enough to push the inactive pill into a
     2-line wrap. The bg + color + shadow combo already reads as "selected"
     unambiguously. */
  .wst-at-booking-wrap .wst-at-toggle.active,
  .wst-at-booking-wrap .wst-at-toggle.active:hover,
  .wst-at-booking-wrap .wst-at-toggle.active:focus,
  .wst-at-booking-wrap .wst-at-toggle.active:active {
    box-shadow: 0 2px 6px rgba(26, 32, 29, .14), 0 1px 2px rgba(18, 38, 58, .04);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .wst-at-form-step { animation: none; }
  .wst-at-progress-fill { transition: none; }
  .wst-at-vehicle-card,
  .wst-at-btn,
  .wst-at-toggle { transition: none; }
}