/* ???????????????????????????????????????????????????????????????????????????
   BOOKNOW MODULE - WORLD-CLASS BOOKING EXPERIENCE
   ???????????????????????????????????????????????????????????????????????????
   
   A premium, mobile-first booking interface designed for conversion.
   
   Design Principles:
   1. Progressive Disclosure - Start simple, reveal complexity when needed
   2. Mobile-First - 70%+ of bookings happen on phones
   3. The "Barbara Test" - A mother booking a birthday party in under 3 minutes
   4. Trust & Clarity - Visual hierarchy guides the user confidently
   
   ??????????????????????????????????????????????????????????????????????????? */

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 1: DESIGN TOKENS
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow {
/* ?????????????????????????????????????????????????????????????????????????
   Color System
   Static fallbacks first, then enhanced via @supports below.
   ????????????????????????????????????????????????????????????????????????? */
    
/* Primary brand color (configurable via theme) */
--bn-accent: var(--scm-accent, #2563eb);
--bn-accent-hover: var(--scm-accent-hover, #1e40af);
--bn-accent-active: var(--scm-accent-active, #1e3a8a);
--bn-accent-soft: #eff6ff;
--bn-accent-glow: rgba(37, 99, 235, 0.25);
--bn-on-accent: var(--scm-accent-contrast, #ffffff);
    
/* Surface colors */
--bn-bg: var(--scm-surface, #ffffff);
--bn-bg-elevated: #fafafa;
--bn-bg-glass: rgba(255, 255, 255, 0.85);
--bn-bg-muted: #f8fafc;
    
/* Text colors */
--bn-text: var(--scm-surface-contrast, #0f172a);
--bn-text-secondary: var(--scm-text-secondary, #475569);
--bn-text-tertiary: var(--scm-text-tertiary, #94a3b8);
--bn-text-on-accent: var(--bn-on-accent);
    
/* Border colors */
--bn-border: var(--scm-border, #e2e8f0);
--bn-border-hover: var(--scm-border-hover, #93c5fd);
--bn-border-focus: var(--bn-accent);
    
/* Semantic colors */
--bn-success: #10b981;
--bn-success-soft: #ecfdf5;
--bn-warning: #f59e0b;
--bn-warning-soft: #fffbeb;
--bn-error: #ef4444;
--bn-error-soft: #fef2f2;
--bn-info: #3b82f6;
--bn-info-soft: #eff6ff;
    
    /* ?????????????????????????????????????????????????????????????????????????
       Typography Scale - Fluid, responsive sizing
       ????????????????????????????????????????????????????????????????????????? */
    
    --bn-font-family: inherit;
    
    /* Fluid type scale using clamp() for smooth responsive scaling */
    --bn-text-xs: clamp(0.7rem, 0.65rem + 0.2vw, 0.75rem);
    --bn-text-sm: clamp(0.8rem, 0.75rem + 0.2vw, 0.875rem);
    --bn-text-base: clamp(0.9rem, 0.85rem + 0.2vw, 1rem);
    --bn-text-lg: clamp(1rem, 0.9rem + 0.4vw, 1.125rem);
    --bn-text-xl: clamp(1.1rem, 0.95rem + 0.6vw, 1.25rem);
    --bn-text-2xl: clamp(1.25rem, 1rem + 1vw, 1.5rem);
    --bn-text-3xl: clamp(1.5rem, 1.2rem + 1.2vw, 1.875rem);
    --bn-text-4xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
    
    /* Font weights */
    --bn-weight-normal: 400;
    --bn-weight-medium: 500;
    --bn-weight-semibold: 600;
    --bn-weight-bold: 700;
    --bn-weight-extrabold: 800;
    
    /* Line heights */
    --bn-leading-none: 1;
    --bn-leading-tight: 1.25;
    --bn-leading-snug: 1.375;
    --bn-leading-normal: 1.5;
    --bn-leading-relaxed: 1.625;
    
    /* Letter spacing */
    --bn-tracking-tight: -0.025em;
    --bn-tracking-normal: 0;
    --bn-tracking-wide: 0.025em;
    
    /* ?????????????????????????????????????????????????????????????????????????
       Spacing Scale - Consistent rhythm
       ????????????????????????????????????????????????????????????????????????? */
    
    --bn-space-0: 0;
    --bn-space-1: 0.25rem;   /* 4px */
    --bn-space-2: 0.5rem;    /* 8px */
    --bn-space-3: 0.75rem;   /* 12px */
    --bn-space-4: 1rem;      /* 16px */
    --bn-space-5: 1.25rem;   /* 20px */
    --bn-space-6: 1.5rem;    /* 24px */
    --bn-space-8: 2rem;      /* 32px */
    --bn-space-10: 2.5rem;   /* 40px */
    --bn-space-12: 3rem;     /* 48px */
    --bn-space-16: 4rem;     /* 64px */
    
    /* Component-specific spacing */
    --bn-content-padding: var(--bn-space-4);
    --bn-card-padding: var(--bn-space-5);
    --bn-section-gap: var(--bn-space-6);
    
    /* ?????????????????????????????????????????????????????????????????????????
       Border Radius - Soft, approachable corners
       ????????????????????????????????????????????????????????????????????????? */
    
    --bn-radius-sm: 0.375rem;   /* 6px - small elements */
    --bn-radius-md: 0.5rem;     /* 8px - buttons, inputs */
    --bn-radius-lg: 0.75rem;    /* 12px - cards */
    --bn-radius-xl: 1rem;       /* 16px - modals, large cards */
    --bn-radius-2xl: 1.25rem;   /* 20px - hero sections */
    --bn-radius-full: 9999px;   /* pills, avatars */
    
    /* ?????????????????????????????????????????????????????????????????????????
       Shadows - Depth and elevation
       ????????????????????????????????????????????????????????????????????????? */
    
    --bn-shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
    --bn-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
    --bn-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -1px rgba(0, 0, 0, 0.04);
    --bn-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.04);
    --bn-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.08), 0 10px 10px -5px rgba(0, 0, 0, 0.03);
    --bn-shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    
    /* Focus ring shadow */
    --bn-shadow-focus: 0 0 0 3px var(--bn-accent-glow);
    
    /* Card shadow (subtle elevation) */
    --bn-shadow-card: 
        0 0 0 1px rgba(226, 232, 240, 0.5),
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 12px rgba(0, 0, 0, 0.03);
    
    /* Elevated card shadow (hover state) */
    --bn-shadow-card-hover: 
        0 0 0 1px rgba(147, 197, 253, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 8px 24px rgba(0, 0, 0, 0.04);
    
    /* ?????????????????????????????????????????????????????????????????????????
       Motion - Smooth, purposeful animations
       ????????????????????????????????????????????????????????????????????????? */
    
    --bn-duration-fast: 100ms;
    --bn-duration-normal: 200ms;
    --bn-duration-slow: 300ms;
    --bn-duration-slower: 500ms;
    
    /* Easing curves */
    --bn-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --bn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --bn-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    
    /* Combined transitions */
    --bn-transition-fast: var(--bn-duration-fast) var(--bn-ease-out);
    --bn-transition-normal: var(--bn-duration-normal) var(--bn-ease-out);
    --bn-transition-slow: var(--bn-duration-slow) var(--bn-ease-out);
    
    /* ?????????????????????????????????????????????????????????????????????????
       Layout - Container and max-widths
       ????????????????????????????????????????????????????????????????????????? */
    
    --bn-max-width: 520px;  /* Optimal for mobile-first booking flow */
    --bn-max-width-wide: 680px;
    
    /* Touch target minimum */
    --bn-touch-target: 44px;
    
    /* Z-index scale */
    --bn-z-base: 1;
    --bn-z-dropdown: 10;
    --bn-z-sticky: 20;
    --bn-z-fixed: 30;
    --bn-z-modal: 40;
    --bn-z-toast: 50;
}

/* Enhanced color tokens — upgrade to color-mix() when the browser supports it.
   Tints, shades and glows of a hue are in oklab: oklch interpolates hue around the wheel, so on a chromatic dark ground
   (#1a1a2e) the success, warning, error and info tints all drifted toward the ground's violet. --bn-border-hover is
   oklab too: it mixes the accent into the border, which the bridge derives from the text color, so every hue mix follows
   one rule. Mixes of two neutrals stay in oklch. */
@supports (color: color-mix(in oklab, red 50%, blue 50%)) {
    .scm-mod-BookNow {
        --bn-accent-hover: color-mix(in oklab, var(--bn-accent) 85%, black 15%);
        --bn-accent-active: color-mix(in oklab, var(--bn-accent) 75%, black 25%);
        --bn-accent-soft: color-mix(in oklab, var(--bn-accent) 12%, var(--bn-bg) 88%);
        --bn-accent-glow: color-mix(in oklab, var(--bn-accent) 25%, transparent 75%);
        --bn-bg-elevated: color-mix(in oklch, var(--bn-bg) 97%, white 3%);
        --bn-bg-glass: color-mix(in oklch, var(--bn-bg) 80%, transparent 20%);
        --bn-bg-muted: color-mix(in oklch, var(--bn-bg) 96%, var(--bn-text) 4%);
        --bn-text-secondary: color-mix(in oklch, var(--bn-text) 65%, transparent 35%);
        --bn-text-tertiary: color-mix(in oklch, var(--bn-text) 45%, transparent 55%);
        --bn-border-hover: color-mix(in oklab, var(--bn-border) 70%, var(--bn-accent) 30%);
        --bn-success-soft: color-mix(in oklab, #10b981 12%, var(--bn-bg) 88%);
        --bn-warning-soft: color-mix(in oklab, #f59e0b 12%, var(--bn-bg) 88%);
        --bn-error-soft: color-mix(in oklab, #ef4444 12%, var(--bn-bg) 88%);
        --bn-info-soft: color-mix(in oklab, #3b82f6 12%, var(--bn-bg) 88%);
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 2: BASE RESET & DEFAULTS
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow {
    /* Root container */
    font-family: var(--bn-font-family, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--bn-text-base, 1rem);
    line-height: var(--bn-leading-normal, 1.5);
    color: var(--bn-text, #0f172a);
    background: var(--bn-bg, #ffffff);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.scm-mod-BookNow *,
.scm-mod-BookNow *::before,
.scm-mod-BookNow *::after {
    box-sizing: border-box;
}

/* Button reset — kill ALL browser/theme chrome so component classes start clean */
.scm-mod-BookNow button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    cursor: pointer;
    color: inherit;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    text-decoration: none;
    outline: none;
}

.scm-mod-BookNow button:focus-visible {
    outline: 2px solid var(--bn-accent, #2563eb);
    outline-offset: 2px;
}

.scm-mod-BookNow input,
.scm-mod-BookNow textarea,
.scm-mod-BookNow select {
    font-family: inherit;
    font-size: var(--bn-text-base);
}

.scm-mod-BookNow h1,
.scm-mod-BookNow h2,
.scm-mod-BookNow h3,
.scm-mod-BookNow h4 {
    margin: 0;
    font-weight: var(--bn-weight-bold);
    line-height: var(--bn-leading-tight);
    letter-spacing: var(--bn-tracking-tight);
}

.scm-mod-BookNow p {
    margin: 0;
}

.scm-mod-BookNow a {
    color: var(--bn-accent);
    text-decoration: none;
}

.scm-mod-BookNow a:hover {
    text-decoration: underline;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 3: LOADING STATE
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .scm-mod-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 300px;
    padding: var(--bn-space-8);
    text-align: center;
}

.scm-mod-BookNow .scm-mod-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--bn-border);
    border-top-color: var(--bn-accent);
    border-radius: var(--bn-radius-full);
    animation: bn-spin 0.8s linear infinite;
}

@keyframes bn-spin {
    to { transform: rotate(360deg); }
}

.scm-mod-BookNow .scm-mod-loading p {
    margin-top: var(--bn-space-4);
    color: var(--bn-text-secondary);
    font-size: var(--bn-text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 4: PAGE SHELL - one column the header, progress, screen and action bar all line up to
   ═══════════════════════════════════════════════════════════════════════════

   The module is its own query container: every layout decision below reads the width the module actually has, never
   the browser window's. A theme can put Book Now in a full-bleed band, a 1140px container or a narrow column, and the
   breakpoints follow. (2026-10-08: the when screen split into two columns on a wide window while the module sat in a
   520px column, crushing the sessions to a 40px strip.)

   Each screen says how wide it may grow (--bn-page-width, from the step on the root's data-booknow-step), and the
   header, progress and action bar take the same width, so Continue always sits at the edge of what it continues. */

.scm-mod-BookNow {
    container: booknow / inline-size;
    --bn-page-width: 600px;
    --bn-gutter: 1rem;
}

/* What to book, how many and how long (kart classes and simulator experiences as cards); the review; the guest list. */
.scm-mod-BookNow:is([data-booknow-step="GuestCount"], [data-booknow-step="SessionTypeSelect"],
    [data-booknow-step="KartClassSelect"], [data-booknow-step="ResourceSelect"], [data-booknow-step="DurationSelect"],
    [data-booknow-step="CartReview"], [data-booknow-step="ParticipantEntry"]) {
    --bn-page-width: 720px;
}

/* Grids of packages, spaces and simulators. */
.scm-mod-BookNow:is([data-booknow-step="PackageSelect"], [data-booknow-step="ResourceTypeSelect"],
    [data-booknow-step="EquipmentSelect"], [data-booknow-step="OfferingBrowse"]) {
    --bn-page-width: 880px;
}

/* The when screen: the calendar beside the sessions, times or sittings. */
.scm-mod-BookNow:is([data-booknow-step="DateSelect"], [data-booknow-step="HeatSelect"],
    [data-booknow-step="TimeSelect"], [data-booknow-step="TableSlotSelect"]) {
    --bn-page-width: 1040px;
}

@container booknow (min-width: 640px) {
    .scm-mod-BookNow .booknow-header,
    .scm-mod-BookNow .booknow-progress,
    .scm-mod-BookNow .booknow-content,
    .scm-mod-BookNow .booknow-footer {
        --bn-gutter: 1.5rem;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Header: Back, the screen's name, and Start over / the basket / help
   ───────────────────────────────────────────────────────────────────────────

   Not sticky. A site's own header is usually fixed to the top of the window, and a sticky bar slid underneath it; the
   action bar at the bottom carries the one thing a guest needs at every scroll position. */

.scm-mod-BookNow .booknow-header {
    max-width: calc(var(--bn-page-width) + 2 * var(--bn-gutter));
    margin: 0 auto;
    padding: 0.75rem var(--bn-gutter) 0;
}

.scm-mod-BookNow .booknow-header .header-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 48px;
}

/* Both sides grow equally from nothing, never narrower than what they hold, so the title stays over the middle of the
   screen; when the room runs out it is the title that gives way, with an ellipsis. */
.scm-mod-BookNow .booknow-header .header-start,
.scm-mod-BookNow .booknow-header .header-actions {
    flex: 1 1 0;
    min-width: max-content;
    display: flex;
    align-items: center;
}

.scm-mod-BookNow .booknow-header .header-start {
    justify-content: flex-start;
}

/* Nothing on the right (the first screen, before Start over): it still balances the Back button's room. */
.scm-mod-BookNow .booknow-header .header-actions:empty {
    min-width: 44px;
}

.scm-mod-BookNow .booknow-header .header-spacer {
    width: 44px;
    height: 1px;
}

.scm-mod-BookNow .booknow-header .header-title {
    margin: 0;
    flex: 0 1 auto;
    min-width: 0;
    font-family: inherit;
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    color: var(--bn-text, #0f172a);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Focus moves here when the screen changes, for a screen reader; a ring on a heading nobody tabbed to is noise. */
.scm-mod-BookNow .booknow-header .header-title:focus {
    outline: none;
}

@container booknow (min-width: 640px) {
    .scm-mod-BookNow .booknow-header .header-title {
        font-size: 1.25rem;
    }
}

.scm-mod-BookNow .booknow-header .header-actions {
    justify-content: flex-end;
    gap: 0.375rem;
}

/* Back Button */
.scm-mod-BookNow .booknow-header .btn-back {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    color: var(--bn-text, #0f172a);
    background: var(--bn-bg, #ffffff);
    border: 1px solid var(--bn-border, #e2e8f0);
    transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out, transform 0.1s ease-out;
}

.scm-mod-BookNow .booknow-header .btn-back:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.scm-mod-BookNow .booknow-header .btn-back:active {
    transform: scale(0.96);
}

.scm-mod-BookNow .booknow-header .btn-back i {
    font-size: 1.1rem;
}

/* Help Button */
.scm-mod-BookNow .booknow-header .btn-help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 40px;
    min-width: 40px;
    padding: 0 0.75rem;
    border-radius: 9999px;
    color: var(--bn-text, #0f172a);
    background: var(--bn-bg, #ffffff);
    border: 1px solid var(--bn-border, #e2e8f0);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out;
}

.scm-mod-BookNow .booknow-header .btn-help:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    text-decoration: none;
}

.scm-mod-BookNow .booknow-header .btn-help i {
    font-size: 1rem;
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .booknow-header .help-text {
    display: none;
}

/* Start Over Button — always-available recovery affordance so a resumed/stale
   session can never trap the user, even when Back is unavailable. Styled as a
   subtle, secondary text button so it never competes with the primary flow. */
.scm-mod-BookNow .booknow-header .btn-start-over {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    height: 40px;
    min-width: 40px;
    padding: 0 0.75rem;
    border-radius: 9999px;
    color: var(--bn-text-secondary, #475569);
    background: transparent;
    border: 1px solid transparent;
    font-size: 0.8125rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: color 0.1s ease-out, background-color 0.1s ease-out, border-color 0.1s ease-out;
}

.scm-mod-BookNow .booknow-header .btn-start-over:hover {
    color: var(--bn-text, #0f172a);
    background: var(--bn-bg-muted, #f1f5f9);
    border-color: var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .booknow-header .btn-start-over:active {
    transform: scale(0.97);
}

.scm-mod-BookNow .booknow-header .btn-start-over i {
    font-size: 0.95rem;
}

.scm-mod-BookNow .booknow-header .start-over-text {
    display: none;
}

/* The basket, beside Start over: a compact pill (its icon and count), named and totalled where there is room. */
.scm-mod-BookNow .booknow-header .scm-minicart {
    height: 40px;
    margin: 0;
    padding: 0 0.75rem;
    white-space: nowrap;
}

.scm-mod-BookNow .booknow-header .scm-minicart-label,
.scm-mod-BookNow .booknow-header .scm-minicart-total {
    display: none;
}

@container booknow (min-width: 520px) {
    .scm-mod-BookNow .booknow-header .start-over-text,
    .scm-mod-BookNow .booknow-header .help-text {
        display: inline;
    }
}

@container booknow (min-width: 640px) {
    .scm-mod-BookNow .booknow-header .scm-minicart-label,
    .scm-mod-BookNow .booknow-header .scm-minicart-total {
        display: inline;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 5: PROGRESS - numbered steps joined by a line that fills as the guest goes
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-BookNow .booknow-progress {
    max-width: calc(var(--bn-page-width) + 2 * var(--bn-gutter));
    margin: 0 auto;
    padding: 0.75rem var(--bn-gutter) 0;
}

.scm-mod-BookNow .booknow-progress .progress-steps {
    display: flex;
    align-items: flex-start;
    list-style: none;
    margin: 0;
    padding: 0;
}

.scm-mod-BookNow .booknow-progress .progress-step {
    position: relative;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    min-width: 0;
    padding: 0.25rem 0.125rem;
}

/* The line into each step, from the one before it. */
.scm-mod-BookNow .booknow-progress .progress-step + .progress-step::before {
    content: "";
    position: absolute;
    top: calc(0.25rem + 13px);
    left: calc(-50% + 20px);
    right: calc(50% + 20px);
    height: 2px;
    border-radius: 2px;
    background: var(--bn-border, #e2e8f0);
    transition: background 0.2s ease-out;
}

.scm-mod-BookNow .booknow-progress .progress-step.completed + .progress-step::before {
    background: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .booknow-progress .step-indicator {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 700;
    background: var(--bn-bg, #ffffff);
    border: 2px solid var(--bn-border, #e2e8f0);
    color: var(--bn-text-tertiary, #94a3b8);
    transition: background 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out, box-shadow 0.2s ease-out;
}

.scm-mod-BookNow .booknow-progress .step-indicator i {
    font-size: 1rem;
    line-height: 1;
}

.scm-mod-BookNow .booknow-progress .step-label {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bn-text-tertiary, #94a3b8);
    text-align: center;
    line-height: 1.3;
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.2s ease-out;
}

/* Current step */
.scm-mod-BookNow .booknow-progress .progress-step.current .step-indicator {
    background: var(--bn-accent-soft, #eff6ff);
    border-color: var(--bn-accent, #2563eb);
    color: var(--bn-accent, #2563eb);
    box-shadow: 0 0 0 4px var(--bn-accent-glow, rgba(37, 99, 235, 0.25));
}

.scm-mod-BookNow .booknow-progress .progress-step.current .step-label {
    color: var(--bn-accent, #2563eb);
    font-weight: 600;
}

/* Completed step */
.scm-mod-BookNow .booknow-progress .progress-step.completed .step-indicator {
    background: var(--bn-accent, #2563eb);
    border-color: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
}

.scm-mod-BookNow .booknow-progress .progress-step.completed .step-label {
    color: var(--bn-text-secondary, #475569);
}

/* A phone names only the step it is on: six labels in 340px were unreadable, and none at all left only numbers. */
@container booknow (max-width: 479px) {
    .scm-mod-BookNow .booknow-progress .step-label {
        visibility: hidden;
    }

    .scm-mod-BookNow .booknow-progress .progress-step.current .step-label {
        visibility: visible;
        overflow: visible;
    }

    .scm-mod-BookNow .booknow-progress .step-indicator {
        width: 26px;
        height: 26px;
    }

    .scm-mod-BookNow .booknow-progress .progress-step + .progress-step::before {
        top: calc(0.25rem + 12px);
        left: calc(-50% + 18px);
        right: calc(50% + 18px);
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 6: MAIN CONTENT AREA
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-BookNow .booknow-content {
    max-width: calc(var(--bn-page-width) + 2 * var(--bn-gutter));
    margin: 0 auto;
    padding: 1.25rem var(--bn-gutter) 1.5rem;
    /* Keeps the action bar from jumping up the page on a short screen. */
    min-height: min(55vh, 520px);
}

@container booknow (min-width: 640px) {
    .scm-mod-BookNow .booknow-content {
        padding-top: 1.75rem;
        padding-bottom: 2rem;
    }
}

/* Banners that sit at the top of the content area, above the step itself.
   The step supplies its own internal rhythm through `gap` on its list, which a
   sibling rendered before that list never sees -- so the member greeting sat
   flush against the first category tile. Matches .category-tiles gap. */
.scm-mod-BookNow .booknow-content > .scm-member-badge--welcome {
    margin-bottom: var(--bn-space-3, 0.75rem);
}

/* Step placeholder (development) */
.scm-mod-BookNow .step-placeholder {
    padding: 1.5rem;
    border: 2px dashed var(--bn-border, #e2e8f0);
    border-radius: 0.75rem;
    background: var(--bn-bg-muted, #f8fafc);
    text-align: center;
    color: var(--bn-text-secondary, #475569);
}

/* Inline alert banners */
.scm-mod-BookNow .booknow-alert {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    animation: bn-slide-down 0.25s ease-out;
}

.scm-mod-BookNow .booknow-alert-warning {
    background: var(--bn-warning-soft, #fef3c7);
    border: 1px solid var(--bn-warning, #f59e0b);
    color: #92400e;
}

.scm-mod-BookNow .booknow-alert-error {
    background: var(--bn-error-soft, #fef2f2);
    border: 1px solid var(--bn-error, #ef4444);
    color: #991b1b;
}

.scm-mod-BookNow .booknow-alert i:first-child {
    font-size: 1.125rem;
    flex-shrink: 0;
}

.scm-mod-BookNow .booknow-alert span {
    flex: 1;
}

.scm-mod-BookNow .booknow-alert .alert-dismiss {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 0.375rem;
    color: inherit;
    opacity: 0.6;
    transition: opacity 0.1s ease-out;
}

.scm-mod-BookNow .booknow-alert .alert-dismiss:hover {
    opacity: 1;
}

/* Hold countdown banner */
.scm-mod-BookNow .booknow-hold-banner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    border-radius: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    background: var(--bn-accent-soft, #eff6ff);
    border: 1px solid var(--bn-accent, #2563eb);
    color: var(--bn-accent-hover, #1e40af);
    animation: bn-slide-down 0.25s ease-out;
}

.scm-mod-BookNow .booknow-hold-banner.hold-expiring {
    background: #fef3c7;
    border-color: #f59e0b;
    color: #92400e;
    animation: bn-hold-pulse 2s ease-in-out infinite;
}

.scm-mod-BookNow .booknow-hold-banner i {
    font-size: 1rem;
    flex-shrink: 0;
}

@keyframes bn-hold-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 7: ACTION BAR - what this booking is so far, and Continue
   ═══════════════════════════════════════════════════════════════════════════

   Sticky, not fixed: it rides the bottom of the window while the booking scrolls, and settles under the last thing on
   the screen at the end instead of covering the site's own footer. A phone gets a full-width bar; a wider module gets
   a floating card the width of the screen above it, with Continue at its right edge. */

.scm-mod-BookNow .booknow-footer {
    position: sticky;
    bottom: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    max-width: calc(var(--bn-page-width) + 2 * var(--bn-gutter));
    margin: 0 auto;
    padding: 0.75rem var(--bn-gutter);
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px));
    background: rgba(255, 255, 255, 0.94);
    background: var(--bn-bg-glass, rgba(255, 255, 255, 0.94));
    backdrop-filter: saturate(180%) blur(16px);
    -webkit-backdrop-filter: saturate(180%) blur(16px);
    border-top: 1px solid var(--bn-border, #e2e8f0);
}

/* A step that owns its own action, with nothing in the booking yet, has nothing to put here. */
.scm-mod-BookNow .booknow-footer:empty {
    display: none;
}

@container booknow (min-width: 640px) {
    .scm-mod-BookNow .booknow-footer {
        bottom: 1rem;
        max-width: var(--bn-page-width);
        margin-bottom: 1rem;
        padding: 0.625rem 0.625rem 0.625rem 1.25rem;
        border: 1px solid var(--bn-border, #e2e8f0);
        border-radius: 1.25rem;
        box-shadow: 0 10px 30px -12px rgba(15, 23, 42, 0.25), 0 2px 6px rgba(15, 23, 42, 0.06);
    }
}

/* What is being booked right now (the activity, the group, the day and the sessions or time), before it is added. */
.scm-mod-BookNow .booknow-footer .footer-selection {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
    gap: 0.125rem;
}

.scm-mod-BookNow .booknow-footer .footer-selection-title {
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scm-mod-BookNow .booknow-footer .footer-selection-detail {
    font-size: 0.8125rem;
    color: var(--bn-text-secondary, #475569);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* The booking's running total once it is in the cart, with the review button beside it. */
.scm-mod-BookNow .booknow-footer .footer-cart-summary {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: 0.75rem;
    flex: 1 1 auto;
    min-width: 0;
}

.scm-mod-BookNow .booknow-footer .footer-cart-summary .btn-cart {
    grid-column: 1;
    grid-row: 1 / span 2;
}

.scm-mod-BookNow .booknow-footer .cart-count {
    grid-column: 2;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--bn-text-secondary, #475569);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scm-mod-BookNow .booknow-footer .cart-total {
    grid-column: 2;
    font-size: 1.125rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--bn-text, #0f172a);
    line-height: 1.2;
    white-space: nowrap;
}

/* Cart Button */
.scm-mod-BookNow .booknow-footer .btn-cart {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 9999px;
    background: var(--bn-bg, #ffffff);
    border: 1px solid var(--bn-border, #e2e8f0);
    color: var(--bn-text, #0f172a);
    transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out;
}

.scm-mod-BookNow .booknow-footer .btn-cart:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

.scm-mod-BookNow .booknow-footer .btn-cart i {
    font-size: 1.1rem;
}

/* Continue Button - Primary CTA */
.scm-mod-BookNow .booknow-footer .btn-continue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 0 0 auto;
    margin-left: auto;
    min-width: 8.5rem;
    max-width: 62%;
    height: 52px;
    padding: 0 1.5rem;
    border-radius: 9999px;
    background: #2563eb;
    background: var(--bn-accent, #2563eb);
    color: #ffffff;
    color: var(--bn-on-accent, #ffffff);
    font-size: 1.0625rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    transition:
        background 0.1s ease-out,
        box-shadow 0.2s ease-out,
        opacity 0.2s ease-out,
        transform 0.1s ease-out;
}

.scm-mod-BookNow .booknow-footer .btn-continue span {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* A phone: the total and the button share 340px, and "Continue to checkout" needs most of it. The review icon goes (the
   review is a step of its own when there is more than one booking, and the basket is in the header), and the button
   tightens, so neither side is cut to "This bo…" and "Continue to c…". */
@container booknow (max-width: 479px) {
    .scm-mod-BookNow .booknow-footer .footer-cart-summary .btn-cart {
        display: none;
    }

    .scm-mod-BookNow .booknow-footer .footer-cart-summary {
        grid-template-columns: minmax(0, 1fr);
    }

    .scm-mod-BookNow .booknow-footer .cart-count,
    .scm-mod-BookNow .booknow-footer .cart-total {
        grid-column: 1;
    }

    .scm-mod-BookNow .booknow-footer .btn-continue {
        max-width: 74%;
        padding: 0 1.125rem;
        font-size: 1rem;
    }
}

/* Alone on a phone, the button takes the whole bar. */
.scm-mod-BookNow .booknow-footer .btn-continue:only-child {
    flex: 1 1 auto;
    max-width: none;
}

@container booknow (min-width: 640px) {
    .scm-mod-BookNow .booknow-footer .btn-continue,
    .scm-mod-BookNow .booknow-footer .btn-continue:only-child {
        flex: 0 0 auto;
        min-width: 12rem;
        max-width: 60%;
        height: 54px;
        padding: 0 2rem;
        font-size: 1.125rem;
    }
}

.scm-mod-BookNow .booknow-footer .btn-continue:hover:not(:disabled) {
    background: var(--bn-accent-hover, #1e40af);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04), 0 0 0 4px var(--bn-accent-glow, rgba(37,99,235,0.25));
}

.scm-mod-BookNow .booknow-footer .btn-continue:active:not(:disabled) {
    background: var(--bn-accent-active, #1e3a8a);
    transform: scale(0.98);
}

.scm-mod-BookNow .booknow-footer .btn-continue:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--bn-bg, #ffffff), 0 0 0 6px var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .booknow-footer .btn-continue:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
}

.scm-mod-BookNow .booknow-footer .btn-continue i {
    flex-shrink: 0;
    font-size: 1rem;
    transition: transform 0.1s ease-out;
}

.scm-mod-BookNow .booknow-footer .btn-continue:hover:not(:disabled) i {
    transform: translateX(2px);
}

/* A theme's back-to-top button sits at the bottom right, which is where Continue is. Below a wide desktop the action
   bar spans most of the window and the button landed on Continue's corner, so it stands down while Book Now is on the
   page (the booking scrolls to the top of each new step by itself); on a wide desktop it is lifted clear of the bar. */
@media (max-width: 1199.98px) {
    body:has(.scm-mod-BookNow .booknow-footer) .scroll-top {
        /* !important: the theme gives it Bootstrap's d-flex, which is display: flex !important. */
        display: none !important;
    }
}

body:has(.scm-mod-BookNow .booknow-footer) .scroll-top.active {
    bottom: calc(6.5rem + env(safe-area-inset-bottom, 0px));
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 8: CATEGORY TILES
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .category-tiles {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scm-mod-BookNow .category-tile {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: 1rem;
    background: #ffffff;
    background: var(--bn-bg, #ffffff);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: 1rem;
    text-align: left;
    box-shadow: 0 0 0 1px rgba(226,232,240,0.5), 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
    transition:
        border-color 0.2s ease-out,
        box-shadow 0.2s ease-out,
        transform 0.2s ease-out;
}

.scm-mod-BookNow .category-tile:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 0 0 1px rgba(147,197,253,0.4), 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}

.scm-mod-BookNow .category-tile:active {
    transform: translateY(0);
}

/* Not answering yet (2026-10-13): the prerendered page before the circuit connects, or a saved booking being put back.
   The root is inert then (nothing can be pressed or focused); the content fades in slightly as it becomes live, so the
   tiles never look ready while a press would do nothing. */
.scm-mod-BookNow .booknow-content {
    transition: opacity 0.15s ease-out;
}

.scm-mod-BookNow.booknow-pending .booknow-content {
    opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
    .scm-mod-BookNow .booknow-content {
        transition: none;
    }
}

/* Icon container */
.scm-mod-BookNow .category-tile .tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 0.75rem;
    background: var(--bn-accent-soft, #eff6ff);
    color: var(--bn-accent, #2563eb);
    font-size: 1.5rem;
    flex-shrink: 0;
    transition: background 0.2s ease-out, transform 0.2s ease-out;
}

.scm-mod-BookNow .category-tile:hover .tile-icon {
    transform: scale(1.05);
}

/* Content */
.scm-mod-BookNow .category-tile .tile-content {
    flex: 1;
    min-width: 0;
}

.scm-mod-BookNow .category-tile .tile-content h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin-bottom: 0.25rem;
}

.scm-mod-BookNow .category-tile .tile-content p {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
    line-height: 1.375;
}

/* Arrow */
.scm-mod-BookNow .category-tile .tile-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    background: var(--bn-bg-muted, #f8fafc);
    color: var(--bn-text-tertiary, #94a3b8);
    flex-shrink: 0;
    transition: background 0.1s ease-out, color 0.1s ease-out, transform 0.1s ease-out;
}

.scm-mod-BookNow .category-tile:hover .tile-arrow {
    background: var(--bn-accent-soft, #eff6ff);
    color: var(--bn-accent, #2563eb);
    transform: translateX(2px);
}

/* Featured tile */
.scm-mod-BookNow .category-tile--featured {
    border-color: var(--bn-accent, #2563eb);
    background: linear-gradient(135deg, var(--bn-bg, #ffffff) 0%, var(--bn-accent-soft, #eff6ff) 100%);
}

.scm-mod-BookNow .category-tile--featured .tile-icon {
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
}

/* Badge */
.scm-mod-BookNow .category-tile .tile-badge {
    position: absolute;
    top: -8px;
    left: 1rem;
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 8b: RESOURCE TYPE PICKER & RESOURCE PICKER
   ??????????????????????????????????????????????????????????????????????????? */

/* Resource type picker - uses category-tile styles for consistency */
.scm-mod-BookNow .resource-type-picker,
.scm-mod-BookNow .resource-picker {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.scm-mod-BookNow .resource-type-loading,
.scm-mod-BookNow .resource-picker-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 3rem 1rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .resource-type-empty,
.scm-mod-BookNow .resource-picker-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 3rem 1rem;
    text-align: center;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .resource-type-empty i,
.scm-mod-BookNow .resource-picker-empty i {
    font-size: 2rem;
    opacity: 0.5;
}

/* Resource cards grid */
.scm-mod-BookNow .resource-cards {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Individual resource card */
.scm-mod-BookNow .resource-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    background: var(--bn-bg, #ffffff);
    border: 2px solid var(--bn-border, #e2e8f0);
    border-radius: 1rem;
    overflow: hidden;
    text-align: left;
    cursor: pointer;
    transition:
        border-color 0.2s ease-out,
        box-shadow 0.2s ease-out,
        transform 0.15s ease-out;
}

.scm-mod-BookNow .resource-card:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
    transform: translateY(-2px);
}

.scm-mod-BookNow .resource-card--selected {
    border-color: var(--bn-accent, #2563eb);
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37,99,235,0.25));
}

/* A unit that does not take the party: shown, with the reason, but not offered */
.scm-mod-BookNow .resource-card--unavailable,
.scm-mod-BookNow .resource-card--unavailable:hover {
    cursor: not-allowed;
    opacity: 0.6;
    border-color: var(--bn-border, #e2e8f0);
    box-shadow: none;
    transform: none;
}

.scm-mod-BookNow .resource-card-unfit {
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-medium, 500);
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .resource-picker-none-fit {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--bn-warning, #f59e0b);
    border-radius: var(--bn-radius-md, 0.5rem);
    background: var(--bn-warning-soft, #fffbeb);
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .resource-picker-none-fit p {
    margin: 0;
}

/* Resource card image */
.scm-mod-BookNow .resource-card-image {
    width: 100%;
    height: 160px;
    overflow: hidden;
}

.scm-mod-BookNow .resource-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}

.scm-mod-BookNow .resource-card:hover .resource-card-image img {
    transform: scale(1.03);
}

/* Resource card body */
.scm-mod-BookNow .resource-card-body {
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scm-mod-BookNow .resource-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.scm-mod-BookNow .resource-card-header h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin: 0;
}

.scm-mod-BookNow .resource-card-check {
    color: var(--bn-accent, #2563eb);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.scm-mod-BookNow .resource-card-description {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
    line-height: 1.4;
    margin: 0;
}

.scm-mod-BookNow .resource-card-details {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.scm-mod-BookNow .resource-detail {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.8125rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .resource-detail i {
    font-size: 0.875rem;
    color: var(--bn-accent, #2563eb);
}

/* Amenity tags */
.scm-mod-BookNow .resource-amenities {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.scm-mod-BookNow .resource-amenity-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: var(--bn-bg-muted, #f8fafc);
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: 9999px;
    font-size: 0.75rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .resource-amenity-more {
    font-style: italic;
    color: var(--bn-text-tertiary, #94a3b8);
}

/* Desktop: 2-column grid for resource cards */
@media (min-width: 640px) {
    .scm-mod-BookNow .resource-cards {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 9: GUEST COUNT SELECTOR
   ??????????????????????????????????????????????????????????????????????????? */


.scm-mod-BookNow .guest-count-selector {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.scm-mod-BookNow .guest-count-selector .selector-header {
    text-align: center;
}

.scm-mod-BookNow .guest-count-selector .selector-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin-bottom: 0.25rem;
}

.scm-mod-BookNow .guest-count-selector .selector-header p {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

/* Slider variant */
.scm-mod-BookNow .guest-count-selector .slider-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1.5rem 1rem;
    background: var(--bn-bg-muted, #f8fafc);
    border-radius: 1rem;
}

.scm-mod-BookNow .guest-count-selector .slider-value {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
}

.scm-mod-BookNow .guest-count-selector .value-number {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--bn-accent, #2563eb);
    line-height: 1;
}

.scm-mod-BookNow .guest-count-selector .value-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .guest-count-selector .guest-slider {
    width: 100%;
    max-width: 300px;
    height: 8px;
    border-radius: 9999px;
    background: var(--bn-border, #e2e8f0);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
}

.scm-mod-BookNow .guest-count-selector .guest-slider::-webkit-slider-thumb {
    appearance: none;
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--bn-accent, #2563eb);
    border: 4px solid var(--bn-bg, #ffffff);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    cursor: grab;
    transition: transform 0.1s ease-out, box-shadow 0.1s ease-out;
}

.scm-mod-BookNow .guest-count-selector .guest-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04);
}

.scm-mod-BookNow .guest-count-selector .guest-slider::-webkit-slider-thumb:active {
    cursor: grabbing;
    transform: scale(1.05);
}

.scm-mod-BookNow .guest-count-selector .guest-slider::-moz-range-thumb {
    width: 28px;
    height: 28px;
    border-radius: 9999px;
    background: var(--bn-accent, #2563eb);
    border: 4px solid var(--bn-bg, #ffffff);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    cursor: grab;
}

/* Button group variant */
.scm-mod-BookNow .guest-count-selector .button-group {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.scm-mod-BookNow .guest-count-selector .count-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 52px;
    height: 52px;
    padding: 0 1rem;
    border-radius: 0.75rem;
    background: #ffffff;
    background: var(--bn-bg, #ffffff);
    border: 2px solid #e2e8f0;
    border: 2px solid var(--bn-border, #e2e8f0);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    transition:
        border-color 0.1s ease-out,
        background 0.1s ease-out,
        color 0.1s ease-out,
        box-shadow 0.1s ease-out,
        transform 0.1s ease-out;
}

.scm-mod-BookNow .guest-count-selector .count-btn:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-bg-muted, #f8fafc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.scm-mod-BookNow .guest-count-selector .count-btn.active {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    box-shadow: 0 4px 14px var(--bn-accent-glow, rgba(37, 99, 235, 0.3));
}

.scm-mod-BookNow .guest-count-selector .count-btn:active {
    transform: scale(0.96);
}

/* Numeric input variant */
.scm-mod-BookNow .guest-count-selector .numeric-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.scm-mod-BookNow .guest-count-selector .numeric-input input {
    width: 80px;
    height: 56px;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    border: 2px solid var(--bn-border, #e2e8f0);
    border-radius: 0.75rem;
    background: var(--bn-bg, #ffffff);
    color: var(--bn-text, #0f172a);
    -moz-appearance: textfield;
}

.scm-mod-BookNow .guest-count-selector .numeric-input input::-webkit-outer-spin-button,
.scm-mod-BookNow .guest-count-selector .numeric-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.scm-mod-BookNow .guest-count-selector .numeric-input input:focus {
    border-color: var(--bn-accent, #2563eb);
    outline: none;
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37, 99, 235, 0.25));
}

.scm-mod-BookNow .guest-count-selector .btn-decrement,
.scm-mod-BookNow .guest-count-selector .btn-increment {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 0.75rem;
    background: #ffffff;
    background: var(--bn-bg, #ffffff);
    border: 2px solid #e2e8f0;
    border: 2px solid var(--bn-border, #e2e8f0);
    color: var(--bn-text, #0f172a);
    font-size: 1.25rem;
    transition: border-color 0.1s ease-out, background 0.1s ease-out;
}

.scm-mod-BookNow .guest-count-selector .btn-decrement:hover:not(:disabled),
.scm-mod-BookNow .guest-count-selector .btn-increment:hover:not(:disabled) {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-bg-muted, #f8fafc);
}

.scm-mod-BookNow .guest-count-selector .btn-decrement:disabled,
.scm-mod-BookNow .guest-count-selector .btn-increment:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Custom count input */
.scm-mod-BookNow .guest-count-selector .custom-count {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 1rem;
}

.scm-mod-BookNow .guest-count-selector .custom-count label {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .guest-count-selector .custom-count input {
    width: 80px;
    height: 44px;
    padding: 0 0.75rem;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 700;
    border: 2px solid var(--bn-border, #e2e8f0);
    border-radius: 0.5rem;
    background: var(--bn-bg, #ffffff);
}

/* Group tip */
.scm-mod-BookNow .guest-count-selector .group-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    background: var(--bn-info-soft, #eff6ff);
    border-radius: 0.75rem;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .guest-count-selector .group-tip i {
    color: var(--bn-info, #3b82f6);
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.scm-mod-BookNow .guest-count-selector .group-tip span {
    font-size: 0.875rem;
    line-height: 1.625;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SECTION 10: DATE PICKER
   Desktop: full-month calendar grid  ·  Mobile: horizontal day-chip strip
   ═══════════════════════════════════════════════════════════════════════════ */

.scm-mod-BookNow .date-picker {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scm-mod-BookNow .date-picker .picker-header {
    text-align: center;
}

.scm-mod-BookNow .date-picker .picker-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
}

/* ─── 10a: MOBILE DAY-CHIP STRIP ─── */

.scm-mod-BookNow .date-picker .day-strip-wrapper {
    display: none;                       /* hidden on desktop */
    position: relative;
    align-items: center;
}

.scm-mod-BookNow .date-picker .strip-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 9999px;
    border: none;
    background: var(--bn-bg, #ffffff);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    color: var(--bn-text, #0f172a);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: box-shadow 0.15s, background 0.15s;
}

.scm-mod-BookNow .date-picker .strip-arrow:hover {
    background: var(--bn-bg-muted, #f8fafc);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
}

.scm-mod-BookNow .date-picker .strip-arrow-left  { left: -4px; }
.scm-mod-BookNow .date-picker .strip-arrow-right { right: -4px; }

.scm-mod-BookNow .date-picker .day-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 0.5rem 0.25rem;
    scroll-behavior: smooth;
}

.scm-mod-BookNow .date-picker .day-chips::-webkit-scrollbar {
    display: none;
}

.scm-mod-BookNow .date-picker .day-chip {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    min-width: 64px;
    height: 82px;
    padding: 0.5rem 0.375rem;
    border-radius: 0.75rem;
    background: var(--bn-bg, #ffffff);
    border: 2px solid var(--bn-border, #e2e8f0);
    scroll-snap-align: start;
    flex-shrink: 0;
    cursor: pointer;
    transition:
        border-color 0.12s ease-out,
        background 0.12s ease-out,
        color 0.12s ease-out,
        box-shadow 0.12s ease-out,
        transform 0.12s ease-out;
}

.scm-mod-BookNow .date-picker .day-chip:hover:not(:disabled) {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-bg-muted, #f8fafc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.scm-mod-BookNow .date-picker .day-chip.selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    box-shadow: 0 4px 14px var(--bn-accent-glow, rgba(37, 99, 235, 0.3));
}

.scm-mod-BookNow .date-picker .day-chip.today:not(.selected) {
    border-color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .date-picker .day-chip:active:not(:disabled) {
    transform: scale(0.96);
}

/* Closed chip */
.scm-mod-BookNow .date-picker .day-chip.closed {
    opacity: 0.45;
    cursor: not-allowed;
    border-style: dashed;
    background: var(--bn-bg-muted, #f8fafc);
}

.scm-mod-BookNow .date-picker .day-chip.closed:hover {
    border-color: var(--bn-border, #e2e8f0);
    background: var(--bn-bg-muted, #f8fafc);
    box-shadow: none;
    transform: none;
}

.scm-mod-BookNow .date-picker .day-closed-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bn-text-tertiary, #94a3b8);
    line-height: 1;
}

.scm-mod-BookNow .date-picker .day-name {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    opacity: 0.7;
}

.scm-mod-BookNow .date-picker .day-chip.selected .day-name {
    opacity: 0.9;
}

.scm-mod-BookNow .date-picker .day-number {
    font-size: 1.25rem;
    font-weight: 800;
    line-height: 1;
}

.scm-mod-BookNow .date-picker .day-month {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.55;
}

/* ─── 10b: DESKTOP FULL-MONTH CALENDAR ─── */

.scm-mod-BookNow .date-picker .calendar-view {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Navigation row */
.scm-mod-BookNow .date-picker .cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0.25rem;
}

.scm-mod-BookNow .date-picker .cal-nav-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    text-transform: capitalize;
}

.scm-mod-BookNow .date-picker .cal-nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 9999px;
    border: 1px solid var(--bn-border, #e2e8f0);
    background: var(--bn-bg, #ffffff);
    color: var(--bn-text, #0f172a);
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
}

.scm-mod-BookNow .date-picker .cal-nav-btn:hover:not(:disabled) {
    background: var(--bn-bg-muted, #f8fafc);
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.scm-mod-BookNow .date-picker .cal-nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* 7-column grid */
.scm-mod-BookNow .date-picker .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Day-of-week headers */
.scm-mod-BookNow .date-picker .cal-header {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bn-text-tertiary, #94a3b8);
    padding: 0.35rem 0;
    user-select: none;
}

/* Calendar cell — shared base */
.scm-mod-BookNow .date-picker .cal-cell {
    position: relative;
    aspect-ratio: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 0.625rem;
    border: 2px solid transparent;
    background: transparent;
    cursor: pointer;
    transition:
        background 0.12s ease-out,
        border-color 0.12s ease-out,
        color 0.12s ease-out,
        box-shadow 0.12s ease-out,
        transform 0.12s ease-out;
}

.scm-mod-BookNow .date-picker .cal-blank {
    cursor: default;
}

/* Day number */
.scm-mod-BookNow .date-picker .cal-day-num {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--bn-text, #0f172a);
    line-height: 1;
}

/* Hover */
.scm-mod-BookNow .date-picker .cal-day:hover:not(:disabled) {
    background: var(--bn-bg-muted, #f8fafc);
    border-color: var(--bn-border-hover, #93c5fd);
}

.scm-mod-BookNow .date-picker .cal-day:active:not(:disabled) {
    transform: scale(0.94);
}

/* Today dot */
.scm-mod-BookNow .date-picker .cal-today-dot {
    position: absolute;
    bottom: 4px;
    width: 5px;
    height: 5px;
    border-radius: 9999px;
    background: var(--bn-accent, #2563eb);
}

/* Today ring */
.scm-mod-BookNow .date-picker .cal-day.today:not(.selected) {
    border-color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .date-picker .cal-day.today:not(.selected) .cal-day-num {
    color: var(--bn-accent, #2563eb);
    font-weight: 700;
}

/* Selected */
.scm-mod-BookNow .date-picker .cal-day.selected {
    background: var(--bn-accent, #2563eb);
    border-color: var(--bn-accent, #2563eb);
    box-shadow: 0 4px 14px var(--bn-accent-glow, rgba(37, 99, 235, 0.3));
}

.scm-mod-BookNow .date-picker .cal-day.selected .cal-day-num {
    color: var(--bn-on-accent, #ffffff);
}

.scm-mod-BookNow .date-picker .cal-day.selected .cal-today-dot {
    background: var(--bn-on-accent, #ffffff);
}

/* Past */
.scm-mod-BookNow .date-picker .cal-day.past {
    opacity: 0.3;
    cursor: not-allowed;
}

/* Out of range */
.scm-mod-BookNow .date-picker .cal-day.out-of-range {
    opacity: 0.25;
    cursor: not-allowed;
}

/* Closed */
.scm-mod-BookNow .date-picker .cal-day.closed {
    opacity: 0.4;
    cursor: not-allowed;
}

.scm-mod-BookNow .date-picker .cal-day.closed .cal-day-num {
    text-decoration: line-through;
    text-decoration-color: var(--bn-text-tertiary, #94a3b8);
}

.scm-mod-BookNow .date-picker .cal-closed-mark {
    position: absolute;
    bottom: 2px;
    font-size: 0.5rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--bn-text-tertiary, #94a3b8);
    line-height: 1;
}

/* ─── 10c: WHICH VIEW, BY THE MODULE'S WIDTH ───
   Below the two-column when screen (a module under 800px wide): the day strip, and "See more dates" opens the month
   for a day further out. Two columns: the month, beside the times. Read from the module's width, not the window's,
   which put the month into a 340px phone-width module on a desktop and the strip into a wide one on a tablet. */

.scm-mod-BookNow .date-picker .day-strip-wrapper {
    display: flex;
}

.scm-mod-BookNow .date-picker .calendar-view {
    display: none;
}

.scm-mod-BookNow .date-picker.month-open .day-strip-wrapper {
    display: none;
}

.scm-mod-BookNow .date-picker.month-open .calendar-view {
    display: flex;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
}

.scm-mod-BookNow .date-picker .date-view-toggle {
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    min-height: 40px;
    padding: 0.375rem 0.875rem;
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: 9999px;
    background: var(--bn-bg, #ffffff);
    color: var(--bn-accent, #2563eb);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease-out, background 0.12s ease-out;
}

.scm-mod-BookNow .date-picker .date-view-toggle:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-accent-soft, #eff6ff);
}

@container booknow (min-width: 800px) {
    .scm-mod-BookNow .date-picker .day-strip-wrapper,
    .scm-mod-BookNow .date-picker.month-open .day-strip-wrapper,
    .scm-mod-BookNow .date-picker .date-view-toggle {
        display: none;
    }

    .scm-mod-BookNow .date-picker .calendar-view,
    .scm-mod-BookNow .date-picker.month-open .calendar-view {
        display: flex;
        max-width: none;
    }
}

/* The strip: arrows beside the days rather than over them (they hid the first and last day), and only where there is a
   mouse; a finger swipes. The ends fade to say there is more. */
.scm-mod-BookNow .date-picker .day-strip-wrapper {
    position: relative;
    align-items: center;
    gap: 0.25rem;
}

.scm-mod-BookNow .date-picker .strip-arrow {
    position: static;
    transform: none;
    flex: 0 0 32px;
    border: 1px solid var(--bn-border, #e2e8f0);
    box-shadow: none;
}

@media (hover: none) {
    .scm-mod-BookNow .date-picker .strip-arrow {
        display: none;
    }
}

.scm-mod-BookNow .date-picker .day-chips {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.375rem 0.25rem;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 0.25rem;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 20px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 8px, #000 calc(100% - 20px), transparent 100%);
}

.scm-mod-BookNow .date-picker .day-chip {
    min-width: 58px;
    height: 76px;
    border-width: 1.5px;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 11: TIME SLOT PICKER
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .time-slot-picker {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scm-mod-BookNow .time-slot-picker .picker-header {
    text-align: center;
}

.scm-mod-BookNow .time-slot-picker .picker-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin-bottom: 0.25rem;
}

.scm-mod-BookNow .time-slot-picker .picker-header p {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .time-slot-picker .loading-slots,
.scm-mod-BookNow .time-slot-picker .no-slots {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .time-slot-picker .no-slots i {
    font-size: 2rem;
    color: var(--bn-text-tertiary, #94a3b8);
}

.scm-mod-BookNow .time-slot-picker .no-slots.closed-message i {
    color: var(--bn-warning, #f59e0b);
}

.scm-mod-BookNow .time-slot-picker .picker-info-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
}

.scm-mod-BookNow .time-slot-picker .picker-info-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    background: var(--bn-bg-muted, #f8fafc);
    border: 1px solid var(--bn-border, #e2e8f0);
    font-size: 0.875rem;
    line-height: 1.25;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .time-slot-picker .picker-info-chip i {
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .time-slot-picker .free-cancellation-info {
    background: var(--bn-success-bg, #ecfdf5);
    border-color: var(--bn-success-border, #a7f3d0);
    color: var(--bn-success-text, #047857);
    font-weight: 500;
}

.scm-mod-BookNow .time-slot-picker .free-cancellation-info i {
    color: var(--bn-success, #10b981);
}

@media (max-width: 480px) {
    .scm-mod-BookNow .time-slot-picker .picker-info-row {
        flex-direction: column;
    }

    .scm-mod-BookNow .time-slot-picker .picker-info-chip {
        width: 100%;
    }
}

/* Time slots grid */
.scm-mod-BookNow .time-slot-picker .time-slots {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 0.625rem;
}

/* Card-style time slot — matches the karting heat-card visual language */
.scm-mod-BookNow .time-slot-picker .time-slot {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.125rem;
    min-height: 64px;
    padding: 0.625rem 0.75rem;
    border-radius: var(--bn-radius-lg, 0.75rem);
    background: #ffffff;
    background: var(--bn-bg, #ffffff);
    border: 2px solid #e2e8f0;
    border: 2px solid var(--bn-border, #e2e8f0);
    cursor: pointer;
    overflow: hidden;
    transition:
        border-color 0.2s ease,
        background 0.2s ease,
        color 0.2s ease,
        box-shadow 0.2s ease,
        transform 0.2s ease;
}

.scm-mod-BookNow .time-slot-picker .slot-time {
    font-size: var(--bn-text-base, 1rem);
    font-weight: var(--bn-weight-bold, 700);
    color: var(--bn-text, #0f172a);
    line-height: var(--bn-leading-tight, 1.25);
}

.scm-mod-BookNow .time-slot-picker .slot-meta {
    font-size: var(--bn-text-xs, 0.75rem);
    color: var(--bn-text-tertiary, #94a3b8);
    font-weight: var(--bn-weight-medium, 500);
    line-height: 1.2;
}

.scm-mod-BookNow .time-slot-picker .slot-limited {
    color: var(--bn-warning, #f59e0b);
    font-weight: var(--bn-weight-semibold, 600);
}

.scm-mod-BookNow .time-slot-picker .slot-peak-badge {
    position: absolute;
    top: 0.375rem;
    left: 0.5rem;
    font-size: 0.7rem;
    color: var(--bn-warning, #f59e0b);
    line-height: 1;
}

.scm-mod-BookNow .time-slot-picker .slot-check {
    position: absolute;
    top: 0.3rem;
    right: 0.45rem;
    font-size: 0.85rem;
    color: var(--bn-accent, #2563eb);
    line-height: 1;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.scm-mod-BookNow .time-slot-picker .time-slot:hover:not(:disabled) {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-bg-muted, #f8fafc);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.scm-mod-BookNow .time-slot-picker .time-slot.selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent-soft, #eff6ff);
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37, 99, 235, 0.25));
}

.scm-mod-BookNow .time-slot-picker .time-slot.selected .slot-time {
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .time-slot-picker .time-slot.selected .slot-check {
    opacity: 1;
    transform: scale(1);
}

.scm-mod-BookNow .time-slot-picker .time-slot:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bn-bg-muted, #f8fafc);
}

.scm-mod-BookNow .time-slot-picker .time-slot:active:not(:disabled) {
    transform: scale(0.97);
}

/* Time slot with limited availability */
.scm-mod-BookNow .time-slot-picker .time-slot.limited {
    border-color: var(--bn-warning, #f59e0b);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 11b: DURATION SELECTOR
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .duration-selector {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scm-mod-BookNow .duration-selector .selector-header {
    text-align: center;
}

.scm-mod-BookNow .duration-selector .selector-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin-bottom: 0.25rem;
}

.scm-mod-BookNow .duration-options {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 0.75rem;
}

.scm-mod-BookNow .duration-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    border-radius: 1rem;
    background: #ffffff;
    background: var(--bn-bg, #ffffff);
    border: 2px solid #e2e8f0;
    border: 2px solid var(--bn-border, #e2e8f0);
    cursor: pointer;
    transition:
        border-color 0.1s ease-out,
        background 0.1s ease-out,
        color 0.1s ease-out,
        box-shadow 0.1s ease-out,
        transform 0.1s ease-out;
}

.scm-mod-BookNow .duration-option:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-bg-muted, #f8fafc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.scm-mod-BookNow .duration-option.selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    box-shadow: 0 4px 14px var(--bn-accent-glow, rgba(37, 99, 235, 0.3));
}

.scm-mod-BookNow .duration-option:active {
    transform: scale(0.96);
}

.scm-mod-BookNow .duration-option .duration-value {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1.25;
}

.scm-mod-BookNow .duration-option .duration-desc {
    font-size: 0.75rem;
    font-weight: 500;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.scm-mod-BookNow .duration-option.selected .duration-desc {
    opacity: 0.9;
}

/* The matched package's price on a length (wave 6, item 5): a guest sees it before checkout. */
.scm-mod-BookNow .duration-option .duration-price {
    margin-top: 0.25rem;
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.scm-mod-BookNow .duration-price-note {
    margin: 0.75rem 0 0;
    font-size: var(--bn-text-xs, 0.75rem);
    color: var(--bn-text-tertiary, #94a3b8);
    text-align: center;
}

/* A linked length the venue does not sell online (wave 11): said plainly, with the nearest one and a call line. */
.scm-mod-BookNow .duration-unsold {
    margin: 0 0 1rem;
    padding: 0.875rem 1rem;
    border: 1px solid var(--bn-border, #e2e8f0);
    border-left: 4px solid var(--bn-accent, #2563eb);
    border-radius: 0.5rem;
    background: var(--bn-surface, transparent);
}

.scm-mod-BookNow .duration-unsold-text {
    margin: 0 0 0.625rem;
    font-size: var(--bn-text-sm, 0.875rem);
    color: inherit;
}

.scm-mod-BookNow .duration-unsold-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.scm-mod-BookNow .duration-unsold-nearest {
    padding: 0.5rem 1rem;
    border: 0;
    border-radius: 0.5rem;
    background: var(--bn-accent, #2563eb);
    color: var(--scm-accent-contrast, #fff);
    font-weight: 600;
    cursor: pointer;
}

.scm-mod-BookNow .duration-unsold-call {
    font-size: var(--bn-text-sm, 0.875rem);
    color: var(--bn-accent, #2563eb);
    text-decoration: underline;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 12: SIMULATOR PICKER
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .simulator-picker {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scm-mod-BookNow .simulator-picker .picker-header {
    text-align: center;
}

.scm-mod-BookNow .simulator-picker .picker-header h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin-bottom: 0.25rem;
}

.scm-mod-BookNow .simulator-picker .picker-header p {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

/* Simulator grid */
.scm-mod-BookNow .simulator-picker .loading-sims {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1rem;
    text-align: center;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .simulator-picker .simulator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}

.scm-mod-BookNow .simulator-picker .simulator-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem;
    border-radius: 0.75rem;
    background: #ffffff;
    background: var(--bn-bg, #ffffff);
    border: 2px solid #e2e8f0;
    border: 2px solid var(--bn-border, #e2e8f0);
    cursor: pointer;
    transition:
        border-color 0.1s ease-out,
        background 0.1s ease-out,
        box-shadow 0.1s ease-out,
        transform 0.1s ease-out;
}

.scm-mod-BookNow .simulator-picker .simulator-card:hover:not(:disabled):not(.unavailable) {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-bg-muted, #f8fafc);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.scm-mod-BookNow .simulator-picker .simulator-card.selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent-soft, #eff6ff);
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37, 99, 235, 0.15));
}

.scm-mod-BookNow .simulator-picker .simulator-card.unavailable,
.scm-mod-BookNow .simulator-picker .simulator-card.at-max {
    opacity: 0.5;
    cursor: not-allowed;
}

.scm-mod-BookNow .simulator-picker .simulator-card:active:not(.disabled) {
    transform: scale(0.98);
}

.scm-mod-BookNow .simulator-picker .sim-visual {
    position: relative;
    width: 64px;
    height: 64px;
    border-radius: 0.75rem;
    background: var(--bn-bg-muted, #f8fafc);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.scm-mod-BookNow .simulator-picker .unavailable-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.7);
    color: var(--bn-error, #ef4444);
    font-size: 1.5rem;
}

.scm-mod-BookNow .simulator-picker .sim-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scm-mod-BookNow .simulator-picker .sim-visual i {
    font-size: 1.5rem;
    color: var(--bn-text-tertiary, #94a3b8);
}

.scm-mod-BookNow .simulator-picker .sim-info {
    text-align: center;
}

.scm-mod-BookNow .simulator-picker .sim-name {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .simulator-picker .unavailable-reason {
    display: block;
    font-size: 0.75rem;
    color: var(--bn-text-tertiary, #94a3b8);
}

.scm-mod-BookNow .simulator-picker .selected-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 9999px;
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    border: 2px solid var(--bn-bg, #ffffff);
}

.scm-mod-BookNow .simulator-picker .unavailable-badge {
    position: absolute;
    bottom: 0.5rem;
    left: 50%;
    transform: translateX(-50%);
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    background: var(--bn-error-soft, #fef2f2);
    color: var(--bn-error, #ef4444);
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Selection summary */
.scm-mod-BookNow .simulator-picker .selection-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
    background: var(--bn-bg-muted, #f8fafc);
}

.scm-mod-BookNow .simulator-picker .selection-summary.incomplete {
    background: var(--bn-warning-soft, #fffbeb);
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .simulator-picker .availability-warning {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: var(--bn-warning-soft, #fffbeb);
    font-size: 0.875rem;
    color: var(--bn-text, #0f172a);
}

/* Auto-assign option */
.scm-mod-BookNow .simulator-picker .auto-assign-option {
    padding: 0.75rem;
    background: var(--bn-bg-muted, #f8fafc);
    border-radius: 0.75rem;
}

.scm-mod-BookNow .simulator-picker .toggle-option {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    cursor: pointer;
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .simulator-picker .toggle-option input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--bn-accent, #2563eb);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 12-st: SESSION TYPE PICKER
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .session-type-picker {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scm-mod-BookNow .session-type-picker .picker-header {
    text-align: center;
}

.scm-mod-BookNow .session-type-picker .picker-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin: 0 0 0.25rem;
}

.scm-mod-BookNow .session-type-picker .picker-header p {
    font-size: 0.9rem;
    color: var(--bn-text-secondary, #475569);
    margin: 0;
}

.scm-mod-BookNow .session-type-picker .loading-session-types {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .session-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
}

.scm-mod-BookNow .session-type-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.25rem 1rem;
    border-radius: var(--bn-radius-lg, 0.75rem);
    border: 2px solid var(--bn-border, #e2e8f0);
    background: var(--bn-bg, #ffffff);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.scm-mod-BookNow .session-type-card:hover:not(:disabled) {
    border-color: var(--bn-border-hover, #93c5fd);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.scm-mod-BookNow .session-type-card.selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent-soft, #eff6ff);
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37, 99, 235, 0.25));
}

.scm-mod-BookNow .session-type-card.unavailable,
.scm-mod-BookNow .session-type-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.scm-mod-BookNow .session-type-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bn-bg-muted, #f8fafc);
    font-size: 2rem;
    color: var(--bn-text-secondary, #475569);
    overflow: hidden;
}

.scm-mod-BookNow .session-type-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.scm-mod-BookNow .session-type-visual .selected-badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 1.1rem;
    color: var(--bn-accent, #2563eb);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.scm-mod-BookNow .session-type-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.scm-mod-BookNow .session-type-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .session-type-desc {
    font-size: 0.8rem;
    color: var(--bn-text-secondary, #475569);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scm-mod-BookNow .session-type-availability {
    margin-top: 0.25rem;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 12a: KART CLASS PICKER
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .kart-class-picker {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scm-mod-BookNow .kart-class-picker .picker-header {
    text-align: center;
}

.scm-mod-BookNow .kart-class-picker .picker-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin: 0 0 0.25rem;
}

.scm-mod-BookNow .kart-class-picker .picker-header p {
    font-size: 0.9rem;
    color: var(--bn-text-secondary, #475569);
    margin: 0;
}

.scm-mod-BookNow .kart-class-picker .loading-karts {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .kart-class-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scm-mod-BookNow .kart-class-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    padding: 0;
    border-radius: var(--bn-radius-lg, 0.75rem);
    border: 2px solid var(--bn-border, #e2e8f0);
    background: var(--bn-bg, #ffffff);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
    min-height: 100px;
}

.scm-mod-BookNow .kart-class-card:hover:not(:disabled) {
    border-color: var(--bn-border-hover, #93c5fd);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.scm-mod-BookNow .kart-class-card.selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent-soft, #eff6ff);
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37, 99, 235, 0.25));
}

.scm-mod-BookNow .kart-class-card.unavailable,
.scm-mod-BookNow .kart-class-card:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.scm-mod-BookNow .kart-class-accent {
    width: 5px;
    flex-shrink: 0;
}

.scm-mod-BookNow .kart-class-visual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    flex-shrink: 0;
    background: var(--bn-bg-muted, #f8fafc);
    font-size: 2rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .kart-class-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.scm-mod-BookNow .kart-class-visual .selected-badge {
    position: absolute;
    top: 0.35rem;
    right: 0.35rem;
    font-size: 1.1rem;
    color: var(--bn-accent, #2563eb);
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.15));
}

.scm-mod-BookNow .kart-class-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.75rem 0.75rem 0.75rem 0.75rem;
    min-width: 0;
}

.scm-mod-BookNow .kart-class-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .kart-class-desc {
    font-size: 0.8rem;
    color: var(--bn-text-secondary, #475569);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.scm-mod-BookNow .kart-class-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.15rem;
}

.scm-mod-BookNow .kart-class-specs .spec-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.45rem;
    border-radius: var(--bn-radius-full, 9999px);
    background: var(--bn-bg-muted, #f8fafc);
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--bn-text-secondary, #475569);
    border: 1px solid var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .kart-class-specs .spec-chip.propulsion-electric {
    background: #ecfdf5;
    color: #065f46;
    border-color: #a7f3d0;
}

.scm-mod-BookNow .kart-class-eligibility {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.75rem;
    color: var(--bn-text-tertiary, #94a3b8);
}

.scm-mod-BookNow .kart-class-availability {
    display: flex;
    align-items: center;
    padding: 0 0.75rem;
    flex-shrink: 0;
}

.scm-mod-BookNow .avail-badge {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: var(--bn-radius-full, 9999px);
    font-size: 0.7rem;
    font-weight: 600;
    white-space: nowrap;
}

.scm-mod-BookNow .avail-ok {
    background: var(--bn-success-soft, #ecfdf5);
    color: var(--bn-success, #22c55e);
}

.scm-mod-BookNow .avail-limited {
    background: var(--bn-warning-soft, #fffbeb);
    color: var(--bn-warning, #f59e0b);
}

.scm-mod-BookNow .avail-none {
    background: var(--bn-error-soft, #fef2f2);
    color: var(--bn-error, #ef4444);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 12a-h: HEAT PICKER (Karting heat selection)
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .heat-picker {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scm-mod-BookNow .heat-picker .picker-header {
    text-align: center;
}

.scm-mod-BookNow .heat-picker .picker-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin: 0 0 0.25rem;
}

.scm-mod-BookNow .heat-picker .picker-header p {
    font-size: 0.9rem;
    color: var(--bn-text-secondary, #475569);
    margin: 0;
}

/* Consecutive-heat policy note (rest break required between heats) */
.scm-mod-BookNow .heat-picker .heat-policy-note {
    display: inline-flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.625rem;
    padding: 0.5rem 0.875rem;
    border-radius: var(--bn-radius-md, 0.5rem);
    background: var(--bn-info-bg, #eff6ff);
    border: 1px solid var(--bn-info-border, #bfdbfe);
    color: var(--bn-info-text, #1e40af);
    font-size: 0.85rem;
    text-align: left;
}

.scm-mod-BookNow .heat-picker .heat-policy-note i {
    flex-shrink: 0;
    margin-top: 0.1rem;
}

/* The kart class's requirements, shown here when the venue's one class was picked without a class step. */
.scm-mod-BookNow .heat-picker .heat-class-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    margin: 0.25rem 0 0;
    color: var(--bn-text-secondary, #4b5563);
    font-size: 0.9rem;
}

/* Loading state */
.scm-mod-BookNow .heat-picker .loading-slots {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem;
    color: var(--bn-text-secondary, #475569);
}

/* Selection summary bar */
.scm-mod-BookNow .heat-selection-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.625rem 1rem;
    border-radius: var(--bn-radius-md, 0.5rem);
    background: var(--bn-bg-muted, #f8fafc);
    border: 1px solid var(--bn-border, #e2e8f0);
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-medium, 500);
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .heat-clear-btn {
    padding: 0.25rem 0.625rem;
    border-radius: var(--bn-radius-sm, 0.375rem);
    border: 1px solid var(--bn-border, #e2e8f0);
    background: var(--bn-bg, #ffffff);
    font-size: var(--bn-text-xs, 0.75rem);
    font-weight: var(--bn-weight-medium, 500);
    color: var(--bn-text-secondary, #475569);
    cursor: pointer;
    transition: all 0.15s ease;
}

.scm-mod-BookNow .heat-clear-btn:hover {
    border-color: var(--bn-error, #ef4444);
    color: var(--bn-error, #ef4444);
    background: var(--bn-error-soft, #fef2f2);
}

/* Heat card grid */
.scm-mod-BookNow .heat-grid {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.scm-mod-BookNow .heat-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0;
    border-radius: var(--bn-radius-lg, 0.75rem);
    border: 2px solid var(--bn-border, #e2e8f0);
    background: var(--bn-bg, #ffffff);
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    overflow: hidden;
}

.scm-mod-BookNow .heat-card:hover:not(:disabled) {
    border-color: var(--bn-border-hover, #93c5fd);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.scm-mod-BookNow .heat-card.selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent-soft, #eff6ff);
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37, 99, 235, 0.25));
}

.scm-mod-BookNow .heat-card.unavailable {
    opacity: 0.5;
    cursor: not-allowed;
    background: var(--bn-bg-muted, #f8fafc);
}

.scm-mod-BookNow .heat-card:active:not(:disabled):not(.unavailable) {
    transform: scale(0.985);
}

/* Kart class color accent strip */
.scm-mod-BookNow .heat-accent {
    width: 5px;
    align-self: stretch;
    flex-shrink: 0;
    border-radius: 3px 0 0 3px;
}

/* Time column */
.scm-mod-BookNow .heat-time {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0.75rem;
    min-width: 72px;
    flex-shrink: 0;
}

.scm-mod-BookNow .heat-time-value {
    font-size: var(--bn-text-base, 1rem);
    font-weight: var(--bn-weight-bold, 700);
    color: var(--bn-text, #0f172a);
    line-height: var(--bn-leading-tight, 1.25);
}

.scm-mod-BookNow .heat-card.selected .heat-time-value {
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .heat-duration {
    font-size: var(--bn-text-xs, 0.75rem);
    color: var(--bn-text-tertiary, #94a3b8);
    font-weight: var(--bn-weight-medium, 500);
}

/* Info column */
.scm-mod-BookNow .heat-info {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    flex: 1;
    padding: 0.75rem 0;
    min-width: 0;
}

.scm-mod-BookNow .heat-name {
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Capacity bar */
.scm-mod-BookNow .heat-capacity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scm-mod-BookNow .capacity-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: var(--bn-border, #e2e8f0);
    overflow: hidden;
    max-width: 100px;
}

.scm-mod-BookNow .capacity-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--bn-success, #10b981);
    transition: width 0.3s ease;
}

.scm-mod-BookNow .capacity-fill.low {
    background: var(--bn-warning, #f59e0b);
}

.scm-mod-BookNow .capacity-fill.full {
    background: var(--bn-error, #ef4444);
}

.scm-mod-BookNow .capacity-text {
    font-size: var(--bn-text-xs, 0.75rem);
    color: var(--bn-text-tertiary, #94a3b8);
    white-space: nowrap;
}

.scm-mod-BookNow .capacity-text.low {
    color: var(--bn-warning, #f59e0b);
}

.scm-mod-BookNow .capacity-text.full {
    color: var(--bn-error, #ef4444);
    font-weight: var(--bn-weight-semibold, 600);
}

/* Check icon column */
.scm-mod-BookNow .heat-check {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    font-size: 1.25rem;
    color: var(--bn-text-tertiary, #94a3b8);
    flex-shrink: 0;
}

.scm-mod-BookNow .heat-card.selected .heat-check {
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .heat-card.unavailable .heat-check {
    color: var(--bn-error, #ef4444);
    opacity: 0.6;
}

/* Responsive: stack time + info vertically on narrow screens */
@media (max-width: 380px) {
    .scm-mod-BookNow .heat-card {
        flex-wrap: wrap;
    }

    .scm-mod-BookNow .heat-time {
        flex-direction: row;
        gap: 0.5rem;
        min-width: auto;
        width: 100%;
        padding: 0.625rem 0.75rem 0;
        justify-content: flex-start;
    }

    .scm-mod-BookNow .heat-info {
        padding: 0.25rem 0.75rem 0.625rem;
        width: 100%;
    }

    .scm-mod-BookNow .heat-check {
        position: absolute;
        top: 0.625rem;
        right: 0.5rem;
        padding: 0;
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 12b: NO-AVAILABILITY CARD (shared across pickers)
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .no-availability-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
    padding: 2.5rem 1.5rem;
    border-radius: var(--bn-radius-lg, 0.75rem);
    background: var(--bn-bg-muted, #f8fafc);
    border: 1px solid var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .no-availability-card.compact {
    padding: 1.25rem 1rem;
}

.scm-mod-BookNow .no-availability-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bn-warning-soft, #fffbeb);
    color: var(--bn-warning, #f59e0b);
    font-size: 1.5rem;
}

.scm-mod-BookNow .no-availability-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin: 0;
}

.scm-mod-BookNow .no-availability-detail {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
    line-height: 1.5;
    margin: 0;
    max-width: 380px;
}

.scm-mod-BookNow .no-availability-suggestion {
    font-size: 0.8rem;
    color: var(--bn-text-tertiary, #94a3b8);
    font-style: italic;
    margin: 0;
}

.scm-mod-BookNow .no-availability-action {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 1rem;
    border-radius: var(--bn-radius-md, 0.5rem);
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    transition: background 0.15s ease;
}

.scm-mod-BookNow .no-availability-action:hover {
    background: var(--bn-accent-hover, #1e40af);
    color: var(--bn-on-accent, #ffffff);
}

/* Tester request 04: a button-styled action (the next day with a session) keeps the link's look, with a touch-sized
   target, and a class with no session on the schedule offers the classes that have one. */
.scm-mod-BookNow button.no-availability-action {
    border: none;
    min-height: 44px;
    cursor: pointer;
}

.scm-mod-BookNow .no-availability-action:focus-visible,
.scm-mod-BookNow .heat-other-class:focus-visible {
    outline: 2px solid var(--bn-accent, #2563eb);
    outline-offset: 2px;
}

.scm-mod-BookNow .heat-other-classes {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    width: 100%;
    max-width: 380px;
    margin-top: 0.5rem;
}

.scm-mod-BookNow .heat-other-classes-title {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
    margin: 0;
}

.scm-mod-BookNow .heat-other-class {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    min-height: 44px;
    padding: 0.625rem 0.875rem;
    border-radius: var(--bn-radius-md, 0.5rem);
    border: 1px solid var(--bn-border, #e2e8f0);
    background: var(--bn-bg, #ffffff);
    color: var(--bn-text, #0f172a);
    text-align: left;
    cursor: pointer;
}

.scm-mod-BookNow .heat-other-class:hover {
    border-color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .heat-other-class-name {
    font-weight: 600;
}

.scm-mod-BookNow .heat-other-class-day {
    font-size: 0.8125rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .kart-class-on-request {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text-secondary, #475569);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 12c: PACKAGE SELECTOR
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .package-selector {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4, 1rem);
}

.scm-mod-BookNow .package-selector .picker-header h2 {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--bn-text, #0f172a);
    margin: 0 0 0.25rem;
}

.scm-mod-BookNow .package-selector .picker-header p {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .package-grid {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.scm-mod-BookNow .package-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1.25rem;
    border-radius: var(--bn-radius-lg, 0.75rem);
    background: var(--bn-bg, #ffffff);
    border: 2px solid var(--bn-border, #e2e8f0);
    cursor: pointer;
    text-align: left;
    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        transform 0.1s ease;
}

.scm-mod-BookNow .package-card:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.scm-mod-BookNow .package-card.selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent-soft, #eff6ff);
    box-shadow: 0 4px 14px var(--bn-accent-glow, rgba(37, 99, 235, 0.15));
}

.scm-mod-BookNow .package-card.featured {
    border-color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .package-card:active {
    transform: scale(0.985);
}

.scm-mod-BookNow .featured-badge {
    position: absolute;
    top: -0.625rem;
    right: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.2rem 0.625rem;
    border-radius: 999px;
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.scm-mod-BookNow .package-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.scm-mod-BookNow .package-icon {
    font-size: 1.25rem;
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .package-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin: 0;
}

.scm-mod-BookNow .package-tagline {
    font-size: 0.85rem;
    color: var(--bn-text-secondary, #475569);
    margin: 0;
    font-style: italic;
}

.scm-mod-BookNow .package-details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

.scm-mod-BookNow .package-detail {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .package-detail i {
    font-size: 0.85rem;
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .package-includes {
    font-size: 0.8rem;
    color: var(--bn-text-tertiary, #94a3b8);
    margin: 0;
    line-height: 1.4;
}

.scm-mod-BookNow .package-price {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.scm-mod-BookNow .price-amount {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .price-note {
    font-size: 0.75rem;
    color: var(--bn-text-tertiary, #94a3b8);
}

.scm-mod-BookNow .package-card .selected-indicator {
    position: absolute;
    top: 0.75rem;
    right: 0.75rem;
    color: var(--bn-accent, #2563eb);
    font-size: 1.25rem;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 13: PARTICIPANT COMPONENTS
   ??????????????????????????????????????????????????????????????????????????? */

/* Participant Prompt */
.scm-mod-BookNow .participant-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--bn-bg, #ffffff);
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: 1rem;
    box-shadow: 0 0 0 1px rgba(226,232,240,0.5), 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
}

.scm-mod-BookNow .participant-prompt .prompt-icon {
    width: 64px;
    height: 64px;
    border-radius: 9999px;
    background: var(--bn-accent-soft, #eff6ff);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
}

.scm-mod-BookNow .participant-prompt .prompt-icon i {
    font-size: 1.75rem;
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .participant-prompt h4 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    margin-bottom: 0.5rem;
}

.scm-mod-BookNow .participant-prompt .prompt-benefits {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
    margin-bottom: 1rem;
}

.scm-mod-BookNow .participant-prompt .benefit-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--bn-space-6) 0;
    text-align: left;
    width: 100%;
    max-width: 280px;
}

.scm-mod-BookNow .participant-prompt .benefit-list li {
    display: flex;
    align-items: center;
    gap: var(--bn-space-3);
    padding: var(--bn-space-2) 0;
    font-size: var(--bn-text-sm);
    color: var(--bn-text);
}

.scm-mod-BookNow .participant-prompt .benefit-list li .benefit-check {
    color: var(--bn-success);
    font-size: 1rem;
    flex-shrink: 0;
}

.scm-mod-BookNow .participant-prompt .prompt-actions {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-3);
    width: 100%;
    max-width: 280px;
}

.scm-mod-BookNow .participant-prompt .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    height: 48px;
    border-radius: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    transition: background 0.1s ease-out, border-color 0.1s ease-out, transform 0.1s ease-out;
}

.scm-mod-BookNow .participant-prompt .btn-primary {
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    border: none;
}

.scm-mod-BookNow .participant-prompt .btn-primary:hover {
    background: var(--bn-accent-hover, #1e40af);
}

.scm-mod-BookNow .participant-prompt .btn-outline {
    background: transparent;
    color: var(--bn-text-secondary, #475569);
    border: 1px solid var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .participant-prompt .btn-outline:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-bg-muted, #f8fafc);
}

.scm-mod-BookNow .participant-prompt .btn:active {
    transform: scale(0.98);
}

.scm-mod-BookNow .participant-prompt .prompt-note {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    margin-top: var(--bn-space-4);
    font-size: var(--bn-text-xs);
    color: var(--bn-text-tertiary);
}

.scm-mod-BookNow .participant-prompt .prompt-note i {
    flex-shrink: 0;
}

/* Participant List */
.scm-mod-BookNow .participant-list {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4);
}

.scm-mod-BookNow .participant-list .list-header {
    text-align: center;
}

.scm-mod-BookNow .participant-list .list-header h2 {
    font-size: var(--bn-text-2xl);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
    margin-bottom: var(--bn-space-1);
}

.scm-mod-BookNow .participant-list .list-header p {
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .participant-list .participant-guardian-notice {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-3);
    padding: var(--bn-space-3) var(--bn-space-4);
    background: var(--bn-warning-soft, #fffbeb);
    border: 1px solid var(--bn-warning, #f59e0b);
    border-radius: var(--bn-radius-lg, 0.75rem);
}

.scm-mod-BookNow .participant-list .participant-guardian-notice > i {
    color: var(--bn-warning, #f59e0b);
    font-size: var(--bn-text-xl);
    line-height: 1.4;
    flex-shrink: 0;
}

.scm-mod-BookNow .participant-list .participant-guardian-notice strong {
    display: block;
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
    margin-bottom: var(--bn-space-1);
}

.scm-mod-BookNow .participant-list .participant-guardian-notice p {
    margin: 0;
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

/* Soft, non-blocking eligibility warning shown under a participant when an entered
   age/height/weight is outside the cart activity's bounds (server still enforces). */
.scm-mod-BookNow .participant-list .participant-eligibility-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-2);
    margin-top: var(--bn-space-3);
    padding: var(--bn-space-2) var(--bn-space-3);
    background: var(--bn-warning-soft, #fffbeb);
    border: 1px solid var(--bn-warning, #f59e0b);
    border-radius: var(--bn-radius-md, 0.5rem);
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .participant-list .participant-eligibility-warning > i {
    color: var(--bn-warning, #f59e0b);
    line-height: 1.4;
    flex-shrink: 0;
}

.scm-mod-BookNow .participant-list .participant-cards {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-3);
}

.scm-mod-BookNow .participant-list .btn-add-participant {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bn-space-2);
    width: 100%;
    height: 52px;
    border: 2px dashed var(--bn-border);
    border-radius: var(--bn-radius-lg);
    background: transparent;
    color: var(--bn-text-secondary);
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
    transition: 
        border-color var(--bn-transition-fast),
        color var(--bn-transition-fast),
        background var(--bn-transition-fast);
}

.scm-mod-BookNow .participant-list .btn-add-participant:hover {
    border-color: var(--bn-accent);
    color: var(--bn-accent);
    background: var(--bn-accent-soft);
}

.scm-mod-BookNow .participant-list .email-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-2);
    padding: var(--bn-space-3);
    background: var(--bn-info-soft);
    border-radius: var(--bn-radius-md);
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .participant-list .email-hint i {
    color: var(--bn-info);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Participant Card */
.scm-mod-BookNow .participant-card {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-3);
    padding: var(--bn-space-4);
    background: var(--bn-bg);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
}

.scm-mod-BookNow .participant-card .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.scm-mod-BookNow .participant-card .participant-number {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .participant-card .btn-remove {
    width: 32px;
    height: 32px;
    border-radius: var(--bn-radius-full);
    background: var(--bn-bg-muted);
    color: var(--bn-text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 
        background var(--bn-transition-fast),
        color var(--bn-transition-fast);
}

.scm-mod-BookNow .participant-card .btn-remove:hover {
    background: var(--bn-error-soft);
    color: var(--bn-error);
}

.scm-mod-BookNow .participant-card .card-form {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-3);
}

/* The cap belongs to the INPUT, not the group. A date input only ever needs room for
   "mm/dd/yyyy", but the group around it also carries the "Age N" hint, the validation error and
   (for a minor) the guardian chip plus its one-line expectation. Capping the group at 100px
   clamped all of that too, so the help text wrapped a character at a time or was clipped
   outright — most visible to anonymous bookers, who always get the manual-entry path rather
   than a saved-child prefill. */
.scm-mod-BookNow .participant-card .form-group--age .form-input {
    max-width: 11rem;
    text-align: center;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 14: FORM ELEMENTS
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .form-group {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .form-group label {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text);
}

.scm-mod-BookNow .form-group .optional {
    font-weight: var(--bn-weight-normal);
    color: var(--bn-text-tertiary);
}

.scm-mod-BookNow .form-input {
    width: 100%;
    height: 48px;
    padding: 0 1rem;
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: 0.5rem;
    background: var(--bn-bg, #ffffff);
    color: var(--bn-text, #0f172a);
    font-size: 1rem;
    transition: border-color 0.1s ease-out, box-shadow 0.1s ease-out;
}

.scm-mod-BookNow .form-input::placeholder {
    color: var(--bn-text-tertiary, #94a3b8);
}

.scm-mod-BookNow .form-input:focus {
    outline: none;
    border-color: var(--bn-accent, #2563eb);
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37, 99, 235, 0.25));
}

.scm-mod-BookNow .form-input.error {
    border-color: var(--bn-error);
}

.scm-mod-BookNow .form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.25);
}

.scm-mod-BookNow .form-textarea {
    height: auto;
    min-height: 100px;
    padding: var(--bn-space-3) var(--bn-space-4);
    resize: vertical;
}

.scm-mod-BookNow .field-hint {
    font-size: var(--bn-text-xs);
    color: var(--bn-text-tertiary);
}

/* ── Promo code entry (cart review) ─────────────────────────────────────────────── */
.scm-mod-BookNow .cart-promo {
    margin: var(--bn-space-3, 0.75rem) 0;
}

.scm-mod-BookNow .promo-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: none;
    border: none;
    padding: 0.25rem 0;
    color: var(--bn-accent, #2563eb);
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-medium, 500);
    cursor: pointer;
}

.scm-mod-BookNow .promo-toggle:hover {
    text-decoration: underline;
}

.scm-mod-BookNow .promo-entry {
    display: flex;
    gap: 0.5rem;
}

.scm-mod-BookNow .promo-input {
    flex: 1 1 auto;
    min-width: 0;
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: var(--bn-radius-md, 0.5rem);
    padding: 0.5rem 0.75rem;
    font-size: var(--bn-text-sm, 0.875rem);
    text-transform: uppercase;
}

.scm-mod-BookNow .promo-apply {
    flex: 0 0 auto;
    border: 1px solid var(--bn-accent, #2563eb);
    border-radius: var(--bn-radius-md, 0.5rem);
    background: var(--bn-accent, #2563eb);
    color: #fff;
    padding: 0.5rem 1rem;
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-medium, 500);
    cursor: pointer;
}

.scm-mod-BookNow .promo-apply:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.scm-mod-BookNow .promo-spinner {
    display: inline-block;
    width: 0.9rem;
    height: 0.9rem;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: bn-promo-spin 0.7s linear infinite;
}

@keyframes bn-promo-spin {
    to { transform: rotate(360deg); }
}

.scm-mod-BookNow .promo-error {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.4rem;
    color: var(--bn-error, #ef4444);
    font-size: var(--bn-text-xs, 0.75rem);
    font-weight: var(--bn-weight-medium, 500);
}

.scm-mod-BookNow .promo-applied {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bn-success-soft, #f0fdf4);
    border: 1px solid var(--bn-success, #22c55e);
    border-radius: var(--bn-radius-md, 0.5rem);
    padding: 0.5rem 0.75rem;
    font-size: var(--bn-text-sm, 0.875rem);
}

.scm-mod-BookNow .promo-applied i.bi-tag-fill {
    color: var(--bn-success, #22c55e);
}

.scm-mod-BookNow .promo-code-label {
    font-weight: var(--bn-weight-semibold, 600);
    letter-spacing: 0.02em;
}

.scm-mod-BookNow .promo-applied-note {
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .promo-remove {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0.125rem;
    color: var(--bn-text-tertiary, #64748b);
    cursor: pointer;
}

.scm-mod-BookNow .promo-remove:hover {
    color: var(--bn-error, #ef4444);
}

/* Hard data-sanity error on a participant field (implausible DOB/height/weight): red inline
   message + red input border. Distinct from the soft eligibility warning — these BLOCK Continue. */
.scm-mod-BookNow .field-error {
    display: block;
    margin-top: 0.25rem;
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-medium, 500);
    color: var(--bn-error, #ef4444);
}

.scm-mod-BookNow .form-input--invalid,
.scm-mod-BookNow .form-input--invalid:focus {
    border-color: var(--bn-error, #ef4444);
    box-shadow: 0 0 0 1px var(--bn-error, #ef4444);
}

/* Adult-supervision capture for a minor participant (§9.4). Stacks full-width like Name/Email; the
   hint pairs an info icon with the "responsible adult must accompany" reminder. */
.scm-mod-BookNow .form-group--supervision .field-hint {
    display: inline-flex;
    align-items: center;
    gap: var(--bn-space-1, 0.25rem);
}

.scm-mod-BookNow .error-message {
    font-size: var(--bn-text-xs);
    color: var(--bn-error);
    font-weight: var(--bn-weight-medium);
}

/* Checkbox */
.scm-mod-BookNow .form-group--checkbox {
    flex-direction: row;
}

.scm-mod-BookNow .checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--bn-space-3);
    cursor: pointer;
}

.scm-mod-BookNow .checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--bn-accent);
    cursor: pointer;
}

.scm-mod-BookNow .checkbox-text {
    font-size: var(--bn-text-sm);
    color: var(--bn-text);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 15: CUSTOMER INFO FORM
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .customer-info-form {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-5);
}

.scm-mod-BookNow .customer-info-form .form-header {
    text-align: center;
}

.scm-mod-BookNow .customer-info-form .form-header h2 {
    font-size: var(--bn-text-2xl);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
    margin-bottom: var(--bn-space-1);
}

.scm-mod-BookNow .customer-info-form .form-header p {
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .customer-info-form .form-body {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4);
}

/* Participation question (fieldset of radios) */
.scm-mod-BookNow .form-group--participation {
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .form-group--participation fieldset {
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md, 0.5rem);
    padding: var(--bn-space-3) var(--bn-space-4);
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-2);
    background: var(--bn-surface, #fff);
}

.scm-mod-BookNow .form-group--participation legend {
    width: auto;
    float: none;
    padding: 0 var(--bn-space-2);
    margin-bottom: 0;
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text);
}

.scm-mod-BookNow .form-group--participation .field-hint {
    margin: 0 0 var(--bn-space-2) 0;
    line-height: 1.4;
}

.scm-mod-BookNow .form-group--participation .field-hint strong {
    color: var(--bn-text);
    font-weight: var(--bn-weight-semibold, 600);
}

.scm-mod-BookNow .radio-label {
    display: flex;
    align-items: center;
    gap: var(--bn-space-3);
    padding: var(--bn-space-2) var(--bn-space-3);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md, 0.5rem);
    background: var(--bn-surface, #fff);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
    min-height: 2.75rem;
}

.scm-mod-BookNow .radio-label:hover {
    border-color: var(--bn-accent);
    background: var(--bn-surface-hover, rgba(0, 0, 0, 0.02));
}

.scm-mod-BookNow .radio-label input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--bn-accent);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}

.scm-mod-BookNow .radio-label:has(input[type="radio"]:checked) {
    border-color: var(--bn-accent);
    background: var(--bn-accent-soft, rgba(13, 110, 253, 0.06));
    box-shadow: 0 0 0 1px var(--bn-accent) inset;
}

.scm-mod-BookNow .radio-label:focus-within {
    outline: 2px solid var(--bn-accent);
    outline-offset: 2px;
}

.scm-mod-BookNow .radio-text {
    font-size: var(--bn-text-sm);
    color: var(--bn-text);
    line-height: 1.3;
}

.scm-mod-BookNow .form-group--participation .error-message {
    margin-top: var(--bn-space-1);
}

/* New professional radio cards used in the participation question. */
.scm-mod-BookNow .form-group--participation .radio-group {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-3);
    padding: var(--bn-space-3) var(--bn-space-4);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md, 0.5rem);
    background: var(--bn-surface, #fff);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

.scm-mod-BookNow .radio-option:hover {
    border-color: var(--bn-accent);
    background: var(--bn-surface-hover, rgba(0, 0, 0, 0.02));
}

.scm-mod-BookNow .radio-option input[type="radio"] {
    width: 20px;
    height: 20px;
    accent-color: var(--bn-accent);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.scm-mod-BookNow .radio-option.is-selected,
.scm-mod-BookNow .radio-option:has(input[type="radio"]:checked) {
    border-color: var(--bn-accent);
    background: var(--bn-accent-soft, rgba(13, 110, 253, 0.06));
    box-shadow: 0 0 0 1px var(--bn-accent) inset;
}

.scm-mod-BookNow .radio-option:focus-within {
    outline: 2px solid var(--bn-accent);
    outline-offset: 2px;
}

.scm-mod-BookNow .radio-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1.3;
}

.scm-mod-BookNow .radio-title {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text);
}

.scm-mod-BookNow .radio-subtitle {
    font-size: var(--bn-text-xs, 0.8125rem);
    color: var(--bn-text-secondary);
}

/* Booker participant card styling */
.scm-mod-BookNow .participant-card.is-booker {
    border-color: var(--bn-accent);
    background: var(--bn-accent-soft, rgba(13, 110, 253, 0.04));
}

.scm-mod-BookNow .participant-card.is-booker .participant-number {
    color: var(--bn-accent);
    font-weight: var(--bn-weight-semibold, 600);
}

.scm-mod-BookNow .participant-card.is-booker .form-input:disabled {
    background: var(--bn-surface, #fff);
    color: var(--bn-text-secondary);
    cursor: not-allowed;
    opacity: 0.85;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 16: CART & CHECKOUT
   ??????????????????????????????????????????????????????????????????????????? */

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 16A: PRICING PANEL
   Server-calculated pricing breakdown with line items, promo codes, and totals.
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .pricing-panel {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4);
}

/* Loading state */
.scm-mod-BookNow .pricing-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bn-space-3);
    padding: var(--bn-space-5);
    color: var(--bn-text-secondary);
    font-size: var(--bn-text-sm);
}

.scm-mod-BookNow .pricing-loading .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid var(--bn-border);
    border-top-color: var(--bn-accent);
    border-radius: var(--bn-radius-full);
    animation: bn-spin 0.8s linear infinite;
}

/* Error state */
.scm-mod-BookNow .pricing-error {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    padding: var(--bn-space-3) var(--bn-space-4);
    background: var(--bn-warning-soft);
    border-radius: var(--bn-radius-md);
    color: var(--bn-warning);
    font-size: var(--bn-text-sm);
    flex-wrap: wrap;
}

.scm-mod-BookNow .pricing-retry-btn {
    margin-left: auto;
    padding: var(--bn-space-1) var(--bn-space-3);
    background: transparent;
    border: 1px solid var(--bn-warning);
    border-radius: var(--bn-radius-sm);
    color: var(--bn-warning);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-medium);
    cursor: pointer;
    transition: background var(--bn-transition-fast);
}

.scm-mod-BookNow .pricing-retry-btn:hover {
    background: rgba(245, 158, 11, 0.1);
}

/* Line items */
.scm-mod-BookNow .pricing-line-items {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .pricing-line-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--bn-space-3);
    padding: var(--bn-space-3) var(--bn-space-4);
    background: var(--bn-bg-muted);
    border-radius: var(--bn-radius-md);
}

.scm-mod-BookNow .line-item-info {
    flex: 1;
    min-width: 0;
}

.scm-mod-BookNow .line-item-name {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
    color: var(--bn-text);
}

.scm-mod-BookNow .line-item-qty {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.35rem;
    background: var(--bn-accent);
    color: var(--bn-on-accent);
    border-radius: var(--bn-radius-full);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-bold);
    line-height: 1;
}

.scm-mod-BookNow .line-item-includes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bn-space-1) var(--bn-space-3);
    margin-top: var(--bn-space-1);
}

.scm-mod-BookNow .included-detail {
    font-size: var(--bn-text-xs);
    color: var(--bn-text-tertiary);
}

.scm-mod-BookNow .included-more {
    font-style: italic;
}

.scm-mod-BookNow .line-item-price {
    text-align: right;
    flex-shrink: 0;
}

.scm-mod-BookNow .line-item-total {
    display: block;
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text);
}

.scm-mod-BookNow .line-item-unit {
    display: block;
    font-size: var(--bn-text-xs);
    color: var(--bn-text-tertiary);
}

/* Pricing tier badges */
.scm-mod-BookNow .pricing-tier-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.1rem 0.5rem;
    border-radius: var(--bn-radius-full);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    letter-spacing: 0.02em;
    line-height: 1.4;
}

.scm-mod-BookNow .pricing-tier-peak {
    background: var(--bn-warning-soft);
    color: #b45309;
}

.scm-mod-BookNow .pricing-tier-offpeak {
    background: var(--bn-success-soft);
    color: #047857;
}

.scm-mod-BookNow .pricing-tier-member {
    background: var(--bn-info-soft);
    color: #1d4ed8;
}

/* Promo code section */
.scm-mod-BookNow .pricing-promo {
    padding: var(--bn-space-3) 0;
    border-top: 1px solid var(--bn-border);
}

.scm-mod-BookNow .promo-input-row {
    display: flex;
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .promo-input {
    flex: 1;
    height: 42px;
    padding: 0 var(--bn-space-3);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);
    background: var(--bn-bg);
    color: var(--bn-text);
    font-size: var(--bn-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: border-color var(--bn-transition-fast);
}

.scm-mod-BookNow .promo-input:focus {
    border-color: var(--bn-accent);
    outline: none;
    box-shadow: var(--bn-shadow-focus);
}

.scm-mod-BookNow .promo-input::placeholder {
    text-transform: none;
    letter-spacing: 0;
    color: var(--bn-text-tertiary);
}

.scm-mod-BookNow .promo-apply-btn {
    height: 42px;
    padding: 0 var(--bn-space-4);
    background: var(--bn-bg-muted);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-md);
    color: var(--bn-text);
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
    transition: 
        background var(--bn-transition-fast),
        border-color var(--bn-transition-fast);
}

.scm-mod-BookNow .promo-apply-btn:hover:not(:disabled) {
    background: var(--bn-accent-soft);
    border-color: var(--bn-accent);
    color: var(--bn-accent);
}

.scm-mod-BookNow .promo-apply-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.scm-mod-BookNow .promo-apply-btn .spinner-sm {
    width: 14px;
    height: 14px;
    border: 2px solid var(--bn-border);
    border-top-color: var(--bn-accent);
    border-radius: var(--bn-radius-full);
    animation: bn-spin 0.8s linear infinite;
    display: inline-block;
}

.scm-mod-BookNow .promo-error {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    margin-top: var(--bn-space-2);
    color: var(--bn-error);
    font-size: var(--bn-text-xs);
}

.scm-mod-BookNow .promo-applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bn-space-3) var(--bn-space-4);
    background: var(--bn-success-soft);
    border-radius: var(--bn-radius-md);
}

.scm-mod-BookNow .promo-applied-info {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    color: var(--bn-success);
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
}

.scm-mod-BookNow .promo-code-text {
    font-weight: var(--bn-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scm-mod-BookNow .promo-savings {
    font-weight: var(--bn-weight-bold);
}

.scm-mod-BookNow .promo-remove-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: var(--bn-radius-full);
    color: var(--bn-text-tertiary);
    font-size: 1.1rem;
    transition: 
        background var(--bn-transition-fast),
        color var(--bn-transition-fast);
}

.scm-mod-BookNow .promo-remove-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    color: var(--bn-error);
}

/* Totals section */
.scm-mod-BookNow .pricing-totals {
    padding: var(--bn-space-4);
    background: var(--bn-bg-muted);
    border-radius: var(--bn-radius-lg);
}

.scm-mod-BookNow .pricing-total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--bn-space-2) 0;
    font-size: var(--bn-text-sm);
}

.scm-mod-BookNow .pricing-total-row .total-label {
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .pricing-total-row .total-value {
    font-weight: var(--bn-weight-medium);
    color: var(--bn-text);
}

.scm-mod-BookNow .pricing-discount-row .total-label,
.scm-mod-BookNow .pricing-discount-row .total-value {
    color: var(--bn-success);
}

.scm-mod-BookNow .pricing-discount-row .discount-detail {
    font-size: var(--bn-text-xs);
    opacity: 0.8;
}

/* Tax a tax-inclusive venue's prices already contain. Deliberately NOT a .pricing-total-row:
   it states part of the total rather than adding to it, and a row that lines up with the
   figures beside it reads as another addend. */
.scm-mod-BookNow .pricing-tax-note {
    margin: 0;
    padding: var(--bn-space-1) 0 0;
    font-size: var(--bn-text-xs);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .pricing-grand-total {
    border-top: 2px solid var(--bn-border);
    margin-top: var(--bn-space-2);
    padding-top: var(--bn-space-3);
}

.scm-mod-BookNow .pricing-grand-total .total-label {
    font-size: var(--bn-text-base);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
}

.scm-mod-BookNow .pricing-grand-total .total-value {
    font-size: var(--bn-text-xl);
    font-weight: var(--bn-weight-extrabold);
    color: var(--bn-accent);
}

.scm-mod-BookNow .pricing-deposit-row {
    border-top: 1px dashed var(--bn-border);
    margin-top: var(--bn-space-2);
    padding-top: var(--bn-space-2);
}

.scm-mod-BookNow .pricing-deposit-row .total-label {
    display: flex;
    align-items: center;
    gap: var(--bn-space-1);
    color: var(--bn-info);
    font-size: var(--bn-text-xs);
}

.scm-mod-BookNow .pricing-deposit-row .total-value {
    color: var(--bn-info);
    font-weight: var(--bn-weight-semibold);
}

/* Pricing tier info banner */
.scm-mod-BookNow .pricing-tier-info {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    padding: var(--bn-space-2) var(--bn-space-3);
    background: var(--bn-info-soft);
    border-radius: var(--bn-radius-sm);
    color: var(--bn-info);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-medium);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 16B: CART SUMMARY
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .cart-summary {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4);
}

.scm-mod-BookNow .cart-summary .cart-header {
    text-align: center;
}

.scm-mod-BookNow .cart-summary .cart-header h2 {
    font-size: var(--bn-text-2xl);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
}

.scm-mod-BookNow .cart-summary .cart-items {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-3);
}

.scm-mod-BookNow .cart-summary .cart-item {
    display: flex;
    gap: var(--bn-space-3);
    padding: var(--bn-space-4);
    background: var(--bn-bg);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
}

.scm-mod-BookNow .cart-summary .item-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--bn-radius-md);
    background: var(--bn-accent-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bn-accent);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.scm-mod-BookNow .cart-summary .item-details {
    flex: 1;
    min-width: 0;
}

.scm-mod-BookNow .cart-summary .item-title {
    font-size: var(--bn-text-base);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text);
    margin-bottom: var(--bn-space-1);
}

.scm-mod-BookNow .cart-summary .item-description {
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
    line-height: var(--bn-leading-snug);
}

/* Cart item line-item breakdown (server-calculated) */
.scm-mod-BookNow .cart-summary .item-line-items {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-1);
    margin-top: var(--bn-space-2);
    padding: var(--bn-space-2) var(--bn-space-3);
    background: var(--bn-bg-muted);
    border-radius: var(--bn-radius-sm);
    font-size: var(--bn-text-xs);
}

.scm-mod-BookNow .cart-summary .item-line-detail {
    display: flex;
    justify-content: space-between;
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .cart-summary .item-line-detail .line-qty {
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-accent);
    margin-right: 0.25em;
}

/* Cart item promo code indicator */
.scm-mod-BookNow .cart-summary .item-promo {
    display: flex;
    align-items: center;
    gap: var(--bn-space-1);
    margin-top: var(--bn-space-1);
    font-size: var(--bn-text-xs);
    color: var(--bn-success);
    font-weight: var(--bn-weight-medium);
}

/* Cart item roster-completeness note ("2 of 5 guests added"). Replaces .item-participants, which
   was rendered but never had a rule anywhere, so it fell back to default paragraph styling and read
   as a stray line rather than a caption. */
.scm-mod-BookNow .cart-summary .item-roster-note {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-1);
    margin-top: var(--bn-space-1);
    font-size: var(--bn-text-xs);
    color: var(--bn-text-secondary);
    line-height: var(--bn-leading-snug);
}

/* Cart totals with breakdown */
.scm-mod-BookNow .cart-summary .totals-row.subtotal-row,
.scm-mod-BookNow .cart-summary .totals-row.tax-row {
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .cart-summary .totals-row.discount-row {
    font-size: var(--bn-text-sm);
    color: var(--bn-success);
}

.scm-mod-BookNow .cart-summary .item-price {
    font-size: var(--bn-text-base);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
    text-align: right;
}

.scm-mod-BookNow .cart-summary .item-actions {
    display: flex;
    gap: var(--bn-space-2);
    margin-top: var(--bn-space-2);
}

.scm-mod-BookNow .cart-summary .btn-edit,
.scm-mod-BookNow .cart-summary .btn-remove {
    font-size: var(--bn-text-xs);
    color: var(--bn-text-tertiary);
    padding: var(--bn-space-1) var(--bn-space-2);
    border-radius: var(--bn-radius-sm);
    transition: color var(--bn-transition-fast);
}

.scm-mod-BookNow .cart-summary .btn-edit:hover {
    color: var(--bn-accent);
}

.scm-mod-BookNow .cart-summary .btn-remove:hover {
    color: var(--bn-error);
}

.scm-mod-BookNow .cart-summary .cart-totals {
    padding: var(--bn-space-4);
    background: var(--bn-bg-muted);
    border-radius: var(--bn-radius-lg);
}

.scm-mod-BookNow .cart-summary .totals-row {
    display: flex;
    justify-content: space-between;
    padding: var(--bn-space-2) 0;
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .cart-summary .totals-row.total {
    border-top: 1px solid var(--bn-border);
    margin-top: var(--bn-space-2);
    padding-top: var(--bn-space-3);
    font-size: var(--bn-text-lg);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
}

/* "Includes $X tax" under the total, at a venue whose prices already contain their tax. */
.scm-mod-BookNow .cart-summary .totals-note {
    text-align: right;
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .cart-summary .add-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bn-space-2);
    width: 100%;
    height: 48px;
    border: 2px dashed var(--bn-border);
    border-radius: var(--bn-radius-lg);
    background: transparent;
    color: var(--bn-text-secondary);
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-medium);
    transition: 
        border-color var(--bn-transition-fast),
        color var(--bn-transition-fast);
}

.scm-mod-BookNow .cart-summary .add-more-btn:hover {
    border-color: var(--bn-accent);
    color: var(--bn-accent);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 17: PAYMENT FORM
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .payment-form {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-5);
}

.scm-mod-BookNow .payment-form .payment-header {
    text-align: center;
}

.scm-mod-BookNow .payment-form .payment-header h2 {
    font-size: var(--bn-text-2xl);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
}

/* Payment form - Order summary breakdown */
.scm-mod-BookNow .payment-form .order-summary {
    padding: var(--bn-space-4);
    background: var(--bn-bg-muted);
    border-radius: var(--bn-radius-lg);
}

.scm-mod-BookNow .payment-form .order-summary-title {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text-secondary);
    margin-bottom: var(--bn-space-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.scm-mod-BookNow .payment-form .order-summary-rows {
    display: flex;
    flex-direction: column;
}

.scm-mod-BookNow .payment-form .order-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--bn-space-2) 0;
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .payment-form .order-discount {
    color: var(--bn-success);
}

.scm-mod-BookNow .payment-form .order-total {
    border-top: 2px solid var(--bn-border);
    margin-top: var(--bn-space-2);
    padding-top: var(--bn-space-3);
    font-size: var(--bn-text-lg);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
}

.scm-mod-BookNow .payment-form .payment-options {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-3);
}

.scm-mod-BookNow .payment-form .payment-option {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-3);
    padding: var(--bn-space-4);
    background: var(--bn-bg);
    border: 2px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    cursor: pointer;
    transition: border-color var(--bn-transition-fast);
}

.scm-mod-BookNow .payment-form .payment-option:has(input:checked) {
    border-color: var(--bn-accent);
    background: var(--bn-accent-soft);
}

.scm-mod-BookNow .payment-form .payment-option input[type="radio"] {
    width: 20px;
    height: 20px;
    margin-top: 2px;
    accent-color: var(--bn-accent);
}

.scm-mod-BookNow .payment-form .option-content {
    flex: 1;
}

.scm-mod-BookNow .payment-form .option-label {
    display: block;
    font-size: var(--bn-text-base);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text);
}

.scm-mod-BookNow .payment-form .option-amount {
    display: block;
    font-size: var(--bn-text-lg);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-accent);
    margin: var(--bn-space-1) 0;
}

.scm-mod-BookNow .payment-form .option-note {
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .payment-form .stripe-card-container {
    padding: var(--bn-space-4);
    background: var(--bn-bg);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    min-height: 48px;
}

.scm-mod-BookNow .payment-form .card-error {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    padding: var(--bn-space-3);
    background: var(--bn-error-soft);
    border-radius: var(--bn-radius-md);
    color: var(--bn-error);
    font-size: var(--bn-text-sm);
}

.scm-mod-BookNow .payment-form .payment-security {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--bn-space-2);
    font-size: var(--bn-text-xs);
    color: var(--bn-text-tertiary);
}

.scm-mod-BookNow .payment-form .payment-security i {
    color: var(--bn-success);
}

/* Test payment banner */
.scm-mod-BookNow .payment-form .test-payment-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: var(--bn-radius-lg, 0.75rem);
    background: var(--bn-warning-soft, #fef3c7);
    border: 1px solid var(--bn-warning, #f59e0b);
    color: #92400e;
    font-size: 0.875rem;
    line-height: 1.5;
}

.scm-mod-BookNow .payment-form .test-payment-banner i {
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.scm-mod-BookNow .payment-form .test-payment-banner strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.125rem;
}

.scm-mod-BookNow .payment-form .test-payment-banner span {
    display: block;
    font-size: 0.8rem;
    opacity: 0.85;
}

/* Payment form - Form header */
.scm-mod-BookNow .payment-form .form-header {
    text-align: center;
    margin-bottom: var(--bn-space-2);
}

.scm-mod-BookNow .payment-form .form-header h2 {
    font-size: var(--bn-text-2xl);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text);
    margin: 0;
}

/* Payment form - Payment summary bar */
.scm-mod-BookNow .payment-form .payment-summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--bn-space-4) var(--bn-space-5);
    background: var(--bn-accent-soft);
    border: 1px solid var(--bn-accent);
    border-radius: var(--bn-radius-lg);
}

.scm-mod-BookNow .payment-form .summary-label {
    font-size: var(--bn-text-base);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text);
}

.scm-mod-BookNow .payment-form .summary-amount {
    font-size: var(--bn-text-2xl);
    font-weight: var(--bn-weight-extrabold);
    color: var(--bn-accent);
}

/* Payment form - Payment options heading */
.scm-mod-BookNow .payment-form .payment-options h4 {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--bn-space-3);
}

/* Payment form - Option header (label + amount on same row) */
.scm-mod-BookNow .payment-form .option-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--bn-space-3);
}

/* Payment form - Card details section */
.scm-mod-BookNow .payment-form .card-form {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .payment-form .card-label {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text);
}

/* Stripe card element states */
.scm-mod-BookNow .payment-form .stripe-card-container.complete {
    border-color: var(--bn-success);
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12);
}

.scm-mod-BookNow .payment-form .stripe-card-container.error {
    border-color: var(--bn-error);
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12);
}

/* Payment form - Stripe loading spinner */
.scm-mod-BookNow .payment-form .stripe-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bn-space-3);
    padding: var(--bn-space-8) 0;
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .payment-form .stripe-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--bn-border);
    border-top-color: var(--bn-accent);
    border-radius: var(--bn-radius-full);
    animation: bn-spin 0.8s linear infinite;
}

.scm-mod-BookNow .payment-form .stripe-loading p {
    font-size: var(--bn-text-sm);
    margin: 0;
}

/* Payment form - Stripe error banner */
.scm-mod-BookNow .payment-form .stripe-error-banner {
    display: flex;
    align-items: center;
    gap: var(--bn-space-3);
    padding: var(--bn-space-4);
    background: var(--bn-error-soft);
    border: 1px solid var(--bn-error);
    border-radius: var(--bn-radius-lg);
    color: var(--bn-error);
    font-size: var(--bn-text-sm);
}

.scm-mod-BookNow .payment-form .stripe-error-banner i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.scm-mod-BookNow .payment-form .stripe-error-banner .btn-retry {
    margin-left: auto;
    flex-shrink: 0;
    padding: 0.5rem 1rem;
    border: 1px solid #ef4444;
    border-radius: 0.5rem;
    background: transparent;
    background-color: transparent;
    color: #ef4444;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: background 0.1s ease-out;
}

.scm-mod-BookNow .payment-form .stripe-error-banner .btn-retry:hover {
    background: rgba(239, 68, 68, 0.08);
    background-color: rgba(239, 68, 68, 0.08);
}

/* Payment form - Terms acceptance */
.scm-mod-BookNow .payment-form .terms-acceptance {
    padding: var(--bn-space-3) 0;
}

.scm-mod-BookNow .payment-form .terms-acceptance .checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-3);
    cursor: pointer;
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
    line-height: var(--bn-leading-relaxed);
}

.scm-mod-BookNow .payment-form .terms-acceptance .checkbox-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-top: 1px;
    flex-shrink: 0;
    accent-color: var(--bn-accent);
    cursor: pointer;
}

.scm-mod-BookNow .payment-form .terms-acceptance a,
.scm-mod-BookNow .payment-form .terms-acceptance .policy-link {
    display: inline;
    color: #2563eb;
    color: var(--bn-accent, #2563eb);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
    background: none;
    background-color: transparent;
    border: none;
    padding: 0;
    margin: 0;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: none;
}

.scm-mod-BookNow .payment-form .terms-acceptance a:hover,
.scm-mod-BookNow .payment-form .terms-acceptance .policy-link:hover {
    color: #1e40af;
    color: var(--bn-accent-hover, #1e40af);
}

/* Payment form - Value Redemption (gift cards & member credits) */
.scm-mod-BookNow .payment-form .value-redemption-section {
    padding: var(--bn-space-4);
    background: var(--bn-bg-muted);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
}

.scm-mod-BookNow .payment-form .fully-covered-banner {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: var(--bn-space-4);
    background: rgba(16, 185, 129, 0.08);
    border: 2px solid var(--bn-success);
    border-radius: var(--bn-radius-lg);
    color: var(--bn-success);
}

.scm-mod-BookNow .payment-form .fully-covered-banner i {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.scm-mod-BookNow .payment-form .fully-covered-banner strong {
    display: block;
    font-weight: 700;
    margin-bottom: 0.125rem;
}

.scm-mod-BookNow .payment-form .fully-covered-banner span {
    display: block;
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
}

.scm-mod-BookNow .payment-form .partial-value-applied {
    background: rgba(16, 185, 129, 0.06);
    border-color: var(--bn-success);
}

.scm-mod-BookNow .payment-form .partial-value-applied .summary-amount {
    color: var(--bn-success);
}

/* Payment form - Cancellation policy panel */
.scm-mod-BookNow .payment-form .cancellation-policy-panel {
    background: var(--bn-bg-muted);
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    overflow: hidden;
    animation: bn-slide-down 0.25s var(--bn-ease-out);
}

@keyframes bn-slide-down {
    from {
        opacity: 0;
        max-height: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        max-height: 500px;
        transform: translateY(0);
    }
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .policy-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--bn-space-3) var(--bn-space-4);
    border-bottom: 1px solid var(--bn-border);
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .policy-header h5 {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text);
    margin: 0;
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: var(--bn-radius-md);
    background: transparent;
    color: var(--bn-text-secondary);
    cursor: pointer;
    transition: background var(--bn-transition-fast);
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .close-btn:hover {
    background: var(--bn-border);
    color: var(--bn-text);
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .policy-content {
    padding: var(--bn-space-4);
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary);
    line-height: var(--bn-leading-relaxed);
}

/* B4 — Cancellation fee schedule inside the policy panel */
.scm-mod-BookNow .payment-form .cancellation-policy-panel .policy-text {
    margin: 0 0 var(--bn-space-3) 0;
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .fee-schedule h6 {
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text);
    margin: 0 0 var(--bn-space-2) 0;
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .fee-schedule-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .fee-schedule-list li {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    padding: var(--bn-space-2) var(--bn-space-3);
    border-radius: var(--bn-radius-md);
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .fee-schedule-list li.current-tier {
    background: var(--bn-bg);
    border: 1px solid var(--bn-border);
    font-weight: var(--bn-weight-semibold);
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .tier-window {
    flex: 1;
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .tier-fee {
    white-space: nowrap;
    color: var(--bn-text);
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .tier-fee.free {
    color: var(--bn-success);
    font-weight: var(--bn-weight-semibold);
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .tier-now-badge {
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--bn-primary, #0d6efd);
    background: color-mix(in srgb, var(--bn-primary, #0d6efd) 12%, transparent);
    border-radius: 9999px;
    padding: 0.1rem 0.5rem;
}

.scm-mod-BookNow .payment-form .cancellation-policy-panel .fee-schedule-free {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
    color: var(--bn-success);
    font-weight: var(--bn-weight-medium);
}

/* Payment form - Primary action button (Pay / Complete Test Booking) */
.scm-mod-BookNow .payment-form .btn-pay {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 56px;
    padding: 0 2rem;
    border: none;
    border-radius: 9999px;
    background: #2563eb;
    background: var(--bn-accent, #2563eb);
    color: #ffffff;
    color: var(--bn-on-accent, #ffffff);
    font-size: 1.125rem;
    font-size: var(--bn-text-lg, 1.125rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    transition:
        background 0.1s ease-out,
        box-shadow 0.2s ease-out,
        transform 0.1s ease-out;
}

.scm-mod-BookNow .payment-form .btn-pay:hover:not(:disabled) {
    background: #1e40af;
    background: var(--bn-accent-hover, #1e40af);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04), 0 0 0 4px rgba(37,99,235,0.25);
}

.scm-mod-BookNow .payment-form .btn-pay:active:not(:disabled) {
    background: #1e3a8a;
    background: var(--bn-accent-active, #1e3a8a);
    transform: scale(0.98);
}

.scm-mod-BookNow .payment-form .btn-pay:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    box-shadow: none;
}

.scm-mod-BookNow .payment-form .btn-pay .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: #fff;
    border-radius: 9999px;
    animation: bn-spin 0.8s linear infinite;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 18: CONFIRMATION PAGE
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow .booking-confirmation {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1rem;
    gap: 1.5rem;
    max-width: 480px;
    margin: 0 auto;
}

/* Success icon — animated entrance */
.scm-mod-BookNow .booking-confirmation .confirmation-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.scm-mod-BookNow .booking-confirmation .success-icon {
    width: 88px;
    height: 88px;
    border-radius: 9999px;
    background: #ecfdf5;
    background: var(--bn-success-soft, #ecfdf5);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: bn-success-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes bn-success-pop {
    0% { transform: scale(0); opacity: 0; }
    60% { transform: scale(1.15); }
    100% { transform: scale(1); opacity: 1; }
}

.scm-mod-BookNow .booking-confirmation .success-icon i {
    font-size: 2.75rem;
    color: #10b981;
    color: var(--bn-success, #10b981);
}

.scm-mod-BookNow .booking-confirmation h1 {
    font-size: 1.875rem;
    font-weight: 800;
    color: #0f172a;
    color: var(--bn-text, #0f172a);
    margin: 0;
    line-height: 1.25;
}

.scm-mod-BookNow .booking-confirmation .confirmation-code {
    font-size: 1rem;
    color: #475569;
    color: var(--bn-text-secondary, #475569);
    margin: 0;
}

.scm-mod-BookNow .booking-confirmation .confirmation-code strong {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #f8fafc;
    background: var(--bn-bg-muted, #f8fafc);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: 0.5rem;
    font-size: 1.125rem;
    font-weight: 800;
    color: #0f172a;
    color: var(--bn-text, #0f172a);
    letter-spacing: 0.025em;
    font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
    margin-left: 0.5rem;
}

/* Confirmation email message */
.scm-mod-BookNow .booking-confirmation .confirmation-message {
    width: 100%;
    padding: 1rem;
    background: #eff6ff;
    background: var(--bn-info-soft, #eff6ff);
    border: 1px solid rgba(59, 130, 246, 0.2);
    border-radius: 0.75rem;
}

.scm-mod-BookNow .booking-confirmation .confirmation-message p {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #0f172a;
    color: var(--bn-text, #0f172a);
    margin: 0;
}

.scm-mod-BookNow .booking-confirmation .confirmation-message i {
    font-size: 1.1rem;
    color: #3b82f6;
    color: var(--bn-info, #3b82f6);
}

/* Warning icon variant (payment received but booking failed) */
.scm-mod-BookNow .booking-confirmation .warning-icon {
    background: var(--bn-warning-soft, #fef3c7);
}

.scm-mod-BookNow .booking-confirmation .warning-icon i {
    color: var(--bn-warning, #f59e0b);
}

/* Error alert banner for booking creation failure */
.scm-mod-BookNow .booking-confirmation .confirmation-alert-error {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bn-error-soft, #fef2f2);
    border: 1px solid var(--bn-error, #ef4444);
    border-radius: 0.75rem;
    text-align: left;
}

.scm-mod-BookNow .booking-confirmation .confirmation-alert-error > i {
    font-size: 1.25rem;
    color: var(--bn-error, #ef4444);
    flex-shrink: 0;
    margin-top: 0.125rem;
}

.scm-mod-BookNow .booking-confirmation .confirmation-alert-error p {
    font-size: 0.875rem;
    color: #991b1b;
    line-height: 1.625;
    margin: 0 0 0.375rem 0;
}

.scm-mod-BookNow .booking-confirmation .confirmation-alert-error p:last-child {
    margin-bottom: 0;
}

.scm-mod-BookNow .booking-confirmation .confirmation-alert-error a {
    color: var(--bn-error, #ef4444);
    font-weight: 600;
    text-decoration: underline;
}

/* Booking details card */
.scm-mod-BookNow .booking-confirmation .booking-details {
    width: 100%;
    background: #ffffff;
    background: var(--bn-bg, #ffffff);
    border: 1px solid #e2e8f0;
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: 1rem;
    box-shadow: 0 0 0 1px rgba(226, 232, 240, 0.5), 0 1px 3px rgba(0, 0, 0, 0.04), 0 4px 12px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    text-align: left;
}

.scm-mod-BookNow .booking-confirmation .booking-details h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: #475569;
    color: var(--bn-text-secondary, #475569);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1rem 1.25rem 0.5rem;
    margin: 0;
}

.scm-mod-BookNow .booking-confirmation .detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1.25rem;
    border-top: 1px solid #e2e8f0;
    border-top: 1px solid var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .booking-confirmation .detail-row:first-of-type {
    border-top: none;
}

.scm-mod-BookNow .booking-confirmation .detail-label {
    font-size: 0.875rem;
    color: #475569;
    color: var(--bn-text-secondary, #475569);
    font-weight: 500;
}

.scm-mod-BookNow .booking-confirmation .detail-value {
    font-size: 0.875rem;
    color: #0f172a;
    color: var(--bn-text, #0f172a);
    font-weight: 600;
    text-align: right;
}

/* Waiver reminder card */
.scm-mod-BookNow .booking-confirmation .waiver-reminder {
    width: 100%;
    background: #ecfdf5;
    background: var(--bn-success-soft, #ecfdf5);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 1rem;
    padding: 1.25rem;
    text-align: left;
}

.scm-mod-BookNow .booking-confirmation .waiver-reminder h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    color: #10b981;
    color: var(--bn-success, #10b981);
    margin: 0 0 0.5rem 0;
}

.scm-mod-BookNow .booking-confirmation .waiver-reminder h3 i {
    font-size: 1.1rem;
}

.scm-mod-BookNow .booking-confirmation .waiver-reminder > p {
    font-size: 0.875rem;
    color: #475569;
    color: var(--bn-text-secondary, #475569);
    margin: 0 0 0.75rem 0;
    line-height: 1.625;
}

.scm-mod-BookNow .booking-confirmation .waiver-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.scm-mod-BookNow .booking-confirmation .waiver-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: #0f172a;
    color: var(--bn-text, #0f172a);
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 0.5rem;
}

.scm-mod-BookNow .booking-confirmation .waiver-list li i {
    color: #10b981;
    color: var(--bn-success, #10b981);
    flex-shrink: 0;
}

/* U2 — "Sign for your kids now" guardian CTA card */
.scm-mod-BookNow .booking-confirmation .waiver-reminder.minor-sign-now {
    background: #fffbeb;
    background: var(--bn-warning-soft, #fffbeb);
    border-color: rgba(245, 158, 11, 0.25);
}

.scm-mod-BookNow .booking-confirmation .waiver-reminder.minor-sign-now h3 {
    color: #b45309;
    color: var(--bn-warning-strong, #b45309);
}

.scm-mod-BookNow .booking-confirmation .waiver-reminder.minor-sign-now .waiver-list li i {
    color: #b45309;
    color: var(--bn-warning-strong, #b45309);
}

.scm-mod-BookNow .booking-confirmation .waiver-reminder.minor-sign-now button {
    margin-top: 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* U2 — minor badge + expectation hint on the participants step */
.scm-mod-BookNow .participant-list .participant-minor-hint {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.375rem;
    flex-wrap: wrap;
}

/* What's Next — numbered step list */
.scm-mod-BookNow .booking-confirmation .next-steps {
    width: 100%;
    text-align: left;
}

.scm-mod-BookNow .booking-confirmation .next-steps h3 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #0f172a;
    color: var(--bn-text, #0f172a);
    margin: 0 0 1rem 0;
    text-align: center;
}

.scm-mod-BookNow .booking-confirmation .steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.scm-mod-BookNow .booking-confirmation .steps-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.75rem;
    transition: background 0.1s ease-out;
}

.scm-mod-BookNow .booking-confirmation .steps-list li:hover {
    background: #f8fafc;
    background: var(--bn-bg-muted, #f8fafc);
}

.scm-mod-BookNow .booking-confirmation .step-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
}

.scm-mod-BookNow .booking-confirmation .step-icon i {
    font-size: 1.75rem;
    color: #2563eb;
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .booking-confirmation .step-content {
    flex: 1;
    min-width: 0;
}

.scm-mod-BookNow .booking-confirmation .step-content strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: #0f172a;
    color: var(--bn-text, #0f172a);
    margin-bottom: 0.25rem;
}

.scm-mod-BookNow .booking-confirmation .step-content p {
    font-size: 0.875rem;
    color: #475569;
    color: var(--bn-text-secondary, #475569);
    margin: 0;
    line-height: 1.625;
}

/* Action buttons — Add to Calendar / Share */
.scm-mod-BookNow .booking-confirmation .confirmation-actions {
    display: flex;
    gap: 0.75rem;
    width: 100%;
}

.scm-mod-BookNow .booking-confirmation .btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    flex: 1;
    height: 48px;
    padding: 0 1rem;
    border: 1px solid #e2e8f0;
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: 0.75rem;
    background: #ffffff;
    background: var(--bn-bg, #ffffff);
    color: #0f172a;
    color: var(--bn-text, #0f172a);
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
    transition:
        background 0.1s ease-out,
        border-color 0.1s ease-out,
        box-shadow 0.1s ease-out,
        transform 0.1s ease-out;
}

.scm-mod-BookNow .booking-confirmation .btn-secondary:hover {
    background: #f8fafc;
    background: var(--bn-bg-muted, #f8fafc);
    border-color: #93c5fd;
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
}

.scm-mod-BookNow .booking-confirmation .btn-secondary:active {
    transform: scale(0.98);
}

.scm-mod-BookNow .booking-confirmation .btn-secondary i {
    font-size: 1.1rem;
    color: #2563eb;
    color: var(--bn-accent, #2563eb);
}

/* Confirmation footer */
.scm-mod-BookNow .booking-confirmation .confirmation-footer {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding-top: 1rem;
    border-top: 1px solid #e2e8f0;
    border-top: 1px solid var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .booking-confirmation .confirmation-footer .btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    height: 56px;
    padding: 0 2rem;
    border: none;
    border-radius: 9999px;
    background: #2563eb;
    background: var(--bn-accent, #2563eb);
    color: #ffffff;
    color: var(--bn-on-accent, #ffffff);
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    cursor: pointer;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -1px rgba(0,0,0,0.04);
    transition:
        background 0.1s ease-out,
        box-shadow 0.2s ease-out,
        transform 0.1s ease-out;
}

.scm-mod-BookNow .booking-confirmation .confirmation-footer .btn-primary:hover {
    background: #1e40af;
    background: var(--bn-accent-hover, #1e40af);
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -2px rgba(0,0,0,0.04), 0 0 0 4px rgba(37,99,235,0.25);
}

.scm-mod-BookNow .booking-confirmation .confirmation-footer .btn-primary:active {
    background: #1e3a8a;
    background: var(--bn-accent-active, #1e3a8a);
    transform: scale(0.98);
}

.scm-mod-BookNow .booking-confirmation .contact-info {
    font-size: 0.875rem;
    color: #94a3b8;
    color: var(--bn-text-tertiary, #94a3b8);
    margin: 0;
}

.scm-mod-BookNow .booking-confirmation .contact-info a {
    color: #2563eb;
    color: var(--bn-accent, #2563eb);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.scm-mod-BookNow .booking-confirmation .contact-info a:hover {
    color: #1e40af;
    color: var(--bn-accent-hover, #1e40af);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 19: RESPONSIVE ADJUSTMENTS
   ??????????????????????????????????????????????????????????????????????????? */

/* The shell, the action bar and the screens size themselves from the module's own width (container queries in
   sections 4-7 and 22); only the card padding still follows the window. */
@media (min-width: 600px) {
    .scm-mod-BookNow {
        --bn-content-padding: var(--bn-space-6);
    }
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 20: SIZE VARIANTS
   ??????????????????????????????????????????????????????????????????????????? */

.scm-mod-BookNow.scm-mod-compact {
    --bn-max-width: 440px;
    --bn-content-padding: var(--bn-space-3);
    --bn-card-padding: var(--bn-space-4);
}

.scm-mod-BookNow.scm-mod-large {
    --bn-max-width: 640px;
}

.scm-mod-BookNow.scm-mod-fullheight {
    min-height: 100vh;
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 21: MODE VARIANTS
   ??????????????????????????????????????????????????????????????????????????? */

/* Widget mode - compact floating element */
.scm-mod-BookNow.booknow-widget {
    --bn-max-width: 400px;
    border-radius: var(--bn-radius-2xl);
    box-shadow: var(--bn-shadow-2xl);
    overflow: hidden;
}

.scm-mod-BookNow.booknow-widget .booknow-header,
.scm-mod-BookNow.booknow-widget .booknow-footer {
    position: relative;
}

/* Quick mode - streamlined single booking */
.scm-mod-BookNow.booknow-quick .category-tiles {
    display: none;
}

/* ---------------------------------------------------------------------------
   SECTION 21b: REQUIREMENTS STEP ("Before you race")
   Surfaces resolved booking requirements (waiver / safety video / eligibility)
   and captures the explicit acknowledgment before participant entry.
   --------------------------------------------------------------------------- */

.scm-mod-BookNow .requirements-step {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-6);
}

.scm-mod-BookNow .requirements-header {
    text-align: center;
}

.scm-mod-BookNow .requirements-header h2 {
    font-size: var(--bn-text-2xl);
    font-weight: var(--bn-weight-bold);
    color: var(--bn-text, #0f172a);
    margin: 0 0 var(--bn-space-2);
}

.scm-mod-BookNow .requirements-header p {
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary, #475569);
    margin: 0;
    max-width: 44ch;
    margin-inline: auto;
    line-height: var(--bn-leading-normal);
}

/* Empty state -- nothing extra required */
.scm-mod-BookNow .requirements-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bn-space-3);
    padding: var(--bn-space-8) var(--bn-space-4);
    background: var(--bn-success-soft, #ecfdf5);
    border: 1px solid color-mix(in srgb, var(--bn-success, #10b981) 25%, transparent);
    border-radius: var(--bn-radius-lg);
    text-align: center;
}

.scm-mod-BookNow .requirements-empty i {
    font-size: var(--bn-text-3xl);
    color: var(--bn-success, #10b981);
    line-height: 1;
}

.scm-mod-BookNow .requirements-empty p {
    margin: 0;
    font-size: var(--bn-text-base);
    font-weight: var(--bn-weight-medium);
    color: var(--bn-text, #0f172a);
}

/* Requirement cards */
.scm-mod-BookNow .requirement-cards {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4);
}

.scm-mod-BookNow .requirement-card {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-3);
    padding: var(--bn-card-padding);
    background: var(--bn-bg, #ffffff);
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: var(--bn-radius-lg);
    box-shadow: var(--bn-shadow-sm);
}

.scm-mod-BookNow .requirement-card-header {
    display: flex;
    align-items: center;
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .requirement-title {
    font-size: var(--bn-text-lg);
    font-weight: var(--bn-weight-semibold);
    color: var(--bn-text, #0f172a);
    line-height: var(--bn-leading-snug);
}

.scm-mod-BookNow .requirement-notes {
    margin: 0;
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary, #475569);
    line-height: var(--bn-leading-normal);
}

/* Requirement badges (waiver / safety video) */
.scm-mod-BookNow .requirement-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .requirement-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--bn-space-1);
    padding: var(--bn-space-1) var(--bn-space-3);
    border-radius: var(--bn-radius-full);
    font-size: var(--bn-text-xs);
    font-weight: var(--bn-weight-semibold);
    line-height: var(--bn-leading-tight);
    white-space: nowrap;
}

.scm-mod-BookNow .requirement-badge i {
    font-size: var(--bn-text-sm);
    line-height: 1;
}

.scm-mod-BookNow .requirement-badge--waiver {
    background: var(--bn-info-soft, #eff6ff);
    color: var(--bn-accent-hover, #1e40af);
}

.scm-mod-BookNow .requirement-badge--video {
    background: var(--bn-warning-soft, #fffbeb);
    color: #b45309;
}

.scm-mod-BookNow .requirement-badge--fitting {
    background: var(--bn-success-soft, #ecfdf5);
    color: #047857;
}

/* Inline actions -- watch video / hints */
.scm-mod-BookNow .requirement-actions {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-2);
}

.scm-mod-BookNow .requirement-link {
    display: inline-flex;
    align-items: center;
    gap: var(--bn-space-2);
    align-self: flex-start;
    padding: var(--bn-space-2) var(--bn-space-4);
    background: var(--bn-accent, #2563eb);
    color: var(--bn-on-accent, #ffffff);
    border-radius: var(--bn-radius-md);
    font-size: var(--bn-text-sm);
    font-weight: var(--bn-weight-semibold);
    text-decoration: none;
    transition: background-color 0.15s ease, transform 0.15s ease;
}

.scm-mod-BookNow .requirement-link:hover {
    background: var(--bn-accent-hover, #1e40af);
    color: var(--bn-on-accent, #ffffff);
    text-decoration: none;
}

.scm-mod-BookNow .requirement-link:active {
    transform: translateY(1px);
}

.scm-mod-BookNow .requirement-link i {
    font-size: var(--bn-text-base);
    line-height: 1;
}

.scm-mod-BookNow .requirement-hint {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-2);
    margin: 0;
    padding: var(--bn-space-3);
    background: var(--bn-bg-muted, #f8fafc);
    border-radius: var(--bn-radius-md);
    font-size: var(--bn-text-sm);
    color: var(--bn-text-secondary, #475569);
    line-height: var(--bn-leading-normal);
}

.scm-mod-BookNow .requirement-hint i {
    flex-shrink: 0;
    margin-top: 0.15em;
    color: var(--bn-info, #3b82f6);
}

/* Acknowledgment row */
.scm-mod-BookNow .requirements-ack {
    display: flex;
    align-items: flex-start;
    gap: var(--bn-space-3);
    padding: var(--bn-space-4);
    background: var(--bn-accent-soft, #eff6ff);
    border: 1px solid color-mix(in srgb, var(--bn-accent, #2563eb) 20%, transparent);
    border-radius: var(--bn-radius-lg);
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.scm-mod-BookNow .requirements-ack:hover {
    border-color: var(--bn-border-hover, #93c5fd);
}

.scm-mod-BookNow .requirements-ack input[type="checkbox"] {
    flex-shrink: 0;
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
    margin-top: 0.1em;
    accent-color: var(--bn-accent, #2563eb);
    cursor: pointer;
}

.scm-mod-BookNow .requirements-ack span {
    font-size: var(--bn-text-sm);
    color: var(--bn-text, #0f172a);
    line-height: var(--bn-leading-normal);
}

/* ???????????????????????????????????????????????????????????????????????????
   SECTION 22: ACCESSIBILITY & DARK MODE
   ??????????????????????????????????????????????????????????????????????????? */

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .scm-mod-BookNow *,
    .scm-mod-BookNow *::before,
    .scm-mod-BookNow *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* High contrast mode adjustments */
@media (prefers-contrast: high) {
    .scm-mod-BookNow {
        --bn-border: currentColor;
    }
    
    .scm-mod-BookNow .booknow-footer .btn-continue {
        border: 2px solid var(--bn-on-accent);
    }
}

/* Focus visible for keyboard navigation */
.scm-mod-BookNow :focus-visible {
    outline: 2px solid var(--bn-accent);
    outline-offset: 2px;
}

.scm-mod-BookNow button:focus:not(:focus-visible) {
    outline: none;
}

/* ─────────────────────────────────────────────────────────────────────────────
   In-checkout pass offer

   A decision, so it reads as one: a real checkbox with a large hit area, the
   saving stated in the headline, and the arithmetic underneath. Deliberately
   NOT styled as a banner or an ad — it changes what the customer pays, and
   anything that looks like marketing gets skimmed past.
   ───────────────────────────────────────────────────────────────────────────── */
.scm-mod-BookNow .payment-form .pass-offer {
    border: 1px solid var(--bn-border);
    border-radius: var(--bn-radius-lg);
    background: var(--bn-bg-muted);
    margin: 1rem 0;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.scm-mod-BookNow .payment-form .pass-offer:hover {
    border-color: var(--bn-success);
}

.scm-mod-BookNow .payment-form .pass-offer-accepted {
    border-color: var(--bn-success);
    background: rgba(16, 185, 129, 0.06);
}

/* The whole row is the label, so the entire block is clickable — a 16px
   checkbox is a poor target on a phone. */
.scm-mod-BookNow .payment-form .pass-offer-main {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    cursor: pointer;
    margin: 0;
}

.scm-mod-BookNow .payment-form .pass-offer-main input[type="checkbox"] {
    flex: 0 0 auto;
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.15rem;
    cursor: pointer;
    accent-color: var(--bn-success);
}

.scm-mod-BookNow .payment-form .pass-offer-body {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.scm-mod-BookNow .payment-form .pass-offer-headline {
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--bn-text);
}

.scm-mod-BookNow .payment-form .pass-offer-headline strong {
    color: var(--bn-success);
}

.scm-mod-BookNow .payment-form .pass-offer-detail {
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--bn-text-muted);
}

/* The account note. Appears only once accepted, because that is the moment it
   becomes true — showing it up front would read as a condition of looking. */
.scm-mod-BookNow .payment-form .pass-offer-note {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    padding: 0 1rem 0.9rem 3rem;
    font-size: 0.82rem;
    line-height: 1.4;
    color: var(--bn-text-muted);
}

.scm-mod-BookNow .payment-form .pass-offer-note i {
    margin-top: 0.1rem;
    color: var(--bn-success);
}

@media (max-width: 480px) {
    .scm-mod-BookNow .payment-form .pass-offer-note {
        padding-left: 1rem;
    }
}

/* ── Confirmation: what became of the pass ───────────────────────────────── */
.scm-mod-BookNow .booking-confirmation .upsell-result {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
    margin: 1rem 0;
    border-radius: var(--bn-radius-lg);
    border: 1px solid var(--bn-border);
}

.scm-mod-BookNow .booking-confirmation .upsell-result div {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    min-width: 0;
}

.scm-mod-BookNow .booking-confirmation .upsell-result span {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--bn-text-muted);
}

.scm-mod-BookNow .booking-confirmation .upsell-result i {
    font-size: 1.15rem;
    margin-top: 0.1rem;
}

.scm-mod-BookNow .booking-confirmation .upsell-result-ok {
    background: rgba(16, 185, 129, 0.06);
    border-color: var(--bn-success);
}

.scm-mod-BookNow .booking-confirmation .upsell-result-ok i {
    color: var(--bn-success);
}

/* Amber, not red: the booking succeeded. Red here would read as "your booking
   failed", which is the one thing this must never say. */
.scm-mod-BookNow .booking-confirmation .upsell-result-warn {
    background: rgba(245, 158, 11, 0.07);
    border-color: var(--bn-warning, #f59e0b);
}

.scm-mod-BookNow .booking-confirmation .upsell-result-warn i {
    color: var(--bn-warning, #f59e0b);
}

/* Tax a tax-inclusive venue's prices already contain. Deliberately NOT an .order-row: it
   describes the figures beside it rather than joining them, and a row that lines up with the
   Subtotal and Total reads as another addend. */
.scm-mod-BookNow .payment-form .order-summary-tax-note {
    margin: 0.125rem 0 0;
    font-size: var(--bn-text-xs, 0.75rem);
    color: var(--bn-text-secondary, #64748b);
}

/* Said inside the order summary, where the number it qualifies is.

   A customer with a pass in their basket sees "Total for this booking" here and a basket
   badge showing a different figure a few centimetres away. Without this line the two
   numbers just disagree; with it, they are two true statements about different things. */
.scm-mod-BookNow .payment-form .order-summary-basket-note {
    display: flex;
    align-items: flex-start;
    gap: 0.4375rem;
    margin: 0.75rem 0 0;
    padding-top: 0.75rem;
    border-top: 1px solid var(--bn-border, #e2e8f0);
    font-size: var(--bn-text-sm, 0.875rem);
    line-height: 1.45;
    color: var(--bn-text-secondary, #64748b);
}

.scm-mod-BookNow .payment-form .order-summary-basket-note i {
    flex: 0 0 auto;
    margin-top: 0.1rem;
}

/* ── C8: the hand-off step ───────────────────────────────────────────────────
   What the payment step became once /cart took over the money. Deliberately
   sparse — there is one thing to do here and no figures to re-state, because
   restating a total the next page will recompute is how the two disagree. */

.scm-mod-BookNow .booknow-handoff-step {
    padding: var(--bn-space-6, 1.5rem) 0;
    text-align: center;
}

.scm-mod-BookNow .booknow-handoff-step h2 {
    font-size: var(--bn-text-xl, 1.25rem);
    font-weight: var(--bn-weight-semibold, 600);
    margin-bottom: var(--bn-space-2, 0.5rem);
}

.scm-mod-BookNow .booknow-handoff-step p {
    max-width: 34rem;
    margin: 0 auto var(--bn-space-5, 1.25rem);
    color: var(--bn-text-secondary, #64748b);
    line-height: 1.5;
}

.scm-mod-BookNow .booknow-handoff-step .btn {
    min-width: 14rem;
}

/* The figure the customer is about to pay, shown ON the hand-off so applying a promo
   code below visibly changes something. */
.scm-mod-BookNow .booknow-handoff-total {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: var(--bn-space-2, 0.5rem);
    font-size: var(--bn-text-lg, 1.125rem);
}

.scm-mod-BookNow .booknow-handoff-total strong {
    font-size: var(--bn-text-xl, 1.25rem);
}

.scm-mod-BookNow .booknow-handoff-discount {
    font-size: var(--bn-text-sm, 0.875rem);
    color: var(--bn-success, #16a34a);
}

/* The reservation's deadline, for a returning customer whose booking is already held —
   the same figure /cart shows as "We're holding your slot until …". Quiet, not a warning:
   it is a promise, not a countdown. */
.scm-mod-BookNow .booknow-handoff-hold {
    display: inline-flex;
    align-items: center;
    gap: var(--bn-space-2, 0.5rem);
    margin: 0 auto var(--bn-space-5, 1.25rem);
    font-size: var(--bn-text-sm, 0.875rem);
    color: var(--bn-text-secondary, #64748b);
}

/* The promo block is centred like the rest of the hand-off; the entry row itself
   stays compact rather than stretching to the step's width. */
.scm-mod-BookNow .booknow-handoff-promo {
    max-width: 22rem;
    margin: 0 auto var(--bn-space-5, 1.25rem);
}

/* A refusal the customer can act on. Left-aligned and full width inside the
   hand-off step, which is otherwise centred — a wall of centred prose is hard to
   read, and this one is usually a sentence telling them exactly what to change. */
.scm-mod-BookNow .booknow-handoff-error {
    max-width: 34rem;
    margin: 0 auto var(--bn-space-5, 1.25rem);
    text-align: left;
    line-height: 1.5;
}

/* The hand-off's buttons: the primary ("Review basket & pay" / "Try again") and, under it,
   the way back to the review. Stacked and centred like the rest of the step; the way back
   is quieter than the primary but never hidden — a returning customer who came back to
   change something must not be left with only "Start over" (review P1-10). */
.scm-mod-BookNow .booknow-handoff-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bn-space-3, 0.75rem);
}

.scm-mod-BookNow .booknow-handoff-review {
    min-width: 0;
    color: var(--bn-text-secondary, #64748b);
    text-decoration: underline;
}

/* ── T1: the review step is the checkout ─────────────────────────────────────
   Under the reviewed items: what the footer's "Continue to checkout" is about to
   do (hold the booking, pay on the next page), the hold deadline once a
   reservation exists, and the last attempt's refusal in place — so the customer
   fixes the booking right above it instead of on another screen. */
.scm-mod-BookNow .booknow-review-handoff {
    margin-top: var(--bn-space-4, 1rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bn-space-2, 0.5rem);
    text-align: center;
}

.scm-mod-BookNow .booknow-review-handoff .booknow-handoff-hold {
    margin: 0;
}

.scm-mod-BookNow .booknow-review-next {
    max-width: 34rem;
    margin: 0;
    color: var(--bn-text-secondary, #64748b);
    font-size: var(--bn-text-sm, 0.875rem);
    line-height: 1.5;
}

/* The in-place refusal reads left to right like the alert banners above the
   step; full width, because it usually quotes the server's own sentence. */
.scm-mod-BookNow .booknow-review-error {
    width: 100%;
    text-align: left;
    align-items: flex-start;
}

.scm-mod-BookNow .booknow-review-error strong {
    display: block;
    margin-bottom: 0.25rem;
}

/* Height as feet AND inches at imperial venues.

   Two narrow boxes rather than one wide one: a guest knows their child is 4 foot 3,
   not 52 inches, and asking in a unit they have to convert from is how a wrong height
   gets entered — which then decides which kart a child may drive. */
.scm-mod-BookNow .input-with-unit--split {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.scm-mod-BookNow .input-with-unit--split .form-input {
    width: 4.5rem;
    min-width: 0;
    text-align: right;
}

.scm-mod-BookNow .input-with-unit--split .unit {
    flex: 0 0 auto;
    margin-right: 0.375rem;
    color: var(--bn-text-secondary, #64748b);
    font-size: var(--bn-text-sm, 0.875rem);
}

/* ─────────────────────────────────────────────────────────────────────────────
   Prices before review (2026-10-07): standard prices from the booking engine, before
   tax and member discounts, beside each heat and time slot, and "from" prices before.
   Gated by the module's Show Pricing setting.
   ───────────────────────────────────────────────────────────────────────────── */
.scm-mod-BookNow .date-picker .picker-price-hint {
    margin: 0.25rem 0 0;
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .kart-class-price {
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .heat-price {
    font-size: var(--bn-text-xs, 0.75rem);
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text-secondary, #475569);
    white-space: nowrap;
}

.scm-mod-BookNow .heat-card.selected .heat-price {
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .heat-selection-price {
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .heat-picker .heat-price-note,
.scm-mod-BookNow .time-slot-picker .slot-price-note {
    margin: 0.75rem 0 0;
    font-size: var(--bn-text-xs, 0.75rem);
    color: var(--bn-text-tertiary, #94a3b8);
    text-align: center;
}

.scm-mod-BookNow .time-slot-picker .slot-price {
    font-size: var(--bn-text-sm, 0.875rem);
    font-weight: var(--bn-weight-semibold, 600);
    color: var(--bn-text-secondary, #475569);
    line-height: 1.2;
}

.scm-mod-BookNow .time-slot-picker .time-slot.selected .slot-price {
    color: var(--bn-accent, #2563eb);
}

/* ───────────────────────────────────────────────────────────────────────────
   SECTION 22: BOOK NOW SCREENS (3.99.67, laid out 3.99.68): what to book, how many and how long on one screen; the day
   and the time on another. Each picker on a shared screen is a section rather than a page, so its heading is a size
   smaller and a rule sets it apart from the one before.
   ─────────────────────────────────────────────────────────────────────────── */

.scm-mod-BookNow .booknow-screen {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.scm-mod-BookNow .booknow-screen .picker-header h2,
.scm-mod-BookNow .booknow-screen .selector-header h2,
.scm-mod-BookNow .booknow-screen .step-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.25rem;
    line-height: 1.3;
}

.scm-mod-BookNow .booknow-screen .picker-header p,
.scm-mod-BookNow .booknow-screen .selector-header p {
    margin: 0;
}

/* A picker with nothing to ask (the venue's one experience, chosen for the guest) renders an empty element: it takes
   no gap, and the rule goes only between sections that show something. */
.scm-mod-BookNow .booknow-screen > :empty {
    display: none;
}

.scm-mod-BookNow .booknow-screen--guests > :not(:empty) ~ :not(.booknow-passes) {
    padding-top: 1.75rem;
    border-top: 1px solid var(--bn-border, #e2e8f0);
}

/* ─── The guest screen ─── */

/* Kart classes side by side once there is room for two readable cards; the venue's one class stays one card wide. */
@container booknow (min-width: 700px) {
    .scm-mod-BookNow .kart-class-picker:not([data-state="single"]) .kart-class-grid,
    .scm-mod-BookNow .session-type-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.75rem;
    }
}

/* A phone keeps the card's picture beside its words: stacked, an icon-only class spent 100px of height on a grey
   band. */
@container booknow (max-width: 479px) {
    .scm-mod-BookNow .kart-class-visual {
        width: 64px;
        font-size: 1.5rem;
    }

    .scm-mod-BookNow .kart-class-card {
        min-height: 88px;
    }

    .scm-mod-BookNow .kart-class-availability {
        position: absolute;
        right: 0.5rem;
        bottom: 0.5rem;
        padding: 0;
    }
}

/* The group size: a minus and a plus for exact counts beside the slider for quick ones. */
.scm-mod-BookNow .guest-count-selector .slider-container {
    gap: 1.25rem;
    padding: 1.25rem 1rem 1.5rem;
    border: 1px solid var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .guest-count-selector .slider-stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
}

.scm-mod-BookNow .guest-count-selector .slider-stepper .btn-decrement,
.scm-mod-BookNow .guest-count-selector .slider-stepper .btn-increment {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    border-width: 1.5px;
}

.scm-mod-BookNow .guest-count-selector .slider-value {
    min-width: 5.5rem;
}

.scm-mod-BookNow .guest-count-selector .guest-slider {
    max-width: 360px;
    accent-color: var(--bn-accent, #2563eb);
}

/* ─── The when screen ─── */

.scm-mod-BookNow .booknow-screen--when {
    gap: 1.5rem;
}

.scm-mod-BookNow .booknow-when-date,
.scm-mod-BookNow .booknow-when-times {
    min-width: 0;
}

.scm-mod-BookNow .booknow-when-times {
    container: bntimes / inline-size;
}

/* Side by side once the module can hold a 340px month and a column of sessions beside it. */
@container booknow (min-width: 800px) {
    .scm-mod-BookNow .booknow-screen--when {
        display: grid;
        grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
        align-items: start;
        column-gap: 2.5rem;
    }

    /* Each column reads from its own left edge. */
    .scm-mod-BookNow .booknow-screen--when .picker-header {
        text-align: left;
    }

    .scm-mod-BookNow .booknow-screen--when .heat-picker .heat-class-note {
        justify-content: flex-start;
    }

    .scm-mod-BookNow .booknow-screen--when .calendar-view {
        padding: 1rem 0.875rem 0.875rem;
        border: 1px solid var(--bn-border, #e2e8f0);
        border-radius: 1rem;
        background: var(--bn-bg, #ffffff);
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05), 0 6px 16px -8px rgba(15, 23, 42, 0.12);
    }

    .scm-mod-BookNow .booknow-when-hint {
        margin-top: 3.5rem;
    }
}

/* The month: round days, a little tighter, the chosen day filled. */
.scm-mod-BookNow .booknow-screen--when .cal-grid {
    gap: 2px;
}

.scm-mod-BookNow .booknow-screen--when .cal-cell {
    border-radius: 9999px;
    border-width: 1.5px;
}

.scm-mod-BookNow .booknow-screen--when .cal-header {
    font-size: 0.6875rem;
}

.scm-mod-BookNow .booknow-screen--when .cal-nav-title {
    font-size: 1rem;
}

.scm-mod-BookNow .booknow-when-hint {
    margin: 1.5rem 0;
    color: var(--bn-text-secondary, #475569);
    text-align: center;
}

/* Sessions: two columns of cards once the column is wide enough for both. A session's name wraps to a second line
   rather than losing its end ("Weekday Adult Open…" hid which session it was). */
@container bntimes (min-width: 600px) {
    .scm-mod-BookNow .booknow-when-times .heat-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.scm-mod-BookNow .heat-name {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 1.3;
}

.scm-mod-BookNow .heat-card .heat-info {
    padding-right: 0.25rem;
}

.scm-mod-BookNow .heat-card .heat-check {
    padding: 0 0.875rem 0 0.5rem;
}

.scm-mod-BookNow .heat-picker .heat-policy-note {
    display: flex;
    width: 100%;
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    line-height: 1.45;
}

.scm-mod-BookNow .heat-selection-summary {
    gap: 0.75rem;
    min-height: 44px;
}

.scm-mod-BookNow .heat-selection-summary[data-count="0"] {
    color: var(--bn-text-tertiary, #94a3b8);
    background: transparent;
    border-style: dashed;
}

/* ─── Table sittings ─── */

.scm-mod-BookNow .table-slot-picker {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.scm-mod-BookNow .table-slot-picker .picker-header {
    text-align: center;
}

.scm-mod-BookNow .table-slot-picker .picker-header h2 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .table-slot-picker .picker-header p {
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

@container booknow (min-width: 800px) {
    .scm-mod-BookNow .table-slot-picker .picker-header {
        text-align: left;
    }
}

.scm-mod-BookNow .table-slot-picker .slot-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(112px, 1fr));
    gap: 0.625rem;
}

.scm-mod-BookNow .table-slot-picker .slot-chip {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    min-height: 64px;
    padding: 0.625rem 0.5rem;
    border: 1.5px solid var(--bn-border, #e2e8f0);
    border-radius: 0.75rem;
    background: var(--bn-bg, #ffffff);
    color: var(--bn-text, #0f172a);
    cursor: pointer;
    transition: border-color 0.15s ease-out, background 0.15s ease-out, box-shadow 0.15s ease-out, transform 0.1s ease-out;
}

.scm-mod-BookNow .table-slot-picker .slot-chip:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.scm-mod-BookNow .table-slot-picker .slot-chip:active {
    transform: scale(0.98);
}

.scm-mod-BookNow .table-slot-picker .slot-chip--selected {
    border-color: var(--bn-accent, #2563eb);
    background: var(--bn-accent-soft, #eff6ff);
    box-shadow: 0 0 0 3px var(--bn-accent-glow, rgba(37, 99, 235, 0.25));
}

.scm-mod-BookNow .table-slot-picker .slot-chip__time {
    font-size: 1rem;
    font-weight: 700;
}

.scm-mod-BookNow .table-slot-picker .slot-chip--selected .slot-chip__time {
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .table-slot-picker .slot-chip__badge,
.scm-mod-BookNow .table-slot-picker .slot-chip__scarce {
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.45rem;
    border-radius: 9999px;
}

.scm-mod-BookNow .table-slot-picker .slot-chip__badge {
    background: var(--bn-accent-soft, #eff6ff);
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .table-slot-picker .slot-chip__scarce {
    background: var(--bn-warning-soft, #fffbeb);
    color: #b45309;
}

.scm-mod-BookNow .table-slot-picker .slot-confirm {
    margin: 0;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    background: var(--bn-bg-muted, #f8fafc);
    color: var(--bn-text-secondary, #475569);
    font-size: 0.875rem;
    text-align: center;
}

.scm-mod-BookNow .table-slot-picker .slot-loading,
.scm-mod-BookNow .table-slot-picker .slot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 2rem 1.25rem;
    border-radius: var(--bn-radius-lg, 0.75rem);
    text-align: center;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .table-slot-picker .slot-empty {
    background: var(--bn-bg-muted, #f8fafc);
    border: 1px solid var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .table-slot-picker .slot-empty i {
    font-size: 1.75rem;
    color: var(--bn-warning, #f59e0b);
}

.scm-mod-BookNow .table-slot-picker .slot-empty h4 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .table-slot-picker .slot-empty p {
    margin: 0;
    font-size: 0.875rem;
    max-width: 380px;
}

/* Passes first (module setting "ShowPasses"). */
.scm-mod-BookNow .booknow-passes {
    display: flex;
    flex-direction: column;
    gap: var(--bn-space-4, 1rem);
    padding-top: var(--bn-space-6, 1.5rem);
    border-top: 1px solid var(--bn-border, #e2e8f0);
}

.scm-mod-BookNow .booknow-passes-header h3 {
    margin: 0 0 0.25rem;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .booknow-passes-header p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .booknow-pass-cards {
    display: grid;
    gap: var(--bn-space-3, 0.75rem);
}

@media (min-width: 640px) {
    .scm-mod-BookNow .booknow-pass-cards {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.scm-mod-BookNow .booknow-pass-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--bn-space-3, 0.75rem);
    padding: var(--bn-space-4, 1rem);
    border: 1px solid var(--bn-border, #e2e8f0);
    border-radius: var(--bn-radius-lg, 0.75rem);
    background: var(--bn-bg, #ffffff);
}

.scm-mod-BookNow .booknow-pass-card.added {
    border-color: var(--bn-success, #10b981);
    background: var(--bn-success-soft, #ecfdf5);
}

.scm-mod-BookNow .booknow-pass-info {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.scm-mod-BookNow .booknow-pass-name {
    font-weight: 600;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .booknow-pass-quantity,
.scm-mod-BookNow .booknow-pass-tagline {
    font-size: 0.8125rem;
    color: var(--bn-text-secondary, #475569);
}

.scm-mod-BookNow .booknow-pass-expiry {
    font-size: 0.75rem;
    color: var(--bn-text-tertiary, #94a3b8);
}

.scm-mod-BookNow .booknow-pass-buy {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    align-items: flex-end;
    gap: var(--bn-space-2, 0.5rem);
}

.scm-mod-BookNow .booknow-pass-price {
    font-weight: 700;
    color: var(--bn-text, #0f172a);
    white-space: nowrap;
    text-align: right;
}

.scm-mod-BookNow .booknow-pass-member {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--bn-success, #10b981);
}

.scm-mod-BookNow .booknow-pass-added {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--bn-success, #10b981);
    white-space: nowrap;
}

/* The activity-type and unit pickers' heading (.step-header) had no style of its own, so it took the theme's page h2:
   left-aligned and a size larger than every other step's question. Same as the others now. */
.scm-mod-BookNow .step-header {
    margin-bottom: 1.25rem;
    text-align: center;
}

.scm-mod-BookNow .step-header h2 {
    margin: 0 0 0.25rem;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--bn-text, #0f172a);
}

.scm-mod-BookNow .step-header p,
.scm-mod-BookNow .step-header .step-subtitle {
    margin: 0;
    font-size: 0.875rem;
    color: var(--bn-text-secondary, #475569);
}

/* Packages: the heading centered like every other step's, two cards a row where there is room, and the price line
   wrapping between its parts instead of inside them ("$35.00/extra" over "guest", "plus" over "tax"). */
.scm-mod-BookNow .package-selector .picker-header {
    text-align: center;
}

.scm-mod-BookNow .package-price {
    flex-wrap: wrap;
    column-gap: 0.5rem;
    row-gap: 0.125rem;
}

.scm-mod-BookNow .package-price .price-amount,
.scm-mod-BookNow .package-price .price-note {
    white-space: nowrap;
}

@container booknow (min-width: 700px) {
    .scm-mod-BookNow .package-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1rem;
    }
}

/* A measurement with its unit (weight in lb or kg): the unit beside the box, not wrapped under it. Only the split
   feet-and-inches form had a style, so a single box took the row and its unit fell to the next line. */
.scm-mod-BookNow .input-with-unit:not(.input-with-unit--split) {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.scm-mod-BookNow .input-with-unit:not(.input-with-unit--split) .form-input {
    flex: 0 1 8rem;
    min-width: 0;
}

.scm-mod-BookNow .input-with-unit:not(.input-with-unit--split) .unit {
    flex: 0 0 auto;
    color: var(--bn-text-secondary, #64748b);
    font-size: var(--bn-text-sm, 0.875rem);
}

/* "Book now, add the others later": a real secondary button with its explanation under it, where it rendered as a
   line of plain text a guest could miss was clickable. */
.scm-mod-BookNow .defer-roster {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

.scm-mod-BookNow .btn-defer-roster {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    width: 100%;
    min-height: 48px;
    padding: 0.625rem 1rem;
    border: 1.5px solid var(--bn-border, #e2e8f0);
    border-radius: 9999px;
    background: var(--bn-bg, #ffffff);
    color: var(--bn-text, #0f172a);
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.12s ease-out, background 0.12s ease-out;
}

.scm-mod-BookNow .btn-defer-roster:hover {
    border-color: var(--bn-border-hover, #93c5fd);
    background: var(--bn-bg-muted, #f8fafc);
}

.scm-mod-BookNow .btn-defer-roster i {
    color: var(--bn-accent, #2563eb);
}

.scm-mod-BookNow .defer-roster-hint {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--bn-text-secondary, #475569);
    text-align: center;
}