/* ═══════════════════════════════════════════════════════════════════════
       WIZARD — Premium Booking Flow
       ═══════════════════════════════════════════════════════════════════════ */

    /* ── Step Indicator ── */
    .wizard-steps { display:flex; align-items:center; justify-content:center; gap:0; margin:0 auto 2rem; padding:.9rem 0; max-width:560px; }
    .wizard-step { display:flex; align-items:center; gap:.55rem; background:none; border:none; cursor:pointer; padding:.35rem .55rem; font-family:inherit; color:var(--muted); transition:all 250ms ease; border-radius:10px; }
    .wizard-step:hover { background:rgba(var(--primary-rgb), 0.04); }
    .wizard-step__num { width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:.82rem; font-weight:700; background:var(--surface-tint); color:var(--muted); flex-shrink:0; transition:all 300ms cubic-bezier(.4,0,.2,1); box-shadow:0 2px 6px rgba(var(--ink-rgb), 0.06); }
    .wizard-step__label { font-size:.82rem; font-weight:600; white-space:nowrap; transition:color 200ms ease; }
    .wizard-step__connector { flex:1; height:2px; background:linear-gradient(90deg,var(--surface-tint),var(--surface-tint-alt5)); max-width:50px; margin:0 .2rem; border-radius:2px; transition:all 300ms ease; }
    .wizard-step.active .wizard-step__num { background:linear-gradient(135deg,var(--accent-warm),var(--accent-alt)); color:var(--text-on-accent); transform:scale(1.12); box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.35); }
    .wizard-step.active .wizard-step__label { color:var(--text); }
    .wizard-step.completed .wizard-step__num { background:linear-gradient(135deg,var(--primary),var(--primary-soft)); color:var(--surface); box-shadow:0 3px 10px rgba(var(--primary-rgb), 0.2); }
    .wizard-step.completed .wizard-step__label { color:var(--text); }
    .wizard-step.completed + .wizard-step__connector,
    .wizard-step__connector.completed { background:linear-gradient(90deg,var(--primary,#153a5b),var(--primary-soft-alt3)); }
    .wizard-step.disabled { cursor:default; opacity:.45; pointer-events:none; }

    /* Steps 2-5 open on the step row, not on the page's welcome again. */
    .wizard-past-first .page-hero-inner { display:none; }

    /* ── Wizard Body ── */
    .wizard-body { max-width:860px; margin:0 auto; }
    .wizard-panel.card {
      background:var(--surface) !important;
      border:1px solid rgba(var(--surface-tint-rgb), 0.8) !important;
      border-radius:22px !important;
      padding:0 !important;
      box-shadow:0 12px 40px rgba(var(--primary-rgb), 0.08), 0 2px 8px rgba(var(--primary-rgb), 0.04) !important;
      animation:wizardFadeIn 350ms cubic-bezier(.4,0,.2,1) both;
      overflow:visible;
    }
    @keyframes wizardFadeIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

    /* ── Panel Header (gold-accented) ── */
    .wizard-panel-header {
      text-align:center;
      padding:2rem 2rem 1.2rem;
      border-bottom:1px solid var(--surface-tint-alt6);
      background:linear-gradient(180deg,var(--surface-tint-alt2) 0%,var(--surface) 100%);
      position:relative;
      overflow:hidden;
      border-radius:22px 22px 0 0;
    }
    .wizard-panel-header::after {
      content:'';position:absolute;bottom:0;left:50%;transform:translateX(-50%);
      width:60px;height:3px;border-radius:3px;
      background:linear-gradient(90deg,transparent,var(--accent),transparent);
    }
    .wizard-panel-header .eyebrow { margin:0 0 .25rem; display:block; color:var(--accent,#c99a3b); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; }
    .wizard-panel-header h2 { font-family:var(--isl-serif); font-size:clamp(1.25rem,3vw,1.5rem); margin:0 0 .35rem; color:var(--text); }
    .wizard-panel-header .section-sub { color:var(--muted,#5a6475); font-size:.88rem; margin:0 auto; max-width:60ch; line-height:1.5; }

    /* ── Panel Body ── */
    .wizard-panel-body { padding:1.5rem 2rem 2rem; }

    /* ── Form Fields (Premium) ── */
    .wizard-panel-body label {
      display:block;
      font-size:.75rem; font-weight:700; color:var(--muted);
      text-transform:uppercase; letter-spacing:.06em;
      margin:1rem 0 .4rem;
    }
    .wizard-panel-body label:first-child { margin-top:0; }
    .wizard-panel-body input:not([type="checkbox"]):not([type="radio"]),
    .wizard-panel-body select {
      width:100%;
      border:2px solid var(--surface-tint);
      border-radius:12px;
      padding:.85rem 1rem;
      background:var(--surface-tint-alt2);
      font-family:inherit;
      font-size:.95rem;
      color:var(--text);
      transition:all 200ms ease;
      -webkit-appearance:none;
    }
    .wizard-panel-body input:not([type="checkbox"]):not([type="radio"]):focus,
    .wizard-panel-body select:focus {
      outline:none;
      border-color:var(--accent,#c99a3b);
      background:var(--surface);
      box-shadow:0 0 0 4px rgba(var(--accent-rgb), 0.1);
    }
    .wizard-panel-body .grid-2 { gap:1rem; }
    .wizard-panel-body .grid-2 > div label { margin-top:0; }

    /* ── Wizard Actions Footer ── */
    .wizard-actions {
      display:flex; justify-content:space-between; align-items:center; gap:1rem;
      margin:0; padding:1.25rem 2rem;
      border-top:1px solid var(--surface-tint-alt6);
      background:linear-gradient(180deg,var(--surface-tint-alt2),var(--surface-tint-alt14));
      border-radius:0 0 22px 22px;
    }
    .wizard-actions .btn-ghost { min-width:100px; border-radius:10px; padding:.7rem 1.2rem; font-weight:600; }
    .wizard-actions .btn-accent {
      min-width:180px; text-align:center; border-radius:12px; padding:.85rem 1.5rem;
      font-weight:700; font-size:.95rem;
      background:linear-gradient(135deg,var(--accent-warm),var(--accent));
      color:var(--text-on-accent); border:none; cursor:pointer;
      box-shadow:0 4px 16px rgba(var(--accent-rgb), 0.3);
      transition:all 300ms cubic-bezier(.4,0,.2,1);
    }
    .wizard-actions .btn-accent:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(var(--accent-rgb), 0.4); }
    .wizard-actions .btn-accent:disabled { opacity:.5; cursor:not-allowed; transform:none; box-shadow:none; }

    /* ── Validation Errors ── */
    .wizard-err { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-tint); border-radius:12px; padding:.65rem 1rem; font-size:.82rem; margin:0 0 .8rem; }
    /* "That car has just gone" is news, not a fault: the same box in the info colours. */
    .wizard-err.is-note { background:var(--info-bg); color:var(--text); border-color:var(--isl-info-line, var(--info-alt)); }
    .resume-note:not([hidden]) { display:flex; align-items:center; justify-content:space-between; gap:.75rem; flex-wrap:wrap; }
    .resume-note .btn { border-color:currentColor; padding:.35rem .9rem; font-size:.8rem; }

    /* ── T&C Agree Row ── */
    .tc-agree-row { padding:.9rem 1.4rem .4rem; }
    .tc-agree-label { display:flex; align-items:flex-start; gap:.55rem; font-size:.85rem; color:var(--primary-deep-alt2); cursor:pointer; line-height:1.5; }
    .tc-agree-label input[type=checkbox] { margin-top:.15rem; width:16px; height:16px; flex-shrink:0; accent-color:var(--accent); cursor:pointer; }
    .tc-agree-label a { color:var(--primary); font-weight:600; }
    .tc-agree-error { color:var(--danger); font-size:.78rem; margin:.3rem 0 0 1.5rem; }

    /* ── Date Group Card (step 1 field grouping) ── */
    .field-group {
      background:linear-gradient(135deg,var(--surface-alt),var(--surface-tint-alt2));
      border:1px solid var(--surface-tint-alt6);
      border-radius:14px;
      padding:1.1rem 1.2rem .5rem;
      margin-bottom:.8rem;
    }
    .field-group__title {
      font-size:.72rem; font-weight:700; color:var(--accent,#c99a3b);
      text-transform:uppercase; letter-spacing:.12em; margin:0 0 .7rem;
      display:flex; align-items:center; gap:.45rem;
    }
    .field-group__title .fg-icon { flex:none; width:1rem; height:1rem; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:.65; }
    .field-group label { margin-top:.6rem !important; }

    /* ── Step 3 Two-Column Layout ── */
    .step3-layout { display:grid; grid-template-columns:1fr 260px; gap:2rem; align-items:start; }
    .step3-options { min-width:0; overflow:hidden; }
    .step3-cost-sidebar { position:sticky; top:5rem; }
    .step3-cost-sidebar .cost-summary {
      background:linear-gradient(180deg,var(--surface-tint-alt2),var(--surface-alt));
      border:1.5px solid var(--surface-tint-alt5);
      border-radius:16px;
      padding:1.2rem 1.3rem 1rem;
      margin:0;
      box-shadow:0 4px 16px rgba(var(--primary-rgb), 0.06);
    }
    .step3-cost-sidebar .cost-summary__title {
      font-size:.82rem; font-weight:700; margin:0 0 .7rem;
      color:var(--primary,#153a5b); letter-spacing:.06em; text-transform:uppercase;
    }
    .step3-cost-sidebar .cost-total th,
    .step3-cost-sidebar .cost-total td {
      font-size:1.05rem; color:var(--primary,#153a5b);
      border-top:2px solid var(--surface-tint-alt5); padding-top:.5rem;
    }
    .step3-cost-sidebar .cost-note { font-size:.7rem; }

    /* ── Cost Summary (inline fallback for non-step3 use) ── */
    .cost-summary { background:var(--surface-alt); border:1px solid var(--surface-tint-alt3); border-radius:12px; padding:1rem 1.1rem .8rem; margin:.8rem 0 .4rem; }
    .cost-summary__title { font-size:.88rem; font-weight:700; margin:0 0 .6rem; color:var(--primary-deep-alt4); letter-spacing:.01em; }
    .cost-table { width:100%; border-collapse:collapse; font-size:.83rem; }
    .cost-table td, .cost-table th { padding:.22rem 0; }
    .cost-table td { text-align:right; color:var(--muted-alt6); }
    .cost-table th { text-align:left; color:var(--muted-alt4); font-weight:500; }
    .cost-total th, .cost-total td { font-weight:700; color:var(--primary-deep-alt10); font-size:.92rem; border-top:1px solid var(--surface-tint-alt3); padding-top:.4rem; margin-top:.2rem; }
    .cost-note { font-size:.72rem; color:var(--muted-alt8); margin:.4rem 0 0; }
    /* A day added by the return time: read before choosing, so not muted to a footnote. */
    .late-return-note { font-size:.78rem; line-height:1.4; color:var(--text,inherit); margin:.45rem 0 0; }
    .cost-loading { font-size:.8rem; color:var(--muted-alt8); }
    .cost-disclaimer { margin-top:.75rem; padding:.55rem .7rem; border-radius:10px; border:1px solid var(--surface-tint-alt3); background:var(--surface); font-size:.72rem; line-height:1.55; color:var(--muted-alt11); }
    .cost-disclaimer + .cost-disclaimer { margin-top:.55rem; }
    .cost-disclaimer .cd-icon { font-size:.85rem; margin-right:.35rem; vertical-align:-1px; }
    .cost-disclaimer .cd-title { font-weight:700; color:var(--primary); display:block; margin-bottom:.2rem; font-size:.73rem; }
    .cost-disclaimer .cd-fee { font-weight:700; color:var(--primary); }
    .ooh-schedule { display:grid; grid-template-columns:max-content 1fr; gap:.18rem .65rem; margin-top:.45rem; padding-top:.4rem; border-top:1px solid var(--surface-tint-alt30); }
    .ooh-schedule .ooh-day { font-weight:600; color:var(--muted-alt6); white-space:nowrap; }
    .ooh-schedule .ooh-hrs { color:var(--primary); font-weight:500; }
    .ooh-schedule .ooh-closed { color:var(--muted-alt17); font-style:italic; }

    /* ── Section Label ── */
    .section-label { font-size:.78rem !important; font-weight:700 !important; color:var(--muted-alt6) !important; margin:.4rem 0 .5rem !important; letter-spacing:.04em; text-transform:uppercase; display:block !important; }

    /* ── Insurance Cards ── */
    .insurance-option { display:grid; grid-template-columns:20px 1fr; gap:.6rem; align-items:start; padding:.6rem .75rem; border:1.5px solid var(--surface-tint-alt3); border-radius:10px; margin-bottom:.4rem; cursor:pointer; background:var(--surface); transition:border-color .15s,background .15s; overflow:hidden; }
    .insurance-option.selected { border-color:var(--primary,#153a5b); background:var(--surface-tint-alt13); }
    .insurance-option input[type="radio"] { width:16px; height:16px; min-width:16px; flex-shrink:0; margin:2px 0 0 0; cursor:pointer; accent-color:var(--primary,#153a5b); }
    .insurance-option label, .insurance-option .ins-label { display:inline !important; font-size:inherit !important; color:inherit !important; margin:0 !important; cursor:pointer; font-weight:600; font-size:.85rem !important; color:var(--primary-deep-alt4) !important; }
    .ins-body { min-width:0; }
    .ins-desc { font-size:.77rem; color:var(--muted-alt4); margin:.15rem 0 .3rem; }
    .ins-meta { display:flex; flex-wrap:wrap; gap:.4rem; }
    .insurance-badge { font-size:.71rem; font-weight:600; padding:.1rem .45rem; border-radius:4px; display:inline-block; }
    .badge-excess { background:var(--warning-bg); color:var(--warning); }
    .badge-price { background:var(--success-bg); color:var(--success-alt5); }

    /* ── Extras ── */
    .extra-item { display:grid; grid-template-columns:20px 1fr auto auto; gap:.5rem; align-items:start; padding:.65rem .8rem; border:1.5px solid var(--surface-tint-alt3); border-radius:8px; margin-bottom:.4rem; background:var(--surface); }
    .extra-item input[type="checkbox"] { width:16px; height:16px; min-width:16px; flex-shrink:0; margin:.15rem 0 0; cursor:pointer; accent-color:var(--primary,#153a5b); }
    .extra-item.selected { border-color:var(--primary,#153a5b); background:var(--surface-tint-alt13); }
    .extra-item label { display:block !important; margin:0 !important; cursor:pointer; min-width:0; }
    .extra-item__name { font-weight:600; font-size:.84rem; color:var(--primary-deep-alt4); white-space:normal; }
    .extra-item__desc { font-size:.75rem; color:var(--muted-alt4); white-space:normal; margin-top:.15rem; line-height:1.4; }
    .extra-item__price { font-size:.78rem; font-weight:600; color:var(--success-alt4); white-space:nowrap; padding-top:.1rem; }
    .extra-qty { width:50px; padding:.18rem .3rem; border:1px solid var(--surface-tint-alt19); border-radius:4px; font-size:.84rem; text-align:center; }
    .small { font-size:.8rem; color:var(--muted-alt8); }

    /* ── Step 2: Group Selection Cards ── */
    /* `align-items:start` was fine when every card was the same height. Several
       suppliers at one desk broke that: a partner's card carries a disclosure and
       a handover line that ours does not, so a short card left a hole beside a
       tall one and the next card stranded below it. Stretching evens the row —
       the box grows, the content stays top-aligned. */
    /* The cards are rendered into ONE wrapper inside #carGroupsList, so the
       grid has to be on the wrapper: making the list itself two columns put
       every card in a single 280px column down the left half of the panel
       (audit section 2, "half the screen empty"). Two across from tablet
       width up, one on a phone — a card carries a photo, a price and a
       supplier disclosure and stops being readable much below 320px.
       This file is served as a static file, so a Jinja comment would reach
       the browser: CSS comments only. */
    #carGroupsList { display:block; }
    #carGroupsList .group-model-grid { display:grid; grid-template-columns:1fr;
      gap:1rem; align-items:stretch; margin-top:0; }
    @media (min-width:768px) {
      #carGroupsList .group-model-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); }
    }
    #carGroupsList .group-model-grid > * { height:100%; }
    .group-select-card { display:flex; flex-direction:column; }
    .group-select-card__actions { margin:auto 0 0; padding-top:.5rem; }
    .group-select-card__actions .btn-accent { width:100%; }
    .group-select-card__group { font-weight:600; }
    .group-select-card__model { font-family:var(--font-body, inherit); font-size:.85rem;
      font-weight:400; color:var(--muted); }
    .group-select-card__model::before { content:' \00b7 '; }
    /* The name column wraps inside itself; the price stays pinned right,
       where the eye compares two cards. */
    .group-select-card__header { align-items:flex-start; gap:.25rem .75rem; }
    .group-select-card__name { flex:1 1 auto; min-width:0; line-height:1.25; }
    .group-select-card__price { flex:0 0 auto; white-space:nowrap; text-align:right; }
    .group-select-card { background:var(--surface); border:2px solid var(--surface-tint); border-radius:16px; padding:.75rem; cursor:pointer; transition:all 250ms ease; }
    .group-select-card:hover { border-color:rgba(var(--accent-rgb), 0.3); box-shadow:0 8px 25px rgba(var(--primary-rgb), 0.08); }
    /* Selection is now a state the customer sits in — the click no longer
       moves them on, so the card has to SAY it is the chosen one until they
       press Continue. The old rule was written when this class flashed for
       an instant on the way to step 3, and at 2px of gold on a dark card it
       was invisible as a resting state. */
    .group-select-card.selected { border-color:var(--accent,#c99a3b);
      box-shadow:0 0 0 2px var(--accent,#c99a3b), 0 8px 28px rgba(var(--accent-rgb), 0.28);
      background:linear-gradient(160deg,var(--bg-alt4) 0%,var(--surface) 100%); }
    .group-select-card__header { display:flex; justify-content:space-between; align-items:center; margin-bottom:.3rem; }
    .group-select-card__name { font-family:var(--isl-serif); font-size:1.05rem; margin:0; color:var(--text); }
    .group-select-card__price { font-size:.95rem; font-weight:700; color:var(--primary,#153a5b); }
    .group-select-card__price span { font-size:.78rem; font-weight:500; color:var(--muted); }
    .group-select-card__availability { font-size:.75rem; font-weight:600; margin-top:.1rem; }
    .group-select-card__availability.avail-ok { color:var(--success); }
    .group-select-card__availability.avail-no { color:var(--danger-alt3); }
    /* ── Partner disclosure — who actually holds the rental agreement. Quiet
       rather than alarming: it is a fact about the booking, not a warning ── */
    .partner-disclosure { display:flex; align-items:center; gap:.55rem; margin:.35rem 0 .5rem; padding:.45rem .55rem; border:1px solid var(--surface-tint); border-left:3px solid var(--accent,#c99a3b); border-radius:8px; background:var(--surface-alt); }
    /* A box, not a square. Most company logos are wordmarks around 3:1, and a
       square box shrank them to 38px wide — the name became unreadable, which
       defeats the point of showing it. object-fit:contain still letterboxes a
       square or portrait mark instead of stretching it. */
    /* A fixed slot, not a maximum. Marks differ in aspect: a wide logo pushed
       its text 84px right while a square one pushed it barely at all, and a
       supplier with no logo at all -- which is every deployment until someone
       uploads one, our own supply included -- started flush against the edge.
       Three suppliers side by side therefore began their sentences in three
       different places. Reserving the column is what lines a row of cards up
       whoever fills it, and `:first-child` is the no-logo case: the text block
       is only the first child when no image was rendered before it. */
    .partner-disclosure__logo { flex:0 0 84px; max-width:84px; max-height:38px; object-fit:contain; }
    .partner-disclosure__text:first-child { margin-left:calc(84px + .55rem); }
    .partner-disclosure__text { display:flex; flex-direction:column; gap:.1rem; min-width:0; }
    .partner-disclosure__text strong { font-size:.8rem; color:var(--text); }
    .partner-disclosure__text span { font-size:.72rem; line-height:1.35; color:var(--muted); }
    /* How this partner hands the car over. Given the accent rather than muted
       grey on purpose: with several partners at one airport it is often the only
       thing separating two cards, so it has to read as information and not as
       small print. */
    .partner-disclosure__handover { color:var(--text) !important; font-weight:600; }
    /* The supplier's own words, under our phrase for the same thing. Quieter,
       because the phrase above is the one that is always there and always
       translated; this is whatever they chose to add. */
    .partner-disclosure__handover-detail { color:var(--muted); }
    .partner-disclosure--review { margin-top:.75rem; }
    /* How the car is got (delivery or office): the kind in grey, the fee or
       the town and distance under it, bold. */
    .partner-disclosure__place { display:flex; flex-direction:column; gap:.1rem; }
    .partner-disclosure__text .partner-disclosure__place b { font-size:.8rem; font-weight:600; color:var(--text); }
    .where-bar { margin-bottom:1rem; }
    .field-group textarea[data-directions-role] { width:100%; min-height:4.5rem; }
    .no-delivery-choices { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; padding-bottom:1.5rem; }
    /* The method named under the arrival question itself, once a section is
       picked. Same weight as the handover line above: it is information, not
       small print. */
    .arrival-method { margin:.5rem 0 0; font-size:.85rem; font-weight:600; color:var(--text); }
    /* ── The step-1 box (where-box.js, spec 2026-10-04 §3) ──────────────────
       The destination's choices as one list, the chosen one as a pill with
       Change, and under it the hotel search and the map. No area is drawn. */
    .where-field { position:relative; }
    .where-field .where-svg { position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
    .where-field input { width:100%; padding-left:42px !important; min-height:48px; font-size:16px; }
    .where-svg { width:18px; height:18px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
    .where-list, .where-suggest { margin-top:.4rem; border:1px solid var(--border-plain, #dde); border-radius:12px; background:var(--surface, #fff); overflow:hidden; }
    .where-suggest[hidden] { display:none; }
    .where-grp { padding:.75rem 1rem .35rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
    .where-opt, .where-suggest button { display:flex; align-items:center; gap:.85rem; width:100%; padding:.65rem 1rem; border:0; border-top:1px solid var(--border-plain, #eee); background:transparent; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
    .where-list > .where-opt:first-child, .where-suggest button:first-child { border-top:0; }
    .where-opt:hover, .where-opt:focus-visible, .where-suggest button:hover, .where-suggest button:focus-visible { background:var(--surface-tint, #f1f5f9); outline:none; }
    .where-opt b { display:block; font-weight:500; }
    .where-opt small { display:block; color:var(--muted); font-size:.8rem; }
    .where-town { color:var(--muted); }
    .where-ic { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:8px; background:var(--surface-alt, #f1f5f9); color:var(--text); }
    .where-chosen, .where-dest { display:flex; align-items:center; gap:.75rem; min-height:56px; padding:.5rem 1rem; border:1px solid var(--border-plain, #dde); border-radius:12px; background:var(--surface, #fff); }
    .where-chosen__txt { flex:1; font-weight:500; color:var(--text); }
    .where-dest { margin-bottom:.6rem; }
    .where-change, .where-dest-change, .where-mapbtn, .where-link { border:0; background:none; padding:.4rem 0; color:var(--accent); font:inherit; cursor:pointer; }
    .where-mapbtn { display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem; }
    .where-lab { margin:1.1rem 0 .5rem; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
    .where-lab small { text-transform:none; letter-spacing:0; font-size:.8rem; }
    .where-map { position:relative; z-index:0; height:340px; margin-top:.9rem; border-radius:12px; overflow:hidden; border:1px solid var(--border-plain, #dde); }
    .where-map[hidden] { display:none; }
    .where-pinline { display:flex; align-items:center; gap:.55rem; margin-top:.75rem; font-weight:600; color:var(--text); }
    .where-pinline::before { content:""; width:10px; height:10px; border-radius:50%; background:var(--warning, #dcbc8b); }
    .where-pinline[hidden] { display:none; }
    /* The sub-choice of step 1 (spec §7): which airport, port or town. */
    .where-chips { display:flex; flex-wrap:wrap; gap:.5rem; }
    .where-chip { min-height:44px; padding:.5rem 1.1rem; border:1px solid var(--border-plain, #dde); border-radius:999px; background:transparent; color:var(--text); font:inherit; font-weight:500; cursor:pointer; }
    .where-chip:hover { border-color:var(--muted); }
    .where-chip[aria-checked="true"] { border-color:var(--accent); background:var(--accent); color:var(--text-on-accent, #fff); }
    .where-link { display:block; margin-top:.9rem; text-align:left; }
    .where-staying[hidden] { display:none; }
    .where-hint { margin:.35rem 0 0; font-size:.82rem; color:var(--muted); }
    .where-row { display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin-top:.8rem; }
    .where-row .where-hint { margin:0; }
    .where-btn { display:inline-flex; align-items:center; gap:.5rem; min-height:44px; padding:.5rem 1.1rem; border:1px solid var(--border-plain, #dde); border-radius:999px; background:transparent; color:var(--text); font:inherit; font-weight:500; cursor:pointer; }
    .where-btn:hover { border-color:var(--muted); }
    .where-note { margin:.6rem 0 0; font-size:.85rem; color:var(--warning, #b7791f); }
    .where-note[hidden], .where-filter[hidden] { display:none; }
    .where-filter { margin:.3rem 0 0; font-size:.85rem; color:var(--muted); }
    .where-filter-clear { border:0; background:none; padding:0 .25rem; color:var(--accent); font:inherit; text-decoration:underline; cursor:pointer; }
    .where-map .leaflet-tooltip { background:var(--surface, #fff); color:var(--text); border:1px solid var(--border-plain, #dde); box-shadow:none; font-weight:600; }
    .where-map .leaflet-tooltip-top:before { border-top-color:var(--border-plain, #dde); }
    .where-map .leaflet-tooltip-right:before { border-right-color:var(--border-plain, #dde); }
    .where-map .leaflet-tooltip-bottom:before { border-bottom-color:var(--border-plain, #dde); }
    .where-pop button { margin-top:.5rem; padding:.35rem .9rem; border:0; border-radius:999px; background:var(--primary, #17324d); color:var(--text-on-accent, #fff); font:inherit; font-weight:600; cursor:pointer; }
    @media (max-width:640px) {
      .where-map { height:260px; }
      .where-row .where-hint { flex-basis:100%; }
    }
    .group-model-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,280px)); gap:.6rem; margin-top:.4rem; }
    .group-model-card { background:var(--surface-alt); border:1px solid var(--surface-tint); border-radius:12px; overflow:hidden; transition:transform 200ms ease; margin-top:.4rem; }
    .group-model-card:hover { transform:translateY(-2px); }

    /* ── Model switcher pills (Step 2) — lets a group with several models share
       one fixed-height photo/info block instead of stacking one per model ── */
    .group-model-tabs { display:flex; flex-wrap:wrap; gap:.35rem; margin-top:.5rem; }
    .group-model-tab { font-size:.72rem; font-weight:600; padding:.28rem .6rem; border-radius:999px; border:1.5px solid var(--surface-tint-alt3); background:var(--surface-alt); color:var(--text); cursor:pointer; transition:border-color 150ms ease,background 150ms ease; }
    .group-model-tab:hover:not(:disabled) { border-color:rgba(var(--accent-rgb), 0.4); }
    .group-model-tab.active { border-color:var(--accent,#c99a3b); background:var(--bg-alt4); color:var(--primary,#153a5b); }
    .group-model-tab.unavailable { color:var(--danger-alt3); background:var(--danger-bg-alt4); border-color:var(--danger-bg-alt3); cursor:not-allowed; opacity:.85; }
    .group-model-tab__badge { font-weight:600; }

    /* ── Compact Photo Carousel (booking wizard) ── */
    .photo-carousel { position:relative; width:100%; height:150px; background:linear-gradient(135deg,var(--surface-tint-alt4),var(--surface-tint)); overflow:hidden; flex-shrink:0; }
    .photo-carousel-track { display:flex; height:100%; transition:transform 320ms cubic-bezier(.4,0,.2,1); will-change:transform; }
    .photo-carousel-track img { width:100%; height:100%; object-fit:cover; flex-shrink:0; user-select:none; pointer-events:none; }
    .photo-placeholder { width:100%; height:150px; background:linear-gradient(135deg,var(--surface-tint-alt4),var(--surface-tint)); display:flex; align-items:center; justify-content:center; color:var(--muted-alt5); font-size:1.6rem; flex-shrink:0; }
    .carousel-btn { position:absolute; top:50%; transform:translateY(-50%); background:rgba(var(--surface-rgb), 0.9); border:none; border-radius:50%; width:26px; height:26px; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:.9rem; box-shadow:0 2px 10px rgba(var(--ink-rgb), 0.18); transition:background 150ms; z-index:2; padding:0; }
    .carousel-btn:hover { background:var(--surface); }
    .carousel-btn-prev { left:7px; }
    .carousel-btn-next { right:7px; }
    .carousel-dots { position:absolute; bottom:6px; left:50%; transform:translateX(-50%); display:flex; gap:4px; z-index:2; }
    .carousel-dot { width:5px; height:5px; border-radius:50%; background:rgba(var(--surface-rgb), 0.55); cursor:pointer; transition:background 200ms,transform 200ms; }
    .carousel-dot.active { background:var(--surface); transform:scale(1.35); }

    .group-model-card__photo { width:100%; height:150px; object-fit:cover; background:linear-gradient(135deg,var(--surface-tint-alt4),var(--surface-tint)); }
    .group-model-card__photo-placeholder { width:100%; height:150px; background:linear-gradient(135deg,var(--surface-tint-alt4),var(--surface-tint)); display:flex; align-items:center; justify-content:center; color:var(--muted-alt5); font-size:1.6rem; }
    .group-model-card__info { padding:.35rem .5rem; }
    .group-model-card__name { font-weight:600; font-size:.82rem; color:var(--text); margin:0; }
    .group-model-card__specs { font-size:.72rem; color:var(--muted); margin:.05rem 0 0; }
    .group-select-card__desc { font-size:.75rem; color:var(--muted); margin:.1rem 0 .2rem; }

    /* ── Rental Details Summary (Step 3) ── */
    .rental-details-summary { background:linear-gradient(135deg,var(--surface-tint-alt4),var(--surface-alt)); border:1px solid var(--surface-tint-alt3); border-radius:12px; padding:.75rem 1rem; margin-bottom:.6rem; display:grid; grid-template-columns:1fr 1fr; gap:.3rem .8rem; font-size:.82rem; }
    .rds-label { color:var(--muted); font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.1rem; }
    .rds-value { color:var(--text); font-weight:600; }
    @media (max-width:640px) { .rental-details-summary { grid-template-columns:1fr; } }

    /* ── Selected Group Summary (Step 3) ── */
    .selected-group-summary { background:linear-gradient(135deg,var(--surface-tint-alt4),var(--surface-alt)); border:1px solid var(--surface-tint-alt3); border-radius:12px; padding:.75rem 1rem; margin-bottom:1rem; display:flex; justify-content:space-between; align-items:center; }
    .selected-group-summary[hidden] { display:none; }
    .selected-group-summary small { color:var(--muted); }


    /* ── Booking Review Summary (Step 5) ── */
    .booking-review-summary { background:linear-gradient(135deg,var(--surface-alt),var(--surface-tint-alt2)); border:1px solid var(--surface-tint-alt3); border-radius:14px; padding:1rem 1.1rem; margin-bottom:1.2rem; }
    .booking-review-summary__title { font-weight:700; font-size:.88rem; margin:0 0 .5rem; color:var(--text); }
    .review-row { display:flex; justify-content:space-between; padding:.3rem 0; font-size:.85rem; }
    .review-row__label { color:var(--muted); }
    .review-row__value { font-weight:600; color:var(--text); text-align:right; }
    /* The only link in the table is the desk's map pin: underlined so it
       reads as one, in the page's own colour so the row stays quiet. */
    .review-row__value a { color:inherit; text-decoration:underline; }
    .review-row + .review-row { border-top:1px solid var(--surface-tint-alt6); padding-top:.4rem; margin-top:.1rem; }

    /* ── Banners ── */
    #availabilityBanner { border-radius:12px; padding:.65rem 1rem; margin:0 0 .8rem; font-size:.85rem; font-weight:600; align-items:center; gap:.55rem; }
    #availabilityBanner.avail-ok   { background:var(--success-bg); color:var(--success); border:1px solid var(--success-tint); }
    #availabilityBanner.avail-no   { background:var(--danger-bg); color:var(--danger-alt3); border:1px solid var(--danger-tint); }
    #availabilityBanner.avail-wait { background:var(--surface-tint-alt38); color:var(--muted-alt13); border:1px solid var(--surface-tint-alt3); }
    #stopSalesBanner { border-radius:14px; padding:1.1rem 1.3rem; margin:0 0 1.2rem; font-size:.9rem; background:var(--danger-bg); color:var(--danger); border:1.5px solid var(--danger-tint); }
    #stopSalesBanner strong { display:block; font-size:1rem; margin-bottom:.3rem; }
    #leadTimeBanner { border-radius:12px; padding:.8rem 1rem; margin:.3rem 0 .6rem; font-size:.84rem; line-height:1.55; }
    #leadTimeBanner.lt-warn  { background:var(--bg-alt3); color:var(--warning-alt2); border:1px solid var(--accent-pale-alt4); display:block; }
    #leadTimeBanner.lt-block { background:var(--danger-bg); color:var(--danger); border:1px solid var(--danger-tint); display:block; }

    /* ── Preferred Model ── */
    .pref-label { font-size:.78rem !important; color:var(--muted-alt4) !important; font-weight:600 !important; margin:0 0 .25rem !important; display:block !important; }
    #preferredModel { width:100% !important; border:2px solid var(--surface-tint) !important; border-radius:12px !important; padding:.85rem 1rem !important; font-size:.95rem !important; background:var(--surface-tint-alt2); }
    .pref-disclaimer { font-size:.75rem; color:var(--muted); margin:.3rem 0 0; line-height:1.45; font-style:italic; }

    /* ── Confirmation Screen ── */
    .booking-confirm-wrap { max-width:540px; margin:4rem auto; padding:2.5rem 2rem; text-align:center; border-radius:24px; box-shadow:0 12px 40px rgba(var(--primary-rgb), 0.08); }
    .confirm-icon { width:64px; height:64px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2rem; margin:0 auto 1.2rem; font-weight:700; }
    .confirm-icon.confirmed { background:var(--success-bg); color:var(--success); }
    .confirm-icon.pending   { background:var(--info-bg); color:var(--info-alt); }
    .confirm-title { font-family:var(--isl-serif); font-size:1.6rem; margin:0 0 .4rem; }
    .confirm-subtitle { color:var(--muted); margin:0 0 1.8rem; font-size:.95rem; }
    .confirm-details { text-align:left; border:1px solid var(--surface-tint-alt10); border-radius:14px; overflow:hidden; margin-bottom:1.4rem; }
    .confirm-row { display:flex; justify-content:space-between; align-items:baseline; padding:.65rem 1rem; gap:1rem; }
    .confirm-row:not(:last-child) { border-bottom:1px solid var(--surface-tint-alt6); }
    .confirm-label { font-size:.8rem; color:var(--muted); white-space:nowrap; }
    .confirm-value { font-weight:600; font-size:.9rem; text-align:right; }
    .confirm-note { font-size:.82rem; color:var(--muted); max-width:400px; margin:0 auto; line-height:1.6; }
    /* My booking puts its voucher and cancel buttons in a .confirm-note under
       the pay box, not in the centred done screen this rule was made for: laid
       out inline, the pair sat left and its padding rode up into the box above.
       Scoped to #myBookingBody so the wizard's done screen keeps its note. */
    #myBookingBody .confirm-note { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; max-width:none; margin:1.2rem auto 0; }
    #myBookingBody .confirm-note:empty { display:none; }
    #myBookingBody .confirm-note .btn { font:inherit; font-weight:600; }
    /* Find my booking: "PR-" printed inside the box, the customer types the
       number after it (owner 2026-10-05). */
    .ref-field { position:relative; }
    .ref-field .ref-prefix { position:absolute; left:1rem; top:50%; transform:translateY(-50%); font-size:.95rem; font-weight:700; color:var(--text); pointer-events:none; }
    .wizard-panel-body .ref-field input#fbReference { padding-left:3rem; }

    /* ── Mobile ── */
    @media (max-width:768px) {
      .step3-layout { grid-template-columns:1fr; }
      .step3-cost-sidebar { position:static; order:-1; }
    }
    @media (max-width:640px) {
      .wizard-steps { gap:0; }
      .wizard-step__label { display:none; }
      .wizard-step__connector { max-width:24px; }
      /* Numbers alone told nobody where they were (outsider 2026-09-20):
         the current step keeps its name, under its number, out of the row's
         flow so five numbers still fit 375px. */
      .wizard-steps { padding-bottom:2rem; }
      .wizard-step { position:relative; }
      .wizard-step.active .wizard-step__label { display:block; position:absolute; top:100%; left:50%;
        transform:translateX(-50%); margin-top:.3rem; font-size:.74rem; }
      /* The end steps' names would touch the screen edge when centred. */
      .wizard-step:first-child.active .wizard-step__label { left:.55rem; transform:none; }
      .wizard-step:last-child.active .wizard-step__label { left:auto; right:.55rem; transform:none; }

      /* The model goes onto its own line, so the separator would hang at the
         end of the group name. */
      .group-select-card__model { display:block; }
      .group-select-card__model::before { content:none; }

      .group-model-grid { grid-template-columns:repeat(auto-fill,minmax(150px,max-content)); }
      .photo-carousel { height:120px; }
      .photo-carousel-track img { height:120px; }
      .photo-placeholder { height:120px; }
      .group-model-card__photo { height:120px; }
      .group-model-card__photo-placeholder { height:120px; }
      .carousel-btn { width:22px; height:22px; font-size:.75rem; }
      .wizard-body { max-width:100%; }
      .wizard-panel-header { padding:1.5rem 1.2rem 1rem; }
      .wizard-panel-body { padding:1.2rem 1.2rem 1.5rem; }
      .wizard-actions { padding:1rem 1.2rem; }
      .field-group { padding:.8rem 1rem .3rem; }
    }

    /* ═══════════════════════════════════════════════════════════════════════
       BROKER ADDITIONS — the four things a broker's wizard shows that a
       rental product's does not. Same visual language as everything above;
       no new colours, only the existing custom properties.
       ═══════════════════════════════════════════════════════════════════════ */

    /* The ten-minute hold, counting down in front of the customer. It is a
       real row held out of somebody's fleet, so it is stated plainly rather
       than hidden — and it turns amber in the last two minutes. */
    /* `:not([hidden])` on BOTH this and the span below. A bare `display`
       rule beats the browser's own rule for the hidden attribute, so the
       strip stood on screen saying "This car is reserved for you 10:00"
       for every supplier that holds no car here — which on the live site
       is every supplier, Mascot being connected. Found by driving
       staging after the deploy, not by any test: the e2e asked for the
       hidden ATTRIBUTE, which was set the whole time. */
    .hold-timer:not([hidden]) { display:flex; align-items:center; gap:.5rem; justify-content:center;
      margin:0 0 .9rem; padding:.5rem .8rem; border-radius:10px;
      background:var(--surface-alt); border:1px solid var(--surface-tint-alt3);
      font-size:.8rem; color:var(--muted-alt4); }
    /* The sentence and the clock are one span now, so the row's own gap falls
       between the two MESSAGES instead of between the words and the number. */
    /* `:not([hidden])` is not decoration: a bare `display:flex` BEATS the
       browser's own rule for the hidden attribute, so at zero both the
       countdown and the lapsed sentence sat on the strip at once. */
    .hold-timer #holdTimerLive:not([hidden]) { display:flex; align-items:center; gap:.5rem; }
    .hold-timer strong { font-variant-numeric:tabular-nums; color:var(--primary); font-size:.9rem; }
    .hold-timer.hold-timer--low { background:var(--warning-bg); border-color:var(--warning); }
    .hold-timer.hold-timer--low strong { color:var(--warning); }
    /* Zero. Not a warning colour: nothing has gone wrong and the car is
       probably still theirs — see `holdHasLapsed` in booking.js. */
    .hold-timer.hold-timer--lapsed { background:var(--surface-alt); border-style:dashed; }

    /* "Only 2 left" — honest, because units are real rows. */
    .card-units-left { font-size:.75rem; font-weight:700; color:var(--warning); }
    /* An on-request supplier answers within a day; the badge says so before
       the customer has spent five minutes filling a form. */
    .card-on-request { display:inline-block; font-size:.68rem; font-weight:700;
      letter-spacing:.06em; text-transform:uppercase; padding:.15rem .45rem;
      border-radius:999px; background:var(--surface-tint); color:var(--muted-alt4); }

    /* The supplier's own terms: one muted line on the card (it was a row of
       chips until the 2026-09-10 design review), in full at review. */
    .terms-summary { font-size:.72rem; line-height:1.4; color:var(--muted-alt4); margin:.35rem 0 0; }
    /* The licence rule is the one condition nobody checks for the customer,
       so it keeps its own sentence under the line above. */
    .card-licence { font-size:.72rem; color:var(--muted-alt4); margin:.35rem 0 0; }
    /* Both fold behind one "Conditions" tap on a phone. On desktop the
       renderer sets `open` and this hides the tap: a closed <details> hides
       its body in a way no author CSS can override, so the attribute, not a
       rule, decides what is shown. */
    .card-conditions summary { display:none; }
    /* Under the daily rate, because it explains the trip total for the one
       driver it applies to. Body colour, not muted: it is about money. */
    .card-young-driver { font-size:.72rem; line-height:1.4; color:var(--text); margin:.35rem 0 0; }
    .terms-full dd.terms-note { grid-column:1 / -1; font-weight:400; color:var(--muted); }
    @media (max-width:768px) {
      .card-conditions summary { display:list-item; font-size:.75rem; font-weight:600;
        color:var(--primary); cursor:pointer; margin-top:.35rem; }
    }
    .cover-no-deposit { font-size:.82rem; color:var(--muted-alt4); margin:0 0 .6rem;
      line-height:1.5; }
    .terms-full { margin:.75rem 0 0; padding:.75rem .9rem; border-radius:10px;
      background:var(--surface-alt); border:1px solid var(--surface-tint-alt3); }
    .terms-full dl { display:grid; grid-template-columns:auto 1fr; gap:.25rem .8rem; margin:0; font-size:.8rem; }
    .terms-full dt { color:var(--muted); }
    .terms-full dd { margin:0; color:var(--text); font-weight:600; }

    /* The whole document, folded. Step 5 and the my-booking page share these
       rules. NOTHING here may set `display` on `.conditions-box`: the wizard
       shows and hides it with the `hidden` attribute, and a later `display:`
       rule beats `[hidden]` — which is how a hold timer once stayed on screen
       for cars nobody was holding (2026-09-09). */
    .conditions-box { margin:.75rem 0 0; padding:.75rem .9rem; border-radius:10px;
      background:var(--surface-alt); border:1px solid var(--surface-tint-alt3); }
    .conditions-box summary { cursor:pointer; display:flex; gap:.75rem;
      justify-content:space-between; align-items:center; list-style:none; }
    .conditions-box summary::-webkit-details-marker { display:none; }
    .conditions-toggle, .conditions-hide { font-size:.8rem; font-weight:600;
      color:var(--primary); white-space:nowrap; }
    .conditions-hide { display:none; }
    .conditions-box[open] .conditions-toggle { display:none; }
    .conditions-box[open] .conditions-hide { display:inline; }
    .conditions-text { margin-top:.6rem; font-size:.85rem; line-height:1.55;
      max-height:22rem; overflow:auto; color:var(--text); }
    .conditions-text p { margin:0 0 .6rem; }

    /* The one line that replaces the payment step. */
    .pay-at-handover { margin:.9rem 0 0; padding:.8rem 1rem; border-radius:12px;
      border:1px solid var(--surface-tint); border-left:3px solid var(--accent,#c99a3b);
      background:var(--surface-alt); font-size:.88rem; line-height:1.5; color:var(--text); }
    .pay-at-handover strong { font-size:1rem; }