/*
 * 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.
 */

/* ── 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);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
}

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

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

.cart-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 22rem);
    gap: 2rem;
    align-items: start;
}

/* One column on anything narrow: the summary belongs UNDER the lines on a phone, not
   squeezed beside them. */
@media (max-width: 48rem) {
    .cart-layout {
        grid-template-columns: minmax(0, 1fr);
        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;
}

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

.cart-summary {
    position: sticky;
    top: 1rem;
    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);
}

.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);
}

/* ── 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; }
}