body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    position: relative;
    isolation: isolate;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: 0.52;
    background:
        radial-gradient(circle at 14% 8%, rgba(247, 210, 26, 0.22), transparent 34%),
        url('../images/sports-bg.svg') center top / cover no-repeat;
}

:root {
    --brand-green: #16833b;
    --brand-green-deep: #0c5f2a;
    --brand-yellow: #f7d21a;
    --brand-yellow-soft: #fff3a6;

    /* Button system -- see docs/button-system-plan.md.
       44px is WCAG 2.2 SC 2.5.5 (AAA) and Apple's HIG figure; it is also what the booking
       page already used, so that page needs no migration. `-sm` is a desktop-only density
       affordance and is lifted back to --btn-height on mobile further down: on a phone,
       size can only mean "can my thumb hit this", never "how important is this".
       --btn-radius sits just inside --tile-card-radius so buttons nest inside cards
       without their corners reading as misaligned. */
    --btn-height: 44px;
    --btn-height-sm: 36px;
    --btn-height-lg: 52px;
    --btn-radius: 0.7rem;
    --btn-font-weight: 600;
    --btn-padding-x: 1.1rem;
    --btn-min-width: 11.25rem;

    --tile-card-radius: 0.85rem;
    --tile-card-border-color: #dce8f4;
    --tile-card-base-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.07);
    --tile-card-body-padding: 1rem;
    --tile-card-body-padding-compact: 0.85rem;
    --tile-card-hover-shadow: 0 0.9rem 1.6rem rgba(7, 31, 40, 0.14);
    --tile-card-hover-lift: -2px;
}

@media (max-width: 767.98px) {
    :root {
        --tile-card-body-padding: var(--tile-card-body-padding-compact);
    }
}

a,
a:hover,
a:focus,
a:active,
a:focus-visible {
    text-decoration: none !important;
}

main {
    flex: 1 0 auto;
}

.admin-dashboard-shell {
    --admin-mobile-gutter-x: 0.75rem;
    --admin-mobile-gutter-y: 0.85rem;
}

.admin-mobile-list {
    display: grid;
    gap: 0.7rem;
}

.admin-mobile-card {
    border: 1px solid rgba(22, 131, 59, 0.14);
    border-radius: 0.85rem;
    padding: 0.8rem;
    background: linear-gradient(180deg, #ffffff 0%, #f9fdf8 100%);
    box-shadow: 0 0.45rem 1rem rgba(15, 79, 62, 0.08);
}

.admin-mobile-card--empty {
    text-align: center;
}

.admin-mobile-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.6rem;
    margin-bottom: 0.4rem;
}

.admin-mobile-card__title {
    font-weight: 700;
    color: #143f2f;
    line-height: 1.25;
}

.admin-mobile-card__meta {
    font-size: 0.85rem;
    color: #4d675c;
    margin-bottom: 0.3rem;
}

.admin-mobile-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin-top: 0.45rem;
}

.admin-quick-filters {
    display: grid;
    gap: 0.55rem;
}

.admin-quick-filters__group {
    display: grid;
    gap: 0.35rem;
}

.admin-quick-filters__group-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.45rem;
}

.admin-quick-filters__label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: #5f7d6e;
    font-weight: 700;
}

.admin-quick-filters__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.admin-quick-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    border: 1px solid rgba(22, 131, 59, 0.22);
    background: #ffffff;
    color: #1a613d;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1;
}

.admin-quick-chip.active {
    background: linear-gradient(135deg, #16833b 0%, #0f612b 100%);
    border-color: #16833b;
    color: #ffffff;
    box-shadow: 0 0.4rem 0.8rem rgba(22, 131, 59, 0.2);
}

.admin-quick-chip--clear {
    min-height: 1.5rem;
    padding: 0.2rem 0.48rem;
    font-size: 0.68rem;
    letter-spacing: 0.02em;
    color: #5a7367;
    border-color: rgba(22, 131, 59, 0.16);
    background: rgba(255, 255, 255, 0.86);
}

.admin-quick-chip--clear.active {
    background: rgba(255, 255, 255, 0.86);
    color: #5a7367;
    border-color: rgba(22, 131, 59, 0.16);
    box-shadow: none;
}

.profile-tab-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.profile-page-heading {
    margin-bottom: 1rem;
}

.profile-page-heading h1 {
    margin-bottom: 0.25rem;
    line-height: 1.2;
}

.profile-page-heading p {
    margin-bottom: 0;
}

.profile-tab-row {
    margin-bottom: 1.25rem;
}

.profile-tab-chips .nav-item {
    flex: 0 0 auto;
}

/* These are `nav-link`, not `.btn`, so the shared button layer never reached them -- they
   rendered at 37px while every real control on the page is 44px. Same floor and the same
   inline-flex centring the `.btn` base uses, since a min-height alone does not centre a
   label. Pill radius is kept: these are tabs, and reading as tabs rather than as three
   more buttons is the point. */
.profile-tab-chips .nav-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    border: 1px solid rgba(22, 131, 59, 0.2);
    border-radius: 999px;
    background: #ffffff;
    color: #1a613d;
    font-weight: 700;
    line-height: 1.2;
    padding: 0.5rem 0.85rem;
}

.profile-tab-chips .nav-link:hover,
.profile-tab-chips .nav-link:focus-visible {
    border-color: rgba(22, 131, 59, 0.45);
    color: #114f31;
}

.profile-tab-chips .nav-link.active {
    background: linear-gradient(135deg, #16833b 0%, #0f612b 100%);
    border-color: #16833b;
    color: #ffffff;
    box-shadow: 0 0.4rem 0.9rem rgba(22, 131, 59, 0.22);
}

@media (max-width: 991.98px) {
    .admin-dashboard-shell {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .admin-dashboard-shell .row {
        --bs-gutter-x: var(--admin-mobile-gutter-x);
        --bs-gutter-y: var(--admin-mobile-gutter-y);
    }

    .admin-dashboard-shell .card {
        border-radius: 0.9rem;
    }

    .admin-dashboard-shell .card-body {
        padding: 0.9rem;
    }

    .admin-dashboard-shell .table-responsive {
        border: 1px solid rgba(22, 131, 59, 0.14);
        border-radius: 0.8rem;
        background: #ffffff;
    }

    .admin-dashboard-shell .table {
        min-width: 680px;
        margin-bottom: 0;
    }

    .admin-dashboard-shell .d-flex.gap-2.flex-wrap > .btn,
    .admin-dashboard-shell .d-flex.gap-2.flex-wrap > a {
        flex: 1 1 calc(50% - 0.5rem);
    }
}

@media (max-width: 767.98px) {
    .admin-dashboard-shell {
        padding-left: 0.65rem;
        padding-right: 0.65rem;
        padding-bottom: 1rem;
    }

    .admin-dashboard-shell h1.h3,
    .admin-dashboard-shell h1.h4,
    .admin-dashboard-shell h2.h4,
    .admin-dashboard-shell h2.h5 {
        line-height: 1.2;
    }

    .admin-dashboard-shell .display-6 {
        font-size: clamp(1.45rem, 6.8vw, 2rem);
    }

    .admin-dashboard-shell .calendar-page-hero,
    .admin-dashboard-shell .config-hero {
        border-radius: 1rem;
        padding: 1rem !important;
    }

    .admin-dashboard-shell .btn,
    .admin-dashboard-shell .form-control,
    .admin-dashboard-shell .form-select {
        min-height: 2.45rem;
    }

    .admin-dashboard-shell .btn-sm {
        min-height: 2.2rem;
    }

    .admin-dashboard-shell .d-grid.d-md-flex > .btn,
    .admin-dashboard-shell .d-grid.d-md-flex > a {
        width: 100%;
    }

    .admin-dashboard-shell .d-flex.gap-2.flex-wrap {
        width: 100%;
    }

    .admin-dashboard-shell .d-flex.gap-2.flex-wrap > .btn,
    .admin-dashboard-shell .d-flex.gap-2.flex-wrap > a {
        flex: 1 1 100%;
    }

    .admin-dashboard-shell .table th,
    .admin-dashboard-shell .table td {
        font-size: 0.87rem;
        white-space: nowrap;
    }

    .admin-mobile-card__actions > .btn,
    .admin-mobile-card__actions > a,
    .admin-mobile-card__actions > form {
        flex: 1 1 100%;
    }

    .admin-mobile-card__actions > form > .btn {
        width: 100%;
    }

    .profile-tab-chips {
        gap: 0.4rem;
    }

    .profile-page-heading {
        margin-bottom: 0.85rem;
    }

    .profile-tab-row {
        margin-bottom: 1rem;
    }

    /* Was `flex: 1 1 calc(50% - 0.2rem)`, a two-up grid narrower than the longest label:
       at 375px each chip got 148px, "Redeemed Vouchers" wrapped to two lines at 58px
       beside a 39px sibling, and the third chip was left alone on its own full-width row.
       Three chips never divide into a two-up grid anyway. Full width each, so the row is
       even, every label stays on one line, and each chip clears 44px -- the same thing
       `.action-row` does to buttons at this breakpoint. */
    .profile-tab-chips .nav-item {
        flex: 1 1 100%;
    }

    .profile-tab-chips .nav-link {
        width: 100%;
        text-align: center;
        padding: 0.55rem 0.75rem;
    }
}

body > * {
    position: relative;
}

/* .modal-backdrop (z-index 1050) is appended outside <main>, which traps any modal inside it below the backdrop -- lift main above Bootstrap's overlay range while a modal is open. */
body.modal-open > main {
    z-index: 1100;
}

@media (max-width: 767.98px) {
    body::before {
        opacity: 0.4;
        background-position: center center;
    }
}

.site-footer {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle at 12% 8%, rgba(247, 210, 26, 0.22), transparent 38%),
        linear-gradient(160deg, var(--brand-green-deep) 0%, var(--brand-green) 52%, #2ca646 100%);
    border-top: 1px solid rgba(247, 210, 26, 0.22);
}

.site-footer > .container {
    position: relative;
    z-index: 2;
}

.footer-sports-vector {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.92;
}

.footer-sports-vector svg {
    width: 100%;
    height: 100%;
    display: block;
    shape-rendering: geometricPrecision;
}

.site-footer .footer-menu a,
.site-footer .text-light-emphasis {
    color: rgba(255, 245, 171, 0.95) !important;
}

.site-footer .footer-menu a:hover,
.site-footer .footer-menu a:focus-visible {
    color: #ffffff !important;
}

.site-navbar {
    background:
        radial-gradient(circle at 18% 18%, rgba(247, 210, 26, 0.2), transparent 30%),
        linear-gradient(135deg, var(--brand-green-deep) 0%, var(--brand-green) 50%, #2ca646 100%);
    border-bottom: 1px solid rgba(247, 210, 26, 0.2);
    box-shadow: 0 0.65rem 1.4rem rgba(13, 72, 29, 0.16);
    position: relative;
    z-index: 2;
}

/* Only outrank modals (z-index 1055) while the mobile menu/overlay is actually open. */
body.site-navbar-open .site-navbar {
    z-index: 1202;
}

.site-navbar .navbar-brand {
    color: var(--brand-yellow) !important;
    letter-spacing: 0.02em;
}

.site-navbar .navbar-brand:hover,
.site-navbar .navbar-brand:focus-visible {
    color: var(--brand-yellow-soft) !important;
}

.site-navbar .nav-link {
    color: rgba(255, 245, 171, 0.96) !important;
}

.site-navbar .nav-link:hover,
.site-navbar .nav-link:focus-visible {
    color: #ffffff !important;
}

/* Current-page indicator.

   A filled pill rather than an underline or a tinted label, because the navbar is a
   gradient (#0c5f2a -> #16833b -> #2ca646) and each item sits over a different part of
   it: anything that leaves the text on that background inherits its contrast. Brand
   yellow *text* measured 1.90:1 at the light end. The pill supplies its own background,
   so #0c5f2a on #f7d21a is a constant 5.28:1 wherever the item happens to sit.

   It is also the pairing this navbar already uses for the role badge, and it reads the
   same way in the horizontal bar and in the mobile drawer -- a bottom border would look
   like a list divider once the items stack.

   The `:hover`/`:focus-visible` variants are belt-and-braces, not load-bearing: the base
   `.active` selector is already (0,4,0) against the generic hover rule's (0,3,0), so it
   wins on its own -- verified by deleting them and watching the hover test still pass.
   They are kept so the indicator survives that hover rule gaining specificity later, which
   would otherwise repaint the label white on yellow at about 1.7:1.

   Weight is a second, non-colour cue; `aria-current="page"` in the markup is the third, so
   the state never depends on colour alone. */
.site-navbar .nav-item > .nav-link.active,
.site-navbar .nav-item > .nav-link.active:hover,
.site-navbar .nav-item > .nav-link.active:focus-visible {
    background-color: var(--brand-yellow);
    color: var(--brand-green-deep) !important;
    font-weight: 700;
}

.site-navbar .navbar-toggler {
    border-color: rgba(247, 210, 26, 0.48);
}

.site-navbar .navbar-toggler-icon {
    filter: brightness(0) saturate(100%) invert(86%) sepia(82%) saturate(672%) hue-rotate(351deg) brightness(102%) contrast(101%);
}

/* Soft fill rather than solid brand yellow, so the role label stays subordinate to the
   current-page pill below -- they sit side by side in the navbar and were previously the
   same colour, which made a static role label read like a second selected item. Same hue
   family, 1.34x the luminance, and 6.93:1 against the label. */
.site-navbar .badge.text-bg-light.text-success {
    color: var(--brand-green-deep) !important;
    background-color: var(--brand-yellow-soft) !important;
}

/* ==========================================================================
   Button system (docs/button-system-plan.md P1)

   Bootstrap 5.3.3 ships every button property as a --bs-btn-* custom property, so
   geometry and colour are set by *redefining those variables* rather than by overriding
   real properties with !important. Doing it this way means hover, active, disabled and
   the focus-ring colour all follow from one declaration block instead of needing a rule
   each -- and it cannot collide the way a real-property override can (the Open Play
   gradient used to survive only because .btn-success's `background-color: !important`
   and a non-important `background` shorthand happened to split the difference).

   This file loads after Bootstrap (layouts/base.php:18 then :21), so at equal specificity
   these win on source order. No !important needed anywhere in this section.

   The colour overrides *below* this block still use the older !important idiom. That is
   left alone deliberately: converting them is churn with no user-visible change, and the
   collision it caused is removed at source in P2.
   ========================================================================== */

.btn {
    --bs-btn-border-radius: var(--btn-radius);
    --bs-btn-font-weight: var(--btn-font-weight);
    --bs-btn-padding-x: var(--btn-padding-x);
    min-height: var(--btn-height);
    /* Bootstrap's .btn is `inline-block`, which does not centre its label against a
       min-height -- an <a class="btn"> rendered 6px tall inside a 44px box. The booking
       page carried a local fix for this; it belongs here so every page gets it.
       Grid/flex children blockify this to `flex`, which centres identically. */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
}

/* Bootstrap sets --bs-btn-border-radius again on .btn-sm/.btn-lg (to -sm/-lg); the .btn
   rule above is later in source order at equal specificity, so radius stays uniform.
   Font size is intentionally *not* reset -- it is what signals density on desktop. */
.btn-sm {
    min-height: var(--btn-height-sm);
    --bs-btn-padding-x: 0.8rem;
}

.btn-lg {
    min-height: var(--btn-height-lg);
    --bs-btn-padding-x: 1.4rem;
    --bs-btn-font-size: 1.05rem;
}

/* Tertiary tier. Bootstrap's stock #6c757d is a cool blue-grey sitting on a warm
   green/yellow brand, and it is the most-used variant in the app (137 uses across
   app/Views). The replacement is a green-tinted neutral -- and measures 7.22:1 on white
   against #6c757d's 4.69:1, so it moves the app's commonest button from AA to AAA. */
.btn-outline-secondary {
    --bs-btn-color: #4a5b52;
    --bs-btn-border-color: rgba(19, 52, 42, 0.22);
    --bs-btn-bg: transparent;
    --bs-btn-hover-color: var(--brand-green-deep);
    --bs-btn-hover-bg: rgba(22, 131, 59, 0.08);
    --bs-btn-hover-border-color: rgba(22, 131, 59, 0.30);
    --bs-btn-active-color: var(--brand-green-deep);
    --bs-btn-active-bg: rgba(22, 131, 59, 0.14);
    --bs-btn-active-border-color: rgba(22, 131, 59, 0.34);
    --bs-btn-disabled-color: #8a9992;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: rgba(19, 52, 42, 0.14);
    --bs-btn-focus-shadow-rgb: 247, 210, 26;
}

/* Action rows. Generalises what booking/index.php worked out: buttons sit at their
   natural size on desktop and *wrap* rather than squeeze (the min-width is the wrap
   trigger), then split the row evenly once wrapped on a phone. Adapts to label length
   with no per-page breakpoints, which is what the ad-hoc `d-grid` rows on facilities and
   courts do not do -- those stack full-width at 1440px too. */
.action-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
}

.action-row > .btn,
.action-row > form > .btn {
    flex: 0 1 auto;
    min-width: var(--btn-min-width);
    white-space: nowrap;
}

/* Right-aligned variant: every action row -- filter bars, form footers, card footers,
   page headers, modal footers, sticky bars. One rule, no per-context exception: the
   primary is the last control and the row is right-aligned (the plan, §2.5). An earlier
   draft kept card footers left-aligned and primary-first on wrap grounds; that produced
   two conventions on one page and was dropped in P3c. */
/* Only the *content* is pushed right. Deliberately no `margin-left: auto` here: on a grid
   item that overrides the column span and shrinks the row to its content, which stopped
   booking's actions spanning the filter grid. A flex child that needs pushing right sets
   its own margin -- .booking-schedule-actions already does. */
.action-row--end {
    justify-content: flex-end;
}

@media (max-width: 767.98px) {
    /* The whole point of the scale: -sm is desktop density, never a smaller touch target. */
    .btn-sm {
        min-height: var(--btn-height);
    }

    .action-row > .btn,
    .action-row > form > .btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .action-row > form {
        flex: 1 1 0;
    }

    .action-row > form > .btn {
        width: 100%;
    }
}

/* Dashboard quick-links (docs/mockup/dashboard-shortcuts-redesign.html, "a lighter
   alternative"). Most of the admin dashboard's quick-action row is navigation, not a
   decision -- a bordered .btn asks for a tap the way an action should, which is wrong for
   "go look at Courts". Kept as plain links with a floor: the hit area still meets
   --btn-height on mobile even though the visible label is smaller than a button, so this
   does not undo the touch-target work above. */
.dashboard-quick-link {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.6rem;
    color: var(--brand-green-deep);
    font-weight: 600;
    font-size: 0.92rem;
    text-decoration: none;
    border-radius: 0.4rem;
    border: 0;
    background: none;
}

.dashboard-quick-link:hover,
.dashboard-quick-link:focus-visible {
    color: var(--brand-green-deep);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Divider between links rather than after the last one -- :first-of-type still resolves
   correctly even when earlier links in the same DOM order are display:none (the
   d-none d-md-inline-flex ones on mobile), so the first *visible* link at any breakpoint
   never carries a dangling rule on its left. */
.dashboard-quick-links > .dashboard-quick-link:not(:first-of-type) {
    border-left: 1px solid rgba(22, 131, 59, 0.14);
}

.dashboard-quick-link--more {
    color: #4a5b52;
}

/* .admin-dashboard-shell .d-flex.gap-2.flex-wrap > .btn (:610) stretches every direct .btn
   child of a gap-2/flex-wrap row to full width below 768px -- built for the old row where
   every item was a .btn, so stacking all of them made sense. Counter Booking is now the
   only .btn left in this row (everything else is .dashboard-quick-link, not .btn), so
   that rule left it alone on its own full-width line instead of sitting inline with
   Calendar/More. The extra class here only exists to out-specificity that rule -- one
   class short of it (5) would lose on source order. */
@media (max-width: 767.98px) {
    .admin-dashboard-shell .dashboard-quick-actions.d-flex.gap-2.flex-wrap > .btn {
        flex: 0 1 auto;
        width: auto;
    }
}

.btn-success,
.btn-primary,
.btn-outline-success:hover,
.btn-outline-success:focus-visible,
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus-visible,
.btn-primary:hover,
.btn-primary:focus-visible {
    background-color: #126b31 !important;
    border-color: #126b31 !important;
}

.btn-outline-success,
.btn-outline-primary {
    color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    background-color: transparent !important;
}

.btn-outline-success:hover,
.btn-outline-success:focus-visible,
.btn-outline-primary:hover,
.btn-outline-primary:focus-visible {
    color: #ffffff !important;
}

.btn-warning,
.btn-outline-warning:hover,
.btn-outline-warning:focus-visible {
    background-color: var(--brand-yellow) !important;
    border-color: #d8b900 !important;
    color: #1e5b27 !important;
}

.btn-warning:hover,
.btn-warning:focus-visible {
    background-color: #f0c90e !important;
    border-color: #c7a700 !important;
    color: #13451b !important;
}

.btn-outline-warning {
    color: #a88d00 !important;
    border-color: #d8b900 !important;
    background-color: transparent !important;
}

.badge.text-bg-success,
.text-bg-success {
    background-color: var(--brand-green) !important;
    color: #ffffff !important;
}

.badge.text-bg-warning,
.text-bg-warning {
    background-color: var(--brand-yellow) !important;
    color: #1f5b28 !important;
}

.bg-success {
    background-color: var(--brand-green) !important;
}

.bg-warning {
    background-color: var(--brand-yellow) !important;
    color: #1f5b28 !important;
}

.text-success {
    color: var(--brand-green) !important;
}

.text-warning {
    color: #d0aa00 !important;
}

.alert {
    border-radius: 1rem;
    box-shadow: var(--tile-card-base-shadow);
    border-width: 1px;
}

.alert-success {
    background: rgba(22, 131, 59, 0.12);
    border-color: rgba(22, 131, 59, 0.22);
    color: #0c5f2a;
}

.alert-warning {
    background: rgba(247, 210, 26, 0.16);
    border-color: rgba(247, 210, 26, 0.35);
    color: #7f6700;
}

.alert-danger {
    background: rgba(255, 243, 166, 0.4);
    border-color: rgba(22, 131, 59, 0.28);
    color: #0c5f2a;
}

.alert-info {
    background: rgba(255, 248, 198, 0.9);
    border-color: rgba(247, 210, 26, 0.28);
    color: #1f5b28;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-range:focus,
.btn:focus,
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
    border-color: var(--brand-yellow) !important;
    box-shadow: 0 0 0 0.2rem rgba(247, 210, 26, 0.26) !important;
    outline: none !important;
}

.form-check-input:checked {
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
}

.form-check-input:checked:focus {
    box-shadow: 0 0 0 0.2rem rgba(22, 131, 59, 0.2) !important;
}

.modal-content {
    border: 1px solid rgba(247, 210, 26, 0.22);
    border-radius: 1.15rem;
    box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.14);
    background: linear-gradient(180deg, #fffdf4 0%, #ffffff 24%);
}

.modal {
    z-index: 1060;
}

.modal-backdrop {
    z-index: 1050;
}

.modal-dialog {
    pointer-events: auto;
}

.modal-content {
    pointer-events: auto;
}

.modal-header {
    border-bottom-color: rgba(247, 210, 26, 0.22);
    background: linear-gradient(180deg, rgba(255, 248, 198, 0.9) 0%, rgba(255, 253, 240, 1) 100%);
}

.modal-footer {
    border-top-color: rgba(247, 210, 26, 0.18);
    background: rgba(255, 253, 240, 0.88);
}

.dropdown-menu {
    border: 1px solid rgba(247, 210, 26, 0.22);
    border-radius: 1rem;
    box-shadow: 0 0.9rem 2rem rgba(15, 23, 42, 0.12);
    background: linear-gradient(180deg, #fffdf4 0%, #ffffff 100%);
    padding: 0.45rem;
}

.dropdown-item {
    border-radius: 0.75rem;
    color: #1f5b28;
}

.dropdown-item:hover,
.dropdown-item:focus-visible {
    background: rgba(247, 210, 26, 0.18);
    color: #0c5f2a;
}

.dropdown-item.active,
.dropdown-item:active {
    background: linear-gradient(135deg, var(--brand-green) 0%, #2ca646 100%);
    color: #ffffff;
}

.dropdown-divider {
    border-top-color: rgba(247, 210, 26, 0.22);
}

.dropdown-toggle::after {
    color: var(--brand-yellow);
}

@media (max-width: 767.98px) {
    .footer-sports-vector {
        opacity: 0.78;
    }

    .site-navbar {
        background:
            linear-gradient(135deg, var(--brand-green-deep) 0%, var(--brand-green) 58%, #2ca646 100%);
    }
}

.empty-state {
    background: #f8f9fa;
    border: 1px dashed #ced4da;
}

.card {
    border-radius: 1rem;
    border-color: rgba(247, 210, 26, 0.18);
    box-shadow: 0 0.75rem 1.5rem rgba(15, 23, 42, 0.06);
    background: linear-gradient(180deg, #fffdf0 0%, #ffffff 22%);
}

.facility-court-card,
.court-tile-card,
.facility-directory-card,
.facility-tile-card,
.calendar-stat-card,
.profile-card,
.card.border-0.shadow-sm.h-100 {
    border: 1px solid var(--tile-card-border-color);
    box-shadow: var(--tile-card-base-shadow) !important;
    border-radius: var(--tile-card-radius);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.facility-court-card:hover,
.court-tile-card:hover,
.facility-directory-card:hover,
.facility-tile-card:hover,
.calendar-stat-card:hover,
.profile-card:hover,
.card.border-0.shadow-sm.h-100:hover {
    transform: translateY(var(--tile-card-hover-lift));
    box-shadow: var(--tile-card-hover-shadow) !important;
}

.facility-court-card .card-body,
.court-tile-card .card-body,
.facility-directory-card .card-body,
.calendar-stat-card .card-body,
.profile-card .card-body,
.card.border-0.shadow-sm.h-100 > .card-body,
.facility-tile-card__body {
    padding: var(--tile-card-body-padding);
}

.table td,
.table th {
    vertical-align: middle;
}

.table {
    --bs-table-border-color: rgba(247, 210, 26, 0.2);
    --bs-table-striped-bg: rgba(247, 210, 26, 0.055);
    --bs-table-hover-bg: rgba(247, 210, 26, 0.095);
    --bs-table-bg: #fffdfa;
    background-color: #fffdfa;
    border-color: rgba(247, 210, 26, 0.16);
}

.table thead th {
    background: linear-gradient(180deg, rgba(247, 210, 26, 0.18) 0%, rgba(255, 248, 198, 0.9) 100%);
    color: #0c5f2a;
    border-bottom-color: rgba(247, 210, 26, 0.24) !important;
}

.table tbody tr:hover > * {
    background-color: rgba(247, 210, 26, 0.055) !important;
}

.table > :not(caption) > * > * {
    border-bottom-color: rgba(247, 210, 26, 0.18);
}

.booking-calendar {
    --fc-border-color: rgba(22, 131, 59, 0.16);
    --fc-page-bg-color: #fffdfa;
    --fc-neutral-bg-color: rgba(247, 210, 26, 0.08);
    --fc-neutral-text-color: #214334;
    --fc-today-bg-color: rgba(247, 210, 26, 0.2);
    --fc-event-border-color: transparent;
    --fc-event-text-color: #ffffff;
}

.booking-calendar .fc {
    font-family: inherit;
}

.booking-calendar .fc .fc-toolbar {
    gap: 0.75rem;
    flex-wrap: wrap;
}

.booking-calendar .fc .fc-toolbar-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--brand-green-deep) !important;
}

.booking-calendar .fc .fc-button,
.booking-calendar .fc .fc-button-primary {
    background: linear-gradient(135deg, var(--brand-green) 0%, #2ca646 100%) !important;
    background-color: var(--brand-green) !important;
    border-color: var(--brand-green) !important;
    box-shadow: none !important;
    text-transform: capitalize;
    color: #ffffff !important;
}

.booking-calendar .fc .fc-button:hover,
.booking-calendar .fc .fc-button:focus,
.booking-calendar .fc .fc-button-primary:hover,
.booking-calendar .fc .fc-button-primary:focus {
    background: linear-gradient(135deg, #136d31 0%, #25973e 100%) !important;
    background-color: #136d31 !important;
    border-color: #136d31 !important;
    color: #ffffff !important;
}

.booking-calendar .fc .fc-button-active,
.booking-calendar .fc .fc-button-primary.fc-button-active,
.booking-calendar .fc .fc-button-primary:not(:disabled):active,
.booking-calendar .fc .fc-button-primary:not(:disabled).fc-button-active {
    background: linear-gradient(135deg, #0f612b 0%, #208138 100%) !important;
    background-color: #0f612b !important;
    border-color: #0f612b !important;
    color: #ffffff !important;
}

.booking-calendar .fc .fc-scrollgrid,
.booking-calendar .fc .fc-theme-standard td,
.booking-calendar .fc .fc-theme-standard th {
    border-color: rgba(22, 131, 59, 0.16) !important;
}

.booking-calendar .fc .fc-col-header-cell {
    background: linear-gradient(180deg, rgba(247, 210, 26, 0.16) 0%, rgba(255, 248, 198, 0.86) 100%) !important;
}

.booking-calendar .fc .fc-col-header-cell-cushion {
    color: #1d5b29 !important;
    font-weight: 700;
}

.booking-calendar .fc a {
    color: #1d5b29 !important;
}

.booking-calendar .fc a:hover,
.booking-calendar .fc a:focus-visible {
    color: var(--brand-green-deep) !important;
}

.booking-calendar .fc .fc-daygrid-day-frame {
    min-height: 110px;
}

.booking-calendar .fc .fc-daygrid-day-number {
    color: #214334 !important;
    font-weight: 600;
    padding: 0.35rem 0.45rem;
}

.booking-calendar .fc .fc-day-today .fc-daygrid-day-number {
    color: var(--brand-green-deep) !important;
}

.booking-calendar .fc .fc-daygrid-day.fc-day-today {
    background: linear-gradient(180deg, rgba(255, 243, 166, 0.36) 0%, rgba(247, 210, 26, 0.14) 100%) !important;
}

.booking-calendar .fc .fc-day-other .fc-daygrid-day-number {
    color: #9bb3a7 !important;
}

.booking-calendar .fc .fc-event {
    border-radius: 0.65rem;
    border-width: 0;
    padding: 0.2rem 0.35rem;
    box-shadow: 0 0.3rem 0.65rem rgba(15, 79, 62, 0.16);
    background: linear-gradient(135deg, #16833b 0%, #2ca646 100%) !important;
    color: #ffffff !important;
}

.booking-calendar .fc .fc-event .fc-event-main,
.booking-calendar .fc .fc-event .fc-event-main-frame,
.booking-calendar .fc .fc-event .fc-event-title,
.booking-calendar .fc .fc-event .fc-event-time,
.booking-calendar .fc .fc-event-custom .fw-semibold,
.booking-calendar .fc .fc-event-custom .small {
    color: #ffffff !important;
}

.booking-calendar .fc .fc-event-main {
    white-space: normal;
}

.booking-calendar .fc .fc-daygrid-more-link {
    color: var(--brand-green);
    font-weight: 600;
    text-decoration: none;
}

.booking-calendar .fc .fc-daygrid-more-link:hover,
.booking-calendar .fc .fc-daygrid-more-link:focus-visible {
    text-decoration: none;
}

.calendar-toolbar {
    min-height: 1.5rem;
}

.fc-event-custom {
    display: grid;
    gap: 0.15rem;
}

.fc-event-custom .fw-semibold {
    font-size: 0.8rem;
}

.fc-event-custom .small {
    line-height: 1.2;
}

.calendar-popover {
    max-width: 280px;
}

.calendar-popover .popover-body {
    padding: 0.75rem 0.85rem;
}

.calendar-popover-content {
    display: grid;
    gap: 0.2rem;
}

.subscription-hero {
    position: relative;
    overflow: hidden;
    border-radius: 1.25rem;
    background:
        radial-gradient(circle at 10% 15%, rgba(255, 255, 255, 0.25), transparent 30%),
        radial-gradient(circle at 90% 10%, rgba(255, 255, 255, 0.2), transparent 34%),
        linear-gradient(135deg, #0b684f 0%, #0f7f5f 52%, #d69b4d 100%);
    color: #fff;
    box-shadow: 0 1rem 2.25rem rgba(12, 79, 62, 0.18);
}

.text-white-75 {
    color: rgba(255, 255, 255, 0.78);
}

.subscription-eyebrow--dark {
    color: var(--brand-green-deep);
}

.panel-surface {
    border-radius: 1.25rem;
    border: 1px solid #dbe7e1;
    background: #ffffff;
    box-shadow: 0 0.75rem 1.8rem rgba(15, 23, 42, 0.06);
}

.panel-surface-subtle {
    border-radius: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
}

.subscription-section-kicker {
    text-transform: uppercase;
    letter-spacing: 0.11em;
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--brand-green);
}

.subscription-pill {
    display: inline-flex;
    align-items: center;
    min-height: 2rem;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 600;
}

.subscription-metrics-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.75rem;
}

.subscription-metric {
    border-radius: 0.9rem;
    padding: 0.85rem 0.95rem;
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.subscription-metric-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.25rem;
}

.subscription-metric-value {
    font-size: 1.05rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
}

.subscription-metric-note {
    margin-top: 0.2rem;
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.82);
    line-height: 1.35;
}

.subscription-eyebrow {
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255, 255, 255, 0.85);
}

.subscription-summary-card {
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 1rem;
    background: rgba(0, 0, 0, 0.18);
    backdrop-filter: blur(3px);
}

.subscription-summary-row {
    display: grid;
    grid-template-columns: minmax(78px, auto) minmax(0, 1fr);
    align-items: start;
    gap: 0.7rem;
}

.subscription-summary-value {
    text-align: right;
    line-height: 1.3;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.subscription-summary-value--code {
    font-size: 0.98rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 575.98px) {
    .subscription-summary-row {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }

    .subscription-summary-value {
        text-align: left;
    }

    .subscription-summary-value--code {
        display: block;
        -webkit-line-clamp: unset;
        -webkit-box-orient: initial;
        overflow: visible;
    }
}

.pricing-stage {
    position: relative;
    padding: 1.25rem;
    border-radius: 1.5rem;
    background:
        radial-gradient(circle at 10% 8%, rgba(247, 210, 26, 0.2), transparent 22%),
        radial-gradient(circle at 92% 14%, rgba(22, 131, 59, 0.14), transparent 24%),
        linear-gradient(180deg, #fffdf1 0%, #f6fbf5 54%, #eef7f0 100%);
    border: 1px solid rgba(22, 131, 59, 0.14);
    box-shadow: 0 1rem 2.5rem rgba(15, 79, 62, 0.12);
}

.pricing-stage__glow {
    position: absolute;
    border-radius: 999px;
    opacity: 0.9;
    pointer-events: none;
}

.pricing-stage__glow--left {
    top: 1rem;
    left: 1rem;
    width: 4rem;
    height: 4rem;
    background: rgba(247, 210, 26, 0.14);
    box-shadow: 0 0 0 0.9rem rgba(247, 210, 26, 0.08);
}

.pricing-stage__glow--right {
    right: 1rem;
    top: 0.8rem;
    width: 5.5rem;
    height: 5.5rem;
    background: rgba(22, 131, 59, 0.18);
    box-shadow: 0 0 0 1.15rem rgba(22, 131, 59, 0.08);
}

.pricing-stage__header {
    position: relative;
    z-index: 1;
    max-width: 860px;
    margin-bottom: 1.25rem;
}

.pricing-stage__header .display-6,
.pricing-stage__header .lead {
    color: #153b2d !important;
}

.pricing-stage__header .text-secondary {
    color: #4d675c !important;
}

.pricing-table-shell {
    position: relative;
    z-index: 1;
}

.pricing-table-responsive {
    overflow: hidden;
    border-radius: 1.35rem;
    border: 1px solid rgba(22, 131, 59, 0.14);
    background: #ffffff;
    box-shadow: 0 1rem 1.85rem rgba(15, 79, 62, 0.12);
}

.pricing-table {
    margin-bottom: 0;
    min-width: 980px;
    table-layout: fixed;
}

.pricing-table thead th {
    border-bottom: 0;
    background: linear-gradient(180deg, rgba(247, 210, 26, 0.16) 0%, rgba(255, 255, 255, 0.98) 100%);
    vertical-align: top;
}

.pricing-table thead th,
.pricing-table tbody th,
.pricing-table tbody td {
    padding: 1rem 1rem;
    border-color: rgba(22, 131, 59, 0.12);
    color: #213a2e;
}

.pricing-table tbody tr:nth-child(even) th,
.pricing-table tbody tr:nth-child(even) td {
    background: rgba(247, 210, 26, 0.05);
}

.pricing-table__stub {
    width: 22%;
    background: linear-gradient(180deg, rgba(22, 131, 59, 0.08) 0%, rgba(255, 255, 255, 0.98) 100%);
}

.pricing-table__eyebrow {
    display: block;
    margin-bottom: 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand-green);
}

.pricing-table__title {
    display: block;
    font-size: 1.2rem;
    line-height: 1.25;
    font-weight: 800;
    color: #153b2d;
}

.pricing-table__plan {
    position: relative;
    width: 15.6%;
}

.pricing-table__plan--featured {
    background: linear-gradient(180deg, rgba(247, 210, 26, 0.18) 0%, rgba(22, 131, 59, 0.06) 100%);
}

.pricing-table__badge {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.7rem;
    margin-bottom: 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--brand-yellow) 0%, #ffe77a 100%);
    color: #1d5b29;
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.pricing-table__plan-name {
    font-size: 1.2rem;
    font-weight: 800;
    color: #153b2d;
}

.pricing-table__plan-price {
    font-size: 2.1rem;
    line-height: 1;
    margin-top: 0.2rem;
    font-weight: 800;
    color: var(--brand-green);
}

.pricing-table__plan-price span {
    margin-left: 0.15rem;
    font-size: 0.92rem;
    font-weight: 700;
    color: #6b7c74;
}

.pricing-table__plan-meta {
    margin-top: 0.4rem;
    font-size: 0.85rem;
    color: #60766d;
}

.pricing-table__label {
    width: 22%;
    font-size: 0.94rem;
    font-weight: 700;
    color: #214334;
    background: rgba(22, 131, 59, 0.04);
}

.pricing-table__cell {
    font-size: 0.95rem;
    color: #213a2e;
}

.pricing-table__value {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 0.65rem;
    border-radius: 999px;
    background: rgba(247, 210, 26, 0.24);
    color: #1d5b29;
    font-weight: 700;
}

.pricing-table__summary {
    display: block;
    color: #4f665c;
    line-height: 1.45;
}

.pricing-table__list {
    margin: 0;
    padding-left: 1.1rem;
    color: #213a2e;
}

.pricing-table__list li + li {
    margin-top: 0.25rem;
}

.pricing-table .btn {
    border-width: 2px;
    font-weight: 800;
    border-radius: 999px;
}

.pricing-footer-note {
    font-weight: 700;
    color: #4d675c;
}

.subscription-list-tight {
    gap: 0.45rem;
}

.pricing-tier {
    position: relative;
    border: 1px solid rgba(22, 131, 59, 0.14);
    border-radius: 1rem;
    padding: 1.1rem;
    background:
        radial-gradient(circle at top right, rgba(247, 210, 26, 0.12), transparent 34%),
        linear-gradient(180deg, #ffffff 0%, #fbfdf9 100%);
    height: 100%;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.plan-card {
    padding: 1rem;
    border-radius: 1.15rem;
    background:
        radial-gradient(circle at top right, rgba(247, 210, 26, 0.08), transparent 34%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 248, 0.98) 100%);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 100%;
    --plan-accent-strong: #16833b;
    --plan-accent-mid: #4caf50;
    --plan-accent-soft: rgba(247, 210, 26, 0.16);
    --plan-accent-surface: rgba(247, 210, 26, 0.06);
    --plan-accent-border: rgba(22, 131, 59, 0.14);
    --plan-accent-text: #153b2d;
    --plan-accent-muted: #60766d;
    --plan-stripe: linear-gradient(90deg, var(--brand-green) 0%, #4caf50 48%, var(--brand-yellow) 100%);
}

.bundle-option-card,
.bundle-checkout-summary,
.bundle-accent-note,
.bundle-accent-panel {
    --plan-accent-strong: #16833b;
    --plan-accent-mid: #4caf50;
    --plan-accent-soft: rgba(247, 210, 26, 0.16);
    --plan-accent-surface: rgba(247, 210, 26, 0.06);
    --plan-accent-border: rgba(22, 131, 59, 0.14);
    --plan-accent-text: #153b2d;
    --plan-accent-muted: #60766d;
    --plan-stripe: linear-gradient(90deg, var(--brand-green) 0%, #4caf50 48%, var(--brand-yellow) 100%);
}

.plan-card .tier-name {
    margin-top: 0.1rem;
}

.plan-card-header {
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--plan-accent-border);
}

.plan-summary {
    color: var(--plan-accent-muted);
    line-height: 1.5;
    min-height: 3rem;
}

.plan-feature-list {
    color: var(--plan-accent-text);
}

.plan-period {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.65rem;
    border-radius: 999px;
    background: var(--plan-accent-soft);
    color: var(--plan-accent-strong);
    font-size: 0.78rem;
    font-weight: 600;
}

.plan-card .badge.text-bg-light {
    background: var(--plan-accent-soft) !important;
    border-color: var(--plan-accent-border) !important;
    color: var(--plan-accent-strong) !important;
}

.plan-bundle-badge,
.bundle-option-card .pricing-badge,
.bundle-checkout-summary .badge.text-bg-light,
.bundle-checkout-summary .badge.text-bg-warning {
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    border: 1px solid var(--plan-accent-border);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.94), var(--plan-accent-soft));
    color: var(--plan-accent-text);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 0.35rem 0.8rem rgba(15, 79, 62, 0.08);
}

.plan-card .plan-kpi {
    border-color: var(--plan-accent-border);
    background: rgba(255, 255, 255, 0.9);
}

.plan-card .plan-kpi__label {
    color: var(--plan-accent-muted);
}

.plan-card .plan-kpi__value {
    color: var(--plan-accent-text);
}

.plan-card .plan-feature-list li::marker {
    color: var(--plan-accent-mid);
}

.plan-card .btn-outline-success {
    color: var(--plan-accent-strong);
    border-color: var(--plan-accent-border);
    background: rgba(255, 255, 255, 0.95);
}

.plan-card .btn-outline-success:hover,
.plan-card .btn-outline-success:focus-visible {
    background: var(--plan-accent-strong);
    border-color: var(--plan-accent-strong);
    color: #ffffff;
}

.plan-card .btn-success {
    background: linear-gradient(135deg, var(--plan-accent-strong) 0%, var(--plan-accent-mid) 100%);
    border-color: transparent;
    box-shadow: 0 0.45rem 0.95rem rgba(22, 131, 59, 0.16);
}

.bundle-option-card .btn-outline-success,
.bundle-accent-panel .btn-outline-success,
.bundle-accent-note .btn-outline-success {
    color: var(--plan-accent-strong);
    border-color: var(--plan-accent-border);
}

.plan-kpi-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.plan-kpi {
    border: 1px solid rgba(22, 131, 59, 0.12);
    border-radius: 0.85rem;
    padding: 0.65rem 0.7rem;
    background: rgba(255, 255, 255, 0.82);
}

.plan-kpi__label {
    display: block;
    font-size: 0.68rem;
    /*text-transform: uppercase;*/
    letter-spacing: 0.08em;
    color: #5f7d6e;
    font-weight: 800;
    margin-bottom: 0.15rem;
}

.plan-kpi__value {
    display: block;
    color: #153b2d;
    font-size: 0.88rem;
    /*font-weight: 700;*/
    line-height: 1.25;
}

.plan-accent-muted {
    --plan-accent-strong: #5c6b76;
    --plan-accent-mid: #8a9aa4;
    --plan-accent-soft: rgba(154, 168, 176, 0.18);
    --plan-accent-border: rgba(92, 107, 118, 0.18);
    --plan-accent-text: #2f3c45;
    --plan-accent-muted: #66747e;
    --plan-stripe: linear-gradient(90deg, #9aa8b0 0%, #7b8b95 100%);
    background:
        radial-gradient(circle at top right, rgba(154, 168, 176, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 250, 0.98) 100%);
}

.plan-accent-gold {
    --plan-accent-strong: #a67c00;
    --plan-accent-mid: #f7d21a;
    --plan-accent-soft: rgba(247, 210, 26, 0.2);
    --plan-accent-border: rgba(247, 210, 26, 0.45);
    --plan-accent-text: #5a4410;
    --plan-accent-muted: #90731f;
    --plan-stripe: linear-gradient(90deg, var(--brand-green) 0%, #4caf50 45%, var(--brand-yellow) 100%);
    background:
        radial-gradient(circle at top right, rgba(247, 210, 26, 0.18), transparent 32%),
        linear-gradient(180deg, rgba(255, 252, 233, 0.98) 0%, rgba(255, 249, 217, 0.96) 100%);
}

.plan-accent-teal {
    --plan-accent-strong: #0b7b74;
    --plan-accent-mid: #0d9488;
    --plan-accent-soft: rgba(13, 148, 136, 0.16);
    --plan-accent-border: rgba(13, 148, 136, 0.22);
    --plan-accent-text: #114c49;
    --plan-accent-muted: #356f6b;
    --plan-stripe: linear-gradient(90deg, var(--brand-green) 0%, #0d9488 100%);
    background:
        radial-gradient(circle at top right, rgba(13, 148, 136, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(244, 255, 253, 0.98) 0%, rgba(238, 252, 250, 0.98) 100%);
}

.plan-accent-blue {
    --plan-accent-strong: #0f6c84;
    --plan-accent-mid: #1f9bc5;
    --plan-accent-soft: rgba(31, 155, 197, 0.16);
    --plan-accent-border: rgba(31, 155, 197, 0.22);
    --plan-accent-text: #18465b;
    --plan-accent-muted: #4f7082;
    --plan-stripe: linear-gradient(90deg, #0f7f5f 0%, #16833b 55%, var(--brand-yellow) 100%);
    background:
        radial-gradient(circle at top right, rgba(31, 155, 197, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(242, 250, 255, 0.98) 0%, rgba(235, 247, 253, 0.98) 100%);
}

.plan-accent-dark {
    --plan-accent-strong: #153b2d;
    --plan-accent-mid: #4d675c;
    --plan-accent-soft: rgba(21, 59, 45, 0.12);
    --plan-accent-border: rgba(21, 59, 45, 0.2);
    --plan-accent-text: #102b20;
    --plan-accent-muted: #4d675c;
    --plan-stripe: linear-gradient(90deg, #153b2d 0%, #4d675c 100%);
    background:
        radial-gradient(circle at top right, rgba(21, 59, 45, 0.12), transparent 32%),
        linear-gradient(180deg, rgba(245, 249, 247, 0.98) 0%, rgba(235, 242, 239, 0.98) 100%);
}

.plan-accent-rose {
    --plan-accent-strong: #9b3d63;
    --plan-accent-mid: #d86a91;
    --plan-accent-soft: rgba(216, 106, 145, 0.16);
    --plan-accent-border: rgba(155, 61, 99, 0.2);
    --plan-accent-text: #5b2338;
    --plan-accent-muted: #8b5370;
    --plan-stripe: linear-gradient(90deg, #9b3d63 0%, #d86a91 100%);
    background:
        radial-gradient(circle at top right, rgba(216, 106, 145, 0.14), transparent 32%),
        linear-gradient(180deg, rgba(255, 245, 249, 0.98) 0%, rgba(255, 237, 244, 0.98) 100%);
}

.plan-accent-orange {
    --plan-accent-strong: #b85a16;
    --plan-accent-mid: #f08a24;
    --plan-accent-soft: rgba(240, 138, 36, 0.18);
    --plan-accent-border: rgba(184, 90, 22, 0.22);
    --plan-accent-text: #6a370e;
    --plan-accent-muted: #9c6638;
    --plan-stripe: linear-gradient(90deg, #b85a16 0%, #f08a24 100%);
    background:
        radial-gradient(circle at top right, rgba(240, 138, 36, 0.15), transparent 32%),
        linear-gradient(180deg, rgba(255, 248, 240, 0.98) 0%, rgba(255, 240, 225, 0.98) 100%);
}

.plan-accent-sunrise {
    --plan-accent-strong: #b4462f;
    --plan-accent-mid: #f2b134;
    --plan-accent-soft: rgba(242, 177, 52, 0.18);
    --plan-accent-border: rgba(180, 70, 47, 0.2);
    --plan-accent-text: #713122;
    --plan-accent-muted: #a56c47;
    --plan-stripe: linear-gradient(90deg, #b4462f 0%, #f2b134 100%);
    background:
        radial-gradient(circle at top right, rgba(242, 177, 52, 0.16), transparent 32%),
        linear-gradient(180deg, rgba(255, 249, 236, 0.98) 0%, rgba(255, 240, 220, 0.98) 100%);
}

.pricing-tier.featured {
    transform: translateY(-4px);
}

.pricing-tier::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 4px;
    background: var(--plan-stripe);
    opacity: 0.58;
    transition: opacity 180ms ease;
}

.pricing-tier:hover,
.pricing-tier:focus-within {
    transform: translateY(-6px);
    border-color: var(--brand-green);
    box-shadow: 0 1rem 2rem rgba(15, 79, 62, 0.14);
}

.pricing-tier:hover::before,
.pricing-tier:focus-within::before {
    opacity: 1;
}

.pricing-tier.featured {
    border-color: var(--plan-accent-border);
    box-shadow: 0 0.8rem 1.7rem rgba(15, 79, 62, 0.12);
    background:
        radial-gradient(circle at top right, rgba(247, 210, 26, 0.14), transparent 30%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, #ffffff 100%);
}

.bundle-option-card {
    background:
        radial-gradient(circle at top right, var(--plan-accent-soft), transparent 38%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(251, 253, 248, 0.98) 100%);
}

.bundle-option-card .tier-price,
.bundle-checkout-summary strong,
.bundle-accent-panel h3,
.bundle-accent-note strong {
    color: var(--plan-accent-strong);
}

.bundle-option-card .tier-credits,
.bundle-checkout-summary h2,
.bundle-accent-note,
.bundle-accent-panel {
    color: var(--plan-accent-text);
}

.bundle-option-card .subscription-list,
.bundle-accent-note p,
.bundle-accent-panel li,
.bundle-accent-panel p {
    color: var(--plan-accent-text);
}

.bundle-checkout-summary {
    border: 1px solid var(--plan-accent-border);
    /*background:
        radial-gradient(circle at top right, var(--plan-accent-soft), transparent 36%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.05) 100%);*/ 
}

.bundle-checkout-summary .text-white-75,
.bundle-accent-note .subscription-section-kicker,
.bundle-accent-panel .text-secondary,
.bundle-accent-note .text-secondary {
    color: var(--plan-accent-muted) !important;
}

.bundle-accent-note,
.bundle-accent-panel {
    border: 1px solid var(--plan-accent-border);
    background:
        radial-gradient(circle at top right, var(--plan-accent-soft), transparent 40%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 252, 247, 0.98) 100%);
}

.pricing-tier.featured:hover,
.pricing-tier.featured:focus-within {
    box-shadow: 0 1.1rem 2.25rem rgba(15, 79, 62, 0.16);
}

.pricing-badge {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    padding: 0.34rem 0.72rem;
    border-radius: 999px;
    border: 1px solid rgba(247, 210, 26, 0.45);
    background: linear-gradient(135deg, rgba(247, 210, 26, 0.94), rgba(255, 243, 166, 0.98));
    color: #1d5b29;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    box-shadow: 0 0.4rem 0.9rem rgba(247, 210, 26, 0.18);
}

.tier-name {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    padding: 0.28rem 0.7rem;
    border-radius: 999px;
    border: 1px solid var(--plan-accent-border);
    background: var(--plan-accent-soft);
    text-transform: uppercase;
    font-size: 0.76rem;
    letter-spacing: 0.08em;
    color: var(--plan-accent-strong);
    font-weight: 700;
}

.pricing-tier.featured .tier-name {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.92), var(--plan-accent-soft));
    border-color: var(--plan-accent-border);
    color: var(--plan-accent-text);
}

.tier-price {
    font-size: 2rem;
    line-height: 1;
    font-weight: 800;
    color: var(--plan-accent-strong);
}

.tier-price span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--plan-accent-muted);
    margin-left: 0.2rem;
}

.tier-credits {
    color: var(--plan-accent-text);
    font-weight: 600;
}

.subscription-list {
    margin: 0;
    padding-left: 1.1rem;
    display: grid;
    gap: 0.35rem;
}

.subscription-panel {
    border: 1px solid rgba(22, 131, 59, 0.14);
    border-radius: 1rem;
    padding: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #f8fcf7 100%);
}

.voucher-payment-tabs {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(22, 131, 59, 0.14);
    gap: 0.2rem;
}

.voucher-payment-tabs .nav-link {
    padding: 0.48rem 0.85rem;
    border-top-left-radius: 0.75rem;
    border-top-right-radius: 0.75rem;
    border-color: rgba(22, 131, 59, 0.14);
    color: #2a5a45;
    font-weight: 600;
}

.voucher-payment-tabs .nav-link.active {
    border-color: rgba(22, 131, 59, 0.14) rgba(22, 131, 59, 0.14) #ffffff;
}

#voucherPaymentTabsContent {
    margin-top: 0;
    padding: 1.15rem 1.2rem;
}

@media (max-width: 767.98px) {
    .voucher-payment-tabs {
        gap: 0.15rem;
    }

    .voucher-payment-tabs .nav-link {
        padding: 0.44rem 0.68rem;
        font-size: 0.86rem;
    }

    #voucherPaymentTabsContent {
        padding: 0.95rem;
    }
}

.pricing-stage .plan-card {
    border-top-width: 4px;
}

.pricing-stage .plan-card .badge {
    font-weight: 700;
}

@media (max-width: 767.98px) {
    .pricing-stage {
        padding: 1rem;
        border-radius: 1.15rem;
    }

    .pricing-stage__header {
        margin-bottom: 1rem;
    }

    .pricing-stage__header .display-6 {
        font-size: clamp(1.55rem, 7vw, 2.15rem);
        line-height: 1.08;
    }

    .pricing-stage__header .lead {
        font-size: 1rem;
    }

    .plan-card {
        padding: 0.95rem;
    }

    .tier-price {
        font-size: 1.75rem;
    }

    .plan-kpi-grid {
        grid-template-columns: 1fr;
    }

    .plan-summary {
        min-height: 0;
    }

    /* `.pricing-tier .btn { min-height: 2.5rem }` was here, and it was the one rule in the
       app that shrank a touch target *below* 44px specifically on a phone -- every plan CTA
       on /subscription-plans and the voucher checkout measured 40px at 375px. Compressing
       the card is what the rules above are for; the button is the part that has to stay
       thumb-sized. Removed rather than raised to 44px so the shared `.btn` floor is the
       only thing setting button height here. */
}

@media (min-width: 768px) and (max-width: 1199.98px) {
    .plan-kpi-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.topup-card {
    border: 1px solid #d6e2dd;
    border-radius: 0.9rem;
    padding: 0.9rem;
    background: #fff;
}

.owner-plan-note {
    border-radius: 1rem;
    border: 1px solid rgba(247, 210, 26, 0.28);
    background: linear-gradient(140deg, rgba(255, 251, 224, 0.95) 0%, rgba(235, 247, 238, 0.98) 100%);
}

.config-shell {
    background:
        radial-gradient(circle at top left, rgba(247, 210, 26, 0.18), transparent 24%),
        linear-gradient(180deg, #fffdf5 0%, #f7fbf7 100%);
}

.config-hero {
    border-radius: 1.15rem;
    border: 1px solid rgba(22, 131, 59, 0.14);
    background:
        radial-gradient(circle at 90% 10%, rgba(247, 210, 26, 0.14), transparent 18%),
        linear-gradient(135deg, rgba(22, 131, 59, 0.08) 0%, rgba(255, 255, 255, 0.98) 58%, rgba(247, 210, 26, 0.08) 100%);
    box-shadow: 0 0.9rem 1.8rem rgba(15, 79, 62, 0.08);
}

.config-shell .config-layout .nav-link {
    border: 1px solid rgba(22, 131, 59, 0.14);
    border-radius: 0.75rem;
    color: #214334;
    font-weight: 600;
    margin-bottom: 0.5rem;
    padding: 0.65rem 0.75rem;
    text-align: left;
    transition: all 0.2s ease-in-out;
    background: rgba(255, 255, 255, 0.94);
}

.config-shell .config-layout .nav-link:hover {
    border-color: rgba(247, 210, 26, 0.45);
    color: #0c5f2a;
    background: rgba(247, 210, 26, 0.12);
}

.config-shell .config-layout .nav-link.active {
    color: #0c5f2a;
    border-color: rgba(247, 210, 26, 0.7);
    background: linear-gradient(135deg, rgba(247, 210, 26, 0.9), rgba(255, 243, 166, 0.95));
    box-shadow: 0 0.75rem 1.4rem rgba(247, 210, 26, 0.18);
}

.config-pane {
    border: 1px solid rgba(22, 131, 59, 0.14);
    border-radius: 1rem;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdf8 100%);
    padding: 1.1rem;
    box-shadow: 0 0.75rem 1.4rem rgba(15, 79, 62, 0.05);
}

.config-pane-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #153b2d;
}

.config-tip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    border: 1px solid rgba(22, 131, 59, 0.28);
    border-radius: 50%;
    color: #1d5b29;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    cursor: help;
    user-select: none;
    background: rgba(247, 210, 26, 0.18);
}

.config-endpoint {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 0.84rem;
}

.subscription-plan-card {
    border: 1px solid rgba(22, 131, 59, 0.14);
    border-radius: 0.9rem;
    background:
        radial-gradient(circle at top right, rgba(247, 210, 26, 0.12), transparent 28%),
        linear-gradient(180deg, #ffffff 0%, #f8fcf7 100%);
    box-shadow: 0 0.6rem 1.35rem rgba(15, 79, 62, 0.06);
}

.subscription-plan-card .form-label {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #597269;
}

.subscription-plan-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.9rem;
}

.subscription-plan-card-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: #0c5f2a;
}

.subscription-plan-card .badge {
    color: #1d5b29;
    background: linear-gradient(135deg, rgba(247, 210, 26, 0.92), rgba(255, 243, 166, 0.96)) !important;
    border-color: rgba(247, 210, 26, 0.45) !important;
}

.config-table thead th {
    background: linear-gradient(180deg, rgba(247, 210, 26, 0.16) 0%, rgba(255, 248, 198, 0.85) 100%);
    color: #0c5f2a;
}

.config-table tbody tr:hover > * {
    background-color: rgba(247, 210, 26, 0.06) !important;
}

@media (max-width: 767.98px) {
    .config-shell .config-layout .nav {
        display: grid;
        grid-template-columns: 1fr;
        gap: 0.4rem;
    }

    .config-shell .config-layout .nav-link {
        margin-bottom: 0;
    }
}

.court-preview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.5rem;
}

.court-preview {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 0.75rem;
}

.court-preview img {
    transition: transform 180ms ease, opacity 180ms ease;
}

.court-preview:hover img,
.court-preview:focus-visible img {
    transform: scale(1.04);
    opacity: 0.92;
}

.court-carousel-image {
    aspect-ratio: 16 / 10;
    object-fit: cover;
}

.court-preview-grid-modal {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 767.98px) {
    .court-preview-grid-modal {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.court-cover {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.court-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 120px));
    gap: 0.75rem;
}

.court-thumbnail-button {
    border: 1px solid #d9e2dd;
    border-radius: 0.75rem;
    padding: 0;
    background: #f8f9fa;
    overflow: hidden;
    width: 120px;
    max-width: 100%;
    aspect-ratio: 1 / 1;
    cursor: pointer;
}

.court-thumbnail-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 160ms ease;
}

.court-thumbnail-button:hover .court-thumbnail-image,
.court-thumbnail-button:focus-visible .court-thumbnail-image {
    transform: scale(1.04);
}

.court-gallery-full-image {
    width: auto;
    max-width: 100%;
    max-height: 80vh;
    height: auto;
    object-fit: contain;
    border-radius: 0.5rem;
}

.policy-list {
    padding-left: 1rem;
}

.court-note {
    background: #f8f9fa;
    border: 1px solid #d8dedb;
    border-radius: 0.75rem;
    padding: 0.75rem;
    height: 100%;
}

.hero-banner {
    position: relative;
    border-radius: 1rem;
    overflow: hidden;
    min-height: 220px;
}

.hero-banner-image {
    width: 100%;
    height: 100%;
    min-height: 220px;
    max-height: 320px;
    object-fit: cover;
}

.hero-banner-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.25rem;
    color: #fff;
    background: linear-gradient(180deg, rgba(16, 24, 40, 0.1) 0%, rgba(16, 24, 40, 0.65) 100%);
}

.reservation-card-hero {
    position: relative;
    border-radius: 1.5rem;
    overflow: hidden;
    color: #fff;
    background:
        radial-gradient(circle at 14% 22%, rgba(255,255,255,.18), transparent 26%),
        radial-gradient(circle at 86% 14%, rgba(255,255,255,.12), transparent 24%),
        linear-gradient(135deg, #0f5132 0%, #16794b 48%, #d8b26e 100%);
    box-shadow: 0 1rem 2.4rem rgba(15, 81, 50, .16);
}

.reservation-card-hero::after {
    content: '';
    position: absolute;
    inset: auto -10% -35% -10%;
    height: 58%;
    border-radius: 50% 50% 0 0;
    background: rgba(255,255,255,.08);
}

.reservation-page-title {
    letter-spacing: .08em;
    font-size: .74rem;
    text-transform: uppercase;
    color: rgba(255,255,255,.74);
}

.reservation-card-shell {
    border: 0;
    border-radius: 1.25rem;
    box-shadow: 0 .75rem 2rem rgba(15, 23, 42, .08);
}

.reservation-card-body {
    padding: 1.25rem;
}

.reservation-card-sidebar {
    position: sticky;
    top: 1.25rem;
}

.reservation-stat {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    background: #fff;
}

.reservation-section-label {
    letter-spacing: .08em;
    font-size: .72rem;
    text-transform: uppercase;
    color: #6c757d;
}

.reservation-line-item {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(248, 249, 250, .85) 0%, #ffffff 100%);
}

.reservation-key-value {
    display: grid;
    gap: .15rem;
}

.reservation-key-value .label {
    color: #6c757d;
    font-size: .76rem;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.reservation-key-value .value {
    font-weight: 600;
    color: #212529;
    font-size: .95rem;
    line-height: 1.35;
    word-break: break-word;
}

.reservation-amount-card {
    background: linear-gradient(135deg, #0f5132 0%, #16794b 100%);
    color: #fff;
    border-radius: 1.25rem;
}

.reservation-note-card {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    background: #fff;
}

.reservation-filter-card {
    border: 1px solid rgba(15, 23, 42, .06);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(248, 249, 250, .8) 0%, #ffffff 100%);
}

.reservation-list-item {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1.1rem;
    background: #fff;
    box-shadow: 0 .5rem 1.5rem rgba(15, 23, 42, .04);
    transition: transform .15s ease, box-shadow .15s ease;
}

.reservation-list-item:hover {
    transform: translateY(-1px);
    box-shadow: 0 .9rem 2rem rgba(15, 23, 42, .08);
}

.reservation-list-amount {
    min-width: 170px;
}

.reservation-list-meta {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* A narrower cousin of `.action-row`, kept rather than replaced because it carries a
   two-column mobile grid further down that `.action-row`'s single flex row cannot do for
   four buttons -- at 375px they would each land at ~75px. Right-aligned and gapped to
   match `.action-row` so the reservation cards read the same as the facility and
   tournament ones; 118px rather than --btn-min-width because four buttons have to fit. */
.reservation-list-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: .65rem;
}

.reservation-list-actions form {
    display: contents;
}

.reservation-list-actions .btn {
    min-width: 118px;
}

.reservation-summary-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.reservation-summary-tile {
    border-radius: 1rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.16);
    backdrop-filter: blur(6px);
}

.reservation-modal-card {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    background: linear-gradient(180deg, rgba(248, 249, 250, .85) 0%, #ffffff 100%);
}

.reservation-modal-summary {
    display: grid;
    gap: .9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.reservation-audit-entry {
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 1rem;
    background: #fff;
}

@media (max-width: 991.98px) {
    .reservation-card-sidebar {
        position: static;
    }

    .reservation-list-meta {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .reservation-list-amount {
        min-width: 0;
    }
}

@media (min-width: 992px) {
    .reservation-card-body {
        padding: 1.5rem;
    }
}

@media (max-width: 767.98px) {
    .hero-banner {
        min-height: 180px;
    }

    .hero-banner-image {
        min-height: 180px;
        max-height: 220px;
    }

    .hero-banner-overlay {
        padding: 1rem;
    }

    .reservation-list-meta,
    .reservation-summary-grid,
    .reservation-modal-summary {
        grid-template-columns: 1fr;
    }

    .reservation-list-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
    }

    .reservation-list-actions .btn {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 419.98px) {
    .reservation-list-actions {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Mobile plan picker (GET /subscription-plans)

   Progressive enhancement over the server-rendered Bootstrap grid. Every rule
   is scoped under .plan-picker.is-mounted -- a class only plan-picker.js adds,
   and only below 768px -- so the desktop grid and the .plan-card styling shared
   with admin/config.php are never touched.
   ========================================================================== */

@media (max-width: 767.98px) {
    .plan-picker.is-mounted {
        position: relative;
        margin-bottom: 1.25rem;
    }

    /* ---- quick-jump chip row ---- */
    .plan-picker__chips {
        display: flex;
        gap: 0.5rem;
        overflow-x: auto;
        padding: 0.15rem 0.1rem 0.6rem;
        margin-bottom: 0.35rem;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .plan-picker__chips::-webkit-scrollbar {
        height: 5px;
    }

    .plan-picker__chips::-webkit-scrollbar-thumb {
        background: rgba(22, 131, 59, 0.14);
        border-radius: 999px;
    }

    .plan-picker__chip {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.1rem;
        min-width: 4.4rem;
        padding: 0.5rem 0.7rem;
        border-radius: 0.9rem;
        border: 1px solid rgba(22, 131, 59, 0.14);
        background: #ffffff;
        color: #153b2d;
        font: inherit;
        cursor: pointer;
        transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease;
    }

    .plan-picker__chip:focus-visible {
        outline: 2px solid var(--brand-green, #16833b);
        outline-offset: 2px;
    }

    .plan-picker__chip-credits {
        font-weight: 800;
        font-size: 0.92rem;
        font-variant-numeric: tabular-nums;
    }

    .plan-picker__chip-label {
        font-size: 0.62rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #4d675c;
    }

    .plan-picker__chip[aria-current="true"] {
        background: linear-gradient(135deg, #0c5f2a 0%, #16833b 100%);
        border-color: transparent;
        box-shadow: 0 0.5rem 1rem rgba(22, 131, 59, 0.28);
    }

    .plan-picker__chip[aria-current="true"] .plan-picker__chip-credits,
    .plan-picker__chip[aria-current="true"] .plan-picker__chip-label {
        color: #ffffff;
    }

    .plan-picker__chip--featured:not([aria-current="true"]) {
        border-color: rgba(247, 210, 26, 0.5);
        background: linear-gradient(135deg, #ffffff 0%, rgba(247, 210, 26, 0.22) 100%);
    }

    /* ---- stage: the Bootstrap row itself becomes the card track ---- */
    .plan-picker.is-mounted [data-plan-picker-track] {
        position: relative;
        display: block;
        height: var(--plan-picker-stage-h, 26rem);
        margin: 0;
        overflow: hidden;
        touch-action: pan-y;
        cursor: grab;
    }

    /* The stage needs to clip its neighbours horizontally, but clipping
       vertically as well means any shortfall in the measured height silently
       crops the bottom of the active card -- i.e. the buy button. `clip` is
       what makes one-axis clipping possible: unlike `hidden` it can pair with
       `visible` on the other axis, and it never creates a scroll container.
       plan-picker.js still sizes the stage to the tallest card; this only
       ensures a mis-measure degrades into a little overlap instead of hiding
       the CTA. */
    @supports (overflow: clip) {
        .plan-picker.is-mounted [data-plan-picker-track] {
            overflow: visible;
            overflow-x: clip;
        }
    }

    .plan-picker.is-mounted[data-dragging] [data-plan-picker-track] {
        cursor: grabbing;
    }

    .plan-picker.is-mounted [data-plan-picker-track]:focus-visible {
        outline: 2px solid var(--brand-green, #16833b);
        outline-offset: 4px;
        border-radius: 1rem;
    }

    .plan-picker.is-mounted [data-plan-card] {
        position: absolute;
        top: 0;
        left: 50%;
        width: min(74vw, 290px);
        height: 100%;
        padding: 0;
        user-select: none;
        will-change: transform, opacity;
        transform: translate(-50%, 0) translateX(var(--plan-tx, 0px)) scale(var(--plan-sc, 1));
        opacity: var(--plan-op, 0);
        z-index: var(--plan-zi, 1);
        pointer-events: none;
        transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), opacity 420ms ease;
    }

    .plan-picker.is-mounted [data-plan-card].is-active {
        pointer-events: auto;
    }

    .plan-picker.is-mounted[data-dragging] [data-plan-card] {
        transition: none;
    }

    /* The summary's desktop min-height would push short cards taller than the
       stage; clamp instead so an admin-edited title cannot overflow. */
    .plan-picker.is-mounted [data-plan-card] .plan-summary {
        min-height: 0;
        margin-bottom: 0.6rem !important;
        font-size: 0.84rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    /* Desktop card density puts the CTA below the fold once the card is a
       fixed-height stage. Tighten type and spacing so the whole card -- buy
       button included -- fits one mobile screen without scrolling. */
    .plan-picker.is-mounted [data-plan-card] .plan-card {
        padding: 0.9rem;
        gap: 0.5rem;
    }

    .plan-picker.is-mounted [data-plan-card] .plan-card-header {
        margin-bottom: 0.6rem !important;
        padding-bottom: 0.6rem;
    }

    .plan-picker.is-mounted [data-plan-card] .plan-card-header .text-center {
        margin-bottom: 0.6rem !important;
    }

    .plan-picker.is-mounted [data-plan-card] .tier-price {
        font-size: 1.7rem;
        line-height: 1.1;
    }

    .plan-picker.is-mounted [data-plan-card] .plan-card-header .d-flex {
        justify-content: center;
        margin-bottom: 0 !important;
    }

    .plan-picker.is-mounted [data-plan-card] .plan-feature-list {
        margin-bottom: 0.6rem !important;
        font-size: 0.78rem;
        line-height: 1.3;
    }

    .plan-picker.is-mounted [data-plan-card] .plan-feature-list li + li {
        margin-top: 0.2rem;
    }

    .plan-picker.is-mounted [data-plan-card] .plan-card .btn {
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        font-size: 0.88rem;
    }

    /* ---- arrows, overlaid on the stage edges ---- */
    .plan-picker__arrow {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        z-index: 20;
        width: 2.15rem;
        height: 2.15rem;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        border-radius: 50%;
        border: 1px solid rgba(22, 131, 59, 0.14);
        background: #ffffff;
        color: #0c5f2a;
        cursor: pointer;
        box-shadow: 0 0.4rem 0.9rem rgba(15, 79, 62, 0.14);
        transition: background 140ms ease;
    }

    .plan-picker__arrow:active {
        background: #f1f6f3;
    }

    .plan-picker__arrow:focus-visible {
        outline: 2px solid var(--brand-green, #16833b);
        outline-offset: 2px;
    }

    .plan-picker__arrow svg {
        width: 1.15rem;
        height: 1.15rem;
    }

    .plan-picker__arrow--prev {
        left: 0;
    }

    .plan-picker__arrow--next {
        right: 0;
    }

    /* ---- dots + counter ---- */
    .plan-picker__foot {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.4rem;
        margin-top: 0.7rem;
    }

    .plan-picker__dots {
        display: flex;
        gap: 0.4rem;
    }

    .plan-picker__dot {
        width: 0.5rem;
        height: 0.5rem;
        padding: 0;
        border: none;
        border-radius: 50%;
        background: rgba(22, 131, 59, 0.2);
        cursor: pointer;
        transition: background 160ms ease, transform 160ms ease;
    }

    .plan-picker__dot[aria-current="true"] {
        background: var(--brand-green, #16833b);
        transform: scale(1.35);
    }

    .plan-picker__dot:focus-visible {
        outline: 2px solid var(--brand-green, #16833b);
        outline-offset: 2px;
    }

    .plan-picker__counter {
        margin: 0;
        font-size: 0.76rem;
        font-weight: 600;
        color: #4d675c;
    }

    .plan-picker__counter strong {
        color: #153b2d;
        font-variant-numeric: tabular-nums;
    }

    .plan-picker__hint {
        margin: 0.15rem 0 0;
        font-size: 0.7rem;
        color: #6b8378;
    }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
    .plan-picker.is-mounted [data-plan-card],
    .plan-picker__chip,
    .plan-picker__arrow,
    .plan-picker__dot {
        transition: none;
    }
}

/* The page was a plain block container and .open-play-card carried no bottom spacing, so
   consecutive sessions rendered flush against each other -- only visible once a facility
   has more than one published session. A flex column owns the rhythm here so the header,
   the cards and the empty state are all spaced by the same rule. */
.open-play-page {
    max-width: 1280px;
    margin: 0 auto;
    padding: 1.8rem 1rem 2.6rem;
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.open-play-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1.2rem;
    flex-wrap: wrap;
    /* Spacing comes from .open-play-page's gap now; a margin here would double it. */
    margin-bottom: 0.4rem;
    padding: 1.3rem 1.4rem;
    border: 1px solid rgba(19, 52, 42, 0.08);
    border-radius: 1.25rem;
    background: rgba(255, 255, 255, 0.82);
    box-shadow: 0 0.8rem 1.8rem rgba(15, 38, 27, 0.04);
}

.open-play-header__copy {
    flex: 1 1 420px;
}

.open-play-header__eyebrow {
    display: inline-block;
    margin-bottom: 0.5rem;
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--brand-green);
}

.open-play-header h1 {
    margin: 0;
    color: var(--brand-green-deep);
    font-size: clamp(2.1rem, 4vw, 3.1rem);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.05em;
}

.open-play-header p {
    margin: 0.5rem 0 0;
    color: #4d675c;
    font-size: 1rem;
    font-weight: 500;
    max-width: 52ch;
}

.open-play-header__meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.open-play-header__stats {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    flex-wrap: wrap;
}

.open-play-header__stat {
    min-width: 90px;
    padding: 0.7rem 0.85rem;
    border-radius: 0.9rem;
    border: 1px solid rgba(19, 52, 42, 0.08);
    background: rgba(247, 250, 248, 0.85);
    text-align: center;
}

.open-play-header__stat strong {
    display: block;
    color: var(--brand-green-deep);
    font-size: 1.3rem;
    line-height: 1.15;
    font-weight: 800;
}

.open-play-header__stat span {
    display: block;
    color: #5d756e;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* .open-play-btn-back removed in P2 -- the "Back to booking" link is now the shared
   tertiary tier (`btn btn-outline-secondary`), which is what the same link already uses on
   Facilities and Tournaments. Its colour values became the tier-3 retint in P1. */

.open-play-card {
    position: relative;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(245, 249, 246, 0.95));
    border: 1px solid rgba(19, 52, 42, 0.08);
    border-left: 4px solid var(--brand-green);
    border-radius: 1.2rem;
    box-shadow: 0 0.8rem 1.6rem rgba(15, 38, 27, 0.04);
    padding: 1.1rem 1.2rem 0.95rem;
    overflow: hidden;
}

.open-play-card::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(22, 131, 59, 0.02), transparent 35%);
    pointer-events: none;
}

.open-play-card__top,
.open-play-card__heading,
.open-play-card__date,
.open-play-card__facility,
.open-play-card__footer {
    position: relative;
    z-index: 1;
}

.open-play-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.open-play-card__heading {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.open-play-card__eyebrow {
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--brand-green);
    font-weight: 700;
}

.open-play-card__title {
    margin: 0;
    color: var(--brand-green-deep);
    font-size: clamp(1.7rem, 2.6vw, 2.4rem);
    line-height: 1.12;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.open-play-card__status {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 96px;
    padding: 0.48rem 0.8rem;
    border-radius: 999px;
    background: rgba(22, 131, 59, 0.08);
    color: var(--brand-green-deep);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.open-play-card__date {
    margin: 0.8rem 0 0.9rem;
    color: #4d645f;
    font-size: 0.97rem;
    font-weight: 700;
}

.open-play-card__facility {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 1.15rem;
    font-size: 1rem;
    color: #254a41;
    font-weight: 700;
}

.open-play-card__facility::before {
    content: "◉";
    color: var(--brand-green);
    font-size: 0.96rem;
    margin-right: 0.05rem;
}

.open-play-card__facility a {
    color: var(--brand-green-deep);
    text-decoration: none;
}

.open-play-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 0.9rem;
    border-top: 1px solid rgba(22, 131, 59, 0.12);
}

.open-play-card__meta {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    flex-wrap: wrap;
    font-size: 0.97rem;
    color: #465f5a;
    font-weight: 700;
}

.open-play-card__meta strong {
    color: var(--brand-green-deep);
    font-weight: 800;
}

.open-play-card__price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    padding: 0.4rem 0.7rem;
    border-radius: 999px;
    background: rgba(247, 210, 26, 0.12);
    border: 1px solid rgba(247, 210, 26, 0.18);
    color: var(--brand-green-deep);
}

.open-play-card__price strong {
    color: var(--brand-green-deep);
    font-size: 1.08rem;
    font-weight: 900;
}

.open-play-card__price small {
    color: #536a64;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.open-play-card__cta {
    margin-left: auto;
}

/* P2: the descendant selectors that used to live here styled *any* a/button inside this
   container -- which is what made the unclassed "Sign in to join" link render as the paid
   Join CTA, and what forced the Join button's own .btn-success to fight a gradient it
   never asked for. Styling is by class now; this rule only holds the shared button to the
   width the card's layout wants. */
.open-play-card__cta .btn,
.open-play-card__cta .open-play-state-pill {
    min-width: var(--btn-min-width);
}

/* Terminal states ("Joined", "Session full") are status, not actions -- a disabled button
   reads as something you could still press. This is the same pill as
   .open-play-card__status, muted, and it is what facilities/show.php uses too so the two
   pages agree. */
.open-play-state-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--btn-height);
    padding: 0.48rem 1rem;
    border-radius: 999px;
    background: rgba(22, 131, 59, 0.08);
    color: #4d645f;
    font-weight: 700;
    font-size: 0.82rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.open-play-empty {
    border: 1px solid rgba(22, 131, 59, 0.1);
    border-radius: 1rem;
    background: rgba(255, 255, 255, 0.72);
    padding: 1.2rem 1.1rem;
    color: #526b63;
    font-weight: 600;
}

@media (max-width: 767.98px) {
    .open-play-page {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .open-play-header {
        padding: 1.05rem 1rem;
    }

    .open-play-header__meta {
        width: 100%;
        justify-content: space-between;
    }

    .open-play-card {
        padding: 0.9rem 0.9rem 0.8rem;
    }

    .open-play-card__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .open-play-card__title {
        font-size: 2.1rem;
    }

    .open-play-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .open-play-card__cta {
        margin-left: 0;
        width: 100%;
    }

    .open-play-card__cta .btn,
    .open-play-card__cta .open-play-state-pill {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 419.98px) {
    .plan-picker.is-mounted [data-plan-card] {
        width: min(76vw, 300px);
    }

    .plan-picker__arrow {
        width: 2.1rem;
        height: 2.1rem;
    }
}

/* Safety net: if JS is mid-unmount at the breakpoint, injected controls never
   leak into the desktop grid. */
@media (min-width: 768px) {
    .plan-picker__chips,
    .plan-picker__arrow,
    .plan-picker__foot {
        display: none;
    }
}