/* =========================================================
   Niagara Falls Limousines — Booking Form Frontend Styles
   Premium Chauffeur Booking Experience
   ========================================================= */

/* Default CSS variables — PHP overrides these scoped to .nwb-form-wrapper */
:root {
  --nwb-primary:           #1A1A1A;
  --nwb-secondary:         #C9A227;
  --nwb-bg:                #FFFFFF;
  --nwb-text:              #1a1a1a;
  --nwb-label:             #1A1A1A;
  --nwb-input-bg:          #FFFFFF;
  --nwb-input-border:      #DDDDDD;
  --nwb-input-text:        #1a1a1a;
  --nwb-btn-bg:            #C9A227;
  --nwb-btn-text:          #1A1A1A;
  --nwb-radius:            12px;
  --nwb-btn-radius:        8px;
  --nwb-max-width:         1100px;
  --nwb-field-gap:         20px;
  --nwb-padding:           40px;
  /* Step 1 layout — admin-configurable via Style Settings → Step 1
     Layout Settings (see output_dynamic_styles() in
     class-nwb-frontend-form.php for the live get_option()-sourced
     values; these are only the pre-PHP-override fallback). */
  --nwb-step1-column-gap:  28px;
  --nwb-step1-padding:     28px;
  --nwb-customer-field-gap: 20px;
  --nwb-card-bg:           #FFFFFF;
  --nwb-card-selected-bg:  #1A1A1A;
  --nwb-card-selected-border: #C9A227;
  --nwb-card-hover-color:  #C9A227;
  --nwb-step-active:       #C9A227;
  --nwb-font-family:       'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
  /* Neutral hairline used throughout for dividers/borders that were
     previously tied to the old warm tan/cream palette — a single shared
     token keeps every "clean border" in the redesign visually consistent
     and gives future edits one place to adjust. */
  --nwb-hairline:          #E6E6E6;
  --nwb-muted:             #8a8a8a;
}

/* ================================================================
   PREMIUM POLISH — small global details, no layout/behavior change.
   Purely cosmetic; nothing here touches a class JS selects on, a form
   field, or any interactive state a script depends on.
   ================================================================ */

/* Gold-tinted text selection instead of the browser's default blue —
   scoped to inside the form only, never bleeds into the surrounding
   page/theme. */
.nwb-form-wrapper ::selection {
  background: rgba(201,162,39,.28);
  color: var(--nwb-primary);
}

/* Thin, branded scrollbar for the address-autocomplete result lists
   (Chrome/Edge/Safari via ::-webkit-scrollbar, Firefox via the
   standard scrollbar-color property) — small detail, but a default
   grey system scrollbar inside an otherwise fully-themed dropdown is
   exactly the kind of seam that reads as "unfinished." */
.nwb-geo-dropdown,
.nwb-gac-dropdown {
  scrollbar-width: thin;
  scrollbar-color: var(--nwb-secondary) #f0f0f0;
}
.nwb-geo-dropdown::-webkit-scrollbar,
.nwb-gac-dropdown::-webkit-scrollbar { width: 8px; }
.nwb-geo-dropdown::-webkit-scrollbar-track,
.nwb-gac-dropdown::-webkit-scrollbar-track { background: #f5f5f5; }
.nwb-geo-dropdown::-webkit-scrollbar-thumb,
.nwb-gac-dropdown::-webkit-scrollbar-thumb {
  background: var(--nwb-secondary);
  border-radius: 4px;
}

/* Chrome/Edge/Safari auto-fill a saved address/email with a jarring
   yellow background by default, which would visibly break the white/
   charcoal aesthetic on every field a browser offers to fill. The long-
   delay transition is the standard, side-effect-free way to override
   the fill color without touching the field's real value or triggering
   any input/change event a validation script listens for. */
.nwb-input:-webkit-autofill,
.nwb-input:-webkit-autofill:hover,
.nwb-input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--nwb-input-text, var(--nwb-text));
  -webkit-box-shadow: 0 0 0 1000px var(--nwb-input-bg) inset;
  box-shadow: 0 0 0 1000px var(--nwb-input-bg) inset;
  transition: background-color 9999s ease-in-out 0s;
}

/* Native date/time picker glyph — left at its default browser icon
   (color-filtering it reliably across engines isn't practical), but
   given a soft hover/focus response so it doesn't feel like a dead,
   unstyled control next to everything else in the field. */
input[type="date"].nwb-input::-webkit-calendar-picker-indicator,
input[type="time"].nwb-input::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: .65;
  transition: opacity .15s ease;
  border-radius: 4px;
}
input[type="date"].nwb-input:hover::-webkit-calendar-picker-indicator,
input[type="time"].nwb-input:hover::-webkit-calendar-picker-indicator,
input[type="date"].nwb-input:focus::-webkit-calendar-picker-indicator,
input[type="time"].nwb-input:focus::-webkit-calendar-picker-indicator {
  opacity: 1;
}

/* Keyboard-focus ring on the two plain-text links in the form (Booking
   Summary "view breakdown" and Step 2 "Edit Details") — both already
   had a functioning click target, this only makes tabbing to them
   visible, matching the accessible focus treatment already used on the
   WhatsApp link. */
.nwb-show-breakdown:focus-visible,
.nwb-back-link:focus-visible,
.nwb-back-link-step3:focus-visible {
  outline: 2px solid var(--nwb-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ================================================================
   FORM WRAPPER
   ================================================================ */
.nwb-form-wrapper {
  /* min() combines two independent caps: the admin's configured Form Max
     Width (--nwb-max-width, unchanged — this is what actually governs
     desktop/tablet sizing) AND the real device viewport (100vw). Without
     the 100vw term, this element's rendered width is only ever as wide as
     its own DOM parent's content box allows — normally that's fine, but
     this plugin is embedded via shortcode inside host-page markup it does
     not control (confirmed on the reported site: an Elementor section/
     column). If that host container's own width/padding doesn't collapse
     correctly for a given device — an Elementor-side responsive setting,
     not anything in this file — this element would otherwise faithfully
     fill that already-too-wide parent and overflow the visible screen
     with it, which is exactly the reported symptom (present from the very
     first paint, on every step, since .nwb-form-wrapper is the single
     shared container for the whole form). 100vw is tied to the actual
     viewport, independent of the DOM ancestor chain, so this caps the
     plugin's own rendered width to the real screen regardless of what an
     external container around it does. On any correctly-behaving host
     layout (desktop, tablet, a normal WordPress page, or a correctly
     configured builder section) 100vw is always larger than
     --nwb-max-width, so min() resolves to the exact same value as before
     and nothing here changes visually. */
  max-width: min(var(--nwb-max-width), 100vw);
  margin: 0 auto;
  background: var(--nwb-bg);
  border-radius: 16px;
  border: 1px solid var(--nwb-hairline);
  box-shadow: 0 20px 60px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.04);
  overflow: hidden;
  font-family: var(--nwb-font-family);
  color: var(--nwb-text);
  position: relative;
}

/* ================================================================
   HEADER
   ================================================================ */
.nwb-form-header {
  /* Phase 9 — dedicated --nwb-header-bg/--nwb-header-align tokens
     (Style Settings → Booking Form Design → Header), defaulting to the
     exact same values --nwb-primary/'center' already produced, so this
     is a pure "now independently configurable" change, not a visual one. */
  background: var(--nwb-header-bg, var(--nwb-primary));
  padding: 48px var(--nwb-padding) 38px;
  text-align: var(--nwb-header-align, center);
  position: relative;
}
/* Thin gold hairline under the header — a restrained "premium" signature
   accent instead of a heavy colored block, echoed by the steps-nav border
   below so the two read as one continuous dark band. */
.nwb-form-header::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 64px;
  height: 2px;
  background: var(--nwb-secondary);
}
/* Small premium "eyebrow" label above the main heading (Phase 5,
   Journey Type-enabled forms only) — Global Settings → Journey Types →
   Booking Form Header. */
.nwb-form-eyebrow {
  color: var(--nwb-secondary);
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .28em;
  text-transform: uppercase;
}
.nwb-form-title {
  color: var(--nwb-header-title-color, #FFFFFF);
  margin: 0 0 12px;
  font-size: var(--nwb-header-font-size, 26px);
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.3;
}
.nwb-form-subtitle {
  color: var(--nwb-header-subtitle-color, var(--nwb-secondary));
  margin: 0;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: .5px;
  font-style: italic;
}

/* ================================================================
   STEP INDICATORS
   ================================================================ */
.nwb-steps-nav {
  display: flex;
  align-items: center;
  padding: 16px var(--nwb-padding);
  /* Phase 9 — --nwb-progress-bg/--nwb-progress-height (Style Settings →
     Booking Form Design → Progress), same default-matches-current
     pattern as the header above. */
  background: var(--nwb-progress-bg, var(--nwb-primary));
  border-bottom: 1px solid rgba(255,255,255,.08);
  min-height: var(--nwb-progress-height, 56px);
}
/* Flat, minimal-line stepper — "01 Trip Details ─── 02 Review" — no
   circular badge; the step number is plain bold text in the same
   horizontal line as its label, separated from the next step by a thin
   rule. Numeric text content is "01"/"02"/"03" (set in PHP), not a CSS
   counter, so it stays screen-reader-plain and needs no extra markup. */
.nwb-step-indicator {
  display: flex;
  align-items: baseline;
  gap: 8px;
  opacity: .45;
  transition: opacity .3s ease;
}
.nwb-step-indicator.active,
.nwb-step-indicator.completed { opacity: 1; }
.nwb-step-num {
  color: rgba(255,255,255,.5);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .5px;
  flex-shrink: 0;
  transition: color .3s ease;
}
.nwb-step-indicator.active .nwb-step-num,
.nwb-step-indicator.completed .nwb-step-num {
  color: var(--nwb-step-active);
}
.nwb-step-label {
  color: rgba(255,255,255,.55);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .3s ease;
}
.nwb-step-indicator.active .nwb-step-label,
.nwb-step-indicator.completed .nwb-step-label { color: #fff; }
.nwb-step-connector {
  flex: 1;
  height: 1px;
  background: rgba(255,255,255,.16);
  margin: 0 18px;
  min-width: 16px;
}

/* ================================================================
   PANELS
   ================================================================ */
.nwb-step-panel {
  padding: var(--nwb-padding);
}
.nwb-step-1-panel {
  padding: var(--nwb-field-gap) 0 var(--nwb-padding);
}
.nwb-step-1-panel .nwb-form-footer {
  padding: 0 var(--nwb-padding);
}
/* Phase 8 redesign — compact single-column widget: constrains EVERY
   direct/nested part of Step 1 (Journey Type cards, trip fields, the
   quote-request hint, callouts, the Continue button) to the same width
   and centers it, in one rule, instead of repeating max-width/margin on
   each individual piece — guarantees they all stay visually aligned with
   .nwb-step1-compact's own fields without needing to track down every
   sibling that happens to render outside that wrapper (e.g. the Journey
   Type selector above it, or the submit button below it). */
.nwb-step-1-panel .nwb-booking-form {
  /* Phase 9 — --nwb-compact-step-max-width (Style Settings → Booking
     Form Design → Step Cards), default 640px matches the previous
     hardcoded value exactly; also governs Step 3's card, see below. */
  max-width: var(--nwb-compact-step-max-width, 640px);
  margin: 0 auto;
}

/* ================================================================
   STEP 1 — COMPACT SINGLE-COLUMN LAYOUT (Phase 8 redesign)
   Customer Details moved to its own Step 3 panel, so Step 1 is now just
   the trip-planning fields in one flowing column — a compact "premium
   widget" card instead of the previous two-column spread. Reuses the
   same admin-configurable Step 1 padding/gap tokens Style Settings
   already exposes (nwb_step1_padding/nwb_step1_column_gap), just applied
   to a single column now instead of splitting them across two.
   ================================================================ */
.nwb-step1-compact {
  /* Width/centering now handled once, higher up, by .nwb-step-1-panel
     .nwb-booking-form (see its comment) — this only needs its own side
     padding, same token every other Step 1 section already uses. */
  padding: 0 var(--nwb-padding);
}
.nwb-step1-compact .nwb-section {
  padding: 0 0 var(--nwb-field-gap);
}
/* First label sits flush with the panel's own top padding — no extra
   section padding stacking above it. */
.nwb-step1-compact > .nwb-section-label:first-child {
  margin-top: 0;
}

/* ================================================================
   FIELDS GRID
   ================================================================ */
.nwb-fields-grid {
  display: flex;
  flex-direction: column;
  gap: var(--nwb-field-gap);
}
.nwb-fields-grid.nwb-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--nwb-field-gap);
}
.nwb-fields-grid.nwb-three-col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--nwb-field-gap);
}
/* min-width: 0 lets a grid item shrink below its content's intrinsic
   min-content size (the CSS Grid default is min-width: auto) — without it,
   a native date/time input can force its column wider than its 1fr share
   on some browsers/widths (notably Safari), throwing off the equal-column
   alignment other field types don't have this issue with. */
.nwb-col-full  { grid-column: 1 / -1; min-width: 0; }
.nwb-col-half  { grid-column: span 1; min-width: 0; }
.nwb-col-third { grid-column: span 1; min-width: 0; }
.nwb-field-hidden { display: none !important; }

/* Customer Details fields layout — Style Settings → Step 1 Layout →
   Customer Field Layout (nwb_customer_field_layout, default "stacked").
   .nwb-customer-fields is added by class-nwb-frontend-form.php onto the
   SAME element that already carries .nwb-fields-grid.nwb-two-col/
   .nwb-three-col (the existing per-form Settings & Integrations "same
   row/stacked rows" choice) — this is a separate, admin-level setting
   layered on top, not a replacement for that per-form one. "inline"
   leaves the existing two-col/three-col behavior exactly as it already
   was; "stacked" forces a single column regardless of which of those
   two classes is present (forcing 1 grid column is enough on its own —
   every child's own span/grid-column value still resolves inside just
   that one column, so no per-field override is needed). Both modes use
   the dedicated field-gap variable instead of the general one, so
   Customer Details spacing can be tuned independently of the rest of
   the form. */
.nwb-fields-grid.nwb-customer-fields {
  gap: var(--nwb-customer-field-gap, 20px);
}
.nwb-fields-grid.nwb-customer-fields.stacked {
  grid-template-columns: 1fr !important;
}

/* Trip Type + Trip Direction layout — Style Settings → Step 1 Layout →
   Trip Selection Layout (nwb_trip_selection_layout, default "stacked").
   Same pattern as .nwb-customer-fields above: .nwb-trip-selection is
   added onto the same element that already carries .nwb-fields-grid.
   nwb-two-col (the existing per-form Settings & Integrations "same
   row/separate rows" choice) — only ever has anything to override when
   that per-form setting is putting the two fields side by side in the
   first place. "side-by-side" leaves the existing two-col behavior
   exactly as it already was; "stacked" forces a single column so each
   field spans the full card width (grid-column: 1/-1 resolves
   automatically once there's only one column, same reasoning as the
   customer-fields rule above — no per-field override needed). */
.nwb-fields-grid.nwb-trip-selection.stacked {
  grid-template-columns: 1fr !important;
}

.nwb-common-fields .nwb-fields-grid + .nwb-fields-grid { margin-top: var(--nwb-field-gap); }

/* Journey Type conditional field visibility (Phase 2) — applied by
   assets/js/frontend-form.js's applyJourneyTypeVisibility() to any
   [data-field] element (or known section wrapper) not relevant to the
   currently-selected journey type. !important so it always wins
   regardless of the field's own display value (grid item, flex item,
   block, etc.) — the same reasoning as every other forced-layout
   override in this file. Deliberately a single shared class, not a
   per-journey-type class, since only one journey type is ever selected
   at a time. */
.nwb-journey-hidden {
  display: none !important;
}

/* Journey Type not chosen yet — the baseline trip-detail fields (pickup/
   drop-off, date/time, passengers/luggage; see JOURNEY_PENDING_BASELINE in
   frontend-form.js) render as a disabled PREVIEW instead of being hidden, so
   the form doesn't paint as a large empty box before the customer has made a
   choice. The real inputs/selects/buttons inside are given the `disabled`
   attribute by JS (see setFieldsDisabled()) — pointer-events:none here is a
   second, CSS-only guard against interaction, and opacity is the visible
   "not usable yet" cue. Both are removed automatically the instant a service
   type is chosen. */
.nwb-journey-pending {
  opacity: .65;
  pointer-events: none;
}
/* Opacity alone reads as almost no change here — the field's white
   background sits on this theme's cream page background, two tones already
   close enough that blending one toward the other at reduced opacity is
   barely visible. An explicit muted fill/border/text makes "not usable yet"
   unmistakable regardless of the active color palette; !important matches
   the same deliberate-override convention already used for vehicle cards
   elsewhere in this file. */
.nwb-journey-pending .nwb-input,
.nwb-journey-pending .nwb-select {
  background-color: #F0EFEA !important;
  border-color: #DAD7CE !important;
  color: #9A968C !important;
  cursor: not-allowed;
}
.nwb-journey-pending .nwb-input::placeholder {
  color: #ACA89E !important;
}
.nwb-journey-pending .nwb-select {
  /* Same dropdown chevron as .nwb-select, redrawn in the muted text color
     above instead of the theme's usual --nwb-primary-colored arrow. */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%239A968C' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
}
.nwb-journey-pending .nwb-ac-pin,
.nwb-journey-pending .nwb-datetime-hint {
  color: #ACA89E;
}
.nwb-journey-pending .nwb-toggle-btn {
  cursor: not-allowed;
}

/* Visually-hidden-but-present utility (Phase 5) — used for the real
   <select> elements behind the premium journey-type cards and One Way/
   Round Trip toggle buttons. Deliberately NOT display:none: the element
   must keep a non-zero rendered size so jQuery's :visible checks (used
   throughout validateStep1()/isShown()) keep working exactly as they do
   for every normal field, with zero special-casing needed there. */
.nwb-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;
}

/* Phase 15 — the premium journey-type card UI (Phase 5) that used to
   render here was replaced with a plain native <select> per explicit
   client request (see class-nwb-frontend-form.php's journey-type-
   section markup) — nothing in the DOM uses .nwb-journey-cards/
   .nwb-journey-card anymore, so that ruleset was removed rather than
   left as dead CSS. The <select> itself needs no new rules: it already
   shares .nwb-input/.nwb-select with every other dropdown in this form. */

/* ================================================================
   ONE WAY / ROUND TRIP TOGGLE (Phase 5) — segmented button pair
   replacing the plain Trip Direction <select> visually.
   ================================================================ */
.nwb-toggle-group {
  display: inline-flex;
  border: 1px solid var(--nwb-input-border);
  /* Phase 9 — --nwb-toggle-radius (Style Settings → Booking Form Design
     → Trip Toggle), default 10px matches the previous hardcoded value. */
  border-radius: var(--nwb-toggle-radius, 10px);
  overflow: hidden;
  margin-top: 4px;
}
.nwb-toggle-btn {
  flex: 1;
  /* Phase 9 — --nwb-toggle-inactive-bg, default #FFFFFF (unchanged). */
  background: var(--nwb-toggle-inactive-bg, #FFFFFF);
  border: 0;
  padding: 12px 18px;
  min-height: 44px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--nwb-label);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease;
}
.nwb-toggle-btn + .nwb-toggle-btn {
  border-left: 1px solid var(--nwb-input-border);
}
.nwb-toggle-btn:focus-visible {
  outline: 2px solid var(--nwb-secondary);
  outline-offset: -2px;
}
.nwb-toggle-btn.selected {
  /* Phase 9 — --nwb-toggle-active-bg/--nwb-toggle-active-text, defaults
     match the previous hardcoded var(--nwb-primary)/var(--nwb-secondary)
     exactly, now independently configurable from the general primary/
     secondary brand colors. */
  background: var(--nwb-toggle-active-bg, var(--nwb-primary));
  color: var(--nwb-toggle-active-text, var(--nwb-secondary));
}

/* Quote-route message (Phase 5) — shown on Step 1, before submission,
   whenever the selected journey type routes to a quote request rather
   than instant pricing/payment. */
.nwb-journey-quote-message {
  margin: 16px var(--nwb-padding) 0;
  padding: 14px 16px;
  background: #FAFAFA;
  border: 1px solid var(--nwb-hairline);
  border-left: 3px solid var(--nwb-secondary);
  border-radius: 6px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nwb-text);
}

/* ================================================================
   FIELD ELEMENTS
   ================================================================ */
.nwb-field-wrap {
  display: flex;
  flex-direction: column;
  /* Phase 18/19 — label-to-input gap, tightened from 7px to match the
     compact widget's explicit "Label margin bottom: 4px" target. Not
     wired to a dashboard setting since it never was one (font-size,
     weight and every input dimension around it already are — this is
     just the small fixed space between them). */
  gap: 4px;
}
.nwb-label {
  /* Phase 9 — --nwb-label-font-size (Style Settings → Booking Form
     Design → Inputs), default 12px is a 0.5px rounding of the previous
     hardcoded 12.5px — visually indistinguishable. */
  font-size: var(--nwb-label-font-size, 13.5px);
  /* Phase 18/19 — compact widget target is font-weight 600 (was 700).
     Never a dashboard setting (only size was), so this is a direct value
     change like every other un-exposed micro-style in this file. */
  font-weight: 600;
  color: var(--nwb-label);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.nwb-required {
  color: #c0392b;
  margin-left: 2px;
}
.nwb-input {
  width: 100%;
  /* Phase 9 — --nwb-input-height/--nwb-input-padding (Style Settings →
     Booking Form Design → Inputs). Padding default 16px is a small,
     intentional simplification of the previous asymmetric 13px/16px
     (single uniform value, same convention as every other *-padding
     token in this file, e.g. --nwb-vehicle-card-padding/--nwb-step1-
     padding) — a ~3px visual difference on the vertical axis, not a
     functional change. */
  min-height: var(--nwb-input-height, 52px);
  padding: var(--nwb-input-padding, 16px);
  border: 1px solid var(--nwb-input-border);
  /* Hardcoded (not var(--nwb-radius)) — the admin-configurable radius
     token still governs cards/price-box/etc. everywhere else; form
     fields specifically are pinned to this narrower range so they read
     as crisp, modern inputs regardless of a broader card radius an
     admin has set elsewhere. */
  border-radius: 10px;
  background: var(--nwb-input-bg);
  /* Phase 16 — --nwb-input-font-size (Style Settings → Booking Form
     Density). Desktop/tablet only reads this directly; the mobile
     override further down clamps it to a 16px floor regardless of this
     value — see that rule's comment for why (iOS Safari auto-zoom). */
  font-size: var(--nwb-input-font-size, 16px);
  color: var(--nwb-input-text, var(--nwb-text));
  transition: border-color .18s ease, box-shadow .18s ease;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}
.nwb-input::placeholder { color: var(--nwb-input-placeholder-color, #a3a3a3); }
.nwb-input:hover { border-color: #c9c9c9; }
.nwb-input:focus {
  outline: none;
  border-color: var(--nwb-secondary);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.nwb-input.nwb-field-invalid {
  border-color: #c0392b;
  box-shadow: 0 0 0 3px rgba(192,57,43,.10);
}
.nwb-select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%231A1A1A' d='M7.247 11.14L2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
  /* Long label+description option text (e.g. the Journey Type select's
     "Label — Description" options, see class-nwb-frontend-form.php)
     must never widen or break this field's own box — clip the CLOSED
     select's displayed text with an ellipsis instead. Only affects the
     collapsed box; the open options list itself is native OS/browser
     chrome and can't be styled from here without replacing the real
     <select> with a custom widget, which Phase 15 deliberately avoided. */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.nwb-textarea { resize: vertical; min-height: 100px; }

/* Autocomplete */
.nwb-ac-wrapper { position: relative; }
.nwb-ac-wrapper .nwb-input { padding-right: 44px; }
.nwb-ac-pin {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  color: var(--nwb-secondary);
  opacity: .85;
  line-height: 1;
}
/* Clear (X) button — occupies the exact same spot as the pin icon and is
   swapped in for it (via .nwb-has-value, toggled in google-autocomplete.js)
   once the field has a value, so nothing shifts and no extra input padding
   is needed beyond what the pin already reserved.
   This is a bare <button>, so iOS Safari's native control chrome AND the
   site's theme/Elementor global button CSS (outside this plugin's control)
   both target it — a selector as generic as `button[type="button"]` or
   `.elementor-widget button` has HIGHER specificity than a single class
   like `.nwb-ac-clear` (0,1,0) alone, so even !important on the old rule
   could still lose to a competing !important rule with higher specificity.
   The selector below is deliberately over-specific — ancestor-scoped,
   element-typed, and the class repeated to add weight — so it wins on
   specificity regardless, with !important on every visually-relevant
   property as a second, independent guarantee. None of this changes the
   button's click behavior, only its appearance. */
.nwb-form-wrapper .nwb-ac-wrapper button.nwb-ac-clear.nwb-ac-clear {
  position: absolute !important;
  right: 12px !important;
  left: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  display: none !important;
  align-items: center;
  justify-content: center;
  box-sizing: border-box !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: none !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  outline: none !important;
  color: var(--nwb-label) !important;
  opacity: .55;
  font-size: 21px !important;
  line-height: 1 !important;
  text-align: center !important;
  text-decoration: none !important;
  text-transform: none !important;
  cursor: pointer;
  -webkit-appearance: none !important;
  appearance: none !important;
  -webkit-tap-highlight-color: transparent;
}
.nwb-form-wrapper .nwb-ac-wrapper button.nwb-ac-clear.nwb-ac-clear:hover,
.nwb-form-wrapper .nwb-ac-wrapper button.nwb-ac-clear.nwb-ac-clear:focus,
.nwb-form-wrapper .nwb-ac-wrapper button.nwb-ac-clear.nwb-ac-clear:active {
  opacity: .9;
  background: none !important;
  box-shadow: none !important;
}
/* Phase 7 — the outline:none above (line 656) had no keyboard-focus
   replacement at all (the :hover/:focus/:active rule just above only
   changes opacity .55->.9, a low-contrast cue that fails on its own).
   Declared after that rule, with !important, so it wins for the same
   :focus-visible moment. */
.nwb-form-wrapper .nwb-ac-wrapper button.nwb-ac-clear.nwb-ac-clear:focus-visible {
  box-shadow: 0 0 0 2px var(--nwb-secondary) !important;
}
.nwb-ac-wrapper.nwb-has-value .nwb-ac-pin { display: none; }
.nwb-form-wrapper .nwb-ac-wrapper.nwb-has-value button.nwb-ac-clear.nwb-ac-clear { display: flex !important; }

/* Help text & errors */
.nwb-help-text { font-size: 13px; color: var(--nwb-muted); margin: 0; }
.nwb-field-error { font-size: 13px; color: #c0392b; font-weight: 600; display: none; }
.nwb-field-error.visible { display: block; }

input[type="date"].nwb-input,
input[type="time"].nwb-input { min-width: 0; text-align: left; }
/* iOS Safari's own UA stylesheet center-aligns the value text inside
   date/time inputs via this WebKit-only pseudo-element (independent of
   the input's own text-align), which is what produced the mis-aligned
   "21-Aug-2026" / "3:15 PM" seen centered instead of left-aligned like
   every other field. Ignored (harmlessly) by non-WebKit browsers. Does
   not touch the picker itself or the stored value. */
input[type="date"].nwb-input::-webkit-date-and-time-value,
input[type="time"].nwb-input::-webkit-date-and-time-value {
  text-align: left;
}
/* Chromium (Chrome/Edge) renders visible "--:-- --" placeholder segments
   inside an EMPTY native <input type="time"> — unlike <input type="date">,
   there is no `placeholder` attribute support to suppress them. Those
   dashes were rendering through/behind the custom "Select time" overlay
   below (.nwb-datetime-hint), producing the reported garbled/dashed
   appearance. :not(:valid) scopes this to only an EMPTY, required time
   field — travel_time (id="nwb_field_travel_time" etc.) has `required`,
   so it's :invalid (this rule active) until a real time is picked, then
   :valid (rule inactive, value renders normally). return_time has no
   `required` attribute at all — its "required for round trip" check is
   JS-only, see onFormSubmit() in frontend-form.js — so an empty
   return_time is always :valid and this rule never touches it. */
input[type="time"].nwb-input:not(:valid)::-webkit-datetime-edit {
  color: transparent;
}

/* Date/Time placeholder hint. An empty native <input type="time"> shows
   nothing at all in Chrome/Firefox/Edge/Android Chrome, so this overlay
   fills that gap there. It disappears the moment the native picker sets a
   value, using the field's own existing `required` attribute + the
   standard :valid state as the signal — no JS, no change to the native
   date/time picker or stored value. */
.nwb-datetime-box { position: relative; }
.nwb-datetime-hint {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 16px;
  color: #a3a3a3;
  white-space: nowrap;
}
input[type="date"].nwb-input:valid ~ .nwb-datetime-hint,
input[type="time"].nwb-input:valid ~ .nwb-datetime-hint {
  display: none;
}
/* An empty native <input type="date"> is NOT blank the way <input
   type="time"> is — Chrome/Firefox/Edge/Android Chrome already render
   their own built-in "yyyy-mm-dd" format segments there by default (with
   no placeholder attribute involved), and iOS Safari renders its own
   "Date" text. Our overlay was rendering on top of that native text on
   every one of those browsers, producing the garbled/duplicated date
   placeholder reported (visible on desktop Chrome, not just iPhone). Only
   the DATE input's overlay is disabled here — the picker itself, its
   stored value, and the TIME field's overlay (still needed, see below)
   are unaffected. */
input[type="date"].nwb-input ~ .nwb-datetime-hint {
  display: none;
}
/* iOS Safari (and any other browser on iOS, e.g. Chrome-for-iOS — Apple
   requires all iOS browsers to render via WebKit) already paints its own
   "Time" text inside an empty native time control too, unlike desktop/
   Android Chrome which show nothing. -webkit-touch-callout is a reliable
   CSS-only signal for "this is iOS WebKit" (not a UA sniff), so the
   overlay is suppressed there for the same reason as the date field above
   — the native control's own "Time" hint is used instead, and it already
   hides itself correctly once a value is picked. Desktop and Android time
   fields are unaffected; the overlay above still shows there exactly as
   before. */
@supports (-webkit-touch-callout: none) {
  .nwb-datetime-hint {
    display: none;
  }
}

/* ================================================================
   SUBMIT BUTTON
   ================================================================ */
.nwb-form-footer {
  margin-top: 30px;
  display: flex;
  justify-content: flex-end;
}
/* General form's submit button is left-aligned, unlike the Transfer/Tour
   form footer above — scoped to this one modifier class only so the
   existing Transfer/Tour submit button alignment is unaffected. */
.nwb-general-form-footer {
  justify-content: flex-start;
}
/* Quote form's submit button is also left-aligned — same reasoning as the
   General form footer above, scoped independently of it. */
.nwb-quote-form-footer {
  justify-content: flex-start;
  margin-bottom: 0;
}

/* ================================================================
   QUOTE FORM — WhatsApp contact line
   Scoped to .nwb-quote-whatsapp only; does not touch any other form.
   ================================================================ */
.nwb-quote-whatsapp {
  margin: 14px 0 0;
  text-align: left;
  font-size: 15px;
  color: var(--nwb-text);
  line-height: 1.6;
}
.nwb-quote-whatsapp a {
  color: var(--nwb-primary);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--nwb-secondary);
  text-underline-offset: 2px;
}
.nwb-quote-whatsapp a:hover {
  color: var(--nwb-secondary);
}
.nwb-quote-whatsapp a:focus-visible {
  outline: 2px solid var(--nwb-secondary);
  outline-offset: 2px;
  border-radius: 2px;
}
.nwb-submit-btn {
  background: var(--nwb-btn-bg);
  color: var(--nwb-btn-text);
  border: none;
  /* Phase 16 — --nwb-button-height (Style Settings → Booking Form Density). */
  min-height: var(--nwb-button-height, 55px);
  padding: 0 42px;
  border-radius: var(--nwb-btn-radius);
  /* Phase 9 — --nwb-button-font-size/--nwb-button-font-weight/
     --nwb-button-width (Style Settings → Booking Form Design →
     Buttons). width defaults to 'auto' (this button's previous,
     unchanged right-aligned/content-width behavior); the Step 2/3
     buttons below already force width:100% for their own layout and
     are unaffected by this default. */
  font-size: var(--nwb-button-font-size, 16px);
  font-weight: var(--nwb-button-font-weight, 700);
  width: var(--nwb-button-width, auto);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: .6px;
  text-transform: uppercase;
  font-family: inherit;
}
.nwb-submit-btn:hover {
  /* Phase 9 — --nwb-button-hover-bg (Style Settings → Booking Form
     Design → Buttons), default #B8901F matches the previous hardcoded
     value exactly. */
  background: var(--nwb-button-hover-bg, #B8901F);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(201,162,39,.35);
}
.nwb-submit-btn:active { transform: translateY(0); }
.nwb-submit-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* Phase 7 — the main call-to-action button had no dedicated focus style
   at all (browser default only), unlike every other custom control in
   this form. */
.nwb-submit-btn:focus-visible {
  outline: 2px solid var(--nwb-secondary);
  outline-offset: 2px;
}
.nwb-btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(26,26,26,.25);
  border-top-color: var(--nwb-btn-text);
  border-radius: 50%;
  animation: nwb-spin .7s linear infinite;
}
.nwb-submit-btn.loading .nwb-btn-spinner { display: block; }
.nwb-submit-btn.loading .nwb-btn-text { opacity: .7; }

/* ================================================================
   STEP 2 — REVIEW CARD (Phase 6B: premium two-column layout)
   ================================================================ */
.nwb-review-card {
  /* Was a fixed 640px (a deliberately narrow single-column list look).
     Now fills the SAME width Step 1 already uses — .nwb-form-wrapper
     itself is already capped by the existing, dashboard-controlled
     --nwb-max-width — so this reuses that setting instead of
     introducing a second, hardcoded width value. */
  max-width: 100%;
  margin: 0 auto;
}
/* Phase 8/11 — Step 2 (vehicle list + price) and Step 3 (Customer
   Details + Payment) are both compact single-column layouts now, not
   Step 2's old wide two-column vehicle/price review, so both reuse Step
   1's same narrower width instead of the full-width .nwb-review-card
   default above. */
.nwb-step-2-panel .nwb-review-card,
.nwb-step-3-panel .nwb-review-card {
  max-width: var(--nwb-compact-step-max-width, 640px);
}
.nwb-review-title {
  color: var(--nwb-primary);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--nwb-secondary);
}
.nwb-review-rows { margin-bottom: 0; }

/* Phase 11 — Step 2 redesign: a single always-one-column vertical stack
   (vehicle list, then price card) — no more desktop two-column split, no
   more per-card `order`/`grid-column` juggling, since Trip Summary/
   Service Details/Route Map no longer render here at all (see the PHP
   comment above .nwb-step2-grid's opening tag) and only two cards remain,
   already in their correct source order. */
.nwb-step2-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--nwb-step1-column-gap, 28px);
}

/* Premium card — clean white surface, restrained border/radius/shadow
   (avoid excessive shadow/rounding), reusing the same
   --nwb-radius/--nwb-hairline/--nwb-step1-padding tokens already used
   throughout this form rather than new hardcoded values. */
.nwb-step2-card {
  background: var(--nwb-bg, #FFFFFF);
  border: 1px solid var(--nwb-hairline);
  border-radius: 10px;
  padding: var(--nwb-step1-padding, 28px);
  /* Phase 9 — --nwb-step-card-shadow (Style Settings → Booking Form
     Design → Step Cards), default 'none' matches the previous
     shadow-less card exactly (see resolve_step_card_shadow()). NOT
     applied to Step 1's .nwb-booking-form or Step 3's .nwb-review-card:
     neither has its own background/border (they're transparent content
     flowing inside .nwb-form-wrapper, which already has its own
     permanent, unconditional shadow — see that rule) — a shadow on a
     transparent box would just look broken, not "make this card pop." */
  box-shadow: var(--nwb-step-card-shadow, none);
}
.nwb-step2-card-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nwb-primary);
}
/* Elements that already carried their own margin/padding when they were
   flat siblings of .nwb-review-card now live inside a .nwb-step2-card,
   which already provides that spacing — neutralized here so a card
   never ends up with doubled-up internal whitespace. */
.nwb-step2-card.nwb-vehicle-select-section,
.nwb-step2-card .nwb-payment-actions { margin: 0; }
.nwb-step2-card .nwb-review-rows { margin-bottom: 0; }

.nwb-review-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--nwb-hairline);
  font-size: 15px;
}

/* Phase 11 — .nwb-step2-eyebrow ("01"/"02"/...) markup was removed from
   Step 2 (see class-nwb-frontend-form.php); this rule is no longer
   referenced there. Left in place harmlessly in case Step 3 or a future
   pass still wants the same numbered-eyebrow treatment — it's inert
   until some markup uses the class again. */
.nwb-step2-eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--nwb-secondary);
  margin-bottom: 8px;
}

/* Live Route Map (Phase 6) — a compact booking-summary map, not a
   full-screen one (Part 11: 250-350px desktop). Hidden by default;
   assets/js/route-map.js only ever shows it after successfully drawing
   a route, so there's never an empty/broken box if it can't render.
   No margin-bottom here (Phase 6C fix) — this is a direct grid item
   inside .nwb-step2-grid, which already spaces every card via its own
   `gap`; an added margin-bottom on top of that gap was stacking to
   produce a bigger gap after the map than between every other pair of
   cards in the same column. */
.nwb-route-map {
  border: 1px solid var(--nwb-hairline);
  border-radius: var(--nwb-radius, 12px);
  overflow: hidden;
}
/* Phase 6D — Route Map Settings → Route Map Section Label. Optional
   (only rendered when the admin sets a non-empty label); sits inside the
   same bordered container above the canvas, so it scrolls/hides with the
   map as one unit rather than needing its own show/hide handling. */
.nwb-route-map-title {
  margin: 0;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nwb-primary);
  background: #FAFAFA;
  border-bottom: 1px solid var(--nwb-hairline);
}
.nwb-route-map-canvas {
  width: 100%;
  /* Phase 6D — Route Map Settings → Map Height (default 300px), set as a
     CSS custom property in output_dynamic_styles(); 280px fallback only
     matters if that inline <style> block somehow failed to load. */
  height: var(--nwb-route-map-height, 280px);
}
.nwb-route-map-caption {
  display: none;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--nwb-muted);
  background: #FAFAFA;
  border-top: 1px solid var(--nwb-hairline);
}
.nwb-review-row:last-child { border-bottom: none; }
.nwb-review-row-label { color: var(--nwb-muted); font-weight: 500; }
.nwb-review-row-value { color: var(--nwb-text); font-weight: 600; text-align: right; max-width: 60%; }

/* ================================================================
   VEHICLE OPTION CARDS (Step 2 — "Choose Your Vehicle Option").
   Premium bordered containers, ONE card per row (never two cards side
   by side) — no pill shape, no rounded-pill radius, no colored card
   fills. Selection is communicated with a border + soft gold glow + a
   small animated check badge. Every color/size below is a CSS custom
   property sourced from an admin option (see output_dynamic_styles() in
   class-nwb-frontend-form.php) — nothing here is hardcoded content, only
   presentation. Three text-color variables (title/desc/price) below are
   redeclared with !important: those three have no Style Settings UI at
   all (there is nothing for an admin to lose control of) and would
   otherwise be unreachable without editing PHP, which is out of scope
   for this redesign — see the note above that block.
   ================================================================ */
.nwb-vehicle-select-section { margin-bottom: 28px; }
.nwb-vehicle-select-title {
  margin: 0 0 14px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nwb-primary);
}
.nwb-vehicle-select-cards {
  display: flex;
  flex-direction: column;
  gap: var(--nwb-vehicle-card-spacing, 14px);
}

.nwb-vehicle-select-card {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  width: var(--nwb-vehicle-card-width, 100%);
  min-height: var(--nwb-vehicle-card-height, 0);
  margin: 0;
  gap: 14px;
  padding: var(--nwb-vehicle-card-padding, 16px);
  position: relative;
  /* Exact, non-gradient, non-pill card look — hardcoded rather than
     variable-driven for these three properties specifically, so a
     stray theme/button-reset style (native <button> chrome, a global
     pill-shaped CTA style, etc.) can't leak a colored fill or a pill
     radius back in. */
  background-color: #FFFFFF !important;
  background-image: none !important;
  border: 1px solid #E0E0E0 !important;
  border-radius: 12px !important;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 100%;
  color: inherit;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.nwb-vehicle-select-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10) !important;
  /* Phase 9 — --nwb-vehicle-card-hover-border (Style Settings → Booking
     Form Design → Vehicle Cards): a genuinely new hover treatment — the
     base card's border was previously left unchanged on hover (lift +
     shadow only). Overridden by the .nwb-vehicle-select-active rule
     below when a card is also the selected one, via source order. */
  border-color: var(--nwb-vehicle-card-hover-border, #C9A227) !important;
}
/* Phase 7 — same branded focus ring already used for the journey-type
   cards/trip-direction toggle (see frontend.css:453-456/517-520); this
   card had none at all, so keyboard/screen-reader users tabbing through
   Step 2's vehicle options previously got no visible focus indicator
   beyond the browser's unstyled default. */
.nwb-vehicle-select-card:focus-visible {
  outline: 2px solid var(--nwb-secondary);
  outline-offset: 2px;
}
.nwb-vehicle-select-card.nwb-vehicle-select-active {
  /* Phase 11 — reference design calls for a subtle gold border + a
     light premium background tint, explicitly WITHOUT a heavy shadow or
     lift (the previous treatment had both — see the Phase 9 report).
     Background uses the same --nwb-vehicle-card-selected-border token
     as the border/badge below, at low opacity via color-mix() (widely
     supported; falls back harmlessly to transparent — i.e. plain white,
     border-only — in the rare browser without it, never to an error). */
  border: 2px solid var(--nwb-vehicle-card-selected-border, #C9A227) !important;
  background-color: color-mix(in srgb, var(--nwb-vehicle-card-selected-border, #C9A227) 8%, #FFFFFF) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.04) !important;
  transform: none;
}
/* Small gold "selected" check badge, top-right corner — appears with a
   short pop-in animation the moment .nwb-vehicle-select-active is toggled
   (pure CSS; the class itself is already toggled by existing JS). */
.nwb-vehicle-select-card.nwb-vehicle-select-active::after {
  content: '\2713';
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  /* Phase 9 — same --nwb-vehicle-card-selected-border token as the
     card's own border above (badge and border always match); text
     color reuses the existing --nwb-primary token instead of a second
     hardcoded #1A1A1A. */
  background: var(--nwb-vehicle-card-selected-border, #C9A227);
  color: var(--nwb-primary, #1A1A1A);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  animation: nwb-vehicle-pop .25s ease;
}
@keyframes nwb-vehicle-pop {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

/* ---- Image (left) — small, fixed size, always object-fit: cover.
   No background/overlay/shadow on the container — a transparent PNG
   or a not-yet-loaded image should never show a colored box. ---- */
.nwb-vehicle-select-image,
.nwb-vehicle-select-image-placeholder {
  display: block;
  flex-shrink: 0;
  width: var(--nwb-vehicle-image-width, 100px);
  height: var(--nwb-vehicle-image-height, 80px);
  border-radius: var(--nwb-vehicle-image-border-radius, 10px);
  object-fit: cover;
  background: #F5F5F5 !important;
  box-shadow: none !important;
  border: 1px solid var(--nwb-hairline);
  /* Subtle zoom on card hover/selection (below) — small enough to stay
     within the card's own padding/gap, so it never touches the
     title/price text next to it. */
  transition: transform .25s ease;
}
.nwb-vehicle-select-card:hover .nwb-vehicle-select-image,
.nwb-vehicle-select-card.nwb-vehicle-select-active .nwb-vehicle-select-image {
  transform: scale(1.04);
}

/* ---- Content: title + price share the top line, description sits
   below the title. Achieved by top-aligning the card's flex row
   (image / body / price) rather than centering it. ---- */
.nwb-vehicle-select-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.nwb-vehicle-select-name {
  font-weight: 700;
  font-size: var(--nwb-vehicle-title-font-size, 17px);
  color: var(--nwb-vehicle-title-color, #1A1A1A) !important;
  line-height: 1.25;
}
.nwb-vehicle-select-desc {
  font-size: var(--nwb-vehicle-desc-font-size, 13px);
  color: var(--nwb-vehicle-desc-color, #777) !important;
  line-height: 1.45;
}

/* ---- Price (right, top-aligned with the title) ---- */
.nwb-vehicle-select-price {
  flex-shrink: 0;
  font-weight: 800;
  font-size: var(--nwb-vehicle-price-font-size, 18px);
  color: var(--nwb-vehicle-price-color, #1A1A1A) !important;
  white-space: nowrap;
}

/* ---- Tablet: same side-by-side row layout as desktop (unchanged),
   just a moderately smaller, fixed image size — decoupled from the
   desktop-configured --nwb-vehicle-image-width/height variables so an
   admin's desktop sizing can never inflate the image on a narrower
   viewport. object-fit: cover (base rule, untouched) still prevents
   any stretching/distortion. ---- */
@media (min-width: 601px) and (max-width: 900px) {
  .nwb-vehicle-select-image,
  .nwb-vehicle-select-image-placeholder {
    width: 80px;
    height: 64px;
  }
}

/* ---- Mobile: 1 card per row (same as desktop), image top, content
   below, price below. The image is a small fixed size (not the
   desktop-configured width/height variables, and not 100% width) so
   it can never dominate the card's height regardless of what an admin
   has set for desktop — object-fit: cover (base rule) still prevents
   any stretching/distortion.

   width: 100% here is the same treatment, for the same reason, applied
   to the card itself: the base rule's `width: var(--nwb-vehicle-card-
   width, 100%)` resolves to a fixed PIXEL value (e.g. 600px) the moment
   an admin sets "Card Width" to anything other than its 0/"fill the row"
   default (see output_dynamic_styles() in class-nwb-frontend-form.php),
   and that pixel width has no viewport-relative sizing at all — it
   applies identically on a 390px-wide iPhone as on desktop. Since
   `.nwb-vehicle-select-card` has no box-sizing: border-box either, the
   card's actual rendered width is that pixel value PLUS its padding and
   border on top. Whichever is wider than the phone's viewport forces the
   whole page's layout viewport to expand to fit it — the real cause of
   the reported "page appears zoomed in / left side cut off" behavior on
   iPhone specifically (Step 2 is the only step with vehicle cards; Step 1
   never renders this element, which is why it was unaffected). Capping
   back to 100% here — same specificity as the base rule, later in the
   cascade, so it wins without !important — leaves the admin's configured
   pixel width fully intact on every larger viewport (tablet/desktop),
   exactly as before.

   box-sizing: border-box is added alongside it because width:100% alone
   is not actually sufficient: the base rule has no box-sizing of its own,
   so `width` sets only the CONTENT box, and this card's own padding
   (var(--nwb-vehicle-card-padding), 14px default = 28px total) plus its
   1px border on each side still get added ON TOP of that 100% — pushing
   the card's true rendered edge past its parent's boundary by ~30px even
   after the width cap above. That's the remaining gap the first pass of
   this fix missed. border-box makes width:100% mean "100% total,
   padding and border included," which is what's actually required here.
   Scoped to this same mobile-only block for the same reason as width
   above: it must not change how the admin's configured desktop pixel
   width renders on tablet/desktop, where this rule never applies. ---- */
@media (max-width: 600px) {
  /* Phase 11 — the reference design keeps every vehicle row horizontal
     (image left, name/description, capacity right) at every width,
     "no horizontal scrolling" achieved by letting the text columns
     shrink/wrap (.nwb-vehicle-select-body already has min-width:0 for
     exactly this) rather than by switching to a stacked/centered
     layout, which the previous mobile override did. Only the image
     shrinks a little to leave more room for text. */
  .nwb-vehicle-select-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .nwb-vehicle-select-card:hover,
  .nwb-vehicle-select-card.nwb-vehicle-select-active {
    transform: none;
  }
  .nwb-vehicle-select-image,
  .nwb-vehicle-select-image-placeholder {
    width: 64px;
    height: 64px;
  }
  .nwb-vehicle-select-price { white-space: normal; text-align: right; }
}

/* Loading spinner */
.nwb-loading-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 34px;
  color: var(--nwb-muted);
}
.nwb-spinner-wrap { margin-bottom: 14px; }
.nwb-spinner-ring {
  width: 40px;
  height: 40px;
  border: 3px solid var(--nwb-hairline);
  border-top-color: var(--nwb-secondary);
  border-radius: 50%;
  animation: nwb-spin .8s linear infinite;
}

/* Price box — a soft white-tinted sheen layered as its own gradient
   background ON TOP OF the flat --nwb-primary color beneath it (the
   standard, universally-supported multi-background technique — no
   color-mix()/relative-color syntax, so no fallback risk in older
   browsers), plus a faint gold glow behind the amount for a touch more
   depth than a flat block. The base --nwb-primary color itself, and
   what renders if an admin overrides it via Style Settings, is
   unchanged either way. */
.nwb-price-box {
  background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 55%), var(--nwb-primary);
  border-radius: var(--nwb-radius);
  padding: 28px 30px;
  text-align: center;
  margin-bottom: 18px;
  border: 1px solid var(--nwb-secondary);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  position: relative;
}
.nwb-price-label { color: rgba(255,255,255,.62); font-size: 12.5px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
.nwb-price-amount {
  color: var(--nwb-secondary);
  font-size: 41px;
  font-weight: 800;
  letter-spacing: .3px;
  text-shadow: 0 2px 18px rgba(201,162,39,.35);
}
.nwb-price-note { color: rgba(255,255,255,.55); font-size: 13px; margin-top: 8px; }

/* Breakdown */
.nwb-breakdown-toggle { margin-bottom: 22px; text-align: center; }
.nwb-show-breakdown { color: var(--nwb-primary); font-size: 14px; font-weight: 600; text-decoration: none; }
.nwb-show-breakdown:hover { color: var(--nwb-secondary); text-decoration: underline; }
.nwb-breakdown-rows { background: #FAFAFA; border: 1px solid var(--nwb-hairline); border-radius: var(--nwb-radius); padding: 16px 18px; margin-top: 10px; text-align: left; }
.nwb-breakdown-row { display: flex; justify-content: space-between; font-size: 14px; padding: 6px 0; border-bottom: 1px solid var(--nwb-hairline); }
.nwb-breakdown-row:last-child { border-bottom: none; font-weight: 700; }

/* Reassurance text — small trust line near the price/Book Now section */
.nwb-reassurance-text {
  text-align: center;
  font-size: 13.5px;
  color: var(--nwb-muted);
  margin: 0 0 18px;
  line-height: 1.5;
}

/* Price error */
.nwb-price-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #c0392b;
  border-radius: var(--nwb-radius);
  padding: 14px 18px;
  font-size: 15px;
  margin-bottom: 16px;
}

/* ================================================================
   PAYMENT TRUST ROW — "accepted secure payments" strip shown above
   the Pay Now button. All badges share one fixed footprint so no
   single brand (incl. PayPal) reads as more prominent than the rest.
   ================================================================ */
.nwb-trust-row {
  text-align: center;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--nwb-hairline);
}
.nwb-trust-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--nwb-muted);
  margin-bottom: 12px;
}
.nwb-trust-icons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.nwb-trust-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 46px;
  height: 30px;
  padding: 0 6px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid var(--nwb-hairline);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  flex-shrink: 0;
}
.nwb-trust-icon svg { display: block; max-width: 100%; height: auto; }
.nwb-trust-text {
  font-size: 13.5px;
  color: var(--nwb-muted);
  line-height: 1.5;
  margin: 12px auto 0;
  max-width: 380px;
}

@media (max-width: 480px) {
  .nwb-trust-icon { min-width: 40px; height: 26px; padding: 0 4px; }
  .nwb-trust-text { font-size: 12.5px; }
}

/* ================================================================
   PAYMENT ACTIONS
   ================================================================ */
.nwb-payment-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 26px;
}
.nwb-btn-primary,
.nwb-btn-secondary {
  border: none;
  padding: 16px 24px;
  border-radius: var(--nwb-btn-radius);
  /* Phase 9 — same shared --nwb-button-font-size/--nwb-button-font-
     weight tokens as .nwb-submit-btn above, so one setting controls
     every button consistently. This pair's own previous hardcoded value
     was 14.5px (vs .nwb-submit-btn's 15px) — the CSS fallback below
     preserves that ONLY if the variable is ever absent; in normal
     operation the variable is always set (output_dynamic_styles()
     always defines it), so this pair now renders at the same size as
     every other button (15px default) — a deliberate, negligible 0.5px
     unification rather than two near-duplicate settings. */
  font-size: var(--nwb-button-font-size, 15.5px);
  font-weight: var(--nwb-button-font-weight, 700);
  cursor: pointer;
  transition: background .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease;
  font-family: inherit;
  letter-spacing: .5px;
  text-transform: uppercase;
  width: 100%;
}
.nwb-btn-primary {
  background: var(--nwb-btn-bg);
  color: var(--nwb-btn-text);
}
.nwb-btn-primary:hover {
  background: var(--nwb-button-hover-bg, #B8901F);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(201,162,39,.35);
}
.nwb-btn-secondary {
  background: transparent;
  color: var(--nwb-primary);
  border: 1.5px solid var(--nwb-primary);
}
.nwb-btn-secondary:hover {
  background: var(--nwb-primary);
  color: #fff;
}
.nwb-btn-primary:disabled,
.nwb-btn-secondary:disabled { opacity: .55; cursor: not-allowed; transform: none; box-shadow: none; }
/* Phase 7 — Pay Now / Pay Later had no dedicated focus style at all. */
.nwb-btn-primary:focus-visible,
.nwb-btn-secondary:focus-visible {
  outline: 2px solid var(--nwb-secondary);
  outline-offset: 2px;
}

/* ================================================================
   PAYPAL CARD-FIRST CHECKOUT
   Card fields are the primary, first-visible option; the PayPal
   wallet button sits underneath as a secondary alternative.
   ================================================================ */
.nwb-paypal-checkout {
  display: flex;
  flex-direction: column;
}

.nwb-paypal-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nwb-card-bg, #fff);
  border: 1px solid var(--nwb-hairline);
  border-radius: var(--nwb-radius);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-size: 14px;
  color: var(--nwb-text);
}
.nwb-paypal-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12);
  border-top-color: var(--nwb-secondary, #C9A227);
  animation: nwb-paypal-spin .8s linear infinite;
}
@keyframes nwb-paypal-spin { to { transform: rotate(360deg); } }

/* Loading indicator shown while PayPal's "Debit or Credit Card" button
 * (rendered by the PayPal SDK itself) is opening its card entry overlay. */
.nwb-card-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--nwb-card-bg, #fff);
  border: 1px solid var(--nwb-hairline);
  border-radius: var(--nwb-radius);
  padding: 14px 18px;
  margin-top: 12px;
  font-size: 14px;
  color: var(--nwb-text);
}
.nwb-card-loading::before {
  content: '';
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.12);
  border-top-color: var(--nwb-secondary, #C9A227);
  animation: nwb-paypal-spin .8s linear infinite;
}
.nwb-paypal-checkout[data-checkout-display="wallet_first"] .nwb-paypal-card-section,
.nwb-paypal-checkout[data-checkout-display="wallet_first"] .nwb-paypal-cardfields-ineligible {
  order: 3;
}
.nwb-paypal-checkout[data-checkout-display="wallet_first"] .nwb-paypal-divider { order: 2; }
.nwb-paypal-checkout[data-checkout-display="wallet_first"] .nwb-paypal-wallet-section { order: 1; }

.nwb-paypal-card-section {
  background: var(--nwb-card-bg, #fff);
  border: 1px solid var(--nwb-hairline);
  border-radius: var(--nwb-radius);
  padding: 22px;
}
.nwb-paypal-card-title {
  margin: 0 0 6px;
  font-size: 17px;
  font-weight: 700;
  color: var(--nwb-text);
}
.nwb-paypal-card-subtext {
  margin: 0 0 18px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--nwb-muted);
}
.nwb-card-field-row { margin-bottom: 14px; }
.nwb-card-field-row:last-child { margin-bottom: 0; }
.nwb-card-field-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.nwb-card-field-container {
  background: var(--nwb-input-bg, #fff);
  border: 1.5px solid var(--nwb-input-border, #e0e0e0);
  border-radius: var(--nwb-radius);
  padding: 11px 14px;
  height: 44px;
  box-sizing: border-box;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.nwb-card-field-container.braintree-hosted-fields-focused,
.nwb-card-field-container.nwb-card-field-focused {
  border-color: var(--nwb-secondary, #C9A227);
  box-shadow: 0 0 0 3px rgba(201,162,39,.16);
}
.nwb-card-field-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #c0392b;
  border-radius: var(--nwb-radius);
  padding: 10px 14px;
  font-size: 14px;
  margin: 14px 0 0;
}
.nwb-paypal-card-submit { margin-top: 18px; }

.nwb-paypal-cardfields-ineligible {
  background: #fff8e6;
  border: 1px solid #f0d999;
  border-radius: var(--nwb-radius);
  padding: 14px 18px;
  font-size: 14px;
  color: #7a5c00;
  text-align: center;
}
.nwb-paypal-cardfields-ineligible p { margin: 0; }

.nwb-paypal-divider {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--nwb-muted);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 22px 0;
}
.nwb-paypal-divider::before,
.nwb-paypal-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--nwb-hairline);
}
.nwb-paypal-divider span { padding: 0 12px; }

.nwb-paypal-wallet-section { min-height: 45px; }
.nwb-paypal-wallet-error {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #c0392b;
  border-radius: var(--nwb-radius);
  padding: 10px 14px;
  font-size: 14px;
  margin-top: 12px;
}

/* ================================================================
   PAYPAL HOSTED-BUTTON-STYLE CHECKOUT
   Simplified single-button checkout: calculated total shown above a
   single PayPal button, no editable amount field.
   ================================================================ */
.nwb-paypal-hosted-checkout {
  display: flex;
  flex-direction: column;
}
.nwb-paypal-hosted-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--nwb-text);
  text-align: center;
}
.nwb-paypal-hosted-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--nwb-primary);
  border: 1px solid var(--nwb-secondary);
  border-radius: var(--nwb-radius);
  padding: 16px 20px;
  margin-bottom: 20px;
}
.nwb-paypal-hosted-total-label {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.nwb-paypal-hosted-total-amount {
  font-size: 23px;
  font-weight: 800;
  color: var(--nwb-secondary);
}
.nwb-paypal-hosted-container { min-height: 45px; }

.nwb-step-back-wrap { text-align: center; margin-top: 22px; }
.nwb-back-link, .nwb-back-link-step3 { color: var(--nwb-muted); font-size: 14px; text-decoration: none; }
.nwb-back-link:hover, .nwb-back-link-step3:hover { color: var(--nwb-primary); text-decoration: underline; }

/* Phase 8 — Step 3's "Request Quote" button reuses .nwb-submit-btn for
   base styling, full-width here to match the compact premium widget
   look rather than .nwb-form-footer's default right-aligned layout. */
.nwb-journey-quote-request-wrap .nwb-submit-btn { width: 100%; justify-content: center; }
.nwb-journey-quote-request-wrap .nwb-form-footer { margin-top: 18px; justify-content: stretch; }
.nwb-step3-payment-wrap { margin-top: 6px; }

/* Phase 11 — Step 2's Back + Last Step now sit side by side, both full
   height, matching the reference design (previously Continue was
   full-width and Back was a small centered text link stacked beneath
   it). .nwb-step-back-wrap/.nwb-back-link and .nwb-step2-continue-wrap/
   .nwb-step2-continue-btn keep their exact existing classes — this only
   overrides their layout when they're inside .nwb-step2-actions-bar, so
   Step 3's own .nwb-step-back-wrap (still stacked under the payment
   section) is completely unaffected. */
.nwb-step2-actions-bar {
  display: flex;
  gap: 16px;
  margin-top: 26px;
}
.nwb-step2-actions-bar .nwb-step-back-wrap {
  margin-top: 0;
  display: flex;
}
.nwb-step2-actions-bar .nwb-back-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 28px;
  border: 1.5px solid var(--nwb-primary);
  border-radius: var(--nwb-btn-radius);
  color: var(--nwb-primary);
  font-weight: 700;
  font-size: 15.5px;
  letter-spacing: .3px;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
.nwb-step2-actions-bar .nwb-back-link:hover {
  background: var(--nwb-primary);
  color: #FFFFFF;
}
.nwb-step2-actions-bar .nwb-step2-continue-wrap {
  flex: 1;
  display: flex;
}
.nwb-step2-actions-bar .nwb-step2-continue-wrap .nwb-submit-btn {
  width: 100%;
  justify-content: center;
}
@media (max-width: 480px) {
  /* Narrow phones: keep both buttons visible and full-height rather
     than letting "LAST STEP →" get cramped — Back shrinks to its own
     content width instead of the usual flex:1 split. */
  .nwb-step2-actions-bar .nwb-step-back-wrap { flex: 0 0 auto; }
  .nwb-step2-actions-bar .nwb-back-link { padding: 0 18px; }
}

/* ================================================================
   SUCCESS PANEL
   ================================================================ */
.nwb-success-panel {
  padding: var(--nwb-padding);
  text-align: center;
}
.nwb-success-icon {
  width: 76px;
  height: 76px;
  background: #27ae60;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 33px;
  color: #fff;
  margin: 0 auto 22px;
  box-shadow: 0 8px 20px rgba(39,174,96,.28);
  animation: nwb-vehicle-pop .3s ease;
}
.nwb-success-title {
  color: var(--nwb-primary);
  font-size: 25px;
  font-weight: 700;
  margin: 0 0 12px;
}
.nwb-success-msg { color: #555; font-size: 17px; line-height: 1.6; }

/* Global error */
.nwb-global-error {
  margin: 16px var(--nwb-padding);
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #c0392b;
  border-radius: var(--nwb-radius);
  padding: 14px 18px;
  font-size: 15px;
}

/* ================================================================
   SECTION WRAPPER
   ================================================================ */
.nwb-section {
  padding: 0 var(--nwb-padding) var(--nwb-field-gap);
}
.nwb-section-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--nwb-primary);
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--nwb-secondary);
}
/* Mid-column subsection break (e.g. "Special Requests" ahead of the notes
   field) — smaller and gold-toned rather than a full section title, with
   its own top spacing so it reads as a divider between field groups
   rather than the start of a new card. */
.nwb-subsection-label {
  font-size: 12px;
  color: var(--nwb-secondary);
  margin: 6px 0 10px;
  padding-bottom: 0;
  border-bottom: none;
}

/* ================================================================
   TRIP TYPE CARDS — compact horizontal layout
   ================================================================ */
.nwb-trip-type-section { padding-top: var(--nwb-field-gap); }
.nwb-trip-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.nwb-trip-type-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  background: var(--nwb-card-bg);
  border: 1.5px solid var(--nwb-input-border);
  border-radius: var(--nwb-radius);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease, transform .2s ease;
  text-align: left;
  font-family: inherit;
}
.nwb-trip-type-card:hover {
  border-color: var(--nwb-card-hover-color);
  box-shadow: 0 6px 18px rgba(201,162,39,.18);
  transform: translateY(-1px);
}
.nwb-trip-type-card.nwb-card-selected {
  background: var(--nwb-card-selected-bg);
  border-color: var(--nwb-card-selected-border);
  box-shadow: 0 8px 22px rgba(0,0,0,.18);
}
.nwb-trip-type-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F5;
  border-radius: 10px;
  flex-shrink: 0;
  color: var(--nwb-primary);
  transition: background .2s ease, color .2s ease;
}
.nwb-trip-type-card.nwb-card-selected .nwb-trip-type-icon {
  background: rgba(255,255,255,.12);
  color: var(--nwb-secondary);
}
.nwb-trip-type-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nwb-trip-type-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--nwb-primary);
  line-height: 1.2;
}
.nwb-trip-type-desc {
  font-size: 12px;
  color: var(--nwb-muted);
  line-height: 1.3;
}
.nwb-trip-type-card.nwb-card-selected .nwb-trip-type-name,
.nwb-trip-type-card.nwb-card-selected .nwb-trip-type-desc {
  color: rgba(255,255,255,.92);
}
.nwb-trip-type-card.nwb-card-selected .nwb-trip-type-desc { opacity: .75; }
.nwb-trip-type-error {
  margin-top: 10px;
  font-size: 14px;
  color: #c0392b;
  display: none;
}

/* ================================================================
   ROUTE SELECTOR — segmented tabs
   ================================================================ */
.nwb-route-selector-section { padding-top: 0; }

.nwb-route-tabs {
  display: flex;
  border: 1.5px solid var(--nwb-input-border);
  border-radius: var(--nwb-radius);
  overflow: hidden;
  margin-bottom: 18px;
  background: var(--nwb-card-bg);
}
.nwb-route-tab {
  flex: 1;
  padding: 12px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--nwb-muted);
  transition: color .2s ease, background .2s ease;
  font-family: inherit;
  position: relative;
  text-align: center;
}
.nwb-route-tab + .nwb-route-tab {
  border-left: 1.5px solid var(--nwb-input-border);
}
.nwb-route-tab.nwb-route-tab-active {
  background: var(--nwb-primary);
  color: var(--nwb-secondary);
}
.nwb-route-tab:not(.nwb-route-tab-active):hover {
  background: #FAFAFA;
  color: var(--nwb-primary);
}

.nwb-route-panel { }

/* Fixed Route Cards */
.nwb-fixed-route-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border: 1.5px solid var(--nwb-hairline);
  border-radius: var(--nwb-radius);
  cursor: pointer;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease, transform .2s ease;
  margin-bottom: 12px;
  background: var(--nwb-card-bg);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
.nwb-fixed-route-card:last-child { margin-bottom: 0; }
.nwb-fixed-route-card:hover {
  border-color: var(--nwb-secondary);
  box-shadow: 0 10px 22px rgba(201,162,39,.16);
  transform: translateY(-2px);
}
.nwb-fixed-route-card.nwb-route-selected {
  border: 2px solid var(--nwb-secondary);
  box-shadow: 0 6px 18px rgba(201,162,39,.24);
}
.nwb-fixed-route-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F5F5F5;
  border-radius: 50%;
  flex-shrink: 0;
  color: var(--nwb-primary);
  transition: background .2s ease, color .2s ease;
}
.nwb-fixed-route-card:hover .nwb-fixed-route-icon,
.nwb-fixed-route-card.nwb-route-selected .nwb-fixed-route-icon {
  background: var(--nwb-secondary);
  color: var(--nwb-primary);
}
.nwb-fixed-route-info { flex: 1; min-width: 0; }
.nwb-fixed-route-name {
  font-weight: 700;
  font-size: 15.5px;
  color: var(--nwb-primary);
  line-height: 1.35;
}
.nwb-fixed-route-desc { font-size: 12px; color: var(--nwb-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.nwb-fixed-route-price {
  font-size: 23px;
  font-weight: 800;
  color: var(--nwb-secondary);
  flex-shrink: 0;
  text-align: right;
  line-height: 1;
}
.nwb-fixed-route-currency {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--nwb-muted);
  text-align: right;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nwb-no-routes { font-size: 14px; color: var(--nwb-muted); padding: 10px 0; margin: 0; }

/* ================================================================
   TOUR INFO BADGE
   ================================================================ */
.nwb-tour-selected-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #FAFAFA;
  border: 1.5px solid var(--nwb-primary);
  border-radius: var(--nwb-radius);
  padding: 16px 20px;
}
.nwb-tour-badge-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F0F0F0;
  border-radius: 10px;
  flex-shrink: 0;
  color: var(--nwb-primary);
}
.nwb-tour-badge-name {
  font-weight: 700;
  color: var(--nwb-primary);
  font-size: 16px;
}
.nwb-tour-badge-price {
  font-size: 14px;
  color: var(--nwb-muted);
  margin-top: 2px;
}

/* ================================================================
   ADDRESS FIELDS / AUTOCOMPLETE WRAPPER
   ================================================================ */
.nwb-ac-wrapper { position: relative; }

/* ================================================================
   GEOAPIFY DROPDOWN
   ================================================================ */
.nwb-geo-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #fff;
  border: 1.5px solid var(--nwb-primary);
  border-top: none;
  border-radius: 0 0 var(--nwb-radius) var(--nwb-radius);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  max-height: 280px;
  overflow-y: auto;
}
.nwb-geo-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--nwb-hairline);
  transition: background .15s ease;
}
.nwb-geo-item:last-child { border-bottom: none; }
/* Hover/active state uses a dedicated light neutral rather than
   var(--nwb-bg) — the form background is pure white in this palette, so
   using it here would give no visible hover feedback at all. */
.nwb-geo-item:hover,
.nwb-geo-item.nwb-geo-active { background: #FAFAFA; }
.nwb-geo-pin { font-size: 17px; flex-shrink: 0; color: var(--nwb-secondary); }
.nwb-geo-text { min-width: 0; }
.nwb-geo-main {
  font-size: 15px;
  font-weight: 600;
  color: var(--nwb-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nwb-geo-sub {
  font-size: 13px;
  color: var(--nwb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.nwb-geo-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: var(--nwb-muted);
}
.nwb-geo-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid var(--nwb-hairline);
  border-top-color: var(--nwb-secondary);
  border-radius: 50%;
  animation: nwb-spin .6s linear infinite;
}
.nwb-geo-empty {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--nwb-muted);
}

/* ================================================================
   GOOGLE PLACES DROPDOWN
   ================================================================ */
.pac-container {
  border-radius: 0 0 var(--nwb-radius) var(--nwb-radius) !important;
  border: 1.5px solid var(--nwb-primary) !important;
  border-top: none !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.12) !important;
  font-family: inherit !important;
  z-index: 999999 !important;
}
.pac-item { padding: 10px 16px !important; font-size: 15px !important; cursor: pointer !important; }
.pac-item:hover { background: #FAFAFA !important; }
.pac-item-query { font-weight: 600 !important; color: var(--nwb-primary) !important; }
.pac-icon { display: none !important; }

/* ================================================================
   GOOGLE PLACES (NEW) AUTOCOMPLETE DROPDOWN
   Custom-rendered prediction list for assets/js/google-autocomplete.js
   (Places API New — AutocompleteSuggestion.fetchAutocompleteSuggestions()),
   styled to match the existing native input design instead of relying on
   Google's own auto-injected .pac-container widget above.
   ================================================================ */
.nwb-gac-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 999999;
  background: #fff;
  border: 1.5px solid var(--nwb-primary);
  border-top: none;
  border-radius: 0 0 var(--nwb-radius) var(--nwb-radius);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  max-height: 280px;
  overflow-y: auto;
  overflow-x: hidden;
}
.nwb-gac-item {
  padding: 10px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--nwb-hairline);
  transition: background .15s ease;
}
.nwb-gac-item:last-child { border-bottom: none; }
.nwb-gac-item:hover,
.nwb-gac-item.nwb-gac-active { background: #FAFAFA; }
.nwb-gac-main {
  font-size: 15px;
  font-weight: 600;
  color: var(--nwb-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nwb-gac-sub {
  font-size: 13px;
  color: var(--nwb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.nwb-gac-attribution {
  padding: 6px 16px;
  font-size: 11px;
  color: #aaa;
  text-align: right;
  border-top: 1px solid var(--nwb-hairline);
}
@media (max-width: 600px) {
  .nwb-gac-dropdown { max-height: 220px; }
  /* The default item divider is too low-contrast to read as a separator
     on small mobile screens — the shared input-border token is used
     there only; desktop/tablet keep the existing subtle divider. */
  .nwb-gac-item { border-bottom: 1px solid var(--nwb-input-border); }
}

/* ================================================================
   ANIMATIONS
   ================================================================ */
@keyframes nwb-spin {
  to { transform: rotate(360deg); }
}
@keyframes nwb-fade-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
.nwb-step-panel { animation: nwb-fade-in .35s ease; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media ( max-width: 768px ) {
  .nwb-form-header { padding: 24px 20px 20px; }
  .nwb-form-title { font-size: 21px; }
  /* Phase 15 — the journey-type card rules that used to sit here are
     gone along with the card markup itself (see the note near
     .nwb-toggle-group); the <select> that replaced it needs no mobile-
     specific override — it already behaves like every other <select>
     in this form at every width. */
  .nwb-toggle-btn { min-height: 48px; }
  .nwb-route-map-canvas { height: 220px; }
  .nwb-steps-nav { padding: 12px 20px; min-height: 48px; }
  .nwb-step-label { display: none; }
  .nwb-step-panel { padding: 24px 20px; }
  .nwb-section { padding-left: 20px; padding-right: 20px; }
  /* Phase 8 — Step 1 is already a single compact column at every width;
     only its side padding needs to shrink on narrower screens. */
  .nwb-step1-compact { padding: 0 20px; }
  .nwb-fields-grid.nwb-two-col { grid-template-columns: 1fr; }
  .nwb-fields-grid.nwb-three-col { grid-template-columns: 1fr 1fr; }
  .nwb-col-half { grid-column: 1 / -1; }
  .nwb-form-footer { justify-content: stretch; }
  .nwb-trip-type-grid { grid-template-columns: 1fr; gap: 8px; }
  .nwb-submit-btn { width: 100%; justify-content: center; }
  .nwb-price-amount { font-size: 29px; }
  .nwb-step-connector { min-width: 8px; margin: 0 6px; }
  .nwb-fixed-route-price { font-size: 17px; }

  /* Booking Summary (Step 2) — .nwb-review-row is a flex row with the
     label on the left and the value (e.g. a full pickup/drop-off address)
     on the right. Flex items default to min-width: auto, so a long
     address refused to shrink and pushed the row wider than the screen.
     On mobile only, stack label above value and let the value wrap within
     the full row width instead. Desktop/tablet keep the existing
     side-by-side space-between row untouched. */
  .nwb-review-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
  .nwb-review-row-value {
    max-width: 100%;
    text-align: left;
    overflow-wrap: break-word;
    word-break: break-word;
  }
}
@media ( max-width: 480px ) {
  .nwb-form-wrapper { border-radius: 0; }
  .nwb-step-panel { padding: 20px 16px; }
  /* font-size must stay at 16px (not 14px, as it was here before) — iOS
     Safari automatically zooms the whole page in when a focused input,
     select, or textarea has a font-size under 16px. Every iPhone in
     portrait falls under this max-width:480px breakpoint, so this one
     value was the actual cause of the reported "page appears zoomed in"
     behavior: tapping any field on Step 1 (pickup address, date,
     passengers, name, email, phone — all share the .nwb-input class)
     triggered Safari's own auto-zoom, and since Step 1 -> Step 2 is a
     JS show/hide with no page reload, that browser zoom level carried
     over onto Step 2 as well, even though Step 2 has no text inputs of
     its own. Nothing was actually overflowing its container at any
     point — the browser's own zoom level was the entire effect. 16px is
     the documented minimum to prevent this; anything under it retriggers
     the same behavior. This redesign keeps every .nwb-input, .nwb-select
     and the PayPal card fields at 16px+ on this breakpoint for the same
     reason. */
  /* Phase 16 — Booking Form Density (Style Settings) can now set
     --nwb-input-font-size/--nwb-input-height below 16px/46px for a
     tighter desktop/tablet look, but max() floors both here so a phone
     can NEVER actually receive a smaller value than this breakpoint has
     always required: font-size floors at 16px for the iOS Safari
     auto-zoom reason documented above (unchanged, still applies exactly
     as before density existed), and height floors at 44px, the standard
     minimum touch-target size on a phone regardless of how compact the
     admin's chosen density is on larger screens. A LARGER admin-
     configured value than these floors still wins normally, since
     max() picks whichever is bigger. */
  .nwb-input { padding: 12px 14px; font-size: max(var(--nwb-input-font-size, 16px), 17px); min-height: max(var(--nwb-input-height, 52px), 44px); }
  .nwb-fields-grid.nwb-three-col { grid-template-columns: 1fr; }
  .nwb-col-third { grid-column: 1 / -1; }
  /* Kept in sync with .nwb-input's font-size above (see its comment) so
     this placeholder hint text still lines up with the native picker's
     own value text once a real date/time is picked. */
  .nwb-datetime-hint { left: 14px; font-size: max(var(--nwb-input-font-size, 16px), 17px); }
}

/* Quote form only: the Full Name / Email / Phone row goes fully to 100%
   width and stacks starting at the tablet breakpoint, not just at phone
   width like the Transfer form's three-column row above. Scoped to
   .nwb-quote-form-wrapper so the Transfer form's own three-column tablet
   behavior (which becomes 2 columns, not 1, at 768px) is unaffected. */
@media ( max-width: 768px ) {
  .nwb-quote-form-wrapper .nwb-fields-grid.nwb-three-col { grid-template-columns: 1fr; }
  .nwb-quote-form-wrapper .nwb-col-third { grid-column: 1 / -1; }
}

/* =========================================================
   Form Callout / Note
   ========================================================= */
.nwb-form-callout {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 15px;
  line-height: 1.5;
}
.nwb-form-callout--info {
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
}
.nwb-form-callout--success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}
.nwb-form-callout--warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
  color: #92400e;
}
.nwb-form-callout--plain {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  color: #374151;
}
.nwb-form-callout--tour {
  background: #FCFAF3;
  border: 1px solid #C9A227;
  border-left: 3px solid #1A1A1A;
  color: #1A1A1A;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
}
.nwb-form-callout svg {
  flex-shrink: 0;
  margin-top: 1px;
}
.nwb-form-callout__text {
  flex: 1;
}

/* ==========================================================
   PayPal Button Container
   ========================================================== */
.nwb-paypal-btn-wrap {
  margin-top: 16px;
}
.nwb-paypal-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  color: var(--nwb-muted);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.nwb-paypal-divider::before,
.nwb-paypal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--nwb-hairline);
}
.nwb-paypal-deposit-note {
  background: #fff8f0;
  border: 1px solid #f0c080;
  border-radius: 8px;
  color: #7a5c00;
  font-size: 14px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.nwb-paypal-processing {
  text-align: center;
  padding: 16px 0;
  color: #555;
  font-size: 15px;
}

/* ==========================================================================
   FIXED-SIZE BOOKING WIDGET
   --------------------------------------------------------------------------
   Everything below is scoped to .nwb-form-wrapper.nwb-widget — a class
   NWB_Frontend_Form::widget_classes() adds unless Design → "Widget layout"
   is switched off, in which case none of this applies and the previous
   fluid layout above renders exactly as before.

   Why this exists: the original form had no height constraint at all, so
   each step panel was sized purely by its content (measured on the
   original: Step 1 551-1015px, Step 2 1331px, Step 3 1198px). Here the
   OUTER wrapper is a fixed-size flex column instead:

     .nwb-form-wrapper.nwb-widget      fixed width x height (CSS variables)
       .nwb-form-header                fixed, never scrolls
       .nwb-steps-nav                  fixed progress bar
       .nwb-step-panel (visible one)   flex:1 — takes all remaining height
         scroll region                 overflow-y:auto — ONLY this scrolls
         action row                    pinned to the bottom of the panel

   Every step therefore occupies the same box, and content that does not fit
   scrolls inside it instead of growing the form. No selector JavaScript
   depends on was renamed or removed; the only markup additions are
   .nwb-form-title-row / .nwb-step-count (header) and .nwb-step3-body.

   Sizing tokens (all emitted by NWB_Frontend_Form::output_dynamic_styles()
   from Design settings, with fallbacks here):
     --nwb-form-width / --nwb-form-height / --nwb-form-max-width
     --nwb-form-padding / --nwb-form-radius / --nwb-form-border-* /
     --nwb-form-shadow
   ========================================================================== */
@keyframes nwb-widget-fade { from { opacity: 0; } to { opacity: 1; } }

.nwb-form-wrapper.nwb-widget {
  --nwb-w-pad:        var(--nwb-form-padding, 40px);
  --nwb-w-pad-top:    calc(var(--nwb-w-pad) * .62);
  --nwb-w-pad-bottom: calc(var(--nwb-w-pad) * .5);
  --nwb-w-line:       var(--nwb-input-border, #D8D5CC);
  --nwb-w-focus:      color-mix(in srgb, var(--nwb-secondary) 30%, transparent);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  /* Width/Height settings are MAXIMUMS: the form is as wide as its container
     (up to the Width / Form Maximum Width) and only as tall as its content
     needs (up to the Height) — taller content scrolls inside the step. */
  width: 100%;
  max-width: min(var(--nwb-form-width, 640px), var(--nwb-form-max-width, 1100px));
  height: auto;
  max-height: var(--nwb-form-height, 620px);
  margin: 0 auto;
  background: var(--nwb-bg);
  border: var(--nwb-form-border-width, 1px) solid var(--nwb-form-border-color, var(--nwb-hairline));
  border-radius: var(--nwb-form-radius, 16px);
  box-shadow: var(--nwb-form-shadow, none);
  overflow: hidden;
  color: var(--nwb-text);
  font-size: var(--nwb-body-font-size, 16px);
  line-height: 1.45;
}
.nwb-form-wrapper.nwb-widget *,
.nwb-form-wrapper.nwb-widget *::before,
.nwb-form-wrapper.nwb-widget *::after { box-sizing: border-box; }

/* General (short inquiry) and Quote (a single long page — pickup/drop-off,
   date/time, passengers/luggage, contact fields and notes all on one screen,
   with no step to spread them across) both keep their natural height instead
   of the fixed box: neither is the multi-step "Get Your Fixed Price" flow
   Reference 1 shows, and forcing Quote's ~10 fields into the same box as a
   3-step form would mean scrolling through most of it before it is even
   visible. Both still get the fixed WIDTH, brand colours/typography, and
   field/button styling below — only the height constraint is skipped, the
   same as before this redesign. */
.nwb-form-wrapper.nwb-widget[data-form-type="general"],
.nwb-form-wrapper.nwb-widget[data-form-type="quote"] {
  height: auto;
  max-height: none;
}

/* Visually hidden but still read by screen readers and still "visible" to
   jQuery's :visible (non-zero box) — same technique as .nwb-visually-hidden. */
.nwb-widget .nwb-toggle-label,
.nwb-widget.nwb-addr-labels-off [data-field="pickup_location"] > .nwb-label,
.nwb-widget.nwb-addr-labels-off [data-field="dropoff_location"] > .nwb-label,
.nwb-widget .nwb-step-indicator .nwb-step-num {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* Step label (Trip Details / Review & Price / Payment): hidden for every
   step by default (same visually-hidden-but-accessible technique as
   above), except the CURRENT step's — see the ".active" override further
   down, which shows it as a small caption under the active progress
   segment. Kept separate from the shared rule above because only this
   one needs an ".active" exception. */
.nwb-widget .nwb-step-indicator .nwb-step-label {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ---- Header -------------------------------------------------------------- */
.nwb-widget .nwb-form-header {
  flex: none;
  background: var(--nwb-header-bg, var(--nwb-bg));
  padding: var(--nwb-w-pad-top) var(--nwb-w-pad) 0;
  text-align: var(--nwb-header-align, left);
}
.nwb-widget .nwb-form-header::after { content: none; }
/* The reference layout has no eyebrow line; hiding it gives every step ~22px\n   more room. The setting still applies when the widget layout is off. */
.nwb-widget .nwb-form-eyebrow { display: none; }
.nwb-widget .nwb-form-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}
.nwb-widget .nwb-form-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  color: var(--nwb-header-title-color, var(--nwb-primary));
  font-family: var(--nwb-heading-font, Georgia, 'Times New Roman', serif);
  font-size: var(--nwb-header-font-size, 27px);
  font-weight: 600;
  letter-spacing: .03em;
  line-height: 1.15;
  text-transform: uppercase;
}
.nwb-widget .nwb-step-count {
  flex: none;
  color: var(--nwb-header-subtitle-color, var(--nwb-label));
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}
.nwb-widget .nwb-form-subtitle {
  margin: 10px 0 0;
  color: var(--nwb-header-subtitle-color, var(--nwb-label));
  font-size: 1em;
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.5;
}

/* ---- Progress: three segmented bars (same .active/.completed classes the
   existing step JS already toggles; the numeric/text labels stay in the DOM
   for assistive tech, only visually hidden above) ---------------------------- */
.nwb-widget .nwb-steps-nav {
  flex: none;
  align-items: stretch;
  gap: var(--nwb-progress-gap, 8px);
  min-height: 0;
  /* Bottom padding reserves room for the active-step caption below, which
     is absolutely positioned (see .nwb-step-indicator.active .nwb-step-
     label) and so doesn't push this row's own height out on its own —
     without this, the caption text would visually overlap whatever comes
     right after the progress bar (callout or the step panel). */
  padding: 14px var(--nwb-w-pad) 22px;
  background: var(--nwb-progress-bg, var(--nwb-bg));
  border-bottom: 0;
}
.nwb-widget .nwb-step-indicator {
  position: relative;
  display: block;
  flex: 1 1 0;
  height: var(--nwb-progress-bar-height, 4px);
  border-radius: 999px;
  background: var(--nwb-progress-inactive, #E4E1D8);
  opacity: 1;
  transition: background-color .3s ease;
}
.nwb-widget .nwb-step-indicator.completed { background: var(--nwb-progress-bar-color, var(--nwb-step-active)); }
.nwb-widget .nwb-step-indicator.active    { background: var(--nwb-step-active); }
.nwb-widget .nwb-step-connector { display: none; }

/* Active step's label — shown as a small caption under its segment,
   overriding the visually-hidden rule above for this one span only.
   Anchored to .nwb-step-indicator (position:relative, set above), not to
   .nwb-steps-nav, so it always sits under the correct segment regardless
   of step count or widget width. Completed/upcoming steps stay
   caption-free — only ever one caption visible at a time. */
.nwb-widget .nwb-step-indicator.active .nwb-step-label {
  position: absolute !important;
  top: 100%;
  left: 0;
  width: auto !important;
  height: auto !important;
  margin: 6px 0 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: nowrap !important;
  border: 0 !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--nwb-step-active, var(--nwb-primary));
}

/* Callout placed at "form start" sits between the progress bar and the
   panels (outside them), so it is a fixed row of the widget too. */
.nwb-widget > .nwb-form-callout {
  flex: none;
  margin: 12px var(--nwb-w-pad) 0;
}

/* ---- Panels: only the visible one takes the remaining height ------------- */
.nwb-widget .nwb-step-panel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  padding: 0;
  animation: nwb-widget-fade .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .nwb-widget .nwb-step-panel { animation: none; }
}

/* Scroll regions. Step 1 / General / Quote: the <form> itself scrolls and
   its footer is pushed to the bottom (margin-top:auto) and pinned there
   (position:sticky) when the content is taller than the space. */
.nwb-widget .nwb-step-1-panel > .nwb-booking-form,
.nwb-widget .nwb-general-panel > .nwb-general-form,
.nwb-widget .nwb-quote-panel > .nwb-quote-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 12px var(--nwb-w-pad) 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nwb-w-line) transparent;
  /* Tabbing to a field that would sit behind the pinned button scrolls it clear of it. */
  scroll-padding: 12px 0 calc(var(--nwb-button-height, 52px) + var(--nwb-w-pad-bottom) + 24px);
}
.nwb-widget .nwb-step-1-panel > .nwb-booking-form > *,
.nwb-widget .nwb-general-panel > .nwb-general-form > *,
.nwb-widget .nwb-quote-panel > .nwb-quote-form > * { flex-shrink: 0; }

.nwb-widget .nwb-form-footer {
  position: sticky;
  bottom: 0;
  z-index: 3;
  margin: auto 0 0;
  padding: 8px 0 var(--nwb-w-pad-bottom);
  background: var(--nwb-bg);
  justify-content: stretch;
}
.nwb-widget .nwb-step-1-panel .nwb-form-footer { padding-left: 0; padding-right: 0; }
/* Soft fade over whatever is scrolled underneath the pinned button: invisible when
   nothing is under it, a cue that there is more above/below when something is. */
.nwb-widget .nwb-form-footer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -18px;
  height: 18px;
  background: linear-gradient(to bottom, transparent, var(--nwb-bg));
  pointer-events: none;
}
.nwb-widget .nwb-journey-quote-request-wrap .nwb-form-footer::before { content: none; }

/* ---- Sections / headings that the reference layout does not have ---------- */
.nwb-widget .nwb-section { padding: 0 0 var(--nwb-field-gap); }
.nwb-widget .nwb-step1-compact { padding: 0; }
.nwb-widget .nwb-trip-details-label,
.nwb-widget .nwb-journey-type-section .nwb-section-label { display: none; }
/* "Special Requests" sub-heading repeats the notes field's own label. */
.nwb-widget .nwb-subsection-label { display: none; }
.nwb-widget .nwb-journey-quote-message { margin: 0 0 var(--nwb-field-gap); padding: 10px 14px; }
.nwb-widget .nwb-form-callout { margin-bottom: var(--nwb-field-gap); padding: 10px 14px; font-size: 14px; }
.nwb-widget .nwb-tour-selected-badge { padding: 10px 14px; gap: 12px; }
.nwb-widget .nwb-tour-badge-icon { width: 34px; height: 34px; }

/* ---- Fields --------------------------------------------------------------- */
.nwb-widget .nwb-field-wrap { gap: 5px; }
.nwb-widget .nwb-label {
  color: var(--nwb-label);
  font-size: var(--nwb-label-font-size, 13px);
  font-weight: 700;
  letter-spacing: .06em;
}
.nwb-widget .nwb-input {
  min-height: var(--nwb-input-height, 52px);
  border-radius: var(--nwb-field-radius, 8px);
  border-color: var(--nwb-w-line);
  font-size: var(--nwb-input-font-size, 16px);
}
/* Single-line fields: the Field Height setting governs the box. (The base 16px vertical
   padding would otherwise make every field ~6px taller than the setting says.) */
.nwb-widget input.nwb-input,
.nwb-widget select.nwb-input { padding-top: 0; padding-bottom: 0; }
.nwb-widget .nwb-input:hover { border-color: var(--nwb-label); }
.nwb-widget .nwb-input:focus {
  border-color: var(--nwb-secondary);
  box-shadow: 0 0 0 3px var(--nwb-w-focus);
}
/* rows="3" would otherwise make this ~92px tall. */
.nwb-widget .nwb-textarea { height: 56px; min-height: 56px; }
.nwb-widget .nwb-input.nwb-field-invalid { border-color: #c0392b; box-shadow: 0 0 0 3px rgba(192,57,43,.12); }
.nwb-widget ::selection { background: var(--nwb-w-focus); color: var(--nwb-primary); }

/* Pickup / drop-off always get the full row (long addresses); the per-form
   "same row" layout choice still applies to every other field pair. */
.nwb-widget .nwb-address-section .nwb-fields-grid.nwb-two-col { grid-template-columns: 1fr; }

/* One Way / Round Trip: two separate equal buttons, like the reference. */
.nwb-widget .nwb-toggle-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  margin-top: 0;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
/* Trip Type + One Way/Round Trip: the per-form "same row" layout is the default,
   but the global "stacked" setting forced them onto two rows; in the compact widget
   they share one (bottoms aligned, since only the select has a visible label). */
.nwb-widget .nwb-fields-grid.nwb-trip-selection,
.nwb-widget .nwb-fields-grid.nwb-trip-selection.stacked {
  grid-template-columns: 1fr 1fr !important;
  align-items: end;
}
.nwb-widget .nwb-toggle-btn {
  min-height: var(--nwb-input-height, 48px);
  padding: 0 16px;
  border: 1px solid var(--nwb-w-line);
  border-radius: var(--nwb-toggle-radius, var(--nwb-field-radius, 8px));
  color: var(--nwb-primary);
  font-size: 15px;
}
.nwb-widget .nwb-toggle-btn + .nwb-toggle-btn { border-left: 1px solid var(--nwb-w-line); }
.nwb-widget .nwb-toggle-group .nwb-toggle-btn.selected { border-color: var(--nwb-secondary); }
.nwb-widget .nwb-toggle-btn:hover:not(.selected) { border-color: var(--nwb-label); }

/* Google Places (New) result list: cap its height so it stays usable inside
   the scroll region of a fixed-height widget. */
.nwb-widget .nwb-gac-dropdown { max-height: 220px; border-color: var(--nwb-secondary); }

/* ---- Buttons -------------------------------------------------------------- */
.nwb-widget .nwb-submit-btn,
.nwb-widget .nwb-btn-primary,
.nwb-widget .nwb-btn-secondary {
  min-height: var(--nwb-button-height, 52px);
  border-radius: var(--nwb-btn-radius, 6px);
  font-size: var(--nwb-button-font-size, 16px);
  letter-spacing: .08em;
}
.nwb-widget .nwb-btn-primary,
.nwb-widget .nwb-btn-secondary { padding: 0 20px; }
.nwb-widget .nwb-submit-btn:hover,
.nwb-widget .nwb-btn-primary:hover {
  transform: none;
  box-shadow: 0 6px 16px color-mix(in srgb, var(--nwb-secondary) 30%, transparent);
}
.nwb-widget .nwb-submit-btn:focus-visible,
.nwb-widget .nwb-btn-primary:focus-visible,
.nwb-widget .nwb-btn-secondary:focus-visible { outline-color: var(--nwb-secondary); }

/* ---- Step 2: vehicle list scrolls, price + actions stay put --------------- */
.nwb-widget .nwb-step-2-panel > .nwb-review-card,
.nwb-widget .nwb-step-3-panel > .nwb-review-card {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  margin: 0;
  padding: 16px var(--nwb-w-pad) 0;
  overflow: hidden;
}
.nwb-widget .nwb-step2-grid {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
}
.nwb-widget .nwb-step2-card {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.nwb-widget .nwb-vehicle-select-section {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
  /* Its child .nwb-vehicle-select-cards has its own min-height:92px floor
     (below), so when there isn't enough room (a short custom widget Height,
     a long breakdown list, etc.) THIS section can be squeezed to 0 while
     that child still renders at 92px — overflow:visible (the default) then
     lets that forced-minimum content spill out of the collapsed box and
     paint over whatever comes next (.nwb-step2-card-price), which is
     exactly the "vehicle card overlapping the price box" bug this fixes.
     Clipping here means the vehicle strip shrinks below 92px instead of
     overlapping — a smaller strip, never an overlap. */
  overflow: hidden;
}
/* jQuery hides/shows this section with an inline style; keep the flex layout
   only while it is actually shown. */
.nwb-widget .nwb-vehicle-select-section[style*="display: none"],
.nwb-widget .nwb-vehicle-select-section[style*="display:none"] { display: none; }
.nwb-widget .nwb-vehicle-select-title {
  flex: none;
  margin: 0 0 8px;
  color: var(--nwb-label);
  font-size: 12.5px;
  letter-spacing: .1em;
}
/* Padding + equal negative margin leaves room for the selected-card badge
   (which overhangs the card corner) without the scroll box clipping it. */
.nwb-widget .nwb-vehicle-select-cards {
  flex: 1 1 auto;
  min-height: 92px;
  gap: var(--nwb-vehicle-card-spacing, 10px);
  margin: -8px -8px 0 0;
  padding: 8px 8px 8px 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--nwb-w-line) transparent;
  /* When there are more cards than fit, the list can settle mid-card at the
     bottom edge (e.g. 4 vehicles on a phone) — a plain hard crop there can
     read as a rendering glitch rather than "scroll for more". Snapping each
     card's top edge to the container on scroll keeps every FULLY scrolled-to
     card whole; a small fade at the bottom softens a card left partially cut.
     Top edge is deliberately NOT faded: the selected-card checkmark badge
     (below) overhangs a card's own top-right corner by design, and the very
     first card sits close enough to the container's top that fading it could
     fade the badge along with it when that first card happens to be selected. */
  scroll-snap-type: y proximity;
  scroll-padding-block: 2px;
  mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 14px), transparent);
}
.nwb-widget .nwb-vehicle-select-cards > * { flex-shrink: 0; scroll-snap-align: start; }

.nwb-widget .nwb-vehicle-select-card {
  box-sizing: border-box;
  align-items: center;
  width: 100%;
  min-height: 0;
  gap: 12px;
  /* Vertical padding is 2px tighter than the admin's Card Padding so cards
     stay compact by default while still scaling with that setting. */
  padding: calc(var(--nwb-vehicle-card-padding, 12px) - 2px) var(--nwb-vehicle-card-padding, 12px);
  background-color: var(--nwb-vehicle-card-bg, #FFFFFF) !important;
  border: var(--nwb-vehicle-card-border-width, 1px) solid var(--nwb-vehicle-card-border-color, #D8D5CC) !important;
  border-radius: var(--nwb-vehicle-card-border-radius, 10px) !important;
  box-shadow: none !important;
  transform: none;
}
.nwb-widget .nwb-vehicle-select-card:hover {
  transform: none;
  border-color: var(--nwb-vehicle-card-hover-border, var(--nwb-secondary)) !important;
  box-shadow: none !important;
}
/* Selected: thicker look via an inset ring, so the card's box (and therefore
   the list layout) never shifts by a pixel when selection changes. */
.nwb-widget .nwb-vehicle-select-card.nwb-vehicle-select-active {
  border: var(--nwb-vehicle-card-border-width, 1px) solid var(--nwb-vehicle-card-selected-border, var(--nwb-secondary)) !important;
  background-color: color-mix(in srgb, var(--nwb-vehicle-card-selected-border, var(--nwb-secondary)) 9%, var(--nwb-vehicle-card-bg, #FFFFFF)) !important;
  box-shadow: inset 0 0 0 1px var(--nwb-vehicle-card-selected-border, var(--nwb-secondary)) !important;
}
/* Badge sits fully INSIDE the card's top-right corner (not overhanging it), so no
   scroll/overflow container or narrow phone screen can ever clip it. */
.nwb-widget .nwb-vehicle-select-card.nwb-vehicle-select-active::after {
  top: 5px;
  right: 5px;
  width: 18px;
  height: 18px;
  font-size: 12px;
  line-height: 1;
  color: #fff;
}
.nwb-widget .nwb-vehicle-select-image,
.nwb-widget .nwb-vehicle-select-image-placeholder {
  width: min(var(--nwb-vehicle-image-width, 88px), 88px);
  height: min(var(--nwb-vehicle-image-height, 58px), 58px);
  border-radius: 6px;
}
.nwb-widget .nwb-vehicle-select-image{
	height: auto !important;
}
.nwb-widget .nwb-success-whatsapp { margin: 10px 0 0; font-size: 15px; text-align: center; }
.nwb-widget .nwb-success-whatsapp a { font-weight: 700; color: var(--nwb-primary); }
.nwb-widget .nwb-vehicle-select-card:hover .nwb-vehicle-select-image,
.nwb-widget .nwb-vehicle-select-card.nwb-vehicle-select-active .nwb-vehicle-select-image { transform: none; }
.nwb-widget .nwb-vehicle-select-body { gap: 2px; }
.nwb-widget .nwb-vehicle-select-name { line-height: 1.2; }
.nwb-widget .nwb-vehicle-select-desc { line-height: 1.35; }
/* Right-hand slot holds the vehicle's price; the capacity line
   ("Up to 6 people, 4 luggage") sits under the description. */
.nwb-widget .nwb-vehicle-select-price {
  font-size: min(var(--nwb-vehicle-price-font-size, 17px), 17px);
  font-weight: 700;
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}
.nwb-widget .nwb-vehicle-select-capacity {
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
}
/* Price summary: one compact row instead of the 158px centered block. */
.nwb-widget .nwb-step2-card-price { flex: none; margin: 12px 0 0; }
.nwb-widget .nwb-vehicle-select-section[style*="display: none"] + .nwb-step2-card-price,
.nwb-widget .nwb-vehicle-select-section[style*="display:none"] + .nwb-step2-card-price { margin-top: auto; margin-bottom: auto; }
.nwb-widget .nwb-price-box {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: center;
  margin: 0;
  padding: 10px 16px;
  background: color-mix(in srgb, var(--nwb-secondary) 10%, var(--nwb-bg));
  border: 1px solid color-mix(in srgb, var(--nwb-secondary) 45%, transparent);
  border-radius: var(--nwb-field-radius, 8px);
  box-shadow: none;
  text-align: left;
}
.nwb-widget .nwb-price-label { grid-column: 1; margin: 0; color: var(--nwb-label); font-size: 12.5px; letter-spacing: .1em; }
.nwb-widget .nwb-price-note  { grid-column: 1; margin: 0; color: var(--nwb-label); font-size: 13px; }
.nwb-widget .nwb-price-amount {
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--nwb-primary);
  font-family: var(--nwb-heading-font, Georgia, serif);
  font-size: 31px;
  font-weight: 700;
  line-height: 1;
  text-shadow: none;
}
.nwb-widget .nwb-breakdown-toggle { margin: 6px 0 0; text-align: left; }
.nwb-widget .nwb-show-breakdown { color: var(--nwb-label); font-size: 13.5px; }
.nwb-widget .nwb-breakdown-rows {
  max-height: 112px;
  overflow-y: auto;
  margin-top: 6px;
  padding: 8px 12px;
  border-radius: var(--nwb-field-radius, 8px);
}
.nwb-widget .nwb-breakdown-row { padding: 4px 0; font-size: 13px; }
.nwb-widget .nwb-reassurance-text { margin: 8px 0 0; font-size: 13px; text-align: left; }
.nwb-widget .nwb-price-error { margin: 8px 0 0; padding: 8px 12px; font-size: 14px; border-radius: var(--nwb-field-radius, 8px); }
.nwb-widget .nwb-loading-price {
  flex-direction: row;
  justify-content: center;
  gap: 12px;
  padding: 16px;
  font-size: 14px;
}
.nwb-widget .nwb-loading-price p { margin: 0; }
.nwb-widget .nwb-spinner-wrap { margin: 0; }
.nwb-widget .nwb-spinner-ring { width: 22px; height: 22px; border-width: 2px; }

.nwb-widget .nwb-step2-actions-bar {
  flex: none;
  gap: 12px;
  margin: 0;
  padding: 12px 0 var(--nwb-w-pad-bottom);
  background: var(--nwb-bg);
}
.nwb-widget .nwb-step2-actions-bar .nwb-back-link {
  border-color: var(--nwb-primary);
  border-radius: var(--nwb-btn-radius, 6px);
  font-size: var(--nwb-button-font-size, 16px);
}

/* ---- Step 3: customer details + payment scroll; Back stays put ------------ */
/* Step 3 heading ("Customer Details"): the JS moves focus to it on step change,\n   so it stays in the DOM and readable by screen readers, just not painted. */
.nwb-widget .nwb-step-3-panel .nwb-review-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.nwb-widget .nwb-step3-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: 0 0 6px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nwb-w-line) transparent;
}
/* The step's primary action (quote button / payment options) is pinned below the
   scrolling details, like Step 1's button. It never scrolls itself — the details
   above (.nwb-step3-body) give up space instead, and a tall PayPal block uses
   .nwb-pay-tall, which scrolls the whole card. */
.nwb-widget .nwb-step3-actions {
  flex: none;
  padding: 4px 0 0;
  overflow: visible;
}
/* Pay Later / secondary button: always an outlined button. Some themes restyle
   button:focus / :active (e.g. a light-blue fill) after a click or tab — pin the
   states so only the intended hover fill applies. */
.nwb-widget .nwb-btn-secondary,
.nwb-widget .nwb-btn-secondary:focus,
.nwb-widget .nwb-btn-secondary:active {
  background: transparent !important;
  color: var(--nwb-primary) !important;
  border: 1.5px solid var(--nwb-primary) !important;
  box-shadow: none;
}
.nwb-widget .nwb-btn-secondary:hover {
  background: var(--nwb-primary) !important;
  color: #fff !important;
}
/* PayPal card-first checkout is ~400px tall: pinning it would leave no room for
   the details, so with it Step 3 is ONE scrolling area (details, then payment). */
.nwb-widget .nwb-step-3-panel > .nwb-review-card.nwb-pay-tall {
  display: block;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--nwb-w-line) transparent;
  /* Same "fade instead of a hard crop" cue as the vehicle list — this card's
     own padding already keeps content clear of the top edge, so only the
     bottom needs it. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 16px), transparent);
}
.nwb-widget .nwb-pay-tall .nwb-step3-body,
.nwb-widget .nwb-pay-tall .nwb-step3-actions { max-height: none; overflow: visible; }
.nwb-widget .nwb-step3-body .nwb-section { padding: 0; }
.nwb-widget .nwb-step3-body .nwb-contact-fields { padding: 0; }
/* Name on its own row, Email + Phone side by side, notes full width — this
   overrides the "stacked" Customer Field Layout only inside the widget. */
.nwb-widget .nwb-fields-grid.nwb-customer-fields,
.nwb-widget .nwb-fields-grid.nwb-customer-fields.stacked { grid-template-columns: 1fr 1fr !important; }
.nwb-widget .nwb-fields-grid.nwb-customer-fields > [data-field="full_name"],
.nwb-widget .nwb-fields-grid.nwb-customer-fields > .nwb-section-label,
.nwb-widget .nwb-fields-grid.nwb-customer-fields > [data-field="notes"] { grid-column: 1 / -1; }
.nwb-widget .nwb-fields-grid.nwb-customer-fields > [data-field="email"],
.nwb-widget .nwb-fields-grid.nwb-customer-fields > [data-field="phone"] { grid-column: span 1; }
.nwb-widget .nwb-step3-payment-wrap { margin: 0; }
.nwb-widget .nwb-payment-actions { gap: 8px; margin-top: 0; }
/* "Accepted secure payments": label + card icons share one row, the sentence\n   sits under them — about half the height of the stacked original. */
.nwb-widget .nwb-trust-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  padding-bottom: 10px;
  border-bottom: 0;
  text-align: left;
}
.nwb-widget .nwb-trust-label { margin: 0; }
.nwb-widget .nwb-trust-icons { justify-content: flex-end; gap: 6px; }
.nwb-widget .nwb-trust-icon { height: 26px; min-width: 40px; }
.nwb-widget .nwb-trust-text { display: none; }
.nwb-widget .nwb-journey-quote-request-wrap .nwb-form-footer {
  position: static;
  margin: 14px 0 0;
  padding: 0;
}
.nwb-widget .nwb-paypal-card-section { padding: 14px; border-radius: var(--nwb-field-radius, 8px); }
.nwb-widget .nwb-paypal-card-title { font-size: 15px; }
.nwb-widget .nwb-paypal-card-subtext { margin-bottom: 12px; font-size: 13px; }
.nwb-widget .nwb-card-field-container { border-radius: var(--nwb-field-radius, 8px); }
.nwb-widget .nwb-paypal-divider { margin: 14px 0; }
.nwb-widget .nwb-paypal-hosted-total { padding: 10px 14px; margin-bottom: 12px; border-radius: var(--nwb-field-radius, 8px); }
.nwb-widget .nwb-step-3-panel .nwb-step-back-wrap {
  flex: none;
  margin: 0;
  padding: 10px 0 var(--nwb-w-pad-bottom);
  background: var(--nwb-bg);
}

/* ---- Success: centered inside the same fixed box --------------------------- */
.nwb-widget .nwb-success-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--nwb-w-pad);
  overflow-y: auto;
}
.nwb-widget .nwb-success-panel[style*="display: none"],
.nwb-widget .nwb-success-panel[style*="display:none"] { display: none; }
.nwb-widget .nwb-success-icon { width: 56px; height: 56px; margin-bottom: 16px; font-size: 25px; }
.nwb-widget .nwb-success-title {
  color: var(--nwb-primary);
  font-family: var(--nwb-heading-font, Georgia, serif);
  font-size: 27px;
  font-weight: 600;
}
.nwb-widget .nwb-success-msg { color: var(--nwb-text); font-size: 1em; }

/* ---- Quote form (single page): same box, its three contact fields become
   two columns so they are not cramped at widget width ----------------------- */
.nwb-quote-form-wrapper.nwb-widget .nwb-fields-grid.nwb-three-col { grid-template-columns: 1fr 1fr; }
.nwb-quote-form-wrapper.nwb-widget .nwb-fields-grid.nwb-three-col > .nwb-col-third { grid-column: span 1; }
.nwb-quote-form-wrapper.nwb-widget .nwb-fields-grid.nwb-three-col > .nwb-col-third:last-child { grid-column: 1 / -1; }
.nwb-widget .nwb-quote-whatsapp { margin: 10px 0 12px; font-size: 14px; }

/* ---- Responsive ------------------------------------------------------------ */
@media (max-width: 768px) {
  /* Legacy rules stack every two-column row below 768px; inside the compact
     widget date/time and passengers/luggage stay side by side until phones. */
  .nwb-widget .nwb-fields-grid.nwb-two-col { grid-template-columns: 1fr 1fr; }
  .nwb-widget .nwb-address-section .nwb-fields-grid.nwb-two-col { grid-template-columns: 1fr; }
  .nwb-widget .nwb-col-half { grid-column: span 1; }
  .nwb-widget .nwb-form-header { padding: var(--nwb-w-pad-top) var(--nwb-w-pad) 0; }
  .nwb-widget .nwb-form-title { font-size: min(var(--nwb-header-font-size, 27px), 23px); }
  .nwb-widget .nwb-steps-nav { padding: 14px var(--nwb-w-pad) 22px; min-height: 0; }
  .nwb-widget .nwb-step-panel { padding: 0; }
  .nwb-widget .nwb-section { padding: 0 0 var(--nwb-field-gap); }
  .nwb-widget .nwb-step1-compact { padding: 0; }
  .nwb-widget .nwb-toggle-btn { min-height: max(44px, var(--nwb-input-height, 48px)); }
}
@media (max-width: 600px) {
  .nwb-form-wrapper.nwb-widget {
    --nwb-w-pad: min(var(--nwb-form-padding, 40px), 20px);
    /* Controlled, not infinite: never taller than the viewport minus a small
       margin. dvh where supported (tracks mobile browser chrome), vh before. */
    height: auto;
    max-height: min(var(--nwb-form-height, 620px), calc(100vh - 24px));
    max-height: min(var(--nwb-form-height, 620px), calc(100dvh - 24px));
  }
  .nwb-form-wrapper.nwb-widget[data-form-type="general"],
  .nwb-form-wrapper.nwb-widget[data-form-type="quote"] { height: auto; }
}
@media (max-width: 440px) {
  .nwb-form-wrapper.nwb-widget { border-radius: min(var(--nwb-form-radius, 16px), 14px); }
  .nwb-widget .nwb-fields-grid.nwb-two-col,
  .nwb-widget .nwb-fields-grid.nwb-trip-selection,
  .nwb-widget .nwb-fields-grid.nwb-trip-selection.stacked { grid-template-columns: 1fr !important; }
  .nwb-widget .nwb-col-half { grid-column: 1 / -1; }
  .nwb-widget .nwb-fields-grid.nwb-customer-fields,
  .nwb-widget .nwb-fields-grid.nwb-customer-fields.stacked { grid-template-columns: 1fr !important; }
  .nwb-widget .nwb-fields-grid.nwb-customer-fields > [data-field="email"],
  .nwb-widget .nwb-fields-grid.nwb-customer-fields > [data-field="phone"] { grid-column: 1 / -1; }
  .nwb-quote-form-wrapper.nwb-widget .nwb-fields-grid.nwb-three-col { grid-template-columns: 1fr; }
  .nwb-quote-form-wrapper.nwb-widget .nwb-fields-grid.nwb-three-col > .nwb-col-third { grid-column: 1 / -1; }
  /* keep phones at the 16px floor (iOS Safari focus-zoom), same rule as above */
  .nwb-widget .nwb-input { font-size: max(var(--nwb-input-font-size, 16px), 17px); }
}

/* ---- Mobile layout for every service type -----------------------------------
   Vehicle cards, the price box and the breakdown are shared by all services, so
   these rules live LAST in the file: the base rules above have the same
   specificity and would otherwise win. */
.nwb-widget { max-width: 100%; }
.nwb-widget *, .nwb-widget *::before, .nwb-widget *::after { box-sizing: border-box; }
.nwb-widget .nwb-fields-grid > *,
.nwb-widget .nwb-step2-card,
.nwb-widget .nwb-price-box > * { min-width: 0; }
.nwb-widget .nwb-input,
.nwb-widget select,
.nwb-widget input { max-width: 100%; }
.nwb-widget .nwb-price-amount { overflow-wrap: anywhere; }

@media (max-width: 600px) {
  /* Vehicle card: image + text on the first row, price on its own row below. */
  .nwb-widget .nwb-vehicle-select-card {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 12px;
    text-align: left;
  }
  .nwb-widget .nwb-vehicle-select-image,
  .nwb-widget .nwb-vehicle-select-image-placeholder { width: 64px; height: auto; flex: 0 0 64px; }
  .nwb-widget .nwb-vehicle-select-body { flex: 1 1 0; min-width: 0; }
  .nwb-widget .nwb-vehicle-select-name,
  .nwb-widget .nwb-vehicle-select-desc,
  .nwb-widget .nwb-vehicle-select-capacity { overflow-wrap: anywhere; word-break: normal; }
  .nwb-widget .nwb-vehicle-select-price {
    flex: 0 0 100%;
    max-width: none;
    padding-top: 6px;
    border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
    font-size: 15px;
    text-align: right;
    white-space: normal;
  }
  .nwb-widget .nwb-vehicle-select-card.nwb-vehicle-select-active::after { top: 6px; right: 6px; }

  /* Total price box: label/distance on top, big amount on its own line. */
  .nwb-widget .nwb-price-box {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 4px;
    padding: 10px 12px;
  }
  .nwb-widget .nwb-price-label,
  .nwb-widget .nwb-price-note { grid-column: 1; grid-row: auto; }
  .nwb-widget .nwb-price-amount {
    grid-column: 1;
    grid-row: auto;
    margin-top: 2px;
    font-size: clamp(22px, 7.5vw, 30px);
    text-align: left;
    white-space: nowrap;
  }

  /* Breakdown rows: label wraps, amount stays whole. */
  .nwb-widget .nwb-breakdown-row { gap: 4px 10px; align-items: baseline; }
  .nwb-widget .nwb-breakdown-row > :first-child { min-width: 0; overflow-wrap: anywhere; }
  .nwb-widget .nwb-breakdown-row > :last-child { flex: none; white-space: nowrap; }
  .nwb-widget .nwb-breakdown-rows { max-height: 150px; }

  /* Back / next buttons share the row evenly and never push past the edge. */
  .nwb-widget .nwb-step2-actions-bar { gap: 8px; }
  .nwb-widget .nwb-step2-actions-bar { display: flex; align-items: stretch; }
  .nwb-widget .nwb-step2-actions-bar .nwb-step-back-wrap { flex: 0 0 auto; min-width: 0; }
  .nwb-widget .nwb-step2-actions-bar .nwb-step2-continue-wrap { flex: 1 1 0; min-width: 0; }
  .nwb-widget .nwb-step2-actions-bar .nwb-back-link { padding-left: 16px; padding-right: 16px; white-space: nowrap; }
  .nwb-widget .nwb-step2-actions-bar .nwb-step2-continue-btn { width: 100%; white-space: nowrap; }
}
@media (max-width: 380px) {
  .nwb-widget .nwb-vehicle-select-image,
  .nwb-widget .nwb-vehicle-select-image-placeholder { width: 52px; flex-basis: 52px; }
  .nwb-widget .nwb-vehicle-select-card { padding: 8px 10px; gap: 6px 10px; }
  .nwb-widget .nwb-vehicle-select-name { font-size: 15px; }
  .nwb-widget .nwb-vehicle-select-desc,
  .nwb-widget .nwb-vehicle-select-capacity { font-size: 12px; }
  .nwb-widget .nwb-vehicle-select-price { font-size: 14px; }
  .nwb-widget .nwb-price-label { font-size: 11.5px; letter-spacing: .06em; }
  .nwb-widget .nwb-breakdown-row { font-size: 12px; }
  .nwb-widget .nwb-step2-actions-bar .nwb-back-link { padding-left: 12px; padding-right: 12px; }
}

/* ---- Confirmation screen: no heading, progress bars or step count ----------
   JS adds .nwb-is-success to the wrapper when the success panel is shown. */
.nwb-form-wrapper.nwb-is-success .nwb-form-header,
.nwb-form-wrapper.nwb-is-success .nwb-steps-nav,
.nwb-form-wrapper.nwb-is-success .nwb-step-count { display: none !important; }

/* ---- Phones: the form grows to fit its content (height: auto) ---------------
   The fixed-height "widget box" and its inner scroll regions are for desktop
   only. On phones every step simply takes the height it needs and the page
   scrolls, so nothing is clipped or hidden behind an inner scrollbar. */
@media (max-width: 600px) {
  .nwb-form-wrapper.nwb-widget,
  .nwb-form-wrapper.nwb-widget[data-form-type="general"],
  .nwb-form-wrapper.nwb-widget[data-form-type="quote"] {
    height: auto !important;
    min-height: 0;
    max-height: none !important;
  }
  .nwb-widget .nwb-step-panel,
  .nwb-widget .nwb-step-2-panel > .nwb-review-card,
  .nwb-widget .nwb-step-3-panel > .nwb-review-card,
  .nwb-widget .nwb-step2-grid,
  .nwb-widget .nwb-vehicle-select-section,
  .nwb-widget .nwb-step-1-panel > .nwb-booking-form,
  .nwb-widget .nwb-general-panel > .nwb-general-form,
  .nwb-widget .nwb-quote-panel > .nwb-quote-form,
  .nwb-widget .nwb-step3-body,
  .nwb-widget .nwb-success-panel {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible !important;
  }
  .nwb-widget .nwb-vehicle-select-cards {
    flex: 0 0 auto;
    min-height: 0;
    max-height: none;
    overflow: visible;
    margin: 0;
    padding: 0;
    mask-image: none;
    -webkit-mask-image: none;
    scroll-snap-type: none;
  }
  .nwb-widget .nwb-breakdown-rows { max-height: none; overflow: visible; }
  .nwb-widget .nwb-step-3-panel > .nwb-review-card.nwb-pay-tall { overflow: visible; mask-image: none; -webkit-mask-image: none; }
  /* Pinned footers become normal in-flow rows. */
  .nwb-widget .nwb-form-footer { position: static; }
  .nwb-widget .nwb-success-panel { padding-top: 24px; padding-bottom: 24px; }
}