/*
 * Auspicious Journeys website: booking widget behaviour, chat panel, enquiry forms, the chauffeur
 * application and the demo drawer (W-book). Tokens only (no hex), no pills, sentence case, no uppercase labels.
 * Sections: 1 widget . 2 address list . 10 chat . 11 form states . 12 chat guest counter . 14 demo drawer . 15 bars and motion
 * . 16 the booking card. The /book/ checkout (its shell, steps, sheets and confirmation) lives in pages/book.css (P9).
 */

/* ============================== 1. Widget (extras the widget module adds) ============================== */
.widget .wfield { position: relative; }
.widget .wf-line { margin-top: 6px; }
.widget .wf-line .tag { margin-left: 6px; }
.flight-line > span { min-width: 0; }
.widget .wf-swap { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; min-height: 32px; margin-top: 2px; padding: 0; border: 0; background: none; color: var(--link); font: inherit; font-size: 14px; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; }
.widget .wf-swap .icon { margin: 0; }
.widget .wf-suggest { color: var(--text); font-weight: 500; }
.widget .wf-select { height: 30px; padding: 0 28px 0 0; border: 0; border-radius: 0; background: transparent; font-size: 17px; font-weight: 500; }
.widget .wf-select:focus-visible { outline: none; }
.widget .wfield .select-wrap::after { right: 4px; }
.widget .wf-chips { margin-top: 8px; }
.widget .wf-chips .chip { height: 36px; font-size: 14px; }
.widget .wf-plan .textarea { min-height: 64px; padding: 6px 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; resize: none; }
.widget .wf-plan .textarea:focus-visible { outline: none; }
.widget-notes { display: grid; gap: 8px; padding: 12px 16px 4px; }
.widget-notes[hidden] { display: none; }
.widget-note { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 4px 8px; font-size: 14px; line-height: 1.45; color: var(--text); }
.widget-note > .icon { margin-top: 2px; color: var(--text-2); }
.widget-note > span { flex: 1 1 200px; min-width: 0; }
.widget-note .btn-link { font-size: 14px; }
.widget-hello .tag { flex: none; margin-top: 1px; }
.widget-error { margin: 12px 16px 0; }
.widget-stops { padding: 8px 16px 12px; border-bottom: 1px solid var(--line); }
.widget-stops-title { font-size: 13px; font-weight: 500; color: var(--text-2); padding: 4px 0; }
.widget-stop-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.widget-stop { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 8px; align-items: start; border: 1px solid var(--line); border-radius: var(--r-2); }
.widget-stop .wfield { border-bottom: 0; padding: 8px 12px; }
.widget-stop .wf-wait { grid-column: 1; border-top: 1px solid var(--line); }
.widget-stop > .btn-icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
@media (min-width: 1024px) {
  .widget-notes { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); padding: 12px 18px 0; border-top: 1px solid var(--line); }
  .widget.is-docked .wf-chips { display: none; }
  .widget-stop { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto; }
  .widget-stop .wf-wait { grid-column: 2; grid-row: 1; border-top: 0; border-left: 1px solid var(--line); }
  .widget-stop > .btn-icon { grid-column: 3; grid-row: 1; }
  .widget.is-docked .wfield .wf-swap { font-size: 13px; }
}
/* ============================== 2. Address suggestions ============================== */
.field:has(> .addr-list) { position: relative; }
.addr-list {
  position: absolute; z-index: var(--z-sheet); left: 0; right: 0; top: calc(100% + 4px);
  list-style: none; margin: 0; padding: 6px;
  background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-float);
  max-height: min(340px, 52vh); overflow-y: auto; overscroll-behavior: contain;
  animation: aj-pop-in var(--dur-2) var(--ease-out);
}
.wfield > .addr-list { left: -1px; right: -1px; top: 100%; }
@media (min-width: 1024px) { .widget.is-docked .wfield > .addr-list { right: auto; width: max(100%, 340px); } }
.addr-head { padding: 8px 10px 4px; font-size: 13px; font-weight: 500; color: var(--text-2); }
.addr-opt { display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px; border-radius: var(--r-2); cursor: pointer; }
.addr-opt:hover, .addr-opt[aria-selected="true"] { background: var(--select); }
.addr-ic { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: var(--r-1); background: var(--sunken); color: var(--ink-2); margin-top: 1px; }
.addr-tx { display: grid; gap: 1px; min-width: 0; }
.addr-name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.addr-sub { font-size: 13px; color: var(--text-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.addr-empty { padding: 10px; font-size: 14px; color: var(--text-2); }

/* ============================== 10. Chat panel ============================== */
.chat-panel {
  position: fixed; z-index: calc(var(--z-sheet) + 1); inset: 0;
  display: flex; flex-direction: column;
  background: var(--porcelain); color: var(--ink);
  visibility: hidden; transform: translateY(100%);
  transition: transform 200ms var(--ease-in), visibility 0s linear 200ms;
}
.chat-panel.is-open { visibility: visible; transform: none; transition: transform var(--dur-3) var(--ease-out), visibility 0s; }
.chat-panel:focus { outline: none; }
@media (min-width: 1024px) {
  .chat-panel { inset: auto 24px 24px auto; width: 400px; height: min(600px, calc(100dvh - 48px)); border: 1px solid var(--line); border-radius: var(--r-3); box-shadow: var(--shadow-float); overflow: hidden; opacity: 0; transform: translateY(12px); transition: opacity 200ms var(--ease-in), transform 200ms var(--ease-in), visibility 0s linear 200ms; }
  .chat-panel.is-open { opacity: 1; transform: none; transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out), visibility 0s; }
  .chat-backdrop { display: none; }
}
.chat-head { flex: none; display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 6px 8px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.chat-head .mono-mark { width: 36px; height: 36px; }
.chat-head-text { flex: 1; min-width: 0; }
.chat-title { font-family: var(--font); font-weight: 600; letter-spacing: -0.015em; font-size: 1.5rem; line-height: 1.1; color: var(--green); }
.chat-sub { font-size: 13px; color: var(--text-2); }
.chat-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px; }
.chat-thread { padding: 16px 0 20px; }
.chat-thread .bubble-time { display: none; }
.chat-thread .bubble:hover .bubble-time, .chat-thread .bubble:focus-within .bubble-time { display: block; }
.chat-thread .sys-row { padding: 2px 8px; }
.chat-thread .sys-row.is-error { color: var(--danger-fg); }
.chat-foot { flex: none; padding: 6px 16px calc(8px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); }
.chat-chips { padding: 4px 0 6px; }
.chat-chips[hidden] { display: none; }
.chat-chips .chip { height: 40px; font-size: 14px; }
.chat-foot .composer { padding: 4px 0; }
.chat-foot .composer .textarea { font-size: 16px; }
.chat-rest { padding: 8px 0 4px; display: grid; gap: 10px; }
/* on phones the panel's heading takes focus on open (not the composer); it is a landmark, not a control */
.chat-title[tabindex="-1"]:focus { outline: none; }
.chat-rest-text { font-size: 15px; }
.chat-card { align-self: stretch; display: grid; gap: 8px; padding: 14px 16px; background: var(--paper); color: var(--ink); border: 1px solid var(--line); border-radius: var(--r-3); }
.qc-service { font-size: 13px; color: var(--text-2); }
.qc-route { font-size: 17px; font-weight: 600; line-height: 1.3; }
.qc-when { font-size: 14px; color: var(--text-2); }
.quote-card .price-lines { font-size: 14px; }
.quote-card .price-lines > div { padding: 6px 0; }
.quote-card .ledger-total dd { font-size: 17px; }
.qc-note { font-size: 14px; }
.qc-cancel { font-size: 13px; color: var(--text-2); }
.quote-card .btn-row .btn { flex: 1 1 auto; height: 44px; padding: 0 14px; font-size: 15px; }
.quote-card.is-expired .price-lines { opacity: .6; }
.live-card .chauffeur-card { padding-top: 4px; }
.lead-card .input-affix .input { min-width: 0; }
.lead-card .consent { margin: 0; }
/* the handoff: a live chat on WhatsApp first, then the email form */
.lead-card { gap: 12px; }
.lead-card .lead-wa { height: 48px; }
.lead-or { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--text-2); }
.lead-or::before, .lead-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.lead-form { display: grid; gap: 10px; }
.chat-rest .btn-row .btn { flex: 1 1 auto; }
.guests-card .est-row { border-bottom: 1px solid var(--line); }

/* ============================== 11. Form states (W-pages markup, behaviour in the site.js forms module) ============================== */
.consent { font-size: 14px; line-height: 1.45; color: var(--text-2); }
.consent a { color: var(--link); text-underline-offset: 3px; }
.form-error:not(.notice) { display: flex; align-items: flex-start; gap: 6px; color: var(--danger-fg); font-size: 14px; line-height: 1.4; }
.choice-group.is-invalid .check input, .choice-group.is-invalid .radio input { border-color: var(--danger-fg); }
.choice-group > .field-error { margin-top: 4px; }
.form-submit.is-loading { min-width: 200px; }
.form-error.notice { margin: 0; }

/* the chauffeur application, one step at a time */
.dr-form.is-stepped .dr-step { padding-top: 0; border-top: 0; }
.dr-form.is-stepped .form-steps-nav { padding-top: 20px; border-top: 1px solid var(--line); }
.dr-form .form-steps-nav.is-first { justify-content: flex-end; }
.dr-form .form-steps-nav .btn-strong { min-width: 160px; }
.dr-form .form-steps-nav.is-last { justify-content: flex-start; padding-top: 0; border-top: 0; }
.dr-steps .step[aria-current="step"] .step-title { color: var(--heading); }
.dr-summary.is-rich > div { display: grid; gap: 6px; padding: 14px 0; }
.dr-summary.is-rich dt { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-weight: 600; color: var(--text); }
.dr-summary.is-rich dt .btn-link { font-weight: 500; font-size: 15px; }
.dr-summary.is-rich dd { display: grid; gap: 2px; text-align: left; font-weight: 400; color: var(--text-2); font-size: 15px; line-height: 1.45; }

/* ============================== 12. Chat guest counter ============================== */
.est-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 60px; }
.est-row .label { font-size: 16px; font-weight: 500; color: var(--text); }

/* ============================== 14. Demo drawer ============================== */
.demo-drawer .sheet-body { padding-bottom: calc(24px + env(safe-area-inset-bottom)); }
.demo-h { margin: 24px 0 6px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.demo-people .row[aria-current="true"] { background: var(--select); }
.demo-people .row { padding-inline: 8px; }
.demo-switches { display: grid; }
.demo-switches .check { min-height: 52px; border-bottom: 1px solid var(--line); font-size: 15px; }
.demo-events { margin-top: 12px; }
.demo-open .row { padding-inline: 8px; }
.demo-reset { display: grid; gap: 8px; margin-top: 28px; }
.demo-link { font-size: 13px; color: var(--mist-2); font-weight: 500; }
.site-footer .demo-link:hover { color: var(--mist); }

/* ============================== 15. Bars and motion ============================== */
html.bar-off .action-bar, html.chat-on .action-bar, html.applying .action-bar { transform: translateY(110%) !important; }
html.chat-on .chat-launcher { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .chat-panel, .chat-panel.is-open { transition: opacity 100ms linear, visibility 0s; transform: none; }
  .addr-list { animation: none; }
}
@media print { .chat-panel { display: none !important; } }

/* flight lines: in the field on phones and the full widget, in the notes row on the docked desktop widget */
.note-flight { display: none; }
.note-flight.is-error { color: var(--danger-fg); }
.note-flight.is-error > .icon { color: var(--danger-fg); }
.widget .wf-pickup, .note-flight .wf-pickup { display: block; margin-top: 2px; color: var(--text-2); }
.flight-line .time-was { margin: 0 4px 0 0; }
.widget .wf-line .tag, .note-flight .tag { vertical-align: 1px; }
.wf-manual.is-soft .wf-swap { display: none; }
@media (min-width: 1024px) {
  .widget.is-docked .note-flight { display: flex; }
  .widget.is-docked .wf-line { display: none !important; }
  .widget.is-docked .wfield:has(input[name="flight"]) > .field-error { display: none; }
  .widget.is-docked .wfield:has(input[name="flight"]) .input[aria-invalid="true"] { color: var(--danger-fg); }
}
.chat-head { padding-top: calc(12px + env(safe-area-inset-top)); padding-bottom: 12px; }
.chat-title { padding-top: 2px; }
.dr-summary.is-rich > div { grid-template-columns: minmax(0, 1fr); justify-content: stretch; }
@media (max-width: 1023px) {
  .dr-steps { grid-auto-columns: minmax(0, 1fr); }
  .dr-steps .step-title { white-space: normal; line-height: 1.25; }
}

/* ============================== 16. The booking card (F3, SPEC 4.11) ==============================
 * _partials/booking-card.html inside .mh-panel: the stage's card and /book/'s .book-card. A paper card with the trip
 * tabs (one brand underline that slides, map-hero.js sets --tab-x and --tab-w), filled fields on a two-column grid, the
 * route rail (a vermilion dot at the pickup, an ink square at the drop-off, a hairline between), the fare, Continue.
 * Under 1024px (form data-sheet-below) it is the bottom sheet: the tabs, the two ends, the fare and Continue until the
 * grab handle, a drag or Continue opens it. The behaviour is site.js W.widget and map-hero.js. */
.aj-site .mh-panel {
  --text: var(--ink); --text-2: var(--ink-2); --text-3: var(--ink-3); --heading: var(--ink); --line: var(--hair); --edge: var(--field);
  --link: var(--ink); --focus: var(--vermilion); --inset: var(--sunken); --tab-bar: var(--brand);
  --line-strong: var(--ink); --fill-hover: var(--ink); --fill-hover-fg: var(--paper); --strong-btn-bg: initial; --strong-btn-fg: initial; --strong-btn-line: initial; --strong-btn-fill: initial;
  width: 100%; padding: 4px 16px 16px; background: var(--paper); color: var(--ink);
  border: 1px solid var(--float-line); border-radius: var(--r-3); box-shadow: var(--shadow-float);
  transition: transform 450ms var(--ease-out);
}
.mh-panel.is-dragging { transition: none; }
.mh-head { display: grid; }
.mh-grab { display: block; justify-self: center; width: 96px; height: 40px; margin: -4px 0 -8px; padding: 0; border: 0; background: transparent; cursor: grab; }
.mh-grab::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto; border-radius: var(--r-1); background: var(--hair); transition: background var(--dur-hover) var(--ease-out); }
.mh-grab:hover::before { background: var(--field); }

.mh-form.widget { border: 0; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); }
.mh-form fieldset.widget-fields { border: 0; margin: 0; padding: 0; min-width: 0; }
.mh-form .widget-top { display: flex; flex-direction: column; border-bottom: 0; }
/* the trip types: tabs with one underline */
.aj-site .mh-form .widget-modes { position: relative; display: flex; gap: 26px; padding: 0; border: 0; border-bottom: 1px solid var(--hair); border-radius: 0; background: transparent; overflow: visible; }
.aj-site .mh-form .widget-modes > button { flex: 0 0 auto; position: relative; min-width: 0; height: 48px; padding: 0; border: 0; background: transparent; color: var(--ink-2); font-size: var(--fs-btn, 15px); font-weight: 500; transition: color var(--dur-hover) var(--ease-out); }
.aj-site .mh-form .widget-modes > button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--tab-bar); transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--ease-out); }
.aj-site .mh-form .widget-modes > [aria-checked="true"] { background: transparent; color: var(--ink); box-shadow: none; }
.aj-site .mh-form .widget-modes > [aria-checked="true"]::after { transform: scaleX(1); }
.aj-site .mh-form .widget-modes > :hover:not([aria-checked="true"]) { background: transparent; color: var(--ink); }
.aj-site .mh-form .widget-modes > :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.aj-site .mh-form .widget-modes.has-bar > button::after { display: none; }
.aj-site .mh-form .widget-modes.has-bar::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 1px; height: 2px; background: var(--tab-bar); transform-origin: left; transform: translateX(var(--tab-x, 0)) scaleX(var(--tab-w, 0)); transition: transform 220ms var(--ease-out); }
/* arriving or departing (airport only) */
.mh-form .widget-dir { padding: 12px 0 0; border-top: 0; }
.mh-form .widget-dir[hidden] { display: none; }
.aj-site .mh-form .widget-dir .seg { display: flex; width: 100%; border: 1px solid var(--hair); border-radius: var(--r-1); background: transparent; }
.aj-site .mh-form .widget-dir .seg > button { flex: 1 1 0; height: 44px; padding: 0 10px; border: 0; background: transparent; color: var(--ink-2); font-size: 14px; font-weight: 500; gap: 8px; transition: color var(--dur-hover) var(--ease-out), background var(--dur-hover) var(--ease-out); }
.aj-site .mh-form .widget-dir .seg > button + button { border-left: 1px solid var(--hair); }
.aj-site .mh-form .widget-dir .seg > [aria-checked="true"] { background: var(--sunken); color: var(--ink); font-weight: 600; box-shadow: inset 0 0 0 1px var(--ink); }
.aj-site .mh-form .widget-dir .seg > :hover:not([aria-checked="true"]) { background: var(--sunken); color: var(--ink); }

/* the fields: filled boxes on a two-column grid */
.aj-site .mh-form .widget-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding-top: 14px; }
.aj-site .mh-form .widget-fields[hidden] { display: none; }
.mh-form .widget-fields > * { grid-column: 1 / -1; }
.mh-form .widget-fields > .wfield:has([data-picker="time"]) { grid-column: auto; }
.mh-form .widget-fields > .wfield:has([data-picker="date"]):has(+ .wfield:not([hidden]) [data-picker="time"]) { grid-column: auto; }
.aj-site .mh-form .wfield { position: relative; display: flex; flex-direction: column; gap: 2px; flex: none; min-height: 0; padding: 9px 14px 10px; border: 0; border-radius: var(--r-1); background: var(--sunken); transition: background var(--dur-hover) var(--ease-out); }
.aj-site .mh-form .wfield:hover { background: var(--select); }
.aj-site .mh-form .wfield .label { font-size: 13px; font-weight: 500; color: var(--ink-2); }
.mh-form .wfield .label .opt { font-weight: 400; }
.aj-site .mh-form .wfield .input, .aj-site .mh-form .wfield .wf-select { height: 28px; padding: 0; border: 0; border-radius: 0; background: transparent; font-size: 16px; font-weight: 500; color: var(--ink); }
.aj-site .mh-form .wfield .input::placeholder { color: var(--ink-3); opacity: 1; font-weight: 400; }
.mh-form .wfield .input:focus-visible { outline: none; }
.mh-form .wfield .input-wrap { position: relative; display: block; }
.mh-form .wfield .input-wrap.has-btn .input { padding-right: 36px; }
.mh-form .wfield .input-wrap .cal-btn { position: absolute; top: -8px; right: -10px; width: 44px; height: 44px; color: var(--ink-2); }
/* one focus ring at a time: the field rings while its own input has focus; a button inside keeps its own ring */
.mh-form .wfield:focus-within { box-shadow: none; }
.aj-site .mh-form .wfield:has(.input:focus-visible), .aj-site .mh-form .wfield:has(.select:focus-visible), .aj-site .mh-form .wfield:has(.wf-select:focus-visible) { box-shadow: inset 0 0 0 2px var(--focus); background: var(--paper); }
.aj-site .mh-form .wf-addstop { display: none; }
.aj-site .mh-form .wfield .hint:not(.wf-suggest) { display: none; }
/* the route rail */
.aj-site .mh-form .wfield.mh-from, .aj-site .mh-form .wfield.mh-to { padding-left: 38px; }
.mh-form .wfield.mh-from::before, .mh-form .wfield.mh-to::before { content: ""; position: absolute; left: 15px; top: 35px; width: 9px; height: 9px; }
.mh-form .wfield.mh-from::before { border-radius: 50%; background: var(--vermilion); }
.mh-form .wfield.mh-to::before { background: var(--ink); }
.mh-form .wfield.mh-from:has(+ .wfield.mh-to:not([hidden]))::after { content: ""; position: absolute; left: 19px; top: 48px; bottom: -9px; width: 1px; background: var(--field); }
.mh-form .wfield.mh-from:not([hidden]) + .wfield.mh-to::after { content: ""; position: absolute; left: 19px; top: 0; height: 31px; width: 1px; background: var(--field); }
/* guests, bags, hours */
.aj-site .mh-form .wfield-steppers { flex-direction: row; justify-content: flex-start; gap: 28px; padding: 6px 0 2px; background: transparent; }
.aj-site .mh-form .wfield-steppers:hover { background: transparent; }
.mh-form .wfield-steppers > div { display: flex; flex-direction: column; gap: 6px; position: relative; }
.aj-site .mh-form .wfield-steppers .stepper { gap: 6px; }
.aj-site .mh-form .wfield-steppers .stepper .btn-icon { width: 44px; min-width: 44px; height: 44px; border-radius: var(--r-1); }
.aj-site .mh-form .wfield-steppers .stepper output { min-width: 28px; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; }
/* notes and errors the widget adds above Continue */
.mh-form .widget-notes { grid-template-columns: minmax(0, 1fr); padding: 2px 2px 0; border-top: 0; }
.mh-form .widget-notes:not(:has(> :not(.sr-only))) { position: absolute; padding: 0; }
.mh-form .widget-error { margin: 0; }
.mh-form .widget-stops { padding: 0; border-bottom: 0; }
.mh-form.has-places .addr-list { display: none; }
/* the fare: the amount large and tabular, Estimate as a small tag */
.mh-fare { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-top: 6px; padding: 10px 2px 2px; border-top: 1px solid var(--hair); }
.mh-fare[hidden] { display: none; }
.mh-fare-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; min-width: 0; margin: 0; font-size: 1.75rem; font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; color: var(--ink); }
.mh-fare-from { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--ink-2); }
.aj-site .mh-fare-tag { align-self: center; padding: 3px 7px; border: 1px solid var(--hair); border-radius: var(--r-1); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0; color: var(--ink-2); }
.mh-fare-tag[hidden], .mh-fare-from[hidden] { display: none; }
.mh-fare-trip { flex: none; margin: 0; font-size: 14px; line-height: 1.3; color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
/* Continue: the one vermilion action, full width, with the arrow */
.aj-site .mh-form .widget-action { display: flex; width: 100%; height: 56px; margin: 4px 0 0; min-width: 0; align-self: stretch; justify-content: center; }
.mh-form .widget-action .icon { transition: translate var(--dur-hover) var(--ease-out); }
.mh-form .widget-action:hover .icon { translate: 4px 0; }
.mh-form .when-open { display: none; }
.mh-form.is-open .when-closed { display: none; }
.mh-form.is-open .when-open { display: inline; }
/* without JavaScript the card is a plain form to /book/: one way, typed dates and times, the guests at the default */
html:not(.js) .mh-form .widget-fields:not([hidden]) { display: grid; }
html:not(.js) .mh-form .widget-fields > .wfield { display: flex; }
html:not(.js) .mh-form .widget-fields > .wfield-steppers, html:not(.js) .mh-form .widget-top, html:not(.js) .mh-form .cal-btn, html:not(.js) .mh-grab { display: none; }

/* under 1024: the sheet, closed it shows only what .mh-peek marks */
@media (max-width: 1023px) {
  .mh-head { touch-action: none; }
  .aj-site .mh-form:not(.is-open) .widget-fields > .wfield { display: none; }
  .aj-site .mh-form:not(.is-open) .widget-fields > .wfield.mh-peek:not([hidden]) { display: flex; }
  .aj-site .mh-form .widget-fields { padding-top: 12px; }
  .aj-site .mh-form .widget-action { height: 52px; }
  .aj-site .mh-form .wfield:has([data-picker]) { padding-inline: 12px; }
  .aj-site .mh-form .widget-fields { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
  .aj-site .mh-form .wfield .input-wrap.has-btn .input { padding-right: 30px; }
  .mh-form .wfield .input-wrap .cal-btn { right: -12px; width: 40px; }
}
@media (max-width: 1023px) and (max-height: 720px) {
  .mh-grab { height: 34px; }
  .aj-site .mh-form .widget-modes > button { height: 44px; }
  .aj-site .mh-form .widget-fields { gap: 6px; padding-top: 10px; }
  .aj-site .mh-form .wfield { padding-top: 7px; padding-bottom: 8px; }
  .mh-form .wfield.mh-from::before, .mh-form .wfield.mh-to::before { top: 33px; }
  .mh-form .wfield.mh-from:not([hidden]) + .wfield.mh-to::after { height: 29px; }
  .mh-fare { min-height: 40px; padding-top: 6px; }
}
@media (min-width: 600px) {
  .aj-site .mh-form .wfield-steppers { gap: 28px; padding: 4px 0 0; }
  .aj-site .mh-form .wfield-steppers > div { flex-direction: row; align-items: center; gap: 12px; }
  .aj-site .mh-panel { padding: 4px 22px 22px; }
}
@media (min-width: 1024px) {
  .mh-grab { display: none; }
  .aj-site .mh-panel { padding: 16px 28px 28px; }
  .aj-site .mh-form .widget-modes > button { height: 50px; }
}
/* short desktop windows (1280 x 720): the same card, tighter, so the stage fits the window (frame.css) */
@media (min-width: 1024px) and (max-height: 860px) {
  .aj-site .mh-panel { padding: 8px 24px 20px; }
  .aj-site .mh-form .widget-modes > button { height: 44px; }
  .mh-form .widget-dir { padding-top: 8px; }
  .aj-site .mh-form .widget-dir .seg > button { height: 40px; }
  .aj-site .mh-form .widget-fields { gap: 6px; padding-top: 10px; }
  .aj-site .mh-form .wfield { padding-top: 6px; padding-bottom: 7px; }
  .mh-form .wfield.mh-from::before, .mh-form .wfield.mh-to::before { top: 32px; }
  .mh-form .wfield.mh-from:not([hidden]) + .wfield.mh-to::after { height: 28px; }
  .aj-site .mh-form .wfield-steppers { padding-top: 0; }
  .aj-site .mh-form .wfield-steppers .stepper .btn-icon { height: 40px; }
  .mh-fare { min-height: 40px; margin-top: 2px; padding-top: 6px; }
  .aj-site .mh-form .widget-action { height: 52px; }
}
/* one size for every trip type (review 02/11/2026: the card jumped as the tabs changed). From 1024 the four field sets
   share one grid area and the hidden ones keep their place without showing, so the card always takes the height of its
   tallest trip; Arriving / Departing keeps its row too (one way and by the hour start right under the tabs, over it).
   The fare and Continue sit at the foot of every set, so they never move either. Under 1024 the sheet keeps its sizes. */
@media (min-width: 1024px) {
  html.js .aj-site .mh .mh-form.widget { --card-foot: 124px; --fare-lift: 60px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr; }
  html.js .aj-site .mh .mh-form .widget-top { display: contents; }
  html.js .aj-site .mh .mh-form .widget-modes { grid-area: 1 / 1; }
  html.js .aj-site .mh .mh-form .widget-dir { grid-area: 2 / 1; }
  html.js .aj-site .mh .mh-form .widget-dir[hidden] { display: block !important; visibility: hidden; }
  html.js .aj-site .mh .mh-form .widget-fields { grid-area: 2 / 1 / 4 / 2; position: relative; align-content: start; padding-bottom: var(--card-foot); }
  html.js .aj-site .mh .mh-form .widget-fields[data-fields^="airport"] { grid-area: 3 / 1 / 4 / 2; }
  html.js .aj-site .mh .mh-form .widget-fields[hidden] { display: grid !important; visibility: hidden; }
  html.js .aj-site .mh .mh-form .widget-fields > .mh-fare { position: absolute; left: 0; right: 0; bottom: var(--fare-lift); margin: 0; }
  html.js .aj-site .mh .mh-form .widget-fields > .widget-action { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; }
}
@media (min-width: 1024px) and (max-height: 860px) {
  html.js .aj-site .mh .mh-form.widget { --card-foot: 108px; --fare-lift: 56px; }
}
/* laptop windows under 760px tall (1333 x 708 at 150%): the one-size card tightens by about 30px, so on stages whose
   notice stays top right (home, by the hour, corporate) the card starts below the notice */
@media (min-width: 1024px) and (max-height: 760px) {
  html.js .aj-site .mh .mh-form.widget { --card-foot: 100px; --fare-lift: 52px; }
  html.js .aj-site .mh .mh-form .widget-dir { padding-top: 4px; }
  html.js .aj-site .mh .mh-form .widget-fields { gap: 4px; }
  html.js .aj-site .mh .mh-form .wfield { padding-top: 5px; padding-bottom: 5px; }
  html.js .aj-site .mh .mh-form .wfield.mh-from::before, html.js .aj-site .mh .mh-form .wfield.mh-to::before { top: 31px; }
  html.js .mh .mh-form .wfield.mh-from:not([hidden]) + .wfield.mh-to::after { height: 27px; }
  html.js .aj-site .mh .mh-fare { min-height: 38px; }
  html.js .aj-site .mh .mh-form .widget-action { height: 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .aj-site .mh-panel, .aj-site .mh-form .widget-modes.has-bar::after, .aj-site .mh-form .widget-modes > button::after { transition: none; }
}