/* ==========================================================================
   Fox Bus Quote Engine — guided form styles (Midnight Command, dark card).
   A self-contained dark navy card that reads as a deliberate panel on any
   background (the dark hero or a light page). Uses the theme's design tokens
   when present and falls back to the Midnight Command palette so the form also
   looks right on other themes.
   ========================================================================== */

/* Design tokens shared by every Fox Bus form context: the guided quote card
   (.fqe) PLUS the standalone callback + subscribe forms that render OUTSIDE it
   (final CTA, service pages, trust hub). Scoping these to .fqe alone left those
   forms' inputs with unresolved variables — transparent background and no
   border — i.e. invisible on a dark section. */
.fqe, .fqe-callback, .fqe-subscribe {
	--fqe-navy: var(--navy, #0B1629);
	--fqe-navy-700: var(--navy-700, #132339);
	--fqe-amber: var(--amber, #F59E0B);
	--fqe-amber-600: var(--amber-600, #d98704);

	/* Dark-card surfaces + ink. */
	--fqe-card: var(--navy-700, #132339);   /* the card itself (lifted navy) */
	--fqe-inset: var(--navy, #0B1629);      /* inputs + nested panels (darker) */
	--fqe-heading: #F6F9FC;
	--fqe-text: #C7D2E0;
	--fqe-muted: #94A3B8;
	--fqe-line: rgba(255,255,255,.12);
	--fqe-line-strong: rgba(255,255,255,.18);
	--fqe-amber-tint: rgba(245,158,11,.12);
	--fqe-amber-line: rgba(245,158,11,.26);

	--fqe-error: #fca5a5;
	--fqe-error-line: rgba(239,68,68,.55);
	--fqe-error-bg: rgba(239,68,68,.10);
	--fqe-success: #34d399;

	--fqe-r: var(--r, 14px);
	--fqe-r-sm: var(--r-sm, 8px);
	--fqe-r-lg: var(--r-lg, 20px);
	--fqe-font-display: var(--font-display, 'Sora', system-ui, sans-serif);
	--fqe-font-body: var(--font-body, 'Manrope', system-ui, sans-serif);

	/* Render native date/time pickers, option lists and scrollbars dark. */
	color-scheme: dark;
}

.fqe {
	position: relative;
	background: var(--fqe-card);
	color: var(--fqe-text);
	border: 1px solid var(--fqe-amber-line);
	border-radius: var(--fqe-r-lg);
	box-shadow: 0 24px 60px rgba(0,0,0,.35);
	padding: clamp(1.25rem, 3vw, 2rem);
	font-family: var(--fqe-font-body);
}
/* Hero placement: a light "white card" treatment (matches the homepage hero
   mock). Structure + behaviour are untouched — only the surface palette flips,
   driven through the design tokens above, plus a few targeted fixes for values
   that were hard-coded for the dark card (progress track, stepper, select
   chevron, error ink). Scoped to .hero so the same form stays a deliberate dark
   panel on the contact / service / pricing pages. */
.hero .fqe {
	--fqe-card: #ffffff;                 /* the card → white paper */
	--fqe-inset: #f2f5fb;                /* inputs + nested panels → faint bone */
	--fqe-heading: #0B1629;              /* navy ink */
	--fqe-text: #33415a;                 /* body ink (labels, values) */
	--fqe-muted: #64748b;                /* muted slate */
	--fqe-line: #e6ebf2;                 /* hairlines */
	--fqe-line-strong: #cbd5e1;          /* input / control borders */
	--fqe-amber-line: rgba(245,158,11,.30);
	--fqe-error: #dc2626;                /* readable red on white */

	color-scheme: light;                 /* native date/time + option lists render light */
	border-color: #e6ebf2;               /* soft neutral edge (the shadow does the lifting) */
	box-shadow: 0 40px 80px -30px rgba(11,22,41,.45);
}
/* Tints that were white-on-dark need a dark-on-light flip so they stay visible. */
.hero .fqe .fqe__progress-track { background: rgba(11,22,41,.10); }
.hero .fqe .stepper__btn { background: rgba(11,22,41,.05); }
.hero .fqe .stepper__btn:hover { background: rgba(11,22,41,.10); }
.hero .fqe .btn--ghost:hover { background: rgba(11,22,41,.05); }
/* Select chevron: swap the light-grey glyph for a slate one so it shows on white. */
.hero .fqe .fqe-field__select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

.fqe *, .fqe *::before, .fqe *::after { box-sizing: border-box; }
.fqe ::placeholder { color: var(--fqe-muted); opacity: 1; }
.fqe__noscript { background: rgba(245,158,11,.10); border: 1px solid var(--fqe-amber-line); color: var(--fqe-text); padding: .75rem 1rem; border-radius: var(--fqe-r-sm); font-size: .9rem; }

/* Header ------------------------------------------------------------------ */
.fqe__header { margin-bottom: 1.25rem; }
.fqe__header-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.fqe__title { font-family: var(--fqe-font-display); font-size: 1.5rem; font-weight: 800; color: var(--fqe-heading); margin: 0 0 .25rem; }
.fqe__lead { color: var(--fqe-text); margin: 0; font-size: .98rem; }

/* Reference chip (top-right of the header). */
.fqe__ref { margin: 0; text-align: right; display: grid; gap: .25rem; justify-items: end; }
.fqe__ref-label { font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; color: var(--fqe-muted); }
.fqe__ref-code {
	display: inline-block; font-family: var(--fqe-font-display); font-weight: 800; letter-spacing: .06em;
	font-size: .95rem; color: var(--fqe-amber); background: var(--fqe-amber-tint);
	border: 1px solid var(--fqe-amber-line); border-radius: 999px; padding: .2rem .7rem; white-space: nowrap;
}
@media (max-width: 480px) {
	.fqe__header-top { flex-direction: column; }
	.fqe__ref { text-align: left; justify-items: start; }
}

/* Progress bar (thin filled track + "Step X of Y"). */
.fqe__progress { display: flex; align-items: center; gap: .85rem; }
.fqe__progress-track { flex: 1 1 auto; height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.fqe__progress-fill { display: block; height: 100%; width: 25%; border-radius: 999px; background: var(--fqe-amber); transition: width .3s ease; }
.fqe__stepcount { flex: 0 0 auto; font-size: .78rem; font-weight: 700; color: var(--fqe-amber); margin: 0; white-space: nowrap; }

/* Steps ------------------------------------------------------------------- */
.fqe-step { display: none; }
.fqe-step.is-active { display: block; animation: fqe-fade .2s ease; }
.fqe-step[hidden] { display: none; }
@keyframes fqe-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.fqe-step__title { font-family: var(--fqe-font-display); font-size: 1.2rem; color: var(--fqe-heading); margin: 0 0 1rem; }
.fqe-step__nav { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.5rem; }
/* Long service CTAs ("Get a shuttle-loop plan and quote") must wrap inside a
   full-width button on phones rather than overflow it (theme .btn is nowrap). */
.fqe-step__nav .btn { white-space: normal; text-align: center; }
.fqe-step__nav .btn--amber { margin-left: auto; }
.fqe-step__nav .btn--block { margin-left: 0; }
/* Narrow phones: stack the nav, primary action on top, both full-width so the
   long "Continue to …" label never overflows. */
@media (max-width: 400px) {
	.fqe-step__nav { flex-direction: column-reverse; }
	.fqe-step__nav .btn { width: 100%; margin-left: 0; }
}

/* Dark-card button treatment for the ghost "Back" (theme .btn--ghost is dark ink). */
.fqe .btn--ghost { color: var(--fqe-heading); border-color: var(--fqe-line-strong); background: transparent; }
.fqe .btn--ghost:hover { background: rgba(255,255,255,.06); border-color: var(--fqe-heading); color: var(--fqe-heading); }

/* Fields ------------------------------------------------------------------ */
.fqe-field { display: grid; gap: .35rem; margin-bottom: 1rem; }
.fqe-field__label { font-weight: 600; font-size: .95rem; color: var(--fqe-text); }
.fqe-field__input, .fqe-field__select {
	width: 100%; min-width: 0; max-width: 100%; min-height: 48px; padding: .65rem .85rem; font: inherit; color: var(--fqe-heading);
	background: var(--fqe-inset); border: 1.5px solid var(--fqe-line-strong); border-radius: var(--fqe-r-sm);
}
.fqe-field__input:focus, .fqe-field__select:focus { outline: 3px solid var(--fqe-amber); outline-offset: 2px; border-color: var(--fqe-amber); }
textarea.fqe-field__input { min-height: auto; resize: vertical; }
.fqe-field__select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C7D2E0' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .85rem center; padding-right: 2.4rem; }
.fqe-field [aria-invalid="true"], .fqe-field__input[aria-invalid="true"], .fqe-field__select[aria-invalid="true"] { border-color: var(--fqe-error-line); background: var(--fqe-error-bg); }
.fqe-field__error { color: var(--fqe-error); font-size: .85rem; margin: .1rem 0 0; display: flex; gap: .35rem; align-items: flex-start; }
.fqe-field__error::before { content: "!"; flex: 0 0 auto; width: 16px; height: 16px; background: var(--fqe-error-line); color: #fff; border-radius: 50%; font-size: .72rem; font-weight: 700; display: inline-grid; place-items: center; margin-top: 1px; }

.fqe-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; align-items: start; }
.fqe-row > * { min-width: 0; }
/* Two-up fields (e.g. Travel date / Pickup time) stack on phones so the native
   date/time pickers never overflow the card. */
@media (max-width: 520px) { .fqe-row { grid-template-columns: 1fr; } }
.fqe-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; padding: .35rem 0; font-size: .9rem; color: var(--fqe-text); margin-top: .1rem; cursor: pointer; }
.fqe-check input[type="checkbox"] { width: 22px; height: 22px; flex: 0 0 auto; accent-color: var(--fqe-amber); }
.fqe-check--flex { font-weight: 600; color: var(--fqe-heading); }
.fqe-hint { background: var(--fqe-inset); border: 1px solid var(--fqe-line); border-radius: var(--fqe-r-sm); padding: .6rem .85rem; font-size: .88rem; color: var(--fqe-text); margin: .5rem 0 0; }
.fqe-conditional { border-left: 3px solid var(--fqe-amber); padding-left: 1rem; margin: 0 0 1rem; }

/* Segmented control ------------------------------------------------------- */
.fqe-seg { border: 0; margin: 0 0 1rem; padding: 0; }
.fqe-seg__group { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .35rem; background: var(--fqe-inset); padding: .3rem; border: 1px solid var(--fqe-line); border-radius: var(--fqe-r-sm); }
.fqe-seg__opt { position: relative; }
.fqe-seg__opt input { position: absolute; opacity: 0; width: 0; height: 0; }
.fqe-seg__label { display: grid; place-items: center; text-align: center; padding: .6rem .5rem; border-radius: 6px; font-size: .9rem; font-weight: 600; color: var(--fqe-text); cursor: pointer; min-height: 44px; }
.fqe-seg__opt input:checked + .fqe-seg__label { background: var(--fqe-amber); color: var(--fqe-navy); font-weight: 700; box-shadow: 0 1px 3px rgba(0,0,0,.35); }
.fqe-seg__opt input:focus-visible + .fqe-seg__label { outline: 3px solid var(--fqe-amber); outline-offset: 2px; }
@media (max-width: 520px) {
	.fqe-seg__group { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: 1fr 1fr; }
	/* A lone 3rd (odd, last) option spans both columns rather than leaving a gap. */
	.fqe-seg__group > .fqe-seg__opt:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* Purpose cards ----------------------------------------------------------- */
.fqe-cards { border: 0; margin: 0 0 1rem; padding: 0; }
.fqe-cards__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; margin-top: .5rem; }
.fqe-cards__opt input { position: absolute; opacity: 0; }
.fqe-cards__opt span { display: grid; place-items: center; min-height: 46px; border: 1.5px solid var(--fqe-line-strong); border-radius: var(--fqe-r-sm); font-size: .88rem; font-weight: 600; color: var(--fqe-text); cursor: pointer; background: var(--fqe-inset); text-align: center; }
.fqe-cards__opt input:checked + span { border-color: var(--fqe-amber); background: var(--fqe-amber-tint); color: var(--fqe-heading); }
.fqe-cards__opt input:focus-visible + span { outline: 3px solid var(--fqe-amber); outline-offset: 2px; }
@media (max-width: 560px) { .fqe-cards__grid { grid-template-columns: repeat(2, 1fr); } }

/* Stops ------------------------------------------------------------------- */
.fqe-stops { margin-bottom: 1rem; }
.fqe-stops__row { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.fqe-stops__row .fqe-field__input { flex: 1; margin: 0; }
.fqe-stops__remove { flex: 0 0 auto; width: 44px; height: 44px; border: 1.5px solid var(--fqe-line-strong); background: var(--fqe-inset); border-radius: var(--fqe-r-sm); font-size: 1.3rem; line-height: 1; cursor: pointer; color: var(--fqe-muted); }
.fqe-stops__remove:hover { border-color: var(--fqe-error-line); color: var(--fqe-error); }
.fqe-link-btn { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; color: var(--fqe-amber); font-family: var(--fqe-font-display); font-weight: 700; font-size: .95rem; cursor: pointer; padding: .5rem .1rem; }
.fqe-link-btn:hover { color: var(--fqe-heading); text-decoration: underline; }
.fqe-complex { margin: 1rem 0 0; }

/* Steppers (self-contained) ---------------------------------------------- */
.fqe .stepper { display: inline-flex; border: 1.5px solid var(--fqe-line-strong); border-radius: var(--fqe-r-sm); overflow: hidden; background: var(--fqe-inset); max-width: 200px; }
.fqe .stepper__btn { width: 48px; border: 0; background: rgba(255,255,255,.06); font-size: 1.4rem; cursor: pointer; color: var(--fqe-amber); }
.fqe .stepper__btn:hover { background: rgba(255,255,255,.12); }
.fqe .stepper__input { border: 0; background: transparent; color: var(--fqe-heading); text-align: center; width: 80px; min-height: 46px; font: inherit; font-weight: 700; -moz-appearance: textfield; }
.fqe .stepper__input::-webkit-outer-spin-button, .fqe .stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Recommendation ---------------------------------------------------------- */
.fqe-reco { margin: 1rem 0; }
.fqe-reco__card { background: var(--fqe-amber-tint); border: 1px solid var(--fqe-amber-line); color: var(--fqe-heading); border-radius: var(--fqe-r); padding: 1.25rem 1.4rem; }
.fqe-reco__label { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--fqe-amber); margin-bottom: .35rem; font-weight: 700; }
.fqe-reco__name { font-family: var(--fqe-font-display); font-size: 1.25rem; color: var(--fqe-heading); }
.fqe-reco__why { color: var(--fqe-text); font-size: .92rem; margin: .4rem 0 .85rem; }
.fqe-reco__actions { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.fqe-reco__actions .fqe-link-btn { color: var(--fqe-amber); }

/* Review summary ---------------------------------------------------------- */
.fqe-summary { background: var(--fqe-inset); border: 1px solid var(--fqe-line); border-radius: var(--fqe-r); padding: .35rem 1.1rem; margin-bottom: 1.25rem; }
.fqe-summary__list { margin: 0; }
.fqe-summary__row { display: flex; justify-content: space-between; gap: 1rem; padding: .7rem 0; border-bottom: 1px solid var(--fqe-line); }
.fqe-summary__row:last-child { border-bottom: 0; }
.fqe-summary__row dt { color: var(--fqe-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; margin: 0; flex: 0 0 40%; }
.fqe-summary__row dd { margin: 0; text-align: right; font-weight: 600; color: var(--fqe-heading); }
.fqe-summary__edit { display: inline-flex; align-items: center; min-height: 44px; background: none; border: 0; color: var(--fqe-amber); font-size: .82rem; cursor: pointer; margin-left: .35rem; padding: .35rem .4rem; text-decoration: underline; }
.fqe-reassure { list-style: none; margin: 0 0 1rem; padding: 1rem 1.25rem; background: var(--fqe-inset); border: 1px solid var(--fqe-line); border-radius: var(--fqe-r-sm); display: grid; gap: .4rem; }
.fqe-reassure li { display: flex; gap: .5rem; font-size: .9rem; color: var(--fqe-text); }
.fqe-reassure li::before { content: "✓"; color: var(--fqe-success); font-weight: 700; }

/* Error summary ----------------------------------------------------------- */
.fqe__errors { background: var(--fqe-error-bg); border: 1.5px solid var(--fqe-error-line); border-radius: var(--fqe-r-sm); padding: 1rem 1.25rem; margin-bottom: 1.25rem; }
.fqe__errors-title { color: var(--fqe-error); font-size: 1rem; margin: 0 0 .5rem; }
.fqe__errors ul { margin: 0; padding-left: 1.1rem; }
.fqe__errors a { color: var(--fqe-error); }

/* Honeypot ---------------------------------------------------------------- */
.fqe-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Success ----------------------------------------------------------------- */
.fqe-success { text-align: center; }
.fqe-success__badge { width: 56px; height: 56px; border-radius: 50%; background: rgba(52,211,153,.14); border: 2px solid var(--fqe-success); color: var(--fqe-success); font-size: 1.8rem; display: grid; place-items: center; margin: 0 auto 1rem; }
.fqe-success__title { font-family: var(--fqe-font-display); font-size: 1.6rem; color: var(--fqe-heading); }
.fqe-success__ref { color: var(--fqe-text); }
.fqe-ref-tag { display: inline-block; font-family: var(--fqe-font-display); font-weight: 800; letter-spacing: .06em; color: var(--fqe-amber); background: var(--fqe-amber-tint); border: 1px solid var(--fqe-amber-line); border-radius: 999px; padding: .18rem .7rem; }
.fqe-success .fqe-summary__list { text-align: left; margin-top: 1rem; }
.fqe-success .fqe-summary__row dd { text-align: right; }
.fqe-success__subtitle { font-family: var(--fqe-font-display); font-size: 1.1rem; color: var(--fqe-heading); margin: 1.25rem 0 .5rem; }
.fqe-success__steps { text-align: left; color: var(--fqe-text); padding-left: 1.2rem; }
.fqe-success__resp { color: var(--fqe-amber); font-weight: 600; }
.fqe-success__actions { margin-top: 1rem; }

/* Callback ---------------------------------------------------------------- */
.fqe-callback__form { background: var(--fqe-card); border: 1px solid var(--fqe-amber-line); color: var(--fqe-heading); border-radius: var(--fqe-r); padding: 1.5rem; font-family: var(--fqe-font-body); }
.fqe-callback__title { color: var(--fqe-heading); font-family: var(--fqe-font-display); font-size: 1.2rem; margin: 0 0 1rem; }
.fqe-callback .fqe-field__label { color: var(--fqe-text); }
.fqe-callback__result { margin-top: .75rem; font-size: .9rem; }
.fqe-callback__result.is-error { color: var(--fqe-error); }
.fqe-callback__done { color: var(--fqe-heading); text-align: center; padding: 1rem; }

/* No-JS: show all steps stacked, hide progress + step-nav chrome ---------- */
.fqe:not(.fqe--enhanced) .fqe-step { display: block; border-top: 1px solid var(--fqe-line); padding-top: 1.25rem; margin-top: 1.25rem; }
.fqe:not(.fqe--enhanced) .fqe-step[hidden] { display: block; }
.fqe:not(.fqe--enhanced) .fqe__progress, .fqe:not(.fqe--enhanced) .fqe__ref, .fqe:not(.fqe--enhanced) [data-back], .fqe:not(.fqe--enhanced) [data-next] { display: none; }