/*
 * SCM Admin UI Kit — The shared basket
 *
 * The /cart page, and the mini-cart that Book Now and the Shop both render.
 *
 * WHY THIS FILE EXISTS
 *
 * The basket is the one surface three separate modules put on screen — Cart, Shop and
 * BookNow — so its styles cannot live in any one module's Module.css without the other
 * two rendering unstyled markup. That is the failure the storefront sheet was written
 * to fix; this file avoids repeating it.
 *
 * Tokens, not literals, so the basket follows the venue's theme. Loaded directly by
 * WebsiteDisplayResources rather than through SCMUIKit.css's @import chain, because
 * those imports are unversioned and go stale in browser caches.
 */

/* ── Sections on the /cart page ─────────────────────────────────────────── */

/* The site theme styles EVERY <section> as a page band: its own background and text color, 60px of padding and
   overflow: clip. The basket's lines, offers, checkout, delivery step and confirmation are <section>s inside
   .scm-mod-Cart, so each carried a white background and 60px of padding above and below. Reset them here. :where()
   keeps this at one class of specificity: it beats the theme's bare element rule and loses to the rules below that
   style those sections. It lives in this file, not a Module.css, because those rules are single-class and every
   Module.css loads after this file: a reset there would win the tie and strip .cart-checkout's scroll margin and the
   confirmation card. */
.scm-mod-Cart :where(section) {
    color: inherit;
    background-color: transparent;
    padding: 0;
    overflow: visible;
    scroll-margin-top: 0;
}

/* The theme's Section Spacing presets and its sidebar pane pad every section again with one class and one element
   (.spacing-relaxed section), which outranks the reset above. This matches them at two classes, which is why the
   confirmation card below is anchored on .scm-mod-Cart: it ties with this and wins by coming later. */
:is(.spacing-compact, .spacing-relaxed, .spacing-spacious, .pane-sidebar) .scm-mod-Cart :where(section) {
    padding-top: 0;
    padding-bottom: 0;
}

/* ── Mini-cart ──────────────────────────────────────────────────────────── */

.scm-minicart {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    margin: 0.5rem 0;
    border: 1px solid var(--scm-border, #e2e8f0);
    border-radius: 999px;
    background: var(--scm-surface, #fff);
    color: var(--scm-text, #0f172a);
    font-size: 0.875rem;
    text-decoration: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.scm-minicart:hover,
.scm-minicart:focus-visible {
    border-color: var(--scm-accent, #2563eb);
    box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
    color: var(--scm-text, #0f172a);
}

/* Unlinked while the host is writing to the basket (Book Now reserving its bookings):
   the anchor has no href then, so it is neither clickable nor focusable — this only
   makes that state visible. */
.scm-minicart--disabled {
    opacity: 0.6;
    cursor: default;
    pointer-events: none;
}

.scm-minicart-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 999px;
    background: var(--scm-accent, #2563eb);
    /* The theme's readable color for its accent (dark on a yellow accent), not a fixed white (wave 6). */
    color: var(--scm-accent-contrast, #fff);
    font-size: 0.75rem;
    font-weight: 600;
}

.scm-minicart-total {
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}

/* ── The cart page ──────────────────────────────────────────────────────── */

/* The lines, then checkout under them, with the order summary beside both: it stays in view, sticky, while the
   customer fills in the payment form (3.99.68; checkout used to be a narrow column centered under the whole page). */
.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 22rem);
    grid-template-areas:
        "lines summary"
        "checkout summary";
    grid-template-rows: auto 1fr;
    column-gap: 2rem;
    row-gap: 1.5rem;
    align-items: start;
}

.cart-layout > .cart-lines {
    grid-area: lines;
    min-width: 0;
}

.cart-layout > .cart-summary {
    grid-area: summary;
}

.cart-layout > .cart-checkout {
    grid-area: checkout;
    min-width: 0;
    margin-top: 0;
}

/* In the column under the lines, the checkout's parts line up with the items' left edge instead of centering in the
   column (they were sized to center under the whole page). */
.cart-layout > .cart-checkout > * {
    margin-left: 0;
    margin-right: 0;
}

.scm-mod-Cart .cart-layout > .cart-checkout .cart-paying-as,
.scm-mod-Cart .cart-layout > .cart-checkout .shop-payment-form {
    max-width: 560px;
    margin-left: 0;
    margin-right: 0;
}

/* One column on anything narrow: the summary belongs UNDER the lines on a phone, not
   squeezed beside them, and before checkout, where its total and discount code are read
   before paying. */
@media (max-width: 48rem) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas:
            "lines"
            "summary"
            "checkout";
        grid-template-rows: auto;
        gap: 1.25rem;
    }
}

.cart-heading {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.cart-hold-notice {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    background: var(--scm-warning-surface, #fffbeb);
    color: var(--scm-warning-text, #92400e);
    font-size: 0.875rem;
}

.cart-line {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto auto;
    gap: 1rem;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid var(--scm-border, #e2e8f0);
}

/* On a phone the thumbnail keeps its column and the rest stacks beside it, so the
   row still reads as one object rather than four stray fragments. */
@media (max-width: 34rem) {
    .cart-line {
        grid-template-columns: auto minmax(0, 1fr) auto;
        row-gap: 0.5rem;
    }

    .cart-line-thumb {
        grid-row: span 2;
        align-self: start;
    }
}

/* ── The line's icon tile ────────────────────────────────────────────────────
   Stands in for a product photo, which the basket does not carry. Tinted by
   family so the eye can tell a membership from a hoodie without reading. */

.cart-line-thumb {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 0.625rem;
    font-size: 1.25rem;
    background: var(--scm-surface-alt, #f1f5f9);
    color: var(--scm-text-muted, #64748b);
    overflow: hidden;
}

/* The operator's photograph, laid over the icon so a URL that fails to load removes
   itself and leaves the icon showing.

   `cover` rather than `contain` because product shots arrive in whatever aspect ratio
   was uploaded, and letterboxing a row of them makes the basket look broken; a square
   crop of a garment still reads as that garment. */
.cart-line-thumb-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--scm-surface, #fff);
}

.cart-line-thumb--membership { background: #eef2ff; color: #4338ca; }
.cart-line-thumb--pass       { background: #ecfeff; color: #0e7490; }
.cart-line-thumb--gift       { background: #fdf2f8; color: #be185d; }
.cart-line-thumb--booking    { background: #eff6ff; color: #1d4ed8; }
.cart-line-thumb--package    { background: #f5f3ff; color: #6d28d9; }
.cart-line-thumb--merch      { background: #f0fdf4; color: #15803d; }

/* The tints above are deliberate literals, not tokens: they are a categorical
   palette that has to stay distinguishable from each other, which a venue's
   single accent colour cannot provide. They are muted enough to sit under any
   theme. In dark mode they invert to a dim wash so they do not glow. */
@media (prefers-color-scheme: dark) {
    .cart-line-thumb--membership { background: #1e1b4b; color: #a5b4fc; }
    .cart-line-thumb--pass       { background: #083344; color: #67e8f9; }
    .cart-line-thumb--gift       { background: #500724; color: #f9a8d4; }
    .cart-line-thumb--booking    { background: #172554; color: #93c5fd; }
    .cart-line-thumb--package    { background: #2e1065; color: #c4b5fd; }
    .cart-line-thumb--merch      { background: #052e16; color: #86efac; }
}

/* A line a pass has paid for in full. Muted rather than hidden — the customer still
   needs to see they are getting it. */
.cart-line--covered .cart-line-now {
    color: var(--scm-success-text, #15803d);
}

.cart-line-main {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.cart-line-name {
    font-weight: 600;
}

.cart-line-kind {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--scm-text-muted, #64748b);
}

.cart-line-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    align-self: flex-start;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
}

.cart-line-badge--member {
    background: var(--scm-accent-surface, #eff6ff);
    color: var(--scm-accent, #2563eb);
}

.cart-line-badge--credit {
    background: var(--scm-success-surface, #f0fdf4);
    color: var(--scm-success-text, #15803d);
}

/* A booked session whose start time has passed: warning, not error — nothing has been
   charged, but the line blocks checkout until it is removed. */
.cart-line-badge--started {
    background: var(--scm-warning-surface, #fffbeb);
    color: var(--scm-warning-text, #b45309);
}

.cart-line-note {
    font-size: 0.8125rem;
    color: var(--scm-text-muted, #64748b);
}

.cart-line-qty {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.cart-line-qty-value {
    min-width: 2ch;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.cart-line-money {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-variant-numeric: tabular-nums;
}

.cart-line-was {
    font-size: 0.8125rem;
    text-decoration: line-through;
    color: var(--scm-text-muted, #64748b);
}

.cart-line-now {
    font-weight: 600;
}

/* Secondary to the line total above it — this is a check on the arithmetic, not the
   number the shopper is being asked to accept. */
.cart-line-each {
    font-size: 0.75rem;
    color: var(--scm-text-muted, #64748b);
}

/* What a booking line IS — when, and for how many — under its name. A heat that reads
   only "Adult Karts × 2" tells the customer nothing they came to check before paying. */
.cart-line-when,
.cart-line-party {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8125rem;
    color: var(--scm-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.cart-line-when i,
.cart-line-party i {
    font-size: 0.8125rem;
}

.cart-keep-shopping {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 1rem;
    font-size: 0.875rem;
    text-decoration: none;
}

/* "Book another activity" sits before "Keep shopping", on the same line when both fit. */
.cart-book-another {
    margin-right: 1.25rem;
    font-weight: 600;
}

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

.cart-summary {
    position: sticky;
    /* Clear of a site header fixed to the top of the window (the VenueChief theme's is up to 88px): at 1rem the
       summary stuck underneath it and vanished while the customer scrolled through checkout. */
    top: 6rem;
    padding: 1.25rem;
    border: 1px solid var(--scm-border, #e2e8f0);
    border-radius: 12px;
    background: var(--scm-surface, #fff);
}

@media (max-width: 48rem) {
    .cart-summary {
        position: static;
    }
}

.cart-summary-heading {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin: 0 0 0.875rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid var(--scm-border, #e2e8f0);
    font-size: 1rem;
    font-weight: 600;
}

.cart-summary-count {
    font-size: 0.8125rem;
    font-weight: 400;
    color: var(--scm-text-muted, #64748b);
    white-space: nowrap;
}

.cart-summary-total {
    display: flex;
    justify-content: space-between;
    font-size: 1.125rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ── Before the card form ────────────────────────────────────────────────────
   Quiet by design. Reassurance that shouts reads as protesting too much. */

.cart-reassurance {
    list-style: none;
    margin: 0.875rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    font-size: 0.75rem;
    color: var(--scm-text-muted, #64748b);
}

.cart-reassurance li {
    display: flex;
    align-items: flex-start;
    gap: 0.4375rem;
    line-height: 1.4;
}

.cart-reassurance i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

.cart-summary-note {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--scm-text-muted, #64748b);
}

/* ── Delivery, tax and discount ──────────────────────────────────────────────
   Each component of the total on its own line, above the total itself. Tabular
   figures so the amounts line up in a column the eye can add. */

.cart-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.375rem 0;
    font-size: 0.9375rem;
    font-variant-numeric: tabular-nums;
    color: var(--scm-text-muted, #64748b);
}

.cart-summary-row + .cart-summary-total {
    margin-top: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--scm-border, #e2e8f0);
}

.cart-summary-discount {
    color: var(--scm-success, #15803d);
}

.cart-promo-tag {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.375rem;
    border-radius: 0.25rem;
    background: var(--scm-surface-alt, #f1f5f9);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--scm-text, #0f172a);
}

.cart-summary-pending {
    font-style: italic;
}

.cart-promo {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--scm-border, #e2e8f0);
}

.cart-promo label {
    display: block;
    margin-bottom: 0.375rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--scm-text-muted, #64748b);
}

.cart-promo-entry {
    display: flex;
    gap: 0.5rem;
}

.cart-promo-entry input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.5rem 0.625rem;
    border: 1px solid var(--scm-border, #e2e8f0);
    border-radius: 0.375rem;
    font-size: 0.9375rem;
    text-transform: uppercase;
}

.cart-promo-entry input:focus-visible {
    outline: 2px solid var(--scm-primary, #2563eb);
    outline-offset: 1px;
}

.cart-promo-error {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--scm-danger, #b91c1c);
}

/* A booking code already applied to the reserved draft — shown as a removable chip, because the
   code lives on the booking row and clearing the input alone would leave it silently in force. */
.cart-promo-applied {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.5rem;
    padding: 0.375rem 0.5rem;
    border: 1px solid var(--scm-success-border, #bbf7d0);
    border-radius: 0.375rem;
    background: var(--scm-success-bg, #f0fdf4);
    font-size: 0.8125rem;
}

.cart-promo-applied .cart-promo-tag {
    margin-left: 0;
}

.cart-promo-applied-note {
    flex: 1 1 auto;
    color: var(--scm-text-muted, #64748b);
}

.cart-promo-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem;
    border: none;
    border-radius: 0.25rem;
    background: transparent;
    color: var(--scm-text-muted, #64748b);
    cursor: pointer;
    font-size: 0.75rem;
    line-height: 1;
}

.cart-promo-remove:hover:not(:disabled) {
    background: var(--scm-surface-alt, #f1f5f9);
    color: var(--scm-danger, #b91c1c);
}

.cart-promo-remove:disabled {
    opacity: 0.5;
    cursor: default;
}

.cart-checkout-button {
    width: 100%;
    margin-top: 1rem;
}

/* Said before the customer reaches a card form, never after. */
.cart-blocked {
    display: flex;
    gap: 0.625rem;
    margin-top: 1rem;
    padding: 0.875rem;
    border-radius: 8px;
    background: var(--scm-accent-surface, #eff6ff);
    color: var(--scm-text, #0f172a);
    font-size: 0.875rem;
}

.cart-blocked p {
    margin: 0.375rem 0 0.75rem;
}

/* ── Empty, error, confirmation ─────────────────────────────────────────── */

.cart-empty {
    text-align: center;
    padding: 3rem 1rem;
}

.cart-empty-icon {
    font-size: 3rem;
    color: var(--scm-text-muted, #64748b);
}

.cart-empty h2 {
    margin: 1rem 0 0.5rem;
    font-size: 1.25rem;
}

.cart-empty-actions {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

.cart-error {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--scm-danger-surface, #fef2f2);
    color: var(--scm-danger-text, #b91c1c);
}

.cart-checkout {
    margin-top: 2rem;
    /* Breathing room above the revealed section when scrollIntoView lands on it. */
    scroll-margin-top: 1rem;
}

/* Programmatic focus target (tabindex="-1"): the reveal moves focus here for keyboard and
   screen-reader users; a focus ring around a whole section reads as a rendering glitch. */
.cart-checkout:focus {
    outline: none;
}

/* The error and notice boxes are reveal targets too (tabindex="-1"): they mount below the
   grid, under the fold beside a sticky summary rail, so the page scrolls to and focuses
   them when they appear. Same breathing room and the same no-ring rule as the section. */
.cart-error,
.cart-notice {
    scroll-margin-top: 1rem;
}

.cart-error:focus,
.cart-notice:focus {
    outline: none;
}

/* Who is paying, as one line above the card form rather than a screen of its own. The
   details are already known (account, or the Book Now hand-off); "Change" brings the form
   back for the customer paying for somebody else. */
.cart-paying-as {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0 auto 1rem;
    max-width: 480px;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    background: var(--scm-surface-muted, #f8fafc);
    border: 1px solid var(--scm-border, #e2e8f0);
    font-size: 0.875rem;
    color: var(--scm-text, #0f172a);
}

.cart-paying-as > i {
    color: var(--scm-success-text, #15803d);
}

.cart-paying-as-copy {
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: anywhere;
}

.cart-paying-as-sep {
    margin: 0 0.25rem;
    color: var(--scm-text-muted, #64748b);
}

.cart-paying-as-change {
    padding: 0;
    font-size: 0.875rem;
    line-height: inherit;
    vertical-align: baseline;
}

/* A Pay press that landed while the page was still busy — said, never swallowed. */
.cart-checkout-busy {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin: 0 auto 0.75rem;
    max-width: 480px;
    font-size: 0.875rem;
    color: var(--scm-text-muted, #64748b);
}

/* Anchored on the module root so its padding outranks the spacing-preset reset at the top of this file. */
.scm-mod-Cart .cart-confirmation {
    margin-top: 2rem;
    padding: 1.5rem;
    border-radius: 12px;
    background: var(--scm-success-surface, #f0fdf4);
}

.cart-confirmation h2 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.25rem;
    color: var(--scm-success-text, #15803d);
}

.cart-confirmation-warnings {
    margin: 0.5rem 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}

/* The reverse-charge invoice legend: quiet, factual, beside the order number — a statement of
   who accounts for the VAT, not a promotion or a warning. */
.cart-confirmation-vat {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--scm-text-secondary, #6b7280);
}

/* Anything the sale could not finish. Sits INSIDE the success panel, visually separated from
   it — the payment did succeed, and a customer who reads this as a failed order will ring the
   venue about money that is not in question. Amber, not red: nothing here is lost. */
.cart-confirmation-pending {
    margin-top: 1rem;
    padding: 0.875rem 1rem;
    border-radius: 8px;
    border: 1px solid var(--scm-warning-border, #fde68a);
    background: var(--scm-warning-surface, #fffbeb);
    color: var(--scm-warning-text, #92400e);
}

.cart-confirmation-pending-lead {
    display: flex;
    gap: 0.5rem;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.cart-confirmation-pending-lead i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

/* ── Charged, but the order could not be finished (after 3-D Secure) ──────────
   The customer's bank approved the payment — or may have; the challenge's outcome
   is unknown — and the order did not complete. Replaces the card form entirely:
   no payment control may exist on screen, because a retry could charge twice.
   The warning surface, not the danger one — nothing failed that the customer can
   fix, and red reads as "your card was declined", which is the opposite of true. */

.cart-charged-failure {
    margin-top: 1rem;
    padding: 1rem 1.125rem;
    border-radius: 8px;
    border: 1px solid var(--scm-warning-border, #fde68a);
    background: var(--scm-warning-surface, #fffbeb);
    color: var(--scm-warning-text, #92400e);
}

.cart-charged-failure h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: inherit;
}

.cart-charged-failure p {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.cart-charged-failure p:last-child {
    margin-bottom: 0;
}

.cart-charged-failure code {
    font-size: 0.9375rem;
    color: inherit;
}

/* ── Unknown payment outcome ────────────────────────────────────────────────
   The checkout call did not come back with an answer (no response, a 5xx, the
   processor still deciding). Neither a success nor a failure: the card form stays
   usable underneath it, and the copy tells the customer to wait and check their
   email rather than re-enter the card. Same warm palette as the charged-failure
   panel — it is the same family of message, one step less certain. */

.cart-unknown-outcome {
    margin-bottom: 1rem;
    padding: 1rem 1.125rem;
    border-radius: 8px;
    border: 1px solid var(--scm-warning-border, #fde68a);
    background: var(--scm-warning-surface, #fffbeb);
    color: var(--scm-warning-text, #92400e);
}

.cart-unknown-outcome h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.5rem;
    font-size: 1rem;
    color: inherit;
}

.cart-unknown-outcome p {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

/* ── Book Now → basket hand-off ──────────────────────────────────────────────
   Shown at the payment step when the basket already holds something else. It is
   an alternative to the card form beside it, not a primary action, so it reads
   as an aside rather than competing with "Pay now". */

.booknow-basket-handoff {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    /* Sits ABOVE the payment form now, so the margin belongs underneath it. */
    margin-bottom: 1.25rem;
    padding: 1rem 1.25rem;
    /* Accented rather than muted: this is the better outcome for the customer, and it is
       competing for attention with a full payment form directly beneath it. */
    border: 1px solid var(--scm-accent, #2563eb);
    border-radius: 0.5rem;
    background: var(--scm-accent-surface, #eff6ff);
}

.booknow-basket-handoff-copy {
    flex: 1 1 16rem;
    min-width: 0;
}

.booknow-basket-handoff-copy strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--scm-text, #0f172a);
}

.booknow-basket-handoff-copy p {
    margin: 0.25rem 0 0;
    font-size: 0.875rem;
    color: var(--scm-text-muted, #64748b);
}

@media (max-width: 480px) {
    .booknow-basket-handoff > .btn { width: 100%; }
}

/* The basket's own name. Hidden on very narrow screens where the icon and count
   carry it and horizontal room is scarce — the aria-label still names it. */
.scm-minicart-label {
    font-weight: 600;
}

@media (max-width: 30rem) {
    .scm-minicart-label { display: none; }
}

/* ── Pay in full, or leave a deposit ─────────────────────────────────────────
   Two radios rather than a checkbox: "pay a deposit" as a tickbox makes paying
   in full the unlabelled default, and a customer who owes a balance at the door
   should have chosen that in words. */

.cart-deposit {
    margin: 1rem 0 0;
    padding: 0.875rem 0 0;
    border: 0;
    border-top: 1px solid var(--scm-border, #e2e8f0);
}

.cart-deposit legend {
    padding: 0;
    margin-bottom: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--scm-text-muted, #64748b);
}

.cart-deposit-option {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.5rem 0;
    font-size: 0.875rem;
    cursor: pointer;
}

.cart-deposit-option input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.cart-deposit-copy {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.cart-deposit-note {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--scm-text-muted, #64748b);
}

/* ── Automatic renewal (recurring billing 2026-10-15) ────────────────────────
   Beside the pay button whenever the basket holds a membership that renews. The
   consent is a checkbox, ticked by default and never hidden; the words beside it
   are the ones recorded with the membership. */
.cart-renewal {
    margin: 0.75rem 0;
    padding: 0.75rem;
    border: 1px solid var(--scm-border, #e2e8f0);
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.4;
}

.cart-renewal-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    cursor: pointer;
}

.cart-renewal-consent input {
    flex: 0 0 auto;
    margin-top: 0.2rem;
}

.cart-renewal-note,
.cart-renewal-manual {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--scm-text-muted, #64748b);
}

.cart-renewal-manual:first-child {
    margin-top: 0;
}

/* ── Offers ──────────────────────────────────────────────────────────────────
   Below the lines, above "keep shopping". Not in the summary: these change what
   the customer is buying, and the summary is for what they have already chosen.

   Deliberately quiet. Every one of these is a genuine same-day saving computed by
   the pricing engine, and dressing a true statement up as a promotion is what
   teaches people to ignore it. */

.cart-offers {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-top: 1.25rem;
}

.cart-offer {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--scm-border, #e2e8f0);
    border-radius: 0.625rem;
    background: var(--scm-surface, #fff);
}

.cart-offer-icon {
    flex: 0 0 auto;
    margin-top: 0.15rem;
    font-size: 1.125rem;
    color: var(--scm-accent, #2563eb);
}

/* Matches the pass tile's ink, via the same token the rest of this sheet uses so the
   legacy-literal ratchet keeps falling. */
.cart-offer--pass .cart-offer-icon { color: var(--scm-info, #0e7490); }

.cart-offer-copy {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 0.875rem;
}

.cart-offer-copy p {
    margin: 0.25rem 0 0;
    color: var(--scm-text-muted, #64748b);
    line-height: 1.45;
}

.cart-offer .btn {
    flex: 0 0 auto;
    align-self: center;
}

/* On a phone the action takes the full width beneath the copy rather than
   squeezing the sentence into a column two words wide. */
@media (max-width: 30rem) {
    .cart-offer {
        flex-wrap: wrap;
        row-gap: 0.625rem;
    }

    .cart-offer .btn {
        flex: 1 1 100%;
    }
}

/* Beside the card form when a deposit is being taken. Says why the figure on the
   button is smaller than the basket — the last question worth answering before
   somebody commits. */
.cart-checkout-deposit-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4375rem;
    margin: 1rem 0 0;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    background: var(--scm-accent-surface, #eff6ff);
    color: var(--scm-text, #0f172a);
    font-size: 0.875rem;
    line-height: 1.45;
}

.cart-checkout-deposit-note i {
    flex: 0 0 auto;
    margin-top: 0.15rem;
}

/* ── Cancellation terms ──────────────────────────────────────────────────────
   A <details>, closed by default. The terms have to be available before the card
   form — a fee the venue never showed is a chargeback — but most people are not
   deciding on the basis of them, and an open fee table above a Checkout button
   reads as a warning about the purchase they are already making. */

.cart-cancellation {
    margin-top: 0.875rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--scm-border, #e2e8f0);
    font-size: 0.8125rem;
}

.cart-cancellation summary {
    cursor: pointer;
    color: var(--scm-text-muted, #64748b);
    font-weight: 600;
}

.cart-cancellation summary:focus-visible {
    outline: 2px solid var(--scm-accent, #2563eb);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.cart-cancellation-free {
    display: flex;
    align-items: flex-start;
    gap: 0.375rem;
    margin: 0.5rem 0 0;
    color: var(--scm-success-text, #15803d);
}

.cart-cancellation-tiers {
    list-style: none;
    margin: 0.5rem 0 0;
    padding: 0;
}

.cart-cancellation-tiers li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.25rem 0;
    color: var(--scm-text-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.cart-cancellation-note {
    margin: 0.5rem 0 0;
    color: var(--scm-text-muted, #64748b);
    line-height: 1.4;
}

/* ── The receipt ─────────────────────────────────────────────────────────────
   What they bought, what it cost, what they now hold. Sits inside the success
   panel and reads top to bottom in the order the questions occur: is it done,
   what did I get, what did I pay, is anything still owed. */

.cart-receipt {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    font-size: 0.9375rem;
}

.cart-receipt li {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.4375rem 0;
    border-bottom: 1px solid var(--scm-border, #e2e8f0);
    font-variant-numeric: tabular-nums;
}

.cart-receipt-what { min-width: 0; }

.cart-receipt-amount {
    flex: 0 0 auto;
    font-weight: 600;
}

/* Delivery, discount and added tax — what sits between the lines and the amount taken.
   Quieter than a line and quieter than the total: the reader is following an addition, and
   these are the steps rather than either end of it. */
.cart-receipt-adjustment {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3125rem 0;
    font-size: 0.875rem;
    font-variant-numeric: tabular-nums;
    color: var(--scm-text-muted, #64748b);
}

.cart-receipt-total {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 0.75rem;
    font-size: 1.0625rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.cart-receipt-note {
    margin: 0.5rem 0 0;
    font-size: 0.8125rem;
    color: var(--scm-text-muted, #64748b);
    line-height: 1.45;
}

/* Louder than the rest: somebody who owes money on arrival must not discover it
   at the counter. */
.cart-receipt-balance {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin: 0.875rem 0 0;
    padding: 0.75rem 0.875rem;
    border-radius: 8px;
    background: var(--scm-warning-surface, #fffbeb);
    color: var(--scm-warning-text, #92400e);
    font-size: 0.875rem;
    line-height: 1.45;
}

.cart-receipt-balance i { flex: 0 0 auto; margin-top: 0.15rem; }

.cart-receipt-issued {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--scm-border, #e2e8f0);
}

.cart-receipt-issued h3 {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.cart-receipt-issued ul {
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 0.9375rem;
}

.cart-receipt-issued li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}

/* ── The booking confirmation ────────────────────────────────────────────────
   A booking customer leaves this page needing to know WHEN, under which code,
   who is on the booking and what to do before they arrive. The booking card
   leads; the receipt follows under its own heading. Same success surface as
   the order confirmation so the two read as one family. */

.cart-confirmation--booking h2 {
    font-size: 1.5rem;
}

.cart-booking-card {
    margin-top: 1.25rem;
    padding: 1.125rem 1.25rem;
    border-radius: 10px;
    border: 1px solid var(--scm-border, #e2e8f0);
    background: var(--scm-surface, #ffffff);
    color: var(--scm-text, #0f172a);
}

.cart-booking-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    margin-bottom: 0.75rem;
}

/* The code first and largest: it is the one thing the customer will be asked for. */
.cart-booking-code {
    display: flex;
    flex-direction: column;
    flex: 1 1 100%;
    gap: 0.125rem;
}

.cart-booking-code-label {
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--scm-text-muted, #64748b);
}

.cart-booking-code-value {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--scm-success-text, #15803d);
}

.cart-booking-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
}

.cart-booking-kind {
    font-size: 0.75rem;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    background: var(--scm-success-surface, #f0fdf4);
    color: var(--scm-success-text, #15803d);
}

.cart-booking-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: 0.625rem 1.25rem;
    margin: 0;
    font-size: 0.9375rem;
}

.cart-booking-details div { min-width: 0; }

.cart-booking-details dt {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--scm-text-muted, #64748b);
}

.cart-booking-details dd {
    margin: 0.125rem 0 0;
    line-height: 1.4;
}

.cart-booking-next {
    margin-top: 1rem;
    padding-top: 0.875rem;
    border-top: 1px solid var(--scm-border, #e2e8f0);
}

.cart-booking-next h4 {
    margin: 0 0 0.5rem;
    font-size: 0.9375rem;
    font-weight: 600;
}

.cart-booking-steps {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
    line-height: 1.5;
}

.cart-booking-steps li + li { margin-top: 0.375rem; }

.cart-booking-actions,
.cart-confirmation-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.cart-booking-actions .btn i { margin-right: 0.25rem; }

.cart-receipt-heading {
    margin: 1.5rem 0 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Nothing changed hands: the total row says so in words rather than "$0.00". */
.cart-receipt-total--covered span:last-child {
    color: var(--scm-success-text, #15803d);
}

.cart-confirmation-actions {
    margin-top: 1.5rem;
}

@media (max-width: 480px) {
    .cart-booking-card { padding: 1rem; }
    .cart-booking-code-value { font-size: 1.25rem; }
}