/* ────────────────────────────────────────────────────────────────────────────
   Public booking form — the staged buyer-facing page.

   Own CSS, page-scoped under .bk. No Bootstrap components: this app ships
   Bootstrap 5 CSS against an older Bootstrap JS bundle, which silently breaks
   dismiss behaviour and scroll locking.

   Every rule is prefixed with [dir] because the built app.css styles bare
   elements (h1, label, input, button) and a single class cannot outrank an
   element selector already carrying that specificity.

   Tokens inherit the payment-form checkout (.pf-page): this page is that page's
   successor, and a second palette would make two versions of the same checkout
   read as different products.

   Priorities here are comprehension, in this order:
     1. what am I buying, and what does it cost
     2. what do I have to do next
     3. what is running out
   Availability is stated in words first; the marks are a supporting detail, not
   the message. Every colour carries a literal fallback beside its token, because
   a custom property that fails to resolve invalidates the whole declaration.

   Mobile first: base rules are the phone layout.
   ──────────────────────────────────────────────────────────────────────────── */

[dir] .bk {
    --bk-surface: #fff;
    --bk-raised: #f8fafc;
    --bk-line: #e8ecf1;
    --bk-rule: #e2e8f0;
    --bk-ink: #1a2332;
    --bk-muted: #475569;
    --bk-faint: #94a3b8;
    --bk-brand: #0d9488;
    --bk-brand-tint: #f0fdfa;
    --bk-danger: #dc2626;
    --bk-danger-tint: #fef2f2;
    --bk-warn: #b45309;
    --bk-gone: #cbd5e1;
    --bk-pad: 22px;

    max-width: 860px;
    margin: 0 auto;
    padding: 20px 16px 56px;
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
}

[dir] .bk *,
[dir] .bk *::before,
[dir] .bk *::after { box-sizing: border-box; }

[dir] .bk [data-numeric] { font-variant-numeric: tabular-nums; }

/* ── What am I buying ────────────────────────────────────────────────────────
   The first thing on the page answers the first question, before anything is
   asked of the buyer.
   ──────────────────────────────────────────────────────────────────────────── */

[dir] .bk-hero {
    padding: 20px;
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 14px;
    background: #fff;
    background: var(--bk-surface, #fff);
    margin-bottom: 18px;
}

[dir] .bk-hero__eyebrow {
    margin: 0 0 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #0d9488;
    color: var(--bk-brand, #0d9488);
}

[dir] .bk-hero__title {
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.01em;
    overflow-wrap: anywhere;
}

[dir] .bk-hero__by {
    margin: 6px 0 0;
    font-size: 13px;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-hero__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 24px;
    margin: 16px 0 0;
    padding: 14px 0 0;
    border-top: 1px solid #e2e8f0;
    border-top: 1px solid var(--bk-rule, #e2e8f0);
}

[dir] .bk-fact__label {
    margin: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #94a3b8;
    color: var(--bk-faint, #94a3b8);
}

[dir] .bk-fact__value {
    margin: 3px 0 0;
    font-size: 15px;
    font-weight: 700;
}

[dir] .bk-hero__note {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
    color: var(--bk-muted, #475569);
}

/* ── Steps ───────────────────────────────────────────────────────────────────
   Named, not just numbered: "Step 2 of 3 · Choose your places" tells the buyer
   where they are and what this step is for.
   ──────────────────────────────────────────────────────────────────────────── */

[dir] .bk-steps {
    display: flex;
    gap: 6px;
    margin: 0 0 18px;
    padding: 0;
    list-style: none;
}

[dir] .bk-steps__item {
    flex: 1 1 0;
    min-width: 0;
    padding-top: 9px;
    border-top: 3px solid #e2e8f0;
    border-top: 3px solid var(--bk-rule, #e2e8f0);
    font-size: 12px;
    color: #94a3b8;
    color: var(--bk-faint, #94a3b8);
}

[dir] .bk-steps__item.is-done {
    border-top-color: #0d9488;
    border-top-color: var(--bk-brand, #0d9488);
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-steps__item.is-current {
    border-top-color: #0d9488;
    border-top-color: var(--bk-brand, #0d9488);
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
    font-weight: 600;
}

[dir] .bk-steps__label {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[dir] .bk-steps__label--short { display: none; }

/* ── Card ────────────────────────────────────────────────────────────────── */

[dir] .bk-card {
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 14px;
    background: #fff;
    background: var(--bk-surface, #fff);
    /* No overflow:hidden — it makes an ancestor scroll box for position:sticky, which stops
       the running-total bar pinning at all. Corners are clipped by border-radius instead,
       and the runbar rounds its own bottom edge to match. */
}

[dir] .bk-card__head {
    padding: 16px 18px;
    border-bottom: 1px solid #e8ecf1;
    border-bottom: 1px solid var(--bk-line, #e8ecf1);
}

[dir] .bk-card__step {
    margin: 0 0 4px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #0d9488;
    color: var(--bk-brand, #0d9488);
}

[dir] .bk-card__title {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
}

/* The step heading is given focus when the buyer moves between steps, so a screen reader
   announces the step they landed on. It is not a control and never a tab stop (tabindex is
   -1), so it should not be ringed like one — a buyer clicking Next was shown a box around
   the heading they had not touched. */
[dir] .bk-card__title:focus,
[dir] .bk-card__title:focus-visible {
    outline: none;
}

[dir] .bk-card__hint {
    margin: 6px 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-card__body { padding: var(--bk-pad, 22px); }

[dir] .bk-step[hidden] { display: none; }

/* ── Fields ──────────────────────────────────────────────────────────────── */

[dir] .bk-field + .bk-field { margin-top: 16px; }

[dir] .bk-field > label {
    display: block;
    margin-bottom: 6px;
    font-size: 14px;
    font-weight: 600;
}

[dir] .bk-req {
    color: #dc2626;
    color: var(--bk-danger, #dc2626);
}

[dir] .bk-field__hint {
    margin: 5px 0 0;
    font-size: 12px;
    line-height: 1.5;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-field select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-inline-end: 36px;
}

[dir] .bk-input,
[dir] .bk-field select,
[dir] .bk-field textarea {
    width: 100%;
    min-height: 46px;
    padding: 11px 14px;
    /* 16px, not 15: Safari zooms the page in on any focused field below 16px, and the
       buyer then has to pinch back out to carry on. */
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 10px;
    font: inherit;
    font-size: 16px;
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
    /* background-color, never the `background` shorthand: this rule also matches
       .bk-field select, and the shorthand resets background-image, wiping the chevron
       drawn above. */
    background-color: #fff;
    background-color: var(--bk-surface, #fff);
}

/* Re-applied after the shared rule above, whose `padding` shorthand resets every side and
   would otherwise take back the room made for the chevron, running the text under it. */
[dir] .bk-field select { padding-inline-end: 38px; }

[dir] .bk-input:focus-visible,
[dir] .bk-field select:focus-visible,
[dir] .bk-field textarea:focus-visible,
[dir] .bk-btn:focus-visible,
[dir] .bk-option input:focus-visible + .bk-option__mark {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--bk-brand, #0d9488);
    outline-offset: 2px;
}

/* ── Choice options ──────────────────────────────────────────────────────────
   A pick-one group is a question, not a shopping line. Rendering it as radio
   cards stops the buyer being offered a quantity stepper for something like a
   pickup point, where "2" is meaningless.
   ──────────────────────────────────────────────────────────────────────────── */

[dir] .bk-option {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px;
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}

[dir] .bk-option + .bk-option { margin-top: 10px; }

[dir] .bk-option:hover {
    border-color: #0d9488;
    border-color: var(--bk-brand, #0d9488);
}

[dir] .bk-option input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

[dir] .bk-option__mark {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 2px solid #cbd5e1;
    border: 2px solid var(--bk-gone, #cbd5e1);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: border-color .12s;
}

[dir] .bk-option__mark::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #0d9488;
    background: var(--bk-brand, #0d9488);
    opacity: 0;
    transition: opacity .12s;
}

[dir] .bk-option input:checked + .bk-option__mark {
    border-color: #0d9488;
    border-color: var(--bk-brand, #0d9488);
}

[dir] .bk-option input:checked + .bk-option__mark::after { opacity: 1; }

[dir] .bk-option:has(input:checked) {
    border-color: #0d9488;
    border-color: var(--bk-brand, #0d9488);
    background: #f0fdfa;
    background: var(--bk-brand-tint, #f0fdfa);
}

[dir] .bk-option__body { min-width: 0; flex: 1 1 auto; }

[dir] .bk-option__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
}

[dir] .bk-option.is-sold-out { cursor: not-allowed; opacity: .6; }

/* ── Items ───────────────────────────────────────────────────────────────── */

[dir] .bk-group {
    padding: 18px;
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 12px;
    background: #f8fafc;
    background: var(--bk-raised, #f8fafc);
}

[dir] .bk-group + .bk-group,
[dir] .bk-group + .bk-item,
[dir] .bk-item + .bk-item,
[dir] .bk-item + .bk-group { margin-top: 12px; }

/* Sections of the choose step are separate questions, so they get real air between them. */
[dir] .bk-block + .bk-block,
[dir] .bk-block + .bk-group,
[dir] .bk-group + .bk-block { margin-top: 28px; }

[dir] .bk-block__title,
[dir] .bk-group__title { margin-top: 0; }

[dir] .bk-group__title {
    margin: 0 0 3px;
    font-size: 15px;
    font-weight: 700;
}

[dir] .bk-group__rule {
    margin: 0 0 14px;
    font-size: 13px;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 16px;
    padding: 18px;
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 12px;
}

[dir] .bk-item__body { flex: 1 1 200px; min-width: 0; }

[dir] .bk-item__name {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

[dir] .bk-item__price {
    margin: 4px 0 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
}

[dir] .bk-item__price small {
    font-size: 12px;
    font-weight: 400;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-item__free {
    margin: 4px 0 0;
    font-size: 13px;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-flag {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    background: #f0fdfa;
    background: var(--bk-brand-tint, #f0fdfa);
    color: #0d9488;
    color: var(--bk-brand, #0d9488);
    font-size: 11px;
    font-weight: 700;
    vertical-align: 2px;
}

[dir] .bk-item.is-sold-out { background: #f8fafc; background: var(--bk-raised, #f8fafc); }
[dir] .bk-item.is-sold-out .bk-item__name { color: #94a3b8; color: var(--bk-faint, #94a3b8); }

/* ── Availability ────────────────────────────────────────────────────────────
   Words first. The bar underneath is a glance-level reinforcement of the same
   fact, never the only way to read it.
   ──────────────────────────────────────────────────────────────────────────── */

[dir] .bk-item__cap {
    flex-basis: 100%;
    margin: -4px 0 0;
    font-size: 12px;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-avail { margin: 10px 0 0; }

[dir] .bk-avail__text {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-avail__text--low { color: #b45309; color: var(--bk-warn, #b45309); }
[dir] .bk-avail__text--out { color: #dc2626; color: var(--bk-danger, #dc2626); }

[dir] .bk-avail__bar {
    height: 4px;
    margin-top: 6px;
    border-radius: 999px;
    background: #e2e8f0;
    background: var(--bk-rule, #e2e8f0);
    overflow: hidden;
}

[dir] .bk-avail__fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: #0d9488;
    background: var(--bk-brand, #0d9488);
    transition: width .2s ease;
}

[dir] .bk-avail__fill--low { background: #b45309; background: var(--bk-warn, #b45309); }

/* ── Quantity ────────────────────────────────────────────────────────────── */

/* ── Quantity select and add checkbox ────────────────────────────────────────
   Replaces the quantity stepper that every item used to carry. A labelled select
   says what is being counted, and a checkbox says a yes/no question is a yes/no
   question.
   ──────────────────────────────────────────────────────────────────────────── */

[dir] .bk-choose {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

[dir] .bk-choose__label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    color: var(--bk-muted, #475569);
    white-space: nowrap;
}

[dir] .bk-choose__select {
    min-width: 104px;
    height: 46px;
    padding: 0 12px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23475569' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    padding-inline-end: 36px;

    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 10px;
    background-color: #fff;
    background-color: var(--bk-surface, #fff);
    font: inherit;
    font-size: 16px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
}

[dir] .bk-add {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: relative;
    min-height: 44px;
    padding: 0 18px;
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    color: var(--bk-muted, #475569);
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s;
}

[dir] .bk-add:hover {
    border-color: #0d9488;
    border-color: var(--bk-brand, #0d9488);
}

[dir] .bk-add input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}

[dir] .bk-add__box {
    width: 20px;
    height: 20px;
    border: 2px solid #cbd5e1;
    border: 2px solid var(--bk-gone, #cbd5e1);
    border-radius: 6px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .12s, border-color .12s;
}

[dir] .bk-add__box::after {
    content: '';
    width: 5px;
    height: 10px;
    margin-top: -2px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

[dir] .bk-add input:checked ~ .bk-add__box {
    background: #0d9488;
    background: var(--bk-brand, #0d9488);
    border-color: #0d9488;
    border-color: var(--bk-brand, #0d9488);
}

[dir] .bk-add input:checked ~ .bk-add__box::after { opacity: 1; }

[dir] .bk-add:has(input:checked) {
    border-color: #0d9488;
    border-color: var(--bk-brand, #0d9488);
    background: #f0fdfa;
    background: var(--bk-brand-tint, #f0fdfa);
    color: #0d9488;
    color: var(--bk-brand, #0d9488);
}

[dir] .bk-add input:focus-visible ~ .bk-add__box {
    outline: 2px solid #0d9488;
    outline: 2px solid var(--bk-brand, #0d9488);
    outline-offset: 2px;
}

/* ── Per-ticket blocks ───────────────────────────────────────────────────── */

[dir] .bk-block {
    padding: 16px;
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 12px;
}

[dir] .bk-unit + .bk-unit { margin-top: 10px; }
[dir] .bk-unit[hidden] { display: none; }

[dir] .bk-unit {
    padding: 16px;
    border: 1px solid #e8ecf1;
    border: 1px solid var(--bk-line, #e8ecf1);
    border-radius: 10px;
}

[dir] .bk-unit__title {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
}

/* ── Summary ─────────────────────────────────────────────────────────────── */

[dir] .bk-line {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 0;
    font-size: 14px;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-line__name { min-width: 0; overflow-wrap: anywhere; }

[dir] .bk-line--total {
    margin-top: 8px;
    padding-top: 14px;
    border-top: 1px solid #e2e8f0;
    border-top: 1px solid var(--bk-rule, #e2e8f0);
    font-size: 18px;
    font-weight: 700;
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
}

[dir] .bk-empty {
    margin: 0;
    padding: 16px;
    border: 1px dashed #e2e8f0;
    border: 1px dashed var(--bk-rule, #e2e8f0);
    border-radius: 10px;
    font-size: 13px;
    color: #475569;
    color: var(--bk-muted, #475569);
    text-align: center;
}

/* ── Running total bar ───────────────────────────────────────────────────────
   Pinned while choosing, so the buyer always knows the running cost without
   scrolling.
   ──────────────────────────────────────────────────────────────────────────── */

/* Fixed, not sticky.
 *
 * The guest layout wraps everything in .mdk-header-layout, which the theme gives
 * `height: 100%; overflow: hidden`. That makes it the scroll box for any sticky descendant,
 * so the bar never pinned however this card was styled. position: fixed ignores an
 * overflow ancestor (only transform/filter would break it, and this layout has neither),
 * so the total stays visible while choosing.
 *
 * It lives inside step 2, so it disappears with that step rather than needing its own
 * show/hide logic.
 */
[dir] .bk-runbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    border-top: 1px solid #e8ecf1;
    border-top: 1px solid var(--bk-line, #e8ecf1);
    background-color: #fff;
    background-color: var(--bk-surface, #fff);
    box-shadow: 0 -6px 20px rgba(16, 24, 40, .1);
}

/* Held to the same column as the page so the total lines up with the content above it. */
[dir] .bk-runbar__inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 860px;
    margin: 0 auto;
    padding: 12px 16px;
}

/* Room for the bar, so the last item is not hidden behind it. */
[dir] .bk-step[data-booking-step="items"] .bk-card__body { padding-bottom: 96px; }

[dir] .bk-runbar__label {
    font-size: 12px;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-runbar__value {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
}

[dir] .bk-runbar__actions { margin-inline-start: auto; display: flex; gap: 8px; }

/* ── Buttons ─────────────────────────────────────────────────────────────── */

[dir] .bk-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

[dir] .bk-btn {
    flex: 1 1 auto;
    padding: 13px 20px;
    border: 1px solid #0d9488;
    border: 1px solid var(--bk-brand, #0d9488);
    border-radius: 10px;
    background: #0d9488;
    background: var(--bk-brand, #0d9488);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

[dir] .bk-btn:hover { filter: brightness(1.07); }

[dir] .bk-btn--ghost {
    flex: 0 0 auto;
    background: transparent;
    border-color: #e8ecf1;
    border-color: var(--bk-line, #e8ecf1);
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-btn--ghost:hover {
    filter: none;
    border-color: #94a3b8;
    color: #1a2332;
}

[dir] .bk-btn--sm { flex: 0 0 auto; padding: 9px 16px; font-size: 14px; }

/* ── Notices ─────────────────────────────────────────────────────────────── */

[dir] .bk-alert {
    margin: 0 0 16px;
    padding: 14px 16px;
    border: 1px solid #dc2626;
    border: 1px solid var(--bk-danger, #dc2626);
    border-radius: 12px;
    background: #fef2f2;
    background: var(--bk-danger-tint, #fef2f2);
    color: #dc2626;
    color: var(--bk-danger, #dc2626);
    font-size: 14px;
}

[dir] .bk-alert ul { margin: 8px 0 0; padding-inline-start: 20px; }

[dir] .bk-notice {
    margin: 0 0 16px;
    padding: 12px 16px;
    border: 1px solid #0d9488;
    border: 1px solid var(--bk-brand, #0d9488);
    border-radius: 12px;
    background: #f0fdfa;
    background: var(--bk-brand-tint, #f0fdfa);
    font-size: 14px;
}

/* ── Status page ─────────────────────────────────────────────────────────── */

[dir] .bk-status--ok   { color: #0d9488; color: var(--bk-brand, #0d9488); }
[dir] .bk-status--wait { color: #b45309; color: var(--bk-warn, #b45309); }
[dir] .bk-status--bad  { color: #dc2626; color: var(--bk-danger, #dc2626); }

[dir] .bk-cancel-toggle {
    font-size: 14px;
    font-weight: 600;
    color: #475569;
    color: var(--bk-muted, #475569);
    cursor: pointer;
}

[dir] .bk-cancel-toggle:hover { color: #dc2626; color: var(--bk-danger, #dc2626); }

[dir] .bk-btn--danger {
    border-color: #dc2626;
    border-color: var(--bk-danger, #dc2626);
    background-color: #dc2626;
    background-color: var(--bk-danger, #dc2626);
}

/* An anchor styled as a button still needs to sit like one. */
[dir] a.bk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
}

/* ── Next steps ──────────────────────────────────────────────────────────── */

[dir] .bk-next {
    margin: 16px 0 0;
    padding: 14px 16px;
    border-radius: 12px;
    background: #f8fafc;
    background: var(--bk-raised, #f8fafc);
    font-size: 13px;
    line-height: 1.6;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-next strong { color: #1a2332; color: var(--bk-ink, #1a2332); }

/* ── Phones ──────────────────────────────────────────────────────────────────
   Not just tighter numbers: the controls that sit beside an item on a wide screen
   have nowhere to go on a narrow one, so they take a full row and a full-width
   tap target rather than being squeezed against the name.
   ──────────────────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
    /* Full bleed.
     *
     * On a phone the page gutter and the card frame are two borders charging for width the
     * content needs. The card spans edge to edge, its body stops padding sideways, and the
     * item rows become list rows carrying the only horizontal inset on the page — 16px from
     * the screen edge instead of 36px. Headings and prose get that gutter back individually. */
    [dir] .bk {
        --bk-pad: 0px;
        padding: 0 0 36px;
    }

    [dir] .bk-hero,
    [dir] .bk-card {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    [dir] .bk-hero { margin-bottom: 12px; }

    [dir] .bk-card__body { padding: 16px 0; }

    [dir] .bk-item,
    [dir] .bk-option {
        border-left: 0;
        border-right: 0;
        border-radius: 0;
    }

    /* The gutter, applied only to the things that read as text. */
    [dir] .bk-group__title,
    [dir] .bk-group__rule,
    [dir] .bk-empty,
    [dir] .bk-next,
    [dir] .bk-line,
    [dir] .bk-field__hint,
    [dir] .bk-actions,
    [dir] .bk-field { margin-left: 16px; margin-right: 16px; }

    [dir] .bk-steps,
    [dir] .bk-alert,
    [dir] .bk-notice { margin-left: 12px; margin-right: 12px; }

    /* Groups and blocks stop being boxes here.
     *
     * An item used to sit inside four nested padded containers — page, card body, group,
     * item — which spent 60px a side on gutters and left barely 240px for content on a
     * 360px phone. Dropping the middle box's padding, border and fill gives that width
     * back; the heading and the spacing above it carry the grouping just as well. */
    [dir] .bk-group,
    [dir] .bk-block {
        padding: 0;
        border: 0;
        border-radius: 0;
        background: none;
    }

    [dir] .bk-hero__title { font-size: 19px; }

    /* Two facts a row beats four cramped columns. */
    [dir] .bk-hero__facts {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    [dir] .bk-card__head { padding: 14px 16px; }
    [dir] .bk-card__title { font-size: 16px; }

    /* The full step name does not fit; the short one is shown instead of an ellipsis. */
    [dir] .bk-steps__label--long { display: none; }
    [dir] .bk-steps__label--short { display: block; }

    [dir] .bk-item {
        align-items: flex-start;
        padding: 16px;
    }

    [dir] .bk-item__body { flex: 1 1 100%; }

    /* A stretched control is easier to hit than one wedged beside the name. */
    [dir] .bk-choose {
        flex: 1 1 100%;
        justify-content: space-between;
    }

    [dir] .bk-choose__select { flex: 0 0 auto; min-width: 116px; }

    [dir] .bk-add {
        flex: 1 1 100%;
        justify-content: center;
    }

    [dir] .bk-block + .bk-block,
    [dir] .bk-block + .bk-group,
    [dir] .bk-group + .bk-block { margin-top: 22px; }

    [dir] .bk-option { padding: 16px; }

    /* Stacked, so the total is never squeezed onto one line with two buttons. */
    [dir] .bk-runbar__inner {
        flex-wrap: wrap;
        gap: 10px;
        padding: 10px 12px;
    }

    [dir] .bk-runbar__actions {
        margin-inline-start: 0;
        width: 100%;
    }

    [dir] .bk-step[data-booking-step="items"] .bk-card__body { padding-bottom: 132px; }

    [dir] .bk-runbar__actions .bk-btn { flex: 1 1 0; }

    /* Continue first, so the primary action is under the thumb. */
    [dir] .bk-actions { flex-direction: column-reverse; }
    [dir] .bk-actions .bk-btn { width: 100%; }
}

/* ── Card step ───────────────────────────────────────────────────────────────
   Only rendered in card_on_file mode. The reassurance panel is deliberately the
   loudest thing on the step: the buyer is handing over a card for a charge that
   has not happened yet, and a card form that looks like every other checkout
   implies the money moves now.
   ──────────────────────────────────────────────────────────────────────────── */

[dir] .bk-cardnote {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 20px;
    padding: 14px 16px;
    border: 1px solid #99f6e4;
    background-color: #f0fdfa;
    background-color: var(--bk-brand-tint, #f0fdfa);
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.5;
    color: #475569;
    color: var(--bk-muted, #475569);
}

[dir] .bk-cardnote strong {
    display: block;
    margin-bottom: 2px;
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
}

[dir] .bk-cardnote__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    color: #0d9488;
    color: var(--bk-brand, #0d9488);
}

[dir] .bk-cardnote__icon svg { width: 100%; height: 100%; display: block; }

[dir] .bk-cardrow {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

/* Card numbers are read back in groups of four; proportional digits make that
   noticeably harder to check against the physical card. */
[dir] .bk-step[data-booking-step="card"] #card_number {
    font-variant-numeric: tabular-nums;
    letter-spacing: .04em;
}

/* Quantity stepper, for items with no cap to enumerate. Sized to the touch target the rest
   of this page uses, and the number is tabular so it does not jump width as it changes. */
[dir] .bk-stepper {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid #e2e8f0;
    border: 1px solid var(--bk-rule, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    background: var(--bk-surface, #fff);
}

[dir] .bk-stepper__btn {
    min-width: 42px;
    padding: 0 12px;
    border: 0;
    background: #f8fafc;
    background: var(--bk-raised, #f8fafc);
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
}

[dir] .bk-stepper__btn:hover { background: #f0fdfa; background: var(--bk-brand-tint, #f0fdfa); }
[dir] .bk-stepper__btn:focus-visible { outline: 2px solid #0d9488; outline: 2px solid var(--bk-brand, #0d9488); outline-offset: -2px; }

[dir] .bk-stepper__input {
    width: 64px;
    min-height: 42px;
    border: 0;
    border-inline: 1px solid #e2e8f0;
    border-inline: 1px solid var(--bk-rule, #e2e8f0);
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    background: transparent;
    color: inherit;
}

[dir] .bk-stepper__input:focus-visible { outline: 2px solid #0d9488; outline: 2px solid var(--bk-brand, #0d9488); outline-offset: -2px; }

/* The native spinners duplicate the buttons beside them, in a control half their size. */
[dir] .bk-stepper__input::-webkit-outer-spin-button,
[dir] .bk-stepper__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
[dir] .bk-stepper__input { -moz-appearance: textfield; appearance: textfield; }

/* The booking you already had, rather than a new one. Amber: nothing failed, but the page
   is not saying what the button implied it would. */
[dir] .bk-notice--kept {
    border-inline-start: 3px solid #b45309;
    border-inline-start: 3px solid var(--bk-warn, #b45309);
    padding-inline-start: 12px;
}

/* The captcha widget is injected by a third party and arrives with no margin of its own,
   so it sat flush against whatever preceded it. Scoped to this page: the legacy checkout
   places its own. */
[dir] .bk .cf-turnstile { margin-top: 18px; }

[dir] .bk-field__error {
    margin: 6px 0 0;
    font-size: 12px;
    color: #dc2626;
    color: var(--bk-danger, #dc2626);
}

/* Separates the billing address from the card without making it a step of its own —
   it belongs to the same act of handing over a card. */
[dir] .bk-card__subtitle {
    margin: 26px 0 0;
    font-size: 15px;
    font-weight: 600;
    color: #1a2332;
    color: var(--bk-ink, #1a2332);
}

[dir] .bk-card__subtitle + .bk-field__hint { margin-top: 4px; }
[dir] .bk-card__subtitle + .bk-field__hint + .bk-field { margin-top: 14px; }

@media (max-width: 380px) {
    [dir] .bk-hero__facts { grid-template-columns: minmax(0, 1fr); }
    [dir] .bk-cardrow { grid-template-columns: minmax(0, 1fr); }
    [dir] .bk-steps__label { font-size: 11px; }
}

/* Conditional elements are hidden with the `hidden` attribute, which the built
   app.css overrides on some element types by setting display. Restated here so a
   gated question actually disappears rather than merely losing its box. */
[dir] .bk [data-booking-conditional][hidden],
[dir] .bk [data-booking-state][hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
    [dir] .bk *,
    [dir] .bk *::before,
    [dir] .bk *::after { transition: none !important; }
}