/**
 * ATX Booking — module styles.
 *
 * Visual language aligned with the global theme (style.css) and the
 * sibling booking modules (qr-booking-module, voice-booking):
 *   - brand accent via --are-color (#E52713)
 *   - typography via --font-body-family / --font-heading-family
 *   - 2px button radius via --btn-radius, uppercase 600 CTA
 *   - panel look on desktop (shadow + 1rem radius), full-bleed on mobile
 *
 * Class names and data-attribute hooks are unchanged — only the look.
 * See modules/booking-flow/ATX_BOOKING_SPEC.md §4 / §5.
 */

/* ============================================================
   Module-local tokens (resolved against global theme tokens)
   ============================================================ */
.atx-booking {
    /* brand + neutrals */
    --atx-bk-accent:        var(--are-color, #E52713);
    --atx-bk-accent-hover:  #c91f10;
    --atx-bk-fg:            var(--text-main, #111);
    --atx-bk-muted:         #666;
    --atx-bk-border:        var(--are-light-gray, #e9ebee);
    --atx-bk-border-strong: #aaa;
    --atx-bk-bg-step:       #fff;
    --atx-bk-bg-soft:       #fafafa;
    --atx-bk-bg-hover:      #f5f5f5;

    /* layout */
    --atx-bk-gap:    1rem;
    --atx-bk-pad:    1.25rem;
    --atx-bk-radius: 0.5rem;

    /* container */
    box-sizing: border-box;
    position: relative;
    max-width: 560px;
    margin: 0 auto;
    padding: var(--atx-bk-pad);
    font-family: var(--font-body-family, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
    font-size: 16px;
    line-height: 1.45;
    color: var(--atx-bk-fg);
    background: transparent;
    overflow: visible;
}
.atx-booking *,
.atx-booking *::before,
.atx-booking *::after { box-sizing: inherit; }

/* Prevent iOS Safari zoom on tap for interactive elements */
.atx-booking button,
.atx-booking input,
.atx-booking select,
.atx-booking textarea { touch-action: manipulation; }

/* Desktop: panel-style container (matches qr-booking) */
@media (min-width: 768px) {
    .atx-booking {
        max-width: 600px;
        margin-top: 2rem;
        margin-bottom: 2rem;
        padding: 1.5rem;
        background: #fff;
        border: 1px solid var(--atx-bk-border-strong);
        border-radius: 1rem;
        box-shadow: var(--shadow-soft, 0 6px 18px rgba(0, 0, 0, 0.06));
        /* Safari leaves ghost border-radius/box-shadow artifacts at the
           old height when the panel grows after a step is unhidden. Force
           a compositing layer so the full bounding box repaints. */
        transform: translateZ(0);
        will-change: transform;
    }
    /* Teaser is hosted inside another container (hero / sidebar) — no
       inner frame so we don't double the chrome, but keep a small gutter
       so inputs don't glue to the host panel's edges. */
    .atx-booking.atx-booking--mode-teaser {
        max-width: none;
        margin: 0;
        padding: 1.5rem;
        background: transparent;
        border: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Teaser: suppress the number bubble + title text to save vertical space
   (the teaser only ever shows Step 1, so the label is redundant), BUT keep
   the step-header element itself in the flow so the map-bridge's "Öppna
   Karta" pill — which is appended into the Step-1 header — stays visible.
   The header is then absolutely lifted into the caption row above the
   widget (e.g. the "BOKA HÄR" h2 of the host short-code section), pinning
   the pill at the top-right of the teaser. */
.atx-booking--mode-teaser {
    position: relative;
}
.atx-booking--mode-teaser .atx-booking__step-header {
    position: absolute;
    top: -2.6rem;
    right: 0;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    z-index: 2;
    pointer-events: none; /* allow clicks through the empty header strip */
    /* Step-1's header contains a bare "Resväg" text node (not wrapped in a
       .atx-booking__step-title span like the other steps). Zero the header's
       own font so that loose text node collapses; children that we DO want
       to keep (the map pill) re-declare their own font sizing. */
    font-size: 0;
    line-height: 0;
}
.atx-booking--mode-teaser .atx-booking__step-header > * {
    pointer-events: auto;  /* …but the pill itself stays clickable */
}
/* Hide every direct child of the teaser step header. The map pill is
   rendered as a separate corner clone on the short-code panel by the
   bridge JS, so the inline copy in this collapsed header must stay hidden
   to avoid two pills on top of each other. */
.atx-booking--mode-teaser .atx-booking__step-header > * {
    display: none;
}
/* Teaser: suppress the Step-1 trip-info paragraph (airport / arrival-time
   guidance). The teaser is a compact entry surface — the full booking page
   shows this same text once the user lands there. */
.atx-booking--mode-teaser .atx-booking__step-info--trip {
    display: none !important;
}
.atx-booking--mode-teaser .atx-booking__step {
    border: 0;
    padding: 0;
    background: transparent;
    margin-bottom: 0;
}

/* ----------------------------------------------------------------
   Teaser-mode compact layout
   ----------------------------------------------------------------
   Pack Step 1 into two horizontal rows so the teaser fits inside a
   hero/sidebar without scrolling:
     row A: Från | Till
     row B: Datum | Tid | Personer | Väskor
   Address-suggestion lists, errors and the Continue button stay
   full-width.
   ---------------------------------------------------------------- */
@media (min-width: 600px) {
    .atx-booking--mode-teaser .atx-booking__step-body {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        column-gap: var(--atx-bk-gap);
        row-gap: 0.5rem;
        align-items: start;
    }
    .atx-booking--mode-teaser .atx-booking__step-body > * {
        grid-column: 1 / -1;
        min-width: 0; /* allow grid items to shrink instead of overflow */
        margin-bottom: 0; /* spacing handled by grid row-gap */
    }
    .atx-booking--mode-teaser .atx-booking__step-body > .atx-booking__row--combo {
        grid-column: span 2;
    }
    /* In teaser, the merged date/time/persons/bags row-grid becomes a single
       grid item spanning all 4 parent cols, with an internal 4-col layout so
       all four fields share ONE row. This isolates it from the parent grid's
       auto-flow, so it always lands on its own row regardless of whether an
       extra row is visible above. */
    .atx-booking--mode-teaser .atx-booking__step-body > .atx-booking__row-grid--datetime {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-column: 1 / -1;
        column-gap: var(--atx-bk-gap);
    }
    .atx-booking--mode-teaser .atx-booking__step-body
        > .atx-booking__row-grid--datetime > .atx-booking__row {
        min-width: 0;
    }
    /* Extras: each extra row is placed by source order between its address
       row and the next sibling. In teaser we pin them to row 2 of the parent
       grid so they always sit directly under From / To respectively. */
    .atx-booking--mode-teaser .atx-booking__step-body > [data-atx-extra-row="0"] {
        grid-column: 1 / span 2;
        grid-row: 2;
    }
    .atx-booking--mode-teaser .atx-booking__step-body > [data-atx-extra-row="1"] {
        grid-column: 3 / span 2;
        grid-row: 2;
    }
    /* Extra breathing room between the address row (Från/Till) and the
       date/time/persons/bags row, on top of the parent grid's row-gap. */
    .atx-booking--mode-teaser .atx-booking__step-body
        > .atx-booking__row-grid--datetime {
        margin-top: 0.5rem;
    }
    /* Extra breathing room above the Rensa / Fortsätt buttons in teaser —
       the compact stacking makes them otherwise hug the bag/persons row. */
    .atx-booking--mode-teaser .atx-booking__step-body
        > .atx-booking__row--actions {
        margin-top: 1.25rem;
    }
    /* The house stepper (.atx-stepper--block) with narrower ± buttons, so
       it fits the narrow teaser cell; the number may shrink. */
    .atx-booking--mode-teaser .atx-booking__stepper > .atx-stepper__btn {
        width: 40px;
    }
    .atx-booking--mode-teaser .atx-booking__stepper > .atx-stepper__value {
        min-width: 0;
        padding: 0 0.5rem;
    }
}

/* ============================================================
   Step shells
   ============================================================ */
.atx-booking__step {
    background: var(--atx-bk-bg-step);
    border: 1px solid var(--atx-bk-border);
    border-radius: var(--atx-bk-radius);
    padding: var(--atx-bk-pad);
    margin-bottom: var(--atx-bk-gap);
}
.atx-booking__step:last-child { margin-bottom: 0; }
.atx-booking__step[hidden] { display: none !important; }

/* Desktop: the outer .atx-booking wrapper is itself a single panel
   (border + rounded corners + shadow). Drop the per-step chrome so we
   don't paint another set of rounded boxes inside it — the user sees
   just one panel containing the steps. */
@media (min-width: 768px) {
    .atx-booking:not(.atx-booking--mode-teaser) .atx-booking__step {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0 0 calc(var(--atx-bk-gap) * 2);
        margin-bottom: var(--atx-bk-gap);
        border-bottom: 1px solid var(--atx-bk-border);
    }
    .atx-booking:not(.atx-booking--mode-teaser) .atx-booking__step:last-child {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    /* Step-5 sits below the disclaimer, not in the normal step flow.
       Show the divider ABOVE it (between disclaimer and the confirmation)
       and drop the bottom divider so it doesn't double up with the
       bottom-actions row. */
    .atx-booking:not(.atx-booking--mode-teaser) .atx-booking__step--5 {
        border-bottom: 0;
        border-top: 1px solid var(--atx-bk-border);
        padding-top: calc(var(--atx-bk-gap) * 2);
        margin-top: var(--atx-bk-gap);
    }
}

/* Mobile: drop the per-step panel frame to reclaim horizontal space —
   controls should use the full viewport width with only a small page
   margin. Steps are separated by a thin divider instead of a box. */
@media (max-width: 767.98px) {
    .atx-booking {
        /* Tight side gutter so controls have maximum width on phones. */
        padding-left:  0.25rem;
        padding-right: 0.25rem;
    }
    .atx-booking:not(.atx-booking--mode-teaser) .atx-booking__step {
        background: transparent;
        border: 0;
        border-radius: 0;
        padding: 0 0 var(--atx-bk-gap);
        margin-bottom: var(--atx-bk-gap);
        border-bottom: 1px solid var(--atx-bk-border);
    }
    .atx-booking:not(.atx-booking--mode-teaser) .atx-booking__step:last-child {
        border-bottom: 0;
        padding-bottom: 0;
        margin-bottom: 0;
    }
    .atx-booking:not(.atx-booking--mode-teaser) .atx-booking__step--5 {
        border-bottom: 0;
        border-top: 1px solid var(--atx-bk-border);
        padding-top: var(--atx-bk-gap);
        margin-top: var(--atx-bk-gap);
    }
    /* Divider above step 1 — same hairline as the inter-step dividers
       so the very first step is visually framed at the top too. */
    .atx-booking:not(.atx-booking--mode-teaser) .atx-booking__step--1 {
        border-top: 1px solid var(--atx-bk-border);
        padding-top: var(--atx-bk-gap);
    }
}

.atx-booking__step-header {
    /* div[role=heading] (not h2) so the booking steps don't count in the
       page's SEO heading outline; line-height matches the old h2. */
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin: 0 0 1.5rem;
    line-height: var(--font-heading-line-height, 1.2);
    font-family: var(--font-heading-family, inherit);
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--atx-bk-fg);
}
.atx-booking__step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--atx-bk-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0;
}

/* Mobile: enlarge the step caption (e.g. "Resa", "Alternativ", "Tillval",
   "Kunduppgifter") so each step's name is easier to read on phones. */
@media (max-width: 767.98px) {
    .atx-booking__step-header {
        font-size: 1.4rem;
        gap: 0.6rem;
    }
    .atx-booking__step-num {
        width: 2.15rem;
        height: 2.15rem;
        font-size: 1.05rem;
    }
}

.atx-booking__step--collapsed { opacity: 0.6; }
/* Collapsed steps only show their header — the body is hidden until the
   step becomes reachable (currentStep advances). Steps 2/3/4 are revealed
   together via goToStep(4) after Step 1 is completed. */
.atx-booking__step--collapsed .atx-booking__step-body { display: none; }
/* Step 5 (confirmation) is a pure success view — hide it entirely until
   the booking has actually been submitted (its header sits outside
   .atx-booking__step-body so the rule above wouldn't cover it). */
.atx-booking__step--5.atx-booking__step--collapsed { display: none; }

/* Step-info paragraphs (small grey text under each step body).
   Variants: --trip (Step 1), --alt (Step 2), --extra (Step 3),
   --cust (Step 4). The text comes from i18n keys tripInfo/altInfo/
   extraInfo/custInfo; the paragraph is omitted entirely when empty. */
.atx-booking__step-info {
    margin: 28px 14px 12px;
    color: #6a6a6a;
    font-size: 0.75em;
    line-height: 1.35;
    text-align: center;
}
.atx-booking__step-info--trip {
    margin-top: 44px;
}
/* Straight edges on both sides: the arrival text and the extras text. */
.atx-booking__step-info--trip,
.atx-booking__step-info--extra {
    text-align: justify;
}
.atx-booking__step-info--cust {
    margin-bottom: 12px;
}

/* Step-4 pickup-shift hint — shown when the customer picked a
   time-shifted alternative (e.g. "You are booking 15 min later than
   your requested time."). Hidden by default; JS toggles `hidden`. */
.atx-booking__pickup-shift { margin: 0 14px 14px; } /* the house notice (.atx-notice--warn) */

/* ============================================================
   Disclaimer / terms acceptance (always visible above the
   bottom action bar, regardless of which step is open).
   Checkbox + caption on the same row, small info paragraph below.
   ============================================================ */
/* The checkbox, the text, the buttons and the contact line are the house
   BOOKING FOOT (style.css), the same as on the QR form; here only the room
   above it. */
.atx-booking__disclaim {
    margin: 0;
    padding-top: 28px;
}
/* The terms link is the house link (a in style.css: dark grey, no
   underline, the house colour on hover). */

/* ============================================================
   "More options" block — privileged-mode toggles (employee/agent).
   No surrounding panel: just a divider above to separate it from
   the disclaimer, with the controls flush in the form column.
   Heading is intentionally omitted (the available toggles speak
   for themselves). Informational text inside (e.g. the coins
   banner) reuses the .atx-book-alt__notice format from Step 2.
   ============================================================ */
.atx-booking__behalf {
    margin: 0 14px 18px;
    padding: 0 0 18px;
    border-bottom: 1px solid #e2e2e2;
}
/* The checkboxes with their text are the house's (.atx-check), one per line. */
.atx-booking__behalf-row {
    display: flex;
    margin: 0.4rem 0;
}
/* GRUPP (delning, SPEC §7ter.3) och Pris (husfältet med enheten kr,
   .atx-form-field__unitrow): lika breda som en cell i TID/DATUM-
   rutnätet ovan (halva steget minus halva mellanrummet). Rutan ligger i
   .atx-booking__behalf som har 14px marginal på var sida → + 28px. */
.atx-booking__behalf-share,
.atx-booking__behalf-custprice {
    margin: 0.8rem 0 0.2rem;
    width: calc((100% + 28px - var(--atx-bk-gap)) / 2);
    max-width: 100%;
}
.atx-booking__behalf-share[hidden],
.atx-booking__behalf-custprice[hidden] { display: none; }
.atx-booking__behalf-share > .atx-booking__row { margin-bottom: 0; }
@media (max-width: 767.98px) {
    .atx-booking__behalf-share,
    .atx-booking__behalf-custprice { width: calc((100% + 28px - 0.5rem) / 2); }
}
.atx-booking__behalf-custprice .atx-booking__more-info {
    margin: 0.2rem 0 0;
}

/* More-options info — the house notice (.atx-notice, style.css); the JS
   sets its colour from data-state: short → error, unknown → warn, ok → info. */
.atx-booking__more-info { margin: 0.6rem 0 0; }
.atx-booking__more-info[hidden] { display: none; }

/* ============================================================
   Form rows / inputs
   ============================================================ */
.atx-booking__row {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 0.875rem;
}
.atx-booking__row:last-child { margin-bottom: 0; }
/* `display: flex` on .atx-booking__row outranks the UA `[hidden] { display: none }`
   rule, so we have to re-assert it explicitly (same pattern as __step / __error).
   Same for the row-grid wrapper which sets `display: grid` / `contents`. */
.atx-booking__row[hidden],
.atx-booking__row-grid[hidden] { display: none !important; }
/* The fields and their headings are the house's: .atx-form-field (48px,
   frame, corners, weight 600, focus ring, placeholder, autofill, the phone
   row), .atx-label, and the field with a button (.atx-fieldbtn: the date,
   time and address fields with their chevron / clock / calendar button),
   all in style.css. */

/* Side-by-side rows (date/time, persons/bags) */
.atx-booking__row-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--atx-bk-gap);
    margin-bottom: 0.875rem;
}
/* A small gap between the addresses (Från / Till and their extra rows,
   e.g. the ferry) and Tid / Datum below them: 24px instead of the rows'
   14px (the two margins meet, the larger one counts). */
.atx-booking__row-grid--datetime {
    margin-top: 1.5rem;
}
/* Cells inside a row-grid must not add their own bottom margin —
   that would inflate the grid track and create a visible gap. */
.atx-booking__row-grid > .atx-booking__row { margin-bottom: 0; }
/* Side-by-side rows stay two-column on phones too — the cells (date+time,
   persons+bags) are narrow by design and reading them next to each other
   is more compact than stacking. */
/* Full mode (non-teaser): extras under From / To should match the width of
   one date/time cell (i.e. half the step-body, minus half the column gap)
   rather than stretching across the whole row. On narrow viewports where
   the date/time row-grid collapses to a single column, let extras stretch
   too so they keep visual parity. */
.atx-booking:not(.atx-booking--mode-teaser) .atx-booking__step-body > [data-atx-extra-row] {
    max-width: calc((100% - var(--atx-bk-gap)) / 2);
}
/* Persons / bags: the house stepper at full width (.atx-stepper--block,
   style.css) — 48px buttons, 48px high, as the date/time fields above. */

/* ============================================================
   Buttons
   ----------------------------------------------------------------
   Visual styling is provided by the global button system in
   style.css (.atx-btn / .atx-btn--primary / .atx-btn--secondary /
   size modifiers). The module-scoped classes below are kept as
   structural hooks and add only what the global system doesn't
   already cover (mainly the 48px tap-target floor and stretching
   to fill narrow layouts).
   ============================================================ */
.atx-booking__cta-button {
    min-height: 48px;
}
.atx-booking__cta-button[disabled],
.atx-booking__cta-button[aria-disabled="true"] {
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(0.3);
}
/* Buttons inside the booking panel use display:flex via the global
   .atx-btn class, which overrides the implicit display:none from the
   `hidden` attribute. Force-hide so JS `btn.hidden = true` actually
   removes the button visually (used e.g. for the round-trip button
   after a return booking has already been made). */
.atx-booking .atx-btn[hidden] { display: none !important; }

/* ============================================================
   Inline field-level error guidance
   Applied to a field by JS (`.is-invalid`) after the user attempts
   to advance / submit with missing data. Cleared automatically once
   the field becomes valid (see `_revalidateLiveErrors` in JS).
   ============================================================ */
.atx-booking .is-invalid,
.atx-booking input.is-invalid,
.atx-booking select.is-invalid,
.atx-booking textarea.is-invalid {
    border-color: var(--atx-error) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--atx-error) 18%, transparent);
}
.atx-booking .atx-booking__disclaim-row.is-invalid .atx-booking__disclaim-cap {
    color: var(--atx-error);
}
.atx-booking .atx-booking__disclaim-row.is-invalid .atx-booking__disclaim-check {
    outline: 2px solid var(--atx-error);
    outline-offset: 2px;
    border-radius: 2px;
}
/* The button rows are the house's: .atx-actions (equally wide, Rensa left,
   Fortsätt / Boka right; step 1 --apart: not half the row each, Rensa at the
   left edge, Fortsätt at the right) and, at the bottom, --stack (under each
   other in the phone: "Boka returresa | Hem" on the success screen), style.css. */
.atx-booking__row--actions {
    margin-top: 0.5rem;
}

/* Hide the Step-1 "Fortsätt" button on mobile — the map auto-advances */
@media (max-width: 767.98px) {
    [data-atx-action="continue-step-1"] {
        display: none;
    }
}

/* Focus ring: the house's (style.css) – buttons a ring, fields their own frame. */

/* ============================================================
   Sticky CTA bar (mobile-first)
   ============================================================ */

/* ============================================================
   Mode variants
   ============================================================ */
.atx-booking--mode-teaser .atx-booking__step--2,
.atx-booking--mode-teaser .atx-booking__step--3,
.atx-booking--mode-teaser .atx-booking__step--4,
.atx-booking--mode-teaser .atx-booking__step--5,
.atx-booking--mode-teaser .atx-booking__disclaim,
.atx-booking--mode-teaser .atx-booking__row--actions-bottom,
.atx-booking--mode-teaser .atx-book-foot__contact { display: none; }

.atx-booking--mode-embed { max-width: 100%; }

/* ============================================================
   Combo (address input) + suggestions
   ============================================================ */
.atx-booking__row--combo { position: relative; }

/* The list itself (.atx-combo__list) is the house address list in style.css. */

/* ============================================================
   Stepper (persons / bags)
   ============================================================ */
/* .atx-booking__stepper: the house stepper (.atx-stepper, style.css). */

/* ============================================================
   Inline error + placeholders
   ============================================================ */
/* .atx-booking__error / __warning: the house feedback box
   (.atx-feedback--error / --warn, style.css). */

.atx-booking__placeholder {
    margin: 0;
    padding: 0.75rem;
    color: var(--atx-bk-muted);
    background: var(--atx-bk-bg-soft);
    border: 1px dashed var(--atx-bk-border-strong);
    border-radius: var(--atx-bk-radius);
    font-size: 0.85rem;
}

/* Admin-only "module disabled" notice */
.atx-booking--disabled {
    padding: 0.75rem;
    color: #b91c1c;
    border: 1px dashed #b91c1c;
    border-radius: var(--atx-bk-radius);
    font-size: 0.85rem;
}

/* Policy gate rejection panel (shown in Step 2 when every alternative was
   filtered out by business-hour / lead-time rules). */
.atx-booking__policy-reject {
    margin: 0;
    padding: 0.9rem 1rem;
    color: #8a4b00;
    background: #fff7ed;
    border: 1px solid #fbbf24;
    border-left-width: 4px;
    border-radius: var(--atx-bk-radius);
    font-size: 0.9rem;
    line-height: 1.4;
}
.atx-booking__policy-reject-msg {
    margin: 0;
    font-weight: 600;
}
.atx-booking__policy-reject-hint {
    margin: 0.4rem 0 0;
    font-weight: 400;
    color: #92400e;
}

/* ============================================================
   Step 2 — options (vehicle / pricing)
   ============================================================ */

/* Step 3 collapsed "lead" — lives inside the step header next to the
   step number/title, right-aligned (margin-left:auto pushes it). Same
   font size as the Step 2 route meta so the visual rhythm matches.
   The chevron on the right rotates when the extras body is expanded. */
.atx-booking__extras-lead-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0 auto;
    padding: 0.25rem 0.5rem;
    background: transparent;
    border: none;
    color: var(--atx-bk-fg);
    font: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    text-align: right;
    cursor: pointer;
    border-radius: var(--atx-bk-radius);
    transition: background-color 0.12s ease;
}
.atx-booking__extras-lead-btn:hover,
.atx-booking__extras-lead-btn:focus-visible {
    background: var(--atx-bk-bg-hover, rgba(0,0,0,0.04));
}
.atx-booking__extras-lead-text {
    white-space: normal;
}
.atx-booking__extras-lead-icon {
    width: 12px;
    height: 12px;
    opacity: 0.6;
    transition: transform 0.15s ease, opacity 0.12s ease;
}
.atx-booking__extras-lead-btn[aria-expanded="true"] .atx-booking__extras-lead-icon {
    transform: rotate(180deg);
    opacity: 0.9;
}
/* Lead button stays hidden until Step 3 is reachable — i.e. the section
   is no longer in the dimmed/collapsed pre-state. */
.atx-booking__step--collapsed .atx-booking__extras-lead-btn { display: none; }
[data-atx-extras][hidden] { display: none !important; }
.atx-booking__row--option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
    padding: 0.75rem 0.875rem;
    background: #fff;
    border: 1px solid var(--atx-bk-border-strong);
    border-radius: var(--atx-bk-radius);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.atx-booking__row--option:hover {
    border-color: var(--atx-bk-accent);
    background: var(--atx-bk-bg-soft);
}
.atx-booking__row--option > input[type="radio"] {
    flex: 0 0 auto;
    margin: 0;
    width: 1.1rem;
    height: 1.1rem;
}
.atx-booking__row--option > .atx-booking__opt-label {
    flex: 1;
    font-weight: 500;
}
.atx-booking__row--option > .atx-booking__opt-price {
    font-weight: 700;
    color: var(--atx-bk-fg);
    white-space: nowrap;
}
/* Selected state (radio is :checked inside the label) */
.atx-booking__row--option:has(input[type="radio"]:checked) {
    border-color: var(--atx-bk-accent);
    background: color-mix(in srgb, var(--are-color, #E52713) 4%, transparent);
    box-shadow: 0 0 0 1px var(--atx-bk-accent);
}

/* ============================================================
   Step 3 — extras
   ============================================================ */

/* ============================================================
   Step 4 — OTP
   ============================================================ */

/* ============================================================
   Step 5 — confirmation
   ============================================================ */
.atx-booking__step-header--success { color: #1a7f37; }
.atx-booking__step-header--success .atx-booking__step-num { background: #1a7f37; }

.atx-booking__step--5 code {
    display: inline-block;
    padding: 0.125rem 0.4rem;
    background: var(--atx-bk-bg-soft);
    border: 1px solid var(--atx-bk-border);
    border-radius: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9rem;
}
.atx-booking__step--5 p { margin: 0 0 0.5rem; }

/* Confirmation summary — two-column aligned label/value grid.
   Labels (dt) auto-size to the widest text; values (dd) fill the rest.
   Column-gap acts as the "tab" between caption and data. */
.atx-booking__confirm-list {
    display: grid;
    grid-template-columns: max-content 1fr;
    column-gap: 0.75rem;
    row-gap: 0.35rem;
    margin: 0 0 0.5rem;
}
.atx-booking__confirm-list dt {
    font-weight: 600;
    margin: 0;
}
.atx-booking__confirm-list dd {
    margin: 0;
}
/* Extra blank-line gap before the SMS confirmation paragraph. */
.atx-booking__confirm-sms {
    margin-top: 1.25rem !important;
}
/* Closing "Välkommen!" line — same blank-line gap as the SMS row,
   slightly larger + bold to read as a friendly sign-off. */
.atx-booking__confirm-welcome {
    margin-top: 1.25rem !important;
    font-size: 1.1rem;
}
/* Partial-failure warning for multi-vehicle bookings — surfaced ABOVE the
   ID list so the user notices before the SMS info. Soft red so it reads
   as "action needed" without being alarmist; the successfully-created
   bookings (whose IDs are listed below) are real and still active. */
.atx-booking__confirm-warning {
    margin: 0 0 0.75rem !important;
    padding: 0.6rem 0.85rem;
    border: 1px solid #e6b8b8;
    background: #fdecec;
    color: #8a1f1f;
    border-radius: 4px;
}

/* Green positive notice (e.g. rebook-cancelled). Same shape as the warning
   above but in a reassuring green palette — "old booking is gone". */
.atx-booking__confirm-info {
    margin: 0 0 0.75rem !important;
    padding: 0.6rem 0.85rem;
    border: 1px solid #c2e0c6;
    background: #eaf6ed;
    color: #1f5e2a;
    border-radius: 4px;
}

/* ============================================================
   Custom scroll-list time picker
   ============================================================ */
.atx-booking__field-control--time { position: relative; }

/* The picker itself (.atx-tp) is the house time picker in style.css. */

/* ============================================================
   Locked / read-only form (after submit-in-flight or success)
   Steps 1–4 visually dimmed; interaction blocked at the input
   level via the disabled attribute (set in JS) — the rules
   below add the visual signal only.
   ============================================================ */
.atx-booking__form--locked .atx-booking__step--1,
.atx-booking__form--locked .atx-booking__step--2,
.atx-booking__form--locked .atx-booking__step--3,
.atx-booking__form--locked .atx-booking__step--4 {
    opacity: 0.7;
    filter: grayscale(0.15);
}
.atx-booking__form--locked .atx-booking__step--1 input,
.atx-booking__form--locked .atx-booking__step--1 select,
.atx-booking__form--locked .atx-booking__step--1 textarea,
.atx-booking__form--locked .atx-booking__step--2 input,
.atx-booking__form--locked .atx-booking__step--2 select,
.atx-booking__form--locked .atx-booking__step--2 textarea,
.atx-booking__form--locked .atx-booking__step--3 input,
.atx-booking__form--locked .atx-booking__step--3 select,
.atx-booking__form--locked .atx-booking__step--3 textarea,
.atx-booking__form--locked .atx-booking__step--4 input,
.atx-booking__form--locked .atx-booking__step--4 select,
.atx-booking__form--locked .atx-booking__step--4 textarea {
    background: #f3f4f6; /* the house's read-only field (style.css) */
    color: #4b5563;
    cursor: not-allowed;
}

/* ============================================================
   Confirm modal — visual styles live in the theme-wide style.css
   as .atx-modal-*. The booking wizard uses those classes directly
   via _showConfirmModal(); see also atx-bookings-list.js which
   uses the same shared design system for its info-modals.
   ============================================================ */

/* ============================================================
   Mobile final overrides (placed at end of file so they win
   the cascade over earlier base rules of identical specificity)
   ============================================================ */
@media (max-width: 767.98px) {
    /* Tighten the gap between side-by-side cells (date/time, persons/bags)
       so each cell gets more width on narrow phones. Vertical row-gap
       inside the grid (between date/time and persons/bags) matches the
       inter-row spacing used elsewhere (e.g. To address → date/time). */
    .atx-booking__row-grid {
        column-gap: 0.5rem;
        row-gap: 0.875rem;
    }
    /* The house stepper with 40px ± buttons, as the date/time buttons
       next to it on the phone; the number may shrink. */
    .atx-booking .atx-booking__stepper > .atx-stepper__btn {
        width: 40px;
        font-size: 1.5rem;
    }
    .atx-booking .atx-booking__stepper > .atx-stepper__value {
        min-width: 0;
        padding: 0 0.5rem;
    }
    /* Date / time fields share a half-cell with their toggle button on
       mobile. Match dimensions to the stepper so all four controls
       (date, time, persons, bags) have the same outer height (48px)
       and the same button width (40px). */
    .atx-booking__field-control--date,
    .atx-booking__field-control--time {
        min-height: 48px;
    }
    .atx-booking__field-control--date > input,
    .atx-booking__field-control--time > input {
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .atx-booking__field-control--date > .atx-booking__field-toggle,
    .atx-booking__field-control--time > .atx-booking__field-toggle {
        flex: 0 0 40px;
        min-height: 48px;
    }
    /* Bump the date/time glyph so the button reads as visually
       substantial as the stepper's +/- buttons next to it. */
    .atx-booking__field-control--date > .atx-booking__field-toggle .atx-booking__field-toggle-icon,
    .atx-booking__field-control--time > .atx-booking__field-toggle .atx-booking__field-toggle-icon {
        width:  22px;
        height: 22px;
    }

    /* Step 1's own Rensa (teaser) stays hidden on the phone; the foot's
       Rensa | Boka (BOOKING FOOT) shows both, as on the QR form. */
    .atx-booking .atx-booking__row--actions:not(.atx-booking__row--actions-bottom) [data-atx-action="clear-step-1"] {
        display: none !important;
    }
}

/* ============================================================
   Change-trip banner (Steps 3–5, modules/atx-booking-modify)
   Rendered by atx-booking.js _renderChangeBanner() when the
   wizard is hydrated from a change_token transient.
   ============================================================ */
.atx-bk-change-banner { margin: 0 0 16px 0; } /* the house notice (.atx-notice--warn) */