/* ==========================================================================
   TAL BOOKING CONSOLE
   Visual re-skin of the Atomic Chauffeur Booking plugin ([atomic_chauffeur_booking]).
   Styling only. Plugin files, markup and behaviour are untouched.

   Scope : .tal-page .acb   (every TAL page wraps its content in .tal-page)
   Theme : any non-default plugin theme (colours come from its --acb-* variables). Plugin rules use
           .acb[class*="acb-theme-"]:not(.acb-theme-default) (0,3,0) + !important,
           so every override below carries the .tal-page prefix (0,4,0+).
   Loaded: after tal-responsive. Remove the enqueue in functions.php to revert.
   ========================================================================== */

/* ---- Tokens: every colour comes from the active plugin theme ----------
   (Plugin settings > theme). Nothing here is a fixed colour, so Executive
   Black, Royal Burgundy or any other plugin theme shows through unchanged. */
.tal-page .acb {
  --tal-bk-surface: var(--acb-bg);
  --tal-bk-bg: color-mix(in srgb, var(--acb-text) 6%, transparent);
  --tal-bk-bg-hover: color-mix(in srgb, var(--acb-text) 12%, transparent);
  --tal-bk-ink: var(--acb-heading);
  --tal-bk-text-2: var(--acb-text);
  --tal-bk-text-3: var(--acb-muted);
  --tal-bk-border: var(--acb-border);
  --tal-bk-border-strong: var(--acb-border);
  --tal-bk-accent: var(--acb-accent);
  --tal-bk-accent-tint: color-mix(in srgb, var(--acb-accent) 18%, transparent);
  --tal-bk-on-ink: var(--acb-accent-text);
  --tal-bk-font-display: var(--tal-font-heading, "Manrope", "Helvetica Neue", Arial, sans-serif);
  --tal-bk-font-body: var(--tal-font-body, "Inter", "Helvetica Neue", Arial, sans-serif);
  --tal-bk-radius-1: var(--tal-radius-sm, 2px);
  --tal-bk-radius-2: var(--tal-radius-md, 3px);
}

/* ---- Console shell: flat surface, 3px ink top edge --------------------- */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) {
  box-sizing: border-box;
  min-width: 0;
  max-width: 820px !important;                 /* the plugin's own card width, kept as-is */
  margin: 18px auto !important;                /* plugin default vertical rhythm, centred */
  padding: clamp(24px, 3.2vw, 44px) !important;
  border: 0 !important;
  border-top: 3px solid var(--tal-bk-accent) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-family: var(--tal-bk-font-body) !important;
  font-size: 0.9375rem;
}

.tal-page .acb.acb--booting .acb__bootOverlay { border-radius: 0; }

/* ---- Header ------------------------------------------------------------ */
.tal-page .acb .acb__header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px 24px;
  margin: 0 0 24px;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--tal-bk-border);
}

.tal-page .acb .acb__header h2 {
  margin: 0 !important;
  color: var(--tal-bk-ink) !important;
  font-family: var(--tal-bk-font-display) !important;
  font-size: 0.8125rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  line-height: 1.3 !important;
  text-transform: uppercase;
}

.tal-page .acb .acb__header .acb__sub {
  margin: 0;
  color: var(--tal-bk-text-3) !important;
  font-size: 0.8125rem !important;
  line-height: 1.5;
}

/* ---- Step rail --------------------------------------------------------- */
.tal-page .acb .acb__steps {
  gap: 0 22px;
  margin: 0 0 28px;
  border-bottom: 1px solid var(--tal-bk-border);
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__step {
  position: relative;
  margin: 0 0 -1px;
  padding: 0 0 12px !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tal-bk-text-3) !important;
  font-family: var(--tal-bk-font-display) !important;
  font-size: 0.6875rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__step:hover {
  color: var(--tal-bk-ink) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__step.is-active,
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__step--active {
  background: transparent !important;
  border-bottom-color: var(--tal-bk-accent) !important;
  color: var(--tal-bk-ink) !important;
}

/* ---- Labels ------------------------------------------------------------ */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) label:not(.acb-sr-only):not(.acb-time-caption):not(:has(input[type="checkbox"], input[type="radio"])),
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__label {
  margin-bottom: 8px;
  color: var(--tal-bk-text-2) !important;
  font-family: var(--tal-bk-font-display);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ---- Inputs ------------------------------------------------------------ */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select, textarea) {
  min-height: 48px;
  padding: 12px 14px !important;
  border: 1px solid var(--tal-bk-border-strong) !important;
  border-radius: var(--tal-bk-radius-1) !important;
  box-shadow: none !important;
  font-family: var(--tal-bk-font-body) !important;
  font-size: 0.9375rem !important;
  transition: border-color 0.15s ease, outline-color 0.15s ease;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select, textarea):hover {
  border-color: var(--tal-bk-accent) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="hidden"], [type="submit"], [type="button"]), select, textarea):focus {
  border-color: var(--tal-bk-accent) !important;
  outline: 3px solid var(--tal-bk-accent-tint);
  outline-offset: 0;
}

.tal-page .acb :is(input[type="checkbox"], input[type="radio"]) {
  accent-color: var(--tal-bk-accent);
}

/* ---- Option cards -> one joined segmented control ----------------------
   The plugin JS writes an inline grid-template-columns (4 cols for "mode"),
   which leaves empty cells when fewer options exist. Flex ignores it and
   divides the row evenly for any option count. */
.tal-page .acb .acb__optionCards {
  display: flex;
  flex-wrap: nowrap;
  gap: 0 !important;
  border: 1px solid var(--tal-bk-border-strong);
  border-radius: var(--tal-bk-radius-1);
  overflow: hidden;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__optionCard {
  flex: 1 1 0;
  min-width: 0;
  min-height: 48px !important;
  padding: 10px 8px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--tal-bk-text-2) !important;
  font-family: var(--tal-bk-font-body) !important;
  font-size: 0.875rem !important;
  font-weight: 600 !important;
  line-height: 1.25;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__optionCard + .acb__optionCard {
  border-left: 1px solid var(--tal-bk-border-strong) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__optionCard:hover {
  background: var(--tal-bk-bg-hover) !important;
  color: var(--tal-bk-ink) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__optionCard:is(.is-active, .is-selected, [aria-checked="true"]) {
  background: var(--tal-bk-accent) !important;
  color: var(--tal-bk-on-ink) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__optionCard:is(.is-active, .is-selected, [aria-checked="true"]) * {
  color: inherit !important;
}

/* ---- Waypoints / stops + map ------------------------------------------- */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__waypoints, .acb__detour-box, .acb__stops-box) {
  padding: 16px 18px;
  background: var(--tal-bk-bg) !important;
  border: 0 !important;
  border-left: 2px solid var(--tal-bk-accent) !important;
  border-radius: 0 !important;
}

.tal-page .acb .acb__map {
  border-radius: 0;
  border-color: var(--tal-bk-border-strong);
  background: var(--tal-bk-bg);
}

/* ---- Buttons ----------------------------------------------------------- */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn {
  min-height: 40px;
  padding: 10px 16px !important;
  background: transparent !important;
  border: 1px solid var(--tal-bk-border-strong) !important;
  border-radius: var(--tal-bk-radius-1) !important;
  box-shadow: none !important;
  color: var(--tal-bk-ink) !important;
  font-family: var(--tal-bk-font-display) !important;
  font-size: 0.6875rem !important;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn:hover {
  background: var(--tal-bk-bg-hover) !important;
  border-color: var(--tal-bk-accent) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn--primary,
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn[data-next] {
  min-width: 168px;
  min-height: 52px;
  padding: 0 24px !important;
  background: var(--tal-bk-accent) !important;
  border-color: var(--tal-bk-accent) !important;
  color: var(--tal-bk-on-ink) !important;
  font-size: 0.75rem !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn--primary:hover,
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn[data-next]:hover {
  background: var(--tal-bk-accent) !important;
  border-color: var(--tal-bk-accent) !important;
  color: var(--tal-bk-on-ink) !important;
  opacity: 0.88;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn.acb__btn--link {
  min-height: 0;
  min-width: 0;
  padding: 6px 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--tal-bk-ink) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn.acb__btn--link:hover {
  background: transparent !important;
  color: var(--tal-bk-accent) !important;
}

.tal-page .acb .acb__actions[data-acb-part="nav-actions"] {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--tal-bk-border);
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__ctaBtn {
  background: var(--tal-bk-accent) !important;
  color: var(--tal-bk-on-ink) !important;
  border-radius: var(--tal-bk-radius-1);
}

/* ---- Later-step tiles: vehicle / extras / payment / fallback ----------- */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__vehicle, .acb__extraCard, .acb__fallbackCard, .acb__success) {
  background: var(--tal-bk-bg) !important;
  border: 1px solid var(--tal-bk-border-strong) !important;
  border-radius: var(--tal-bk-radius-2) !important;
  box-shadow: none !important;
  color: var(--acb-text) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__payCard {
  border: 1px solid var(--tal-bk-border-strong) !important;
  border-radius: var(--tal-bk-radius-2) !important;
  box-shadow: none !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__vehicle, .acb__extraCard):hover {
  background: var(--tal-bk-bg-hover) !important;
  border-color: var(--tal-bk-accent) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__vehicle, .acb__extraCard, .acb__payCard).is-selected {
  border-color: var(--tal-bk-accent) !important;
  box-shadow: inset 0 0 0 1px var(--tal-bk-accent) !important;   /* 2px accent edge, no layout shift */
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__extraSelect {
  border-radius: var(--tal-bk-radius-1);
  background: transparent !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__extraCheck:checked + .acb__extraSelect {
  background: var(--tal-bk-accent) !important;
  border-color: var(--tal-bk-accent) !important;
  color: var(--tal-bk-on-ink) !important;
}

.tal-page .acb .acb__mixSummary { border-radius: var(--tal-bk-radius-2) !important; background: var(--tal-bk-bg); }

/* ---- Steppers, quantity controls, notices ------------------------------
   The plugin writes inline styles on some of these (border/background with
   !important) which CSS cannot override; radii and the rest can be matched. */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__qtyBtn, .acb__stepBtn, .acb__qtyDisplay, .acb__extraAllocQty) {
  border-radius: var(--tal-bk-radius-1) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__vfStepper {
  border: 1px solid var(--tal-bk-border-strong);
  border-radius: var(--tal-bk-radius-1);
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__vfStepper .acb__vfBtn {
  width: 48px;
  height: 46px;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: var(--acb-text) !important;
  font-family: var(--tal-bk-font-body) !important;
  font-size: 1.125rem;
  line-height: 1;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__vfStepper .acb__vfBtn:hover {
  background: var(--tal-bk-bg-hover) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__vfStepper .acb__vfInput {
  min-height: 46px;
  padding: 0 !important;
  border: 0 !important;
  border-left: 1px solid var(--tal-bk-border) !important;
  border-right: 1px solid var(--tal-bk-border) !important;
  border-radius: 0 !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__notice {
  border-radius: var(--tal-bk-radius-1);
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__notice[data-quote-notice] {
  border-radius: var(--tal-bk-radius-1);
  background: var(--tal-bk-bg);
}


/* ---- Checkout: gratuity, coupon, payment ------------------------------- */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__gratuity {
  background: var(--tal-bk-bg) !important;
  border: 1px solid var(--tal-bk-border) !important;
  border-radius: var(--tal-bk-radius-2) !important;
  box-shadow: none !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__gratuityChoice, .acb__gratuityMode) {
  background: transparent !important;
  border: 1px solid var(--tal-bk-border-strong) !important;
  border-radius: var(--tal-bk-radius-1) !important;
  box-shadow: none !important;
  color: var(--acb-text) !important;
  font-family: var(--tal-bk-font-body) !important;
  cursor: pointer;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__gratuityChoice, .acb__gratuityMode):hover {
  background: var(--tal-bk-bg-hover) !important;
  border-color: var(--tal-bk-accent) !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__gratuityChoice, .acb__gratuityMode).is-selected {
  background: var(--tal-bk-accent) !important;
  border-color: var(--tal-bk-accent) !important;
  color: var(--tal-bk-on-ink) !important;
}

/* Child spans inside these buttons carry the plugin's own dark text colour */
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) :is(.acb__gratuityChoice, .acb__gratuityMode) * {
  color: inherit !important;
}

.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__payTick { background: var(--tal-bk-accent) !important; color: var(--tal-bk-on-ink) !important; }
.tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__couponStatus:empty { display: none; }
.tal-page .acb :is(.acb__extraImg, .acb__vehicleImg) { border-radius: var(--tal-bk-radius-2); }

/* ---- Keyboard focus ring (Astra/themes strip outlines globally) -------- */
.tal-page .acb :is(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--tal-bk-accent) !important;
  outline-offset: 2px;
}

/* ---- Mobile ------------------------------------------------------------ */
@media (max-width: 640px) {
  .tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) {
    padding: 24px var(--tal-gutter, 20px) 28px !important;
  }

  .tal-page .acb .acb__steps {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .tal-page .acb .acb__steps::-webkit-scrollbar { display: none; }

  .tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__step {
    flex: none;
    white-space: nowrap;
    min-height: 44px;
    padding-top: 10px !important;
  }

  .tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn--primary,
  .tal-page .acb[class*="acb-theme-"]:not(.acb-theme-default) .acb__btn[data-next] {
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tal-page .acb * { transition: none !important; }
}