/* =========================================================
   Niagara Way Booking Manager — Frontend Styles
   Premium Luxury Booking Form
   ========================================================= */

/* Default CSS variables — PHP overrides these scoped to .nwb-form-wrapper */
:root {
  --nwb-primary:           #244436;
  --nwb-secondary:         #F4B544;
  --nwb-bg:                #FFFCF5;
  --nwb-text:              #1a1a1a;
  --nwb-label:             #244436;
  --nwb-input-bg:          #FFFFFF;
  --nwb-input-border:      #D8D2C5;
  --nwb-input-text:        #1a1a1a;
  --nwb-btn-bg:            #F4B544;
  --nwb-btn-text:          #244436;
  --nwb-radius:            8px;
  --nwb-btn-radius:        8px;
  --nwb-max-width:         920px;
  --nwb-field-gap:         20px;
  --nwb-padding:           40px;
  --nwb-card-bg:           #FFFFFF;
  --nwb-card-selected-bg:  #244436;
  --nwb-card-selected-border: #F4B544;
  --nwb-card-hover-color:  #F4B544;
  --nwb-step-active:       #F4B544;
  --nwb-font-family:       'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* ================================================================
   FORM WRAPPER
   ================================================================ */
.nwb-form-wrapper {
  max-width: var(--nwb-max-width);
  margin: 0 auto;
  background: var(--nwb-bg);
  border-radius: 16px;
  box-shadow: 0 4px 40px rgba(0,0,0,.12);
  overflow: hidden;
  font-family: var(--nwb-font-family);
  color: var(--nwb-text);
  position: relative;
}

/* ================================================================
   HEADER
   ================================================================ */
.nwb-form-header {
  background: var(--nwb-primary);
  padding: 32px var(--nwb-padding) 26px;
  text-align: center;
}
.nwb-form-title {
  color: var(--nwb-secondary);
  margin: 0 0 8px;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1.2;
}
.nwb-form-subtitle {
  color: rgba(255,255,255,.85);
  margin: 0;
  font-size: 15px;
  font-weight: 400;
}

/* ================================================================
   STEP INDICATORS
   ================================================================ */
.nwb-steps-nav {
  display: flex;
  align-items: center;
  padding: 14px var(--nwb-padding);
  background: var(--nwb-primary);
  border-bottom: 3px solid var(--nwb-secondary);
  min-height: 56px;
}
.nwb-step-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  opacity: .45;
  transition: opacity .3s;
}
.nwb-step-indicator.active,
.nwb-step-indicator.completed { opacity: 1; }
.nwb-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  flex-shrink: 0;
  transition: background .3s, color .3s;
}
.nwb-step-indicator.active .nwb-step-num {
  background: var(--nwb-step-active);
  color: var(--nwb-primary);
}
.nwb-step-indicator.completed .nwb-step-num { background: #27ae60; color: #fff; }
.nwb-step-label {
  color: rgba(255,255,255,.7);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.nwb-step-indicator.active .nwb-step-label { color: #fff; }
.nwb-step-connector {
  flex: 1;
  height: 2px;
  background: rgba(255,255,255,.18);
  margin: 0 12px;
  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);
}

/* ================================================================
   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; }
.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: 6px;
}
.nwb-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--nwb-label);
  letter-spacing: .3px;
}
.nwb-required {
  color: #c0392b;
  margin-left: 2px;
}
.nwb-input {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 2px solid var(--nwb-input-border);
  border-radius: var(--nwb-radius);
  background: var(--nwb-input-bg);
  font-size: 15px;
  color: var(--nwb-input-text, var(--nwb-text));
  transition: border-color .2s, box-shadow .2s;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}
.nwb-input:focus {
  outline: none;
  border-color: var(--nwb-secondary);
  box-shadow: 0 0 0 3px rgba(244,181,68,.18);
}
.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='%23244436' 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-label);
  opacity: .55;
  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: #999; 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;
}

/* 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: var(--nwb-label);
  opacity: .55;
  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: 28px;
  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;
}
.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;
  padding: 16px 40px;
  border-radius: var(--nwb-btn-radius);
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: .4px;
  font-family: inherit;
}
.nwb-submit-btn:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(244,181,68,.35);
}
.nwb-submit-btn:active { transform: translateY(0); }
.nwb-submit-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.nwb-btn-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border: 2px solid rgba(36,68,54,.3);
  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: 20px;
  font-weight: 700;
  margin: 0 0 20px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--nwb-secondary);
}
.nwb-review-rows { margin-bottom: 20px; }
.nwb-review-row {
  display: flex;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid #e8e0d5;
  font-size: 14px;
}
.nwb-review-row:last-child { border-bottom: none; }
.nwb-review-row-label { color: #888; 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 — Booking Summary). Large horizontal
   cards: image left, name/description center, price right.
   ================================================================ */
.nwb-vehicle-select-section { margin-bottom: 22px; }
.nwb-vehicle-select-title {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--nwb-primary);
}
.nwb-vehicle-select-cards {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nwb-vehicle-select-card {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 10px 16px;
  background: var(--nwb-card-bg, #fff);
  border: 2px solid var(--nwb-input-border);
  border-radius: var(--nwb-radius);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
  text-align: left;
  font-family: inherit;
}
.nwb-vehicle-select-card:hover {
  border-color: var(--nwb-card-hover-color);
  box-shadow: 0 4px 16px rgba(244,181,68,.2);
}
.nwb-vehicle-select-card.nwb-vehicle-select-active {
  background: var(--nwb-card-selected-bg);
  border-color: var(--nwb-card-selected-border);
  box-shadow: 0 4px 18px rgba(36,68,54,.2);
}
.nwb-vehicle-select-image {
  width: 84px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: rgba(36,68,54,.06);
}
.nwb-vehicle-select-image-placeholder {
  display: block;
}
.nwb-vehicle-select-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  text-align: center;
}
.nwb-vehicle-select-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--nwb-primary);
  line-height: 1.2;
}
.nwb-vehicle-select-desc {
  font-size: 12px;
  color: #777;
  line-height: 1.35;
}
.nwb-vehicle-select-card.nwb-vehicle-select-active .nwb-vehicle-select-name,
.nwb-vehicle-select-card.nwb-vehicle-select-active .nwb-vehicle-select-desc {
  color: rgba(255,255,255,.9);
}
.nwb-vehicle-select-card.nwb-vehicle-select-active .nwb-vehicle-select-desc { opacity: .8; }
.nwb-vehicle-select-price {
  flex-shrink: 0;
  font-weight: 700;
  font-size: 16px;
  color: var(--nwb-primary);
  white-space: nowrap;
}
.nwb-vehicle-select-card.nwb-vehicle-select-active .nwb-vehicle-select-price {
  color: #fff;
}
@media (max-width: 480px) {
  .nwb-vehicle-select-card { flex-wrap: wrap; }
  .nwb-vehicle-select-body { text-align: left; }
  .nwb-vehicle-select-price { width: 100%; text-align: right; }
}

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

/* Price box */
.nwb-price-box {
  background: var(--nwb-primary);
  border-radius: var(--nwb-radius);
  padding: 24px 30px;
  text-align: center;
  margin-bottom: 16px;
}
.nwb-price-label { color: rgba(255,255,255,.7); font-size: 13px; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 6px; }
.nwb-price-amount { color: var(--nwb-secondary); font-size: 38px; font-weight: 800; letter-spacing: .5px; }
.nwb-price-note { color: rgba(255,255,255,.6); font-size: 12px; margin-top: 6px; }

/* Breakdown */
.nwb-breakdown-toggle { margin-bottom: 20px; text-align: center; }
.nwb-show-breakdown { color: var(--nwb-primary); font-size: 13px; text-decoration: none; }
.nwb-show-breakdown:hover { text-decoration: underline; }
.nwb-breakdown-rows { background: #f0ece5; border-radius: var(--nwb-radius); padding: 14px 18px; margin-top: 10px; text-align: left; }
.nwb-breakdown-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px solid #e0d8ce; }
.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: #888;
  margin: 0 0 16px;
  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: 16px;
  border-bottom: 1px solid #ece6da;
}
.nwb-trust-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: #8a8a8a;
  margin-bottom: 10px;
}
.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 #e2ddd2;
  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: #8a8a8a;
  line-height: 1.5;
  margin: 10px 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: 24px;
}
.nwb-btn-primary,
.nwb-btn-secondary {
  border: none;
  padding: 16px 24px;
  border-radius: var(--nwb-btn-radius);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s, transform .1s, box-shadow .2s;
  font-family: inherit;
  letter-spacing: .3px;
  width: 100%;
}
.nwb-btn-primary {
  background: var(--nwb-btn-bg);
  color: var(--nwb-btn-text);
}
.nwb-btn-primary:hover {
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(244,181,68,.3);
}
.nwb-btn-secondary {
  background: transparent;
  color: var(--nwb-primary);
  border: 2px solid var(--nwb-primary);
}
.nwb-btn-secondary:hover {
  background: var(--nwb-primary);
  color: #fff;
}
.nwb-btn-primary:disabled,
.nwb-btn-secondary:disabled { opacity: .6; cursor: not-allowed; transform: 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 #e2ddd2;
  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,.15);
  border-top-color: var(--nwb-secondary, #F4B544);
  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 #e2ddd2;
  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,.15);
  border-top-color: var(--nwb-secondary, #F4B544);
  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 #e2ddd2;
  border-radius: var(--nwb-radius);
  padding: 20px;
}
.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: #8a8a8a;
}
.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: 1px solid var(--nwb-input-border, #d8d2c5);
  border-radius: var(--nwb-radius);
  padding: 11px 14px;
  height: 44px;
  box-sizing: border-box;
}
.nwb-card-field-container.braintree-hosted-fields-focused,
.nwb-card-field-container.nwb-card-field-focused {
  border-color: var(--nwb-secondary, #F4B544);
  box-shadow: 0 0 0 2px rgba(244,181,68,.2);
}
.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: #9a9a9a;
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  margin: 20px 0;
}
.nwb-paypal-divider::before,
.nwb-paypal-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid #e2ddd2;
}
.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-card-bg, #fff);
  border: 1px solid #e2ddd2;
  border-radius: var(--nwb-radius);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.nwb-paypal-hosted-total-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--nwb-label);
  text-transform: uppercase;
  letter-spacing: .5px;
}
.nwb-paypal-hosted-total-amount {
  font-size: 20px;
  font-weight: 800;
  color: var(--nwb-primary);
}
.nwb-paypal-hosted-container { min-height: 45px; }

.nwb-step-back-wrap { text-align: center; margin-top: 20px; }
.nwb-back-link { color: #999; 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: 72px;
  height: 72px;
  background: #27ae60;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  color: #fff;
  margin: 0 auto 20px;
}
.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: .08em;
  color: var(--nwb-label);
  margin-bottom: 12px;
  opacity: .75;
}

/* ================================================================
   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: 2px solid var(--nwb-input-border);
  border-radius: var(--nwb-radius);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s, color .2s;
  text-align: left;
  font-family: inherit;
}
.nwb-trip-type-card:hover {
  border-color: var(--nwb-card-hover-color);
  box-shadow: 0 4px 16px rgba(244,181,68,.2);
}
.nwb-trip-type-card.nwb-card-selected {
  background: var(--nwb-card-selected-bg);
  border-color: var(--nwb-card-selected-border);
  box-shadow: 0 4px 18px rgba(36,68,54,.2);
}
.nwb-trip-type-icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36,68,54,.07);
  border-radius: 10px;
  flex-shrink: 0;
  color: var(--nwb-primary);
  transition: background .2s, color .2s;
}
.nwb-trip-type-card.nwb-card-selected .nwb-trip-type-icon {
  background: rgba(255,255,255,.15);
  color: #fff;
}
.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: #777;
  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,.9);
}
.nwb-trip-type-card.nwb-card-selected .nwb-trip-type-desc { opacity: .8; }
.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: 2px 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: 11px 16px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #888;
  transition: color .2s, background .2s;
  font-family: inherit;
  position: relative;
  text-align: center;
}
.nwb-route-tab + .nwb-route-tab {
  border-left: 2px 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: rgba(36,68,54,.05);
  color: var(--nwb-primary);
}

.nwb-route-panel { }

/* Fixed Route Cards */
.nwb-fixed-route-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  border: 2px solid var(--nwb-input-border);
  border-radius: var(--nwb-radius);
  cursor: pointer;
  transition: border-color .2s, box-shadow .2s, background .2s;
  margin-bottom: 10px;
  background: var(--nwb-card-bg);
}
.nwb-fixed-route-card:last-child { margin-bottom: 0; }
.nwb-fixed-route-card:hover {
  border-color: var(--nwb-secondary);
  background: rgba(244,181,68,.04);
  box-shadow: 0 2px 12px rgba(244,181,68,.15);
}
.nwb-fixed-route-card.nwb-route-selected {
  border-color: var(--nwb-primary);
  background: rgba(36,68,54,.05);
}
.nwb-fixed-route-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(36,68,54,.06);
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--nwb-primary);
  transition: background .2s;
}
.nwb-fixed-route-card:hover .nwb-fixed-route-icon,
.nwb-fixed-route-card.nwb-route-selected .nwb-fixed-route-icon { background: rgba(36,68,54,.1); }
.nwb-fixed-route-info { flex: 1; min-width: 0; }
.nwb-fixed-route-name {
  font-weight: 700;
  font-size: 14px;
  color: var(--nwb-primary);
  line-height: 1.3;
}
.nwb-fixed-route-desc { font-size: 11px; color: #888; margin-top: 2px; }
.nwb-fixed-route-price {
  font-size: 20px;
  font-weight: 800;
  color: var(--nwb-primary);
  flex-shrink: 0;
  text-align: right;
  line-height: 1;
}
.nwb-fixed-route-currency {
  display: block;
  font-size: 10px;
  font-weight: 600;
  color: #888;
  text-align: right;
  margin-top: 2px;
}
.nwb-no-routes { font-size: 13px; color: #888; padding: 10px 0; margin: 0; }

/* ================================================================
   TOUR INFO BADGE
   ================================================================ */
.nwb-tour-selected-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(36,68,54,.06);
  border: 2px 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: rgba(36,68,54,.07);
  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: #666;
  margin-top: 2px;
}

/* ================================================================
   ADDRESS FIELDS / AUTOCOMPLETE WRAPPER
   ================================================================ */
.nwb-ac-wrapper { position: relative; }
.nwb-ac-pin {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  display: flex;
  align-items: center;
  color: var(--nwb-label);
  opacity: .55;
  line-height: 1;
}

/* ================================================================
   GEOAPIFY DROPDOWN
   ================================================================ */
.nwb-geo-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 99999;
  background: #fff;
  border: 2px solid var(--nwb-primary);
  border-top: none;
  border-radius: 0 0 var(--nwb-radius) var(--nwb-radius);
  box-shadow: 0 8px 24px 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 #f0ebe4;
  transition: background .15s;
}
.nwb-geo-item:last-child { border-bottom: none; }
.nwb-geo-item:hover,
.nwb-geo-item.nwb-geo-active { background: var(--nwb-bg); }
.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: #888;
  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: #888;
}
.nwb-geo-spin {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid #ddd;
  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: #999;
}

/* ================================================================
   GOOGLE PLACES DROPDOWN
   ================================================================ */
.pac-container {
  border-radius: 0 0 var(--nwb-radius) var(--nwb-radius) !important;
  border: 2px solid var(--nwb-primary) !important;
  border-top: none !important;
  box-shadow: 0 8px 24px 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: var(--nwb-bg) !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: 2px solid var(--nwb-primary);
  border-top: none;
  border-radius: 0 0 var(--nwb-radius) var(--nwb-radius);
  box-shadow: 0 8px 24px 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 #f0ebe4;
  transition: background .15s;
}
.nwb-gac-item:last-child { border-bottom: none; }
.nwb-gac-item:hover,
.nwb-gac-item.nwb-gac-active { background: var(--nwb-bg); }
.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: #888;
  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 #f0ebe4;
}
@media (max-width: 600px) {
  .nwb-gac-dropdown { max-height: 220px; }
  /* The default item divider (#f0ebe4) is too low-contrast to read as a
     separator on small mobile screens — a more visible border color 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 .3s ease; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media ( max-width: 768px ) {
  .nwb-form-header { padding: 22px 20px 18px; }
  .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; }
  .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; }
  .nwb-input { padding: 12px 14px; font-size: 14px; min-height: 46px; }
  .nwb-fields-grid.nwb-three-col { grid-template-columns: 1fr; }
  .nwb-col-third { grid-column: 1 / -1; }
  /* Match .nwb-input's smaller padding/font-size at this breakpoint so the
     date/time hint text lines up with the native picker's own value text. */
  .nwb-datetime-hint { left: 14px; font-size: 14px; }
}

/* 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: 6px;
  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: #FDFAF0;
  border: 1px solid #C9A96E;
  border-left: 3px solid #244436;
  color: #244436;
  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: #888;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.nwb-paypal-divider::before,
.nwb-paypal-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e0ddd8;
}
.nwb-paypal-deposit-note {
  background: #fff8f0;
  border: 1px solid #f0c080;
  border-radius: 6px;
  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 #e0ddd8;
  border-top-color: var(--nwb-primary, #244436);
  border-radius: 50%;
  animation: nwb-spin .7s linear infinite;
}
@keyframes nwb-spin {
  to { transform: rotate(360deg); }
}