/* =========================================================
   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 {
  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 {
  background: var(--nwb-primary);
  padding: 48px var(--nwb-padding) 38px;
  text-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);
}
.nwb-form-title {
  color: #FFFFFF;
  margin: 0 0 12px;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.3;
}
.nwb-form-subtitle {
  color: var(--nwb-secondary);
  margin: 0;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .5px;
  font-style: italic;
}

/* ================================================================
   STEP INDICATORS
   ================================================================ */
.nwb-steps-nav {
  display: flex;
  align-items: center;
  padding: 16px var(--nwb-padding);
  background: var(--nwb-primary);
  border-bottom: 1px solid rgba(255,255,255,.08);
  min-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: 13px;
  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: 12px;
  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);
}

/* ================================================================
   STEP 1 — DESKTOP 2-COLUMN LAYOUT
   Trip planning (left) / customer details (right). .nwb-section still
   provides its own top/bottom rhythm; left/right padding is moved here
   (on the shared wrapper) so it applies once at the outer edges instead
   of doubling up between the two columns. Collapses to a single column
   at tablet/mobile widths (see RESPONSIVE section below).
   ================================================================ */
.nwb-step1-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Admin-configurable: Style Settings → Step 1 Layout → Step 1 Column
     Gap (nwb_step1_column_gap, default 28, 0-60). */
  column-gap: var(--nwb-step1-column-gap, 28px);
  padding: 0 var(--nwb-padding);
  /* stretch (not start) — both columns render as equal-height bordered
     cards below, so a shorter Customer Details column never trails off
     into bare whitespace next to a taller Trip Details column. */
  align-items: stretch;
}
/* Each column is its own bordered card — this is what actually fixes
   "right column looks empty": a defined, self-contained panel reads as
   finished even when it holds fewer fields than the other side. */
.nwb-step1-col {
  min-width: 0;
  background: #FFFFFF;
  border: 1px solid var(--nwb-hairline);
  border-radius: 14px;
  /* Admin-configurable: Style Settings → Step 1 Layout → Step 1 Section
     Padding (nwb_step1_padding, default 28, 10-50). */
  padding: var(--nwb-step1-padding, 28px);
}
.nwb-step1-col .nwb-section {
  padding: 0 0 var(--nwb-field-gap);
}
.nwb-step1-col .nwb-contact-fields.nwb-section {
  padding-bottom: 0;
}
/* First label inside each card sits flush with the card's own top
   padding — no extra section padding stacking on top of it. */
.nwb-step1-col > .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); }

/* ================================================================
   FIELD ELEMENTS
   ================================================================ */
.nwb-field-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.nwb-label {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--nwb-label);
  letter-spacing: .5px;
  text-transform: uppercase;
}
.nwb-required {
  color: #c0392b;
  margin-left: 2px;
}
.nwb-input {
  width: 100%;
  min-height: 52px;
  padding: 13px 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);
  font-size: 15px;
  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: #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;
}
.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: 20px !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;
}
.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: 12px; color: var(--nwb-muted); margin: 0; }
.nwb-field-error { font-size: 12px; 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: 15px;
  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: 14px;
  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;
  min-height: 55px;
  padding: 0 42px;
  border-radius: var(--nwb-btn-radius);
  font-size: 15px;
  font-weight: 700;
  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 {
  background: #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; }
.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
   ================================================================ */
.nwb-review-card {
  max-width: 640px;
  margin: 0 auto;
}
.nwb-review-title {
  color: var(--nwb-primary);
  font-size: 13px;
  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: 22px; }
.nwb-review-row {
  display: flex;
  justify-content: space-between;
  padding: 13px 0;
  border-bottom: 1px solid var(--nwb-hairline);
  font-size: 14px;
}
.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: 13px;
  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;
}
.nwb-vehicle-select-card.nwb-vehicle-select-active {
  /* Selection = border + soft glow + a small animated check badge (see
     ::after below) only. Background, text colors, and border-radius are
     intentionally left unset here so they stay exactly what the base
     rule above already set — no fill, no dark background, no layout/
     shape change. !important matches the base rule's own pattern (same
     reasoning: protects the selected look from a stray theme/button-
     reset style overriding it). */
  border: 2px solid #C9A227 !important;
  box-shadow: 0 6px 18px rgba(201,162,39,.28) !important;
  transform: translateY(-2px);
}
/* 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: -9px;
  right: -9px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #C9A227;
  color: #1A1A1A;
  font-size: 12px;
  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, 16px);
  color: var(--nwb-vehicle-title-color, #1A1A1A) !important;
  line-height: 1.25;
}
.nwb-vehicle-select-desc {
  font-size: var(--nwb-vehicle-desc-font-size, 12px);
  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, 17px);
  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) {
  .nwb-vehicle-select-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
  .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: 72px;
    height: 72px;
    align-self: center;
  }
  .nwb-vehicle-select-body { align-items: center; }
  .nwb-vehicle-select-price { white-space: normal; }
}

/* 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: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 8px; font-weight: 600; }
.nwb-price-amount {
  color: var(--nwb-secondary);
  font-size: 40px;
  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: 12px; margin-top: 8px; }

/* Breakdown */
.nwb-breakdown-toggle { margin-bottom: 22px; text-align: center; }
.nwb-show-breakdown { color: var(--nwb-primary); font-size: 13px; 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: 13px; 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: 12.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: 14px;
  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: 11px;
  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: 12.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: 11.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);
  font-size: 14.5px;
  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: #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; }

/* ================================================================
   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: 13px;
  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: 13px;
  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: 16px;
  font-weight: 700;
  color: var(--nwb-text);
}
.nwb-paypal-card-subtext {
  margin: 0 0 18px;
  font-size: 12.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: 13px;
  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: 13px;
  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: 12px;
  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: 13px;
  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: 13px;
  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: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.65);
  text-transform: uppercase;
  letter-spacing: .1em;
}
.nwb-paypal-hosted-total-amount {
  font-size: 22px;
  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 { color: var(--nwb-muted); font-size: 13px; text-decoration: none; }
.nwb-back-link:hover { color: var(--nwb-primary); text-decoration: underline; }

/* ================================================================
   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: 32px;
  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: 24px;
  font-weight: 700;
  margin: 0 0 12px;
}
.nwb-success-msg { color: #555; font-size: 16px; 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: 14px;
}

/* ================================================================
   SECTION WRAPPER
   ================================================================ */
.nwb-section {
  padding: 0 var(--nwb-padding) var(--nwb-field-gap);
}
.nwb-section-label {
  font-size: 12px;
  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: 11px;
  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: 14px;
  color: var(--nwb-primary);
  line-height: 1.2;
}
.nwb-trip-type-desc {
  font-size: 11px;
  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: 13px;
  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: 12.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: 14.5px;
  color: var(--nwb-primary);
  line-height: 1.35;
}
.nwb-fixed-route-desc { font-size: 11px; color: var(--nwb-muted); margin-top: 3px; text-transform: uppercase; letter-spacing: .06em; }
.nwb-fixed-route-price {
  font-size: 22px;
  font-weight: 800;
  color: var(--nwb-secondary);
  flex-shrink: 0;
  text-align: right;
  line-height: 1;
}
.nwb-fixed-route-currency {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: var(--nwb-muted);
  text-align: right;
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.nwb-no-routes { font-size: 13px; 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: 15px;
}
.nwb-tour-badge-price {
  font-size: 13px;
  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: 16px; flex-shrink: 0; color: var(--nwb-secondary); }
.nwb-geo-text { min-width: 0; }
.nwb-geo-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--nwb-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nwb-geo-sub {
  font-size: 12px;
  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: 13px;
  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: 13px;
  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: 14px !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: 14px;
  font-weight: 600;
  color: var(--nwb-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nwb-gac-sub {
  font-size: 12px;
  color: var(--nwb-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}
.nwb-gac-attribution {
  padding: 6px 16px;
  font-size: 10px;
  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: 20px; }
  .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; }
  /* Step 1's desktop 2-column layout collapses to a single column —
     trip-planning fields first, customer details below, matching the
     original single-flow reading order. */
  .nwb-step1-columns { grid-template-columns: 1fr; row-gap: 20px; padding: 0 20px; }
  .nwb-step1-col { padding: 22px 18px; }
  .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: 28px; }
  .nwb-step-connector { min-width: 8px; margin: 0 6px; }
  .nwb-fixed-route-price { font-size: 16px; }

  /* 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. */
  .nwb-input { padding: 12px 14px; font-size: 16px; min-height: 46px; }
  .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: 16px; }
}

/* 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: 14px;
  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: 13px;
  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: 12px;
  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: 13px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.nwb-paypal-processing {
  text-align: center;
  padding: 16px 0;
  color: #555;
  font-size: 14px;
}
.nwb-spinner-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.nwb-spinner-ring {
  width: 32px;
  height: 32px;
  border: 3px solid var(--nwb-hairline);
  border-top-color: var(--nwb-primary, #1A1A1A);
  border-radius: 50%;
  animation: nwb-spin .7s linear infinite;
}
@keyframes nwb-spin {
  to { transform: rotate(360deg); }
}