@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Geist:wght@300;400;500;600&display=swap');


/* =============================================================================
   ATELIER THEME — premium editorial-luxury booking funnel
   =============================================================================

   Translated from /home/mike/gvbooking/atelier-mockups/. The CSS variable
   names, values, shadows, radii, and class names are the visual contract and
   ship unchanged.

   All selectors are scoped under .atelier-root because Classic's booking
   layout (resources/views/components/layouts/booking.blade.php) ships its own
   inline \3c style> block defining .gv-stepper, .gv-toggle, .gv-payment-radio
   etc. with different intent. Without scoping, the two themes' styles would
   collide on every booking page that loaded both bundles.

   Vite emits this as a separate atelier-{hash}.css bundle, but @vite within
   atelier-3-step.blade.php is what actually pulls it onto the page — Classic
   tenants never load it.
   ============================================================================= */
/* -----------------------------------------------------------------------------
   Tokens (CSS custom properties)
   -------------------------------------------------------------------------- */
:root {
    --bg: #f5f3ee;
    --surface: #ffffff;
    --surface-soft: #faf8f3;
    --ink: #1a1a1a;
    --ink-soft: #5a5a58;
    --ink-muted: #9a9a96;
    --line: #e8e4dc;
    --accent: #c8472a;
    --accent-soft: #e8a591;
    --accent-bg: #fbeee8;
    --gold: #b08a3e;
    --green: #4a7a4d;
    --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04), 0 0 0 1px rgba(26, 26, 26, 0.04);
    --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.06), 0 0 0 1px rgba(26, 26, 26, 0.04);
    --shadow-lg: 0 12px 48px rgba(26, 26, 26, 0.10), 0 0 0 1px rgba(26, 26, 26, 0.04);
    --shadow-card-hover: 0 16px 48px rgba(26,26,26,0.14), 0 0 0 1px rgba(26,26,26,0.06);
    --shadow-focus: 0 0 0 4px rgba(200, 71, 42, 0.12), 0 0 0 1px var(--accent);
    --radius: 14px;
    --radius-sm: 10px;
    --radius-lg: 20px;
    --serif: 'Fraunces', 'Cormorant Garamond', Georgia, serif;
    --sans: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Session 15.2.2 — single source of truth for the pay-CTA background.
       Both `.gv-cta` (existing sticky CTA) and `.gv-pay-cta` (the new
       Step 3 trip-summary pay button) reference this one declaration.
       A future color revisit is a one-line edit here. */
    --gv-pay-cta-bg: var(--ink);

    /* Phase C — modal tokens. The Step 3 payment modal layers above the
       sticky CTA (z-index: 10) and the sticky topbar (z-index: 10 at
       max-width: 768px), so --gv-z-modal is 100. The backdrop derives from
       --ink at 55% opacity. */
    --gv-modal-backdrop: rgba(26, 26, 26, 0.55);
    --gv-z-modal: 100;
}
/* Phase C — mobile sheet handle. Declaration only; the payment modal's
   sheet variant on max-width: 768px consumes this. */
.gv-sheet-handle {
    width: 36px;
    height: 4px;
    background: var(--ink-muted);
    border-radius: 999px;
    margin: 12px auto 8px;
}
/* -----------------------------------------------------------------------------
   Booking layout component overrides (Classic chrome neutralized for Atelier)
   -------------------------------------------------------------------------- */
/* Session 15.1.6 Fix C — reset the UA body margin for Atelier.
   The classic-only reset `html, body { margin: 0; padding: 0 }` lives
   inside the `@unless($isAtelier)` block in
   resources/views/components/layouts/booking.blade.php, so Atelier
   tenants retain UA Chrome/Safari default body { margin: 8px }.
   Effect: every "full-bleed" Atelier surface (.gv-form-card border-
   radius:0 box-shadow:none, .gv-trip-summary margin:14 14, .gv-vehicle-
   list padding:0 14, .gv-section-card margin:0 14, etc.) ends 8px in
   from the device edge on each side instead of at the device edge
   proper. This is a polish bug independent of the Step 2 overflow.
   The `:has` selector is fine: every supported browser (Safari 15.4+
   = iOS 15.4+ shipped Mar 2022) supports it. */
html:has(.atelier-root),
body:has(.atelier-root) {
    margin: 0;
    padding: 0;
}
body:has(.atelier-root) {
    background: var(--bg);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Session 15.1.1 Polish Fix 1 — defensive horizontal overflow clip.
       Step 3's inline `grid-template-columns: minmax(0, 1fr) 380px;` can
       widen the body past the viewport on iPhone (the fixed 380px column
       beats the 980px mobile collapse rule because inline styles trump
       non-!important CSS), which then stretches the no-max-width
       `.gv-header` flex container off-screen and pushes the "24/7" chip
       outside the visible viewport — exactly the "half-width header"
       symptom Mike reported on Steps 2/3/Thank-You. Clipping here keeps
       the header visually pinned to the viewport on every step
       regardless of any future inline-style or content-width oversight. */
    overflow-x: clip;
}
body:has(.atelier-root) .gv-topbar { display: none; }
body:has(.atelier-root) .gv-shell { max-width: none; margin: 0; padding: 0; }
.atelier-root,
.atelier-root *,
.atelier-root *::before,
.atelier-root *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
.atelier-root { min-height: 100vh; overflow-x: clip; }
/* -----------------------------------------------------------------------------
   Header (brand bar + dispatch info)
   -------------------------------------------------------------------------- */
.atelier-root .gv-header {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
    padding: 18px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.atelier-root .gv-brand { display: flex; align-items: center; gap: 12px; }
.atelier-root .gv-brand-mark {
    width: 36px; height: 36px;
    background: var(--ink); color: var(--bg);
    border-radius: 8px;
    display: grid; place-items: center;
    font-family: var(--serif);
    font-weight: 500; font-size: 18px;
    letter-spacing: -0.02em;
}
.atelier-root .gv-brand-name {
    font-family: var(--serif);
    font-size: 20px; font-weight: 500;
    letter-spacing: -0.01em;
}
.atelier-root .gv-brand-tag {
    font-size: 12px; color: var(--ink-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-top: 2px;
}
.atelier-root .gv-header-meta {
    display: flex; align-items: center; gap: 24px;
    font-size: 13px; color: var(--ink-soft);
}
.atelier-root .gv-header-meta-item { display: flex; align-items: center; gap: 6px; }
.atelier-root .gv-header-meta-item svg { width: 14px; height: 14px; opacity: 0.6; }
/* -----------------------------------------------------------------------------
   Step indicator (3 steps)
   -------------------------------------------------------------------------- */
.atelier-root .gv-steps {
    display: flex; align-items: center; justify-content: center;
    gap: 0; padding: 28px 40px 20px;
    max-width: 1400px; margin: 0 auto;
}
.atelier-root .gv-step {
    display: flex; align-items: center; gap: 12px;
    padding: 0 28px;
    color: var(--ink-muted);
    font-size: 13px; letter-spacing: 0.04em;
    text-transform: uppercase; font-weight: 500;
    /* Session 15.2 (Bug #2): pills became <button>s. Strip the UA chrome so
       they look identical to the previous <div> rendering, then layer in the
       interactivity cues. min-height enforces the 44×44 tap target the
       Phase A audit established (44px is the Apple HIG / WCAG 2.5.5
       minimum). Backward nav is always allowed; the disabled state below
       only applies to forward jumps beyond maxStepReached. */
    background: transparent;
    border: 0;
    font-family: inherit;
    cursor: pointer;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
}
.atelier-root .gv-step:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Disabled = forward-skip blocked. Visually subtle: reduced opacity + the
   built-in disabled cursor. Active / complete state classes still apply
   to disabled buttons; the customer can see the path ahead but can't
   leap-frog into it. */
.atelier-root .gv-step:disabled,
.atelier-root .gv-step.is-disabled {
    cursor: not-allowed;
    opacity: 0.5;
}
.atelier-root .gv-step:disabled .gv-step-num,
.atelier-root .gv-step.is-disabled .gv-step-num {
    opacity: 0.7;
}
/* Hover on reachable pills hints they're clickable, without competing with
   the .is-active solid-ink state. */
.atelier-root .gv-step:not(:disabled):not(.is-active):hover {
    color: var(--ink);
}
.atelier-root .gv-step:not(:disabled):not(.is-active):hover .gv-step-num {
    border-color: var(--ink-soft);
}
.atelier-root .gv-step-num {
    width: 26px; height: 26px;
    border-radius: 50%; border: 1px solid var(--line);
    display: grid; place-items: center;
    font-family: var(--serif);
    font-size: 13px; font-weight: 500;
    background: var(--surface);
}
.atelier-root .gv-step.is-active { color: var(--ink); }
.atelier-root .gv-step.is-active .gv-step-num {
    background: var(--ink); color: var(--bg);
    border-color: var(--ink);
}
.atelier-root .gv-step.is-complete { color: var(--ink-soft); }
.atelier-root .gv-step.is-complete .gv-step-num {
    background: var(--green); color: var(--bg);
    border-color: var(--green);
}
.atelier-root .gv-step-divider { width: 60px; height: 1px; background: var(--line); }
.atelier-root .gv-step-divider.is-complete { background: var(--green); }
/* -----------------------------------------------------------------------------
   Main grid (Step 1: form / map)
   -------------------------------------------------------------------------- */
.atelier-root .gv-main {
    max-width: 1400px; margin: 0 auto;
    padding: 32px 40px 60px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 36px;
    align-items: start;
}
/* -----------------------------------------------------------------------------
   Form card + headline block
   -------------------------------------------------------------------------- */
.atelier-root .gv-form-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 36px 36px 32px;
    box-shadow: var(--shadow-md);
    position: relative;
}
.atelier-root .gv-eyebrow {
    color: var(--accent);
    font-size: 12px; letter-spacing: 0.14em;
    text-transform: uppercase; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 14px;
}
.atelier-root .gv-eyebrow::before {
    content: ''; width: 24px; height: 1px; background: var(--accent);
}
.atelier-root .gv-headline {
    font-family: var(--serif);
    font-size: 36px; font-weight: 400;
    line-height: 1.1; letter-spacing: -0.02em;
    color: var(--ink); margin-bottom: 8px;
}
.atelier-root .gv-headline em { font-style: italic; color: var(--accent); }
.atelier-root .gv-subheadline {
    color: var(--ink-soft);
    font-size: 14px; margin-bottom: 28px;
}
/* -----------------------------------------------------------------------------
   Service-type segmented control (Step 1)
   -------------------------------------------------------------------------- */
.atelier-root .gv-service-types {
    /* D.1.3 — adapt to 1/2/3 tabs without left-anchoring. Each tab gets
       an equal share of the row regardless of count. Tab count is
       written as --gv-tabs by step-1.blade so the grid stays
       deterministic on browsers without flex-grow rounding quirks. */
    display: grid;
    grid-template-columns: repeat(var(--gv-tabs, 3), minmax(0, 1fr));
    gap: 6px;
    background: var(--surface-soft);
    padding: 4px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    margin-bottom: 28px;
}
/* Solo-tab variant: render as a static header rather than a clickable
   pill — there's nowhere else to switch to. Keeps the row's visual
   anchoring but suppresses the hover affordance. */
.atelier-root .gv-service-types[data-tab-count="1"] .gv-service-type {
    cursor: default;
    pointer-events: none;
}
.atelier-root .gv-service-type {
    padding: 12px 14px;
    text-align: center;
    background: transparent;
    border: none;
    border-radius: 7px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.18s ease;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.atelier-root .gv-service-type svg { width: 16px; height: 16px; opacity: 0.7; }
.atelier-root .gv-service-type:hover { color: var(--ink); }
.atelier-root .gv-service-type:hover svg { opacity: 1; }
.atelier-root .gv-service-type.is-active {
    background: var(--ink);
    color: var(--bg);
}
.atelier-root .gv-service-type.is-active svg { opacity: 1; color: var(--bg); }
/* -----------------------------------------------------------------------------
   Form fields, route thread
   -------------------------------------------------------------------------- */
.atelier-root .gv-field-group { display: grid; gap: 14px; margin-bottom: 14px; }
.atelier-root .gv-field-group-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.atelier-root .gv-field {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 16px 12px 50px;
    position: relative;
    transition: all 0.18s ease;
    cursor: text;
    display: block;
}
.atelier-root .gv-field:hover { background: #f6f3ec; }
.atelier-root .gv-field:focus-within {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}
.atelier-root .gv-field-icon {
    position: absolute;
    left: 18px; bottom: 12px;
    width: 20px; height: 20px;
    color: var(--ink-muted);
    pointer-events: none;
}
.atelier-root .gv-field:focus-within .gv-field-icon { color: var(--accent); }
.atelier-root .gv-field-label {
    display: block;
    font-size: 11px; font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 2px;
}
/* Native date/time pickers (iOS Safari, Chrome mobile) render their own
   placeholder text inside the input — "Date" / "mm/dd/yyyy" / etc. — which
   visually collides with our own .gv-field-label rendered above. Hide our
   label on these inputs and grow the field padding so the native chrome
   doesn't feel cramped. Toggle the class in the Blade partial; do NOT
   target input[type="date"] directly here because Atelier's input layout
   depends on the label still controlling vertical rhythm for non-picker
   fields. */
.atelier-root .gv-field--native-picker .gv-field-label {
    display: none;
}
.atelier-root .gv-field--native-picker {
    padding-top: 16px;
    padding-bottom: 16px;
}
.atelier-root .gv-field input,
.atelier-root .gv-field textarea {
    width: 100%; background: transparent;
    border: none; outline: none;
    font-family: var(--sans);
    font-size: 15px; color: var(--ink);
    font-weight: 400; padding: 0;
    resize: none;
}
.atelier-root .gv-field textarea { min-height: 48px; line-height: 1.4; }
.atelier-root .gv-field input::placeholder,
.atelier-root .gv-field textarea::placeholder { color: var(--ink-muted); }
.atelier-root .gv-route-thread { position: relative; }
.atelier-root .gv-route-thread::before {
    content: '';
    position: absolute;
    left: 27px; top: 60px; bottom: 60px;
    width: 1.5px;
    background: repeating-linear-gradient(to bottom, var(--ink-muted) 0 3px, transparent 3px 6px);
    opacity: 0.5;
    pointer-events: none;
}
/* -----------------------------------------------------------------------------
   Steppers (passengers / luggage) + option pills + return toggle
   -------------------------------------------------------------------------- */
.atelier-root .gv-stepper-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}
.atelier-root .gv-stepper {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.atelier-root .gv-stepper-info { display: flex; align-items: center; gap: 10px; }
.atelier-root .gv-stepper-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--surface);
    display: grid; place-items: center;
    color: var(--ink-soft);
}
.atelier-root .gv-stepper-icon svg { width: 16px; height: 16px; }
.atelier-root .gv-stepper-label {
    font-size: 12px; color: var(--ink-muted);
    letter-spacing: 0.04em; text-transform: uppercase;
    font-weight: 500;
}
/* Stepper label desktop/mobile spans — default state: show the long label
   ("Passengers"/"Luggage"), hide the short one ("Pax"/"Bags"). The mobile
   block at 768px below flips these. Replaces the previous font-size:0 +
   ::after swap-trick which could flash during a Livewire morph. */
.atelier-root .gv-stepper-label .gv-label-desktop {
    display: inline;
}
.atelier-root .gv-stepper-label .gv-label-mobile {
    display: none;
}
.atelier-root .gv-stepper-value {
    font-family: var(--serif);
    font-size: 20px; font-weight: 500;
    line-height: 1; color: var(--ink);
}
.atelier-root .gv-stepper-controls { display: flex; gap: 4px; }
.atelier-root .gv-stepper-btn {
    min-width: 36px; min-height: 36px;
    border-radius: 8px;
    background: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink-soft);
    cursor: pointer;
    display: grid; place-items: center;
    transition: all 0.15s ease;
    font-size: 14px; font-weight: 500;
}
.atelier-root .gv-stepper-btn:hover {
    background: var(--ink); color: var(--bg);
    border-color: var(--ink);
}
/* D.1.2 — pill-styled native selects for the Passenger / Luggage / Child-seat
   dropdowns. Matches the gv-stepper-btn aesthetic (rounded, surface bg,
   subtle border, dark hover) plus a custom chevron SVG positioned right.
   Native chevron is suppressed via appearance:none + a transparent
   background-image trick that keeps the SVG crisp on retina. */
.atelier-root .gv-stepper-select,
.atelier-root .gv-childseat-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    min-height: 36px;
    padding: 0 28px 0 12px;
    border-radius: 8px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    transition: all 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2358514a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 12px 12px;
}
.atelier-root .gv-stepper-select:hover,
.atelier-root .gv-childseat-select:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.atelier-root .gv-stepper-select:focus,
.atelier-root .gv-childseat-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}
/* Drop the inner padding for child-seat selects so they fit the 3-up
   row with the narrower per-column width. */
.atelier-root .gv-childseat-select {
    width: 100%;
    padding: 6px 26px 6px 10px;
    font-size: 13px;
}
/* Child-seat sub-picker — frame the 3-up select row to match the
   pill-card aesthetic the rest of Step 1 uses. */
.atelier-root .gv-childseat-picker {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 16px;
}
.atelier-root .gv-childseat-heading {
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.atelier-root .gv-childseat-picker .gv-field-select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 8px 10px;
    cursor: default;
}
.atelier-root .gv-childseat-picker .gv-field-label {
    margin-bottom: 4px;
}
.atelier-root .gv-childseat-note {
    margin-top: 10px;
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.4;
}
/* Spec C — ✕ collapse button on the revealed hourly drop-off field.
   Sibling of the wire:ignore wrapper, absolute-positioned in the top-right
   corner of the dropoff field. The wrapper carries position:relative. */
.atelier-root .gv-field-collapse-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: var(--ink-soft);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease;
    padding: 0;
    z-index: 2;
}
.atelier-root .gv-field-collapse-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--accent);
}
/* Spec C — three-up compact picker grid for booster / infant / child seats.
   Replaces the previous .gv-field-group-3 class (which never had a CSS rule
   and therefore stacked vertically). Stays inside .gv-childseat-picker's
   framed container. */
.atelier-root .gv-child-seats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 480px) {
    .atelier-root .gv-child-seats-grid {
        grid-template-columns: 1fr;
    }
}
.atelier-root .gv-options-label {
    font-size: 11px; font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: 12px;
}
.atelier-root .gv-options-row {
    display: flex; flex-wrap: wrap;
    gap: 8px; margin-bottom: 24px;
}
.atelier-root .gv-pill {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 14px 8px 12px;
    font-size: 13px; color: var(--ink-soft);
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center; gap: 6px;
    font-weight: 400;
}
.atelier-root .gv-pill:hover { border-color: var(--ink); color: var(--ink); }
.atelier-root .gv-pill.is-active {
    background: var(--ink); color: var(--bg);
    border-color: var(--ink);
}
.atelier-root .gv-pill svg { width: 14px; height: 14px; }
.atelier-root .gv-return {
    display: flex; align-items: center;
    justify-content: space-between;
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 14px 16px;
    margin-bottom: 28px;
}
.atelier-root .gv-return-text { font-size: 14px; color: var(--ink); }
.atelier-root .gv-toggle-group {
    display: flex;
    background: var(--surface);
    border-radius: 8px;
    padding: 3px;
    box-shadow: var(--shadow-sm);
}
.atelier-root .gv-toggle {
    background: transparent; border: none;
    padding: 6px 16px;
    font-family: var(--sans);
    font-size: 13px; font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}
.atelier-root .gv-toggle.is-active { background: var(--ink); color: var(--bg); }
/* -----------------------------------------------------------------------------
   Pay CTA button — shared between the existing sticky CTA (.gv-cta, used on
   Step 1 "See pricing" and Step 3 "Continue to payment") and the new Step 3
   trip-summary pay button (.gv-pay-cta, Session 15.2.2). One rule block, two
   class names: structurally incapable of drifting apart. Background sourced
   from `--gv-pay-cta-bg` — single declaration of the black color value lives
   at :root above.
   -------------------------------------------------------------------------- */
.atelier-root .gv-cta,
.atelier-root .gv-pay-cta {
    width: 100%;
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius);
    padding: 18px 24px;
    font-family: var(--sans);
    font-size: 15px; font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all 0.2s ease;
    margin-bottom: 14px;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
}
.atelier-root .gv-cta:hover,
.atelier-root .gv-pay-cta:hover {
    background: var(--green);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(74, 122, 77, 0.32);
}
.atelier-root .gv-pay-cta:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
}
.atelier-root .gv-cta-arrow { transition: transform 0.2s ease; }
.atelier-root .gv-cta:hover .gv-cta-arrow,
.atelier-root .gv-pay-cta:hover .gv-cta-arrow { transform: translateX(4px); }
/* Positional modifier — when the shared pay button sits flush at the bottom
   of the Step 3 receipt sidebar, drop the 14px margin-bottom (the sidebar
   already terminates the visual flow). Appearance unchanged. */
.atelier-root .gv-pay-cta.gv-pay-cta--in-receipt {
    margin-bottom: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.atelier-root .gv-cta-secondary-text {
    text-align: center;
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: 0.02em;
}
.atelier-root .gv-cta-secondary-text span { color: var(--ink-soft); }
/* -----------------------------------------------------------------------------
   Map canvas + overlay cards (Step 1 right column)
   -------------------------------------------------------------------------- */
.atelier-root .gv-map-canvas {
    /* 2026-05-25 — Fixed-height map. Same behavior standalone + iframed.
       No sticky, no viewport units, no align-items stretch. Map is a
       decorative location indicator at a fixed scale. Form column scrolls
       past it independently if it grows taller. */
    position: relative;
    height: 640px;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg, #e8ddd0 0%, #d4c4b0 100%);
}
.atelier-root .gv-map-img {
    width: 100%; height: 100%;
    object-fit: cover; display: block;
}
.atelier-root .gv-trip-card {
    position: absolute;
    top: 24px; left: 24px; right: 24px;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-radius: var(--radius);
    padding: 18px 20px;
    box-shadow: 0 4px 20px rgba(26, 26, 26, 0.10);
    display: flex; align-items: center; gap: 16px;
}
.atelier-root .gv-trip-pins {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding-top: 4px;
}
.atelier-root .gv-pin {
    width: 12px; height: 12px;
    border-radius: 50%;
    border: 2px solid var(--surface);
}
.atelier-root .gv-pin.is-pickup {
    background: var(--ink);
    box-shadow: 0 0 0 1px var(--ink);
}
.atelier-root .gv-pin.is-dropoff {
    background: var(--accent);
    box-shadow: 0 0 0 1px var(--accent);
}
.atelier-root .gv-pin-line {
    width: 1.5px; height: 16px;
    background: repeating-linear-gradient(to bottom, var(--ink-muted) 0 2px, transparent 2px 4px);
}
.atelier-root .gv-trip-addresses { flex: 1; min-width: 0; }
.atelier-root .gv-trip-address {
    font-size: 13px; color: var(--ink);
    font-weight: 500;
    white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}
.atelier-root .gv-trip-address:first-child { margin-bottom: 6px; }
.atelier-root .gv-trip-stats {
    text-align: right;
    border-left: 1px solid var(--line);
    padding-left: 16px;
}
.atelier-root .gv-trip-stat-value {
    font-family: var(--serif);
    font-size: 20px; font-weight: 500;
    line-height: 1; color: var(--ink);
}
.atelier-root .gv-trip-stat-label {
    font-size: 11px; color: var(--ink-muted);
    letter-spacing: 0.08em; text-transform: uppercase;
    margin-top: 4px;
}
.atelier-root .gv-trust-strip {
    position: absolute;
    bottom: 24px; left: 24px; right: 24px;
    background: rgba(26, 26, 26, 0.92);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    color: var(--bg);
    border-radius: var(--radius);
    padding: 14px 20px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 16px;
}
.atelier-root .gv-trust-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px;
    color: rgba(245, 243, 238, 0.85);
    flex: 1; min-width: 0;
}
.atelier-root .gv-trust-item strong {
    color: var(--bg); font-weight: 500;
}
.atelier-root .gv-trust-item svg {
    width: 14px; height: 14px;
    color: var(--gold);
    flex-shrink: 0;
}
.atelier-root .gv-trust-divider {
    width: 1px; height: 16px;
    background: rgba(245, 243, 238, 0.15);
    flex-shrink: 0;
}
.atelier-root .gv-map-badge {
    position: absolute;
    top: 50%; right: 24px;
    transform: translateY(-50%);
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow-md);
    text-align: center;
    min-width: 120px;
}
.atelier-root .gv-map-badge-eyebrow {
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 6px;
}
.atelier-root .gv-map-badge-value {
    font-family: var(--serif);
    font-size: 28px; font-weight: 500;
    color: var(--ink); line-height: 1;
}
.atelier-root .gv-map-badge-sub {
    font-size: 12px; color: var(--ink-soft);
    margin-top: 4px;
}
/* -----------------------------------------------------------------------------
   Page heading + trip summary (Step 2)
   -------------------------------------------------------------------------- */
.atelier-root .gv-page-heading { margin-bottom: 24px; }
.atelier-root .gv-trip-summary {
    background: var(--surface);
    border-radius: var(--radius);
    padding: 16px 20px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 28px;
}
.atelier-root .gv-trip-summary-pins {
    display: flex; flex-direction: column;
    align-items: center; gap: 4px;
    padding-top: 4px;
}
.atelier-root .gv-trip-summary-pins .gv-pin { width: 10px; height: 10px; }
.atelier-root .gv-trip-summary-pins .gv-pin-line { height: 14px; }
.atelier-root .gv-trip-summary-text { flex: 1; min-width: 0; }
.atelier-root .gv-trip-summary-row {
    font-size: 13px; color: var(--ink);
    line-height: 1.5;
}
.atelier-root .gv-trip-summary-row:first-child { margin-bottom: 4px; }
.atelier-root .gv-trip-summary-meta {
    display: flex; gap: 16px;
    font-size: 12px; color: var(--ink-muted);
    border-left: 1px solid var(--line);
    padding-left: 18px;
}
.atelier-root .gv-trip-summary-meta-item {
    display: flex; align-items: center; gap: 6px;
}
.atelier-root .gv-trip-summary-meta-item svg { width: 13px; height: 13px; }
.atelier-root .gv-trip-summary-meta strong {
    color: var(--ink); font-weight: 500;
}
.atelier-root .gv-edit-link {
    color: var(--accent);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    border-radius: 6px;
    transition: background 0.15s;
}
.atelier-root .gv-edit-link:hover { background: var(--accent-bg); }
.atelier-root .gv-edit-link svg { width: 12px; height: 12px; }
/* -----------------------------------------------------------------------------
   Section label + sort control (Step 2)
   -------------------------------------------------------------------------- */
.atelier-root .gv-section-label {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.atelier-root .gv-sort-control {
    display: flex; gap: 4px;
    background: var(--surface);
    border-radius: 8px;
    padding: 3px;
    box-shadow: var(--shadow-sm);
}
.atelier-root .gv-sort-btn {
    background: transparent;
    border: none;
    padding: 6px 12px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    cursor: pointer;
    border-radius: 6px;
    text-transform: none;
    letter-spacing: 0;
    transition: all 0.15s;
}
.atelier-root .gv-sort-btn.is-active {
    background: var(--ink); color: var(--bg);
}
/* -----------------------------------------------------------------------------
   Vehicle cards (Step 2)
   -------------------------------------------------------------------------- */
.atelier-root .gv-vehicle-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    /* Self-query note: container-type sits on the list (parent of every card),
       NOT on the card itself. CSS container queries can only style descendants
       of the container element — the container element is not its own
       descendant. Putting container-type on the card and then trying to switch
       its own grid-template-columns inside container is a silent no-op. Hosting
       the container on the list lets the container query restyle the card itself
       (the card is a descendant of the list) while still measuring card width
       (cards span the list inline-size). Same contract as taxibooking themes. */
    container-type: inline-size;
    container-name: gv-vehicle-card;
}
.atelier-root .gv-vehicle-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.25s ease;
    display: grid;
    /* Photo column wrapped in minmax(0, 280px) so it can shrink if the
       container is narrower than the sum of fixed tracks — prevents the
       photo grid item from blowing past its track when embedded in
       narrow iframe widths. */
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr) auto;
    align-items: stretch;
    position: relative;
}
.atelier-root .gv-vehicle-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-card-hover);
}
.atelier-root .gv-vehicle-card.is-selected {
    box-shadow: 0 0 0 2px var(--accent), 0 16px 48px rgba(200,71,42,0.16);
}
.atelier-root .gv-vehicle-photo {
    background: linear-gradient(135deg, #f0ebe0 0%, #d8cfbe 100%);
    position: relative;
    overflow: hidden;
    aspect-ratio: 4/3;
    /* Hard width bounds so the photo zone never escapes its grid track
       under any container width (standalone OR iframe). Belt-and-
       suspenders against intrinsic-content sizing surprises that have
       been observed in embedded contexts. */
    display: block;
    width: 100%;
    min-width: 0;
    max-width: 100%;
}
.atelier-root .gv-vehicle-photo img,
.atelier-root .gv-vehicle-photo svg {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.4s cubic-bezier(.2,.7,.2,1);
}
.atelier-root .gv-vehicle-card:hover .gv-vehicle-photo svg,
.atelier-root .gv-vehicle-card:hover .gv-vehicle-photo img {
    transform: scale(1.05);
}
.atelier-root .gv-vehicle-tag {
    position: absolute;
    top: 12px; right: 12px;
    background: rgba(255,255,255,0.95);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    color: var(--ink);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 5px 10px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    gap: 5px;
    z-index: 1;
}
.atelier-root .gv-vehicle-tag svg { width: 11px; height: 11px; }
.atelier-root .gv-vehicle-tag.is-popular { color: var(--accent); }
.atelier-root .gv-vehicle-tag.is-popular svg { color: var(--accent); }
.atelier-root .gv-vehicle-tag.is-value { color: var(--green); }
.atelier-root .gv-vehicle-tag.is-value svg { color: var(--green); }
.atelier-root .gv-vehicle-tag.is-premium { color: var(--gold); }
.atelier-root .gv-vehicle-tag.is-premium svg { color: var(--gold); }
.atelier-root .gv-vehicle-body {
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-width: 0;
}
.atelier-root .gv-vehicle-class {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
}
.atelier-root .gv-vehicle-name {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 6px;
}
.atelier-root .gv-vehicle-examples {
    font-size: 12px;
    color: var(--ink-muted);
    margin-bottom: 14px;
    font-style: italic;
}
.atelier-root .gv-vehicle-specs {
    display: flex;
    gap: 18px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}
.atelier-root .gv-spec {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ink-soft);
}
.atelier-root .gv-spec svg {
    width: 14px; height: 14px;
    color: var(--ink-muted);
}
.atelier-root .gv-spec strong {
    color: var(--ink);
    font-weight: 500;
}
.atelier-root .gv-vehicle-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.atelier-root .gv-amenity {
    font-size: 11px;
    color: var(--ink-soft);
    background: var(--surface-soft);
    padding: 4px 10px;
    border-radius: 999px;
    letter-spacing: 0.02em;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.atelier-root .gv-amenity svg {
    width: 10px;
    height: 10px;
    color: var(--green);
}
.atelier-root .gv-vehicle-aside {
    background: var(--surface-soft);
    border-left: 1px solid var(--line);
    padding: 22px 24px;
    display: flex;
    flex-direction: column;
    /* Spec C — center the price column so the eyebrow ("FOR X HOURS" /
       "FROM") and the price amount sit visually centered above the
       full-width Select button below. Was flex-end (right-aligned),
       which created visual asymmetry against the centered button text. */
    align-items: center;
    justify-content: center;
    gap: 16px;
    min-width: 200px;
}
.atelier-root .gv-price-block { text-align: center; }
.atelier-root .gv-price-row {
    font-size: 12px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.atelier-root .gv-price-amount {
    font-family: var(--serif);
    font-size: 36px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--ink);
}
.atelier-root .gv-price-amount sup {
    font-size: 18px;
    font-weight: 400;
    vertical-align: top;
    margin-right: 1px;
    margin-top: 6px;
    display: inline-block;
}
/* STEP2-VEHICLE-SELECT-2026-05-24 */
/* Vehicle Select button — three-state visual signal:
   - Default:               black (passive, but visible) "you can pick this"
   - Card hover:             terracotta (engagement) "you're about to pick"
   - Card .is-selected:      green (commitment) "you've picked this"
   The icon swap (arrow → check) is handled in the Blade conditional;
   here we only own color. */
.atelier-root .gv-vehicle-select {
    width: 100%;
    background: var(--ink);
    color: var(--bg);
    border: 1px solid var(--ink);
    border-radius: var(--radius);
    padding: 14px 20px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
}
.atelier-root .gv-vehicle-select svg {
    transition: transform 0.18s ease;
}
.atelier-root .gv-vehicle-card:hover .gv-vehicle-select {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.atelier-root .gv-vehicle-card:hover .gv-vehicle-select svg {
    transform: translateX(3px);
}
.atelier-root .gv-vehicle-card.is-selected .gv-vehicle-select {
    background: var(--green);
    color: var(--bg);
    border-color: var(--green);
}
.atelier-root .gv-vehicle-card.is-selected:hover .gv-vehicle-select {
    /* Once selected, hovering should NOT regress to the
       terracotta "about-to-pick" state — keep the green so the
       customer's confirmed selection stays visually anchored. */
    background: var(--green);
    border-color: var(--green);
}
.atelier-root .gv-vehicle-card.is-selected:hover .gv-vehicle-select svg {
    transform: none;
}
.atelier-root .gv-vehicle-select svg { width: 14px; height: 14px; }
/* -----------------------------------------------------------------------------
   Right sidebar: mini-map + trust card (Step 2)
   -------------------------------------------------------------------------- */
.atelier-root .gv-aside-stack {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.atelier-root .gv-mini-map {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background: linear-gradient(135deg, #e8ddd0 0%, #d4c4b0 100%);
    height: 260px;
    position: relative;
}
.atelier-root .gv-mini-map svg {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.atelier-root .gv-mini-map-stat {
    position: absolute;
    bottom: 16px; left: 16px; right: 16px;
    background: rgba(255,255,255,0.94);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.atelier-root .gv-mini-map-stat-label {
    font-size: 10px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.atelier-root .gv-mini-map-stat-value {
    font-family: var(--serif);
    font-size: 18px;
    font-weight: 500;
    color: var(--ink);
}
.atelier-root .gv-mini-map-stat-divider {
    width: 1px;
    height: 28px;
    background: var(--line);
}
.atelier-root .gv-trust-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 20px 22px;
    box-shadow: var(--shadow-sm);
}
.atelier-root .gv-trust-eyebrow {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 14px;
}
.atelier-root .gv-trust-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--line);
}
.atelier-root .gv-trust-row:last-child { border-bottom: none; }
.atelier-root .gv-trust-row:first-child { padding-top: 0; }
.atelier-root .gv-trust-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--surface-soft);
    display: grid; place-items: center;
    color: var(--accent);
    flex-shrink: 0;
}
.atelier-root .gv-trust-icon svg { width: 16px; height: 16px; }
.atelier-root .gv-trust-text {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
}
.atelier-root .gv-trust-text strong { font-weight: 500; }
.atelier-root .gv-trust-text em {
    font-style: normal;
    color: var(--ink-muted);
    font-size: 12px;
    display: block;
    margin-top: 2px;
}
/* -----------------------------------------------------------------------------
   Sticky action bar (Step 2 footer)
   -------------------------------------------------------------------------- */
.atelier-root .gv-action-bar {
    position: sticky;
    bottom: 0;
    background: var(--surface);
    border-top: 1px solid var(--line);
    padding: 16px 40px;
    margin-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    box-shadow: 0 -4px 20px rgba(26,26,26,0.05);
    z-index: 10;
}
.atelier-root .gv-action-bar-summary {
    display: flex;
    align-items: center;
    gap: 16px;
}
.atelier-root .gv-action-bar-vehicle {
    display: flex;
    align-items: center;
    gap: 12px;
}
.atelier-root .gv-action-bar-vehicle-thumb {
    width: 50px; height: 38px;
    border-radius: 8px;
    background: linear-gradient(135deg, #f0ebe0 0%, #d8cfbe 100%);
    overflow: hidden;
}
.atelier-root .gv-action-bar-vehicle-thumb svg,
.atelier-root .gv-action-bar-vehicle-thumb img { width: 100%; height: 100%; }
.atelier-root .gv-action-bar-vehicle-info {
    font-size: 13px;
}
.atelier-root .gv-action-bar-vehicle-info strong {
    display: block;
    color: var(--ink);
    font-weight: 500;
    margin-bottom: 2px;
}
.atelier-root .gv-action-bar-vehicle-info span {
    color: var(--ink-muted);
    font-size: 12px;
}
.atelier-root .gv-action-bar-divider {
    width: 1px;
    height: 36px;
    background: var(--line);
}
.atelier-root .gv-action-bar-price {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
.atelier-root .gv-action-bar-price-label {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.atelier-root .gv-action-bar-price-value {
    font-family: var(--serif);
    font-size: 24px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    margin-top: 4px;
}
.atelier-root .gv-action-cta {
    background: var(--accent);
    color: var(--bg);
    border: none;
    border-radius: var(--radius);
    padding: 14px 28px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
}
.atelier-root .gv-action-cta:hover {
    background: var(--green);
    transform: translateY(-1px);
    box-shadow: 0 8px 24px rgba(74,122,77,0.32);
}
.atelier-root .gv-action-cta svg { width: 16px; height: 16px; }
/* -----------------------------------------------------------------------------
   Section cards (Step 3 — numbered sections)
   -------------------------------------------------------------------------- */
.atelier-root .gv-section-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    padding: 28px 30px;
    box-shadow: var(--shadow-md);
    margin-bottom: 16px;
}
.atelier-root .gv-section-title {
    font-family: var(--serif);
    font-size: 20px; font-weight: 500;
    letter-spacing: -0.01em;
    color: var(--ink);
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 10px;
}
.atelier-root .gv-section-num {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--surface-soft);
    color: var(--ink);
    font-family: var(--serif);
    font-size: 13px;
    display: grid; place-items: center;
    font-weight: 500;
}
.atelier-root .gv-section-sub {
    font-size: 13px;
    color: var(--ink-muted);
    margin-bottom: 22px;
    margin-left: 34px;
}
.atelier-root .gv-field-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
}
.atelier-root .gv-field-grid.is-full { grid-template-columns: minmax(0, 1fr); }
/* -----------------------------------------------------------------------------
   Payment methods + card grid + security strip (Step 3)
   -------------------------------------------------------------------------- */
.atelier-root .gv-payment-methods {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 18px;
}
.atelier-root .gv-payment-method {
    background: var(--surface-soft);
    border: 1.5px solid transparent;
    border-radius: var(--radius);
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.18s;
    display: flex;
    align-items: center;
    gap: 12px;
}
.atelier-root .gv-payment-method:hover {
    background: #f6f3ec;
}
.atelier-root .gv-payment-method.is-selected {
    background: var(--surface);
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}
.atelier-root .gv-payment-radio {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 1.5px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
    position: relative;
    transition: all 0.18s;
}
.atelier-root .gv-payment-method.is-selected .gv-payment-radio {
    border-color: var(--accent);
}
.atelier-root .gv-payment-method.is-selected .gv-payment-radio::after {
    content: '';
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    background: var(--accent);
}
.atelier-root .gv-payment-method-info {
    flex: 1;
    min-width: 0;
}
.atelier-root .gv-payment-method-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
}
.atelier-root .gv-payment-method-sub {
    font-size: 12px;
    color: var(--ink-muted);
    margin-top: 2px;
}
.atelier-root .gv-payment-icons {
    display: flex;
    gap: 4px;
}
.atelier-root .gv-payment-icon {
    width: 28px;
    height: 18px;
    border-radius: 3px;
    background: var(--surface);
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    font-size: 9px;
    font-weight: 700;
    color: var(--ink-soft);
    letter-spacing: -0.02em;
}
.atelier-root .gv-card-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 90px 90px;
    gap: 12px;
}
.atelier-root .gv-security-strip {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    color: var(--ink-muted);
}
.atelier-root .gv-security-strip svg {
    width: 14px; height: 14px;
    color: var(--green);
    flex-shrink: 0;
}
.atelier-root .gv-security-strip strong {
    color: var(--ink-soft);
    font-weight: 500;
}
/* -----------------------------------------------------------------------------
   Checkboxes (Step 3)
   -------------------------------------------------------------------------- */
.atelier-root .gv-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 0;
    cursor: pointer;
}
.atelier-root .gv-checkbox {
    width: 20px; height: 20px;
    border-radius: 6px;
    border: 1.5px solid var(--line);
    background: var(--surface);
    flex-shrink: 0;
    margin-top: 1px;
    transition: all 0.15s;
    position: relative;
}
.atelier-root .gv-checkbox-row.is-checked .gv-checkbox {
    background: var(--ink);
    border-color: var(--ink);
}
.atelier-root .gv-checkbox-row.is-checked .gv-checkbox::after {
    content: '';
    position: absolute;
    left: 5px; top: 2px;
    width: 6px; height: 10px;
    border: solid var(--bg);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.atelier-root .gv-checkbox-text {
    font-size: 13px;
    color: var(--ink);
    line-height: 1.5;
}
.atelier-root .gv-checkbox-text em {
    font-style: normal;
    color: var(--ink-muted);
    display: block;
    font-size: 12px;
    margin-top: 2px;
}
.atelier-root .gv-cta-block { margin-top: 4px; }
/* -----------------------------------------------------------------------------
   Receipt sidebar (Step 3 right column)
   -------------------------------------------------------------------------- */
.atelier-root .gv-receipt {
    position: sticky;
    top: 24px;
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}
.atelier-root .gv-receipt-header {
    background: var(--ink);
    color: var(--bg);
    padding: 22px 26px;
}
.atelier-root .gv-receipt-eyebrow {
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(245,243,238,0.6);
    margin-bottom: 4px;
    font-weight: 500;
}
.atelier-root .gv-receipt-title {
    font-family: var(--serif);
    font-size: 22px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.atelier-root .gv-receipt-vehicle {
    background: var(--surface-soft);
    padding: 18px 26px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 14px;
}
.atelier-root .gv-receipt-vehicle-img {
    width: 80px; height: 56px;
    border-radius: 10px;
    background: linear-gradient(135deg, #f0ebe0 0%, #d8cfbe 100%);
    overflow: hidden;
    flex-shrink: 0;
}
.atelier-root .gv-receipt-vehicle-info { flex: 1; }
.atelier-root .gv-receipt-vehicle-name {
    font-family: var(--serif);
    font-size: 16px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 2px;
}
.atelier-root .gv-receipt-vehicle-meta {
    font-size: 12px;
    color: var(--ink-muted);
}
.atelier-root .gv-receipt-body { padding: 22px 26px; }
.atelier-root .gv-receipt-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 0;
}
.atelier-root .gv-receipt-row + .gv-receipt-row {
    border-top: 1px solid var(--line);
}
.atelier-root .gv-receipt-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: var(--surface-soft);
    color: var(--ink-soft);
    display: grid; place-items: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.atelier-root .gv-receipt-icon svg { width: 14px; height: 14px; }
.atelier-root .gv-receipt-text-block {
    flex: 1;
    min-width: 0;
}
.atelier-root .gv-receipt-label {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.atelier-root .gv-receipt-value {
    font-size: 13px;
    color: var(--ink);
    font-weight: 500;
    line-height: 1.4;
    word-wrap: break-word;
}
/* -----------------------------------------------------------------------------
   Promo + fare breakdown + total (Step 3 receipt)
   -------------------------------------------------------------------------- */
.atelier-root .gv-fare-breakdown {
    padding: 0 26px;
    border-top: 1px solid var(--line);
}
.atelier-root .gv-fare-breakdown summary {
    list-style: none;
    cursor: pointer;
    padding: 14px 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
}
.atelier-root .gv-fare-breakdown summary::-webkit-details-marker { display: none; }
.atelier-root .gv-fare-breakdown summary::after {
    content: '';
    width: 8px; height: 8px;
    border-right: 1.5px solid var(--ink-muted);
    border-bottom: 1.5px solid var(--ink-muted);
    transform: rotate(45deg);
    transition: transform 0.2s;
    margin-right: 4px;
}
.atelier-root .gv-fare-breakdown[open] summary::after { transform: rotate(-135deg); }
.atelier-root .gv-fare-row {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    font-size: 13px;
    color: var(--ink-soft);
}
.atelier-root .gv-fare-row.is-discount { color: var(--green); }
.atelier-root .gv-fare-row strong { color: var(--ink); font-weight: 500; }
.atelier-root .gv-fare-row:last-child { padding-bottom: 14px; }
.atelier-root .gv-receipt-total {
    background: var(--surface-soft);
    padding: 20px 26px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* Session 15.2.2 — the previous 15.2.1 `.gv-receipt-total.is-interactive`
   subtle-hover affordance has been REMOVED. The Step 3 trip-summary pay
   surface in the `details` substate is now rendered with the shared
   `.gv-pay-cta` class above (same visual as the sticky CTA). The bare
   `.gv-receipt-total` rule (just below) still renders the plain non-
   interactive totals in every non-`details` substate. */
.atelier-root .gv-receipt-total-label {
    font-size: 13px;
    color: var(--ink-soft);
    font-weight: 500;
}
.atelier-root .gv-receipt-total-value {
    font-family: var(--serif);
    font-size: 28px;
    font-weight: 500;
    color: var(--ink);
    line-height: 1;
    letter-spacing: -0.01em;
}
.atelier-root .gv-promo-row {
    padding: 14px 26px;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    background: var(--surface-soft);
}
.atelier-root .gv-promo-input-row {
    display: flex;
    gap: 8px;
}
.atelier-root .gv-promo-input {
    flex: 1;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s;
}
.atelier-root .gv-promo-input:focus { border-color: var(--accent); }
.atelier-root .gv-promo-btn {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 16px;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.15s;
}
.atelier-root .gv-promo-btn:hover {
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
}
/* -----------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
    .atelier-root .gv-vehicle-card {
        grid-template-columns: 220px minmax(0, 1fr) auto;
    }
    .atelier-root .gv-vehicle-aside { min-width: 180px; }
}
@media (max-width: 1000px) {
    /* Session 15.1.3 Polish Fix 9 — drop the `order: -1` that previously
       flipped .gv-receipt above the section on mobile. Customer arrives at
       Step 3 already committed (vehicle chosen, price seen); the next
       conversion ask is contact info. Letting the source DOM order render
       (section.Your-Details → aside.gv-receipt) means the form is at the
       top of the screen on mobile, with the trip summary card below as
       reference. Just resets sticky→relative since the desktop rule's
       position: sticky relies on the right column being its own grid track. */
    .atelier-root .gv-receipt { position: relative; top: 0; }
    .atelier-root .gv-section-card { padding: 22px; }
    .atelier-root .gv-card-grid { grid-template-columns: minmax(0, 1fr); }
    .atelier-root .gv-payment-methods { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 980px) {
    .atelier-root .gv-main { grid-template-columns: minmax(0, 1fr); padding: 20px 16px 40px; }
    .atelier-root .gv-map-canvas {
        position: relative; top: 0;
        height: 320px; min-height: 320px;
        order: -1;
    }
    .atelier-root .gv-form-card { padding: 24px 22px; }
    .atelier-root .gv-headline { font-size: 28px; }
    .atelier-root .gv-header { padding: 14px 20px; }
    .atelier-root .gv-steps { padding: 16px 20px 14px; }
    .atelier-root .gv-step-divider { width: 24px; }
    .atelier-root .gv-trip-card { padding: 14px 16px; }
    .atelier-root .gv-trust-strip { padding: 10px 14px; flex-wrap: wrap; }
    .atelier-root .gv-field-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
    .atelier-root .gv-aside-stack { position: relative; top: 0; }
    /* Card sub-element reflow rules (photo aspect-ratio, aside flex direction,
       select width) removed from this block. The @container gv-vehicle-card
       block at end of file is now the sole driver of every card sub-element
       layout shift, matching the taxibooking themes. Mixing viewport and
       container drivers caused a split where, under iframe embedding with
       viewport < 900px but card container >= 600px, sub-elements stacked
       while the grid stayed wide. The remaining rules in this block are
       genuinely page-level (sidebar sticky-off, action-bar chrome). */
    .atelier-root .gv-action-bar { padding: 12px 16px; flex-wrap: wrap; }
}
/* Step 2 override — vehicle cards need substantially more room than the
   map/trust sidebar. Step 1 keeps the near-50/50 ratio (form vs big map). */
.atelier-root .gv-main.gv-main-step2 {
    grid-template-columns: minmax(0, 2.4fr) minmax(0, 1fr);
}
@media (max-width: 980px) {
    .atelier-root .gv-main.gv-main-step2 {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* Session 15.1.1 Polish Fix 3 — Step 3 grid moved out of inline style.
   The previous `<main style="grid-template-columns: minmax(0, 1fr) 380px;">`
   couldn't be overridden by mobile breakpoints (inline style specificity
   trumps non-!important CSS), so the 380px receipt column survived the
   980px collapse and forced body width past the iPhone viewport. Now
   the desktop ratio lives here and the 980px breakpoint cleanly collapses
   it to a single column — matching the existing Step 2 contract. */
.atelier-root .gv-main.gv-main--step3 {
    grid-template-columns: minmax(0, 1fr) 380px;
}
@media (max-width: 980px) {
    .atelier-root .gv-main.gv-main--step3 {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* -----------------------------------------------------------------------------
   Mobile pass — iPhone 12 Safari (390px) and similar narrow viewports.
   Refines the layout the 980/900/1000 rules collapse to: tightens chrome,
   replaces too-long labels with short equivalents (via font-size:0 + ::after
   since the labels live in Blade text nodes we cannot edit), reorders Step 1
   so the form shows above the trust strip and map, makes the trust strip a
   vertical solid-ink stack, flips Step 2 vehicle cards to photo-on-top, makes
   Step 3's gv-cta-block sticky, hides Step 2's mini-map sidebar element.

   Visual contract: /home/mike/gvbooking/atelier-mockups/gvbooking-mobile-step{1,2,3}.html
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {

    /* Header — brand on left, single 24/7 chip on right.
       Dispatch phone meta-item is hidden when present (pre-existing
       :first-child:not(:last-child) targets it without needing :has).
       The "24/7 dispatch" label is replaced with "24/7" via font-size:0 +
       ::after on the last meta-item, since the literal text is a Blade
       text node we cannot edit. */
    .atelier-root .gv-header {
        padding: 12px 14px;
        gap: 10px;
    }
    .atelier-root .gv-brand {
        gap: 10px;
        min-width: 0;
        flex: 1;
    }
    .atelier-root .gv-brand-mark {
        width: 32px; height: 32px;
        font-size: 16px;
        flex-shrink: 0;
    }
    .atelier-root .gv-brand > div {
        min-width: 0;
        flex: 1;
    }
    .atelier-root .gv-brand-name {
        font-size: 17px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .atelier-root .gv-brand-tag {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 10px;
    }
    .atelier-root .gv-header-meta {
        gap: 0;
        flex-shrink: 0;
    }
    .atelier-root .gv-header-meta-item:first-child:not(:last-child) {
        display: none;
    }
    .atelier-root .gv-header-meta-item:last-child {
        font-size: 0;
        gap: 6px;
    }
    .atelier-root .gv-header-meta-item:last-child::after {
        content: "24/7";
        font-size: 12px;
        font-weight: 500;
        color: var(--ink-soft);
    }
    .atelier-root .gv-header-meta-item:last-child svg {
        width: 14px; height: 14px;
    }

    /* Step indicator — circles + short labels ("Trip" / "Vehicle" / "Confirm").
       Source labels in atelier-3-step.blade.php are "Trip details" / "Vehicle"
       / "Confirm", living as text nodes adjacent to .gv-step-num — we can't
       wrap or rename them via CSS, so we hide them with font-size:0 on the
       parent and re-introduce short labels via ::after on each .gv-step. */
    .atelier-root .gv-steps {
        padding: 12px 14px 12px;
        gap: 6px;
        font-size: 0;
        flex-wrap: nowrap;
    }
    .atelier-root .gv-step {
        padding: 0;
        gap: 6px;
        font-size: 0;
    }
    .atelier-root .gv-step-num {
        width: 22px; height: 22px;
        font-size: 12px;
    }
    .atelier-root .gv-step::after {
        font-size: 10px;
        font-weight: 500;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: inherit;
        white-space: nowrap;
    }
    .atelier-root .gv-step:nth-child(1)::after { content: "Trip"; }
    .atelier-root .gv-step:nth-child(3)::after { content: "Vehicle"; }
    .atelier-root .gv-step:nth-child(5)::after { content: "Confirm"; }
    .atelier-root .gv-step-divider {
        width: 12px;
    }

    /* Main grid — single column with 0 outer padding so cards bleed to edges
       (matches mockup). Step 1: form above trust strip above map. Override
       the 980px `gv-map-canvas { order: -1 }` so the form (DOM order: first)
       leads the visual flow. */
    .atelier-root .gv-main {
        padding: 0 0 24px;
        gap: 0;
    }

    /* Form card — full bleed, smaller padding, mobile headline scale */
    .atelier-root .gv-form-card {
        border-radius: 0;
        box-shadow: none;
        padding: 20px 16px 24px;
        margin: 0;
    }
    .atelier-root .gv-headline {
        font-size: 26px;
        margin-bottom: 8px;
    }
    .atelier-root .gv-subheadline {
        font-size: 13px;
        margin-bottom: 20px;
        padding-right: 4px;
        word-break: break-word;
    }
    .atelier-root .gv-eyebrow {
        font-size: 11px;
        margin-bottom: 12px;
    }

    /* Service-type segmented control — three flex tabs with vertical
       icon-above-label stacking so all three labels (Flat rate / Hourly /
       Shuttle) fit at 390px without horizontal overflow. */
    .atelier-root .gv-service-types {
        gap: 4px;
        margin-bottom: 18px;
    }
    .atelier-root .gv-service-type {
        flex-direction: column;
        padding: 10px 4px;
        gap: 4px;
        font-size: 12px;
        min-width: 0;
    }
    .atelier-root .gv-service-type svg {
        width: 16px; height: 16px;
    }

    /* Date / Time row — 2-up but minmax(0, 1fr) so text/icon never push the
       grid wider than the viewport. */
    .atelier-root .gv-field-group-2 {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
    }
    .atelier-root .gv-field {
        min-width: 0;
        padding: 10px 14px 10px 44px;
    }
    .atelier-root .gv-field-icon {
        left: 14px;
        bottom: 10px;
        width: 18px; height: 18px;
    }
    .atelier-root .gv-field-label {
        font-size: 10px;
    }
    .atelier-root .gv-field input,
    .atelier-root .gv-field textarea {
        font-size: 14px;
    }
    .atelier-root .gv-route-thread::before {
        left: 23px;
        top: 56px;
        bottom: 56px;
    }

    /* Passengers / Luggage — keep 2-up but tighten and replace the long
       "Passengers" / "Luggage" labels with "Pax" / "Bags" (via font-size:0
       + ::after, since the literals are Blade text nodes). */
    .atelier-root .gv-stepper-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px;
        margin-bottom: 18px;
    }
    .atelier-root .gv-stepper {
        padding: 12px;
        gap: 8px;
    }
    .atelier-root .gv-stepper-info {
        gap: 8px;
        min-width: 0;
    }
    .atelier-root .gv-stepper-icon {
        width: 30px; height: 30px;
        flex-shrink: 0;
    }
    .atelier-root .gv-stepper-value {
        font-size: 20px;
    }
    /* Stepper label desktop/mobile swap — both spans are rendered in the
       Blade partial; CSS shows the right one per breakpoint. This replaces
       the previous `font-size: 0 + ::after { content: "Pax" }` trick which
       could flash the original "Passengers"/"Luggage" text for one frame
       during a Livewire morph before the mobile cascade applied. */
    .atelier-root .gv-stepper-label .gv-label-desktop {
        display: none;
    }
    .atelier-root .gv-stepper-label .gv-label-mobile {
        display: inline;
    }
    .atelier-root .gv-stepper-controls {
        gap: 4px;
        flex-shrink: 0;
    }
    .atelier-root .gv-stepper-btn {
        min-width: 44px; min-height: 44px;
    }

    /* Add-to-trip pills — 2 per row, never overflow horizontally. */
    .atelier-root .gv-options-row {
        gap: 6px;
        margin-bottom: 20px;
    }
    .atelier-root .gv-pill {
        flex: 1 1 calc(50% - 4px);
        min-width: 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 9px 10px;
        font-size: 12px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Return-trip card — title above, Yes/No grid below (mockup). */
    .atelier-root .gv-return {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
        padding: 14px 16px;
        margin-bottom: 20px;
    }
    .atelier-root .gv-return-text {
        font-size: 14px;
    }
    .atelier-root .gv-toggle-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 4px;
        padding: 4px;
    }
    .atelier-root .gv-toggle {
        padding: 8px;
        text-align: center;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* CTA + confidence block. Shared between .gv-cta and .gv-pay-cta. */
    .atelier-root .gv-cta,
    .atelier-root .gv-pay-cta {
        padding: 14px 16px;
        font-size: 15px;
        margin-bottom: 12px;
    }
    .atelier-root .gv-pay-cta.gv-pay-cta--in-receipt {
        margin-bottom: 0;
    }
    .atelier-root .gv-cta-secondary-text {
        font-size: 11px;
    }

    /* ===== Step 1 — flow order: form → trust strip → map at bottom =====
       The trust strip lives inside .gv-map-canvas in the existing markup, so
       we can't reorder it as a direct child of .gv-main. Instead: keep
       gv-map-canvas as a single grid item but flip its INTERNAL layout to
       flex-direction: column-reverse. DOM order inside gv-map-canvas is:
       map (svg/iframe/img), trip-card?, map-badge?, trust-strip — so reversed
       it becomes: trust-strip first, then the absolute-positioned overlays
       (which we display:none below to avoid them stacking awkwardly above the
       map content), then the map itself last. */
    .atelier-root .gv-map-canvas {
        order: 0;
        position: relative;
        top: 0;
        height: auto;
        min-height: 0;
        border-radius: 0;
        box-shadow: none;
        background: var(--ink);
        display: flex;
        flex-direction: column-reverse;
    }
    .atelier-root .gv-map-canvas .gv-map-img {
        height: 200px;
        flex-shrink: 0;
    }
    /* Trip-card and map-badge are decorative overlays on the desktop map
       (absolute positioning). On the 200px mobile map they would cover most
       of it, and column-reverse strips their absolute positioning context.
       Hide them on mobile — the same trip data is in the form above and on
       Step 2's trip-summary banner. */
    .atelier-root .gv-map-canvas .gv-trip-card,
    .atelier-root .gv-map-canvas .gv-map-badge {
        display: none;
    }
    /* Trust strip — un-absolute, full-bleed solid ink, vertical stack. */
    .atelier-root .gv-trust-strip {
        position: relative;
        top: auto; bottom: auto; left: auto; right: auto;
        background: var(--ink);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border-radius: 0;
        padding: 14px 16px;
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
        flex-wrap: nowrap;
    }
    .atelier-root .gv-trust-divider {
        display: none;
    }
    .atelier-root .gv-trust-item {
        flex: none;
        font-size: 13px;
    }

    /* ===== Step 2 — trip summary banner ===== */
    /* Inline horizontal banner: pickup/dropoff rows truncate with ellipsis
       on a single line each; meta wraps to a second line below them; the
       Edit pill anchors to the right. We use flex-wrap + order to flow the
       sibling .gv-trip-summary-meta onto its own row without restructuring
       HTML. */
    .atelier-root .gv-trip-summary {
        flex-wrap: wrap;
        gap: 10px;
        margin: 14px 14px 18px;
        padding: 12px 14px;
    }
    .atelier-root .gv-trip-summary-pins {
        order: 1;
        flex-shrink: 0;
        padding-top: 0;
    }
    .atelier-root .gv-trip-summary-pins .gv-pin { width: 8px; height: 8px; }
    .atelier-root .gv-trip-summary-pins .gv-pin-line { height: 10px; }
    .atelier-root .gv-trip-summary-text {
        order: 2;
        flex: 1;
        min-width: 0;
    }
    .atelier-root .gv-trip-summary-row {
        font-size: 13px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .atelier-root .gv-edit-link {
        order: 3;
        flex-shrink: 0;
        padding: 6px 12px;
        font-size: 11px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
    .atelier-root .gv-trip-summary-meta {
        order: 4;
        flex-basis: 100%;
        border-left: none;
        padding-left: 0;
        gap: 8px;
        flex-wrap: wrap;
        font-size: 11px;
    }
    .atelier-root .gv-trip-summary-meta-item svg {
        width: 11px; height: 11px;
    }

    /* ===== Step 2 — page heading + section label tighten ===== */
    .atelier-root .gv-page-heading {
        padding: 0 14px;
        margin-bottom: 14px;
    }
    .atelier-root .gv-section-label {
        padding: 0 14px;
        font-size: 10px;
        margin-bottom: 10px;
    }

    /* ===== Step 2 — vehicle cards (vertical: photo on top) ===== */
    /* The 900px breakpoint already collapses to 1 column. Refine sizing,
       padding and the price+select row to match the mockup at 390px. */
    .atelier-root .gv-vehicle-list {
        padding: 0 14px;
        gap: 14px;
    }
    .atelier-root .gv-vehicle-card {
        grid-template-columns: minmax(0, 1fr);
        border-radius: var(--radius-lg);
    }
    .atelier-root .gv-vehicle-photo {
        aspect-ratio: 16 / 10;
    }
    .atelier-root .gv-vehicle-tag {
        top: 12px; right: 12px;
        max-width: calc(100% - 24px);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .atelier-root .gv-vehicle-body {
        padding: 16px;
        min-width: 0;
    }
    .atelier-root .gv-vehicle-name {
        font-size: 20px;
    }
    .atelier-root .gv-vehicle-examples {
        font-size: 12px;
        margin-bottom: 12px;
    }
    .atelier-root .gv-vehicle-specs {
        gap: 12px;
        font-size: 12px;
        margin-bottom: 12px;
    }
    .atelier-root .gv-vehicle-amenities {
        gap: 6px;
    }
    .atelier-root .gv-vehicle-aside {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 14px 16px;
        background: transparent;
        border-left: none;
        border-top: 1px solid var(--line);
        min-width: 0;
    }
    .atelier-root .gv-price-block {
        text-align: left;
        min-width: 0;
    }
    .atelier-root .gv-price-row {
        font-size: 10px;
    }
    .atelier-root .gv-price-amount {
        font-size: 24px;
    }
    .atelier-root .gv-price-amount sup {
        font-size: 14px;
        margin-top: 2px;
    }
    /* Session 15.1.1 Polish Fix 6 — make Select the unmistakable primary
       action on mobile. Phase A left this button as a soft surface-color
       chip on the right side of the aside row; Mike's iPhone screenshot
       made clear it didn't read as THE thing to tap. Inverting to the
       ink token gives it the highest contrast on the card and matches
       the desktop hover/selected states. Width: auto keeps it sitting
       right of the price block (the photo-on-top mobile card layout is
       the Phase A contract, not changed here). */
    .atelier-root .gv-vehicle-select {
        width: auto;
        flex-shrink: 0;
        padding: 14px 22px;
        font-size: 14px;
        font-weight: 600;
        min-height: 48px;
        background: var(--ink);
        color: var(--bg);
        border-color: var(--ink);
    }
    .atelier-root .gv-vehicle-select svg {
        width: 16px;
        height: 16px;
    }

    /* ===== Step 2 — sidebar collapses below list ===== */
    /* The aside-stack is already a 2nd grid row at 980px. Hide the mini-map
       at mobile (decorative; the trip-summary banner already shows the route)
       and turn the trust card into a 2x2 grid like the mockup. */
    .atelier-root .gv-aside-stack {
        padding: 18px 14px 0;
        gap: 0;
    }
    .atelier-root .gv-mini-map {
        display: none; /* decorative on mobile; route is in trip-summary banner above */
    }
    .atelier-root .gv-trust-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        column-gap: 14px;
        row-gap: 12px;
        padding: 18px 16px;
    }
    .atelier-root .gv-trust-eyebrow {
        grid-column: 1 / -1;
        margin-bottom: 0;
    }
    .atelier-root .gv-trust-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 0;
        border-bottom: none;
    }
    .atelier-root .gv-trust-row + .gv-trust-row {
        border-top: none;
    }
    .atelier-root .gv-trust-icon {
        width: 28px; height: 28px;
        margin-bottom: 2px;
    }
    .atelier-root .gv-trust-text {
        font-size: 12px;
    }
    .atelier-root .gv-trust-text em {
        font-size: 11px;
    }

    /* ===== Step 2 — sticky bottom action bar ===== */
    .atelier-root .gv-action-bar {
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        gap: 10px;
        margin-top: 16px;
    }
    .atelier-root .gv-action-bar-summary {
        gap: 10px;
        flex: 1;
        min-width: 0;
    }
    .atelier-root .gv-action-bar-vehicle-thumb {
        width: 40px; height: 30px;
    }
    .atelier-root .gv-action-bar-vehicle-info {
        font-size: 12px;
        min-width: 0;
        overflow: hidden;
    }
    .atelier-root .gv-action-bar-vehicle-info strong {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .atelier-root .gv-action-bar-vehicle-info span {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        display: block;
    }
    .atelier-root .gv-action-bar-divider {
        display: none;
    }
    .atelier-root .gv-action-bar-price-value {
        font-size: 18px;
    }
    .atelier-root .gv-action-cta {
        padding: 12px 14px;
        font-size: 13px;
        gap: 6px;
        flex-shrink: 0;
    }

    /* ===== Step 3 — full-bleed form sections + sticky confirm CTA =====
       Source DOM order (section first, aside second) renders straight
       through on mobile after Polish Fix 9 dropped the prior order:-1
       on .gv-receipt — Your Details now leads, Trip Summary follows.
       Here we tighten paddings and add a sticky confirm CTA at the bottom. */
    .atelier-root .gv-receipt {
        margin: 14px 14px 18px !important;
    }
    .atelier-root .gv-receipt-header {
        padding: 16px 18px;
    }
    .atelier-root .gv-receipt-title {
        font-size: 18px;
    }
    .atelier-root .gv-receipt-vehicle {
        padding: 14px 18px;
        gap: 12px;
    }
    .atelier-root .gv-receipt-vehicle-img {
        width: 60px; height: 42px;
    }
    .atelier-root .gv-receipt-body {
        padding: 16px 18px;
    }
    .atelier-root .gv-promo-row {
        padding: 12px 18px;
    }
    .atelier-root .gv-fare-breakdown {
        padding: 0 18px;
    }
    .atelier-root .gv-receipt-total {
        padding: 16px 18px;
    }
    .atelier-root .gv-receipt-total-value {
        font-size: 24px;
    }
    .atelier-root .gv-section-card {
        margin: 0 14px 12px;
        padding: 18px 16px;
        border-radius: var(--radius-lg);
    }
    .atelier-root .gv-section-title {
        font-size: 18px;
    }
    .atelier-root .gv-section-num {
        width: 26px; height: 26px;
    }
    .atelier-root .gv-section-sub {
        font-size: 12px;
        margin-left: 36px;
        margin-bottom: 16px;
    }
    /* Card grid (number / exp / cvc) — at mobile, stack all three vertically.
       The desktop rule is `1fr 90px 90px`; the 1000px rule already overrides
       to `1fr` (single column). Verify it sticks. */
    .atelier-root .gv-card-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }
    .atelier-root .gv-payment-methods {
        grid-template-columns: minmax(0, 1fr);
    }
    .atelier-root .gv-payment-method {
        padding: 12px 14px;
    }
    /* Sticky bottom Confirm CTA — sits at viewport bottom on mobile so the
       customer always sees the price + confirm button while scrolling
       through the form. */
    .atelier-root .gv-cta-block {
        position: sticky;
        bottom: 0;
        background: var(--surface);
        border-top: 1px solid var(--line);
        padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
        margin: 16px -14px 0;
        box-shadow: 0 -4px 20px rgba(26,26,26,0.05);
        z-index: 10;
    }
    .atelier-root .gv-cta-block .gv-cta {
        margin-bottom: 6px;
        padding: 14px 16px;
    }

    /* Booking complete card — full-bleed on mobile. */
    .atelier-root .gv-form-card[style*="max-width: 640px"] {
        margin: 0 !important;
        border-radius: 0 !important;
    }
}
/* Narrow phones (iPhone 14 390px, iPhone SE 375px) — collapse 2-up field
   groups to single column so date+time, return-date+return-time pairs each
   own a full row. Below 480px there isn't enough horizontal space for the
   44px icon-padding + native iOS date/time chrome inside half the viewport. */
@media (max-width: 480px) {
    .atelier-root .gv-field-group-2 {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    /* Session 15.1.3 Polish Fix 7 — Step 2 vehicle-card price+select row
       collapses to a vertical stack at narrow phones. The 768 mobile rule
       set .gv-vehicle-aside to flex-direction: row with the Select button
       pinned via flex-shrink: 0 (Polish Fix 6's prominence boost). On
       iPhone SE 375px the row's intrinsic min-content (price block + gap
       + non-shrinking Select) summed past the available card-inner width,
       forcing .gv-main-step2's `grid-template-columns: 1fr` (resolved to
       minmax(auto, 1fr)) wider than the viewport because grid `auto` min
       picks the largest min-content of any track item. body:has(.atelier-root)
       overflow-x: clip from polish Fix 1 silently clipped the right edge,
       so trip-summary, hero copy, AND the Select button all chopped at the
       same viewport boundary. Stacking the aside vertically here means
       each child sets the row's min-content individually instead of
       summing — the column track resolves to viewport width and nothing
       overflows. The overflow-x: clip stays as defensive backstop and is
       now a no-op for this case. */
    .atelier-root .gv-vehicle-aside {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .atelier-root .gv-vehicle-aside .gv-price-block {
        text-align: left;
        width: 100%;
    }
    .atelier-root .gv-vehicle-aside .gv-vehicle-select {
        width: 100%;
        justify-content: center;
    }
}
/* Narrow phones (e.g. iPhone SE 375px and below) — minor tightening only. */
@media (max-width: 420px) {
    .atelier-root .gv-headline {
        font-size: 22px;
    }
    .atelier-root .gv-form-card,
    .atelier-root .gv-section-card {
        padding-left: 14px;
        padding-right: 14px;
    }
    .atelier-root .gv-section-card {
        margin-left: 12px;
        margin-right: 12px;
    }
    .atelier-root .gv-receipt {
        margin-left: 12px !important;
        margin-right: 12px !important;
    }
    .atelier-root .gv-vehicle-list {
        padding: 0 12px;
    }
    .atelier-root .gv-trip-summary {
        margin: 12px 12px 16px;
    }
    .atelier-root .gv-vehicle-name {
        font-size: 18px;
    }
    .atelier-root .gv-price-amount {
        font-size: 22px;
    }

    /* Session 15.1.1 Polish Fix 2 — stepper count visibility regression.
       Phase A bumped `.gv-stepper-btn` to 44×44 for the Apple-HIG tap
       target. On iPhone SE (375px) and iPhone 14 (390px) the stepper
       cell inner width is only ~120-128px, but the desktop layout
       (icon + gap + label/value block + space-between + 44 + gap + 44)
       totals ~160px — the "−" button overlapped the count number,
       hiding the "2" / "1" digit Mike reported in the iPhone SE screenshot.
       Fix: hide the decorative icon (the "Pax"/"Bags" mobile label is
       already the primary field affordance) and tighten the stepper
       padding + control gap. The +/− buttons keep their 44×44 tap
       target — only the icon and the surrounding chrome shrink. */
    .atelier-root .gv-stepper {
        padding: 10px;
        gap: 4px;
    }
    .atelier-root .gv-stepper-icon {
        display: none;
    }
    .atelier-root .gv-stepper-info {
        gap: 0;
        min-width: 0;
        flex: 1;
    }
    .atelier-root .gv-stepper-controls {
        gap: 2px;
        flex-shrink: 0;
    }
}
/* =============================================================================
   Session 7.1 — Embed-mode safety net (iframe resize feedback fix)
   =============================================================================
   When the wizard is loaded inside the embed iframe, embed-emitter.js stamps
   `[data-gvbooking-embedded]` on <html> at boot. These overrides neutralize the
   viewport-driven heights that would otherwise feed an infinite resize loop
   (parent grows iframe -> 100vh grows -> map/root grow -> measurement grows ->
   parent grows iframe again). Standalone /book/{slug} pages are not affected
   because the attribute is only set inside an iframe.
   ============================================================================= */
[data-gvbooking-embedded] .atelier-root {
    min-height: 0;
}
/* Embedded-only: force the map media element (iframe or static IMG) to fill
   the .gv-map-canvas container. Without this it falls back to a short
   intrinsic height (~150px) and leaves brown background visible below. */
[data-gvbooking-embedded] .atelier-root .gv-map-canvas .gv-map-img {
    width: 100%;
    height: 100%;
    min-height: 480px;
    object-fit: cover;
}
/* The measurement marker is on the layout wrapper, so body itself should
   size to its content rather than fill the iframe viewport. */
body:has([data-gvbooking-measure]) {
    height: auto;
    min-height: 0;
}
/* =============================================================================
   SESSION 10 — STEP 3 PAYMENT STAGE
   =============================================================================

   The payment-iframe surface from §6.5 of the design spec. The GHL invoice
   page (Nuxt SPA loaded from link.fastpaydirect.com) is rendered inside an
   iframe sized by the --gv-iframe-clip-viewport-h variable below. The
   native Atelier "Amount to pay" summary lives above the iframe; when the
   customer clicks the green "Pay $X.XX" button inside the iframe, GHL
   opens its hosted payment modal which overlays the entire viewport.

   Step-3 payment-stage tunables:

   --gv-iframe-clip-offset — translateY applied to the GHL invoice iframe
       to land the green "Pay" button in the visible viewport strip.

       Current value: 0px.

       Historical note: a value of -380px was used during a May 11, 2026
       live test against AtlantaAirport.Cab and the comment that lived here
       previously claimed that value was the verified magic number. The
       value was reset to 0 at some point and the comment was not updated.
       As of May 15, 2026, Mike confirmed the payment surface renders
       correctly with 0 offset.

       P3 followup: verify on a real production booking that the green Pay
       button is fully visible at the current 0 offset, and consider
       tightening the clip strip if dead-space is visible above/below the
       button.

   --gv-iframe-clip-viewport-h — visible height of the iframe in px.
       Current value: 600px. Mobile keeps the same value via the
       max-width: 768px rules near line 2587.
   ============================================================================= */
.atelier-root {
    --gv-iframe-clip-offset: 0;
    --gv-iframe-clip-viewport-h: 600px;
}
.atelier-root .gv-payment-stage {
    margin-top: 20px;
    border-top: 1px solid var(--line);
    background: var(--surface);
}
.atelier-root .gv-payment-stage__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 24px;
    background: linear-gradient(180deg, var(--surface) 0%, var(--surface-soft) 100%);
    border-bottom: 1px solid var(--line);
    flex-wrap: wrap;
    gap: 8px;
}
.atelier-root .gv-payment-stage__secure {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--green);
    font-weight: 600;
    font-size: 13px;
}
.atelier-root .gv-payment-stage__secure svg {
    width: 16px;
    height: 16px;
}
.atelier-root .gv-payment-stage__meta {
    font-size: 12px;
    color: var(--ink-muted);
}
.atelier-root .gv-payment-stage__summary {
    padding: 28px 24px 24px;
    text-align: center;
    background: var(--surface);
}
.atelier-root .gv-payment-stage__summary-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--ink-muted);
    margin-bottom: 8px;
}
.atelier-root .gv-payment-stage__summary-amount {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 48px;
    color: var(--ink);
    line-height: 1;
}
.atelier-root .gv-payment-stage__summary-sub {
    font-size: 13px;
    color: var(--ink-soft);
    margin-top: 10px;
}
/* THE CLIP. overflow:hidden + position:absolute + top:negative is what
   hides the GHL invoice header/billing/line-items and lands the Pay
   button in the visible region. */
.atelier-root .gv-iframe-viewport {
    position: relative;
    height: var(--gv-iframe-clip-viewport-h);
    overflow: hidden;
    background: var(--surface-soft);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.atelier-root .gv-iframe-viewport iframe {
    position: absolute;
    top: var(--gv-iframe-clip-offset);
    left: 0;
    width: 100%;
    height: 600px;
    border: none;
    background: white;
}
.atelier-root .gv-payment-stage__cta-hint {
    padding: 14px 24px 18px;
    text-align: center;
    font-size: 13px;
    color: var(--ink-muted);
}
.atelier-root .gv-payment-stage__footer {
    padding: 14px 24px;
    background: var(--surface-soft);
    border-top: 1px solid var(--line);
    text-align: center;
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.5;
}
.atelier-root .gv-payment-stage__footer strong {
    color: var(--ink-soft);
}
/* Mobile — drop the iframe viewport height slightly; the Pay button is
   still landed inside the strip because GHL's mobile breakpoint
   collapses the right rail too. */
@media (max-width: 768px) {
    .atelier-root {
        --gv-iframe-clip-viewport-h: 600px;
    }
    .atelier-root .gv-payment-stage__summary-amount {
        font-size: 40px;
    }
}
/* Spinner — used by step3_substate='creating_invoice'. */
.atelier-root .gv-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid var(--surface-soft);
    border-top-color: var(--ink);
    border-radius: 50%;
    margin: 0 auto 20px;
    animation: gvSpin 0.8s linear infinite;
}
@keyframes gvSpin {
    to { transform: rotate(360deg); }
}
.atelier-root .gv-spinner-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 22px;
    color: var(--ink);
    margin: 0 0 6px;
}
.atelier-root .gv-spinner-sub {
    font-size: 13px;
    color: var(--ink-soft);
    margin: 0;
}
/* Success mark — used by step3_substate='payment_succeeded'. */
.atelier-root .gv-success-mark {
    width: 72px;
    height: 72px;
    margin: 0 auto 18px;
    background: var(--green);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
}
.atelier-root .gv-success-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 28px;
    color: var(--ink);
    margin: 0 0 8px;
}
.atelier-root .gv-success-sub {
    color: var(--ink-soft);
    font-size: 14px;
    margin: 0;
}
/* Invoice-error panel — used by step3_substate='invoice_error'. */
.atelier-root .gv-error-panel {
    background: var(--surface-soft);
    border: 1px solid var(--line);
    border-left: 3px solid var(--accent);
    border-radius: var(--radius-sm);
    padding: 18px 22px;
    margin-top: 12px;
}
/* Session 14 — neutral variant for the payment-wait timeout panel.
   Same cream surface but no terracotta accent — this state is calm-
   waiting, not error. Title gets a small animated dot to communicate
   ongoing activity. */
.atelier-root .gv-error-panel--neutral {
    border-left: 1px solid var(--line);
}
.atelier-root .gv-error-panel--neutral .gv-error-panel-title::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ink-soft);
    margin-right: 10px;
    vertical-align: middle;
    animation: gv-calm-pulse 1.6s ease-in-out infinite;
}
@keyframes gv-calm-pulse {
    0%, 100% { opacity: 0.35; }
    50%      { opacity: 1; }
}
.atelier-root .gv-error-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.atelier-root .gv-error-panel-icon {
    font-size: 22px;
    color: var(--accent);
}
.atelier-root .gv-error-panel-title {
    font-family: var(--serif);
    font-weight: 600;
    font-size: 18px;
    color: var(--ink);
    margin: 0;
}
.atelier-root .gv-error-panel-body {
    color: var(--ink-soft);
    font-size: 14px;
    line-height: 1.5;
    margin: 0 0 16px;
}
.atelier-root .gv-error-panel-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.atelier-root .gv-error-panel-ref {
    margin: 14px 0 0;
    font-size: 11px;
    color: var(--ink-muted);
    text-align: right;
}
.atelier-root .gv-error-panel-ref strong {
    color: var(--ink-soft);
    font-family: var(--sans);
    letter-spacing: 0.04em;
}
/* Primary/secondary buttons inside the error panel. */
.atelier-root .gv-btn-primary {
    background: var(--ink);
    color: var(--surface);
    border: none;
    border-radius: var(--radius-sm);
    padding: 12px 22px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.atelier-root .gv-btn-primary:hover {
    background: #000;
}
.atelier-root .gv-btn-primary:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.atelier-root .gv-btn-secondary {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 11px 20px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.atelier-root .gv-btn-secondary:hover {
    border-color: var(--ink);
}
/* =============================================================================
   Session 15.1.6 Fix D — defense-in-depth containment on the Step 2 chain.
   =============================================================================
   Even after Fix B hardens every grid track to minmax(0, 1fr), defense in
   depth keeps any future regression localized: if a descendant ends up with
   intrinsic min-content > track width (e.g. an explicit width:N on a span,
   a long unbreakable city name in a customer-edited form field, a font that
   loads late and changes word widths), the overflow stops at the card edge
   instead of propagating up to .gv-main-step2 and then visually clipping at
   the device boundary.

   Pattern: min-width: 0 (so flex/grid items can shrink below their min-content)
   and max-width: 100% (so block elements never exceed their container). The
   vehicle-photo media gets max-width 100% + height: auto so a large photo
   never widens its own box.

   Scoped to @media (max-width: 980px) — same breakpoint where Step 2's main
   grid collapses to a single column. Desktop keeps its existing aside
   `min-width: 200px` and per-track sizing untouched.
   ============================================================================= */
@media (max-width: 980px) {
    .atelier-root .gv-vehicle-list {
        min-width: 0;
        max-width: 100%;
    }
    .atelier-root .gv-vehicle-card {
        /* `overflow: hidden` already on the base rule (line ~818). */
        max-width: 100%;
        min-width: 0;
    }
    .atelier-root .gv-vehicle-photo {
        min-width: 0;
        max-width: 100%;
    }
    .atelier-root .gv-vehicle-photo img,
    .atelier-root .gv-vehicle-photo svg {
        /* Preserve the base-rule sizing (position: absolute; inset: 0;
           width/height: 100%; object-fit: cover) even at narrow widths.
           Earlier `height: auto` here released the absolutely-positioned
           image to its natural intrinsic height, which let the photo
           bleed past its zone when the card collapsed in embedded
           contexts. */
        max-width: 100%;
        max-height: 100%;
        height: 100%;
    }
    .atelier-root .gv-vehicle-body {
        /* `min-width: 0` already on the base rule (line ~893). */
        max-width: 100%;
    }
    .atelier-root .gv-vehicle-aside {
        min-width: 0;
        max-width: 100%;
    }
    .atelier-root .gv-aside-stack {
        min-width: 0;
        max-width: 100%;
    }
}
/* -----------------------------------------------------------------------------
   Phase C — Payment modal shell.
   Hosts whatever payment surface the selected payment method needs
   (today: the GHL invoice iframe; later: the Stripe Payment Element).
   Live tokens consumed: --gv-modal-backdrop, --gv-z-modal, --surface,
   --surface-soft, --line, --ink, --ink-soft, --ink-muted, --radius-lg,
   --shadow-lg, --serif, --sans. The modal lives on the page root, NOT
   inside .atelier-root, so styles below are selector-global; Classic
   theme can adopt the same shell when Phase F lands.
   -------------------------------------------------------------------------- */
[x-cloak] { display: none !important; }
.gv-modal-backdrop {
    position: fixed;
    inset: 0;
    background: var(--gv-modal-backdrop, rgba(26, 26, 26, 0.55));
    backdrop-filter: blur(8px) saturate(120%);
    -webkit-backdrop-filter: blur(8px) saturate(120%);
    z-index: var(--gv-z-modal, 100);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    overflow-y: auto;
}
.gv-modal-card {
    background: var(--surface, #ffffff);
    border-radius: var(--radius-lg, 20px);
    box-shadow: var(--shadow-lg, 0 12px 48px rgba(26, 26, 26, 0.10));
    width: 100%;
    max-width: 560px;
    max-height: min(90vh, 720px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    font-family: var(--sans, sans-serif);
    color: var(--ink, #1a1a1a);
}
.gv-modal-card .gv-sheet-handle {
    display: none;
}
.gv-modal-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 24px 12px;
    border-bottom: 1px solid var(--line, #e8e4dc);
}
.gv-modal-card__title {
    font-family: var(--serif, 'Fraunces', serif);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.2;
    color: var(--ink, #1a1a1a);
    margin: 0;
}
.gv-modal-card__close {
    background: transparent;
    border: 0;
    padding: 6px;
    color: var(--ink-muted, #9a9a96);
    cursor: pointer;
    border-radius: 999px;
    line-height: 0;
    transition: color 0.18s, background 0.18s;
}
.gv-modal-card__close:hover,
.gv-modal-card__close:focus-visible {
    color: var(--ink, #1a1a1a);
    background: var(--surface-soft, #faf8f3);
    outline: none;
}
.gv-modal-card__close:focus-visible {
    box-shadow: var(--shadow-focus, 0 0 0 4px rgba(200, 71, 42, 0.12));
}
.gv-modal-card__body {
    padding: 16px 24px 24px;
    flex: 1 1 auto;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.gv-modal-card__footer {
    padding: 14px 24px;
    background: var(--surface-soft, #faf8f3);
    border-top: 1px solid var(--line, #e8e4dc);
    text-align: center;
    font-size: 12px;
    color: var(--ink-muted, #9a9a96);
    line-height: 1.5;
}
.gv-modal-card-enter-start {
    opacity: 0;
    transform: scale(0.96);
}
.gv-modal-card-enter-end {
    opacity: 1;
    transform: scale(1);
}
.gv-modal-card-enter {
    transition: opacity 200ms cubic-bezier(.2,.7,.2,1),
                transform 200ms cubic-bezier(.2,.7,.2,1);
}
/* Phase C — payment-stage variant for the modal-hosted GHL iframe.
   The inline clip (--gv-iframe-clip-offset / --gv-iframe-clip-viewport-h)
   stayed declared for back-compat (per RECON implication #8) but is
   intentionally NOT applied here: the modal hosts a clean ~520px iframe
   with no clipping. */
.gv-payment-stage--modal {
    margin: 0;
    border-top: 0;
    background: var(--surface);
}
.gv-payment-stage--modal .gv-payment-stage__summary {
    padding: 8px 0 20px;
}
.gv-payment-stage--modal .gv-payment-stage__summary-amount {
    font-size: 40px;
}
.gv-iframe-host {
    position: relative;
    width: 100%;
    min-height: 720px;
    background: var(--surface-soft);
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--line);
}
.gv-iframe-host iframe {
    width: 100%;
    height: 720px;
    border: 0;
    background: white;
    display: block;
}
@media (max-width: 768px) {
    .gv-iframe-host {
        min-height: 640px;
    }
    .gv-iframe-host iframe {
        height: 640px;
    }
}
@media (max-width: 768px) {
    .gv-modal-backdrop {
        padding: 0;
        align-items: flex-end;
    }
    .gv-modal-card {
        max-width: 100%;
        width: 100%;
        max-height: 92vh;
        border-radius: var(--radius-lg, 20px) var(--radius-lg, 20px) 0 0;
    }
    .gv-modal-card .gv-sheet-handle {
        display: block;
    }
    .gv-modal-card-enter-start {
        opacity: 0;
        transform: translateY(16px);
    }
    .gv-modal-card-enter-end {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ============================================================
   Phase D6 — Thank-you page.
   Mobile-first (375px viewport) layout for the post-booking
   confirmation surface. Replaces the inline block at
   atelier-3-step.blade.php lines 62-82 (Session 15.1 Bug 9).
   ============================================================ */
.atelier-root .gv-thank-you-main {
    padding: 24px 16px 48px;
}
.atelier-root .gv-thank-you-card {
    max-width: 640px;
    margin: 0 auto;
    background: var(--surface);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(26, 26, 26, 0.04), 0 1px 12px rgba(26, 26, 26, 0.04);
}
/* Hero / opener */
.atelier-root .gv-thank-you-hero {
    padding: 32px 20px 24px;
    text-align: center;
    background: var(--surface-soft);
    border-bottom: 1px solid var(--line);
}
.atelier-root .gv-thank-you-eyebrow {
    font-family: var(--sans);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin-bottom: 12px;
}
.atelier-root .gv-thank-you-headline {
    font-family: var(--serif);
    font-size: 32px;
    line-height: 1.1;
    color: var(--ink);
    margin: 0 0 12px;
    letter-spacing: -0.01em;
}
.atelier-root .gv-thank-you-headline em {
    font-style: italic;
    color: var(--accent);
    font-weight: 400;
}
.atelier-root .gv-thank-you-sub {
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--ink-soft);
    margin: 0;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
}
/* Confirmation reference card */
.atelier-root .gv-thank-you-reference {
    padding: 20px;
    text-align: center;
    border-bottom: 1px solid var(--line);
    background: var(--surface);
}
.atelier-root .gv-thank-you-reference-label {
    font-family: var(--sans);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.16em;
    color: var(--ink-muted);
    margin-bottom: 6px;
}
.atelier-root .gv-thank-you-reference-value {
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--ink);
    font-weight: 500;
}
.atelier-root .gv-thank-you-reference-email {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-muted);
    margin-top: 10px;
}
.atelier-root .gv-thank-you-reference-email strong {
    color: var(--ink-soft);
    font-weight: 500;
}
/* Section blocks */
.atelier-root .gv-thank-you-section {
    padding: 24px 20px;
    border-bottom: 1px solid var(--line);
}
.atelier-root .gv-thank-you-section:last-of-type {
    border-bottom: none;
}
.atelier-root .gv-thank-you-section-title {
    font-family: var(--serif);
    font-size: 16px;
    color: var(--ink);
    margin: 0 0 16px;
    font-weight: 500;
    letter-spacing: -0.005em;
}
/* Detail list (Your trip) */
.atelier-root .gv-thank-you-detail-list {
    margin: 0;
    font-family: var(--sans);
}
.atelier-root .gv-thank-you-detail-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 0;
    border-bottom: 1px dotted var(--line);
}
.atelier-root .gv-thank-you-detail-row:last-child {
    border-bottom: none;
}
.atelier-root .gv-thank-you-detail-row dt {
    font-family: var(--sans);
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.14em;
    color: var(--ink-muted);
}
.atelier-root .gv-thank-you-detail-row dd {
    margin: 0;
    font-size: 14px;
    color: var(--ink);
    line-height: 1.4;
}
/* Payment block */
.atelier-root .gv-thank-you-payment {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.atelier-root .gv-thank-you-payment-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    font-family: var(--sans);
}
.atelier-root .gv-thank-you-payment-label {
    font-size: 13px;
    color: var(--ink-soft);
}
.atelier-root .gv-thank-you-payment-value {
    font-family: var(--serif);
    font-size: 22px;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.01em;
}
.atelier-root .gv-thank-you-payment-method {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-muted);
    margin-top: -4px;
}
.atelier-root .gv-thank-you-payment-sub {
    font-family: var(--sans);
    font-size: 13px;
    color: var(--ink-soft);
    margin: 8px 0 0;
    line-height: 1.5;
}
/* Badges */
.atelier-root .gv-thank-you-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 500;
    align-self: flex-start;
    margin-top: 4px;
}
.atelier-root .gv-thank-you-badge svg {
    width: 14px;
    height: 14px;
}
.atelier-root .gv-thank-you-badge--paid {
    background: rgba(74, 122, 77, 0.12);
    color: var(--green);
}
.atelier-root .gv-thank-you-badge--authorized {
    /* Distinct neutral blue — not green (paid), not yellow (pending). */
    background: rgba(74, 109, 167, 0.12);
    color: #4a6da7;
}
.atelier-root .gv-thank-you-badge--pending {
    background: rgba(204, 159, 51, 0.14);
    color: #9c7726;
}
.atelier-root .gv-thank-you-badge--voided {
    background: rgba(154, 154, 150, 0.18);
    color: var(--ink-muted);
}
/* Attention block (offline methods) */
.atelier-root .gv-thank-you-attention {
    margin-top: 12px;
    padding: 14px 16px;
    background: rgba(204, 159, 51, 0.10);
    border: 1px solid rgba(204, 159, 51, 0.30);
    border-radius: 10px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.55;
    color: #6f5a1d;
}
/* What happens next */
.atelier-root .gv-thank-you-next-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.atelier-root .gv-thank-you-next-list li {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-family: var(--sans);
    font-size: 14px;
    color: var(--ink-soft);
    line-height: 1.5;
}
.atelier-root .gv-thank-you-next-step {
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 50%;
    background: var(--surface);
    color: var(--accent);
    font-family: var(--serif);
    font-size: 12px;
    font-weight: 500;
}
/* Policy + footnote */
.atelier-root .gv-thank-you-policy {
    padding: 20px;
    background: var(--surface-soft);
    border-top: 1px solid var(--line);
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.55;
    color: var(--ink-soft);
}
.atelier-root .gv-thank-you-policy p {
    margin: 0 0 8px;
}
.atelier-root .gv-thank-you-policy p:last-child {
    margin-bottom: 0;
}
.atelier-root .gv-thank-you-policy-extra {
    color: var(--ink-muted);
    font-size: 12px;
}
.atelier-root .gv-thank-you-policy-phone {
    color: var(--accent);
    text-decoration: none;
    font-weight: 500;
}
.atelier-root .gv-thank-you-footnote {
    padding: 16px 20px 24px;
    text-align: center;
    font-family: var(--sans);
    font-size: 11px;
    color: var(--ink-muted);
    margin: 0;
    line-height: 1.5;
}
/* Desktop (≥769px) — softer presentation, slightly bigger headline */
@media (min-width: 769px) {
    .atelier-root .gv-thank-you-main {
        padding: 48px 24px 64px;
    }
    .atelier-root .gv-thank-you-hero {
        padding: 48px 32px 32px;
    }
    .atelier-root .gv-thank-you-headline {
        font-size: 42px;
    }
    .atelier-root .gv-thank-you-sub {
        font-size: 16px;
    }
    .atelier-root .gv-thank-you-section {
        padding: 28px 32px;
    }
    .atelier-root .gv-thank-you-reference {
        padding: 24px 32px;
    }
    .atelier-root .gv-thank-you-detail-row {
        flex-direction: row;
        align-items: baseline;
        gap: 16px;
    }
    .atelier-root .gv-thank-you-detail-row dt {
        flex: 0 0 100px;
    }
    .atelier-root .gv-thank-you-policy,
    .atelier-root .gv-thank-you-footnote {
        padding-left: 32px;
        padding-right: 32px;
    }
}
/* ============================================================
   Step-1 polish additions (2026-05-23)
   ============================================================
   These rules are APPENDED to atelier.css. They:
   - Rebalance .gv-stepper-select so the dropdown fills the
     value-side real estate (the original min-width: 36px chip
     left a long empty stretch next to the label)
   - Style the new .gv-field--time-picker three-segment cluster
     that replaces native <input type="time"> on Step 1
   - Style the per-stop "×" remove button to match Atelier pills
   ============================================================ */
/* --- Stepper-select rebalance --- */
/* The wide pill-card has two regions: gv-stepper-info (label) on the
   left, gv-stepper-controls (select) on the right. The previous CSS
   sized the select at min-height 36px with auto width — fine on a
   320px mobile but visually anemic on a 600px desktop card. The fix
   gives gv-stepper-controls a minimum width so the select reads as a
   real control, and grows the select font slightly to anchor weight. */
.atelier-root .gv-stepper--select .gv-stepper-controls {
    min-width: 120px;
    display: flex;
    justify-content: flex-end;
}
.atelier-root .gv-stepper--select .gv-stepper-select {
    flex: 0 0 auto;
    min-width: 96px;
    height: 40px;
    padding: 0 36px 0 16px;
    font-size: 15px;
    text-align: left;
    text-align-last: left;
}
/* Mobile keeps the chip compact — at narrow widths even the rebalanced
   control needs to fit a 320px viewport without crowding the label. */
@media (max-width: 768px) {
    .atelier-root .gv-stepper--select .gv-stepper-controls {
        min-width: 88px;
    }
    .atelier-root .gv-stepper--select .gv-stepper-select {
        min-width: 72px;
        height: 36px;
        padding: 0 28px 0 12px;
        font-size: 14px;
    }
}
/* --- Time picker: three-segment cluster --- */
/* Sits inside a gv-field card. The label runs above; the row of three
   selects (hour : minute period) sits below, aligned right against
   the inner padding. Each segment is a pill-shaped select reusing the
   gv-time-picker-segment styling. */
.atelier-root .gv-field--time-picker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 16px 10px 56px;
    position: relative;
    min-height: 64px;
    background: var(--surface-soft);
    border-radius: var(--radius);
}
.atelier-root .gv-field--time-picker .gv-field-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--ink-soft);
}
.atelier-root .gv-field--time-picker .gv-field-label {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
    line-height: 1;
}
.atelier-root .gv-time-picker-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.atelier-root .gv-time-picker-segment {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 34px;
    padding: 0 24px 0 10px;
    border-radius: 8px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: all 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2358514a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 10px 10px;
}
.atelier-root .gv-time-picker-segment:hover {
    border-color: var(--ink);
    color: var(--ink);
}
.atelier-root .gv-time-picker-segment:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}
.atelier-root .gv-time-picker-period {
    min-width: 64px;
    margin-left: 6px;
}
.atelier-root .gv-time-picker-sep {
    color: var(--ink-muted);
    font-weight: 600;
    font-size: 16px;
    line-height: 1;
    user-select: none;
    padding: 0 2px;
}
@media (max-width: 768px) {
    .atelier-root .gv-field--time-picker {
        padding: 10px 14px 10px 50px;
        min-height: 60px;
    }
    .atelier-root .gv-time-picker-segment {
        height: 32px;
        font-size: 14px;
        padding: 0 22px 0 8px;
    }
    .atelier-root .gv-time-picker-period {
        min-width: 56px;
    }
}
/* --- Stop-remove pill: × button to dismiss an extra stop --- */
/* Visually clean cross button aligned with the stop-row's vertical
   midpoint. Smaller than the standard gv-pill so it reads as a
   secondary affordance. */
.atelier-root .gv-pill.gv-stop-remove {
    width: 32px;
    height: 32px;
    min-width: 32px;
    padding: 0;
    display: grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
    color: var(--ink-muted);
}
.atelier-root .gv-pill.gv-stop-remove:hover {
    color: var(--accent);
    border-color: var(--accent);
    background: transparent;
}
/* --- Optionlist & extra custom-field selects on Step 3 ---
   The custom-field component's optionlist / extra branches render a
   native <select> inside a .gv-field-select label. Previously only
   styled inside .gv-childseat-picker; we extend the same pill
   aesthetic globally so e.g. the Meet & Greet question on Step 3
   matches the rest of the wizard's controls. */
.atelier-root .gv-field-select {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 16px;
    background: var(--surface-soft);
    border-radius: var(--radius);
    margin-bottom: 12px;
}
.atelier-root .gv-field-select > .gv-field-label {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
}
.atelier-root .gv-field-select > select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 40px;
    padding: 0 36px 0 14px;
    border-radius: 10px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    transition: all 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2358514a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 12px 12px;
    width: 100%;
}
.atelier-root .gv-field-select > select:hover {
    border-color: var(--ink);
}
.atelier-root .gv-field-select > select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}
/* The child-seat picker has its own narrower select rule (see
   line ~580 of the base atelier.css); the more specific selector
   .gv-childseat-picker .gv-field-select keeps it scoped. The
   global rule above is the fallback for any other .gv-field-select
   that doesn't have a more-specific override. */
/* ============================================================
   Step-1 polish FOLLOW-UP (2026-05-23 — second pass)
   ============================================================
   Appended to atelier.css after the initial step-1-polish block.
   Fixes the date-input alignment regression caused by the
   .gv-field--time-picker being taller than its sibling .gv-field
   inside the same .gv-field-group-2 row.

   The problem: .gv-field-group-2 is a 2-column grid with
   `align-items: stretch` (default), so both children stretch to
   the height of the tallest. The time picker's stacked layout
   (label above, 3 selects below) makes it ~64px tall, which
   stretches the date input vertically — the date column then
   shows extra padding above/below its single line of text.

   Fix: tighten the time picker's vertical rhythm so it matches
   the date input's natural height (~52px including padding),
   and explicitly align-items: stretch the row so both children
   share the same height predictably. The date field's label
   stays in the upper-left position via its existing
   .gv-field--native-picker rule.
   ============================================================ */
/* Match the time-picker card's height to the date field's height. */
.atelier-root .gv-field--time-picker {
    padding: 8px 16px 8px 56px;
    min-height: 52px;
    justify-content: center;
}
.atelier-root .gv-field--time-picker .gv-field-label {
    margin-bottom: 3px;
}
.atelier-root .gv-time-picker-row {
    gap: 3px;
}
/* Slightly shorter pills so the whole cluster fits the 52px card
   without crowding the label above. */
.atelier-root .gv-time-picker-segment {
    height: 28px;
    padding: 0 22px 0 8px;
    font-size: 14px;
    background-size: 9px 9px;
    background-position: right 5px center;
}
.atelier-root .gv-time-picker-period {
    min-width: 56px;
}
.atelier-root .gv-time-picker-sep {
    font-size: 14px;
}
/* Belt-and-braces — explicitly equal-height row. The grid default
   is `stretch` but some flexbox fallback paths inherit `start`,
   so be explicit. */
.atelier-root .gv-field-group-2 {
    align-items: stretch;
}
/* Mobile keeps the same proportions, just smaller pills. */
@media (max-width: 768px) {
    .atelier-root .gv-field--time-picker {
        padding: 8px 14px 8px 50px;
        min-height: 50px;
    }
    .atelier-root .gv-time-picker-segment {
        height: 26px;
        font-size: 13px;
        padding: 0 20px 0 7px;
    }
    .atelier-root .gv-time-picker-period {
        min-width: 50px;
    }
}
/* Step-1 polish — show the eyebrow label on native date/time pickers
   so the date card reads "PICKUP DATE" above its value, symmetrical
   with the time card's "PICKUP TIME" eyebrow. The original
   .gv-field--native-picker rule (line 408) hides this label as a
   hedge against native-browser placeholder collision; date inputs
   with real values don't have that collision, so the label is safe
   to show. */
.atelier-root .gv-field--native-picker .gv-field-label {
    display: block;
    margin-bottom: 2px;
}
/* Step-1 polish — match the date card's layout to the time card.
   The .gv-field--time-picker rule uses flex column + centered to
   group its eyebrow + value pills as a vertically-centered cluster.
   The date card was using default block layout, so its eyebrow sat
   at the top and its input sat below in normal flow — visually
   misaligned with the time card. This makes both cards use the
   same flex layout. Icon repositioned from bottom-anchored to
   center-anchored to match the time card's centered icon. */
.atelier-root .gv-field--native-picker {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 8px;
    padding-bottom: 8px;
}
.atelier-root .gv-field--native-picker .gv-field-icon {
    bottom: auto;
    top: 50%;
    transform: translateY(-50%);
}
/* ============================================================
   Phase D.1.1 — per-stop "Wait time" dropdown
   ============================================================
   Lives inside each .gv-stop-row alongside the address input. The
   dropdown reuses the .gv-field-select visual vocabulary (eyebrow +
   native <select> on a soft surface) but at a tighter width so two
   columns fit comfortably on desktop. On narrow phones the row wraps
   and the dropdown drops below the address — the .gv-stop-row card
   rule below sets flex-wrap: wrap.
   ============================================================ */
/* The stop row itself is the self-contained card grouping the address
   field, the wait-time control, and the × remove button. Card chrome
   only — the flex layout (display/align/gap/margin) stays inline on the
   element; this rule only ADDS non-conflicting properties. No
   overflow:hidden — the wait-time popover opens an absolutely-positioned
   dropdown that must not be clipped. */
.atelier-root .gv-stop-row {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 12px 14px;
    background: var(--surface-soft);
    flex-wrap: wrap;
}
/* Flattened to transparent so the .gv-stop-row card is the only visible
   container (no box-in-box). Label + select control unchanged. */
.atelier-root .gv-stop-wait {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 2px 0;
    background: transparent;
    border-radius: var(--radius);
    min-width: 130px;
    align-self: stretch;
    justify-content: center;
}
.atelier-root .gv-stop-wait-label {
    font-size: 11px;
    color: var(--ink-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    line-height: 1;
}
.atelier-root .gv-stop-wait-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 32px;
    padding: 0 28px 0 10px;
    border-radius: 8px;
    background-color: var(--surface);
    border: 1px solid var(--line);
    color: var(--ink);
    cursor: pointer;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 500;
    line-height: 1;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%2358514a' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 4.5 6 7.5 9 4.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 10px 10px;
    width: 100%;
}
.atelier-root .gv-stop-wait-select:hover { border-color: var(--ink); }
.atelier-root .gv-stop-wait-select:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: var(--shadow-focus);
}
/* Phase D.1.1 — per-vehicle price-block sub-line.
   Renders under the "From $XX.XX" total on Step 2 vehicle cards when
   the wait-time charge contributes to the price. Right-aligned to match
   the existing .gv-price-block (text-align: right) so it stays inside
   the same column without breaking layout. */
.atelier-root .gv-price-breakdown {
    margin-top: 4px;
    font-size: 12px;
    color: var(--ink-muted);
    line-height: 1.3;
}
.atelier-root .gv-price-breakdown-line {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}
.atelier-root .gv-price-breakdown-line span:last-child {
    font-variant-numeric: tabular-nums;
}
/* === datetime-stepper polish (2026-05-24) === */
/* Step 1 Date / Time / Passenger / Luggage row — visual consistency fixes.

   Problems addressed:
   - Native date input's ::-webkit-calendar-picker-indicator rendered as a
     tiny dim chevron-calendar squished to the right edge. Browser-default
     chrome that looked unfinished against the otherwise-polished field.
     Hidden here; the entire .gv-field--native-picker label still routes
     clicks to the underlying input which opens the picker.
   - .gv-stepper--select .gv-stepper-select used min-width:96px which let
     Firefox auto-grow based on option-list width — passenger select with
     max=8 rendered at one width, luggage select with max=9 at another.
     Locked to fixed width here.
   - Value text was left-aligned at padding-left:16px which made single-
     digit values (1) feel awkwardly offset against the chevron, while
     double-digit values (12) read fine. Centered so any digit count
     reads balanced.
*/
/* Hide the native date picker chrome (WebKit/Blink). The entire field
   label remains the click target; tapping anywhere on the cream surface
   opens the picker via the native <input type="date"> default behavior. */
.atelier-root .gv-field--native-picker input[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    cursor: pointer;
}
/* Make the date input fill the field so the click target is the whole
   cream rectangle, not just the small text area. */
.atelier-root .gv-field--native-picker input[type="date"] {
    width: 100%;
    cursor: pointer;
}
/* The field is position:relative already (.gv-field sets position:
   relative for the absolute-positioned icon). Adding pointer cursor to
   the whole label so the affordance is obvious on hover. */
.atelier-root .gv-field--native-picker {
    cursor: pointer;
}
/* Stepper select: fixed dimensions so passenger + luggage are pixel-
   identical regardless of option-list contents, with centered text so
   any digit count balances visually around the chevron. */
.atelier-root .gv-stepper--select .gv-stepper-select {
    width: 96px;
    min-width: 96px;
    height: 40px;
    padding: 0 32px 0 16px;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    text-align-last: center;
}
/* Tighten the controls column so both steppers reserve the same right-
   side footprint. Was min-width:120px; lock it. */
.atelier-root .gv-stepper--select .gv-stepper-controls {
    min-width: 96px;
    width: 96px;
}
/* === end datetime-stepper polish === */
/* === Universal select popover (2026-05-24) ===
   Powers <x-booking.select-popover>. Two variants:
     - card    — full .gv-trip-control shell (uses existing rules)
     - compact — inline field for custom fields, child seats, wait time
   The popover and rows are SHARED by both variants. */
/* --- Compact trigger field --- */
.atelier-root .gv-select-compact {
    position: relative;
    display: block;
    margin-bottom: 8px;
}
.atelier-root .gv-select-compact-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.atelier-root .gv-select-compact-trigger {
    appearance: none;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    transition: border-color 0.15s ease;
}
.atelier-root .gv-select-compact-trigger:hover,
.atelier-root .gv-select-compact-trigger:focus-visible {
    border-color: var(--ink);
    outline: none;
}
.atelier-root .gv-select-compact-trigger[aria-expanded="true"] {
    border-color: var(--accent);
}
.atelier-root .gv-select-compact-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atelier-root .gv-select-compact-chevron {
    width: 10px;
    height: 10px;
    color: var(--ink-muted);
    flex-shrink: 0;
}
/* --- The popover surface (shared by both variants) --- */
.atelier-root .gv-select-popover {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgba(26, 26, 26, 0.12), 0 2px 8px rgba(26, 26, 26, 0.06);
    padding: 6px;
}
.atelier-root .gv-select-popover--scroll {
    max-height: 260px; /* ~6 rows × 40px + padding + a hint of the 7th */
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}
.atelier-root .gv-select-popover::-webkit-scrollbar {
    width: 8px;
}
.atelier-root .gv-select-popover::-webkit-scrollbar-track {
    background: transparent;
}
.atelier-root .gv-select-popover::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 4px;
    border: 2px solid var(--surface);
}
.atelier-root .gv-select-popover::-webkit-scrollbar-thumb:hover {
    background: var(--ink-muted);
}
/* --- A row inside the popover. Three-state color signal matches the
       platform rule: passive (ink) / hover (cream surface-soft) /
       selected (terracotta is-active). Price suffix uses ink-muted to
       de-emphasize relative to the label. --- */
.atelier-root .gv-select-popover-row {
    appearance: none;
    width: 100%;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 8px;
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    line-height: 1.2;
    transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.atelier-root .gv-select-popover-row + .gv-select-popover-row,
.atelier-root .gv-select-popover-row--placeholder + .gv-select-popover-row {
    margin-top: 2px;
}
.atelier-root .gv-select-popover-row:hover:not(.is-active) {
    background: var(--surface-soft);
    border-color: var(--line);
}
.atelier-root .gv-select-popover-row.is-active {
    background: var(--accent);
    color: var(--bg);
    border-color: var(--accent);
}
.atelier-root .gv-select-popover-row.is-active .gv-select-popover-row-price {
    color: var(--bg);
    opacity: 0.85;
}
.atelier-root .gv-select-popover-row--placeholder {
    color: var(--ink-muted);
    font-style: italic;
}
.atelier-root .gv-select-popover-row-price {
    font-size: 12px;
    font-weight: 500;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
/* === Universal select popover (2026-05-24) ===
   Powers <x-booking.select-popover>. Two variants:
     - card    — full .gv-trip-control shell (uses existing rules)
     - compact — inline field for custom fields, child seats, wait time
   The popover and rows are SHARED by both variants. */
/* --- Compact trigger field --- */
.atelier-root .gv-select-compact {
    position: relative;
    display: block;
    margin-bottom: 8px;
}
.atelier-root .gv-select-compact-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.atelier-root .gv-select-compact-trigger {
    appearance: none;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    transition: border-color 0.15s ease;
}
.atelier-root .gv-select-compact-trigger:hover,
.atelier-root .gv-select-compact-trigger:focus-visible {
    border-color: var(--ink);
    outline: none;
}
.atelier-root .gv-select-compact-trigger[aria-expanded="true"] {
    border-color: var(--accent);
}
.atelier-root .gv-select-compact-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atelier-root .gv-select-compact-chevron {
    width: 10px;
    height: 10px;
    color: var(--ink-muted);
    flex-shrink: 0;
}
/* === Universal select popover (2026-05-24) ===
   Powers <x-booking.select-popover>. Two variants:
     - card    — full .gv-trip-control shell (uses existing rules)
     - compact — inline field for custom fields, child seats, wait time
   The popover and rows are SHARED by both variants. */
/* --- Compact trigger field --- */
.atelier-root .gv-select-compact {
    position: relative;
    display: block;
    margin-bottom: 8px;
}
.atelier-root .gv-select-compact-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.atelier-root .gv-select-compact-trigger {
    appearance: none;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    transition: border-color 0.15s ease;
}
.atelier-root .gv-select-compact-trigger:hover,
.atelier-root .gv-select-compact-trigger:focus-visible {
    border-color: var(--ink);
    outline: none;
}
.atelier-root .gv-select-compact-trigger[aria-expanded="true"] {
    border-color: var(--accent);
}
.atelier-root .gv-select-compact-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atelier-root .gv-select-compact-chevron {
    width: 10px;
    height: 10px;
    color: var(--ink-muted);
    flex-shrink: 0;
}
/* === Universal select popover (2026-05-24) ===
   Powers <x-booking.select-popover>. Two variants:
     - card    — full .gv-trip-control shell (uses existing rules)
     - compact — inline field for custom fields, child seats, wait time
   The popover and rows are SHARED by both variants. */
/* --- Compact trigger field --- */
.atelier-root .gv-select-compact {
    position: relative;
    display: block;
    margin-bottom: 8px;
}
.atelier-root .gv-select-compact-label {
    display: block;
    font-size: 11px;
    font-weight: 500;
    color: var(--ink-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.atelier-root .gv-select-compact-trigger {
    appearance: none;
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 10px 14px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    transition: border-color 0.15s ease;
}
.atelier-root .gv-select-compact-trigger:hover,
.atelier-root .gv-select-compact-trigger:focus-visible {
    border-color: var(--ink);
    outline: none;
}
.atelier-root .gv-select-compact-trigger[aria-expanded="true"] {
    border-color: var(--accent);
}
.atelier-root .gv-select-compact-value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.atelier-root .gv-select-compact-chevron {
    width: 10px;
    height: 10px;
    color: var(--ink-muted);
    flex-shrink: 0;
}
/* Smart-placement modifiers: --below is a no-op marker for symmetry;
   --above flips the popover anchor upward so it doesn't get clipped
   when the trigger sits near the iframe bottom edge. Same pattern
   ships inline on .gv-date-popover and .gv-time-popover. */
.atelier-root .gv-select-popover.gv-select-popover--below {
    /* No override — inherits default downward positioning */
}
.atelier-root .gv-select-popover.gv-select-popover--above {
    top: auto;
    bottom: calc(100% + 6px);
}
/* =============================================================================
   VEHICLE-CARD-RESPONSIVE-V1 — container-query-driven reflow (Step 2 card).

   Single source of truth for the Atelier vehicle card's responsive behavior.
   The card reflows on its OWN inline-size (not the viewport), so embedded-
   iframe contexts work regardless of the client column's width.

   Two states:
     - Wide  (card >= 600px): the existing 3-column [photo | body | aside]
                               layout — standalone look preserved.
     - Stacked (card < 600px): photo on top (16:9), body middle, footer with
                               horizontal [price | Select] aside. A second
                               sub-threshold at 380px stacks the aside
                               vertically so Select stays a comfortable tap
                               target.
   Amenities are non-wrapping inline chips that wrap as a group.

   Identical behavior contract is replicated in taxibooking-classic.css and
   taxibooking-polished.css with each theme's own prefix and visual tokens.
   Follow-up: factor the structural skeleton into a shared partial all three
   themes import.

   Source-order note: this block lives at the end of the file so it wins over
   the legacy @media-based card collapse rules above (same selector specificity).
   ============================================================================= */
/* container-type/container-name now live on .gv-vehicle-list (see Vehicle cards
   section, ~line 1042). Hosting on the card itself is a silent no-op because a
   container query cannot restyle its own container element. */
.atelier-root .gv-amenity {
    white-space: nowrap;
}
@container gv-vehicle-card (max-width: 600px) {
    .atelier-root .gv-vehicle-card {
        grid-template-columns: minmax(0, 1fr);
    }
    .atelier-root .gv-vehicle-photo {
        aspect-ratio: 16 / 9;
    }
    .atelier-root .gv-vehicle-body {
        padding: 18px 20px;
    }
    .atelier-root .gv-vehicle-amenities {
        gap: 6px;
    }
    .atelier-root .gv-vehicle-aside {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 20px;
        background: var(--surface-soft);
        border-left: none;
        border-top: 1px solid var(--line);
        min-width: 0;
    }
    .atelier-root .gv-price-block {
        text-align: left;
        flex: 1 1 auto;
        min-width: 0;
    }
    .atelier-root .gv-vehicle-select {
        width: auto;
        min-width: 160px;
        flex: 0 1 auto;
    }
}
@container gv-vehicle-card (max-width: 380px) {
    .atelier-root .gv-vehicle-aside {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    .atelier-root .gv-price-block {
        text-align: center;
    }
    .atelier-root .gv-vehicle-select {
        width: 100%;
        min-width: 0;
    }
}
/* MOBILE-PRICE-CENTERED-2026-07-08 — Fix 1.
   The mobile @media(768) override (row layout, text-align:left, 24px) plus the
   @container(600px) row/left rule shrank + left-aligned the vehicle price on
   phones. This authoritative block is placed LAST in source so it out-ranks
   both (equal specificity 0,2,0 → source order wins) at every phone width,
   restoring the desktop intent: a centered, large, prominent "FROM $X" price
   stacked above a full-width Select button. */
@media (max-width: 768px) {
    .atelier-root .gv-vehicle-aside {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 14px;
    }
    .atelier-root .gv-price-block {
        text-align: center;
        min-width: 0;
    }
    .atelier-root .gv-price-amount {
        font-size: 34px;
        font-weight: 600;
    }
    .atelier-root .gv-price-amount sup {
        font-size: 17px;
        margin-top: 5px;
    }
    .atelier-root .gv-vehicle-select {
        width: 100%;
        min-width: 0;
    }
}
/* MOBILE-PRICE-CENTERED-2026-07-08b — Fix 1 CORRECTION (on top of 6f384c6).
   6f384c6's block targeted `.gv-price-block` / `.gv-price-amount` at specificity
   0,2,0. At <=480px the rule `.atelier-root .gv-vehicle-aside .gv-price-block
   { text-align:left; width:100% }` (atelier.css:~2790, specificity 0,3,0)
   OUT-RANKS it, so on a 375px phone the price stayed LEFT-aligned. (The 34px
   size was already winning — the last 0,2,0 `.gv-price-amount` rule in source
   set it — but this block also pins the size at 0,3,0 so it can never regress.)
   The @container(600) rule at ~:4736 is only 0,2,0 and precedes 6f384c6 in
   source, so it never competed: specificity, NOT the container/media cascade
   boundary, is the arbiter here. This authoritative block raises the selectors
   to 0,3,0 (aside-scoped, equal to the :2790 rule) AND sits LAST in source, so
   it wins in every phone context — a centered, large "FROM $X" above a
   full-width Select. */
@media (max-width: 768px) {
    .atelier-root .gv-vehicle-aside .gv-price-block {
        text-align: center;
        width: 100%;
        min-width: 0;
    }
    .atelier-root .gv-vehicle-aside .gv-price-amount {
        font-size: 34px;
        font-weight: 600;
    }
    .atelier-root .gv-vehicle-aside .gv-price-amount sup {
        font-size: 17px;
        margin-top: 5px;
    }
}
/* Per-tenant "Hide map on mobile devices" (extra_settings.map.hide_on_mobile).
   <body data-hide-map-mobile="1"> is set in components/layouts/booking.blade.php.
   Hides Step-1 (.gv-map-canvas) and Step-2 (.gv-mini-map) map units on phones.
   !important + attribute-scoped selector beats the theme's plain
   `.<theme>-root .gv-map-canvas` mobile rules (specificity 0,0,2,0, no !important). */
@media (max-width: 768px) {
    [data-hide-map-mobile="1"] .gv-map-canvas,
    [data-hide-map-mobile="1"] .gv-mini-map {
        display: none !important;
    }
}