/* ═══════════════════════════════════════════════════════════════
   Club Site CSS — per-club public SPA
   All colours via --club-* vars injected at runtime by club-site.js
   ═══════════════════════════════════════════════════════════════ */

/* Runtime colour tokens — defaults overridden per club via JS theme
   apply (and via the inline boot script in index.html which reads
   localStorage to skip the flash on returning visits). The defaults
   below are the FIRST-EVER-VISIT fallback only — they intentionally
   match a typical "neutral light club" so the brief pre-JS window
   doesn't flash a hard black on a light-theme club. Dark-theme clubs
   will see a brief light flash on first visit but the inline boot
   script + applyClubTheme() switch over instantly thereafter. */
:root {
    --club-accent:    #F5A623;
    --club-bg:        #fafafa;
    --club-text:      #1a1a1a;
    --club-muted:     rgba(0,0,0,0.55);
    --club-card-bg:   rgba(0,0,0,0.04);
    --club-border:    rgba(0,0,0,0.08);
    --club-hero-bg:   transparent;
    --club-nav-bg:    #ffffff;
    --club-nav-text:  #1a1a1a;
    --club-nav-muted: rgba(0,0,0,0.55);
    --club-radius:    14px;
    --club-nav-h:     64px;
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* html background pins the canvas the browser shows DURING navigation —
   browsers paint the html element's bg until the new document's body
   takes over. Without this, mobile + dark-mode browsers fall through
   to system colours and you get a flash of black. */
html {
    scroll-behavior: smooth;
    background: var(--club-bg);
}

/* ── Cross-document View Transitions ─────────────────────────────
   Modern browser-native fade between full page navigations on the
   same origin. Eliminates the "blank canvas between two HTML docs"
   flash that bare browser navigation always shows. Chrome 126+ +
   Edge ship this; Safari 18+ behind a flag; Firefox doesn't yet
   support it. Unsupported browsers just navigate normally — no JS
   intervention, graceful degradation by design. */
@view-transition {
    navigation: auto;
}
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.32s;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
::view-transition-old(root) {
    animation-name: cs-vt-out;
}
::view-transition-new(root) {
    animation-name: cs-vt-in;
}
@keyframes cs-vt-out {
    from { opacity: 1; }
    to   { opacity: 0; }
}
@keyframes cs-vt-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0s;
    }
}

body {
    background: var(--club-bg);
    color: var(--club-text);
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    /* Anchors the absolute spotlights canvas to body so it spans full doc
       height instead of just the viewport. */
    position: relative;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.hidden { display: none !important; }

/* Custom scrollbars — default browser bars read as chunky OS widgets and
   clash with the glassmorphism UI. Slim, accent-tinted thumb in both modes,
   transparent track. Firefox gets the modern properties; WebKit browsers
   get the pseudo-element rule. */
* {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--club-accent-rgb, 245, 166, 35), 0.45) transparent;
}
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: rgba(var(--club-accent-rgb, 245, 166, 35), 0.35);
    border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--club-accent-rgb, 245, 166, 35), 0.6);
}
html.night-mode * {
    scrollbar-color: rgba(var(--club-accent-rgb, 245, 166, 35), 0.55) transparent;
}
html.night-mode ::-webkit-scrollbar-thumb {
    background: rgba(var(--club-accent-rgb, 245, 166, 35), 0.45);
    box-shadow: 0 0 6px rgba(var(--club-accent-rgb, 245, 166, 35), 0.35);
}
html.night-mode ::-webkit-scrollbar-thumb:hover {
    background: rgba(var(--club-accent-rgb, 245, 166, 35), 0.7);
}

/* ── Buttons ────────────────────────────────────────────────── */
.cs-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    transition: opacity 0.18s, transform 0.18s;
    text-decoration: none;
}
.cs-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.cs-btn--accent {
    background: var(--club-accent);
    color: var(--club-accent-text, #0a0d14);
}
/* Transverse variant — swaps bg/text so the button reads on a card that is
   itself painted the accent colour. Same two colours, inverted roles.
   Set by the facility renderer when card_bg === accent_color. */
.cs-btn--accent-inverse {
    background: var(--club-accent-text, #ffffff) !important;
    color: var(--club-accent) !important;
    border: 1px solid var(--club-accent-text, #ffffff) !important;
}
.cs-btn--accent-inverse:hover {
    background: rgba(255, 255, 255, 0.92) !important;
}

/* Primary CTAs inside any club-site modal or drawer — force white text
   so they stay legible on dark accents like Eldoraigne's navy. Page-level
   .cs-btn--accent buttons (hero CTAs etc.) still use the default dark text
   which reads better on light accents. */
.cs-cart-drawer         .cs-btn--accent,
.cs-mymem-drawer        .cs-btn--accent,
#cs-checkout-modal      .cs-btn--accent,
#cs-login-modal         .cs-btn--accent,
#cs-adult-modal         .cs-btn--accent,
#cs-children-modal      .cs-btn--accent,
#cs-edit-contact-modal  .cs-btn--accent,
#cs-request-change-modal .cs-btn--accent {
    color: #ffffff;
}
.cs-cart-drawer         .cs-btn--accent i,
.cs-mymem-drawer        .cs-btn--accent i,
#cs-checkout-modal      .cs-btn--accent i,
#cs-login-modal         .cs-btn--accent i,
#cs-adult-modal         .cs-btn--accent i,
#cs-children-modal      .cs-btn--accent i,
#cs-edit-contact-modal  .cs-btn--accent i,
#cs-request-change-modal .cs-btn--accent i {
    color: #ffffff;
}
.cs-btn--outline {
    background: transparent;
    border: 1.5px solid var(--club-accent);
    color: var(--club-accent);
}
.cs-btn--ghost {
    background: var(--club-card-bg);
    color: var(--club-text);
    border: 1px solid var(--club-border);
}

/* ── Nav ────────────────────────────────────────────────────── */
.cs-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    /* Light mode: solid club nav colour (--club-nav-bg). Night-mode override
       further down swaps this for the accent top-to-bottom fade that mirrors
       the member portal header. */
    background: var(--club-nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0,0,0,0.12);
    height: var(--club-nav-h);
    color: var(--club-nav-text);
}
.cs-nav-inner {
    /* No max-width — nav stretches edge-to-edge so actions (cart, menu) hug
       the far right of the viewport, not the 1200px container edge.
       3-column grid (1fr | auto | 1fr) locks the nav links to the viewport
       centre independent of the brand / actions widths — without this the
       links appeared left-of-centre because the actions group (cart + login
       + night toggle) is wider than the brand (logo only). */
    width: 100%;
    padding: 0 28px;
    height: 100%;
    display: grid;
    /* Middle track is minmax(0, auto) — allows it to shrink below content
       width so the .cs-nav-links inside can take over with horizontal
       scroll instead of forcing the whole nav wider than the viewport. */
    grid-template-columns: 1fr minmax(0, auto) 1fr;
    align-items: center;
    gap: 20px;
    min-width: 0;
}
.cs-nav-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
    justify-self: start;
}
/* Round logo — 1:1 circle crop matching event icons */
.cs-nav-logo {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
/* Club name is redundant with the logo and the hero title — hide from nav. */
.cs-nav-name { display: none; }
.cs-nav-links {
    display: flex;
    gap: 2px;
    justify-content: center;
    flex-wrap: wrap;
    justify-self: center;
}
.cs-nav-link { flex: 0 0 auto; }
.cs-nav-link {
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--club-nav-muted);
    transition: color 0.15s, background 0.15s, text-shadow 0.2s ease;
    white-space: nowrap;
    position: relative;
}
.cs-nav-link:hover {
    color: var(--club-nav-text);
    background: transparent;
    text-shadow:
        0 0 6px var(--club-accent),
        0 0 14px var(--club-accent);
}
/* Scroll-spy active state — set from JS as the user scrolls past each
   section. Uses the accent glow + an accent underline bar to show which
   section is currently in view. */
.cs-nav-link.is-active {
    color: var(--club-nav-text);
    text-shadow:
        0 0 6px var(--club-accent),
        0 0 14px var(--club-accent);
}
.cs-nav-link.is-active::after {
    content: '';
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--club-accent);
    box-shadow: 0 0 8px var(--club-accent);
}

/* Nav action group — cart + login/user */
.cs-nav-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* ── Modern nav action buttons (login / sign-up / cart / go-to-app) ─── */

/* Shared base: glass pill */
.cs-btn--login,
.cs-btn--signup,
.cs-btn--app {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.18s cubic-bezier(0.2, 0.9, 0.3, 1.3), box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
}

/* Logged-out: glass pill with subtle border */
.cs-btn--login {
    color: var(--club-nav-text);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.05) inset, 0 2px 8px rgba(0,0,0,0.12);
}
.cs-btn--login i { font-size: 1rem; opacity: 0.85; }
.cs-btn--login:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.08) inset, 0 6px 16px rgba(0,0,0,0.2);
}
.cs-btn--login:active { transform: translateY(0); }

/* Sign Up — accent-filled pill, paired with Member Login on logged-out nav.
   Points at /#memberships so it works from any page on the club subdomain
   (including /share/* pages where there's no in-page memberships section). */
.cs-btn--signup {
    color: #ffffff;
    background: var(--club-accent);
    border: 1px solid transparent;
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 14px -4px rgba(0,0,0,0.25);
}
.cs-btn--signup i { font-size: 1rem; opacity: 0.95; }
.cs-btn--signup:hover {
    transform: translateY(-1px);
    filter: brightness(1.08);
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 22px -4px rgba(0,0,0,0.35), 0 0 0 4px rgba(var(--club-accent-rgb, 245, 166, 35), 0.2);
}
.cs-btn--signup:active { transform: translateY(0); }
@media (max-width: 768px) {
    .cs-btn--signup span { display: none; }
    .cs-btn--signup { padding: 9px 11px; }
    .cs-btn--signup i { font-size: 1.15rem; }
}

/* Logged-in: filled accent pill with avatar initial, nudged toward CTA feel */
.cs-btn--app {
    color: #ffffff;
    background: var(--club-accent);
    border: 1px solid transparent;
    padding: 5px 16px 5px 5px;
    box-shadow: 0 1px 0 rgba(255,255,255,0.25) inset, 0 4px 14px -4px rgba(0,0,0,0.25);
}
.cs-btn--app:hover {
    transform: translateY(-1px);
    box-shadow: 0 1px 0 rgba(255,255,255,0.3) inset, 0 8px 22px -4px rgba(0,0,0,0.35), 0 0 0 4px rgba(255,255,255,0.06);
    filter: brightness(1.05);
}
.cs-btn--app:active { transform: translateY(0); }
.cs-user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #ffffff;
    color: var(--club-accent);
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.cs-user-label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    gap: 1px;
}
.cs-user-greeting {
    font-size: 0.62rem;
    font-weight: 600;
    opacity: 0.7;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cs-user-action {
    font-size: 0.82rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cs-user-action i { font-size: 0.95rem; }

/* Cart button — matches the member-portal header button style: transparent
   circle, no border, soft halo shadow for popout, icon flips to accent on
   hover. Same pattern reused for the account button and theme toggle below.
   Night-mode swaps the black halo for a white one (see override further
   down) so the icon stays lifted against the dark canvas. */
.cs-cart-btn {
    position: relative;
    background: transparent;
    border: 0;
    color: var(--club-nav-text);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.15rem;
    /* Halo derived from currentColor so it auto-tracks --club-nav-text:
       white halo on dark nav backgrounds, dark halo on bright ones. No
       per-mode override needed. color-mix gives us a ~40% alpha version
       of whatever the text colour currently is. */
    box-shadow: 0 0 10px 3px color-mix(in srgb, currentColor 40%, transparent);
    transition: color 0.2s ease, transform 0.18s cubic-bezier(0.2,0.9,0.3,1.3), box-shadow 0.2s ease;
    flex-shrink: 0;
}
.cs-cart-btn:hover {
    color: var(--club-accent);
    transform: translateY(-1px);
}
.cs-cart-btn:active { transform: translateY(0); }
.cs-cart-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ffffff;
    color: var(--club-accent);
    border-radius: 999px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    font-size: 0.7rem;
    font-weight: 800;
    display: none;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border: 2px solid var(--club-nav-bg, #0a0d14);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    animation: cs-cart-badge-pop 0.35s cubic-bezier(0.2,0.9,0.3,1.5);
}
@keyframes cs-cart-badge-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Hidden helper (reused from existing class but keep local) */
.cs-btn--login.hidden,
.cs-btn--app.hidden,
.cs-nav-user-btn.hidden { display: none !important; }

/* Logged-in user menu button — same burger-style index icon we use for the
   mobile menu, just reused for the "open My Memberships" action. Opens the
   drawer; hero CTA remains the primary "go to app" entry point. Pure icon
   on the far right of the nav bar. */
.cs-nav-user-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 10px 3px color-mix(in srgb, currentColor 40%, transparent);
    transition: color 0.2s ease, transform 0.18s;
    flex-shrink: 0;
}
.cs-nav-user-btn:hover  { color: var(--club-accent); transform: translateY(-1px); }
.cs-nav-user-btn:active { transform: translateY(0); }
.cs-nav-user-icon {
    font-size: 1.9rem;
    color: #ffffff;
    line-height: 1;
}
/* Screen-reader text — the button still carries the name for accessibility
   without adding a visible label */
.cs-nav-user-name-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.cs-nav-hamburger {
    display: none;
    background: none;
    border: none;
    color: var(--club-nav-text);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 6px;
}
.cs-nav-mobile {
    position: absolute;
    top: var(--club-nav-h);
    left: 0; right: 0;
    background: rgba(10,13,20,0.97);
    border-bottom: 1px solid var(--club-border);
    padding: 12px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-nav-mobile .cs-nav-link { padding: 10px 14px; font-size: 0.95rem; }

/* ── Loading ────────────────────────────────────────────────── */
.cs-loading {
    position: fixed;
    inset: 0;
    background: var(--club-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    /* Crossfade with the page entrance so there's never a hard cut */
    transition: opacity 0.4s ease;
}
/* The "ball" now reads as a soft pulsing dot — far less intrusive than
   the prior spinning ring on fast loads. On slow networks it still
   gives the eye something to anchor on. */
.cs-loading-ball {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%,
                                 var(--club-accent),
                                 var(--club-border) 60%,
                                 transparent 70%);
    opacity: 0.55;
    animation: cs-load-pulse 1.4s ease-in-out infinite;
}
@keyframes cs-spin { to { transform: rotate(360deg); } }
@keyframes cs-load-pulse {
    0%, 100% { transform: scale(0.85); opacity: 0.35; }
    50%      { transform: scale(1);    opacity: 0.7;  }
}

/* ── Page entrance choreography ─────────────────────────────────────
   Replaces the dated "loading screen flash" between routes with a
   staged reveal: background fades in, nav drops, hero slides from
   top, sections cascade-rise one after the other. Mirrors the in-page
   scroll-reveal pattern (data-animate fade-up) so the visual
   vocabulary stays consistent across initial load and scroll. */
body.cs-pre-render #cs-nav,
body.cs-pre-render #cs-main,
body.cs-pre-render #cs-footer {
    opacity: 0;
}
body.cs-page-ready #cs-nav {
    animation: cs-page-nav-in 0.55s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.cs-page-ready #cs-main {
    animation: cs-page-bg-in 0.6s ease forwards;
    animation-delay: 0.08s;
}
/* Each section starts hidden + offset, then animates with a stagger
   driven by --cs-entry-delay set per element in JS. */
body.cs-page-ready #cs-main > section {
    opacity: 0;
    transform: translateY(28px);
    animation: cs-page-section-in 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: var(--cs-entry-delay, 0ms);
}
/* Hero gets a different motion — drops from above with a soft blur
   to feel cinematic rather than just rising like the others. */
body.cs-page-ready #cs-main > section:first-child {
    transform: translateY(-36px);
    animation: cs-page-hero-in 0.85s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.18s;
}
body.cs-page-ready #cs-footer {
    animation: cs-page-bg-in 0.5s ease forwards;
    animation-delay: 0.55s;
}

@keyframes cs-page-nav-in {
    from { opacity: 0; transform: translateY(-14px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes cs-page-bg-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes cs-page-hero-in {
    from { opacity: 0; transform: translateY(-36px); filter: blur(3px); }
    to   { opacity: 1; transform: translateY(0);     filter: blur(0); }
}
@keyframes cs-page-section-in {
    from { opacity: 0; transform: translateY(28px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    body.cs-page-ready #cs-nav,
    body.cs-page-ready #cs-main,
    body.cs-page-ready #cs-footer,
    body.cs-page-ready #cs-main > section,
    body.cs-page-ready #cs-main > section:first-child {
        animation: none;
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* ── Not Found ──────────────────────────────────────────────── */
.cs-not-found {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.cs-not-found-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 20px;
    padding: 48px 40px;
    text-align: center;
    max-width: 380px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}
.cs-not-found-card h2 { font-size: 1.6rem; }
.cs-not-found-card p { color: var(--club-muted); }

/* ── Scroll Animations ──────────────────────────────────────── */
[data-animate] {
    transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-animate="fade-up"]    { opacity: 0; transform: translateY(72px); }
[data-animate="fade-left"]  { opacity: 0; transform: translateX(-80px); }
[data-animate="fade-right"] { opacity: 0; transform: translateX(80px); }
[data-animate="scale-in"]   { opacity: 0; transform: scale(0.82) translateY(40px); }
[data-animate].in-view      { opacity: 1; transform: none; }

.stagger-children > * {
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    opacity: 0;
    transform: translateY(50px);
}
.stagger-children.in-view > *:nth-child(1)  { opacity:1; transform:none; transition-delay:0.05s; }
.stagger-children.in-view > *:nth-child(2)  { opacity:1; transform:none; transition-delay:0.13s; }
.stagger-children.in-view > *:nth-child(3)  { opacity:1; transform:none; transition-delay:0.21s; }
.stagger-children.in-view > *:nth-child(4)  { opacity:1; transform:none; transition-delay:0.29s; }
.stagger-children.in-view > *:nth-child(5)  { opacity:1; transform:none; transition-delay:0.37s; }
.stagger-children.in-view > *:nth-child(6)  { opacity:1; transform:none; transition-delay:0.45s; }
.stagger-children.in-view > *:nth-child(7)  { opacity:1; transform:none; transition-delay:0.53s; }
.stagger-children.in-view > *:nth-child(8)  { opacity:1; transform:none; transition-delay:0.61s; }
.stagger-children.in-view > *:nth-child(9)  { opacity:1; transform:none; transition-delay:0.69s; }
.stagger-children.in-view > *:nth-child(n+10){ opacity:1; transform:none; transition-delay:0.75s; }

@media (prefers-reduced-motion: reduce) {
    [data-animate], [data-animate].in-view,
    .stagger-children > *, .stagger-children.in-view > * {
        opacity: 1 !important; transform: none !important; transition: none !important;
    }
}

/* ── Section wrapper ────────────────────────────────────────── */
.cs-section {
    /* Top padding from the per-club Section gap setting. A small fixed
       +8px bottom buffer so the last card/list inside any section doesn't
       sit flush against the next section's edge (matches banner sections
       which also add +8px via inline style). */
    padding: var(--club-section-gap, 72px) 20px 8px;
    /* Anchor for absolutely-positioned children like the tennis-ball serve */
    position: relative;
}
/* Banner sections with the ball animation clip the serving ball as it flies
   off both edges — other sections stay unclipped so carousel cards with
   negative padding still peek through. */
[data-ball-anim] { overflow: hidden; }

/* Ambient spotlights canvas — site-wide, fixed to the viewport so it stays
   visible behind every section as the user scrolls. Pointer-events off so
   it never captures clicks; mix-blend: screen so orbs glow additively through
   translucent banners. Only rendered in night mode. */
.cs-spotlights {
    pointer-events: none;
    mix-blend-mode: screen;
}
.cs-spotlights--fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 0;
    opacity: 1;
}
/* Document-wide variant — canvas sits behind the whole page and scrolls with
   it, so spotlights spread over the full scroll range instead of repeating
   per viewport. JS handles height from document.scrollHeight + ResizeObserver. */
.cs-spotlights--doc {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 0;
    opacity: 1;
}
html:not(.night-mode) .cs-spotlights { display: none; }

/* Soft scroll-snap — engages only when the user pauses near a section edge
   (proximity, not mandatory), never intercepting their ongoing scroll. The
   60px scroll-padding accounts for the sticky nav so section starts land
   below it instead of hiding beneath. Toggled on the <html> element by JS
   based on settings.scroll_snap (default on). */
html.cs-scroll-snap {
    scroll-snap-type: y proximity;
    scroll-padding-top: 60px;
}
html.cs-scroll-snap .cs-hero,
html.cs-scroll-snap .cs-section {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
}
.cs-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.cs-section-title {
    font-size: clamp(1.4rem, 3vw, 2rem);
    font-weight: 700;
    margin-bottom: 8px;
}
.cs-section-sub {
    /* Wired to the user's Text colour so description/intro text tracks the
       palette; mutedFrom() gives the 70%-alpha softened variant in JS. */
    color: var(--club-muted);
    font-size: 1rem;
    margin-bottom: 16px;
}
.cs-divider {
    width: 48px;
    height: 4px;
    background: var(--club-accent);
    border-radius: 2px;
    margin-bottom: 16px;
}

/* ── Hero Section ───────────────────────────────────────────── */
.cs-hero {
    min-height: 60vh; /* overridden inline by hero_height config: compact=50vh, standard=70vh, tall=85vh, full=100vh */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: center;
    /* Nav is sticky, so the hero flows directly below it — no extra top padding
       needed. 40px bottom buffer + 20px sides keeps the content off the edges. */
    padding: 40px 20px 40px;
}
/* Narrow screens: flex hero to the VISIBLE viewport height (minus the sticky
   nav) so phone users don't need to scroll past a zoomed-in landscape image.
   `svh` (small viewport height) = the inner viewport with mobile browser
   chrome visible, so the height doesn't jump when the address bar collapses
   on scroll. Both min and max are clamped — whatever hero_height config was
   chosen, it's overridden on narrow because a 100vh landscape hero doesn't
   fit a phone in portrait. */
@media (max-width: 720px) {
    .cs-hero {
        min-height: calc(100svh - var(--club-nav-h, 64px)) !important;
        max-height: calc(100svh - var(--club-nav-h, 64px));
        padding: 20px 16px 24px;
    }
}
.cs-hero-bg-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor the image to the BOTTOM of the hero so the ground/courts always
       stay visible and any crop happens at the top (sky). Keeps day and night
       photos aligned to the same reference edge regardless of aspect ratio. */
    object-position: center bottom;
    /* Opacity transition for the day/night cross-fade twin */
    transition: opacity 0.4s ease;
}
/* Narrow viewports: anchor horizontally to the RIGHT so the crop eats the
   LEFT side of the image as the viewport narrows. Keeps the important focal
   content (courts/clubhouse on the right of most club hero photos) in frame. */
@media (max-width: 720px) {
    .cs-hero-bg-img {
        object-position: right bottom;
    }
}
.cs-hero-bg-color {
    position: absolute;
    inset: 0;
    background-color: var(--club-bg);
}
.cs-hero-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: var(--club-hero-bg);
}
/* ── Tennis-ball serve animation (banner sections, opt-in) ───────────
   Three nested elements so each animation owns one transform axis:
     .cs-ball-x → linear translateX (constant forward velocity)
     .cs-ball-y → two sequential translateY animations (fall with ease-in
                  gravity, rise with ease-out rebound) — true parabolic arc
     img.cs-ball-serve → linear rotate (continuous spin)
   Mixing X and Y into a single keyframe set interpolates in straight lines
   between keyframes — hence the dot-to-dot look. Decoupling them fixes it.

   Vertical math uses --cs-ball-h (section's measured offsetHeight, set by
   _hydrateBallAnimations) so the arc scales with the banner. Plays once per
   page load (IntersectionObserver unobserves on first hit). */
.cs-ball-x {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 48px;
    pointer-events: none;
    z-index: 2;
    opacity: 0;
    will-change: transform, opacity;
    /* Rest position is off-screen-left; overridden by R→L variant when bounce */
    transform: translateX(-80px);
}
[data-ball-anim][data-ball-style="bounce"] .cs-ball-x {
    transform: translateX(calc(100vw + 80px));
}
.cs-ball-y {
    position: relative;
    width: 100%;
    height: 100%;
    will-change: transform;
    transform: translateY(-80px);
}
.cs-ball-serve {
    width: 100%;
    height: 100%;
    display: block;
    user-select: none;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.45));
    will-change: transform;
}
[data-ball-anim].is-served .cs-ball-x {
    animation-duration: 2.4s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}
[data-ball-anim].is-served .cs-ball-serve {
    animation-fill-mode: forwards;
    animation-timing-function: linear;
    animation-duration: 2.4s;
}

/* ── Style A: SERVE (default, left → right, single arc + mid-bounce) ───── */
[data-ball-anim][data-ball-style="serve"].is-served .cs-ball-x {
    animation-name: cs-ball-x-ltr, cs-ball-fade;
}
[data-ball-anim][data-ball-style="serve"].is-served .cs-ball-y {
    /* Fall to mid-banner bounce, then rise off top-right */
    animation: cs-ball-fall-serve 1.1s cubic-bezier(0.55, 0.05, 0.9, 0.4) forwards,
               cs-ball-rise-serve 1.3s cubic-bezier(0.1, 0.6, 0.45, 1) 1.1s forwards;
}
[data-ball-anim][data-ball-style="serve"].is-served .cs-ball-serve {
    animation-name: cs-ball-spin-cw;
}

/* ── Style B: 4-BOUNCE (right → left, damped skip across) ──────────────── */
[data-ball-anim][data-ball-style="bounce"].is-served .cs-ball-x {
    animation-name: cs-ball-x-rtl, cs-ball-fade;
}
[data-ball-anim][data-ball-style="bounce"].is-served .cs-ball-y {
    animation:
        cs-ball-fall1 0.3s cubic-bezier(0.55, 0.05, 0.9, 0.4) 0.0s forwards,
        cs-ball-rise1 0.3s cubic-bezier(0.1, 0.6, 0.45, 1)   0.3s forwards,
        cs-ball-fall2 0.3s cubic-bezier(0.55, 0.05, 0.9, 0.4) 0.6s forwards,
        cs-ball-rise2 0.3s cubic-bezier(0.1, 0.6, 0.45, 1)   0.9s forwards,
        cs-ball-fall3 0.3s cubic-bezier(0.55, 0.05, 0.9, 0.4) 1.2s forwards,
        cs-ball-rise3 0.3s cubic-bezier(0.1, 0.6, 0.45, 1)   1.5s forwards,
        cs-ball-fall4 0.3s cubic-bezier(0.55, 0.05, 0.9, 0.4) 1.8s forwards,
        cs-ball-exit  0.3s cubic-bezier(0.1, 0.6, 0.45, 1)   2.1s forwards;
}
[data-ball-anim][data-ball-style="bounce"].is-served .cs-ball-serve {
    animation-name: cs-ball-spin-ccw;
}

/* X keyframes — one for each direction */
@keyframes cs-ball-x-ltr {
    from { transform: translateX(-80px); }
    to   { transform: translateX(calc(100vw + 80px)); }
}
@keyframes cs-ball-x-rtl {
    from { transform: translateX(calc(100vw + 80px)); }
    to   { transform: translateX(-80px); }
}

/* Serve-style Y — single arc from off-top, bounce at mid-banner, exit off-top */
@keyframes cs-ball-fall-serve {
    from { transform: translateY(-80px); }
    to   { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
}
@keyframes cs-ball-rise-serve {
    from { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
    to   { transform: translateY(-80px); }
}
@keyframes cs-ball-fade {
    0%, 6%   { opacity: 0; }
    10%, 94% { opacity: 1; }
    100%     { opacity: 0; }
}
/* ── 4-bounce Y chain ───────────────────────────────────────────
   Apex heights (lower Y = higher visually):
      rise1 → 0.15H   (strongest)
      rise2 → 0.30H
      rise3 → 0.50H   (weakest bounce)
      exit  → -80px   (off-screen top, launch exit)
   Floor is (H - 60px) everywhere, using --cs-ball-h set from JS. */
@keyframes cs-ball-fall1 {
    from { transform: translateY(-80px); }
    to   { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
}
@keyframes cs-ball-rise1 {
    from { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
    to   { transform: translateY(calc(var(--cs-ball-h, 400px) * 0.15)); }
}
@keyframes cs-ball-fall2 {
    from { transform: translateY(calc(var(--cs-ball-h, 400px) * 0.15)); }
    to   { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
}
@keyframes cs-ball-rise2 {
    from { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
    to   { transform: translateY(calc(var(--cs-ball-h, 400px) * 0.30)); }
}
@keyframes cs-ball-fall3 {
    from { transform: translateY(calc(var(--cs-ball-h, 400px) * 0.30)); }
    to   { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
}
@keyframes cs-ball-rise3 {
    from { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
    to   { transform: translateY(calc(var(--cs-ball-h, 400px) * 0.50)); }
}
@keyframes cs-ball-fall4 {
    from { transform: translateY(calc(var(--cs-ball-h, 400px) * 0.50)); }
    to   { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
}
@keyframes cs-ball-exit {
    from { transform: translateY(calc(var(--cs-ball-h, 400px) - 60px)); }
    to   { transform: translateY(-80px); }
}
/* Spin direction matches travel */
@keyframes cs-ball-spin-cw  { from { transform: rotate(0deg); } to { transform: rotate(1440deg);  } }
@keyframes cs-ball-spin-ccw { from { transform: rotate(0deg); } to { transform: rotate(-1440deg); } }
@media (prefers-reduced-motion: reduce) {
    .cs-ball-x { display: none; }
}

/* Night-mode fluorescent-startup glow on the hero logo + title.
   Runs on page mount and on every night-mode toggle (JS adds .is-hero-glow
   on the <section class="cs-hero"> element, removes + re-adds on toggle to
   replay the keyframes). Sharp random flickers for the first ~1 s like a
   cold tube striking, then a soft steady glow, which ramps up to full
   intensity over the remaining ~4 s. Day mode: no effect. */
@keyframes cs-hero-flicker-logo {
    0%, 1%     { filter: drop-shadow(0 0 0 transparent); }
    2%         { filter: drop-shadow(0 0 6px rgba(255,255,255,0.8)) drop-shadow(0 0 14px var(--club-accent)); }
    3%, 5%     { filter: drop-shadow(0 0 0 transparent); }
    6%         { filter: drop-shadow(0 0 8px rgba(255,255,255,0.85)) drop-shadow(0 0 18px var(--club-accent)); }
    7%, 9%     { filter: drop-shadow(0 0 0 transparent); }
    10%        { filter: drop-shadow(0 0 5px rgba(255,255,255,0.55)) drop-shadow(0 0 12px var(--club-accent)); }
    11%, 13%   { filter: drop-shadow(0 0 2px rgba(255,255,255,0.25)); }
    16%        { filter: drop-shadow(0 0 4px rgba(255,255,255,0.35)) drop-shadow(0 0 10px var(--club-accent)); }
    /* Final frame matches the court-card pulse peak (2.5px ring + 14px + 32px
       accent). drop-shadow has no spread, so the ring is approximated with a
       tight 2px blur — visually reads as the same crisp accent halo. */
    100%       { filter: drop-shadow(0 0 2px var(--club-accent)) drop-shadow(0 0 14px var(--club-accent)) drop-shadow(0 0 32px var(--club-accent)); }
}
@keyframes cs-hero-flicker-title {
    0%, 1%   { text-shadow: none; }
    2%       { text-shadow: 0 0 6px rgba(255,255,255,0.9), 0 0 16px var(--club-accent); }
    3%, 5%   { text-shadow: none; }
    6%       { text-shadow: 0 0 8px rgba(255,255,255,0.95), 0 0 20px var(--club-accent); }
    7%, 9%   { text-shadow: none; }
    10%      { text-shadow: 0 0 5px rgba(255,255,255,0.6), 0 0 14px var(--club-accent); }
    11%, 13% { text-shadow: 0 0 2px rgba(255,255,255,0.3); }
    16%      { text-shadow: 0 0 4px rgba(255,255,255,0.45), 0 0 12px var(--club-accent); }
    100%     { text-shadow: 0 0 2px var(--club-accent), 0 0 14px var(--club-accent), 0 0 32px var(--club-accent); }
}
html.night-mode .cs-hero.is-hero-glow .cs-hero-logo {
    animation: cs-hero-flicker-logo 5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
html.night-mode .cs-hero.is-hero-glow .cs-hero-title {
    animation: cs-hero-flicker-title 5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}
/* Sub description lines — fade in sequentially after the 5 s flicker completes
   (--cs-tl-i is each span's index injected from JS). Only gated in night mode
   since the flicker is night-only; day mode keeps the tagline visible as
   normal. */
.cs-hero-tagline-line { display: inline; }
html.night-mode .cs-hero.is-hero-glow .cs-hero-tagline-line {
    opacity: 0;
    filter: blur(4px);
    animation: cs-hero-tagline-fade 0.9s ease-out forwards;
    animation-delay: calc(5s + var(--cs-tl-i, 0) * 0.6s);
}
@keyframes cs-hero-tagline-fade {
    0%   { opacity: 0; filter: blur(4px); transform: translateY(4px); }
    100% { opacity: 1; filter: blur(0);   transform: translateY(0);   }
}
@media (prefers-reduced-motion: reduce) {
    html.night-mode .cs-hero.is-hero-glow .cs-hero-tagline-line {
        opacity: 1;
        filter: none;
        transform: none;
        animation: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    html.night-mode .cs-hero.is-hero-glow .cs-hero-logo,
    html.night-mode .cs-hero.is-hero-glow .cs-hero-title {
        animation: none;
    }
    html.night-mode .cs-hero.is-hero-glow .cs-hero-logo {
        filter: drop-shadow(0 0 2px var(--club-accent)) drop-shadow(0 0 14px var(--club-accent)) drop-shadow(0 0 32px var(--club-accent));
    }
    html.night-mode .cs-hero.is-hero-glow .cs-hero-title {
        text-shadow: 0 0 2px var(--club-accent), 0 0 14px var(--club-accent), 0 0 32px var(--club-accent);
    }
}

.cs-hero-content {
    position: relative;
    z-index: 1;
    max-width: 700px;
}
.cs-hero-logo {
    /* max-width and width set inline from logo_size config */
    height: auto;
    /* border-radius set inline from section config (round/square/rect) */
    object-fit: contain;
    margin: 0 auto 24px;
    display: block;
}
.cs-hero-title {
    font-size: clamp(2rem, 6vw, 3.5rem);
    font-weight: 800;
    line-height: 1.15;
    margin-bottom: 16px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.7), 0 1px 3px rgba(0,0,0,0.9);
}
.cs-hero-tagline {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    color: rgba(255,255,255,0.92);
    margin-bottom: 40px;
    max-width: 580px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 1px 8px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.9);
}
.cs-hero-ctas {
    display: flex;
    gap: 14px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Stats Bar ──────────────────────────────────────────────── */
.cs-stats-bar {
    background: var(--club-card-bg);
    border-top: 1px solid var(--club-border);
    border-bottom: 1px solid var(--club-border);
    padding: 36px 20px;
}
.cs-stats-bar-inner {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    gap: 48px;
    flex-wrap: wrap;
}
.cs-stat-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.cs-stat-value {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--club-accent);
    line-height: 1;
}
.cs-stat-label {
    font-size: 0.78rem;
    color: var(--club-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 600;
}
.cs-stat-sub {
    margin-top: 2px;
    font-size: 0.7rem;
    color: var(--club-muted);
    opacity: 0.7;
    font-weight: 500;
    letter-spacing: 0.02em;
}

/* ── Text / About Section ───────────────────────────────────── */
.cs-text-body {
    color: var(--club-muted);
    font-size: 1rem;
    line-height: 1.8;
    white-space: pre-wrap;
    max-width: 720px;
}

/* ── Memberships ────────────────────────────────────────────── */
.cs-membership-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: var(--club-card-gap, 16px);
    /* Rows stretch to the tallest card so Add-to-Cart buttons line up and
       every card looks the same height — flex:1 on the body pushes the CTA
       to the bottom of each card. */
}
.cs-membership-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    /* Bottom accent bar is set inline per-card to the membership-type colour
       (e.g. the Junior palette vs Adult palette). See renderMemberships(). */
    border-radius: var(--club-radius);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}
/* When membership cards sit inside a BANNER section (the section has an
   inline background: from cfg.bg_color) AND the club's card_bg resolves
   transparent-ish, the card would otherwise be invisible against the
   banner. Inject a light-glass fallback (translucent white + blur) so the
   card frame always reads as distinct from the banner behind. Applies to
   day mode only — night mode has its own glass override earlier in the
   file that handles the same case differently. */
.cs-section[style*="background"] .cs-membership-card,
html:not(.night-mode) .cs-section[style*="background"] .cs-membership-card {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(10px) saturate(1.15);
    -webkit-backdrop-filter: blur(10px) saturate(1.15);
    border-color: rgba(255, 255, 255, 0.35);
}
.cs-membership-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(0,0,0,0.28);
}
.cs-membership-header {
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid var(--club-border);
}
.cs-membership-icon { font-size: 1.5rem; }
.cs-membership-name { font-weight: 700; font-size: 1rem; color: var(--club-card-text, var(--club-text)); }
.cs-membership-body {
    padding: 16px 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-membership-price { font-size: 1.6rem; font-weight: 800; color: var(--club-card-text, var(--club-text)); }
.cs-membership-price-sub { font-size: 0.75rem; color: var(--club-card-muted, var(--club-muted)); }
.cs-membership-desc { font-size: 0.82rem; color: var(--club-card-muted, var(--club-muted)); margin-top: 4px; flex: 1; }
.cs-membership-family-note {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    color: var(--club-accent);
    margin-top: 6px;
    opacity: 0.85;
}
.cs-membership-cta { padding: 16px 20px 28px; }

/* ── Events & News Feed ─────────────────────────────────────── */
.cs-feed-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--club-card-gap, 16px);
}
.cs-feed-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    overflow: hidden;
    transition: transform 0.18s;
    display: flex;
    flex-direction: column;
    /* No hard min-height — sparse card types (sponsors, news with no
       subtitle) would otherwise grow empty vertical space. Carousel
       visual alignment comes from scroll-snap, not equal-height cards. */
}
/* Removed the old min-height:380px on event cards — it forced each card
   to 380px regardless of content, leaving up to ~80px of empty space at
   the card's bottom which compounded with section padding into a visible
   inter-section "gap" that didn't respect the Section-gap slider. Event
   cards now size to their natural content; the info-block sits flush
   at the bottom because the card's flex column has no grow spacer. */
.cs-feed-card:hover { transform: translateY(-3px); }
.cs-feed-card-img {
    position: relative;
    width: 100%;
    height: 180px;
    background: var(--club-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--club-muted);
    font-size: 2rem;
    overflow: hidden;
    flex-shrink: 0;
}
.cs-feed-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cs-feed-card-body {
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    flex: 1;
}
.cs-feed-card-title { font-weight: 700; font-size: 1rem; color: var(--club-card-text, var(--club-text)); margin-bottom: 4px; line-height: 1.3; }
.cs-feed-card-sub   { font-size: 0.82rem; color: var(--club-card-muted, var(--club-muted)); line-height: 1.45; }
/* Meta row sits above the title and carries the (event-)date + category
   chip. Was previously a bare .cs-feed-card-date <div>; we now show
   both pieces side-by-side so dated news (e.g. a maintenance notice)
   reads as "27 May · Maintenance" instead of duplicating the posted
   date that's already implicit on every card. */
.cs-feed-card-meta {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 6px;
    font-size: 0.78rem;
}
.cs-feed-card-date {
    color: var(--club-card-muted, var(--club-muted));
    font-weight: 600;
}
.cs-feed-card-cat {
    padding: 2px 8px;
    background: color-mix(in srgb, var(--club-accent) 16%, transparent);
    color: var(--club-accent);
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
/* Pushes chips to the bottom edge so every card lines up along its footer */
.cs-feed-card-spacer { flex: 1; min-height: 10px; }

/* Date badge — overlaid on the cover image, matches the member-portal
   event-detail style (accent background, white text, split day/month) */
.cs-date-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    background: var(--club-accent);
    color: #fff;
    border-radius: 10px;
    padding: 6px 10px 5px;
    min-width: 50px;
    text-align: center;
    line-height: 1;
    box-shadow: 0 4px 14px rgba(0,0,0,0.25);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.cs-date-badge__day   { font-size: 1.35rem; font-weight: 800; letter-spacing: -0.5px; }
.cs-date-badge__month { font-size: 0.7rem;  font-weight: 700; letter-spacing: 1.2px; opacity: 0.88; }

/* "PAST" pill for historic events — top-right of the image */
.cs-event-past-pill {
    position: absolute;
    top: 14px;
    right: 12px;
    background: rgba(0,0,0,0.65);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 3px 9px;
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

/* ── Horizontal auto-scroll carousel (events / news / sponsors) ─── */
.cs-carousel {
    position: relative;
    /* Zero wrapper padding — the section_gap controls inter-section space
       and the track's own padding provides headroom for the active card's
       shadow. Any padding here would be stacked on top of section_gap. */
    padding: 0;
}
.cs-carousel-track {
    display: flex;
    /* Cards size to their own content — prevents the flex-row's default
       stretch from growing short cards to match the tallest and leaving
       empty space inside them. */
    align-items: flex-start;
    gap: var(--club-card-gap, 24px);
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    /* On wide screens the math centres the card group within the ~1040px
       content rail. On narrow screens (≤720px) the media query below takes
       over and centres the ACTIVE card individually with neighbours peeking
       through a soft edge-fade mask.
       Vertical padding bumped to 40px: `overflow-x: auto` forces `overflow-y`
       to auto too (CSS spec quirk), which was clipping the 32px hover/card
       glow at the section title boundary. 40px gives the glow room to render
       without visible cut-off. */
    padding: 40px max(16px, calc(50% - 520px)) 40px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.cs-carousel-track::-webkit-scrollbar { display: none; }
/* Narrow viewports: centre the focal card, fade cut-off neighbours */
@media (max-width: 720px) {
    .cs-carousel {
        /* Short fade (18px) so peek-cards stay clearly visible — a longer
           gradient dissolved too much of the neighbour cards into the bg */
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
                mask-image: linear-gradient(to right, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
    }
    .cs-carousel-track {
        /* Card width at this breakpoint ≈ clamp(280, 30vw, 340) → typically
           hits the 280px floor. Padding = (viewport − 280) / 2 centres the
           first card; scroll-snap-align: center keeps active card in the
           middle as the user swipes. Vertical padding matches the desktop
           40px so the hover glow isn't clipped at the section-title edge. */
        padding: 40px calc(50% - 140px) 40px;
    }
}
/* Carousel-scoped card effects — cards in grid mode don't sit inside a
   .cs-carousel-track so none of these apply and they render at full size.
   Width clamps to viewport so three cards always fit on typical desktops
   (>=1000px); below that, the carousel natural-scrolls. */
.cs-carousel-track > .cs-carousel-card {
    flex: 0 0 clamp(280px, 30vw, 340px);
    scroll-snap-align: center;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity    0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                filter     0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* Graduated fade — active stays at 1.0× so nothing can push past the card's
   allotted width and get clipped by the track's scroll-box. Emphasis comes
   from shadow + accent ring + brightness instead of a scale bump. */
.cs-carousel-track > .cs-carousel-card[data-dist="0"],
.cs-carousel-track > .cs-carousel-card.is-active {
    opacity: 1;
    transform: scale(1);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    filter: brightness(1);
}
.cs-carousel-track > .cs-carousel-card[data-dist="1"] {
    opacity: 0.75;
    transform: scale(0.94);
    filter: brightness(0.9);
}
.cs-carousel-track > .cs-carousel-card[data-dist="2"] {
    opacity: 0.42;
    transform: scale(0.88);
    filter: brightness(0.8);
}
.cs-carousel-track > .cs-carousel-card[data-dist="3"] {
    opacity: 0.22;
    transform: scale(0.86);
    filter: brightness(0.7);
}
/* Soft accent ring on the focused card — sits just outside the border
   radius so it reads as a "selected" halo. */
.cs-carousel-track > .cs-carousel-card.is-active {
    box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.22),
        0 0 0 3px color-mix(in srgb, var(--club-accent) 25%, transparent);
}

@media (max-width: 640px) {
    .cs-carousel-track > .cs-carousel-card { flex-basis: 84vw; }
    .cs-carousel-track { padding: 0 8vw 4px; }
}

/* Event-information list — mirrors the member-portal detail block */
.cs-info-block {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid rgba(0,0,0,0.08);
}
.cs-info-block-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--club-accent);
    margin-bottom: 8px;
    text-transform: none;
    letter-spacing: 0;
}
.cs-info-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-info-row {
    display: grid;
    grid-template-columns: 22px 1fr;
    align-items: center;
    gap: 10px;
    font-size: 0.85rem;
    color: var(--club-text);
    padding-bottom: 8px;
    border-bottom: 1px dashed rgba(0,0,0,0.06);
    line-height: 1.35;
}
.cs-info-row:last-child { border-bottom: none; padding-bottom: 0; }
.cs-info-row .mdi {
    font-size: 1.1rem;
    color: var(--club-accent);
    justify-self: center;
}
.cs-event-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    font-size: 0.72rem;
    background: rgba(0,0,0,0.04);
    border: 1px solid var(--club-border);
    border-radius: 999px;
    color: var(--club-muted);
}
.cs-event-chip .mdi { font-size: 0.9rem; color: var(--club-accent); }
.cs-event-chip--primary {
    background: var(--club-accent);
    color: #fff;
    border-color: var(--club-accent);
}
.cs-event-chip--primary .mdi { color: #fff; }
/* When the card sits on a club-card-bg surface, boost chip contrast */
.cs-carousel-card .cs-event-chip { background: var(--club-bg); }

/* ── Gallery ────────────────────────────────────────────────── */
.cs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 8px;
}
.cs-gallery-item {
    aspect-ratio: 4/3;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
}
.cs-gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.25s;
}
.cs-gallery-item:hover img { transform: scale(1.06); }

/* ── Gallery marquee ────────────────────────────────────────────────
   Constant-speed infinite carousel: track holds two copies of the image
   list and slides from translateX(0) to translateX(-50%), so once the
   first copy has fully exited the viewport, the second copy is back at
   the starting position — seamless loop, never snaps. Pauses on hover. */
.cs-gallery-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* Soft fade at the left/right edges so tiles slide in/out smoothly */
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.cs-gallery-track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: cs-gallery-scroll var(--cs-gal-duration, 30s) linear infinite;
    will-change: transform;
}
.cs-gallery-marquee:hover .cs-gallery-track { animation-play-state: paused; }
@keyframes cs-gallery-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Sponsor marquee ──────────────────────────────────────────────
   Same constant-speed infinite scroll pattern as the gallery, but
   tiled with the card layout sponsors already use. Pauses on hover. */
.cs-sponsor-marquee {
    position: relative;
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 40px, #000 calc(100% - 40px), transparent 100%);
}
.cs-sponsor-track {
    display: flex;
    gap: 18px;
    width: max-content;
    animation: cs-gallery-scroll var(--cs-spn-duration, 30s) linear infinite;
    will-change: transform;
    padding: 14px 0;
}
.cs-sponsor-marquee:hover .cs-sponsor-track { animation-play-state: paused; }
.cs-sponsor-tile {
    flex: 0 0 clamp(260px, 28vw, 340px);
}
@media (prefers-reduced-motion: reduce) {
    .cs-sponsor-track { animation: none; }
}
.cs-gallery-tile {
    /* 3 tiles visible on wide viewports. Container width minus 2×gap split
       three ways. clamp keeps it sensible on narrow screens. */
    flex: 0 0 clamp(260px, 30vw, 380px);
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--club-border);
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cs-gallery-tile img {
    width: 100%;
    height: 100%;
    /* Cover-crop + modest over-scan: cover handles aspect-ratio differences,
       the 1.06× scale eats any baked-in whitespace/margins around the
       source photo (common with phone screenshots or collage exports). */
    object-fit: cover;
    display: block;
    transform: scale(1.06);
    transition: transform 0.4s ease;
}
.cs-gallery-tile:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
}
.cs-gallery-tile:hover img { transform: scale(1.12); }
@media (max-width: 720px) {
    .cs-gallery-tile { flex: 0 0 clamp(220px, 70vw, 320px); }
}
@media (prefers-reduced-motion: reduce) {
    .cs-gallery-track { animation: none; }
}

/* ── Coaches ────────────────────────────────────────────────── */
.cs-coaches-grid {
    /* Centred grid — auto-fit + auto margins + max-width keeps 1-3 cards
       nicely centred under the section title instead of left-aligning */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 280px));
    gap: 20px;
    justify-content: center;
    max-width: 1200px;
    margin: 0 auto;
}
.cs-coach-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    overflow: hidden;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.cs-coach-card:hover,
.cs-coach-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--club-accent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
    outline: none;
}
.cs-coach-photo {
    width: 100%;
    height: 180px;
    object-fit: cover;
    background: var(--club-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
}
.cs-coach-body { padding: 16px; display: flex; flex-direction: column; gap: 6px; }
.cs-coach-name { font-weight: 700; font-size: 1rem; }
.cs-coach-title { font-size: 0.8rem; color: var(--club-accent); font-weight: 600; }
.cs-coach-bio { font-size: 0.8rem; color: var(--club-muted); }
.cs-coach-actions { display: flex; justify-content: center; gap: 10px; padding: 12px 16px 16px; }
.cs-coach-academy {
    font-size: 0.78rem;
    color: var(--club-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.cs-coach-specialties {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-top: 8px;
}
.cs-coach-chip {
    font-size: 0.7rem;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--club-border);
    color: var(--club-text);
    border: 1px solid var(--club-border);
}
.cs-coach-request-btn {
    margin-top: 12px;
    width: 100%;
    justify-content: center;
    padding: 10px 14px;
    font-size: 0.85rem;
}
.cs-coach-unavailable {
    margin-top: 10px;
    font-size: 0.78rem;
    color: var(--club-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: center;
}

/* Request-a-Lesson enquiry modal (guest flow) */
.cs-coach-enquiry-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cs-coach-enquiry-overlay.open { display: flex; }
.cs-coach-enquiry-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 14px;
    padding: 24px;
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    color: var(--club-text);
}
.cs-coach-enquiry-close {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--club-border);
    color: var(--club-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cs-coach-enquiry-title { margin: 0 0 4px; font-size: 1.25rem; font-weight: 700; }
.cs-coach-enquiry-sub { font-size: 0.85rem; color: var(--club-muted); margin-bottom: 16px; }
.cs-coach-enquiry-form { display: flex; flex-direction: column; gap: 10px; }
.cs-coach-enquiry-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--club-muted);
}
.cs-coach-enquiry-label input,
.cs-coach-enquiry-label select,
.cs-coach-enquiry-label textarea {
    padding: 8px 10px;
    border: 1px solid var(--club-border);
    border-radius: 8px;
    background: var(--club-bg);
    color: var(--club-text);
    font-size: 0.9rem;
    font-family: inherit;
}
.cs-coach-enquiry-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 6px;
}
.cs-coach-enquiry-status {
    font-size: 0.82rem;
    color: var(--club-muted);
    min-height: 18px;
    margin-top: 4px;
}
.cs-coach-enquiry-status.success { color: #22c55e; }
.cs-coach-enquiry-status.error   { color: #ef4444; }

/* ── Coach detail modal ─────────────────────────────────────────
   Mirrors the member-portal coach detail view in a scrollable card.
   Themes automatically via CSS variables — day uses --club-card-bg /
   --club-text; night flips via the existing html.night-mode overrides. */
.cs-coach-detail-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    z-index: 9999;
    display: none;
    align-items: flex-start;
    justify-content: center;
    padding: 32px 16px;
    overflow-y: auto;
}
.cs-coach-detail-overlay.open { display: flex; }
.cs-coach-detail-card {
    /* Opaque canvas — --club-card-bg is often alpha-blended (glass look),
       which becomes unreadable over a busy coach-grid behind the modal.
       Fall back to --club-bg (always opaque) so the modal reads as a solid
       panel in both day and night themes. */
    background: var(--club-bg);
    color: var(--club-text);
    border: 1px solid var(--club-border);
    border-radius: 16px;
    width: 100%;
    max-width: 640px;
    position: relative;
    box-shadow:
        0 0 0 1px rgba(var(--club-accent-rgb, 245, 166, 35), 0.18),
        0 0 24px rgba(var(--club-accent-rgb, 245, 166, 35), 0.15),
        0 20px 60px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    transition: box-shadow 0.25s ease, border-color 0.2s ease;
}
.cs-coach-detail-card:hover {
    box-shadow:
        0 0 0 1.5px rgba(var(--club-accent-rgb, 245, 166, 35), 0.4),
        0 0 38px rgba(var(--club-accent-rgb, 245, 166, 35), 0.3),
        0 24px 70px rgba(0, 0, 0, 0.55);
}
html.night-mode .cs-coach-detail-card {
    /* Solid near-black + club-accent ring + soft accent halo — same
       treatment the membership-details / datepicker / confirm modals use,
       so all popups share one visual language. */
    background: #000000;
    border-color: rgba(var(--club-accent-rgb, 245, 166, 35), 0.45);
    box-shadow:
        0 0 0 1px rgba(var(--club-accent-rgb, 245, 166, 35), 0.4),
        0 0 28px rgba(var(--club-accent-rgb, 245, 166, 35), 0.3),
        0 24px 70px rgba(0, 0, 0, 0.85);
}
html.night-mode .cs-coach-detail-card:hover {
    border-color: rgba(var(--club-accent-rgb, 245, 166, 35), 0.7);
    box-shadow:
        0 0 0 1.5px rgba(var(--club-accent-rgb, 245, 166, 35), 0.6),
        0 0 44px rgba(var(--club-accent-rgb, 245, 166, 35), 0.45),
        0 0 78px rgba(var(--club-accent-rgb, 245, 166, 35), 0.25),
        0 28px 80px rgba(0, 0, 0, 0.9);
}
/* All text inside the coach popup goes white in night mode — auto-contrast
   handles day mode via --club-text already. */
html.night-mode .cs-coach-detail-card,
html.night-mode .cs-coach-detail-card * {
    color: #ffffff;
}
/* Keep accent-coloured links / pills in night mode readable: the blanket
   white override above is too aggressive for some chrome elements. Restore
   a few key ones that need to stay on-accent. */
html.night-mode .cs-coach-detail-card .cs-coach-detail-academy-link,
html.night-mode .cs-coach-detail-card .cs-coach-detail-academy-link * {
    color: var(--club-accent) !important;
}
html.night-mode .cs-coach-detail-card .cs-coach-not-accepting,
html.night-mode .cs-coach-detail-card .cs-coach-not-accepting * {
    color: #ff8a8a !important;
}
.cs-coach-detail-close {
    position: absolute;
    top: 10px; right: 10px;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: rgba(0,0,0,0.4);
    color: #fff;
    border: none;
    cursor: pointer;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
.cs-coach-detail-close:hover { background: rgba(0,0,0,0.6); }
.cs-coach-detail-body { padding: 28px 24px 24px; }
.cs-coach-detail-hero { text-align: center; margin-bottom: 20px; }
.cs-coach-detail-photo {
    width: 140px; height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--club-accent);
    display: inline-block;
    margin-bottom: 14px;
}
.cs-coach-detail-photo--fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
    color: var(--club-muted);
    background: var(--club-border);
}
.cs-coach-detail-name {
    font-size: 1.6rem;
    font-weight: 800;
    margin: 0 0 4px;
    color: var(--club-text);
}
.cs-coach-detail-tagline {
    font-size: 0.95rem;
    color: var(--club-muted);
    margin-bottom: 10px;
    font-style: italic;
}
.cs-coach-detail-academy {
    font-size: 0.85rem;
    color: var(--club-accent);
    font-weight: 600;
    margin-bottom: 10px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.cs-coach-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
    margin-bottom: 12px;
}
.cs-coach-detail-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    margin-bottom: 12px;
}
.cs-coach-detail-status.is-available {
    background: rgba(34, 197, 94, 0.12);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.cs-coach-detail-status.is-unavailable {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
    border: 1px solid rgba(239, 68, 68, 0.3);
}
.cs-coach-detail-socials {
    display: flex;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}
.cs-coach-social-chip {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: var(--club-border);
    color: var(--club-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.cs-coach-social-chip:hover { background: var(--club-accent); color: var(--club-accent-text, #fff); }
.cs-coach-detail-block {
    padding: 16px 0;
    border-top: 1px solid var(--club-border);
}
.cs-coach-detail-block:first-of-type { border-top: none; padding-top: 0; }
.cs-coach-detail-h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 10px;
    color: var(--club-accent);
}
.cs-coach-detail-text {
    font-size: 0.9rem;
    line-height: 1.55;
    color: var(--club-muted);
    white-space: pre-wrap;
}
.cs-coach-pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}
.cs-coach-pricing-card {
    padding: 12px 14px;
    border: 1px solid var(--club-border);
    border-radius: 10px;
    background: rgba(127,127,127,0.05);
}
.cs-coach-pricing-title { font-weight: 700; font-size: 0.9rem; margin-bottom: 4px; }
.cs-coach-pricing-price { font-size: 1.3rem; font-weight: 800; color: var(--club-accent); margin-bottom: 6px; }
.cs-coach-pricing-meta {
    display: flex; gap: 10px; flex-wrap: wrap;
    font-size: 0.78rem; color: var(--club-muted);
    margin-bottom: 6px;
}
.cs-coach-pricing-meta .mdi { margin-right: 3px; color: var(--club-accent); }
.cs-coach-pricing-desc { font-size: 0.8rem; color: var(--club-muted); line-height: 1.4; }
.cs-coach-lesson-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}
.cs-coach-lesson-item {
    padding: 12px;
    border: 1px solid var(--club-border);
    border-radius: 10px;
    text-align: center;
}
.cs-coach-lesson-item .mdi {
    font-size: 1.8rem;
    color: var(--club-accent);
    display: block;
    margin-bottom: 6px;
}
.cs-coach-lesson-item-title { font-weight: 700; font-size: 0.88rem; margin-bottom: 4px; }
.cs-coach-lesson-item-desc { font-size: 0.78rem; color: var(--club-muted); line-height: 1.4; }
.cs-coach-activity-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}
.cs-coach-activity-item {
    border: 1px solid var(--club-border);
    border-radius: 10px;
    overflow: hidden;
}
.cs-coach-activity-item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.cs-coach-activity-item-title { font-weight: 700; font-size: 0.82rem; padding: 6px 8px 2px; }
.cs-coach-activity-item-desc { font-size: 0.75rem; color: var(--club-muted); padding: 0 8px 8px; line-height: 1.35; }
.cs-coach-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 8px;
}
.cs-coach-gallery-grid img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    border-radius: 8px;
    display: block;
}
.cs-coach-detail-cta-wrap {
    position: sticky;
    bottom: -1px;
    padding: 14px 0 4px;
    margin-top: 18px;
    /* Fade the content edge into the card's opaque surface */
    background: linear-gradient(to bottom, transparent, var(--club-bg) 30%);
}
html.night-mode .cs-coach-detail-cta-wrap {
    background: linear-gradient(to bottom, transparent, #0a0d14 30%);
}
.cs-coach-detail-cta-wrap .cs-coach-request-btn {
    width: 100%;
    justify-content: center;
    margin-top: 0;
}
@media (max-width: 520px) {
    .cs-coach-detail-body { padding: 22px 16px 16px; }
    .cs-coach-detail-photo { width: 120px; height: 120px; }
    .cs-coach-detail-name { font-size: 1.35rem; }
}

/* ── Courts availability (read-only, live) ──────────────────── */
.cs-courts-root { margin-top: 10px; }
.cs-courts-loading,
.cs-courts-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--club-muted);
    font-size: 0.9rem;
}
.cs-courts-loading .mdi,
.cs-courts-error .mdi { font-size: 1.4rem; }
.cs-courts-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 0 14px;
}
/* Date-navigation controls reuse the nav header button style: transparent
   circles/pills with a currentColor halo that auto-tracks the text colour,
   matching the look of the cart/account/theme-toggle icons up in the nav. */
.cs-courts-nav {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 0;
    color: var(--club-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    box-shadow: 0 0 10px 3px color-mix(in srgb, currentColor 40%, transparent);
    transition: color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
}
.cs-courts-nav:hover { color: var(--club-accent); transform: translateY(-1px); }
.cs-courts-date-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 18px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    font-weight: 700;
    color: var(--club-text);
    cursor: pointer;
    box-shadow: 0 0 10px 3px color-mix(in srgb, currentColor 40%, transparent);
    transition: color 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
    /* Fixed width sized for the longest possible label ("Wednesday,
       September 30") so the prev/next arrows don't shift position as the
       user scrolls through days. Label inside is centred via
       justify-content. */
    min-width: 240px;
}
.cs-courts-date-btn:hover { color: var(--club-accent); transform: translateY(-1px); }
.cs-courts-date-btn .mdi { color: inherit; }
.cs-courts-date-caret { font-size: 1rem; opacity: 0.7; margin-left: 2px; }
.cs-courts-date-wrap { position: relative; }

/* ── Custom date picker popover ───────────────────────────────────── */
.cs-courts-datepicker {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%);
    z-index: 200;
    width: 300px;
    padding: 14px 14px 16px;
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 14px;
    box-shadow:
        0 12px 32px rgba(0, 0, 0, 0.22),
        0 4px 10px rgba(0, 0, 0, 0.14);
    user-select: none;
}
.cs-courts-datepicker[hidden] { display: none; }
.cs-dp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.cs-dp-title {
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--club-text);
}
.cs-dp-nav {
    width: 30px; height: 30px;
    border-radius: 50%;
    border: 0;
    background: transparent;
    color: var(--club-text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    transition: background 0.15s;
}
.cs-dp-nav:hover { background: var(--club-border); }
.cs-dp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
    font-size: 0.7rem;
    color: var(--club-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
    text-align: center;
}
.cs-dp-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.cs-dp-cell {
    aspect-ratio: 1 / 1;
    border: 0;
    background: transparent;
    color: var(--club-text);
    font-size: 0.88rem;
    font-weight: 500;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease, box-shadow 0.12s ease;
}
.cs-dp-cell--blank { cursor: default; background: transparent !important; }
.cs-dp-cell:hover:not(.cs-dp-cell--blank):not(.is-selected) {
    background: var(--club-border);
}
.cs-dp-cell.is-today {
    color: var(--club-accent);
    font-weight: 800;
}
.cs-dp-cell.is-selected {
    background: var(--club-accent);
    color: var(--club-accent-text, #fff);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--club-accent) 35%, transparent);
}

/* Night mode: fully opaque dark panel with an accent ring + glow so it
   reads above the spotlights canvas and doesn't blend into the dark
   section behind it. */
html.night-mode .cs-courts-datepicker {
    background: #0b0e14;
    border-color: rgba(var(--club-accent-rgb, 245, 166, 35), 0.5);
    box-shadow:
        0 0 0 1px rgba(var(--club-accent-rgb, 245, 166, 35), 0.35),
        0 0 18px rgba(var(--club-accent-rgb, 245, 166, 35), 0.3),
        0 18px 42px rgba(0, 0, 0, 0.65);
}
html.night-mode .cs-dp-title,
html.night-mode .cs-dp-cell {
    color: #ffffff;
}
html.night-mode .cs-dp-nav { color: #ffffff; }
html.night-mode .cs-dp-nav:hover,
html.night-mode .cs-dp-cell:hover:not(.cs-dp-cell--blank):not(.is-selected) {
    background: rgba(255, 255, 255, 0.08);
}
html.night-mode .cs-dp-weekdays { color: rgba(255, 255, 255, 0.55); }
.cs-courts-legend {
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.78rem;
    color: var(--club-muted);
    margin-bottom: 16px;
}
.cs-courts-legend-item { display: inline-flex; align-items: center; gap: 6px; }
.cs-courts-legend-sw {
    width: 22px; height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.cs-courts-legend-sw--open { background: rgba(255,255,255,0.12); border: 1px solid var(--club-border); }
.cs-courts-legend-sw--busy { background: var(--club-accent); }
/* Night mode: match the timeline treatment — Available swatch goes tennis-
   ball green (same #A3D228 as the hour ticks), Booked swatch keeps the
   club accent but picks up a sharp white glow so it pops against the
   dark section. */
html.night-mode .cs-courts-legend-sw--open {
    background: rgba(163, 210, 40, 0.75);
    border-color: rgba(163, 210, 40, 0.9);
    box-shadow: 0 0 4px rgba(163, 210, 40, 0.6);
}
html.night-mode .cs-courts-legend-sw--busy {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 0 6px rgba(255, 255, 255, 0.55),
        0 0 12px rgba(255, 255, 255, 0.3);
}
.cs-courts-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: opacity 0.18s ease;
}
/* Soft in-place refresh when navigating between days — header/legend stay
   pinned, grid dims slightly so the user feels a fetch is happening without
   the cards vanishing and reappearing. */
.cs-courts-grid.is-loading { opacity: 0.55; }
.cs-court-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 14px;
    padding: 14px 16px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.cs-court-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.14);
    transform: translateY(-1px);
}
/* Glow-sequence animation — fires once when the Courts section first enters
   the viewport. Each card pulses with an accent-coloured halo for 500ms, 500ms
   apart, so the cascade runs from Court A → Court E in ~3 seconds. */
.is-court-glow .cs-court-card {
    animation: cs-court-pulse 500ms ease-out 0ms 1;
}
.is-court-glow .cs-court-card:nth-child(1) { animation-delay: 0ms;    }
.is-court-glow .cs-court-card:nth-child(2) { animation-delay: 500ms;  }
.is-court-glow .cs-court-card:nth-child(3) { animation-delay: 1000ms; }
.is-court-glow .cs-court-card:nth-child(4) { animation-delay: 1500ms; }
.is-court-glow .cs-court-card:nth-child(5) { animation-delay: 2000ms; }
.is-court-glow .cs-court-card:nth-child(6) { animation-delay: 2500ms; }
.is-court-glow .cs-court-card:nth-child(7) { animation-delay: 3000ms; }
.is-court-glow .cs-court-card:nth-child(8) { animation-delay: 3500ms; }
@keyframes cs-court-pulse {
    0% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        transform: scale(1);
    }
    40% {
        box-shadow:
            0 0 0 2.5px var(--club-accent),
            0 0 14px var(--club-accent),
            0 0 32px var(--club-accent),
            0 6px 18px rgba(0, 0, 0, 0.2);
        transform: scale(1.015);
    }
    100% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        transform: scale(1);
    }
}
/* Light-mode variant of the cascade pulse — softer so a dark club accent
   doesn't paint a harsh navy ring across the viewport. */
html:not(.night-mode) .is-court-glow .cs-court-card {
    animation-name: cs-court-pulse-soft;
}
@keyframes cs-court-pulse-soft {
    0% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        transform: scale(1);
    }
    40% {
        box-shadow:
            0 0 0 1.5px color-mix(in srgb, var(--club-accent) 55%, transparent),
            0 0 8px  color-mix(in srgb, var(--club-accent) 30%, transparent),
            0 0 18px color-mix(in srgb, var(--club-accent) 18%, transparent),
            0 4px 12px rgba(0, 0, 0, 0.14);
        transform: scale(1.012);
    }
    100% {
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        transform: scale(1);
    }
}
/* .is-ctrl-glow previously swapped in a heavier accent halo on the date
   controls. The base rule now carries the same currentColor halo style
   as the header nav buttons, so this class is kept as a no-op hook for
   backwards compatibility with any JS that still toggles it. */
.cs-courts-root.is-ctrl-glow .cs-courts-nav,
.cs-courts-root.is-ctrl-glow .cs-courts-date-btn {
    /* intentionally empty — base style wins */
}
/* Shared accent-halo hover effect — matches the court-card pulse peak so
   every hoverable surface (cards, rows, buttons, nav controls) glows the
   same way the court cards do when they cascade. Transitioned so the glow
   fades in/out smoothly. */
.cs-feed-card,
.cs-membership-card,
.cs-faq-item,
.cs-coach-card,
.cs-facility-card,
.cs-fac-row,
.cs-court-card,
.cs-gallery-item,
.cs-coach-enquiry-card,
.cs-btn--accent,
.cs-btn--cart,
.cs-btn--outline,
.cs-mymem-edit-btn,
.cs-map-banner-pill {
    transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.2s ease;
}
.cs-feed-card:hover,
.cs-membership-card:hover,
.cs-faq-item:hover,
.cs-faq-item.open,
.cs-coach-card:hover,
.cs-facility-card:hover,
.cs-fac-row:hover,
.cs-court-card:hover,
.cs-gallery-item:hover,
.cs-btn--accent:hover,
.cs-btn--cart:hover,
.cs-btn--outline:hover,
.cs-mymem-edit-btn:hover,
.cs-map-banner-pill:hover {
    box-shadow:
        0 0 0 2.5px var(--club-accent),
        0 0 14px var(--club-accent),
        0 0 32px var(--club-accent),
        0 6px 18px rgba(0, 0, 0, 0.26) !important;
    border-color: var(--club-accent) !important;
}
/* Light mode: the hover halo above reads as too heavy on clubs with a
   dark accent (e.g. Eldoraigne navy) — three layers of full-alpha accent
   bloom against a white canvas becomes an opaque border. Soften the
   outer layers and kill the dark ambient drop. */
html:not(.night-mode) .cs-feed-card:hover,
html:not(.night-mode) .cs-membership-card:hover,
html:not(.night-mode) .cs-faq-item:hover,
html:not(.night-mode) .cs-faq-item.open,
html:not(.night-mode) .cs-coach-card:hover,
html:not(.night-mode) .cs-facility-card:hover,
html:not(.night-mode) .cs-fac-row:hover,
html:not(.night-mode) .cs-court-card:hover,
html:not(.night-mode) .cs-gallery-item:hover,
html:not(.night-mode) .cs-btn--accent:hover,
html:not(.night-mode) .cs-btn--cart:hover,
html:not(.night-mode) .cs-btn--outline:hover,
html:not(.night-mode) .cs-mymem-edit-btn:hover,
html:not(.night-mode) .cs-map-banner-pill:hover {
    box-shadow:
        0 0 0 1.5px color-mix(in srgb, var(--club-accent) 55%, transparent),
        0 0 8px color-mix(in srgb, var(--club-accent) 30%, transparent),
        0 0 18px color-mix(in srgb, var(--club-accent) 18%, transparent),
        0 4px 12px rgba(0, 0, 0, 0.12) !important;
    border-color: color-mix(in srgb, var(--club-accent) 60%, transparent) !important;
}
/* Court-card cascade pulse runs once on enter — hover while it's still
   animating must not fight the keyframe. The control glow is now a steady
   held state (no animation), so it doesn't need the pause override. */
.is-court-glow .cs-court-card:hover {
    animation-play-state: paused;
}

/* Carousel card hover — regardless of data-dist, pop the card to full
   scale/opacity/brightness so the visitor can "pull" any side card into
   focus by hovering it. The shared :hover rule supplies the accent halo;
   this rule only fights the data-dist fade. */
.cs-carousel-track > .cs-carousel-card:hover {
    opacity: 1 !important;
    transform: scale(1.02) !important;
    filter: brightness(1.05) !important;
    z-index: 2;
}

/* cs-courts-ctrl-pulse was removed — replaced with a steady held glow on the
   .is-ctrl-glow selector above. */
.cs-court-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
}
.cs-court-badge {
    width: 34px; height: 34px;
    border-radius: 8px;
    background: var(--club-border);
    color: var(--club-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 0.95rem;
}
.cs-court-name { font-weight: 700; font-size: 0.95rem; flex: 1; }
.cs-court-light { color: #facc15; margin-left: 4px; font-size: 0.95rem; vertical-align: middle; }
.cs-court-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
}
.cs-court-pill--open {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
    border: 1px solid rgba(34, 197, 94, 0.3);
}
.cs-court-pill--busy {
    background: var(--club-accent);
    color: var(--club-accent-text, #ffffff);
    border: 1px solid var(--club-accent);
}
/* Night mode: accent pill gets a subtle white ring so it reads on black */
html.night-mode .cs-court-pill--busy {
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.cs-court-pill .mdi { font-size: 0.95rem; }
.cs-court-timeline {
    margin-top: 6px;
}
.cs-court-bar {
    position: relative;
    height: 18px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--club-border);
    overflow: hidden;
}
.cs-court-tick {
    position: absolute;
    top: 2px; bottom: 2px;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
    pointer-events: none;
}
.cs-court-seg {
    position: absolute;
    top: 0; bottom: 0;
    background: var(--club-accent);
    opacity: 0.85;
}
/* Half-hour boundary tapers — clip-path slices the leading / trailing edge
   diagonally so a booking starting or ending on :30 reads as a triangular
   tip rather than a sudden rectangle cut. `--cs-half-pct` is the length of
   the taper as a % of the SEGMENT'S own width, set inline by the renderer. */
.cs-court-seg--half-start {
    clip-path: polygon(
        var(--cs-half-pct, 0) 0,
        100% 0,
        100% 100%,
        0 100%
    );
}
.cs-court-seg--half-end {
    clip-path: polygon(
        0 0,
        calc(100% - var(--cs-half-pct, 0)) 0,
        100% 100%,
        0 100%
    );
}
.cs-court-seg--half-start.cs-court-seg--half-end {
    clip-path: polygon(
        var(--cs-half-pct, 0) 0,
        calc(100% - var(--cs-half-pct, 0)) 0,
        100% 100%,
        0 100%
    );
}
/* Night mode: bar + ticks carry the accent treatment — a faint accent fill
   for the bar, accent-tinted border, and the hour ticks switch to the
   club's own colour with a small glow so the timeline reads as part of
   the glow system instead of a plain grey strip. */
html.night-mode .cs-court-bar {
    /* Outline + inset glow in tennis-ball green (#A3D228) to match the hour
       ticks and Available legend pill — bar reads as a literal court
       timeline rather than competing with the club's brand accent
       everywhere else on the card. Inside fill stays faintly accent-tinted
       so each club still stamps its colour on the bar body. */
    background: rgba(var(--club-accent-rgb, 245, 166, 35), 0.08);
    border-color: rgba(163, 210, 40, 0.7);
    box-shadow: 0 0 12px rgba(163, 210, 40, 0.3) inset;
}
html.night-mode .cs-court-tick {
    /* Tennis-ball green (#A3D228) — same shade the main landing and
       committee-selectable spotlights use. Reads as a literal tennis-ball
       colour rather than competing with the club's accent elsewhere on
       the card. */
    background: rgba(163, 210, 40, 0.75);
    box-shadow: 0 0 4px rgba(163, 210, 40, 0.75);
}
/* Booked-segment glow in night mode — crisp white halo matching the
   "Booked" legend swatch so the booked state POPS against the dark
   canvas + green timeline ticks. Overflow on the bar is "hidden" so the
   outer halo is visually clipped to the bar's top/bottom edges — that's
   fine, the glow still registers where it matters (above/below each
   segment's position on the bar strip). */
html.night-mode .cs-court-seg {
    opacity: 1;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.55),
        0 0 6px rgba(255, 255, 255, 0.6),
        0 0 12px rgba(255, 255, 255, 0.32);
}
.cs-court-hours {
    display: flex;
    justify-content: space-between;
    margin-top: 4px;
    font-size: 0.7rem;
    color: var(--club-muted);
}
@media (max-width: 520px) {
    .cs-court-hours span:nth-child(even) { visibility: hidden; }
}

/* ── Facilities ─────────────────────────────────────────────── */
.cs-facilities-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}
.cs-facility-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    overflow: hidden;
}
.cs-facility-img {
    height: 180px;
    background: var(--club-border);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; color: var(--club-muted);
    position: relative;
}
.cs-facility-img img { width:100%; height:100%; object-fit:cover; }
.cs-facility-body { padding: 16px; }
.cs-facility-name { font-weight: 700; margin-bottom: 6px; }
.cs-facility-desc { font-size: 0.82rem; color: var(--club-muted); margin-bottom: 8px; }
.cs-facility-rate { font-size: 0.85rem; color: var(--club-accent); font-weight: 600; }
.cs-facility-cta { padding: 12px 16px 16px; }

/* ── Facilities row layout — 1fr 1fr with image-side toggle + fade slideshow */
.cs-facilities-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}
.cs-fac-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center;
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    overflow: hidden;
    padding: 0;
}
.cs-fac-row--right { direction: rtl; }
.cs-fac-row--right > * { direction: ltr; }
.cs-fac-media {
    position: relative;
    aspect-ratio: 1 / 1;
    background: var(--club-border);
    overflow: hidden;
    /* Match the parent card's rounded corners on ALL four sides (the grid-cell
       image would otherwise leave the inner two corners square where it meets
       the text column). Inset slightly so the rounding is visible inside the
       row's own radius. */
    border-radius: var(--club-radius);
    margin: 14px;
    /* Light mode: soft dark ambient drop for depth. Night mode override below
       swaps this for a white halo so the image reads against the black canvas. */
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.22), 0 2px 6px rgba(0, 0, 0, 0.12);
}
html.night-mode .cs-fac-media {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.25),
        0 0 14px rgba(255, 255, 255, 0.28),
        0 0 34px rgba(255, 255, 255, 0.18);
}
.cs-fac-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.9s ease;
}
.cs-fac-slide.is-active { opacity: 1; }
.cs-fac-slide--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.6rem;
    color: var(--club-muted);
    opacity: 1;  /* stays visible — nothing to fade to */
}
.cs-fac-slide--empty .mdi { font-size: 3.6rem; }
.cs-fac-body {
    padding: 22px 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-fac-name {
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--club-text);
}
.cs-fac-desc {
    font-size: 0.95rem;
    color: var(--club-muted);
    line-height: 1.55;
    white-space: pre-wrap;
}
.cs-fac-rate {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--club-accent);
}
.cs-fac-cta { margin-top: 4px; }
.cs-fac-cta .cs-btn { align-self: flex-start; }
@media (max-width: 720px) {
    .cs-fac-row,
    .cs-fac-row--right {
        grid-template-columns: 1fr;
        direction: ltr;
    }
    .cs-fac-body { padding: 18px 20px 22px; }
}

/* ── FAQ ────────────────────────────────────────────────────── */
.cs-faq-list {
    display: flex;
    flex-direction: column;
    gap: var(--club-card-gap, 12px);
    max-width: 820px;
    margin: 0 auto;
}
.cs-faq-item {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: var(--club-radius);
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: box-shadow 0.2s, transform 0.2s;
}
.cs-faq-item:hover { box-shadow: 0 6px 20px rgba(0,0,0,0.14); transform: translateY(-1px); }
.cs-faq-item.open { box-shadow: 0 10px 28px rgba(0,0,0,0.18); }
.cs-faq-question {
    width: 100%;
    background: none;
    border: none;
    color: var(--club-card-text, var(--club-text));
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 20px 24px;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.cs-faq-question i { flex-shrink: 0; transition: transform 0.2s; color: var(--club-accent); font-size: 1.3rem; }
.cs-faq-item.open .cs-faq-question i { transform: rotate(180deg); }
.cs-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.2s;
    padding: 0 24px;
    color: var(--club-card-muted, var(--club-muted));
    font-size: 0.9rem;
    line-height: 1.6;
}
.cs-faq-item.open .cs-faq-answer { max-height: 400px; padding: 0 24px 22px; }

/* ── Contact ────────────────────────────────────────────────── */
.cs-contact-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
/* No map → collapse to a single full-width column so the details block
   spans the whole section-inner and its centred flex rows actually
   sit in the middle. */
.cs-contact-layout--single {
    grid-template-columns: 1fr;
}
.cs-contact-details-wrap {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cs-contact-details {
    /* Address · phone · email on a single row on desktop (flex wrap),
       collapses to stacked rows on narrow viewports. Centred by default
       to match the section's title/divider alignment. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 14px 32px;
    margin-bottom: 20px;
}
.cs-contact-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.9rem;
}
.cs-contact-row i { font-size: 1.2rem; color: var(--club-accent); flex-shrink: 0; }
.cs-contact-row span { word-break: break-word; }
.cs-contact-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}
@media (max-width: 640px) {
    /* Narrow viewports — address / phone / email stack cleanly as rows. */
    .cs-contact-details { flex-direction: column; align-items: center; gap: 10px; }
}
.cs-map-embed { border-radius: var(--club-radius); overflow: hidden; background: var(--club-border); }
.cs-map-embed iframe { width: 100%; height: 300px; border: none; display: block; }

/* Map banner — full-width zoomed map at the bottom of the Contact section,
   clickable overlay opens Google Maps (native app on mobile). iframe is
   pointer-events:none so scrolls pass through to the page; the transparent
   anchor captures the click. */
/* Map + Street View side-by-side wrapper. On narrow screens the Street View
   panel stacks below the map. */
.cs-map-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: 22px;
    width: 100%;
}
@media (max-width: 880px) {
    .cs-map-wrap {
        grid-template-columns: 1fr;
    }
}
.cs-streetview-banner {
    position: relative;
    border-radius: var(--club-radius);
    overflow: hidden;
    min-height: 280px;
}
.cs-streetview-frame {
    width: 100%;
    height: 280px;
    border: 0;
    display: block;
}
.cs-streetview-loading,
.cs-streetview-card {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 28px 20px;
    text-align: center;
    text-decoration: none;
    color: var(--club-text);
    /* Branded gradient tile — matches the map's card feel */
    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,0.08), transparent 60%),
        linear-gradient(135deg, var(--club-accent), var(--club-bg));
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.cs-streetview-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, 0.25);
}
.cs-streetview-card-icon .mdi {
    font-size: 3.4rem;
    color: #ffffff;
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.25));
}
.cs-streetview-card-title {
    font-size: 1.4rem;
    font-weight: 800;
    color: #ffffff;
    letter-spacing: 0.01em;
}
.cs-streetview-card-sub {
    font-size: 0.88rem;
    color: rgba(255, 255, 255, 0.78);
    max-width: 260px;
    line-height: 1.4;
}
.cs-streetview-card-cta {
    margin-top: 6px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.2rem;
    transition: background 0.18s ease;
}
.cs-streetview-card:hover .cs-streetview-card-cta {
    background: rgba(255, 255, 255, 0.3);
}
.cs-streetview-loading { color: var(--club-muted); }
.cs-streetview-loading .mdi {
    font-size: 2.4rem;
    opacity: 0.5;
}
.cs-map-banner {
    position: relative;
    border-radius: var(--club-radius);
    overflow: hidden;
    /* Full width of its grid column */
    width: 100%;
    background: var(--club-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
}
.cs-map-banner-frame {
    width: 100%;
    height: 280px;
    border: 0;
    display: block;
    /* Iframe is fully interactive — pan, ctrl+scroll zoom, street view,
       satellite toggle all work. The "Open in Google Maps" pill floats in
       a corner and is the only overlay element, so it can't trap drag
       gestures on the map itself. */
}
/* Floating corner pill — pushed clear of Google's own bottom-left
   Map/Satellite/Street-view toggle and the bottom-right fullscreen button.
   Sits on the left but offset inward so the Google control remains tappable. */
.cs-map-banner-pill {
    position: absolute;
    bottom: 14px;
    left: 180px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #ffffff;
    color: #111;
    font-size: 0.78rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 3px 10px rgba(0,0,0,0.22);
    z-index: 2;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    line-height: 1.4;
}
.cs-map-banner-pill .mdi { font-size: 0.95rem; }
.cs-map-banner-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.3);
}
/* Narrow viewports: drop the pill above Google's bottom controls so it
   doesn't overlap on phones. Top-left would collide with the place card;
   top-right clears everything. */
@media (max-width: 600px) {
    .cs-map-banner-pill {
        top: 14px;
        bottom: auto;
        left: auto;
        right: 14px;
    }
}
.cs-map-banner-pill .mdi { color: var(--club-accent); font-size: 1.05rem; }
html.night-mode .cs-map-banner-pill {
    background: #0a0d14;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.5);
}

/* ── CTA Strip ──────────────────────────────────────────────── */
.cs-cta-strip {
    background: var(--club-accent);
    padding: 72px 20px;
    text-align: center;
}
.cs-cta-strip h2 { font-size: clamp(1.4rem, 4vw, 2.2rem); color: #0a0d14; font-weight: 800; margin-bottom: 24px; }
.cs-cta-strip .cs-btn { background: #0a0d14; color: var(--club-accent); }

/* ── Video ──────────────────────────────────────────────────── */
.cs-video-wrap { position: relative; padding-bottom: 56.25%; height: 0; border-radius: var(--club-radius); overflow: hidden; }
.cs-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; }

/* ── Documents ──────────────────────────────────────────────── */
.cs-doc-list { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.cs-doc-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 10px;
    font-size: 0.9rem;
    transition: border-color 0.15s;
}
.cs-doc-link:hover { border-color: var(--club-accent); }
.cs-doc-link i { color: var(--club-accent); font-size: 1.1rem; }

/* ── Sponsors ───────────────────────────────────────────────── */
.cs-sponsors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: center;
    justify-content: center;
}
.cs-sponsor-logo {
    height: 60px;
    max-width: 160px;
    object-fit: contain;
    opacity: 0.75;
    filter: grayscale(30%);
    transition: opacity 0.2s;
}
.cs-sponsor-logo:hover { opacity: 1; filter: none; }

/* ── Lightbox ───────────────────────────────────────────────── */
.cs-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.9);
    z-index: 500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.cs-lightbox-close {
    position: absolute;
    top: 16px; right: 16px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 1.4rem;
    width: 40px; height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-lightbox-img { max-width: 90vw; max-height: 88vh; border-radius: 10px; object-fit: contain; }

/* ── WhatsApp FAB ───────────────────────────────────────────── */
.cs-wa-fab {
    position: fixed;
    bottom: 24px; right: 24px;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    font-size: 1.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Light mode: dark drop for depth on bright surfaces. */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3), 0 2px 6px rgba(0, 0, 0, 0.18);
    z-index: 50;
    transition: transform 0.18s ease, box-shadow 0.2s ease;
}
.cs-wa-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.38), 0 2px 6px rgba(0, 0, 0, 0.22);
}
/* Night mode: white halo so the green chip reads against the black canvas.
   Hover bumps the outer bloom a touch. */
html.night-mode .cs-wa-fab {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.28),
        0 0 14px rgba(255, 255, 255, 0.25),
        0 0 32px rgba(37, 211, 102, 0.35);
}
html.night-mode .cs-wa-fab:hover {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.4),
        0 0 22px rgba(255, 255, 255, 0.36),
        0 0 46px rgba(37, 211, 102, 0.5);
}

/* Social media floating stack — mirrors the WhatsApp FAB on the opposite edge.
   Vertical column of 44px circular buttons at bottom-left. Brand colours per
   icon match the member-portal coaching social chips. */
.cs-social-fabs {
    position: fixed;
    bottom: 24px;
    left: 24px;
    display: flex;
    flex-direction: column-reverse;  /* most important icon anchored to the bottom */
    gap: 10px;
    z-index: 50;
}
.cs-social-fab {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    /* Light mode: dark drop for depth. */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28), 0 2px 5px rgba(0, 0, 0, 0.16);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    font-size: 1.2rem;
}
.cs-social-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.38), 0 2px 5px rgba(0, 0, 0, 0.2);
}
.cs-social-fab svg { width: 22px; height: 22px; }
.cs-social-fab .mdi { font-size: 1.4rem; }
.cs-social-fab--fb { background: #1877F2; }
.cs-social-fab--ig {
    /* Instagram gradient — mimics the app icon background */
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.cs-social-fab--tt { background: #000000; position: relative; }
.cs-social-fab--tt::after {
    /* Subtle TikTok cyan/magenta glow around the black chip */
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 50%;
    background: linear-gradient(135deg, #25F4EE, #FE2C55);
    z-index: -1;
    filter: blur(3px);
    opacity: 0.55;
}
/* Night mode — keep brand colours (they ARE the icon identity) and add a
   proper white halo so bright/dark chips both read against the black canvas.
   Hover intensifies the bloom. */
html.night-mode .cs-social-fab {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.28),
        0 0 12px rgba(255, 255, 255, 0.22),
        0 0 28px rgba(255, 255, 255, 0.12);
}
html.night-mode .cs-social-fab:hover {
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.4),
        0 0 20px rgba(255, 255, 255, 0.34),
        0 0 40px rgba(255, 255, 255, 0.2);
}

/* ── Footer ─────────────────────────────────────────────────── */
/* Footer — club accent as the canvas, white text throughout. Feels like
   a deliberate brand block instead of a muted grey dropout. */
.cs-footer {
    background: var(--club-accent);
    color: #ffffff;
    border-top: 1px solid var(--club-border);
    padding: 40px 20px;
}
.cs-footer-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}
.cs-footer-brand { display: flex; align-items: center; gap: 10px; color: #ffffff; }
.cs-footer-logo { width: 32px; height: 32px; border-radius: 8px; object-fit: cover; }
.cs-footer-name { font-weight: 700; color: #ffffff; }
.cs-footer-links { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; }
.cs-footer-links a { font-size: 0.85rem; color: #ffffff; text-decoration: none; opacity: 0.85; transition: opacity 0.15s ease; }
.cs-footer-links a:hover { opacity: 1; text-decoration: underline; }
.cs-footer-powered { font-size: 0.8rem; color: rgba(255,255,255,0.82); }
/* "Mzansi Court Q" link always renders in the brand orange — it's a
   fixed wordmark, not part of the per-club palette. Day + night. */
.cs-footer-powered a { color: #FF6A00 !important; text-decoration: none; }
.cs-footer-powered a:hover { color: #D95800 !important; }
.cs-footer-copy { font-size: 0.75rem; color: rgba(255,255,255,0.75); }
/* Night mode keeps the accent block but lifts the accent slightly so it
   reads on the black canvas without looking washed out. */
html.night-mode .cs-footer {
    background: var(--club-accent);
    border-top-color: rgba(255, 255, 255, 0.12);
}

/* ── Cart Backdrop ───────────────────────────────────────────── */
.cs-cart-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}
.cs-cart-backdrop.open { opacity: 1; pointer-events: all; }

/* ── Cart Drawer ─────────────────────────────────────────────── */
.cs-cart-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 400px;
    max-width: 100vw;
    height: 100vh;
    background: var(--club-bg);
    border-left: 1px solid var(--club-border);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.cs-cart-drawer.open { transform: translateX(0); }

.cs-cart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    border-bottom: 1px solid var(--club-border);
    flex-shrink: 0;
}
.cs-cart-title { font-weight: 700; font-size: 1.05rem; display: flex; align-items: center; gap: 8px; }
.cs-cart-close-btn {
    background: none;
    border: none;
    color: var(--club-muted);
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    border-radius: 50%;
    transition: color 0.15s, background 0.15s;
}
.cs-cart-close-btn:hover { color: var(--club-text); background: var(--club-card-bg); }

.cs-cart-body { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }

.cs-cart-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--club-muted);
}
.cs-cart-empty i { font-size: 3rem; display: block; margin-bottom: 12px; opacity: 0.3; }

/* Logged-in confirmation block inside the Confirm Your Order modal.
   Shows the account holder's avatar initial + name so they know which
   account the order will be added to. Previously had no CSS, so the
   avatar letter rendered bare (looked like selection highlight) and
   the name row had no layout. */
.cs-co-logged-in {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 12px;
    margin-top: 14px;
}
.cs-co-logged-in-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--club-accent);
    color: var(--club-accent-text, #ffffff);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    flex-shrink: 0;
}
.cs-co-logged-in-info { flex: 1; min-width: 0; }
.cs-co-logged-in-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--club-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cs-co-logged-in-email {
    font-size: 0.78rem;
    color: var(--club-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
html.night-mode .cs-co-logged-in {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.12);
}
.cs-cart-empty-cta {
    margin-top: 20px;
    color: #ffffff;
}
.cs-cart-empty-cta i { font-size: 1rem; color: #ffffff; }

.cs-cart-item {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-cart-item-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}
.cs-cart-item-color {
    width: 4px;
    border-radius: 2px;
    flex-shrink: 0;
    align-self: stretch;
    min-height: 36px;
}
.cs-cart-item-info { flex: 1; min-width: 0; }
.cs-cart-item-name { font-weight: 600; font-size: 0.92rem; }
.cs-cart-item-price { font-size: 0.82rem; color: var(--club-accent); margin-top: 2px; }
.cs-cart-item-discount { font-size: 0.75rem; color: var(--club-muted); text-decoration: line-through; }

.cs-qty-controls {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.cs-qty-btn {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid var(--club-border);
    background: none;
    color: var(--club-text);
    font-size: 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, color 0.15s;
    line-height: 1;
}
.cs-qty-btn:hover { border-color: var(--club-accent); color: var(--club-accent); }
.cs-qty-value { font-weight: 600; font-size: 0.9rem; min-width: 20px; text-align: center; }

/* Family discount notice inside cart item */
.cs-cart-family-note {
    font-size: 0.75rem;
    color: var(--club-muted);
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 6px;
    border-left: 3px solid var(--club-accent);
}

/* Cart breakdown — shows subscription / joining fee / deposit lines above the
   total so the buyer understands why the first debit is bigger than the
   recurring amount. */
.cs-cart-breakdown {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    font-size: 0.82rem;
    color: var(--club-text, #fff);
}
.cs-cart-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}
.cs-cart-breakdown-hint {
    font-size: 0.7rem;
    color: var(--club-muted, rgba(255,255,255,0.55));
    font-style: italic;
    margin-left: 4px;
}

/* Billing-mode toggle (Monthly | Annual) — shown on tier lines that offer both
   pricing modes. Default selection is Monthly; tap toggles the cart line. */
.cs-cart-billing-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-top: 8px;
}
.cs-billing-pill {
    appearance: none;
    border: 1px solid rgba(255,255,255,0.16);
    background: rgba(255,255,255,0.04);
    color: var(--club-text, #fff);
    border-radius: 999px;
    padding: 8px 12px;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .12s ease;
}
.cs-billing-pill:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.24); }
.cs-billing-pill:active { transform: scale(0.97); }
.cs-billing-pill.is-active {
    background: var(--club-accent);
    color: var(--club-accent-text, #0a0d14);
    border-color: var(--club-accent);
    font-weight: 600;
}

/* Dependent member chips */
.cs-cart-dependents { display: flex; flex-direction: column; gap: 6px; }
.cs-cart-dep-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.04);
    border-radius: 8px;
    font-size: 0.8rem;
}
.cs-cart-dep-chip i { color: var(--club-accent); font-size: 0.85rem; }

/* ── Cart item: per-child chips + Edit button ─────────────────── */
.cs-cart-children {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}
.cs-cart-child-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--club-border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--club-text);
    white-space: nowrap;
}
.cs-cart-child-chip i {
    color: var(--club-accent);
    font-size: 0.9rem;
}
.cs-cart-child-edit {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: 1px dashed var(--club-border);
    color: var(--club-muted);
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.72rem;
    font-family: inherit;
    cursor: pointer;
    font-weight: 500;
    transition: color 0.15s, border-color 0.15s;
}
.cs-cart-child-edit:hover {
    color: var(--club-accent);
    border-color: var(--club-accent);
}
.cs-cart-child-count {
    color: var(--club-muted);
    font-weight: 500;
    font-size: 0.8rem;
}
/* Trash variant for qty dec when line has children */
.cs-qty-btn--remove {
    border: 1.5px solid var(--club-border);
    color: var(--club-muted);
}
.cs-qty-btn--remove:hover { color: #ff5252; border-color: #ff5252; }

/* ── Children-capture modal ───────────────────────────────────── */
.cs-children-intro {
    margin: 0 0 16px;
    padding: 10px 14px;
    background: rgba(255,255,255,0.04);
    border-left: 3px solid var(--club-accent);
    border-radius: 6px;
    font-size: 0.85rem;
    color: var(--club-muted);
    line-height: 1.5;
}
#cs-children-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cs-child-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.cs-child-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.cs-child-card-title {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--club-text);
}
.cs-child-remove {
    background: transparent;
    border: none;
    color: var(--club-muted);
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    display: inline-flex;
    transition: color 0.15s, background 0.15s;
}
.cs-child-remove:hover { color: #ff5252; background: rgba(255,82,82,0.08); }
.cs-child-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.cs-child-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.82rem;
    color: var(--club-muted);
}
.cs-child-field > span {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--club-muted);
}
.cs-child-field input,
.cs-child-field textarea {
    background: var(--club-bg);
    border: 1px solid var(--club-border);
    border-radius: 8px;
    padding: 8px 10px;
    color: var(--club-text);
    font-size: 0.88rem;
    font-family: inherit;
    transition: border-color 0.15s;
}
.cs-child-field input:focus,
.cs-child-field textarea:focus {
    outline: none;
    border-color: var(--club-accent);
}
.cs-child-field textarea {
    resize: vertical;
    min-height: 54px;
}
.cs-children-add {
    margin-top: 14px;
    width: 100%;
    justify-content: center;
}
@media (max-width: 560px) {
    .cs-child-row { grid-template-columns: 1fr; }
}

/* ── My Memberships drawer ───────────────────────────────────── */
.cs-mymem-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    z-index: 1099;
}
.cs-mymem-backdrop.open { opacity: 1; pointer-events: auto; }
.cs-mymem-drawer {
    position: fixed;
    top: 0;
    right: 0;
    width: 420px;
    max-width: 100vw;
    height: 100vh;
    background: var(--club-bg);
    border-left: 1px solid var(--club-border);
    z-index: 1100;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1);
    overflow: hidden;
}
.cs-mymem-drawer.open { transform: translateX(0); }
.cs-mymem-loading {
    text-align: center;
    padding: 60px 20px;
    color: var(--club-muted);
    font-size: 0.9rem;
}
.cs-mymem-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--club-muted);
    font-size: 0.88rem;
}
.cs-mymem-empty i { font-size: 2rem; opacity: 0.4; display: block; margin-bottom: 8px; }

.cs-mymem-welcome {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 0 14px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--club-border);
}
.cs-mymem-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--club-accent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 1.2rem;
    flex-shrink: 0;
}
.cs-mymem-welcome-name { font-weight: 700; font-size: 1rem; color: var(--club-text); }
.cs-mymem-welcome-sub  { font-size: 0.78rem; color: var(--club-muted); margin-top: 2px; }

.cs-mymem-card {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.cs-mymem-card-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    margin-bottom: 10px;
}
.cs-mymem-card-title { font-weight: 700; font-size: 0.95rem; color: var(--club-text); }
.cs-mymem-card-sub   { font-size: 0.78rem; color: var(--club-muted); margin-top: 3px; }
.cs-mymem-card-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
    padding: 6px 0;
    border-top: 1px solid var(--club-border);
    color: var(--club-muted);
}
.cs-mymem-card-row strong { color: var(--club-text); }

.cs-mymem-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cs-mymem-status--active  { background: rgba(40,167,69,0.15);   color: #22c55e; }
.cs-mymem-status--grace   { background: rgba(245,158,11,0.15);  color: #f59e0b; }
.cs-mymem-status--lapsed  { background: rgba(239,68,68,0.15);   color: #ef4444; }

.cs-mymem-edit-btn {
    background: transparent;
    border: 1px solid var(--club-border);
    color: var(--club-muted);
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 0.95rem;
    margin-left: 8px;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.cs-mymem-edit-btn:hover {
    color: var(--club-accent);
    border-color: var(--club-accent);
    background: rgba(255,255,255,0.03);
}

.cs-mymem-committee-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 8px;
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border: 1px solid var(--club-border);
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--club-accent);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.cs-mymem-committee-badge i { font-size: 0.85rem; }

.cs-mymem-section-title {
    font-weight: 700;
    font-size: 0.82rem;
    color: var(--club-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 16px 0 8px;
}
.cs-mymem-count { color: var(--club-muted); font-weight: 500; text-transform: none; letter-spacing: 0; }

.cs-mymem-family-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cs-mymem-family-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 10px;
}
.cs-mymem-family-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--club-muted);
    flex-shrink: 0;
}
.cs-mymem-family-info { flex: 1; min-width: 0; }
.cs-mymem-family-name { font-weight: 600; font-size: 0.88rem; color: var(--club-text); }
.cs-mymem-family-sub  { font-size: 0.75rem; color: var(--club-muted); margin-top: 2px; }
.cs-mymem-family-pending {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #f5a623;
    background: rgba(245,166,35,0.10);
    border: 1px solid rgba(245,166,35,0.30);
    border-radius: 999px;
    padding: 2px 8px;
}
.cs-mymem-family-pending .mdi { font-size: 0.85rem; }
.cs-mymem-family-pending-cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0;
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background: rgba(245, 166, 35, 0.2);
    color: #f5a623;
    cursor: pointer;
    transition: background 0.15s ease;
}
.cs-mymem-family-pending-cancel:hover { background: rgba(245, 166, 35, 0.4); }
.cs-mymem-family-pending-cancel:disabled { opacity: 0.5; cursor: not-allowed; }
.cs-mymem-family-pending-cancel .mdi { font-size: 0.9rem !important; color: inherit !important; }

/* ── Membership details popup ────────────────────────────────────────── */
.cs-membership-details-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 4px 10px;
    background: transparent;
    border: 0;
    border-radius: 999px;
    /* Match .cs-membership-desc — same fallback chain so the link inherits
       whatever body-text colour the committee picked for this card (or the
       auto-contrasted --club-card-muted default). */
    color: var(--club-card-muted, var(--club-muted));
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: color 0.15s, text-shadow 0.2s ease;
}
.cs-membership-details-link .mdi { font-size: 0.95rem; }
/* Hover: keep the text colour, add the accent text-shadow glow. */
.cs-membership-details-link:hover {
    opacity: 1;
    text-shadow:
        0 0 6px var(--club-accent),
        0 0 14px var(--club-accent);
}
/* Night mode: same treatment but with a slightly wider glow on hover to
   match the crisp "sharp glow" language used elsewhere. */
html.night-mode .cs-membership-details-link {
    color: #ffffff;
    opacity: 1;
}
html.night-mode .cs-membership-details-link:hover {
    color: #ffffff;
    text-shadow:
        0 0 8px rgba(255, 255, 255, 0.5),
        0 0 16px var(--club-accent),
        0 0 28px var(--club-accent);
}

.cs-membership-details-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.cs-membership-details-backdrop.is-open { opacity: 1; }
.cs-membership-details-modal {
    position: relative;
    width: min(560px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    /* Solid opaque surface — --club-card-bg is often alpha-blended
       (rgba(255,255,255,0.06) default) for the in-section glass look,
       which left the modal see-through. Force pure white for light mode
       so body text reads on any club's accent-coloured hero/backdrop. */
    background: #ffffff;
    color: #0a0d14;
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.18);
    transform: translateY(10px) scale(0.98);
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
/* Light-mode text inside the modal: dark text on white, overrides the
   site-level --club-text which may be white (for navy clubs whose body
   is also dark). */
html:not(.night-mode) .cs-membership-details-modal .cs-md-title,
html:not(.night-mode) .cs-membership-details-modal .cs-md-intro,
html:not(.night-mode) .cs-membership-details-modal .cs-md-section h4 {
    color: #0a0d14;
}
html:not(.night-mode) .cs-membership-details-modal .cs-md-section div,
html:not(.night-mode) .cs-membership-details-modal .cs-md-price {
    color: rgba(10, 13, 20, 0.72);
}
html:not(.night-mode) .cs-membership-details-modal .cs-md-section {
    border-bottom-color: rgba(10, 13, 20, 0.1);
}
html:not(.night-mode) .cs-md-close {
    background: rgba(10, 13, 20, 0.08);
    color: #0a0d14;
}
html:not(.night-mode) .cs-md-close:hover { background: rgba(10, 13, 20, 0.16); }
.cs-membership-details-backdrop.is-open .cs-membership-details-modal {
    transform: translateY(0) scale(1);
}
.cs-md-close {
    position: absolute;
    top: 12px; right: 12px;
    width: 32px; height: 32px;
    display: flex; align-items: center; justify-content: center;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.08);
    color: var(--club-text);
    cursor: pointer;
    z-index: 2;
    transition: background 0.15s;
}
.cs-md-close:hover { background: rgba(0, 0, 0, 0.16); }
.cs-md-head {
    padding: 24px 28px 18px;
}
.cs-md-title-row { display: flex; align-items: center; gap: 12px; }
.cs-md-icon { font-size: 1.8rem; }
.cs-md-title {
    margin: 0;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--club-text);
}
.cs-md-price {
    margin: 10px 0 0;
    color: var(--club-muted);
    font-size: 0.95rem;
}
.cs-md-body { padding: 0 28px 8px; }
.cs-md-intro {
    margin: 0 0 18px;
    color: var(--club-text);
    line-height: 1.55;
}
.cs-md-section {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--club-border);
}
.cs-md-section:last-child { border-bottom: 0; }
.cs-md-section h4 {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--club-text);
}
.cs-md-section div {
    font-size: 0.88rem;
    line-height: 1.55;
    color: var(--club-muted);
}
.cs-md-actions {
    display: flex;
    gap: 10px;
    padding: 14px 28px 24px;
    justify-content: flex-end;
}
.cs-md-actions .cs-btn { min-width: 120px; justify-content: center; }

/* Night mode: opaque dark panel with accent ring, same treatment as the
   datepicker + confirm modals so it reads cleanly above spotlights. */
html.night-mode .cs-membership-details-modal {
    background: #0b0e14;
    box-shadow:
        0 0 0 1px rgba(var(--club-accent-rgb, 245, 166, 35), 0.35),
        0 0 22px rgba(var(--club-accent-rgb, 245, 166, 35), 0.25),
        0 24px 60px rgba(0, 0, 0, 0.7);
}
html.night-mode .cs-md-title,
html.night-mode .cs-md-intro,
html.night-mode .cs-md-section h4 {
    color: #ffffff;
}
html.night-mode .cs-md-section div,
html.night-mode .cs-md-price {
    color: rgba(255, 255, 255, 0.78);
}
html.night-mode .cs-md-close {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
html.night-mode .cs-md-close:hover { background: rgba(255, 255, 255, 0.16); }

/* ── Custom confirm / alert modals ───────────────────────────────────── */
.cs-confirm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px) saturate(1.1);
    -webkit-backdrop-filter: blur(8px) saturate(1.1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    transition: opacity 0.2s ease;
}
.cs-confirm-backdrop.is-open { opacity: 1; }
.cs-confirm-modal {
    width: min(440px, 100%);
    padding: 26px 28px 22px;
    /* Solid opaque surface — --club-card-bg is often alpha-blended
       (rgba(255,255,255,0.06) default) for the in-section glass look,
       which left the modal see-through over the spotlights/backdrop.
       Force pure white for light mode; night-mode override below swaps
       to the opaque dark panel. */
    background: #ffffff;
    color: #0a0d14;
    border-radius: 18px;
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.35),
        0 8px 20px rgba(0, 0, 0, 0.18);
    transform: translateY(8px) scale(0.98);
    transition: transform 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
/* Light-mode text inside the modal needs to be dark — overrides the
   site-level --club-text / --club-muted which may be white for dark-
   accent clubs (the surrounding drawer sits on a navy backdrop). */
html:not(.night-mode) .cs-confirm-modal .cs-confirm-title { color: #0a0d14; }
html:not(.night-mode) .cs-confirm-modal .cs-confirm-msg   { color: rgba(10, 13, 20, 0.72); }
.cs-confirm-backdrop.is-open .cs-confirm-modal {
    transform: translateY(0) scale(1);
}
.cs-confirm-title {
    margin: 0 0 10px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--club-text);
}
.cs-confirm-msg {
    margin: 0 0 22px;
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--club-muted);
}
.cs-confirm-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
.cs-confirm-actions .cs-btn { min-width: 100px; }
.cs-confirm-ok {
    background: var(--club-accent);
    color: var(--club-accent-text, #fff);
    border: 0;
    padding: 10px 18px;
    font-weight: 700;
}
.cs-confirm-ok:hover { filter: brightness(1.07); }
.cs-confirm-ok--danger {
    background: #e05c5c;
    color: #fff;
}
.cs-confirm-ok--danger:hover { background: #d24848; }

/* Night mode — opaque dark panel (same treatment as the datepicker) so it
   reads cleanly above spotlights/section glow. */
html.night-mode .cs-confirm-modal {
    background: #0b0e14;
    box-shadow:
        0 0 0 1px rgba(var(--club-accent-rgb, 245, 166, 35), 0.35),
        0 0 22px rgba(var(--club-accent-rgb, 245, 166, 35), 0.25),
        0 24px 60px rgba(0, 0, 0, 0.7);
}
html.night-mode .cs-confirm-title { color: #ffffff; }
html.night-mode .cs-confirm-msg   { color: rgba(255, 255, 255, 0.78); }
.cs-mymem-change-btn { color: var(--club-accent); }
.cs-mymem-change-btn:hover { background: rgba(255,255,255,0.04); }
.cs-mymem-fake-email {
    font-size: 0.7rem;
    background: rgba(255,255,255,0.04);
    padding: 1px 6px;
    border-radius: 4px;
    color: var(--club-muted);
}

.cs-mymem-actions { margin-top: 20px; }
.cs-mymem-hint {
    margin-top: 10px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--club-border);
    border-radius: 8px;
    font-size: 0.74rem;
    color: var(--club-muted);
    line-height: 1.5;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}
.cs-mymem-hint i {
    color: var(--club-accent);
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-top: 1px;
}

@media (max-width: 500px) {
    .cs-mymem-drawer { width: 100vw; }
}

/* ── In-page login modal ─────────────────────────────────────── */
.cs-modal--narrow { max-width: 440px; }
.cs-login-error {
    background: rgba(255,82,82,0.1);
    border: 1px solid rgba(255,82,82,0.3);
    color: #ff8080;
    padding: 10px 12px;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.85rem;
}
.cs-login-error.hidden { display: none; }
.cs-login-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px 16px;
    margin-top: 6px;
}
.cs-login-links a {
    font-size: 0.78rem;
    color: var(--club-muted);
    text-decoration: none;
}
.cs-login-links a:hover { color: var(--club-accent); text-decoration: underline; }
/* 2026-07-17 — "Not a member?" register link on the login modal. Emphasise
   with the club accent + slight weight bump so a brand-new visitor spots
   it before trying to sign in with credentials they don't have. */
.cs-login-links .cs-login-register-link {
    color: var(--club-accent);
    font-weight: 600;
}
.cs-login-links .cs-login-register-link:hover { text-decoration: underline; }
.cs-children-intro a {
    color: var(--club-accent);
    font-weight: 600;
    text-decoration: none;
}
.cs-children-intro a:hover { text-decoration: underline; }
#cs-login-club-picker.hidden { display: none; }

/* ── Adult "For me / For family member" toggle ───────────────── */
.cs-adult-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.cs-adult-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 14px;
    background: var(--club-card-bg);
    border: 1.5px solid var(--club-border);
    border-radius: 10px;
    color: var(--club-muted);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.cs-adult-toggle-btn:hover { color: var(--club-text); }
.cs-adult-toggle-btn.active {
    background: var(--club-accent);
    border-color: var(--club-accent);
    color: #ffffff;
}
.cs-adult-toggle-btn.active i { color: #ffffff; }
#cs-adult-family-form.hidden { display: none; }
#cs-adult-family-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.cs-cart-footer {
    padding: 16px 20px;
    border-top: 1px solid var(--club-border);
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cs-cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.cs-cart-total-label { font-size: 0.85rem; color: var(--club-muted); }
.cs-cart-total-amount { font-size: 1.4rem; font-weight: 800; color: var(--club-accent); }
.cs-cart-total-sub { font-size: 0.75rem; color: var(--club-muted); }

/* ── Modal Overlay ────────────────────────────────────────────── */
.cs-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.65);
    z-index: 1200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
}
.cs-modal-overlay.open { opacity: 1; pointer-events: all; }

.cs-modal {
    background: var(--club-bg);
    border: 1px solid var(--club-border);
    border-radius: 18px;
    width: 460px;
    max-width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.cs-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--club-border);
    flex-shrink: 0;
}
.cs-modal-header h3 { font-size: 1.05rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.cs-modal-close {
    background: none;
    border: none;
    color: var(--club-muted);
    font-size: 1.2rem;
    cursor: pointer;
    padding: 4px;
    display: flex;
    border-radius: 50%;
    transition: color 0.15s;
}
.cs-modal-close:hover { color: var(--club-text); }
.cs-modal-body { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.cs-modal-sub { font-size: 0.85rem; color: var(--club-muted); margin-bottom: 4px; }
.cs-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 24px 20px;
    border-top: 1px solid var(--club-border);
    flex-shrink: 0;
}
.cs-modal-footer .cs-btn { flex: 1; justify-content: center; }

/* ── Checkout Summary ─────────────────────────────────────────── */
.cs-checkout-summary {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 12px;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cs-co-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.85rem;
}
.cs-co-line-name { color: var(--club-muted); }
.cs-co-line-price { font-weight: 600; }
.cs-co-line-sub {
    font-size: 0.75rem;
    color: var(--club-muted);
    font-weight: 500;
    text-align: right;
    margin-top: 2px;
}
.cs-co-total {
    display: flex;
    justify-content: space-between;
    padding-top: 8px;
    margin-top: 4px;
    border-top: 1px solid var(--club-border);
    font-weight: 700;
    font-size: 1rem;
}
.cs-co-total--sub {
    border-top: 0;
    margin-top: 0;
    padding-top: 2px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--club-muted);
}
.cs-co-total-amount { color: var(--club-accent); }
/* Night-mode override: club-accent for some clubs (Eldoraigne = dark blue)
   disappears against a dark background. White reads cleanly on every
   dark theme and preserves the "big total" prominence. Operator flag
   2026-08-04. */
html.night-mode .cs-co-total-amount { color: #ffffff; }
.cs-co-hint {
    font-size: 0.7rem;
    color: var(--club-muted, rgba(255,255,255,0.55));
    font-style: italic;
    font-weight: 400;
    margin-left: 4px;
}
/* Disabled Proceed button — visible greying so the user understands the
   form needs completing first. Pointer-events still active so any
   accidental click is silently ignored (form re-validates on input
   anyway). */
#cs-checkout-submit:disabled,
#cs-checkout-submit[aria-disabled="true"] {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* Redirect lock — fires when the server has accepted the checkout and
   we're about to submit the hidden PayFast form. PayFast's /eng/process
   takes 1-3s to provision the hosted page, during which the page LOOKS
   frozen and a panicked buyer might double-click. The lock hides the
   form/buttons and shows a clear 'Redirecting to PayFast…' panel so the
   wait is visibly intentional. */
#cs-checkout-overlay.cs-co-redirecting .cs-modal-body > *:not(#cs-co-redirect-panel),
#cs-checkout-overlay.cs-co-redirecting .cs-modal-footer,
#cs-checkout-overlay.cs-co-redirecting .cs-modal-close,
#cs-checkout-overlay.cs-co-redirecting .cs-modal-header h3 {
    display: none !important;
}
.cs-co-redirect-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 32px 28px 36px;
    color: var(--club-text, #fff);
}
.cs-co-redirect-spinner {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(125, 211, 252, 0.10);
    border: 1px solid rgba(125, 211, 252, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.cs-co-redirect-spinner i {
    font-size: 2rem;
    color: var(--club-accent, #7dd3fc);
}
.cs-co-redirect-panel h3 {
    margin: 0 0 8px;
    font-size: 1.2rem;
    color: var(--club-text);
}
.cs-co-redirect-panel p {
    margin: 0 0 8px;
    font-size: 0.92rem;
    color: var(--club-muted);
    line-height: 1.5;
    max-width: 380px;
}
.cs-co-redirect-panel .cs-co-redirect-sub {
    font-size: 0.78rem;
    margin-top: 8px;
    opacity: 0.8;
}
.cs-cart-item-deposit {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    border-radius: 4px;
    background: rgba(var(--club-accent-rgb, 245, 166, 35), 0.14);
    color: var(--club-accent);
    font-weight: 600;
    font-size: 0.72rem;
}

/* ── Forms ───────────────────────────────────────────────────── */
.cs-form-group { display: flex; flex-direction: column; gap: 5px; }
.cs-form-label { font-size: 0.8rem; font-weight: 600; color: var(--club-muted); }
.cs-form-input {
    background: var(--club-card-bg);
    border: 1px solid var(--club-border);
    border-radius: 10px;
    color: var(--club-text);
    font-size: 0.9rem;
    padding: 11px 14px;
    font-family: inherit;
    transition: border-color 0.15s;
    width: 100%;
}
.cs-form-input:focus {
    outline: none;
    border-color: var(--club-accent);
}
.cs-form-input::placeholder { color: var(--club-muted); opacity: 0.7; }

.cs-checkout-error {
    padding: 10px 14px;
    background: rgba(244,67,54,0.12);
    border: 1px solid rgba(244,67,54,0.3);
    border-radius: 8px;
    font-size: 0.82rem;
    color: #f44336;
}

/* ── Membership cards: Add to Cart button ────────────────────── */
.cs-btn--cart {
    background: var(--club-card-bg);
    border: 1.5px solid var(--club-accent);
    color: var(--club-accent);
    width: 100%;
    justify-content: center;
    /* Default glow uses currentColor so it auto-tracks the button's text colour
       (inline card_body_color from JS, or white in night mode). Shared :hover
       halo flips the ring to the accent. */
    box-shadow: 0 0 0 1px currentColor, 0 0 10px rgba(255,255,255,0.35);
    transition: background 0.15s, opacity 0.15s, box-shadow 0.25s ease, border-color 0.2s ease;
}
.cs-btn--cart:hover { background: rgba(245,166,35,0.12); }
.cs-btn--cart.in-cart {
    background: rgba(245,166,35,0.18);
    border-color: var(--club-accent);
}

/* ── Responsive ─────────────────────────────────────────────── */

/* Tablet-portrait / narrow-desktop range — above the hamburger threshold
   (≤768px) but not wide enough to fit brand + links + actions on a
   single row. Split the nav into TWO rows:
     Row 1 → brand (left) + actions (cart / avatar / night, right)
     Row 2 → link set, wraps if still tight
   User controls stay pinned + always visible; nothing gets clipped.
   --club-nav-h is bumped so every sticky offset that reads it (line 532,
   806-807, hero heights) still tracks the taller two-row nav. */
@media (min-width: 769px) and (max-width: 1200px) {
    :root { --club-nav-h: 108px; }
    .cs-nav { height: auto; min-height: var(--club-nav-h); }
    .cs-nav-inner {
        grid-template-columns: auto 1fr;
        grid-template-rows: 1fr auto;
        grid-template-areas:
            "brand   actions"
            "links   links";
        row-gap: 4px;
        column-gap: 20px;
        padding: 8px 20px;
        align-items: center;
    }
    .cs-nav-brand   { grid-area: brand;   justify-self: start; }
    .cs-nav-actions { grid-area: actions; justify-self: end;   }
    .cs-nav-links   {
        grid-area: links;
        justify-content: center;
        flex-wrap: wrap;
        justify-self: stretch;
        padding-bottom: 4px;
    }
}

@media (max-width: 768px) {
    .cs-nav-links { display: none; }
    .cs-nav-hamburger { display: flex; }
    /* Hamburger moves to the far left; cart + account icons stay on the
       far right. Brand sits between them. Pure flex order — no markup
       change needed. */
    .cs-nav-hamburger { order: -1; }
    .cs-nav-brand     { order:  1; margin-left: 14px; }
    .cs-nav-actions   { order:  2; margin-left: auto; }
    /* Login: icon-only pill on mobile */
    .cs-btn--login span { display: none; }
    .cs-btn--login { padding: 9px 11px; }
    .cs-btn--login i { font-size: 1.15rem; opacity: 1; }
    /* Go to App: drop greeting, keep avatar + action */
    .cs-user-greeting { display: none; }
    .cs-btn--app { padding: 5px 14px 5px 5px; }
    .cs-user-avatar { width: 28px; height: 28px; font-size: 0.78rem; }
    .cs-stats-bar-inner { gap: 28px; }
    .cs-contact-layout { grid-template-columns: 1fr; }
    .cs-hero-ctas { flex-direction: column; align-items: center; }
    .cs-section { padding: 48px 16px; }
    .cs-cart-drawer { width: 100vw; }
}
/* ── Committee inline edit overlays (visible only when token = committee) ── */
.cs-edit-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 900;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(245,166,35,0.92);
    color: #000;
    font-size: 0.78rem;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(0,0,0,0.4);
    backdrop-filter: blur(4px);
    transition: opacity 0.15s, transform 0.15s;
    opacity: 0;
    pointer-events: none;
}
[data-section-id]:hover .cs-edit-btn {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-2px);
}

/* ─── Rich-text section styling (honours config.bg_color / card_* etc.) ─── */
.cs-section--framed .cs-section-inner {
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
}
.cs-text-body p { margin: 0 0 14px; }
.cs-text-body p:last-child { margin-bottom: 0; }
.cs-text-body ul, .cs-text-body ol { padding-left: 24px; margin: 0 0 14px; }
.cs-text-body a { color: var(--club-accent); }
.cs-text-body strong, .cs-text-body b { font-weight: 700; }
.cs-text-body em, .cs-text-body i { font-style: italic; }
.cs-text-body u { text-decoration: underline; }

/* ─── My Memberships: pending change banner ─── */
.cs-mymem-pending {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(245,166,35,0.10);
    border: 1px solid rgba(245,166,35,0.35);
    color: var(--club-text);
    font-size: 0.85rem;
    line-height: 1.4;
    margin: 8px 0 12px;
}
.cs-mymem-pending .mdi {
    color: #f5a623;
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.cs-mymem-pending strong { color: var(--club-accent); }
.cs-mymem-pending-cancel {
    flex-shrink: 0;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: transparent;
    border: 1px solid rgba(245, 166, 35, 0.5);
    border-radius: 999px;
    color: #f5a623;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cs-mymem-pending-cancel:hover {
    background: rgba(245, 166, 35, 0.18);
    border-color: #f5a623;
}
.cs-mymem-pending-cancel:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.cs-mymem-pending-cancel .mdi {
    color: inherit !important;
    font-size: 0.95rem !important;
    margin: 0 !important;
}

/* ─── Request change modal ─── */
.cs-request-change-current {
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.cs-request-change-current-label {
    font-size: 0.7rem;
    color: var(--club-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.cs-request-change-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 44vh;
    overflow-y: auto;
    padding-right: 4px;
}
.cs-request-change-option {
    all: unset;
    display: block;
    padding: 12px 14px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    font-family: inherit;
}
.cs-request-change-option:hover {
    border-color: var(--club-accent);
    background: rgba(255,255,255,0.04);
}
.cs-request-change-option--selected {
    border-color: var(--club-accent);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 2px var(--club-accent) inset;
}
.cs-request-change-option-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    color: var(--club-text);
    margin-bottom: 4px;
}
.cs-request-change-option-head .mdi { font-size: 1.2rem; }
.cs-request-change-pill {
    margin-left: auto;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #f5a623;
    background: rgba(245,166,35,0.12);
    border: 1px solid rgba(245,166,35,0.35);
    border-radius: 999px;
    padding: 3px 8px;
}
.cs-request-change-option-price {
    font-weight: 700;
    color: var(--club-accent);
    font-size: 0.9rem;
}
.cs-request-change-option-desc {
    font-size: 0.78rem;
    color: var(--club-muted);
    margin-top: 4px;
    line-height: 1.4;
}
/* Drawer & modal UI runs on a dark background in night mode regardless of
   the club's day-mode palette — force all text inside the My Memberships
   drawer + Request Change modal to white so accent-coloured price lines
   and muted descriptions stay legible. */
html.night-mode .cs-mymem-drawer,
html.night-mode .cs-mymem-drawer *,
html.night-mode #cs-request-change-modal,
html.night-mode #cs-request-change-modal * {
    color: #ffffff !important;
}
/* Except: keep the "requires approval" pill's warm amber, the selected
   option ring, and the muted helper info visually distinct via alpha. */
html.night-mode .cs-request-change-pill { color: #f5a623 !important; }
html.night-mode .cs-request-change-option-desc,
html.night-mode .cs-mymem-hint {
    color: rgba(255, 255, 255, 0.72) !important;
}
#cs-request-change-reason {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 10px;
    color: var(--club-text);
    font-family: inherit;
    font-size: 0.88rem;
    resize: vertical;
    min-height: 60px;
}
#cs-request-change-reason:focus {
    outline: none;
    border-color: var(--club-accent);
}
/* White text on accent button scoped to this modal too */
.cs-modal-overlay#cs-request-change-overlay .cs-btn--accent { color: #ffffff; }

/* ══════════════════════════════════════════════════════════════════
   NIGHT MODE — universal dark glass-morphism theme
   Activated by html.night-mode. Overrides the club's day palette for
   backgrounds / text / card surfaces, but KEEPS --club-accent so the
   brand colour still pops. --club-accent-text stays auto-contrasted
   via applyClubTheme so buttons remain legible.
   ══════════════════════════════════════════════════════════════════ */

/* Night toggle button in the nav */
.cs-night-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: #ffffff;
    cursor: pointer;
    box-shadow: 0 0 10px 3px color-mix(in srgb, currentColor 40%, transparent);
    transition: color 0.2s ease, transform 0.18s;
    flex-shrink: 0;
    position: relative;
}
.cs-night-toggle:hover  { color: var(--club-accent); transform: translateY(-1px); }
.cs-night-toggle:active { transform: translateY(0); }
.cs-night-toggle i {
    font-size: 1.2rem;
    line-height: 1;
    transition: opacity 0.2s, transform 0.2s;
}
.cs-night-toggle .cs-night-toggle-sun { position: absolute; opacity: 0; transform: scale(0.6); }
html.night-mode .cs-night-toggle .cs-night-toggle-moon { opacity: 0; transform: scale(0.6); }
html.night-mode .cs-night-toggle .cs-night-toggle-sun  { opacity: 1; transform: scale(1); color: #ffd36e; }

/* Palette variables live inline on <html> via JS (see _applyNightMode) so
   they beat applyClubTheme's inline day values. This rule is a safety-net
   fallback in case JS is delayed. */
html.night-mode {
    background: #000000;
}
html.night-mode body { background: #000000; color: #ffffff; }

/* Banner sections (inline background:<colour>) keep their configured day
   colour in night mode — that's an intentional design choice from the
   builder. Non-banner sections fall back to the black body canvas.
   Cards below are forced opaque black so they read on any banner colour. */

/* Opaque dark card surfaces — solid near-black with a thin white edge so
   cards read clearly on black bg AND on accent-coloured banner bg.
   Card-level inline styles (e.g. border-bottom accent on membership
   cards) still compose — we only override background + border + shadow. */
/* In night mode, the inner section card frame (card_bg + card_border) creates
   a double-tinted box-in-box look on banners because the outer section bg is
   already translucified. Flatten the inner frame to transparent + borderless
   so only the banner's own colour reads. Day mode keeps the framed look. */
html.night-mode .cs-section-inner {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

html.night-mode .cs-feed-card,
/* Stats-bar strip: wrapper goes transparent in night mode so the dark canvas
   + spotlights show through (tiles themselves keep their translucent glass). */
html.night-mode .cs-stats-bar {
    background: transparent !important;
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
}

/* Court + feed + FAQ + coach + facility cards in night mode: nearly-
   transparent accent tint so the black canvas + spotlights read through
   the card surface with just a hint of brand colour, plus the accent ring
   + halo. No !important on box-shadow/border-color so the shared :hover
   rule (which does carry !important) can win and ramp up the glow. */
html.night-mode .cs-court-card,
html.night-mode .cs-feed-card,
html.night-mode .cs-faq-item,
html.night-mode .cs-coach-card,
html.night-mode .cs-facility-card,
html.night-mode .cs-fac-row,
html.night-mode .cs-share-card {
    background: rgba(var(--club-accent-rgb, 245, 166, 35), 0.08) !important;
    border-color: rgba(var(--club-accent-rgb, 245, 166, 35), 0.7);
    box-shadow:
        0 0 0 2px rgba(var(--club-accent-rgb, 245, 166, 35), 0.6),
        0 0 22px rgba(var(--club-accent-rgb, 245, 166, 35), 0.45),
        0 0 48px rgba(var(--club-accent-rgb, 245, 166, 35), 0.28),
        0 8px 22px rgba(0, 0, 0, 0.5);
}

/* Night-mode text inside the share card — force white so every label,
   meta line, info row and description reads clearly on the dark canvas.
   The default light-mode rules use --club-card-text which a white canvas
   resolves to dark. */
html.night-mode .cs-share-card,
html.night-mode .cs-share-heading,
html.night-mode .cs-share-subtitle,
html.night-mode .cs-share-meta,
html.night-mode .cs-share-description,
html.night-mode .cs-share-info,
html.night-mode .cs-share-info strong {
    color: #fff !important;
    opacity: 1;
}
html.night-mode .cs-share-info {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.14) !important;
}
html.night-mode .cs-share-info--claimed {
    background: rgba(74, 222, 128, 0.14) !important;
    border-color: rgba(74, 222, 128, 0.45) !important;
    color: #7ae895 !important;
}
html.night-mode .cs-share-info--claimed strong { color: #fff !important; }
html.night-mode .cs-share-pill {
    background: rgba(var(--club-accent-rgb, 245, 166, 35), 0.22);
    color: #fff;
}
html.night-mode .cs-share-pill--claimed {
    background: rgba(74, 222, 128, 0.2);
    color: #fff;
}

/* Carousel in night mode: three-tier glow, with small gaps between tiers so
   the sides feel lit up too (they inherit .cs-feed-card baseline, but
   overridden here to a brighter level for carousel context specifically).
   - Side cards: near-active brightness — enough halo to read clearly
   - Middle card: one notch brighter than the sides
   - Hover (any card): full strong halo via the shared :hover rule */
html.night-mode .cs-carousel-track > .cs-carousel-card {
    border-color: rgba(var(--club-accent-rgb, 245, 166, 35), 0.7);
    box-shadow:
        0 0 0 2px rgba(var(--club-accent-rgb, 245, 166, 35), 0.6),
        0 0 22px rgba(var(--club-accent-rgb, 245, 166, 35), 0.45),
        0 0 48px rgba(var(--club-accent-rgb, 245, 166, 35), 0.28),
        0 8px 22px rgba(0, 0, 0, 0.5);
}
/* Ease the side-card fade in night mode — the default 0.75 / 0.42 / 0.22
   stack knocks down the accent halo so the sides read as dim boxes. Lift
   them so the halo carries through and the sides feel lit-up. */
html.night-mode .cs-carousel-track > .cs-carousel-card[data-dist="1"] {
    opacity: 0.92;
    filter: brightness(0.98);
}
html.night-mode .cs-carousel-track > .cs-carousel-card[data-dist="2"] {
    opacity: 0.72;
    filter: brightness(0.92);
}
html.night-mode .cs-carousel-track > .cs-carousel-card[data-dist="3"] {
    opacity: 0.5;
    filter: brightness(0.88);
}
html.night-mode .cs-carousel-track > .cs-carousel-card[data-dist="0"],
html.night-mode .cs-carousel-track > .cs-carousel-card.is-active {
    border-color: rgba(var(--club-accent-rgb, 245, 166, 35), 0.9);
    box-shadow:
        0 0 0 2.5px rgba(var(--club-accent-rgb, 245, 166, 35), 0.75),
        0 0 28px rgba(var(--club-accent-rgb, 245, 166, 35), 0.55),
        0 0 60px rgba(var(--club-accent-rgb, 245, 166, 35), 0.35),
        0 10px 28px rgba(0, 0, 0, 0.55);
}

html.night-mode .cs-membership-card,
html.night-mode .cs-gallery-item {
    /* Translucent white glass — 0.14 alpha + blur(12px) gives cards a visible
       white-glass look against the black canvas (was rgba(12,14,22,0.92) which
       painted dark over any configured white card_bg). The committee's chosen
       light card_bg now reads as light glass in night mode; dark card_bg reads
       as dark glass because the rgba still sits over a black page. */
    background: rgba(255, 255, 255, 0.14) !important;
    backdrop-filter: blur(12px) saturate(1.15);
    -webkit-backdrop-filter: blur(12px) saturate(1.15);
    border-color: rgba(255, 255, 255, 0.18) !important;
    box-shadow:
        0 1px 0 rgba(255, 255, 255, 0.1) inset,
        0 10px 30px rgba(0, 0, 0, 0.55);
}
html.night-mode .cs-membership-header {
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

/* Contact buttons — outline variant needs white text on glass */
html.night-mode .cs-btn--outline {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.28);
    color: #ffffff;
}

/* Day-mode depth — subtle dark shadow under feature text gives the hero,
   section titles, stat numbers, prices and card titles a little lift off
   their background without fuzzing body copy. Removed in night mode. */
.cs-hero-title,
.cs-section-title,
.cs-stat-value,
.cs-stat-label,
.cs-membership-name,
.cs-membership-price,
.cs-feed-card-title,
.cs-feed-card-date,
.cs-info-block-title,
.cs-faq-question,
.cs-cta-strip h2 {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.22),
                 0 2px 6px rgba(0, 0, 0, 0.12);
}
html.night-mode .cs-hero-title,
html.night-mode .cs-section-title,
html.night-mode .cs-stat-value,
html.night-mode .cs-stat-label,
html.night-mode .cs-membership-name,
html.night-mode .cs-membership-price,
html.night-mode .cs-feed-card-title,
html.night-mode .cs-feed-card-date,
html.night-mode .cs-info-block-title,
html.night-mode .cs-faq-question,
html.night-mode .cs-cta-strip h2 {
    text-shadow: none;
}

/* In night mode, every accent-coloured text element (and any section
   title/body whether or not the builder has forced an inline colour)
   flips to plain white. Muted text (section sub/intro, card-muted
   descriptions) goes to a softened 75%-alpha white so it still reads
   as secondary. */
html.night-mode .cs-section-title,
html.night-mode .cs-membership-price,
html.night-mode .cs-membership-family-note,
html.night-mode .cs-feed-card-date,
html.night-mode .cs-info-block-title,
html.night-mode .cs-stat-value,
html.night-mode .cs-coach-title,
html.night-mode .cs-facility-rate,
html.night-mode .cs-cart-item-price,
html.night-mode .cs-btn--cart,
html.night-mode .cs-btn--cart span {
    color: #ffffff !important;
}
html.night-mode .cs-section-sub,
html.night-mode .cs-text-body,
html.night-mode .cs-feed-card-sub,
html.night-mode .cs-membership-desc,
html.night-mode .cs-membership-price-sub,
html.night-mode .cs-coach-bio,
html.night-mode .cs-facility-desc,
html.night-mode .cs-stat-sub {
    color: rgba(255, 255, 255, 0.75) !important;
}

/* Drawer / modal / courts date pill — anything that defaults to the club
   accent colour should read as white in night mode (badges, info icons,
   edit-pencil buttons, date-pill calendar icon). The drawer UI already has
   its own dark background so we force white text + icons with !important to
   beat the inline/default accent colouring. */
html.night-mode .cs-mymem-committee-badge,
html.night-mode .cs-mymem-change-btn,
html.night-mode .cs-courts-date-btn,
html.night-mode .cs-courts-date-label {
    color: #ffffff !important;
}
html.night-mode .cs-mymem-edit-btn,
html.night-mode .cs-mymem-edit-btn:hover,
html.night-mode .cs-mymem-hint i,
html.night-mode .cs-mymem-committee-badge i,
html.night-mode .cs-courts-date-btn .mdi {
    color: #ffffff !important;
}
html.night-mode .cs-mymem-edit-btn:hover {
    border-color: rgba(255, 255, 255, 0.35) !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
/* Accent-coloured icons also flip to white so they read against glass cards
   and the black canvas. Drop-shadow and filter glows removed. */
html.night-mode .cs-divider,
html.night-mode .cs-info-row .mdi,
html.night-mode .cs-event-chip .mdi,
html.night-mode .cs-faq-question i,
html.night-mode .cs-contact-row i,
html.night-mode .cs-doc-link i,
html.night-mode .cs-membership-icon,
html.night-mode .cs-membership-family-note i,
html.night-mode .cs-cart-dep-chip i,
html.night-mode .cs-cart-child-chip i,
html.night-mode .cs-btn--cart i {
    color: #ffffff !important;
}
/* Divider is a plain accent bar — flip its background to white too */
html.night-mode .cs-divider {
    background: #ffffff !important;
}
/* Cart pill: white frame + white glow in night mode. Hover → accent halo wins
   via the shared :hover rule's !important shadows. */
html.night-mode .cs-btn--cart {
    border: 1.5px solid rgba(255, 255, 255, 0.6) !important;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.5),
        0 0 10px rgba(255, 255, 255, 0.45) !important;
}

/* Night mode: accent top-to-bottom fade (matches the member portal header).
   Club's own accent at ~22% alpha at the top, fully transparent at the
   bottom so the dark canvas + spotlights show through. Border removed so
   the fade bleeds cleanly into the page. */
html.night-mode .cs-nav {
    background: linear-gradient(
        180deg,
        rgba(var(--club-accent-rgb, 245, 166, 35), 0.22) 0%,
        rgba(var(--club-accent-rgb, 245, 166, 35), 0) 100%
    );
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border-bottom: none;
}

/* Night-mode nav button halo is handled by currentColor on the base rule —
   no override needed. --club-nav-text flips to white in night mode, so the
   color-mix halo turns white automatically. */

/* Smooth cross-fade when toggling — transform isn't layout-affecting so this
   just soft-blends the appearance change without jank. */
html { transition: background 0.35s ease; }
html, .cs-feed-card, .cs-membership-card, .cs-faq-item, .cs-coach-card,
      .cs-facility-card, .cs-nav, .cs-hero-bg-img {
    transition: background 0.35s ease, color 0.35s ease,
                border-color 0.35s ease, box-shadow 0.35s ease,
                backdrop-filter 0.35s ease;
}

/* ── Share item card (synthetic section) ──────────────────
   Injected only on /share/<type>/:id pages. Reuses .cs-section as its
   outer shell so light/dark canvas + responsive padding match the rest
   of the site; the inner .cs-share-card is a two-column image+body grid
   that collapses to stacked on mobile.                                  */
.cs-section--share { padding: clamp(24px, 4vw, 48px) 0; }
.cs-share-card {
    max-width: 980px;
    margin: 0 auto;
    display: grid;
    /* minmax(0, …) on both columns stops grid items defaulting to min-content,
       which otherwise lets legacy large-base64 images push the left column
       past its allotted width and clip/overlap the body column. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
    gap: 28px;
    align-items: stretch;
    background: var(--club-card-bg);
    color: var(--club-card-text);
    border: 1px solid var(--club-border);
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    min-width: 0;  /* redundant but belt+braces when nested in a flex parent */
}
@media (max-width: 720px) {
    .cs-share-card { grid-template-columns: minmax(0, 1fr); padding: 16px; gap: 18px; }
}
.cs-share-image-wrap {
    width: 100%;
    overflow: hidden;
    border-radius: 12px;
    background: var(--club-border);
    aspect-ratio: 1/1;
    /* Placeholder centering — used when the item has no photo. */
    display: flex;
    align-items: center;
    justify-content: center;
}
.cs-share-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-share-image-wrap--empty {
    background: color-mix(in srgb, var(--club-accent) 8%, var(--club-card-bg));
    border: 1px dashed color-mix(in srgb, var(--club-accent) 35%, transparent);
}
.cs-share-image-wrap--empty .mdi {
    font-size: clamp(3rem, 10vw, 6rem);
    color: var(--club-accent);
    opacity: 0.5;
}
.cs-share-body { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.cs-share-pill {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-start;
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
    padding: 4px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--club-accent) 15%, transparent);
    color: var(--club-accent);
    margin-bottom: 2px;
}
.cs-share-pill--claimed { background: rgba(74,222,128,0.15); color: #22c55e; }
.cs-share-heading { font-size: clamp(1.25rem, 3vw, 1.6rem); line-height: 1.2; margin: 0; font-weight: 700; color: var(--club-card-text); }
.cs-share-subtitle { font-size: 1rem; color: var(--club-card-text); opacity: 0.82; margin: 0; }
.cs-share-meta { font-size: 0.85rem; color: var(--club-card-text); opacity: 0.65; margin-bottom: 4px; }
.cs-share-description { font-size: 0.95rem; line-height: 1.55; color: var(--club-card-text); opacity: 0.85; white-space: pre-wrap; margin: 6px 0; }
.cs-share-info {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.88rem;
    padding: 8px 12px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--club-card-text) 4%, transparent);
    border: 1px solid var(--club-border);
    color: var(--club-card-text);
}
.cs-share-info strong { font-weight: 600; }
.cs-share-info--claimed { background: rgba(74,222,128,0.08); border-color: rgba(74,222,128,0.25); color: #16a34a; }
.cs-share-info .mdi { font-size: 1.1rem; flex-shrink: 0; color: var(--club-accent); }
.cs-share-cta { margin-top: 8px; width: fit-content; padding: 12px 22px; }

/* ── Share carousel — visible prev/next arrows + strong focal fade ─────
   Used on /share/lost-found/:id when more than one item exists.
   Focal card reads big; side cards shrink harder + fade more than the
   default events/news carousel, and the track's left/right edges fade
   into the page background via a mask gradient. */
.cs-share-carousel { position: relative; }
/* Card width — matches the events/news carousel proportions so three
   cards (focal + two peeks) fit on typical desktops. Overrides the
   default .cs-carousel-card flex-basis with a slightly larger clamp
   because the share card carries more content per tile. */
.cs-share-carousel .cs-carousel-card {
    flex: 0 0 clamp(340px, 42vw, 460px);
    min-width: 0;
    scroll-snap-align: center;
}
/* Carousel-mode share cards stack vertically (image on top, body below)
   so they read well at the tighter carousel width. The non-carousel
   single-item render keeps the horizontal two-column layout defined at
   the top of this block. */
.cs-share-card.cs-carousel-card {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    padding: 0;
    gap: 0;
    overflow: hidden;
}
.cs-share-card.cs-carousel-card .cs-share-image-wrap {
    aspect-ratio: 16/10;
    border-radius: 0;
}
.cs-share-card.cs-carousel-card .cs-share-body {
    padding: 16px 20px 20px;
    gap: 8px;
}
/* Stronger focal treatment than the default graduated fade (which is tuned
   for smaller cards). The centre card stays at scale(1) to avoid clipping
   inside the scroll-box; the sides drop further so the contrast reads. */
.cs-share-carousel .cs-carousel-card[data-dist="1"] {
    transform: scale(0.82);
    opacity: 0.55;
    filter: brightness(0.85);
}
.cs-share-carousel .cs-carousel-card[data-dist="2"] {
    transform: scale(0.70);
    opacity: 0.28;
    filter: brightness(0.75);
}
.cs-share-carousel .cs-carousel-card[data-dist="3"] {
    transform: scale(0.62);
    opacity: 0.14;
    filter: brightness(0.65);
}
/* Soft edge fade — mask the track so the peek cards dissolve into the
   page canvas instead of hard-cutting at the viewport edge. Only the
   track gets the mask so the arrow buttons (outside the track) stay
   fully opaque. */
.cs-share-carousel .cs-carousel-track {
    mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 12%, black 88%, transparent 100%);
}
.cs-carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--club-border);
    background: color-mix(in srgb, var(--club-card-bg) 85%, transparent);
    color: var(--club-card-text);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    padding: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.15);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
}
.cs-carousel-arrow:hover {
    background: var(--club-accent);
    border-color: var(--club-accent);
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}
.cs-carousel-arrow--prev { left: -8px; }
.cs-carousel-arrow--next { right: -8px; }
@media (min-width: 900px) {
    .cs-carousel-arrow--prev { left: -24px; }
    .cs-carousel-arrow--next { right: -24px; }
}
html.night-mode .cs-carousel-arrow {
    background: rgba(0,0,0,0.45);
    border-color: rgba(var(--club-accent-rgb, 245,166,35), 0.6);
    color: #fff;
}
html.night-mode .cs-carousel-arrow:hover {
    background: var(--club-accent);
    color: #fff;
    box-shadow: 0 0 18px rgba(var(--club-accent-rgb, 245,166,35), 0.6);
}
/* ─── Coaching Programs (share page + Programs tab) ─────────────────────── */
.cs-section--program .cs-share-card { max-width: 720px; margin: 0 auto; }
.cs-program-sections {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.cs-share-section-title {
    font-size: 1.05rem;
    margin: 0 0 4px;
    color: var(--club-accent);
}
/* Section body — preserve newlines from the source content (same
   pattern as .el-program-section-body in the eldoraigne template).
   AI-written write-ups use `\n\n` between paragraphs + emoji-prefixed
   sub-headings; without `pre-line` the renderer collapses every break
   and the whole block reads as one wall of text. */
.cs-share-section-body {
    color: inherit;
    line-height: 1.6;
    white-space: pre-line;
    word-wrap: break-word;
}
.cs-share-section-body p { margin: 0 0 0.6em; }
.cs-share-section-body p:last-child { margin-bottom: 0; }
.cs-share-section-body ul,
.cs-share-section-body ol { margin: 0.5em 0 0.8em 1.2em; padding: 0; }

.cs-program-form {
    max-width: 720px;
    margin: 28px auto 0;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 18px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
html.night-mode .cs-program-form {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.cs-program-form-title {
    margin: 0 0 4px;
    font-size: 1.2rem;
    color: var(--club-accent);
}
.cs-program-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    align-items: stretch;
}
@media (max-width: 600px) {
    .cs-program-form-grid { grid-template-columns: 1fr; }
}
.cs-program-form-grid label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    font-weight: 600;
}
/* When a label wraps onto multiple lines, the adjacent column's label sits on
   a single line — without this rule the inputs would no longer line up because
   each input sits directly under its (variable-height) label text. Pinning the
   input to the bottom of the cell with margin-top:auto, combined with grid
   align-items:stretch, keeps the input row visually aligned across siblings. */
.cs-program-form-grid label > :where(input, select, textarea, .cs-input) {
    margin-top: auto;
}
.cs-input {
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.15);
    /* Use background-color (not the shorthand) so select.cs-input can layer a
       background-image (chevron) on top without it being tiled by the
       shorthand's implicit `background-repeat: repeat` reset. */
    background-color: #fff;
    color: inherit;
    font: inherit;
    font-weight: 400;
}
html.night-mode .cs-input {
    background-color: rgba(0,0,0,0.35);
    border-color: rgba(255,255,255,0.18);
    color: #fff;
}
.cs-input:focus {
    outline: 2px solid var(--club-accent);
    outline-offset: 1px;
}
/* Native <select> theming. In night mode, color-scheme:dark tells the
   browser to render the native dropdown panel in its dark variant
   (Chromium + Safari honour this). The option-level rules cover Firefox
   and any browser that ignores color-scheme. */
select.cs-input {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 8px;
    padding-right: 32px;
}
html.night-mode select.cs-input {
    color-scheme: dark;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23ccc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
}
html.night-mode select.cs-input option,
html.night-mode select.cs-input optgroup {
    background-color: #0e1422;
    color: #fff;
}
.cs-program-form-group {
    margin: 0;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.08);
}
html.night-mode .cs-program-form-group { border-color: rgba(255,255,255,0.1); }
.cs-program-form-group legend {
    padding: 0 6px;
    font-weight: 700;
    color: var(--club-accent);
}
.cs-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 6px 0 10px;
}
@media (max-width: 600px) {
    .cs-checkbox-grid { grid-template-columns: 1fr; }
}
.cs-checkbox-grid label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-weight: 500;
    cursor: pointer;
}
.cs-program-terms {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    font-size: 0.88rem;
}

/* ── Modern checkboxes + radios inside the program registration form ──
   Native controls swapped for custom-rendered boxes/dots so the
   checked state picks up var(--club-accent) consistently across
   browsers. Scoped to .cs-program-form so the rest of the site's
   inputs aren't touched. */
.cs-program-form input[type="checkbox"],
.cs-program-form input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    margin: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease,
                box-shadow 0.15s ease, transform 0.1s ease;
    position: relative;
    vertical-align: middle;
}
.cs-program-form input[type="checkbox"] { border-radius: 5px; }
.cs-program-form input[type="radio"]    { border-radius: 50%; }

.cs-program-form input[type="checkbox"]:hover,
.cs-program-form input[type="radio"]:hover {
    border-color: var(--club-accent);
    background: rgba(255, 255, 255, 0.08);
}

.cs-program-form input[type="checkbox"]:focus-visible,
.cs-program-form input[type="radio"]:focus-visible {
    outline: 2px solid var(--club-accent);
    outline-offset: 2px;
}

/* CHECKED — accent fill + white tick / inner dot */
.cs-program-form input[type="checkbox"]:checked,
.cs-program-form input[type="radio"]:checked {
    border-color: var(--club-accent);
    background: var(--club-accent);
}
.cs-program-form input[type="checkbox"]:checked::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}
.cs-program-form input[type="radio"]:checked::after {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #fff;
}

/* Light-mode override — on light surfaces a faint border reads better
   than the dark-mode rgba grey. */
html:not(.night-mode) .cs-program-form input[type="checkbox"],
html:not(.night-mode) .cs-program-form input[type="radio"] {
    border-color: rgba(0, 0, 0, 0.25);
    background: rgba(0, 0, 0, 0.03);
}
html:not(.night-mode) .cs-program-form input[type="checkbox"]:hover,
html:not(.night-mode) .cs-program-form input[type="radio"]:hover {
    background: rgba(0, 0, 0, 0.06);
}
html:not(.night-mode) .cs-program-form input[type="checkbox"]:checked,
html:not(.night-mode) .cs-program-form input[type="radio"]:checked {
    border-color: var(--club-accent);
    background: var(--club-accent);
}
/* Night-mode overrides — the cs-program-form palette uses var(--club-accent)
   for headings, legends, focus outlines etc. For clubs whose accent is dark
   navy (e.g. Eldoraigne #020c92), that text disappears against a dark
   background. Flip those to a sky-blue tone in night mode. */
html.night-mode .cs-program-form-title,
html.night-mode .cs-program-form-group legend {
    color: #7dd3fc;
}
html.night-mode .cs-program-form-grid label,
html.night-mode .cs-checkbox-grid label,
html.night-mode .cs-program-terms {
    color: rgba(255, 255, 255, 0.92);
}
html.night-mode .cs-input:focus {
    outline-color: #7dd3fc;
}

/* ─── Form section headings ─────────────────────────────────────────
   Sub-section titles inside the program registration form
   ("Your details" / "Player" / "Coaching preferences"). Small caps
   accent-coloured label so each block reads as a distinct stage. */
.cs-program-form-section-title {
    margin: 14px 0 8px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--club-accent);
}
html.night-mode .cs-program-form-section-title { color: #7dd3fc; }

/* ─── Form input accent theming ────────────────────────────────────────
   Native checkboxes + radios pick up the club's accent (so a navy
   club gets navy ticks, an orange club gets orange) instead of the
   browser-default blue. `accent-color` is the modern CSS property —
   works in every browser the club site supports. */
.cs-program-form input[type="checkbox"],
.cs-program-form input[type="radio"] {
    accent-color: var(--club-accent);
}
/* Ghost button hover — adopt the club accent for border + tint + text
   so the "Add another player" / dependent-search "Pick" buttons feel
   native to the theme rather than reading as a generic outline button.
   In night-mode the accent (which on Eldoraigne is a navy/dark-blue)
   reads dim against the dark bg, so we route text through a brighter
   sky-blue tone — same shade used for .cs-program-form-section-title
   so the hover state stays readable.
   Icon explicitly inherits via `color: currentColor` because some MDI
   font builds don't pick up the parent text colour otherwise. */
.cs-program-form .cs-btn--ghost:hover {
    border-color: var(--club-accent);
    color: var(--club-accent);
    background: rgba(var(--club-accent-rgb, 245,166,35), 0.08);
}
.cs-program-form .cs-btn--ghost:hover .mdi {
    color: currentColor;
}
html.night-mode .cs-program-form .cs-btn--ghost:hover {
    color: #7dd3fc;
    background: rgba(125, 211, 252, 0.14);
    border-color: #7dd3fc;
}

/* ─── Multi-dependent registration ─────────────────────────────────────
   "Additional players" section under the primary form fields. Parent
   detection banner + per-row search results + dependent picker styling. */
.cs-program-form-hint {
    margin-top: 8px;
    font-size: 0.82rem;
    color: rgba(0,0,0,0.55);
}
html.night-mode .cs-program-form-hint { color: rgba(255,255,255,0.6); }
.cs-program-parent-status:empty { display: none; }
.cs-program-parent-found {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 10px 12px;
    margin: 8px 0 16px;
    border-radius: 10px;
    background: rgba(46, 154, 84, 0.10);
    border: 1px solid rgba(46, 154, 84, 0.35);
    color: #1b6b3e;
    font-size: 0.88rem;
    line-height: 1.5;
}
.cs-program-parent-found .mdi {
    color: #2e9a54;
    font-size: 1.2rem;
    flex: 0 0 auto;
    /* Optical-align the icon with the first line of text. */
    line-height: 1.5;
}
.cs-program-parent-found-text { flex: 1 1 auto; min-width: 0; }
.cs-program-parent-found-text strong { font-weight: 700; }

/* ─── Fuzzy-match chip (auto-fill confirmation / warn) ─────────────────
   Sits below a player block when the typed name lines up with one of
   the parent's existing dependents. Two states:
     .cs-program-fuzzy-link  — green "Linked to X — Unlink" pill
     .cs-program-fuzzy-warn  — amber "X already registered" notice
*/
.cs-program-fuzzy-match { margin-top: 6px; }
.cs-program-fuzzy-match:empty { display: none; }
.cs-program-fuzzy-link {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(46, 154, 84, 0.10);
    border: 1px solid rgba(46, 154, 84, 0.35);
    color: #1b6b3e;
    font-size: 0.85rem;
    line-height: 1.4;
}
.cs-program-fuzzy-link .mdi { color: #2e9a54; font-size: 1.1rem; flex: 0 0 auto; }
.cs-program-fuzzy-link > div { flex: 1 1 auto; min-width: 0; }
.cs-program-fuzzy-link strong { font-weight: 700; }
.cs-fuzzy-unlink {
    flex: 0 0 auto;
    background: transparent;
    border: 1px solid rgba(46, 154, 84, 0.45);
    color: #1b6b3e;
    border-radius: 8px;
    padding: 4px 10px;
    font-size: 0.78rem;
    cursor: pointer;
    font-family: inherit;
}
.cs-fuzzy-unlink:hover { background: rgba(46, 154, 84, 0.12); }
html.night-mode .cs-program-fuzzy-link {
    color: #6ee7b7;
    background: rgba(46, 154, 84, 0.15);
}
html.night-mode .cs-fuzzy-unlink {
    color: #6ee7b7;
    border-color: rgba(110, 231, 183, 0.4);
}

.cs-program-fuzzy-warn {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(245, 158, 11, 0.10);
    border: 1px solid rgba(245, 158, 11, 0.45);
    color: #8a4a02;
    font-size: 0.85rem;
    line-height: 1.4;
}
.cs-program-fuzzy-warn .mdi { color: #d97706; font-size: 1.1rem; flex: 0 0 auto; }
.cs-program-fuzzy-warn > div { flex: 1 1 auto; min-width: 0; }
html.night-mode .cs-program-fuzzy-warn {
    color: #fbbf24;
    background: rgba(245, 158, 11, 0.18);
}
html.night-mode .cs-program-parent-found {
    color: #6ee7b7;
    background: rgba(46, 154, 84, 0.15);
}
.cs-program-add-player {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: rgba(0,0,0,0.02);
}
html.night-mode .cs-program-add-player {
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
}
.cs-program-add-player-head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 10px;
    font-weight: 600; font-size: 0.92rem;
}
.cs-program-add-player-remove {
    background: transparent; border: 0; cursor: pointer;
    font-size: 1.4rem; line-height: 1; padding: 0 4px;
    color: rgba(0,0,0,0.4);
}
.cs-program-add-player-remove:hover { color: #e74c3c; }
html.night-mode .cs-program-add-player-remove { color: rgba(255,255,255,0.5); }
.cs-program-dep-search-wrap { position: relative; margin-bottom: 10px; }
.cs-program-dep-search {
    width: 100%;
    font-size: 0.88rem;
}
.cs-program-dep-results {
    margin-top: 6px;
    display: flex; flex-direction: column; gap: 4px;
}
.cs-program-dep-results:empty { display: none; }
.cs-program-dep-result {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 8px;
    background: rgba(0,0,0,0.02);
    color: inherit;
    cursor: pointer; font-family: inherit; text-align: left;
    font-size: 0.88rem;
}
.cs-program-dep-result:hover:not([disabled]) {
    background: rgba(var(--club-accent-rgb, 245,166,35), 0.12);
    border-color: rgba(var(--club-accent-rgb, 245,166,35), 0.4);
}
.cs-program-dep-result[disabled] {
    opacity: 0.5; cursor: not-allowed;
}
html.night-mode .cs-program-dep-result {
    border-color: rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.04);
}
.cs-program-dep-empty {
    padding: 8px 10px;
    font-size: 0.82rem;
    color: rgba(0,0,0,0.55);
    font-style: italic;
}
html.night-mode .cs-program-dep-empty { color: rgba(255,255,255,0.55); }
.cs-pill--muted {
    margin-left: auto;
    background: rgba(0,0,0,0.08);
    color: rgba(0,0,0,0.6);
    border: 1px solid rgba(0,0,0,0.1);
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: 12px;
}
html.night-mode .cs-pill--muted {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.6);
    border-color: rgba(255,255,255,0.10);
}

.cs-program-form-status {
    min-height: 1.4em;
    font-size: 0.92rem;
}
.cs-program-form-status.success { color: #16a34a; font-weight: 600; }
.cs-program-form-status.error   { color: #dc2626; font-weight: 600; }

/* Programs tab — card grid + cards */
.cs-section--programs .cs-section-inner { padding-top: 24px; padding-bottom: 36px; }
.cs-programs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--club-card-gap, 24px);
    margin-top: 20px;
}
.cs-program-card-tile {
    display: flex;
    flex-direction: column;
    background: rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
    color: inherit;
}
html.night-mode .cs-program-card-tile {
    background: rgba(255,255,255,0.04);
    border-color: rgba(255,255,255,0.08);
}
.cs-program-card-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    border-color: var(--club-accent);
}
.cs-program-card-cover {
    aspect-ratio: 16/9;
    background: rgba(0,0,0,0.08);
    background-size: cover;
    background-position: center;
}
.cs-program-card-body {
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}
.cs-program-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--club-accent);
    margin: 0;
}
.cs-program-card-tagline {
    font-size: 0.88rem;
    opacity: 0.85;
    margin: 0;
}
.cs-program-card-meta {
    margin-top: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    font-size: 0.78rem;
}
.cs-program-card-chip {
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--club-accent-rgb, 245,166,35), 0.18);
    color: var(--club-accent);
    font-weight: 600;
}
.cs-program-card-cta {
    margin-top: auto;
    padding-top: 10px;
    font-weight: 700;
    color: var(--club-accent);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}