/* Global Body Styles - Applied to non-product pages */
body {
    /* padding-top: 56px; For fixed navbar */
    /* --theme-page-bg: System Management > Theme (bowlio-theme.css). */
    background-color: var(--theme-page-bg, var(--surface-page, #f5f7fa));
}

/* Default layout for admin/dashboard pages */
body:not(.product-page):not(.product-page-alt) {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

body:not(.product-page):not(.product-page-alt) main {
    flex: 1;
}
.bg-soft {
    background-color: var(--surface-page, #f5f7fa);
}
.login-card {
    width: 50%;
    max-width: 500px;
    min-width: 320px;
    margin: 80px auto 40px;
    border-radius: var(--radius-lg, 12px);
    box-shadow: var(--shadow-md);
}
.brand-primary {
    color: var(--action-primary, #003020);
}

.logo-img {
    max-width: 75px;
    height: auto;
    width: auto;
    object-fit: contain;
    margin-right: 8px;
}
/* Info bar (season, subscription status, notifications): pinned to the
   top of the page as it scrolls and as wide as the content container.
   Opaque (bg-light) so the page does not show through it. Under the mobile
   drawer and its backdrop (1040/1050) and the desktop sidebar (1030). */
.navbar-info-box {
    position: sticky;
    top: 0;
    z-index: 1020;
    width: 100%;
    border: 1px solid rgba(55,59,62,0.12);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
}
.navbar-info-box .fa-solid {
    color: #6c757d;
}
/* Keeps a control the browser scrolls to (Tab, Shift+Tab, #anchors) clear
   of the pinned bar (WCAG 2.4.11, L-55). The bar is about 62px tall, or
   about 100px on a phone where the status badge takes a second line. */
html:has(.navbar-info-box) {
    scroll-padding-top: 7rem;
}

/* Notifications bell and its dropdown */
.notifications-menu__toggle {
    min-width: 44px;
    min-height: 44px;
    border: 0;
    color: #495057;
}
.notifications-menu__toggle:hover,
.notifications-menu__toggle:focus-visible {
    background-color: rgba(55,59,62,0.08);
}
.notifications-menu__toggle .fa-bell {
    font-size: 1.15rem;
}
.notifications-menu__badge {
    position: absolute;
    top: 2px;
    right: 0;
    font-size: 0.7rem;
    line-height: 1;
    padding: 0.25em 0.45em;
}
.notifications-menu__badge[hidden] {
    display: none;
}
.notifications-menu__panel {
    width: min(360px, calc(100vw - 32px));
    max-height: min(70vh, 480px);
    overflow-y: auto;
}
.notifications-menu__heading {
    border-bottom: 1px solid var(--bs-border-color, #dee2e6);
}
.notifications-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    white-space: normal;
    padding: 0.6rem 1rem 0.6rem 1.5rem;
    border-bottom: 1px solid var(--bs-border-color-translucent, rgba(0,0,0,0.075));
    position: relative;
}
.notifications-menu__item.is-unread {
    background-color: rgba(13, 110, 253, 0.06);
}
/* Unread dot: also told to screen readers by the hidden ", unread" text. */
.notifications-menu__item.is-unread::before {
    content: "";
    position: absolute;
    left: 0.6rem;
    top: 1rem;
    width: 0.45rem;
    height: 0.45rem;
    border-radius: 50%;
    background-color: var(--bs-danger, #dc3545);
}
.notifications-menu__title {
    display: block;
    font-weight: 600;
}
/* Manager-typed notice text can be one long word (A11Y-N-2, L-60). */
.notifications-menu__title,
.notifications-menu__body {
    overflow-wrap: anywhere;
}
/* The inbox row's text column may shrink, so it wraps (A11Y-N-1). */
.notifications-inbox__text {
    min-width: 0;
}
.notifications-menu__item:not(.is-unread) .notifications-menu__title {
    font-weight: 400;
}
.notifications-menu__body {
    display: block;
    font-size: 0.875rem;
}
.notifications-menu__time {
    display: block;
    font-size: 0.75rem;
    /* Darker than Bootstrap's muted grey: 4.5:1 on the unread tint too. */
    color: #555d63;
}
.notifications-menu__empty .fa-circle-check {
    color: var(--bs-success, #198754);
}
.notifications-menu__all {
    font-size: 0.875rem;
}
@media (forced-colors: active) {
    .notifications-menu__item.is-unread::before {
        background-color: CanvasText;
    }
}
.navbar-brand {
    font-weight: bold;
}
.card {
    margin-bottom: 20px;
}
.table-responsive {
    margin-bottom: 20px;
}
.alert {
    margin-top: 20px;
}
/* Mobile optimizations */
@media (max-width: 576px) {
    .container {
        padding: 10px;
    }
    /* Stack standalone buttons full-width on small screens, but leave
       buttons inside groups/toolbars/nav/tables/modals alone - those
       manage their own layout and full-width would squash them into an
       unusable stacked column (e.g. the Cards/List view toggle). */
    .btn:not(.btn-group > .btn):not(.btn-toolbar .btn):not(.navbar .btn):not(.dropdown-menu .btn):not(.modal-footer .btn):not(td .btn):not(th .btn) {
        width: 100%;
        margin-bottom: 10px;
    }
}

/* Make login card responsive: full width on small screens */
@media (max-width: 768px) {
    .login-card {
        width: 90%;
        min-width: unset;
    }
}

/* Navbar layout: colours (deep bowling green, brand red accent on active
   items) live in bowlio-theme.css alongside the rest of the Bootstrap
   brand overrides - kept here is only what's about layout, not colour. */
.navbar .navbar-brand,
.navbar .nav-link,
.navbar .navbar-text,
.navbar .dropdown-toggle {
    display: flex;
    align-items: center;
}

/* Ensure the brand/logo aligns with nav items */
.navbar .navbar-brand .logo-img {
    max-height: 80px;
}

/* Toggler icon visibility on dark background */
.navbar .navbar-toggler-icon {
    filter: invert(1) brightness(2);
}

/* Ensure collapsed (mobile) nav links are readable and centered */
@media (max-width: 991px) {
    .navbar .nav-link {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
    }
}

/* App footer: layout only - colours live in bowlio-theme.css. */
.app-footer {
    width: 100%;
    margin-top: auto;
}

/* Error Capture Box Styles */
#admin-error-capture {
    font-family: 'Courier New', Consolas, Monaco, monospace;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 10000;
}

#admin-error-capture textarea {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    font-size: 10px;
    line-height: 1.3;
    resize: vertical;
}

#admin-error-capture details summary {
    font-weight: bold;
    padding: 2px 0;
}

#admin-error-capture .error-trace {
    max-height: 100px;
    overflow-y: auto;
    background: #e9ecef;
    padding: 8px;
    border-radius: 4px;
    margin-top: 5px;
}

/* Professional Button Styles */
.btn-professional {
    padding: 0.5rem 1.25rem;
    font-weight: 500;
    border-radius: 0.375rem;
    transition: all 0.2s ease-in-out;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    border: none;
    font-size: 0.875rem;
    line-height: 1.5;
}

.btn-professional:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn-professional:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.btn-professional i {
    font-size: 0.875rem;
}

/* Enhanced Action Buttons */
.btn-action {
    transition: all 0.2s ease-in-out;
    font-weight: 500;
    border-radius: 0.25rem;
}

.btn-action:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.btn-action:active {
    transform: translateY(0);
}

.btn-action i {
    font-size: 0.75rem;
}

/* Global H1 styling: bold, with a short red accent underline sized to
   the heading's own text (not the full row width) - inline-block makes
   the heading box shrink-wrap to its text so the 25% underline and its
   left alignment are correct whether the h1 sits in a flex header row
   or stands alone. font-weight/font-size use !important because
   Bootstrap's reboot ships a same-specificity ".h1".."h6" utility
   (0,0,1,0) that several pages already apply to an <h1> (e.g.
   class="h3") to get a smaller page title - a bare element selector
   here would lose that specificity fight and silently skip those
   headings. vertical-align keeps the now-inline-block heading's own
   baseline from opening a small gap before an adjacent block sibling
   (e.g. a subtitle <p> right after it). */
h1 {
    display: inline-block;
    max-width: 100%;
    position: relative;
    font-family: var(--font-display, inherit);
    font-weight: 700 !important;
    letter-spacing: var(--tracking-heading, normal);
    vertical-align: top;
    padding-bottom: 0.5rem;
}

h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 25%;
    height: var(--rule-height, 4px);
    background-color: var(--rule-accent, #dc3545);
    border-radius: 2px;
}

/* Headings rendered on a dark/coloured background (e.g. a card-header
   hero) get a light underline instead of red-on-colour, which reads as
   a rendering glitch rather than an intentional accent. */
.text-white h1::after {
    background-color: rgba(255, 255, 255, 0.9);
}

@media (max-width: 768px) {
    h1 {
        font-size: 1.75rem !important;
    }
}

@media (max-width: 400px) {
    h1 {
        font-size: 1.5rem !important;
    }
}

/* Responsive header row (heading + single CTA button): stacks and the
   button goes full-width below ~576px so it stays an easy tap target
   instead of being squashed beside the heading. */
@media (max-width: 576px) {
    .page-header-row {
        flex-direction: column;
        align-items: stretch !important;
        gap: 0.75rem;
    }

    .page-header-row > .btn {
        width: 100%;
    }
}

/* Page Header Styling */
.page-header {
    border-bottom: 1px solid var(--border-subtle, #e9ecef);
    padding-bottom: 1rem;
    margin-bottom: 2rem;
}

.page-header h1,
.page-header h2 {
    color: var(--text-heading, #495057);
    font-weight: 600;
    display: flex;
    align-items: center;
}

.page-header .text-primary {
    color: var(--action-primary, #0d6efd) !important;
}

/* Button Group Enhancements */
.btn-group .btn-action:not(:last-child) {
    margin-right: 0.25rem;
}

.btn-group-sm .btn-action {
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
}

/* Card Action Buttons */
.card .btn-group {
    margin-top: 0.5rem;
}

.card .btn-action {
    border-radius: 0.25rem;
}

/* Table Action Buttons */
.table td .btn-group {
    white-space: nowrap;
}

.table td .btn-action {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
}

/* Responsive Button Adjustments */
@media (max-width: 768px) {
    .btn-professional {
        font-size: 0.8rem;
        padding: 0.4rem 1rem;
    }
    
    .btn-action {
        font-size: 0.7rem;
        padding: 0.2rem 0.4rem;
    }
    
    /* Row-action toolbars (buttons carrying .btn-action, e.g. edit/delete
       icons in a table row) stack into a full-width column on mobile... */
    .btn-group:has(.btn-action) {
        flex-direction: column;
        width: 100%;
    }

    .btn-group .btn-action {
        margin-right: 0;
        margin-bottom: 0.25rem;
        border-radius: 0.25rem !important;
    }

    /* ...while other button groups (e.g. view-mode toggles) stay a
       compact row and wrap onto a new line if they run out of space,
       instead of being forced into an oversized stacked column. */
    .btn-group:not(:has(.btn-action)) {
        flex-wrap: wrap;
    }
    
    .page-header {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }
    
    .page-header .btn-professional {
        width: 100%;
        margin-top: 1rem;
    }
}

/* Hover Effects for Specific Button Types - .btn-primary/-success/-danger
   already darken one step via bowlio-theme.css; these just extend the same
   colours to the .btn-professional/.btn-action variants. */
.btn-success.btn-professional:hover {
    background-color: color-mix(in srgb, var(--turf-600) 85%, black);
    border-color: color-mix(in srgb, var(--turf-600) 85%, black);
}

.btn-primary.btn-professional:hover {
    background-color: var(--action-primary-hover);
    border-color: var(--action-primary-hover);
}

.btn-outline-primary.btn-action:hover {
    background-color: var(--action-primary);
    border-color: var(--action-primary);
    color: #fff;
}

.btn-outline-success.btn-action:hover {
    background-color: var(--turf-600);
    border-color: var(--turf-600);
    color: #fff;
}

.btn-outline-danger.btn-action:hover {
    background-color: var(--red-600);
    border-color: var(--red-600);
    color: #fff;
}

/* Icon Spacing */
.btn i.me-1 {
    margin-right: 0.25rem !important;
}

.btn i.me-2 {
    margin-right: 0.5rem !important;
}

/* Focus States - keep a visible, high-contrast focus ring for keyboard
   users (WCAG 2.2 SC 2.4.7 Focus Visible / 2.4.13 Focus Appearance)
   instead of relying only on a thin, low-opacity glow. */
.btn-professional:focus-visible,
.btn-action:focus-visible {
    outline: 2px solid var(--focus-ring, #0d6efd);
    outline-offset: 2px;
    box-shadow: var(--shadow-focus, 0 0 0 0.25rem rgba(13, 110, 253, 0.45));
}

/* Mobile responsive error box */
@media (max-width: 768px) {
    #admin-error-capture {
        position: fixed !important;
        top: 10px !important;
        left: 10px !important;
        right: 10px !important;
        max-width: none !important;
        width: auto !important;
    }
}

/* Product Pages Styles - Shared across all product pages */

/* Marketing site typeface: Barlow body / Montserrat headings, matching the
   rest of the brand (the app/admin UI uses the same faces via bowlio-theme.css). */
.product-page,
.product-page-alt {
    font-family: var(--font-body), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

.product-page h1, .product-page h2, .product-page h3, .product-page h4, .product-page h5, .product-page h6,
.product-page-alt h1, .product-page-alt h2, .product-page-alt h3, .product-page-alt h4, .product-page-alt h5, .product-page-alt h6 {
    font-family: var(--font-display), -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    letter-spacing: var(--tracking-display, -0.015em);
}

/* Eyebrow: plain tracked caps in the brand accent colour, no capsule/pill
   background - matches the badge's own "BOWLS MANAGEMENT SYSTEM" device. */
.product-page .section-eyebrow,
.product-page-alt .section-eyebrow {
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: var(--tracking-eyebrow, 0.14em);
    font-family: var(--font-display);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--action-accent);
    margin-bottom: 1rem;
}

.product-page .hero-section,
.product-page-alt .hero-section {
    background-color: var(--surface-inverse);
    color: var(--text-on-dark);
    padding: 140px 0 100px;
    position: relative;
    overflow: hidden;
}

.product-page .hero-section::before,
.product-page-alt .hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Pre-cropped variant - the source photo has a credit watermark baked into
       the bottom-left corner which would otherwise show through at low opacity */
    background: url('/assets/IMG_4775-hero.jpg') center/cover no-repeat;
    opacity: 0.22;
    z-index: 0;
}

/* Single-colour "protection" scrim (green-950 to transparent) so text stays
   legible over the photo, instead of a decorative multi-colour gradient. */
.product-page .hero-section::after,
.product-page-alt .hero-section::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, var(--green-950) 0%, color-mix(in srgb, var(--green-950) 78%, transparent) 55%, color-mix(in srgb, var(--green-950) 55%, transparent) 100%);
    z-index: 0;
}

.product-page .hero-content,
.product-page-alt .hero-content,
.product-page .hero-section .row,
.product-page-alt .hero-section .row {
    position: relative;
    z-index: 1;
}

.product-page .hero-section .lead,
.product-page-alt .hero-section .lead {
    color: var(--text-on-dark-muted);
    max-width: 40rem;
}

/* Small trust indicators row shown under the hero CTAs */
.product-page .hero-trust,
.product-page-alt .hero-trust {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    margin-top: 2rem;
    font-size: 0.9rem;
    color: var(--text-on-dark-muted);
}

.product-page .hero-trust span,
.product-page-alt .hero-trust span {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.product-page .hero-trust i,
.product-page-alt .hero-trust i {
    color: var(--turf-400);
}

.product-page .hero-preview-frame,
.product-page-alt .hero-preview-frame {
    filter: drop-shadow(0 25px 45px rgba(0, 0, 0, 0.35));
}

/* The one red CTA per view - the brand's single-accent device. */
.product-page .btn-primary-custom,
.product-page-alt .btn-primary-custom {
    background: var(--action-accent);
    color: var(--text-on-accent);
    border: 1px solid var(--action-accent);
    padding: 0.85rem 1.75rem;
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: 0.02em;
    border-radius: var(--radius-sm);
    transition: var(--transition-control);
}

.product-page .btn-primary-custom:hover,
.product-page-alt .btn-primary-custom:hover {
    background: var(--action-accent-hover);
    border-color: var(--action-accent-hover);
    color: var(--text-on-accent);
}

.product-page .hero-section .btn-outline-light:hover,
.product-page-alt .hero-section .btn-outline-light:hover {
    color: var(--green-950);
}

.product-page .feature-card,
.product-page-alt .feature-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: 32px 28px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    transition: var(--transition-control), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
    height: 100%;
}

.product-page .feature-card:hover,
.product-page-alt .feature-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--border-subtle);
}

.product-page .feature-icon,
.product-page-alt .feature-icon {
    width: 64px;
    height: 64px;
    background: var(--action-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: var(--text-on-dark);
    font-size: 1.4rem;
    box-shadow: var(--shadow-sm);
}

.product-page .pricing-card,
.product-page-alt .pricing-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
    transition: var(--transition-control), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
    height: 100%;
}

.product-page .pricing-card:hover,
.product-page-alt .pricing-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Only cards explicitly marked as featured get the ribbon - previously every
   pricing card showed "POPULAR", including plans shown side-by-side. The
   featured plan is this view's one permitted red accent. */
.product-page .pricing-card.featured,
.product-page-alt .pricing-card.featured {
    border: 2px solid var(--action-accent);
}

.product-page .pricing-card.featured::before,
.product-page-alt .pricing-card.featured::before {
    content: 'POPULAR';
    position: absolute;
    top: 20px;
    right: -30px;
    background: var(--action-accent);
    color: var(--text-on-accent);
    padding: 5px 40px;
    font-family: var(--font-display);
    font-size: 0.75rem;
    font-weight: bold;
    letter-spacing: var(--tracking-micro);
    transform: rotate(45deg);
}

/* Plain card, no colour stripe - the design system reserves accent borders
   for the one important card on a screen, not routine testimonials. */
.product-page .testimonial-card,
.product-page-alt .testimonial-card {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    padding: 32px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
}

.product-page .footer,
.product-page-alt .footer {
    background-color: var(--surface-inverse);
    color: var(--text-on-dark-muted);
    border-top: var(--rule-height) solid var(--rule-accent);
}

/* Plain hairline in place of the old decorative colour-gradient rule. */
.product-page .section-divider,
.product-page-alt .section-divider {
    height: 1px;
    background: var(--border-subtle);
    border: none;
    margin: 50px 0;
    opacity: 1;
}

/* Navbar: subtle shadow once the page is scrolled (JS toggles the .scrolled class) */
.product-page .navbar,
.product-page-alt .navbar {
    transition: box-shadow 0.25s ease, padding 0.25s ease;
}

.product-page .navbar.scrolled,
.product-page-alt .navbar.scrolled {
    box-shadow: var(--shadow-md);
}

/* Product Page Body Layout */
body.product-page,
body.product-page-alt {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-color: var(--surface-card); /* Override global background for product pages */
}

body.product-page main,
body.product-page-alt main {
    flex: 1;
}

/* About Page Styles */
.about-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    padding: 40px;
    margin-bottom: 30px;
}

.team-member {
    text-align: center;
    margin-bottom: 30px;
}

.team-member img {
    width: 150px;
    height: 150px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 20px;
    border: 4px solid var(--action-primary);
}

/* Flat sunken surface - no decorative grey gradient. */
.mission-card {
    background: var(--surface-sunken);
    border-radius: var(--radius-lg);
    padding: 40px;
    text-align: center;
    margin: 40px 0;
}

.stats-card {
    background: var(--surface-inverse);
    color: var(--text-on-dark);
    border-radius: var(--radius-lg);
    padding: 30px;
    text-align: center;
    margin: 20px 0;
}

.timeline-item {
    position: relative;
    padding-left: 50px;
    margin-bottom: 30px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 0;
    width: 2px;
    height: 100%;
    background: var(--border-default);
}

.timeline-item::after {
    content: '';
    position: absolute;
    left: 8px;
    top: 15px;
    width: 14px;
    height: 14px;
    background: var(--action-primary);
    border-radius: 50%;
}

/* Plain sunken callout - no coloured left-border stripe. */
.value-prop {
    background: var(--surface-sunken);
    border-radius: var(--radius-lg);
    padding: 30px;
    margin: 20px 0;
}

/* FAQ Page Styles */
.faq-card {
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 20px;
}

.faq-question {
    background: var(--surface-sunken);
    border: none;
    border-radius: var(--radius-md);
    padding: 15px 20px;
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--action-primary);
    text-align: left;
    width: 100%;
    cursor: pointer;
}

.faq-question:hover {
    background: var(--slate-100);
}

.faq-answer {
    padding: 0 20px 20px 20px;
    color: var(--text-muted);
}

.faq-icon {
    transition: transform var(--dur-base) var(--ease-standard);
}

.faq-icon.rotated {
    transform: rotate(180deg);
}

/* Terms and Privacy Styles */
.legal-section {
    background: var(--surface-card);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-subtle);
    padding: 40px;
    margin-bottom: 30px;
}

.policy-content {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px;
    margin: -50px auto 0;
    position: relative;
    z-index: 1;
}

.policy-section {
    margin-bottom: 30px;
}

.policy-section h3 {
    color: var(--action-primary);
    border-bottom: 2px solid var(--border-subtle);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.policy-section h4 {
    color: var(--text-heading);
    margin-top: 25px;
    margin-bottom: 15px;
}

/* Plain sunken callouts - no coloured left-border stripe (reserved for the
   one important card on a screen, per the design system's card rules). */
.terms-highlight {
    background: var(--surface-sunken);
    padding: 20px;
    border-radius: var(--radius-md);
    margin: 20px 0;
}

.last-updated {
    background: var(--surface-sunken);
    padding: 15px;
    border-radius: var(--radius-md);
}

.toc-list {
    background: var(--surface-sunken);
    padding: 20px;
    border-radius: var(--radius-md);
    margin: 20px 0;
}

.toc-list ol {
    margin: 0;
    padding-left: 20px;
}

.toc-list li {
    margin-bottom: 8px;
}

/* Cookie Policy Specific Styles */
.cookie-table {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin: 20px 0;
}

.cookie-table table {
    margin: 0;
}

.cookie-table th {
    background: var(--surface-inverse);
    color: var(--text-on-dark);
    font-family: var(--font-display);
    padding: 12px;
    text-align: left;
}

.cookie-table td {
    padding: 12px;
    border-bottom: 1px solid var(--border-subtle);
}

.cookie-category {
    background: var(--slate-100);
    padding: 15px;
    border-radius: var(--radius-sm);
    margin: 20px 0;
}

/* Success Page Styles */
.success-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 50px;
    text-align: center;
    margin: 50px auto;
    max-width: 600px;
}

.success-icon {
    width: 100px;
    height: 100px;
    background: var(--turf-600);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    color: var(--white);
    font-size: 3rem;
}

/* Purchase Page Styles */
.purchase-card {
    background: var(--surface-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 40px;
    margin-bottom: 30px;
    max-width: 600px;
    margin: 50px auto;
    border: none;
}

.price-display {
    font-family: var(--font-mono);
    font-size: 3rem;
    font-weight: bold;
    color: var(--action-primary);
}

.feature-list {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: 20px;
}

/* Reports Dashboard Timeline Styles */
.timeline {
    position: relative;
    padding-left: 3rem;
}

.timeline-item {
    position: relative;
    padding-bottom: 1.5rem;
}

.timeline-item:not(:last-child):before {
    content: '';
    position: absolute;
    left: -2.5rem;
    top: 2rem;
    height: calc(100% - 1rem);
    width: 2px;
    background-color: var(--border-subtle);
}

.timeline-marker {
    position: absolute;
    left: -3rem;
    top: 0.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background-color: var(--action-primary);
    color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.opacity-75 {
    opacity: 0.75;
}

/* Members List Styles */
.contact-info-placeholder {
    min-height: 38px;
    background: var(--surface-sunken);
    border-radius: var(--radius-xs);
    padding: 4px 8px;
    font-style: italic;
    font-size: 0.95em;
}

.contact-info-details {
    min-height: 38px;
}

/* Maintenance Mode Styles - flat brand green, no decorative gradient. */
.maintenance-mode-body {
    background: var(--surface-inverse);
    min-height: 100vh;
}

.maintenance-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
}

/* Trial Registration Styles */
.trial-card {
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
}

.trial-benefits {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: 20px;
}

.benefit-item {
    margin-bottom: 10px;
    font-size: 14px;
}

.form-section {
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 20px;
}

.section-title {
    color: var(--action-primary);
    font-family: var(--font-display);
    font-weight: 600;
    margin-bottom: 20px;
    border-bottom: 2px solid var(--action-primary);
    padding-bottom: 8px;
    display: inline-block;
}

.trial-success-card {
    border: none;
    box-shadow: var(--shadow-md);
    border-radius: var(--radius-lg);
    border-top: var(--rule-height) solid var(--turf-600);
}

.trial-info-box {
    background: var(--action-primary);
    color: var(--text-on-dark);
    border-radius: var(--radius-lg);
    padding: 30px;
    margin: 20px 0;
}

.trial-stat {
    text-align: center;
}

.stat-number {
    font-family: var(--font-mono);
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
}

.stat-label {
    font-size: 0.9rem;
    opacity: 0.9;
}

.club-info {
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
    padding: 20px;
}

.info-item {
    margin-bottom: 8px;
    padding: 5px 0;
}

.next-steps {
    text-align: left;
}

/* Plain sunken row - no coloured left-border stripe. */
.step-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 15px;
    background: var(--surface-sunken);
    border-radius: var(--radius-md);
}

.step-number {
    background: var(--action-primary);
    color: var(--text-on-dark);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    margin-right: 15px;
    flex-shrink: 0;
}

.step-content {
    flex: 1;
}

.support-info {
    background: var(--turf-100);
    border-radius: var(--radius-md);
    padding: 20px;
    border: 1px solid var(--turf-200);
}

.support-method {
    text-align: center;
    padding: 10px;
}

.trial-reminder {
    border-left: 4px solid var(--turf-600);
}

/* Trial Card Highlight - the one emphasised plan on this screen; red is the
   brand's single-accent device for exactly this kind of callout. */
.trial-card-highlight {
    position: relative;
    border: 2px solid var(--action-accent) !important;
    transform: scale(1.05);
    box-shadow: var(--shadow-lg) !important;
}

.trial-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--action-accent);
    color: var(--text-on-accent);
    padding: 5px 20px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: bold;
}

.hero-buttons .btn {
    margin-bottom: 10px;
}

/* Form Enhancement Styles */
.form-section {
    background: var(--surface-card);
    border-radius: var(--radius-sm);
    margin-bottom: 1.5rem;
}

.section-header {
    background: var(--surface-sunken);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-left: 4px solid var(--action-primary);
}

.section-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-heading);
    margin: 0;
    display: flex;
    align-items: center;
}

.icon-circle {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-xs);
}

.form-label.required::after {
    content: " *";
    color: var(--red-600);
    font-weight: bold;
}

/* Bootstrap 5's warning/info variants default to white text (badges via
   .badge's --bs-badge-color; stat cards/headers via the old .text-white
   convention used on bg-warning/bg-info throughout this app). White text
   on the brand's honours gold or turf tint fails 4.5:1 too - force dark/ink
   text on both instead. !important matches Bootstrap's own .text-white
   utility, which is itself !important. */
.badge.bg-warning,
.badge.bg-info,
.bg-warning.text-white,
.bg-info.text-white {
    color: var(--ink-900) !important;
}

/* The header subscription badge can be long ("Active, not renewing
   automatically, 2 days left"), so let it wrap at 320px and 400% zoom
   rather than run off the screen (WCAG 1.4.10, issue #159). */
.header-subscription-badge .badge {
    white-space: normal;
    text-align: left;
    line-height: 1.3;
}

.form-actions {
    background: var(--surface-sunken);
    border-top: 1px solid var(--border-subtle);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    margin: 1.5rem -1.5rem -1.5rem -1.5rem;
    padding: 1rem 1.5rem;
}

/* Enhanced Cards */
.card-enhanced {
    background: var(--surface-card);
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xs);
    transition: var(--transition-control), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}

.card-enhanced:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.card-enhanced .card-header {
    background: var(--surface-sunken);
    border-bottom: 1px solid var(--border-subtle);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: 1rem 1.5rem;
}

/* Form Switch Enhancement */
.form-switch .form-check-input {
    width: 3rem;
    height: 1.5rem;
    border-radius: var(--radius-pill);
    background-color: var(--slate-500);
    border: none;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
    transition: var(--transition-control);
}

.form-switch .form-check-input:checked {
    background-color: var(--turf-600);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

.form-switch .form-check-input:focus {
    box-shadow: 0 0 0 0.25rem color-mix(in srgb, var(--turf-600) 25%, transparent);
}

/* Loading Animation */
@keyframes pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.btn-loading {
    animation: pulse 1.5s ease-in-out infinite;
    pointer-events: none;
}

/* Notification Enhancements */
.alert-fixed {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 9999;
    min-width: 300px;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    border: none;
    border-radius: 0.5rem;
}

/* Responsive Form Improvements */
@media (max-width: 768px) {
    .form-actions {
        padding: 1rem;
        margin: 1rem -1rem -1rem -1rem;
    }
    
    .form-actions .d-flex {
        flex-direction: column;
        gap: 0.5rem;
    }
    
    .form-actions .btn {
        width: 100%;
    }
    
    .icon-circle {
        width: 2.5rem;
        height: 2.5rem;
        font-size: 1rem;
    }
    
    .section-header {
        padding: 0.5rem 0.75rem;
    }
}

@media (max-width: 768px) {
    .trial-card-highlight {
        transform: none;
        margin-bottom: 30px;
    }

    .hero-buttons .btn {
        display: block;
        width: 100%;
        margin-bottom: 15px;
    }
}

/* Season-locked controls (see includes/SeasonContext.php::canModify()) -
 * these are real, focusable, non-`disabled` buttons/links (so keyboard and
 * screen-reader users can still reach them and their `title`/`aria-disabled`
 * explanation - a native `disabled` attribute would remove them from the Tab
 * order entirely). This class restores the visual "greyed out" treatment
 * Bootstrap's native `:disabled` pseudo-class would otherwise have provided,
 * without using `pointer-events: none` - the click handler on these controls
 * still needs to fire (to surface the explanation via an alert) for mouse
 * and touch users, not just keyboard/AT users. */
.btn-locked {
    opacity: .65;
    cursor: not-allowed;
}
/* Super admin impersonation banner (views/layouts/header.php). On every
   page while impersonating and not dismissible; pinned to the top from
   tablet width up (on a phone it would cover too much of the screen).
   Gold on ink is about 11:1 contrast. */
.impersonation-banner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem 1rem;
    padding: 0.625rem 1rem;
    background: var(--gold-500, #e9c46a);
    color: var(--ink-900, #1c1e2d);
    border-bottom: 3px solid var(--ink-900, #1c1e2d);
}
@media (min-width: 768px) {
    .impersonation-banner {
        position: sticky;
        top: 0;
        z-index: 1030;
    }
}
.impersonation-banner__text {
    flex: 1 1 28rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
    overflow-wrap: anywhere;
}
.impersonation-banner__text .fa-user-secret {
    margin-top: 0.2rem;
}
.impersonation-banner__form {
    margin: 0;
}
.impersonation-banner .btn {
    min-height: 44px;
    background: var(--ink-900, #1c1e2d);
    border-color: var(--ink-900, #1c1e2d);
    color: #fff;
}
.impersonation-banner .btn:hover,
.impersonation-banner .btn:focus-visible {
    background: var(--ink-700, #3c3f57);
    border-color: var(--ink-700, #3c3f57);
    color: #fff;
}
.impersonation-banner .btn:focus-visible {
    outline: 3px solid var(--ink-900, #1c1e2d);
    outline-offset: 2px;
    box-shadow: none;
}

/* Profile picture card (views/partials/profile-picture.php). Two classes:
   sidebar-menu.css, loaded after this file, sizes .account-avatar to 32px. */
.account-avatar.profile-picture-preview {
    width: 96px;
    height: 96px;
    font-size: 2rem;
}

.profile-picture-forms {
    min-width: min(100%, 16rem);
}

/* Profile picture cropper (the <dialog> in views/partials/profile-picture.php,
   driven by assets/js/profile-picture-cropper.js). The circle (.pp-cropper__ring)
   stays still; the picture moves behind it. Its box is the square that is kept.
   Open, the dialog is a column: the body scrolls, the Cancel / Save footer
   does not, so the footer can never cover a focused control (WCAG 2.4.11). */
.pp-cropper {
    width: min(26rem, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 0.75rem;
    box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.35);
    background: #fff;
    color: var(--ink-900, #1c1e2d);
}

.pp-cropper[open] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pp-cropper::backdrop {
    background: rgba(0, 0, 0, 0.6);
}

.pp-cropper__body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    padding: 1.25rem 1.25rem 0.5rem;
}

.pp-cropper__stage {
    position: relative;
    width: min(100%, 55vh);
    aspect-ratio: 1;
    margin: 0 auto;
    overflow: hidden;
    border-radius: 0.5rem;
    background: var(--ink-900, #1c1e2d);
    cursor: grab;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}

.pp-cropper__stage.is-dragging {
    cursor: grabbing;
}

.pp-cropper__stage:focus-visible {
    outline: 3px solid var(--ink-900, #1c1e2d);
    outline-offset: 3px;
}

.pp-cropper__image {
    position: absolute;
    top: 0;
    left: 0;
    max-width: none;
    transform-origin: 0 0;
    pointer-events: none;
}

.pp-cropper__ring {
    position: absolute;
    inset: 8%;
    border-radius: 50%;
    box-shadow: 0 0 0 2px #fff, 0 0 0 9999px rgba(0, 0, 0, 0.6);
    pointer-events: none;
}

.pp-cropper__zoom {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

.pp-cropper__zoom .pp-cropper__btn {
    flex: 0 0 44px;
}

/* The range: a track of at least 3:1 against white and a visible focus ring
   (Bootstrap's pale track and 25% halo are not, WCAG 1.4.11 / 2.4.7). */
.pp-cropper__zoom .form-range {
    min-width: 0;
}

.pp-cropper .form-range::-webkit-slider-runnable-track {
    background: #6c757d;
}

.pp-cropper .form-range::-moz-range-track {
    background: #6c757d;
}

.pp-cropper .form-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ink-900, #1c1e2d);
}

.pp-cropper .form-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--ink-900, #1c1e2d);
}

.pp-cropper__move {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    margin-top: 0.75rem;
}

/* 44 px targets: comfortable on a phone, well over WCAG 2.2's 24 px. */
.pp-cropper__btn {
    min-width: 44px;
    min-height: 44px;
}

.pp-cropper__error {
    margin-top: 0.75rem;
}

.pp-cropper__actions {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 1.25rem 1.25rem;
    border-top: 1px solid #dee2e6;
}

/* The phone rule near the top of this file makes every .btn full width with
   a bottom margin; its :not() list outranks any plain selector, hence
   !important, kept to this dialog. */
.pp-cropper .btn {
    width: auto !important;
    margin-bottom: 0 !important;
}

@media (max-width: 575.98px), (max-height: 760px) {
    .pp-cropper__body {
        padding: 1rem 1rem 0.5rem;
    }

    .pp-cropper__actions {
        padding: 0.75rem 1rem 1rem;
    }

    .pp-cropper__actions .btn {
        flex: 1 1 0;
    }
}

/* Windows High Contrast and other forced colours drop box-shadow and custom
   range backgrounds: draw the circle as a border in system colours, so what
   will be shown stays visible (WCAG 1.4.11). */
@media (forced-colors: active) {
    .pp-cropper__ring {
        box-shadow: none;
        border: 3px solid Highlight;
        outline: 1px solid CanvasText;
    }

    .pp-cropper .form-range {
        appearance: auto;
        -webkit-appearance: auto;
    }

    .pp-cropper .form-range::-webkit-slider-runnable-track {
        background: ButtonText;
    }

    .pp-cropper .form-range::-webkit-slider-thumb {
        background: Highlight;
        border: 2px solid ButtonText;
    }

    .pp-cropper .form-range::-moz-range-track {
        background: ButtonText;
    }

    .pp-cropper .form-range::-moz-range-thumb {
        background: Highlight;
        border: 2px solid ButtonText;
    }
}