/* Generated by npm run build:css. Edit the source files listed below, not this bundle. */

/* Source: app-core.css */
/* =========================================================
   DESIGN TOKENS & GLOBAL FOUNDATION
========================================================= */

/* Page-to-page transition instead of flashing blank (Safari 18.2+, Chrome 126+; others just navigate).
   Only the content cross-fades in place (no slide), so with the app header and tab bar held still
   below, switching pages reads as the app changing screens rather than a reload. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    ::view-transition-old(root) {
        animation: page-leave .2s ease-out both;
    }

    ::view-transition-new(root) {
        animation: page-enter .2s ease-out both;
    }
}

/* Phones: full page loads move like an iOS navigation stack (data-nav-direction, set on pagereveal in
   layouts/app): forward slides the new screen in over the old one, which shifts a little and dims;
   back is the reverse. Mirrored for RTL. Tab swaps (Turbo), reloads and desktop keep the fade above.
   page-skeleton.js leaves the old page untouched on these taps so the real page is what slides away. */
@media (prefers-reduced-motion: no-preference) and (max-width: 767px) {
    :root { --nav-push-from: 100%; }
    :root[dir="rtl"] { --nav-push-from: -100%; }

    :root[data-nav-direction]::view-transition-old(root),
    :root[data-nav-direction]::view-transition-new(root) {
        mix-blend-mode: normal;
        animation-duration: .35s;
        animation-timing-function: cubic-bezier(.2, .8, .2, 1);
        animation-fill-mode: both;
    }
    :root[data-nav-direction="push"]::view-transition-old(root) { animation-name: nav-push-old; }
    :root[data-nav-direction="push"]::view-transition-new(root) { animation-name: nav-push-new; }
    :root[data-nav-direction="pop"]::view-transition-old(root) { animation-name: nav-pop-old; z-index: 1; }
    :root[data-nav-direction="pop"]::view-transition-new(root) { animation-name: nav-pop-new; }
    /* Tab bar taps (layouts/app): the whole page slides towards the tapped tab's side. */
    :root[data-nav-direction="tab-next"]::view-transition-old(root) { animation-name: nav-tab-next-old; }
    :root[data-nav-direction="tab-next"]::view-transition-new(root) { animation-name: nav-push-new; }
    :root[data-nav-direction="tab-prev"]::view-transition-old(root) { animation-name: nav-pop-old; }
    :root[data-nav-direction="tab-prev"]::view-transition-new(root) { animation-name: nav-tab-prev-new; }
}

@keyframes nav-push-new {
    from { transform: translateX(var(--nav-push-from)); }
}

@keyframes nav-push-old {
    to { transform: translateX(calc(var(--nav-push-from) * -.3)); filter: brightness(.85); }
}

@keyframes nav-pop-old {
    to { transform: translateX(var(--nav-push-from)); }
}

@keyframes nav-pop-new {
    from { transform: translateX(calc(var(--nav-push-from) * -.3)); filter: brightness(.85); }
}

@keyframes nav-tab-next-old {
    to { transform: translateX(calc(var(--nav-push-from) * -1)); }
}

@keyframes nav-tab-prev-new {
    from { transform: translateX(calc(var(--nav-push-from) * -1)); }
}

/* Phones: the app bar and tab bar hold still while the page between them changes. */
@media (max-width: 767px) {
    .site-header { view-transition-name: app-bar; }
    /* Pages with the app header: it is the bar that holds still (the old one is invisible there). */
    body:has(.app-header) .site-header { view-transition-name: none; }
    .app-header { view-transition-name: app-bar; }
    /* The green pill gets no name of its own: a named child is drawn over its parent's snapshot,
       which hid the active tab's icon and label under the pill until the swap ended. It already
       slides on the live page when the tab is tapped (partials/bottom-tabbar). */
    .bottom-tabbar { view-transition-name: tab-bar; }
}

@keyframes page-leave {
    to { opacity: 0; }
}

@keyframes page-enter {
    from { opacity: 0; }
}

:root {
    --green-dark: #005447;
    --green: #159447;
    --green-light: #82d675;
    --yellow: #ffd21a;
    --orange: #f45b12;
    --blue: #2989dc;
    --text-dark: #204e43;
    --text: #333;
    --border: #E2E8F0;
    --focus-ring: rgba(255, 210, 26, .8);
    --input-focus: #45ba61;
    --input-focus-ring: rgba(69, 186, 97, .12);
    /* Palette: shared colors used across the player-facing CSS. Near-identical shades were merged into one variable. */
    --blue-50: #5a88ee;
    --blue-225: #50a9f5;
    --blue-400: #4f9eeb;
    --blue-550: #348de1;
    --blue-725: #247dc9;
    --slate-500: #6b7280;
    --gray-50: #c7c9c6;
    --gray-100: #b0b3b0;
    --gray-175: #a8afac;
    --gray-225: #a3a3a3;
    --gray-275: #999999;
    --gray-325: #929592;
    --gray-400: #8a938e;
    --gray-450: #8a8a8a;
    --gray-500: #78817e;
    --gray-550: #777777;
    --gray-625: #6b6f6a;
    --gray-675: #666666;
    --gray-725: #555555;
    --gray-775: #444444;
    --gray-850: #232323;
    --gray-900: #1a1a1a;
    --green-50: #eafaf0;
    --green-75: #e4f4e8;
    --green-125: #c6eecd;
    --green-150: #58d86c;
    --green-175: #65c978;
    --green-200: #4fc467;
    --green-250: #5cb066;
    --green-275: #42c55a;
    --green-300: #51b36f;
    --green-325: #3fbf68;
    --green-375: #42b962;
    --green-400: #45ad55;
    --green-425: #35b95c;
    --green-450: #03bb83;
    --green-500: #29945a;
    --green-525: #207a42;
    --green-550: #138743;
    --green-575: #12803e;
    --green-625: #176b42;
    --green-650: #126f39;
    --green-675: #087454;
    --green-700: #0f6b52;
    --green-750: #007361;
    --green-775: #0d5d4f;
    --green-800: #174f43;
    --green-825: #075847;
    --green-875: #153f36;
    --green-900: #12352e;
    --orange-50: #e66c37;
    --orange-325: #e0672f;
    --orange-625: #ef6618;
    --orange-900: #e08b1f;
    --red-50: #fff5f4;
    --red-100: #fdecea;
    --red-175: #ef3e3e;
    --red-225: #e5484d;
    --red-275: #e45645;
    --red-325: #dd4444;
    --red-400: #e73838;
    --red-450: #dc3545;
    --red-500: #e62a2a;
    --red-550: #d94335;
    --red-625: #c94444;
    --red-675: #d92d20;
    --red-725: #c0392b;
    --red-775: #b52e23;
    --red-850: #b42318;
    --red-900: #a13024;
    --sage-50: #f8faf8;
    --sage-100: #eef1ef;
    --sage-150: #e3ebe6;
    --sage-200: #dfe3e0;
    --sage-275: #d8dcd6;
    --sage-325: #cfe3d8;
    --sage-375: #cfd8d3;
    --sage-425: #c9d3cd;
    --sage-475: #b7c0ba;
    --sage-525: #9aa9a3;
    --sage-575: #7b8a84;
    --sage-625: #6b7a74;
    --sage-700: #667570;
    --sage-750: #5c6864;
    --sage-800: #53665d;
    --sage-850: #4a6259;
    --sage-900: #3d4a45;
    --white: #ffffff;
    --yellow-50: #f7f6f1;
    --yellow-175: #fff4db;
    --yellow-300: #f8f1e0;
    --yellow-425: #ffe066;
    --yellow-525: #f2c94c;
    --yellow-650: #ffb400;
    --yellow-775: #f5b400;
    --yellow-900: #d9a514;
    --surface: var(--white);
    --surface-raised: var(--surface);
    --text-on-brand: var(--white);
    --surface-page: var(--yellow-50);
    --text-primary: var(--green-800);
    --status-warning-bg: #fffbec;
    --status-warning-border: #ffe5a6;
    --status-warning-text: #a84b0e;
    --status-danger-bg: #fdecea;
    --status-info-bg: #fff1e8;
    --control-glass: rgba(255, 255, 255, .92);
    --control-glass-border: rgba(0, 0, 0, .12);
}

/* Dark theme: only the semantic tokens flip; hardcoded colors stay light until moved onto tokens. */
:root[data-theme="dark"] {
    color-scheme: dark;
    /* Brand-tinted dark green; each raised layer is one step lighter (page < card < row/chip < border). */
    --surface: #172a24;
    --surface-page: #0d1b17;
    --surface-raised: #213a32;
    --dark-text: #f4f7f5;
    --dark-glass: rgba(23, 42, 36, .88);
    --dark-glass-border: rgba(255, 255, 255, .11);
    --text-primary: var(--dark-text);
    --text: #d6ddd9;
    --border: #2e463e;
    /* Light tints (backgrounds/borders) go dark. */
    --sage-50: #192b26;
    --sage-100: #243a33;
    --sage-150: #284039;
    --sage-200: #2e463e;
    --sage-275: #354e45;
    --sage-325: #335a4b;
    --sage-375: #3d554c;
    --sage-425: #465e55;
    --green-50: #24453a;
    --green-75: #284d41;
    --green-125: #2f5a4b;
    --yellow-50: #12211d;
    --yellow-175: #3a3320;
    --yellow-300: #352f1f;
    --red-50: #3a1d1b;
    --red-100: #45201d;
    /* Dark shades used as text go light. */
    --sage-575: #a3b2ac;
    --sage-625: #9fb0a9;
    --sage-700: #a9b8b2;
    --sage-750: #b3c1bb;
    --sage-800: #bccac4;
    --sage-850: #c4d2cc;
    --sage-900: #d3ded9;
    --gray-400: #a5ada9;
    --gray-500: #a0a8a4;
    --gray-625: #aeb3ad;
    --gray-675: #b0b0b0;
    --gray-725: #c0c0c0;
    --gray-775: #cccccc;
    --gray-850: #e0e0e0;
    --gray-900: #ececec;
    --status-warning-bg: #352f1f;
    --status-warning-border: #6b5824;
    --status-warning-text: #f2c96d;
    --status-danger-bg: #45201d;
    --status-info-bg: #3b271f;
    --control-glass: rgba(23, 42, 36, .9);
    --control-glass-border: rgba(255, 255, 255, .12);
}

:root[data-theme="dark"] img[src$="/images/logo.png"]:not([src*="saff"]) {
    content: url('/images/logo-white.png');
    filter: none;
}

/* Program and field card titles: always one line, cut with "…" (full name in the title tooltip). */
.field-body h3,
.game-card h3,
.program-card-body h2,
.featured-field-name {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Grid items default to min-width:auto, so a nowrap title would widen the card (and its column) instead of ellipsizing. */
.field-card,
.game-card {
    min-width: 0;
}

/* Dark: shadows don't show on dark backgrounds, so cards get a faint light edge instead.
   An inset outline adds no layout and follows the radius (sits over existing 1px palette borders). */
:root[data-theme="dark"] :is(
    .captain-session-list article, .captain-shift-card,
    .streak-chain-card, .streak-perfect-month, .streak-week-card,
    .home-hub-next, .home-hub-join, .home-hub-stats div, .home-hub-task, .home-hub-fields div, .home-hub-calendar-card,
    .welcome-page .field-card, .nearby-field, .program-card, .map-layout .featured-field,
    .game-card, .programs-filter-section, .programs-calendar, .program-booking-summary,
    .booking-calendar-panel, .booking-options, .payment-modal-confirm section,
    .lb-filters, .lb-board, .lb-me,
    .notification-item, .task-qr-card, .player-report-card, .player-rating-card,
    .coach-account-card, .player-profile-stats, .coach-review-card, .coach-sign-card
) {
    outline: 1px solid rgba(255, 255, 255, .09);
    outline-offset: -1px;
}

/* Dark: activity card rows sit a step below their raised card, like the mint rows on white in light. */
:root[data-theme="dark"] .captain-session-list p {
    background: var(--surface);
}

/* Dark: ApexCharts writes light-theme colors as SVG attributes, which any CSS property overrides. */
:root[data-theme="dark"] [data-chart] .apexcharts-gridline,
:root[data-theme="dark"] [data-chart] .apexcharts-grid-borders line {
    stroke: rgba(255, 255, 255, .08);
}

:root[data-theme="dark"] [data-chart] .apexcharts-grid-row {
    fill: transparent;
}

:root[data-theme="dark"] [data-chart] .apexcharts-text {
    fill: var(--sage-625);
}

:root[data-theme="dark"] [data-chart] .apexcharts-legend-text {
    color: var(--sage-625) !important;
}

/* Stacked segment separators and donut slice gaps match the panel instead of glowing white. */
:root[data-theme="dark"] [data-chart] :is(.apexcharts-bar-area, .apexcharts-pie-area) {
    stroke: hsl(161 29% 13%);
}

/* Active nav items sit on yellow in every theme, so their text stays dark. */
:root[data-theme="dark"] .nav-menu .active {
    color: var(--green-800);
}

.theme-toggle {
    position: fixed;
    bottom: calc(96px + env(safe-area-inset-bottom));
    left: 16px;
    z-index: 2000;
    width: 44px;
    height: 44px;
    border: 2px solid var(--yellow);
    border-radius: 50%;
    background: var(--green-dark);
    color: var(--yellow);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    min-height: 100%;
    scroll-behavior: smooth;
}

/* Reinforces <bdi> isolation for LTR date/time ranges embedded in this RTL
   app ("2026.09.01 | 11:25 AM - 1:30 PM"). The page sets <html dir="rtl">,
   which inherits `direction: rtl` down to every descendant; relying on each
   <bdi dir="ltr">'s own UA-mapped direction to win isn't reliable across
   browsers, so it's set explicitly here instead of only via the attribute. */
bdi {
    unicode-bidi: isolate;
}
bdi[dir="ltr"] {
    direction: ltr;
}
bdi[dir="rtl"] {
    direction: rtl;
}

body {
    min-width: 320px;
    min-height: 100vh;
    margin: 0;
    padding: 0 env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    font-family: "Cairo", sans-serif;
    background: var(--green-dark);
    color: var(--dark-text, var(--text-dark));
    overflow-x: hidden;
}

body.nav-open {
    overflow: hidden;
}

img,
svg {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
}

button,
input,
select,
textarea {
    font: inherit;
}

button,
select,
label {
    cursor: pointer;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled {
    cursor: not-allowed;
}

.auth-button {
    border: 0;
    cursor: pointer;
}

button:focus-visible,
a:focus-visible {
    outline: 3px solid var(--focus-ring);
    outline-offset: 3px;
}

input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):focus,
select:focus,
textarea:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: 0;
}

input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="range"]:focus-visible {
    outline: 2px solid var(--input-focus);
    outline-offset: 2px;
}

/* Shared layout and form primitives */
.page-container {
    position: relative;
    width: calc(100% - 100px);
    max-width: 1340px;
    margin-inline: auto;
}

.form-control-custom {
    min-width:100px!important;
    width: 100%;
    height: 44px;
    padding: 4px 18px;
    border: 1px solid var(--border);
    border-radius: 25px;
    background: var(--surface);
    color: var(--text);
    font-size: 15px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.form-control-custom:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

select.form-control-custom {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 18px center;
    background-size: 12px 8px;
}

.form-control-custom[type="number"] {
    text-align: right;
}

.form-control-custom.is-invalid {
    border-color: var(--red-450);
}

.invalid-feedback {
    color: var(--red-450);
    font-size: 12px;
}

/* Shared presentation utilities */
.text-right {
    text-align: right;
}

.grid-full-row {
    grid-column: 1 / -1;
}

.flex-wrap-gap-sm {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.attachment-list {
    margin-top: 6px;
}

.attachment-thumbnail {
    max-width: 150px;
    border-radius: 10px;
}

.table-empty-state {
    color: var(--gray-400);
    text-align: center;
}

.validation-feedback-visible {
    display: block;
}

/* Shared account-page foundation */
.captain-profile-page,
.coach-account-page {
    background: var(--surface-page);
    color: var(--text-primary);
}

.captain-profile-page .site-header,
.coach-account-page .site-header,
.coach-review-page .site-header {
    position: relative;
    z-index: 3;
    background: transparent;
}

.profile-page .site-footer,
.coach-account-page .site-footer,
.captain-profile-page .site-footer,
.coach-review-page .site-footer,
.notifications-page .site-footer,
.programs-page .site-footer,
.profile-page .footer-stadium,
.coach-account-page .footer-stadium,
.captain-profile-page .footer-stadium,
.coach-review-page .footer-stadium,
.notifications-page .footer-stadium,
.programs-page .footer-stadium {
    background: transparent;
}

/* Corner decoration shared by every profile-area page */
.profile-page,
.coach-account-page,
.captain-profile-page,
.coach-review-page,
.notifications-page {
    position: relative;
}

.profile-page::before,
.coach-account-page::before,
.captain-profile-page::before,
.coach-review-page::before,
.notifications-page::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: clamp(90px, 28.4vw, 307px);
    background: url('/images/yellowLeft.png') left top / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
}

.profile-page::after,
.coach-account-page::after,
.captain-profile-page::after,
.coach-review-page::after,
.notifications-page::after {
    content: "";
    position: absolute;
    bottom: 0;
    right: 0;
    width: clamp(80px, 26.5vw, 287px);
    height: 57.4%;
    background: url('/images/blueRight.png') right bottom / 100% 100% no-repeat;
    z-index: -1;
    pointer-events: none;
}

.coach-review-avatar img,
.program-card img:not(.program-card-doodle) {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.games-filters select,
.games-filters input,
.programs-filters select,
.programs-filters input {
    text-align: right;
    direction: rtl;
}

[data-games-results].is-loading,
[data-program-results].is-loading {
    opacity: .45;
    pointer-events: none;
}

/* Unified Select2 system — follows the fields-filter controls. */
.select2-container {
    min-width: 0;
    width: 100% !important;
    font-family: "Cairo", sans-serif;
    font-size: 15px;
    direction: rtl;
}

.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
    box-sizing: border-box;
    width: 100%;
    min-height: 45px;
    border: 1px solid var(--sage-200);
    border-radius: 24px;
    background-color: var(--surface);
    color: var(--gray-725);
}

.select2-container--default .select2-selection--single {
    height: 45px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2345ba61' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 17px center;
    background-size: 12px 8px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered,
.select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 43px;
    padding: 0 18px 0 42px;
    color: var(--gray-725);
    font: 500 15px/43px "Cairo", sans-serif;
    text-align: right;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gray-725);
}

.select2-container--default .select2-selection--multiple {
    position: relative;
    height: 45px;
    padding: 3px 12px 3px 42px;
    overflow: hidden;
}

.select2-container--default .select2-selection--multiple::after {
    position: absolute;
    top: 50%;
    left: 17px;
    width: 12px;
    height: 8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2345ba61' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
    content: "";
    pointer-events: none;
    transform: translateY(-50%);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    width: 100%;
    min-width: 0;
    min-height: 37px;
    align-items: center;
    gap: 4px;
    padding: 0;
    overflow: hidden;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    flex: 0 0 auto;
    margin: 2px 0;
    padding: 3px 9px 3px 5px;
    border: 0;
    border-radius: 14px;
    background: var(--green-50);
    color: var(--dark-text, var(--green-675));
    font-size: 13px;
    line-height: 23px;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    position: static;
    margin-left: 5px;
    border: 0;
    color: var(--dark-text, var(--green-675));
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
    outline: 0 !important;
}

.select2-container *:focus,
.select2-container *:focus-visible,
.select2-search__field:focus,
.select2-search__field:focus-visible {
    outline: 0 !important;
}

.select2-container--default.select2-container--disabled .select2-selection--single,
.select2-container--default.select2-container--disabled .select2-selection--multiple {
    border-color: var(--sage-275);
    background-color: var(--sage-100);
    color: var(--gray-325);
    cursor: not-allowed;
}

select.is-invalid + .select2-container .select2-selection--single,
select.is-invalid + .select2-container .select2-selection--multiple,
.has-error .select2-container .select2-selection--single,
.has-error .select2-container .select2-selection--multiple {
    border-color: var(--red-450) !important;
}

.select2-container--open .select2-dropdown {
    overflow: hidden;
    border: 1px solid var(--sage-200);
    border-radius: 14px;
    background: var(--surface);
    direction: rtl;
    font-family: "Cairo", sans-serif;
    font-size: 15px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .12);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    height: 40px;
    padding: 7px 12px;
    border: 1px solid var(--sage-200);
    border-radius: 10px;
    outline: 0;
    font-family: "Cairo", sans-serif;
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.select2-results__option {
    min-height: 42px;
    padding: 10px 14px;
    color: var(--text-primary);
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background: var(--green-375);
    color: var(--text-on-brand);
}

.select2-container--default .select2-results__option--selected {
    background: var(--green-50);
    color: var(--dark-text, var(--green-675));
}

/* Shared catalog page foundation */
@media (min-width: 768px) {
    .games-page .nav-menu > a,
    .games-page .nav-dropdown-toggle,
    .programs-page .nav-menu > a,
    .programs-page .nav-dropdown-toggle {
        color: var(--text-primary);
    }

    .games-page .nav-dropdown.is-open .nav-dropdown-toggle,
    .programs-page .nav-dropdown.is-open .nav-dropdown-toggle {
        color: var(--dark-text, #28ad50);
    }

    @media (hover: hover) {

    .games-page .nav-menu > a:hover,
    .games-page .nav-dropdown-toggle:hover,
    .programs-page .nav-menu > a:hover,
    .programs-page .nav-dropdown-toggle:hover {
        color: var(--dark-text, #28ad50);
    }
    }

    .games-page .nav-menu > a.active,
    .programs-page .nav-menu > a.active {
        color: var(--green-800);
    }

    .games-page .navbar-logout,
    .programs-page .navbar-logout {
        border-color: var(--green-800);
        color: var(--text-primary);
    }

    @media (hover: hover) {

    .games-page .navbar-logout:hover,
    .programs-page .navbar-logout:hover {
        background: var(--green-800);
        color: var(--text-on-brand);
    }
    }
}

.games-hero,
.programs-hero {
    display: grid;
    min-height: 620px;
    grid-template-columns: 54% 46%;
    align-items: center;
    overflow: hidden;
    background: var(--surface-page);
    direction: ltr;
}

.games-hero-banner,
.programs-hero-banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.games-hero-copy > a span,
.game-card-button span,
.programs-hero-copy > a span,
.program-book span {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    border-radius: 50%;
    background: var(--green-150);
}

@media (max-width: 900px) {
    .games-hero,
    .programs-hero {
        min-height: 540px;
        grid-template-columns: 48% 52%;
    }

    .games-hero-copy,
    .programs-hero-copy {
        padding: 45px 28px;
    }

    .games-hero-copy h1,
    .programs-hero-copy h1 {
        font-size: 54px;
    }

    .games-hero-copy p,
    .programs-hero-copy p {
        font-size: 21px;
    }
}

@media (max-width: 1100px) {
    .page-container {
        width: calc(100% - 40px);
    }
}

@media (max-width: 767px) {
    .page-container {
        width: calc(100% - 20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}
body[data-user-role="coach"] [data-open-booking],
body[data-user-role="coach"] [data-open-map-program-calendar],
body[data-user-role="coach"] .featured-field-book{display:none!important}

/* Arabic overlay for native file inputs (see arabic-validation.js). */
.ar-file { position: relative; display: block; min-width: 0; }
.ar-file > input[type="file"] { width: 100%; color: transparent; cursor: pointer; }
/* Stays hidden when disabled (e.g. a full upload widget), over page :disabled colors. */
.ar-file > input[type="file"]:disabled { color: transparent; cursor: not-allowed; }
.ar-file > input[type="file"]::file-selector-button { visibility: hidden; }
.ar-file-overlay { position: absolute; inset: 0; display: flex; align-items: center; gap: 10px; padding: 0 8px; overflow: hidden; pointer-events: none; }
.ar-file-button { flex: none; padding: 6px 12px; border-radius: 18px; background: var(--green-800); color: var(--text-on-brand); font: 600 11px "Cairo", sans-serif; }
.ar-file-status { overflow: hidden; color: var(--dark-text, #4b5563); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }

/* iOS zooms the page when a focused field's text is under 16px; phones only. */
@media (max-width: 767px) and (pointer: coarse) {
    input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"], [type="submit"], [type="button"], [type="reset"], [type="image"], [type="color"]),
    select,
    textarea,
    .ts-control {
        font-size: 16px !important;
    }

    /* the bigger text needs room beside the arrow in the narrow date selects */
    .birth-date-picker select {
        padding-left: 28px !important;
        background-position: 10px 50% !important;
    }
}

/* Native-feeling taps: no grey flash, no double-tap-zoom delay, and a light
   press state instead (iOS applies :active because <body ontouchstart>). */
html {
    -webkit-tap-highlight-color: transparent;
}

/* Not inside the home program slider: it needs its own pan-y for swiping. */
:is(a, button, input, select, textarea, label, summary):not(.program-slider *) {
    touch-action: manipulation;
}

@media (hover: none) {
    :is(a, button, [role="button"], summary):not(.program-slider *):active {
        opacity: .7;
    }
}

/* Phones: popups that open as bottom sheets slide up with this. */
@keyframes sheet-up {
    from { transform: translateY(100%); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .booking-auth-dialog,
    .report-success-dialog,
    .login-status-dialog,
    .fields-filter-section,
    .programs-filter-section,
    .programs-calendar,
    .field-modal-dialog,
    .booking-dialog,
    .lb-filters {
        animation: none !important;
        transition: none !important;
    }
}

/* Fields/programs: "show more" replaces numbered pagination (games.js, programs.js). */
.results-load-more {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    padding: 0 30px;
    border: 2px solid var(--green-400);
    border-radius: 24px;
    background: var(--surface);
    color: var(--dark-text, var(--green-525));
    font-weight: 800;
    text-decoration: none;
}

@media (hover: hover) {

.results-load-more:hover {
    background: var(--green-400);
    color: var(--text-on-brand);
}
}

.results-load-more[data-loading] {
    opacity: .7;
    pointer-events: none;
}

/* Email inputs render LTR (browser default) so typed addresses read correctly; the Arabic placeholder stays RTL. */
input[type="email"]:placeholder-shown { direction: rtl; }

/* Source: navbar.css */
/* =========================================================
   NAVBAR
========================================================= */

.site-header {
    position: relative;
    z-index: 1000;

    min-height: 95px;

    padding: 15px 3.5% 15px 0;

    display: flex;
    align-items: center;

    color: var(--text-on-brand);
}

.logo-link {
    display: block;
    flex: 0 0 auto;

    text-decoration: none;
}

.logo {
    display: block;

    width: 100px;
    height: auto;
}

.nav-wrapper-logo-link {
    display: none;
}


/* =========================================================
   NAVIGATION
========================================================= */

.nav-wrapper {
    width: 100%;

    display: flex;
    align-items: center;
}

.nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;

    margin-left: auto;
    margin-right: auto;
}

.nav-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 5px 0;

    color: var(--text-on-brand);

    font-size: 18px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;
    white-space: nowrap;

    transition:
        color .15s ease,
        background-color .15s ease;
}

@media (hover: hover) {

.nav-menu a:hover {
    color: var(--yellow);
}
}

.nav-menu .active {
    padding: 5px 22px;

    border-radius: 30px;

    background: var(--yellow);
    color: var(--green-dark);

    font-weight: 800;
}

@media (hover: hover) {

.nav-menu .active:hover {
    color: var(--dark-text, var(--green-dark));
}
}

.nav-dropdown {
    position: relative;
}

.nav-dropdown-toggle {
    min-height: 38px;
    padding: 5px 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--text-on-brand);
    font-size: 18px;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    border: 0;
    background: transparent;
}

.nav-dropdown.is-open .nav-dropdown-toggle {
    color: var(--yellow);
}

@media (hover: hover) {

.nav-dropdown-toggle:hover {
    color: var(--yellow);
}
}

.nav-menu .nav-dropdown-toggle.active {
    padding: 5px 22px;
    background: var(--yellow);
    color: var(--green-dark);
    font-weight: 800;
}

.nav-dropdown-arrow {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: transform .2s ease;
}

.nav-dropdown.is-open .nav-dropdown-arrow {
    transform: rotate(180deg);
}

.nav-dropdown-menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 20;
    width: 180px;
    padding: 8px;
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 12px;
    background: var(--surface);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .18);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity .15s ease, transform .15s ease, visibility .15s;
}

.nav-dropdown.is-open .nav-dropdown-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.nav-dropdown-menu a {
    width: 100%;
    min-height: 40px;
    padding: 9px 12px;
    justify-content: flex-start;
    border-radius: 8px;
    color: var(--dark-text, var(--green-dark));
    font-size: 14px;
}

@media (hover: hover) {

.nav-dropdown-menu a:hover {
    background: var(--surface-page);
    color: var(--orange);
}
}

.nav-account-menu a {
    gap: 12px;
    border-radius: 10px;
    font-weight: 700;
}

.nav-account-menu a + a {
    margin-top: 4px;
}

.nav-account-menu svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.nav-notifications-toggle {
    position: relative;
    padding: 5px;
    color: var(--dark-text, #000);
}

.nav-notifications-bell {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nav-notifications-badge {
    position: absolute;
    top: -2px;
    left: -4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--orange);
    color: var(--text-on-brand);
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
}

.nav-notifications-menu {
    right: auto;
    left: 50%;
    width: min(340px, calc(100vw - 32px));
    transform: translate(-50%, -6px);
}

.nav-notifications.is-open .nav-notifications-menu {
    transform: translate(-50%, 0);
}

/* ~3 notifications tall; the rest scroll, and "view all" stays pinned below. */
.nav-notifications-list {
    max-height: 250px;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.nav-notifications-menu a {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    text-align: right;
    text-decoration: none;
}

.nav-notifications-menu a:not(.nav-notifications-view-all) + a:not(.nav-notifications-view-all) {
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--sage-100);
}

.nav-notifications-menu a strong { font-weight: 800; }

.nav-notifications-menu a small {
    color: var(--sage-700);
    font-size: 12px;
    line-height: 1.7;
}

.nav-notifications-empty {
    padding: 12px;
    color: var(--sage-700);
    font-size: 13px;
    text-align: center;
}

.nav-notifications-menu a.nav-notifications-view-all {
    display: block;
    text-align: center;
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--orange);
    border-top: 1px solid var(--sage-100);
}


/* =========================================================
   LANGUAGE
========================================================= */

.language {
    display: flex;
    align-items: center;

    margin-right: 20px;

    color: var(--text-on-brand);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   AUTH BUTTON
========================================================= */

.auth-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 170px;
    height: 50px;

    padding: 0 18px;

    border-radius: 0 30px 30px 0;

    background: var(--blue);
    color: var(--text-on-brand);

    font-size: 18px;

    text-decoration: none;

    transition: background-color .15s ease;
}

@media (hover: hover) {

.auth-button:hover {
    background: var(--blue-725);
    color: var(--text-on-brand);
}
}

.navbar-account-actions { display:flex; align-items:center; gap:10px; margin-left:clamp(14px, 1.5vw, 24px); }
.navbar-account-actions > a,
.navbar-account-actions > form,
.navbar-account-actions .navbar-logout { width:170px; }
.navbar-account-actions .navbar-logout { height:50px; border-radius:30px; }
.profile-nav-link[aria-current="page"] { background:var(--blue-725); }
.auth-icon svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.navbar-logout { display:flex; align-items:center; justify-content:center; gap:7px; padding:8px 12px; border:1px solid currentColor; border-radius:20px; background:transparent; color:inherit; font:inherit; font-size:12px; cursor:pointer; white-space:nowrap; }
.navbar-logout svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
@media (hover: hover) {
.navbar-logout:hover { background:rgba(255,255,255,.12); }
}

.auth-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--surface);
    color: var(--blue);
}


/* =========================================================
   MOBILE NAV BUTTON
========================================================= */

.navbar-toggler {
    display: none;

    width: 45px;
    height: 42px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;

    background: transparent;
    color: var(--text-on-brand);

    align-items: center;
    justify-content: center;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {

.navbar-toggler:hover {
    background: rgba(255, 255, 255, .08);
}
}

.menu-icon,
.close-icon {
    pointer-events: none;

    font-family: Arial, sans-serif;
    line-height: 1;
    text-align: center;
}

.menu-icon {
    display: block;
    font-size: 28px;
}

.close-icon {
    display: none;
    font-size: 34px;
}

.navbar-toggler.is-open .menu-icon {
    display: none;
}

.navbar-toggler.is-open .close-icon {
    display: block;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    position: relative;
    z-index: 5;

    padding: 75px 4% 20px;

    color: var(--text-on-brand);
}

.footer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    padding-bottom: 12px;

    border-bottom: 1px solid rgba(255, 255, 255, .8);
}

.social {
    display: flex;
    align-items: center;

    gap: 10px;
}

.social span {
    width: 28px;
    height: 28px;

    display: flex;
    align-items: center;
    justify-content: center;

    border: 1px solid #38c85d;
    border-radius: 50%;

    color: var(--dark-text, #38c85d);

    font-size: 13px;
}

.social .contact {
    width: auto;
    height: auto;

    margin-right: 8px;

    border: 0;

    color: var(--text-on-brand);

    font-size: 18px;
}

.footer-right {
    font-size: 16px;
}

.footer-links {
    display: flex;
    justify-content: center;

    gap: 18px;

    padding-top: 12px;

    font-size: 14px;
}

.footer-links a {
    color: var(--text-on-brand);
    text-decoration: none;
}

@media (hover: hover) {

.footer-links a:hover {
    color: var(--yellow);
}
}

.footer-links span {
    opacity: .7;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .page-container {
        width: calc(100% - 40px);
    }

    .nav-menu {
        gap: 15px;
    }

    .nav-menu a {
        font-size: 14px;
    }
}

/* Small tablets (iPad mini portrait): must come after the 1100px block so it wins. */
@media (min-width: 768px) and (max-width: 950px) {

    .site-header {
        min-height: 72px;
        padding: 10px 2% 10px 0;
    }

    .logo {
        width: 72px;
    }

    .nav-menu {
        gap: 12px;
    }

    .nav-menu a,
    .nav-dropdown-toggle {
        font-size: 13px;
    }

    .nav-menu .active,
    .nav-menu .nav-dropdown-toggle.active {
        padding: 4px 12px;
    }

    .nav-dropdown-toggle {
        gap: 4px;
    }

    .auth-button {
        min-width: 0;
        height: 40px;
        gap: 6px;
        padding: 0 12px;
        font-size: 13px;
        white-space: nowrap;
    }

    .auth-icon {
        width: 28px;
        height: 28px;
    }

    .auth-icon svg {
        width: 18px;
        height: 18px;
    }

    .navbar-account-actions {
        gap: 6px;
        margin-left: 8px;
    }

    .navbar-account-actions > a,
    .navbar-account-actions > form,
    .navbar-account-actions .navbar-logout {
        width: auto;
    }

    .navbar-account-actions .navbar-logout {
        height: 40px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .page-container {
        width: calc(100% - 20px);
    }


    /* -----------------------------------------------------
       HEADER
    ----------------------------------------------------- */

    .site-header {
        min-height: 75px;

        padding: 12px 18px;

        justify-content: space-between;
    }

    .logo {
        width: 80px;
    }


    /* -----------------------------------------------------
       MENU TOGGLE
    ----------------------------------------------------- */

    .navbar-toggler {
        position: relative;
        z-index: 1101;

        display: flex;
    }


    /* -----------------------------------------------------
       MOBILE MENU
    ----------------------------------------------------- */

    .nav-wrapper {
        position: fixed;

        top: 0;
        left: 0;

        z-index: 1050;

        width: 100%;
        height: 100dvh;

        display: none;

        flex-direction: column;
        align-items: stretch;

        padding: calc(90px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));

        margin: 0;

        background: var(--green-dark);

        overflow-y: auto;
    }

    .nav-wrapper.is-open {
        display: flex;
    }

    .nav-wrapper-logo-link {
        display: flex;
        justify-content: center;

        padding: 0 0 20px;
    }

    .nav-wrapper-logo {
        width: 90px;
        height: auto;

        display: inline-block;
    }

    .nav-menu {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 5px;

        margin: 0;
    }

    .nav-menu a {
        width: 100%;

        min-height: 48px;

        padding: 12px 18px;

        display: flex;
        align-items: center;

        border-radius: 10px;

        color: var(--text-on-brand);

        font-size: 16px;

        text-align: right;
    }

    @media (hover: hover) {

    .nav-menu a:hover {
        background: rgba(255, 255, 255, .08);
    }
    }

    .nav-menu .active {
        padding: 12px 18px;

        background: var(--yellow);
        color: var(--green-dark);
    }

    .nav-dropdown,
    .nav-dropdown-toggle {
        width: 100%;
    }

    .nav-dropdown-toggle {
        min-height: 48px;
        padding: 12px 18px;
        justify-content: space-between;
        border-radius: 10px;
        font-size: 16px;
    }

    .nav-dropdown.is-open .nav-dropdown-toggle {
        background: rgba(255, 255, 255, .08);
    }

    @media (hover: hover) {

    .nav-dropdown-toggle:hover {
        background: rgba(255, 255, 255, .08);
    }
    }

    .nav-menu .nav-dropdown-toggle.active {
        padding: 12px 18px;
        background: var(--yellow);
    }

    .nav-dropdown-menu {
        position: static;
        width: 100%;
        margin-top: 4px;
        padding: 4px 12px 8px;
        border: 0;
        background: rgba(0, 0, 0, .12);
        box-shadow: none;
        display: none;
        visibility: visible;
        opacity: 1;
        transform: none;
    }

    .nav-notifications-menu,
    .nav-notifications.is-open .nav-notifications-menu {
        right: auto;
        left: auto;
        transform: none;
    }

    .nav-dropdown.is-open .nav-dropdown-menu { display: block; }

    .nav-dropdown-menu a {
        min-height: 42px;
        padding: 9px 18px;
        color: var(--text-on-brand);
        font-size: 14px;
    }

    @media (hover: hover) {

    .nav-dropdown-menu a:hover {
        background: rgba(255, 255, 255, .08);
        color: var(--yellow);
    }
    }

    .nav-account-menu a {
        background: rgba(255, 255, 255, .08);
    }


    /* -----------------------------------------------------
       LANGUAGE
    ----------------------------------------------------- */

    .language {
        justify-content: flex-start;

        margin: 15px 0 0;
        padding: 15px 18px;

        border-top: 1px solid rgba(255, 255, 255, .15);
    }


    /* -----------------------------------------------------
       LOGIN
    ----------------------------------------------------- */

    .auth-button {
        width: 100%;
        min-width: 0;

        height: 50px;

        margin-top: 15px;

        border-radius: 30px;

        justify-content: center;

        font-size: 15px;
    }

    .navbar-account-actions { display:grid; width:100%; gap:10px; margin-left:0; }
    .navbar-account-actions > a,
    .navbar-account-actions > form,
    .navbar-account-actions .navbar-logout { width:100%; }
    .navbar-logout { height:50px; color:var(--text-on-brand); }


    /* -----------------------------------------------------
       FOOTER
    ----------------------------------------------------- */

    /* Phones: no footer on any page; the "more" sheet has its report link. */
    .site-footer {
        display: none;
    }

    .footer-top {
        flex-direction: column;

        gap: 15px;

        text-align: center;
    }

    .social {
        justify-content: center;
        flex-wrap: wrap;
    }

    .footer-right {
        font-size: 14px;
    }

    .footer-links {
        flex-wrap: wrap;

        gap: 8px 12px;

        font-size: 12px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;

        animation-duration: 0.01ms !important;

        animation-iteration-count: 1 !important;
    }
}


/* =========================================================
   BOTTOM TAB BAR (mobile only)
========================================================= */

.bottom-tabbar {
    display: none;
}

@media (max-width: 767px) {

    /* Room for the floating pill (64px + 10px gap above the home indicator) plus a little air. */
    body:has(.bottom-tabbar) {
        padding-bottom: calc(92px + env(safe-area-inset-bottom));
    }

    /* A frosted-glass pill floating over the page, matching the frosted app header. The active tab is a
       green pill with its label; the others are grey icons. The active pill grows (flex-grow) as it moves. */
    .bottom-tabbar {
        position: fixed;
        right: calc(12px + env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom));
        left: calc(12px + env(safe-area-inset-left));
        z-index: 1001; /* over page content (Leaflet controls, sticky map tabs reach 1000), under every modal (1500+) */

        display: flex;
        height: 64px;
        align-items: center;
        gap: 4px;

        padding: 8px;

        border: 1px solid var(--dark-glass-border, rgba(255, 255, 255, .6));
        border-radius: 32px;
        background: var(--dark-glass, rgba(255, 255, 255, .72));
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);
        box-shadow: 0 10px 30px rgba(7, 40, 32, .18);
    }

    :root[data-theme="dark"] .bottom-tabbar {
        border-color:rgba(255,255,255,.13);
        background:rgba(17,34,29,.86);
        box-shadow:0 -1px 0 rgba(255,255,255,.05), 0 12px 34px rgba(0,0,0,.38);
    }

    :root[data-theme="dark"] .bottom-tabbar a,
    :root[data-theme="dark"] .bottom-tabbar button { color:#aebdb7; }

    /* Invisible catch area filling the gaps between the pill and the screen edges, so a tap
       that misses the pill lands on the bar (and does nothing) instead of the page under it. */
    .bottom-tabbar::before {
        position: absolute;
        top: -8px;
        right: calc(-13px - env(safe-area-inset-right));
        bottom: calc(-11px - env(safe-area-inset-bottom));
        left: calc(-13px - env(safe-area-inset-left));
        z-index: -1;

        content: "";
    }

    .bottom-tabbar a,
    .bottom-tabbar button {
        position: relative;

        display: flex;
        flex: 1 1 0;
        height: 48px;
        align-items: center;
        justify-content: center;
        gap: 6px;

        min-width: 0;
        padding: 0 10px;

        border-radius: 24px;
        color: var(--sage-575);

        font-size: 13px;
        font-weight: 800;
        line-height: 1;

        text-decoration: none;

        -webkit-tap-highlight-color: transparent;
    }

    .bottom-tabbar .active,
    .bottom-tabbar-more[aria-expanded="true"] {
        flex-grow: 2.4;
        background: linear-gradient(135deg, var(--green), var(--green-dark));
        color: var(--text-on-brand);
        box-shadow: 0 4px 12px rgba(0, 84, 71, .3);
    }

    /* Once the tab bar's script runs, one sliding pill draws the green instead of each tab. */
    .bottom-tabbar.has-indicator .active,
    .bottom-tabbar.has-indicator .bottom-tabbar-more[aria-expanded="true"] {
        background: none;
        box-shadow: none;
    }

    .bottom-tabbar-indicator {
        position: absolute;
        top: 8px;
        left: 0;

        width: 0;
        height: 48px;

        border-radius: 24px;
        background: linear-gradient(135deg, var(--green), var(--green-dark));
        box-shadow: 0 4px 12px rgba(0, 84, 71, .3);

        opacity: 0;
        pointer-events: none;
        will-change: transform, width;
    }

    .bottom-tabbar a,
    .bottom-tabbar button {
        z-index: 1; /* over the sliding pill */
    }

    .bottom-tabbar svg {
        width: 22px;
        height: 22px;
        flex: none;

        fill: none;
        stroke: currentColor;
        stroke-width: 1.9;
        stroke-linecap: round;
        stroke-linejoin: round;
    }

    /* Labels only on the active pill; screen readers still get every label. */
    .bottom-tabbar span {
        max-width: 0;
        overflow: hidden;
        line-height: 1.6; /* overflow clips at the line box; 1 cuts Arabic descenders (the ج in البرامج) */
        opacity: 0;
        text-overflow: ellipsis;
        white-space: nowrap;
        transition: max-width .35s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
    }

    .bottom-tabbar .active span,
    .bottom-tabbar-more[aria-expanded="true"] span {
        max-width: 90px;
        opacity: 1;
    }

    /* While the "more" sheet is open, the current page's tab gives the pill back and collapses to its icon. */
    .bottom-tabbar:has(.bottom-tabbar-more[aria-expanded="true"]) .active:not(.bottom-tabbar-more) {
        flex-grow: 1;
        background: none;
        box-shadow: none;
        color: var(--sage-575);
    }

    .bottom-tabbar:has(.bottom-tabbar-more[aria-expanded="true"]) .active:not(.bottom-tabbar-more) span {
        max-width: 0;
        opacity: 0;
    }

    /* filter backdrops are trapped under the bar by .games-container's stacking context */
    body:has(.fields-filter-backdrop:not([hidden]), .programs-filter-backdrop:not([hidden]), .lb-filters-backdrop:not([hidden])) .bottom-tabbar {
        display: none;
    }
}


/* =========================================================
   APP BAR + MENU SHEET (phones only)
   One compact bar on every page. The !important flags beat the
   per-page header colours (home, games, programs, profile...).
   It may only carry a transform while hidden: a transform would
   make the fixed menu sheet inside it position against the bar.
========================================================= */

@media (max-width: 767px) {

    body:has(.site-header) {
        padding-top: calc(56px + env(safe-area-inset-top));
    }

    .site-header {
        position: fixed !important;
        top: 0;
        right: 0;
        left: 0;
        z-index: 1000 !important;

        min-height: 0 !important;
        height: calc(56px + env(safe-area-inset-top));

        padding: env(safe-area-inset-top) calc(14px + env(safe-area-inset-right)) 0 calc(14px + env(safe-area-inset-left)) !important;

        gap: 8px;

        background: var(--surface-page) !important;
        color: var(--text-primary) !important;
        box-shadow: none !important;

        transition: transform .2s ease, box-shadow .2s ease;
    }

    .site-header.is-scrolled {
        box-shadow: 0 2px 10px rgba(0, 0, 0, .1) !important;
    }

    .site-header.is-hidden {
        transform: translateY(-100%);
    }

    /* The transform would drag the fixed "more" sheet inside the header off-screen with it. */
    body.nav-open .site-header.is-hidden {
        transform: none;
        transition: none;
    }

    .site-header .logo-link {
        margin-inline-end: auto;
    }

    .site-header .logo {
        width: 60px;
    }

    .site-header .navbar-toggler {
        width: 40px;
        height: 40px;

        border: 1px solid rgba(23, 79, 69, .3) !important;
        border-radius: 12px;

        background: transparent !important;
        color: var(--text-primary) !important;
    }

    .site-header .navbar-toggler.is-open {
        border-color: var(--green-800) !important;
        background: var(--green-800) !important;
        color: var(--text-on-brand) !important;
    }

    /* The app header's bell and the tab bar cover these; the menu keeps what they don't. */
    .site-header .nav-notifications,
    body:has(.bottom-tabbar) .nav-menu .in-tabbar {
        display: none;
    }

    /* Menu: a bottom sheet over a dimmed page instead of a full-screen takeover. */
    .site-header::before {
        position: fixed;
        inset: 0;
        z-index: -1;

        background: rgba(0, 0, 0, .55);

        content: "";

        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    body.nav-open .site-header::before {
        opacity: 1;
        pointer-events: auto;
    }

    .nav-wrapper {
        top: auto !important;
        bottom: 0;

        height: auto !important;
        max-height: 85dvh;

        gap: 6px;

        padding: 22px calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)) !important;

        border-radius: 24px 24px 0 0;

        box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
    }

    .nav-wrapper.is-open {
        animation: sheet-up .22s ease-out;
    }

    .nav-wrapper .nav-wrapper-logo-link {
        display: none;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .site-header,
    .site-header::before,
    .nav-wrapper.is-open {
        transition: none;
        animation: none;
    }
}

/* Phones with the tab bar: the menu opens from its "more" tab, so the top
   hamburger goes and the sheet sits just above the (still usable) tab bar. */
@media (max-width: 767px) {
    .bottom-tabbar button {
        margin: 0;
        border: 0;
        background: none;
        font-family: inherit;
        cursor: pointer;
    }

    body:has(.bottom-tabbar) .site-header .navbar-toggler {
        display: none;
    }

    body:has(.bottom-tabbar) .nav-wrapper {
        bottom: calc(82px + env(safe-area-inset-bottom));
        max-height: calc(85dvh - 82px);
        padding-bottom: 20px !important;
    }
}

/* Phones: the "more" sheet is light like the app bar and tab bar, with its links
   grouped as one list card. !important beats the per-page dark menu colours. */
@media (max-width: 767px) {
    .site-header .nav-wrapper {
        gap: 12px;
        padding-top: 10px !important;
        background: var(--surface-page) !important;
    }

    .site-header .nav-wrapper::before {
        flex: none;
        width: 40px;
        height: 4px;
        margin: 0 auto 4px;
        border-radius: 2px;
        background: var(--sage-375);
        content: "";
    }

    .site-header .nav-menu {
        gap: 1px;
        overflow: hidden;
        border: 1px solid var(--sage-150);
        border-radius: 16px;
        background: var(--sage-150);
    }

    .site-header .nav-menu > a,
    .site-header .nav-menu .nav-dropdown {
        background: var(--surface) !important;
    }

    .site-header .nav-menu > a,
    .site-header .nav-menu .nav-dropdown-toggle {
        min-height: 52px;
        padding: 14px 16px !important;
        border-radius: 0;
        background: transparent !important;
        color: var(--text-primary) !important;
        font-size: 15px;
        font-weight: 700;
    }

    .site-header .nav-menu > a::after {
        margin-inline-start: auto;
        color: var(--sage-525);
        font-size: 20px;
        line-height: 1;
        content: "‹";
    }

    .site-header .nav-menu > a.active,
    .site-header .nav-menu .nav-dropdown-toggle.active {
        color: var(--dark-text, var(--green)) !important;
    }

    .site-header .nav-menu > a:active,
    .site-header .nav-menu .nav-dropdown-toggle:active {
        background: var(--surface-page) !important;
    }

    .site-header .nav-dropdown-arrow {
        color: var(--sage-525);
    }

    .site-header .nav-dropdown-menu {
        margin: 0;
        padding: 0 10px 10px;
        background: transparent;
    }

    .site-header .nav-dropdown-menu a {
        min-height: 46px;
        margin-top: 4px;
        border-radius: 12px;
        background: var(--surface-page) !important;
        color: var(--text-primary) !important;
        font-weight: 600;
    }

    .site-header .nav-dropdown-menu a:first-child {
        margin-top: 0;
    }

    .site-header .navbar-logout {
        height: 50px;
        border: 1px solid #f2d0cb !important;
        border-radius: 16px !important;
        background: var(--surface) !important;
        color: #d2473a !important;
        font-size: 15px;
        font-weight: 700;
    }

    .site-header .nav-wrapper .auth-button {
        margin-top: 0;
        border-radius: 16px;
    }
}

/* =========================================================
   MORE SHEET (phones with the tab bar, partials/more-sheet)
   Profile card, then grouped icon rows; replaces the navbar links in the sheet.
========================================================= */
.more-sheet { display:none; }

@media (max-width: 767px) {
    body:has(.bottom-tabbar) .site-header .nav-menu { display:none; }
    body:has(.bottom-tabbar) .more-sheet { display:grid; grid-auto-rows:max-content; gap:16px; overflow-y:auto; direction:rtl; }

    .more-profile { display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:linear-gradient(135deg, var(--green-dark), var(--green)); color:var(--text-on-brand); text-decoration:none; box-shadow:0 8px 20px rgba(0,84,71,.22); -webkit-tap-highlight-color:transparent; }
    .more-profile:active { transform:scale(.98); }
    .more-profile-avatar { display:grid; flex:none; width:52px; height:52px; overflow:hidden; place-items:center; border-radius:50%; background:var(--sage-150); box-shadow:0 0 0 2px #fff, 0 0 0 4px var(--yellow); }
    .more-profile-avatar img, .more-profile-avatar svg { width:100%; height:100%; object-fit:cover; }
    .more-profile-avatar svg { padding:10px; box-sizing:border-box; fill:rgba(0,84,71,.45); }
    .more-profile-text { display:grid; flex:1; min-width:0; line-height:1.4; }
    .more-profile-text strong { overflow:hidden; font-size:17px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
    .more-profile-text small { color:rgba(255,255,255,.8); font-size:13px; font-weight:600; }
    .more-profile::after { color:rgba(255,255,255,.7); font-size:22px; line-height:1; content:"‹"; }

    .more-group { display:grid; gap:1px; overflow:hidden; border:1px solid var(--sage-150); border-radius:16px; background:var(--sage-150); }
    .more-group h3 { margin:0; padding:10px 16px 6px; background:var(--surface-page); color:var(--sage-625); font-size:12px; font-weight:700; }
    .more-group a { display:flex; min-height:52px; align-items:center; gap:12px; padding:12px 16px; background:var(--surface); color:var(--text-primary); font-size:15px; font-weight:700; text-decoration:none; -webkit-tap-highlight-color:transparent; }
    .more-group a:active { background:var(--surface-page); }
    .more-group a.active { color:var(--dark-text, var(--green)); }
    .more-group a svg { flex:none; width:34px; height:34px; padding:7px; box-sizing:border-box; border-radius:10px; background:var(--sage-100); fill:none; stroke:var(--green); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .more-group a::after { margin-inline-start:auto; color:var(--sage-525); font-size:20px; line-height:1; content:"‹"; }
    .more-group a[data-open-report-menu] svg { background:var(--red-100); stroke:#d2473a; }
}

/* Phones without the tab bar (register pages): a white bar with a hairline once scrolled. */
@media (max-width: 767px) {
    .site-header {
        border-bottom: 1px solid transparent;
        background: var(--surface) !important;
    }

    .site-header.is-scrolled {
        border-bottom-color: var(--sage-150);
        box-shadow: none !important;
    }
}


/* =========================================================
   NATIVE BAR (phones)
   Solid white at the top; once content scrolls under it, it turns
   frosted like an iOS nav bar. The blur sits on ::after because a
   backdrop-filter on the header itself would trap the fixed menu sheet.
========================================================= */

@media (max-width: 767px) {

    .site-header.is-scrolled {
        background: transparent !important;
    }

    .site-header::after {
        content: "";

        position: absolute;
        inset: 0;
        z-index: -1;

        background: var(--dark-glass, rgba(255, 255, 255, .78));
        -webkit-backdrop-filter: saturate(180%) blur(20px);
        backdrop-filter: saturate(180%) blur(20px);

        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
    }

    .site-header.is-scrolled::after {
        opacity: 1;
    }

    /* Pages with the tab bar: the app header (partials/app-header, below) replaces this bar, so it stays
       invisible. Never display:none, because the "more" menu sheet lives inside it; home.js still
       sets .is-scrolled / .is-hidden on it, which the app header follows. */
    /* Room for the fixed app header at full height; it shrinks over the content, never moving it. */
    body:has(.bottom-tabbar) {
        padding-top: calc(100px + env(safe-area-inset-top));
    }

    body:has(.bottom-tabbar) .site-header {
        border-bottom: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        pointer-events: none; /* taps reach the page underneath */
    }

    body:has(.bottom-tabbar) .site-header::after,
    body:has(.bottom-tabbar) .site-header > :not(.nav-wrapper) {
        visibility: hidden;
    }

    body:has(.bottom-tabbar) .site-header .nav-wrapper,
    body.nav-open .site-header {
        pointer-events: auto;
    }
}

/* =========================================================
   APP HEADER (phones, partials/app-header.blade.php)
   iOS large-title style: round avatar, small greeting over a big name, bell
   in a soft circle, on the light page colour. Once scrolled it collapses to a
   thin frosted-glass bar; it hides while scrolling down and returns on scroll up.
========================================================= */

.app-header {
    display: none;
}

@media (max-width: 767px) {
    /* Fixed with set heights (100px full, 56px short) so scrolling never reflows the page; the body pads for it above.
       z-index 999: under the invisible app bar (1000) that holds the "more" sheet and its dimmer. */
    .app-header { position:fixed; top:0; right:0; left:0; z-index:999; display:flex; box-sizing:border-box; height:calc(100px + env(safe-area-inset-top)); align-items:center; gap:12px; padding:env(safe-area-inset-top) calc(16px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left)); border-bottom:1px solid transparent; background:var(--surface-page); color:var(--dark-text, var(--green-900)); --header-ease:.45s cubic-bezier(.2,.8,.2,1); transition:height var(--header-ease), transform var(--header-ease), background-color var(--header-ease), border-color var(--header-ease); will-change:transform; }
    body:has(.site-header.is-scrolled) .app-header { height:calc(56px + env(safe-area-inset-top)); border-bottom-color:var(--dark-glass-border, rgba(0,0,0,.06)); background:var(--dark-glass, rgba(247,246,242,.78)); -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
    body:has(.site-header.is-hidden) .app-header { transform:translateY(-100%); }
    .app-header-avatar { display:grid; flex:none; width:48px; height:48px; overflow:hidden; place-items:center; border-radius:50%; background:var(--sage-150); box-shadow:0 0 0 2px var(--surface-page), 0 0 0 4px var(--yellow); transform-origin:right center; transition:transform var(--header-ease); }
    .app-header-avatar img, .app-header-avatar svg { width:100%; height:100%; object-fit:cover; }
    .app-header-avatar svg { padding:9px; box-sizing:border-box; fill:rgba(0,84,71,.45); }
    .app-header-greeting { display:grid; flex:1; min-width:0; margin:0; line-height:1.3; }
    .app-header-greeting small { max-height:18px; overflow:hidden; color:var(--sage-625); font-size:13px; font-weight:600; transition:max-height var(--header-ease), opacity var(--header-ease); }
    .app-header-greeting strong { overflow:hidden; color:var(--dark-text, var(--green-900)); font-size:24px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; transform-origin:right center; transition:transform var(--header-ease); }
    .app-header-bell { position:relative; display:grid; flex:none; width:42px; height:42px; place-items:center; border-radius:50%; background:var(--surface); color:var(--dark-text, var(--green-dark)); box-shadow:0 2px 10px rgba(7,88,71,.1); transform-origin:left center; transition:transform var(--header-ease), box-shadow var(--header-ease); -webkit-tap-highlight-color:transparent; }
    .app-header-bell:active { transform:scale(.94); }
    body:has(.site-header.is-scrolled) .app-header-bell:active { transform:scale(.81); }
    .app-header-bell svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
    .app-header-bell span { position:absolute; top:-2px; left:-2px; min-width:18px; padding:0 4px; border:2px solid var(--surface-page); border-radius:10px; background:var(--red-275); color:var(--text-on-brand); font-size:10px; font-weight:800; line-height:14px; text-align:center; }
    body:has(.site-header.is-scrolled) .app-header-avatar { transform:scale(.71); }
    body:has(.site-header.is-scrolled) .app-header-greeting small { max-height:0; opacity:0; }
    body:has(.site-header.is-scrolled) .app-header-greeting strong { transform:scale(.71); }
    body:has(.site-header.is-scrolled) .app-header-bell { transform:scale(.86); box-shadow:none; }
    /* Page headings that only repeat the name the app header already shows. */
    .app-header-duplicate { display:none; }
}

@media (display-mode: standalone) {

    .bottom-tabbar {
        -webkit-touch-callout: none;
        user-select: none;
    }
}

/* Pull-to-refresh spinner for the iOS home-screen app (js/pull-to-refresh.js): an iOS activity
   indicator whose spokes the script reveals as you pull, then spins while the page refreshes. */
.pull-refresh {
    position: fixed;
    top: calc(12px + env(safe-area-inset-top));
    left: 50%;
    z-index: 1002;
    width: 26px;
    height: 26px;
    color: #8e8e93;
    transform: translateX(-50%);
    pointer-events: none;
}

.pull-refresh svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

/* Fading tail like UIActivityIndicatorView; steps() makes it tick rather than glide. */
.pull-refresh.is-loading svg {
    animation: pull-refresh-spin .8s steps(8) infinite;
}

.pull-refresh.is-loading line:nth-child(1) { opacity: 1; }
.pull-refresh.is-loading line:nth-child(2) { opacity: .3; }
.pull-refresh.is-loading line:nth-child(3) { opacity: .35; }
.pull-refresh.is-loading line:nth-child(4) { opacity: .4; }
.pull-refresh.is-loading line:nth-child(5) { opacity: .5; }
.pull-refresh.is-loading line:nth-child(6) { opacity: .6; }
.pull-refresh.is-loading line:nth-child(7) { opacity: .75; }
.pull-refresh.is-loading line:nth-child(8) { opacity: .9; }

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

/* The gap the page is pulled down by, under the fixed header: follows the finger (--pull-gap, set by
   js/pull-to-refresh.js), then eases to the loading height or back to 0 on release. */
body.is-pulling::before {
    content: '';
    display: block;
    height: var(--pull-gap, 0px);
}

body.pull-settling::before {
    transition: height .25s ease-out;
}

body.pull-settling .pull-refresh {
    transition: top .25s ease-out, opacity .25s ease-out;
}

/* Right-edge swipe-back arrow for the iOS home-screen app (js/swipe-back.js). */
.swipe-back {
    position: fixed;
    right: -44px;
    z-index: 1002;

    display: grid;
    width: 38px;
    height: 38px;
    place-items: center;

    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 3px 12px rgba(0, 0, 0, .18);
    color: var(--sage-575);
    pointer-events: none;
}

.swipe-back.is-ready {
    background: var(--green);
    color: var(--text-on-brand);
}

.swipe-back svg {
    width: 20px;
    height: 20px;

    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Next-page skeleton (js/page-skeleton.js). On phones it sits between the app bar and the
   tab bar so both stay usable, and is shown only until the next page replaces this one. */
.page-skeleton {
    position: fixed;
    inset: 0;
    z-index: 899; /* under the tab bar (1001) and app bar (1000) */

    display: grid;
    align-content: start;
    gap: 14px;

    padding: calc(18px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 18px calc(16px + env(safe-area-inset-left));
    overflow: hidden;

    background: var(--surface-page); /* no fade-in: it should be there the moment the link is tapped */
}

@media (max-width: 767px) {
    body:has(.site-header) .page-skeleton {
        top: calc(56px + env(safe-area-inset-top));
        padding-top: 18px;
    }

    /* Starts right under the app header, whatever size it is at. */
    body:has(.app-header) .page-skeleton {
        top: calc(100px + env(safe-area-inset-top));
    }

    body:has(.site-header.is-scrolled) .page-skeleton {
        top: calc(56px + env(safe-area-inset-top));
    }

    body:has(.site-header.is-hidden) .page-skeleton {
        top: 0;
        padding-top: calc(18px + env(safe-area-inset-top));
    }

    body:has(.bottom-tabbar) .page-skeleton {
        bottom: 0; /* the floating tab bar sits over it */
    }
}

/* Desktop: under the (non-fixed) header, same width as .page-container, cards side by side. */
@media (min-width: 768px) {
    .page-skeleton {
        top: 95px;
        padding: 28px max(50px, calc((100% - 1340px) / 2));
    }

    .page-skeleton.is-cards { grid-template-columns: repeat(3, 1fr); }
    .page-skeleton.is-cards .sk-pill { grid-column: 1 / -1; width: 240px; }
    .page-skeleton .sk-title { width: 30%; }
    .page-skeleton .sk-hero { height: 360px; }
}

/* Turbo tab visits use the skeleton above; Turbo's own top progress bar would double it. */
.turbo-progress-bar {
    display: none;
}

.page-skeleton i,
.page-skeleton .sk-card {
    display: block;
    border-radius: 12px;
    background: linear-gradient(90deg, var(--sage-150) 25%, var(--surface-page) 50%, var(--sage-150) 75%) 0 0 / 200% 100%;
}

.page-skeleton .sk-card {
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: var(--surface);
}

.page-skeleton .sk-line { height: 12px; }
.page-skeleton .sk-line:nth-of-type(2n) { width: 65%; }
.page-skeleton .sk-title { width: 45%; height: 22px; }
.page-skeleton .sk-pill { width: 40%; height: 34px; border-radius: 17px; }
.page-skeleton .sk-block { height: 140px; border-radius: 16px; }
.page-skeleton .sk-hero { height: 220px; }

.page-skeleton .sk-row {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    align-items: center;
}

.page-skeleton .sk-row > div {
    display: grid;
    gap: 8px;
}

.page-skeleton .sk-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

@media (prefers-reduced-motion: no-preference) {
    .page-skeleton i {
        animation: page-skeleton-shimmer 1.2s linear infinite;
    }
}

@keyframes page-skeleton-shimmer {
    to { background-position: -200% 0; }
}


@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {

    .bottom-tabbar a,
    .bottom-tabbar button {
        transition: transform .12s ease, flex-grow .35s cubic-bezier(.2, .8, .2, 1), background-color .25s ease, color .25s ease;
    }

    .bottom-tabbar a:active,
    .bottom-tabbar button:active {
        transform: scale(.9);
    }
}

/* Menu items that only exist in the phone menu (e.g. report a problem, since the homepage hides its footer there). */
@media (min-width: 768px) {
    .nav-menu .nav-mobile-only { display:none; }
}

/* =========================================================
   PRELOADER (phones, partials/layouts/preloader.blade.php)
   Logo on the app header gradient with a sliding bar; fades out on page load.
========================================================= */

.app-preloader {
    position: fixed;
    inset: 0;
    z-index: 5000;

    display: grid;
    place-content: center;
    justify-items: center;
    gap: 22px;

    background: radial-gradient(120% 80% at 50% 110%, var(--green) 0%, var(--green-dark) 60%);

    transition: opacity .45s ease, visibility .45s;
}

.app-preloader[hidden] {
    display: none;
}

.app-preloader.is-done {
    opacity: 0;
    visibility: hidden;
}

.app-preloader img {
    width: 110px;
    height: auto;

    animation: app-preloader-pulse 1.4s ease-in-out infinite;
}

.app-preloader-bar {
    width: 72px;
    height: 4px;
    overflow: hidden;

    direction: ltr; /* the slide keyframes are written left to right */
    border-radius: 2px;
    background: rgba(255, 255, 255, .2);
}

.app-preloader-bar i {
    display: block;
    width: 40%;
    height: 100%;

    border-radius: inherit;
    background: var(--yellow);

    animation: app-preloader-slide 1s ease-in-out infinite;
}

@keyframes app-preloader-pulse {
    50% { transform: scale(1.06); }
}

@keyframes app-preloader-slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(250%); }
}

@media (prefers-reduced-motion: reduce) {
    .app-preloader img,
    .app-preloader-bar i {
        animation: none;
    }
}

/* Source: home.css */
/* =========================================================
           GLOBAL
        ========================================================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        html {
            scroll-behavior: smooth;
        }

        body {
            font-family: 'Cairo', sans-serif;
            background: var(--surface-page);
            color: var(--text-primary);
            overflow-x: hidden;
        }

        .welcome-bottom {
            margin-top: 100px;
        }

        .welcome-bottom > .map-section-title {
            margin: 0;
        }

        .welcome-page .map-section { padding-top: 55px; }

        /* =========================================================
           HERO
        ========================================================= */

        .hero {
            min-height: 700px;
            position: relative;
            background: var(--surface-page);
            overflow: hidden;
        }

        .home-page .site-header {
            background: var(--surface-page);
            color: var(--text-primary);
            box-shadow: 0 2px 5px rgba(0, 0, 0, .12);
        }

        .home-page .nav-menu a,
        .home-page .language {
            color: var(--text-primary);
        }

        .home-page .nav-menu .active {
            background: var(--yellow);
            color: var(--green-800);
        }

        @media (hover: hover) {

        .home-page .nav-menu .active:hover {
            background: var(--yellow);
            color: var(--green-800);
        }
}

        .home-page .navbar-toggler {
            border-color: rgba(23, 79, 69, .5);
            color: var(--text-primary);
        }

        .home-page .navbar-toggler.is-open {
            border-color: var(--green-800);
            background: var(--green-800);
            color: var(--text-on-brand);
        }

        @media (max-width: 767px) {
            .home-page .nav-wrapper {
                background: var(--green-dark);
            }

            .home-page .nav-wrapper .nav-menu a,
            .home-page .nav-wrapper .nav-menu .active {
                color: var(--text-on-brand);
            }

            .home-page .nav-wrapper .nav-menu .active {
                background: var(--yellow);
                color: var(--green-dark);
            }
        }

        .hero--banner {
            margin-top: 0;
            padding: 0;
            background-color: var(--surface-page);
            isolation: isolate;
        }

        .hero--banner::before {
            position: absolute;
            z-index: 0;
            inset: 0;
            content: "";
            pointer-events: none;
            background-image: url("/images/banner.svg");
            background-repeat: no-repeat;
            background-position: top center;
            background-size: 100% auto;
        }

        .hero--banner .hero-inner,
        .hero--banner .hero-sub-banner {
            position: relative;
            z-index: 1;
            pointer-events: none;
        }

        .hero--banner .hero-content,
        .hero--banner .hero-buttons {
            position: relative;
            z-index: 2;
        }

        .hero-composite {
            height: min(72vw, 900px);
            min-height: 0;
            margin: 0;
            background: var(--surface-page);
            overflow: hidden;
        }

        .hero-composite-image {
            display: block;
            width: 100%;
            height: auto;
        }

        .hero-composite .hero-buttons {
            position: absolute;
            z-index: 2;
            top: 40%;
            right: 8%;
            display: flex;
            gap: 12px;
            direction: ltr;
        }

        @media (max-width: 992px) {
            .hero-composite {
                height: 76vw;
            }

            .hero-composite .hero-buttons {
                top: 25%;
                right: 8%;
                gap: 6px;
                flex-wrap: nowrap;
            }

            .hero-composite .hero-buttons .btn-primary-custom,
            .hero-composite .hero-buttons .btn-secondary-custom {
                width: 96px;
                min-width: 96px;
                height: 26px;
                padding: 0;
                font-size: 8px;
                line-height: 1;
            }
        }

        @media (max-width: 600px) {
            .hero-composite {
                height: 82vw;
            }
        }

        .hero-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 700px;
            padding: 80px 0;
        }

        .hero-content {
            width: 100%;
            position: relative;
            z-index: 1;
        }

        .hero-content h1 {
            font-size: 64px;
            font-weight: 800;
            color: var(--dark-text, #1d564d);
            margin-bottom: 20px;
        }

        .hero-content p {
            font-size: 22px;
            line-height: 1.8;
            color: var(--gray-725);
            margin-bottom: 30px;
        }

        .hero-buttons {
            display: flex;
            gap: 15px;
            flex-wrap: wrap;
        }

        .hero-full-image {
            display: block;
            width: 100%;
            height: auto;
        }

        .hero-full {
            min-height: 0;
        }

        .hero-full .hero-buttons {
            position: absolute;
            z-index: 1;
            top: 27%;
            right: 8%;
            width: 35%;
            justify-content: center;
        }

        @media (max-width: 767px) {
            .hero-full .hero-buttons {
                width: 44%;
                gap: 5px;
                flex-direction: row;
                flex-wrap: nowrap;
            }

            .hero-full .btn-primary-custom,
            .hero-full .btn-secondary-custom {
                min-width: 0;
                padding: 4px 8px;
                font-size: 8px;
                white-space: nowrap;
            }
        }

        .btn-primary-custom {
            background: var(--orange-625);
            color: var(--text-on-brand);
            border: none;
            padding: 14px 35px;
            border-radius: 40px;
            font-family: 'Cairo', sans-serif;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s ease;
        }

        @media (hover: hover) {

        .btn-primary-custom:hover {
            background: #d9570e;
            color: var(--text-on-brand);
            transform: translateY(-2px);
        }
}

        .btn-secondary-custom {
            background: var(--surface);
            border: 2px solid var(--green-775);
            color: var(--dark-text, var(--green-775));
            padding: 12px 35px;
            border-radius: 40px;
            font-family: 'Cairo', sans-serif;
            font-weight: 600;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: 0.2s ease;
        }

        @media (hover: hover) {

        .btn-secondary-custom:hover {
            background: var(--green-775);
            color: var(--text-on-brand);
        }
}

        .btn-calendar-custom {
            gap: 10px;
            justify-content: center;
        }

        .hero-row-break {
            flex-basis: 100% !important;
            width: 0;
            height: 0;
        }

        .sponsors-hero-buttons,
        .hero-composite .hero-buttons,
        .hero--banner .hero-buttons,
        .hero-full .hero-buttons {
            flex-wrap: wrap !important;
            row-gap: 8px;
        }

        .btn-calendar-icon {
            display: grid;
            width: 28px;
            height: 28px;
            place-items: center;
            border: 2px solid currentColor;
            border-radius: 50%;
        }

        .btn-calendar-icon svg {
            width: 15px;
            height: 15px;
        }

        .home-calendar-modal .booking-dialog {
            width: min(820px, 100%);
        }

        .home-calendar-modal .booking-calendar-days > button {
            min-height: 64px;
        }

        .hero-image {
            width: 50%;
        }

        .hero-image img {
            display: block;
            width: 100%;
            object-fit: contain;
        }

        .hero-image .hero-banner {
            max-height: 560px;
        }

        .hero-sub-banner-frame {
            position: relative;
            z-index: 3;
            width: 100%;
            height: min(36vw, 520px);
            margin-top: -60px;
            line-height: 0;
            overflow: hidden;
        }

        .hero-sub-banner {
            display: block;
            width: 100%;
            margin-top: 0;
            transform: translateY(-16%);
        }

        @media (min-width: 993px) {
            .hero-inner {
                padding-bottom: 0;
            }

            .hero-image {
                align-self: flex-end;
            }

            .hero-sub-banner-frame {
                margin-top: -60px;
            }
        }

        /* =========================================================
           UNLEASH
        ========================================================= */

        .unleash {
            background: #04543f;
            padding: 80px 20px;
            color: var(--text-on-brand);
            text-align: center;
        }

        .unleash h2 {
            font-size: 72px;
            font-weight: 800;
            color: #ffd228;
            margin-bottom: 5px;
        }

        .unleash h3 {
            font-size: 40px;
            font-weight: 700;
            margin: 0;
        }

        /* =========================================================
           PROGRAM
        ========================================================= */

        .program {
            position: relative;
            padding: 100px 0 35px;
            text-align: center;
            overflow: hidden;
        }



        .program::after {
            position: absolute;
            right: 0;
            bottom: -35px;
            z-index: 0;
            width: clamp(125px, 16vw, 210px);
            height: clamp(280px, 34vw, 460px);
            background: url('/leaf.png') right bottom / contain no-repeat;
            content: "";
            pointer-events: none;
        }

        .program > .container { position:relative; z-index:1; }

        .program-manifesto {
            display: grid;
            justify-items: center;
            gap: 2px;
            margin: 0 auto 34px;
            color: var(--text-primary);
            line-height: 1.25;
            text-align: center;
        }

        .program-manifesto strong {
            color: var(--text-primary);
            font-size: 42px;
            font-weight: 800;
        }

        .program-star {
            position: absolute;
            z-index: 0;
            display: block;
            height: auto;
            pointer-events: none;
            user-select: none;
        }

        .program-star-orange {
            top: 35px;
            right: -8px;
            width: clamp(105px, 11vw, 163px);
        }

        .program-star-green {
            top: 255px;
            left: -5px;
            width: clamp(90px, 10vw, 145px);
        }

        .program-slider {
            position: relative;
            width: min(1050px, 100%);
            height: 400px;
            margin: 0 auto 38px;
            overflow: visible;
            touch-action: pan-y;
            user-select: none;
            cursor: grab;
        }

        .program-slider.is-dragging { cursor:grabbing; }
        .program-slider img { -webkit-user-drag:none; pointer-events:none; }

        .program-slider::after { position:absolute; top:-58px; left:calc(50% - 230px); z-index:6; width:84px; height:95px; background:url('/images/strokes.png') center/contain no-repeat; content:""; pointer-events:none; }

        .program-slider-wrap {
            position: relative;
            overflow: hidden;
            padding: 25px 0 5px;
        }

        .program-curved-separator {
            display: block;
            width: min(596px, 90%);
            height: auto;
            margin: 40px auto 20px;
        }

        .program-slider-controls {
            display: flex;
            width: 100%;
            justify-content: center;
            gap: 8px;
        }

        .program-slider-control {
            width: 36px;
            height: 36px;
            flex: 0 0 auto;
            border: 1px solid var(--sage-525);
            border-radius: 50%;
            background: var(--surface);
            color: var(--text-primary);
            cursor: pointer;
            font-size: 26px;
            line-height: 1;
        }

        .program-card {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 320px;
            height: 320px;
            box-sizing: border-box;
            border-radius: 16px;
            border: 2px solid transparent;
            overflow: hidden;
            background: var(--surface);
            box-shadow: 0 10px 22px rgba(0, 0, 0, .2);
            opacity: 0;
            transform: translate(-50%, -50%) scale(.7);
            transform-origin: center;
            transition: transform .5s cubic-bezier(.22,.75,.25,1), opacity .4s ease, box-shadow .5s ease;
            will-change: transform, opacity;
        }

        .program-card[data-position="-2"] { z-index:1; opacity:0; pointer-events:none; width:380px; height:240px; transform:translate(calc(-50% - 460px), calc(-50% + 25px)) rotate(9deg) scale(.9); }
        .program-card[data-position="-1"] { z-index:2; opacity:1; width:380px; height:240px; border-color:#8fc7f0; transform:translate(calc(-50% - 250px), -50%) rotate(9deg) scale(.78); }
        .program-card[data-position="0"] { z-index:5; opacity:1; border-width:3px; border-color:#4a8f7c; transform:translate(-50%,-50%); box-shadow:0 18px 35px rgba(0,0,0,.3); }
        .program-card[data-position="1"] { z-index:3; opacity:1; width:380px; height:240px; border-color:var(--yellow-425); transform:translate(calc(-50% + 250px), -50%) rotate(-9deg) scale(.78); }
        .program-card[data-position="2"] { z-index:1; opacity:0; pointer-events:none; width:380px; height:240px; transform:translate(calc(-50% + 460px), calc(-50% + 25px)) rotate(-9deg) scale(.9); }
        .program-card:not([data-position="0"]) { cursor:pointer; }
        .program-card:focus-visible { outline:4px solid var(--yellow); outline-offset:5px; }

        @media (max-width: 900px) {
            .program-slider { height:340px; transform:scale(.82); transform-origin:top center; width:120%; margin-inline:-10%; margin-bottom:-40px; }
        }

        @media (max-width: 600px) {
            .program-manifesto { margin-bottom: 20px; }
            .program-slider-wrap { padding-top:10px; }
            .program-slider { width:175%; height:315px; margin-inline:-37.5%; margin-bottom:-85px; transform:scale(.66); }
        }

        .program h2 {
            font-size: 42px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 10px;
        }

        .program h3 {
            color: #b8a77f;
            font-size: 26px;
            margin: 0;
        }

        .program .program-national-talent {
            display: grid;
            width: min(560px, 92%);
            justify-items: stretch;
            gap: 4px;
            margin: 8px auto 8px;
            color: var(--green-800);
            font-size: clamp(34px, 4.2vw, 58px);
            font-weight: 500;
            line-height: 1.15;
        }

        .program-national-talent span {
            display: block;
            padding: 0 clamp(20px, 4vw, 48px) 5px;
            background: var(--green-light);
        }

        .program-national-talent[data-color="blue"] span { background: #8fc7f0; }
        .program-national-talent[data-color="yellow"] span { background: var(--yellow-425); }

        .program-national-talent span:first-child {
            clip-path: polygon(1% 10%, 99% 0, 100% 92%, 0 100%);
        }

        .program-national-talent span:last-child {
            clip-path: polygon(0 0, 100% 8%, 99% 100%, 1% 90%);
        }

        /* =========================================================
           PARTNERS
        ========================================================= */

        .partners {
            position: relative;
            padding: 35px 0 100px;
            overflow: hidden;
        }

        .partners::after {
            position: absolute;
            right: -18px;
            bottom: -105px;
            z-index: 0;
            width: clamp(130px, 14vw, 195px);
            height: clamp(245px, 27vw, 370px);
            background: url('/blueLeaf.png') right bottom / contain no-repeat;
            content: "";
            pointer-events: none;
        }

        .partners > .container {
            position: relative;
            z-index: 1;
            width: min(1320px, calc(100% - 48px));
            padding: 28px clamp(36px, 7vw, 110px) 48px;
            border: 1px solid rgba(18, 78, 70, .04);
            border-radius: 64px;
            background: var(--surface-page);
            box-shadow: 0 4px 22px rgba(20, 55, 48, .12);
        }

        .section-title {
            text-align: center;
            font-size: 54px;
            font-weight: 800;
            color: var(--text-primary);
            margin-bottom: 60px;
        }

        .partners .section-title { margin-top: 0; }

        .partner-group {
            margin-bottom: 42px;
        }

        .partner-group:last-child { margin-bottom: 0; }

        .partner-group > img {
            display: block;
            width: 100%;
            height: auto;
            object-fit: contain;
        }

        :root[data-theme="dark"] .partners > .container {
            background: #eef3f0;
            box-shadow: inset 0 0 0 1px rgba(255,255,255,.45), 0 18px 50px rgba(0,0,0,.2);
        }
        :root[data-theme="dark"] .partners .section-title { color:#174f43; }

        /* The logo artwork is designed for white. Keep one restrained light gallery instead of
           turning every logo row into a separate bright strip. */
        :root[data-theme="dark"] .partner-group > img {
            padding: 10px 20px;
            background: transparent;
        }

        @media (max-width: 600px) {
            .partners > .container { width:calc(100% - 24px); padding:26px 16px 34px; border-radius:32px; }
            .partners::after { right:-18px; bottom:-48px; width:86px; height:165px; opacity:.9; }
            .partners .section-title { margin-bottom:34px; font-size:36px; }
            .partner-group { margin-bottom:32px; }
        }

        .partner-group h4 {
            display: block;
            width: fit-content;
            background: var(--orange-625);
            color: var(--text-on-brand);
            min-width: 150px;
            padding: 8px 20px;
            margin: 0 auto 24px;
            border-radius: 4px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .14);
            font-size: 16px;
            font-weight: 700;
            text-align: center;
        }

        .logo-grid {
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 30px;
        }

        .logo-box {
            height: 100px;
            background: var(--surface);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        }

        .logo-box img {
            max-width: 80%;
            max-height: 70px;
            object-fit: contain;
        }

        /* =========================================================
           CTA
        ========================================================= */

        .cta-banner {
            background: var(--orange-625);
            padding: 80px 0;
            color: var(--text-on-brand);
            overflow: hidden;
        }

        .cta-image-crop {
            position: relative;
            width: 100%;
            aspect-ratio: 2161 / 1501;
        }

        .cta-full-image {
            display: block;
            width: 100%;
            height: auto;
        }

        .cta-field-link {
            position: absolute;
            top: 64.5%;
            left: 67.5%;
            z-index: 2;
            display: block;
            width: 31.5%;
            height: 15.5%;
            cursor: pointer;
        }

        /* Copy over the CTA artwork; cqw keeps it locked to the image's scale. */
        .cta-image-crop {
            container-type: inline-size;
        }

        .cta-copy-title,
        .cta-copy-list {
            position: absolute;
            z-index: 1;
            margin: 0;
            padding: 0;
            direction: rtl;
            text-align: right;
            color: #2b483e;
            font-family: "Cairo", sans-serif;
            font-weight: 400;
        }

        .cta-copy-title {
            top: 25.9%;
            right: 5.7%;
            font-size: 4.5cqw;
            line-height: 5.32cqw;
        }

        .cta-copy-title span {
            display: block;
        }

        .cta-copy-title span + span {
            font-size: 4.8cqw;
        }

        .cta-copy-list {
            top: 44.8%;
            right: 10.1%;
            list-style: none;
            font-size: 2.5cqw;
            line-height: 5.86cqw;
        }

        .cta-field-label {
            position: absolute;
            top: 68.8%;
            right: 29.1%;
            color: #fff;
            font-family: "Cairo", sans-serif;
            font-size: 2cqw;
            line-height: 1;
            white-space: nowrap;
        }

        .cta-field-link:focus-visible {
            outline: 4px solid var(--surface);
            outline-offset: 3px;
        }

        .cta-content {
            display: flex;
            align-items: center;
            gap: 40px;
        }

        .cta-image {
            width: 35%;
        }

        .cta-image img {
            width: 100%;
            max-height: 450px;
            object-fit: contain;
        }

        .cta-text {
            width: 65%;
        }

        .cta-text h2 {
            font-size: 50px;
            font-weight: 800;
            margin-bottom: 25px;
        }

        .cta-text ul {
            list-style: none;
            padding: 0;
            margin: 0 0 30px;
        }

        .cta-text li {
            margin-bottom: 15px;
            font-size: 22px;
        }

        .cta-text li::before {
            content: "✓";
            margin-left: 10px;
            font-weight: 800;
        }

        .cta-text .btn-secondary-custom {
            background: var(--surface);
            border-color: var(--surface);
            color: var(--dark-text, var(--green-775));
        }

        @media (hover: hover) {

        .cta-text .btn-secondary-custom:hover {
            background: var(--green-775);
            border-color: var(--green-775);
            color: var(--text-on-brand);
        }
}

        /* =========================================================
           FIELDS
        ========================================================= */

        .fields {
            position: relative;
            padding: 100px 0;
            overflow: hidden;
        }

        .fields::before {
            position: absolute;
            top: 0;
            left: 16px;
            z-index: 0;
            width: clamp(180px, 15.75vw, 207px);
            aspect-ratio: 207 / 517;
            content: "";
            background: url("/images/greenStarPrograms.png") top left / contain no-repeat;
            pointer-events: none;
        }

        .fields > .container {
            position: relative;
            z-index: 1;
        }

        .fields h2 {
            position: relative;
            width: fit-content;
            margin: 0 auto 60px;
            text-align: center;
            font-size: 54px;
            font-weight: 800;
            color: var(--text-primary);
        }

        .fields h2::before,
        .fields h2::after {
            position: absolute;
            width: 38px;
            height: 30px;
            content: "";
            background-position: center;
            background-repeat: no-repeat;
            background-size: contain;
            pointer-events: none;
        }

        .fields h2::before {
            top: -40px;
            left: -80px;
            background-image: url("/images/programsVector.png");
        }

        .fields h2::after {
            right: -80px;
            bottom: -25px;
            background-image: url("/images/programsVectorDown.png");
        }

        .fields-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 25px;
        }

        .field-card {
            position: relative;
            padding: 14px;
            border: 2px solid var(--orange);
            border-radius: 28px;
            background: var(--surface) !important;
            overflow: hidden;
            box-shadow: 0 8px 0 rgba(0, 0, 0, .2);
        }

        .program-preview-points {
            position: absolute;
            top: 27px;
            right: 27px;
            z-index: 2;
            display: inline-flex;
            min-height: 32px;
            align-items: center;
            justify-content: center;
            padding: 5px 13px;
            border-radius: 999px;
            background: var(--orange);
            color: var(--text-on-brand);
            box-shadow: 0 4px 10px rgba(0, 0, 0, .2);
            font-size: 12px;
            font-weight: 800;
        }

        .field-card img {
            width: 100%;
            height: 210px;
            border-radius: 16px;
            object-fit: cover;
        }

        .field-body {
            padding: 14px 0 0;
            background: var(--surface);
        }

        .field-body h3 {
            margin: 0 0 12px;
            color: var(--dark-text, #00a558);
            font-size: 20px;
            font-weight: 700;
            text-align: center;
        }

        .field-detail,
        .field-durations span {
            display: flex;
            align-items: center;
            justify-content: space-between;
            min-height: 38px;
            margin-bottom: 9px;
            padding: 6px 12px;
            border-radius: 10px;
            background: var(--green-50);
            color: var(--dark-text, var(--green-550));
            font-size: 14px;
        }

        .field-detail {
            direction: ltr;
        }

        .field-detail span:last-child,
        .field-detail a:last-child {
            direction: rtl;
        }

        .field-detail .field-detail-icon {
            color: #5a9fff;
            font-size: 21px;
        }

        .field-detail-icon svg {
            display: block;
            width: 22px;
            height: 22px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        .field-durations {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr 40px;
            gap: 8px;
        }

        .field-durations span {
            justify-content: center;
            padding: 4px;
        }

        .field-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
            color: var(--text-on-brand);
            width: 100%;
            margin-top: 14px;
            padding: 12px;
            border: 1px solid var(--surface);
            border-radius: 30px;
            background: var(--orange);
            box-shadow: 0 4px 0 var(--surface);
            font-weight: 800;
            text-decoration: none;
            direction: ltr;
        }

        @media (hover: hover) {

        .field-btn:hover {
            background: #d9500f;
            color: var(--text-on-brand);
        }
}

        .field-btn span {
            display: grid;
            width: 34px;
            height: 34px;
            place-items: center;
            border-radius: 50%;
            background: var(--green-150);
            font-size: 22px;
        }

        .field-btn span svg {
            width: 19px;
            height: 19px;
            fill: none;
            stroke: var(--text-on-brand);
            stroke-width: 2.2;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* =========================================================
           MAP
        ========================================================= */

        .map-section {
            padding: 100px 0;
            background: var(--surface-page);
        }

        .map-section-title {
            margin: 0 auto 55px;
            padding-inline: 20px;
            color: var(--text-primary);
            font-size: clamp(34px, 4vw, 54px);
            font-weight: 800;
            line-height: 1.35;
            text-align: center;
        }

        .mobile-map-tabs { display:none; }

        .map-layout { display:grid; grid-template-columns: .8fr 1.2fr; gap:35px; align-items:center; direction:ltr; }
        .map-layout .featured-field { direction:rtl; }
        /* Let the long field name ellipsize instead of widening its column and squeezing the map. */
        .map-layout > * { min-width:0; }

        .map-wrapper {
            position:relative;
            min-height:520px;
            border:3px solid var(--surface);
            border-radius:18px;
            overflow:hidden;
        }

        .map-fullscreen-control { position:absolute; top:12px; right:12px; z-index:1000; display:grid; width:42px; height:42px; padding:0; place-items:center; border:2px solid rgba(0,0,0,.2); border-radius:8px; background:var(--surface); color:var(--text-primary); box-shadow:0 2px 8px rgba(0,0,0,.22); cursor:pointer; }
        @media (hover: hover) {
        .map-fullscreen-control:hover { background:var(--surface-page); }
}
        .map-fullscreen-control svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
        .map-tools { position:absolute; top:12px; left:56px; z-index:1000; display:flex; max-width:calc(100% - 120px); flex-wrap:wrap; gap:6px; direction:rtl; }
        .map-tools select,.map-tools button { min-height:38px; padding:7px 12px; border:1px solid rgba(0,0,0,.2); border-radius:8px; background:var(--surface); color:var(--text-primary); box-shadow:0 2px 7px rgba(0,0,0,.16); font:inherit; font-size:11px; font-weight:800; cursor:pointer; }
        .map-tools .map-tool-icon { display:grid; width:40px; min-width:40px; padding:0; place-items:center; }
        .map-tool-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
        .map-layer-street-icon { display:none; }
        .map-tool-icon[aria-pressed="true"] .map-layer-satellite-icon { display:none; }
        .map-tool-icon[aria-pressed="true"] .map-layer-street-icon { display:block; }
        .map-tools button[aria-pressed="true"] { background:var(--green-800); color:var(--text-on-brand); }
        .map-tools button:disabled { cursor:wait; opacity:.65; }
        .map-tools-status { align-self:center; padding:5px 9px; border-radius:999px; background:rgba(255,255,255,.9); color:var(--text-primary); font-size:10px; font-weight:800; }
        .map-tools-status:empty { display:none; }
        .map-wrapper:fullscreen { width:100vw; height:100vh; border:0; border-radius:0; background:var(--surface); }
        .map-wrapper:fullscreen .map-image { width:100%; height:100vh; }
        .map-wrapper:fullscreen .map-fullscreen-control svg { transform:rotate(180deg); }
        /* CSS fullscreen where the Fullscreen API is missing (iPhone Safari); see home.js. Above the
           app bar (1000), below the field/program sheets (2000) so markers can still open them. */
        .map-wrapper.is-pseudo-fullscreen { position:fixed; inset:0; z-index:1500; width:auto; height:100dvh !important; min-height:0 !important; border:0 !important; border-radius:0 !important; background:var(--surface); }
        .map-wrapper.is-pseudo-fullscreen .map-image { width:100%; height:100% !important; min-height:0 !important; }
        .map-wrapper.is-pseudo-fullscreen .map-fullscreen-control svg { transform:rotate(180deg); }
        .map-wrapper.is-pseudo-fullscreen .map-fullscreen-control,
        .map-wrapper.is-pseudo-fullscreen .map-tools { top:calc(10px + env(safe-area-inset-top)) !important; }
        html.map-pseudo-fullscreen-open,
        html.map-pseudo-fullscreen-open body { overflow:hidden; }

        .featured-field {
            padding:0;
            background:transparent;
            color:var(--text-on-brand);
        }

        .featured-field-media { position:relative; padding:clamp(24px,2.5vw,32px) clamp(28px,6.5vw,42px) clamp(8px,1vw,12px) 0; }
        .featured-field-media > .featured-field-vector { position:absolute; right:-50px; bottom:8px; z-index:0; display:block; width:auto; height:calc(100% + 8px); border:0; border-radius:0; object-fit:contain; box-shadow:none; pointer-events:none; }
        .featured-field-media > .featured-field-image { position:relative; z-index:1; display:block; width:100%; height:315px; border:0; border-radius:20px; object-fit:cover; box-shadow:0 8px 18px rgba(0,0,0,.2); }
        .featured-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:14px 0 22px; }.featured-actions > * { display:flex; min-height:52px; align-items:center; justify-content:center; gap:10px; padding:11px 14px; border:0; border-radius:14px; color:var(--text-on-brand); font:inherit; font-weight:800; text-align:center; text-decoration:none; cursor:pointer; }.featured-field-book { background:var(--orange); }.featured-field-program { background:#5ba9ec; }@media (hover: hover) {.featured-actions > *:hover { color:var(--text-on-brand); filter:brightness(.95); }
}.featured-actions button:disabled { cursor:not-allowed; opacity:.5; filter:grayscale(.35); }.featured-actions svg { width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
        .featured-actions > [hidden] { display:none; }
        .featured-actions.has-single-action { grid-template-columns:1fr; }
        .featured-field h2 { margin:0 0 20px; color:var(--dark-text, var(--green-825)); font-size:28px; text-align:center; }.fields-empty { grid-column:1/-1; padding:32px; color:var(--dark-text, var(--green-825)); font-weight:800; text-align:center; }

        .map {
            display:none;
        }

        .map-image { width:100%; height:520px; }.map-results { position:absolute; top:55px; left:25px; z-index:500; display:grid; width:39%; gap:15px; }.map-result { display:grid; grid-template-columns:40% 1fr; gap:10px; padding:10px; border:0; border-radius:9px; background:var(--surface); color:var(--text); box-shadow:0 4px 10px rgba(0,0,0,.25); text-align:right; cursor:pointer; }.map-result img { width:100%; height:72px; border-radius:6px; object-fit:cover; }.map-result strong,.map-result small { display:block; margin:0 0 6px; font-size:11px; }.map-result strong { font-size:14px; }@media (hover: hover) {.map-result:hover { background:var(--orange); color:var(--text-on-brand); }
}

        .field-btn { border:0; }
        .field-modal[hidden] { display:none; }
        body.field-modal-open { overflow:hidden; }
        .field-modal { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); opacity:0; transition:opacity .18s ease; }
        .field-modal.is-open { opacity:1; }
        .field-modal-backdrop { position:absolute; inset:0; background:rgba(3,29,24,.76); backdrop-filter:blur(5px); }
        .field-modal-dialog { position:relative; width:min(1120px, 100%); max-height:calc(100dvh - 32px); padding:clamp(20px,3.5vh,36px); overflow:hidden; border:1px solid rgba(7,88,71,.22); border-radius:34px; background:var(--surface); box-shadow:0 26px 70px rgba(0,0,0,.42); direction:rtl; transform:translateY(18px) scale(.98); transition:transform .18s ease; }
        .field-modal-dialog::before,
        .field-modal-dialog::after { position:absolute; z-index:0; display:block; content:""; pointer-events:none; }
        .field-modal-dialog::before { top:0; left:0; width:28.1%; aspect-ratio:421 / 453; background:url('/images/greenpopupLeft.png') left top/100% 100% no-repeat; }
        .field-modal-dialog::after { top:0; right:0; width:27.45%; aspect-ratio:411 / 566; background:url('/images/greenPopup.png') right top/100% 100% no-repeat; }
        .field-modal-dialog > * { position:relative; z-index:1; }
        .field-modal.is-open .field-modal-dialog { transform:none; }
        .field-modal-close { position:absolute; top:13px; left:15px; z-index:4; display:grid; width:36px; height:36px; place-items:center; border:0; border-radius:50%; background:var(--surface-page); color:var(--text-primary); font-size:25px; line-height:1; cursor:pointer; }
        .field-modal-topline { display:flex; min-height:36px; align-items:center; justify-content:flex-end; margin-bottom:clamp(8px,1.5vh,14px); padding-left:50px; }
        .field-modal-availability { display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border:1px solid var(--sage-200); border-radius:999px; background:var(--surface-page); color:var(--dark-text, var(--green-625)); font-size:13px; font-weight:800; }
        .field-modal-availability i { width:8px; height:8px; border-radius:50%; background:var(--green-325); }
        .field-modal-media { position:relative; }
        .field-modal-image, .field-modal-video { display:block; width:100%; height:clamp(220px,42vh,410px); border-radius:25px; background:#071b18; object-fit:cover; }
        .field-modal-image, .field-modal-video { position:relative; z-index:1; box-shadow:0 8px 18px rgba(0,0,0,.2); }
        .field-modal-image[hidden], .field-modal-video[hidden] { display:none; }
        .field-modal-city, .field-modal-rating { position:absolute; top:20px; z-index:2; display:flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--dark-text, #26322e); font-size:13px; text-decoration:none; }
        .field-modal-city { right:20px; }.field-modal-city b { font-weight:800; }
        .field-modal-media-pills { position:absolute; top:20px; right:20px; z-index:2; display:flex; align-items:center; gap:8px; }
        .field-modal-media-pills .field-modal-city { position:static; }
        .field-modal-bookable { display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border-radius:999px; background:rgba(255,255,255,.92); color:var(--dark-text, var(--green-625)); font-size:13px; font-weight:800; white-space:nowrap; }
        .field-modal-bookable i { width:8px; height:8px; flex:none; border-radius:50%; background:var(--green-325); }
        .field-modal-city svg, .field-modal-rating svg { width:18px; height:18px; fill:none; stroke:var(--green-675); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
        .field-modal-rating { left:20px; direction:ltr; }.field-modal-rating svg { width:16px; height:16px; fill:var(--gray-900); stroke:var(--gray-900); }
        .field-carousel-control { position:absolute; top:50%; z-index:2; display:grid; width:46px; height:46px; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--text-primary); box-shadow:0 3px 12px rgba(0,0,0,.25); cursor:pointer; transform:translateY(-50%); }
        :root[data-theme="dark"] :is(.field-modal-city,.field-modal-rating,.field-modal-bookable,.field-carousel-control) { border:1px solid var(--dark-glass-border); background:var(--dark-glass); color:var(--text-primary); }
        .field-carousel-control svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
        .field-carousel-control[hidden], .field-carousel-dots[hidden] { display:none; }
        .field-carousel-control:disabled { opacity:.45; cursor:default; }
        .field-carousel-previous { left:18px; }
        .field-carousel-next { right:18px; }
        .field-carousel-dots { position:absolute; right:50%; bottom:16px; z-index:2; display:flex; gap:8px; padding:7px 10px; border-radius:999px; background:rgba(0,0,0,.28); transform:translateX(50%); }
        .field-carousel-dots button { width:10px; height:10px; padding:0; border:1px solid var(--surface); border-radius:50%; background:transparent; cursor:pointer; }
        .field-carousel-dots button.is-active { background:var(--surface); transform:scale(1.2); }
        .field-modal-content { padding-top:clamp(12px,2vh,22px); }
        .field-modal-name { margin:0; color:var(--text); font-size:clamp(25px,3vh,34px); font-weight:900; line-height:1.25; text-align:right; }
        .field-modal-description { display:-webkit-box; margin:clamp(5px,1vh,10px) 0 6px; overflow:hidden; color:var(--sage-700); font-size:clamp(12px,1.7vh,15px); line-height:1.65; text-align:right; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
        .field-modal-location { display:flex; width:max-content; max-width:100%; align-items:center; gap:7px; margin-right:auto; color:#5799ee; font-size:13px; font-weight:800; text-decoration:underline; }.field-modal-location svg { width:16px; height:16px; flex:none; fill:none; stroke:var(--sage-575); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }.field-modal-location:not([href]) { pointer-events:none; text-decoration:none; }
        .field-modal-info { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:clamp(8px,1.3vh,14px); padding:clamp(8px,1.3vh,13px) 0; border-block:1px solid var(--sage-150); }
        .field-modal-info > div { position:relative; display:grid; min-height:clamp(62px,9vh,82px); align-content:center; padding:10px 15px 10px 58px; border:1px solid var(--sage-150); border-radius:15px; background:var(--surface-page); }
        .field-modal-info small { margin-bottom:5px; color:var(--gray-400); font-size:12px; }.field-modal-info strong { color:var(--gray-850); font-size:16px; }
        .field-info-icon { position:absolute; top:50%; left:16px; display:grid; width:40px; height:40px; place-items:center; border-radius:12px; background:var(--surface); color:var(--dark-text, var(--green-675)); transform:translateY(-50%); }.field-info-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
        .field-modal-actions { display:flex; justify-content:flex-start; gap:12px; padding-top:clamp(8px,1.3vh,14px); }
        .field-modal-actions > * { display:flex; min-height:clamp(40px,6vh,48px); align-items:center; justify-content:center; padding:6px 24px; border-radius:999px; font:inherit; font-size:14px; font-weight:800; text-align:center; text-decoration:none; }
        .field-modal-free-play { width:min(365px,100%); justify-content:space-between; border:0; background:var(--orange); color:var(--text-on-brand); cursor:pointer; }.field-modal-free-play > span:last-child { display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:var(--green-150); }.field-modal-free-play svg { width:18px; height:18px; fill:none; stroke:var(--text-on-brand); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
        .field-modal-program { border:2px solid var(--gray-775); background:var(--surface); color:var(--gray-775); }

        @media (max-width: 767px) {
            .field-modal { padding:max(6px, env(safe-area-inset-top)) max(6px, env(safe-area-inset-right)) max(6px, env(safe-area-inset-bottom)) max(6px, env(safe-area-inset-left)); }
            .field-modal-dialog { max-height:calc(100dvh - 12px); padding:30px 10px 10px; border-radius:22px; }
            .field-modal-close { top:8px; left:10px; }
            .field-modal-topline { position:absolute; top:8px; right:10px; z-index:3; min-height:36px; margin:0; padding:0; }
            .field-modal-availability { min-height:36px; padding:5px 10px; font-size:10px; }
            .field-modal-image, .field-modal-video { height:clamp(155px,29vh,230px); border-radius:17px; }
            .field-carousel-control { width:38px; height:38px; }
            .field-carousel-control svg { width:17px; height:17px; }
            .field-modal-city, .field-modal-rating { top:12px; padding:7px 10px; }.field-modal-city { right:10px; }.field-modal-rating { left:10px; }.field-modal-media-pills { top:12px; right:10px; gap:5px; }.field-modal-bookable { padding:7px 10px; font-size:10px; }
            .field-modal-content { padding-top:10px; }
            .field-modal-name { padding-left:30px; font-size:clamp(20px,3.2vh,26px); }
            .field-modal-description { margin:4px 0; font-size:clamp(10px,1.8vh,13px); line-height:1.45; }
            .field-modal-location { margin:0; }
            .field-modal-info { grid-template-columns:repeat(3,1fr); gap:5px; margin-top:6px; padding:7px 0; }
            .field-modal-info > div { min-height:58px; padding:7px 5px; text-align:center; }
            .field-modal-info small { font-size:9px; }.field-modal-info strong { font-size:11px; }
            .field-info-icon { position:static; width:26px; height:26px; margin:0 auto 3px; font-size:15px; transform:none; }
            .field-modal-actions { gap:6px; padding-top:7px; }
            .field-modal-actions > * { width:50%; min-height:38px; padding:5px 8px; font-size:10px; }
            .field-modal-free-play > span:last-child { width:27px; height:27px; }
        }

        @media (max-height: 700px) and (min-width: 768px) {
            .field-modal-dialog { padding:18px 28px; }
            .field-modal-image, .field-modal-video { height:34vh; min-height:190px; }
            .field-modal-topline { position:absolute; top:18px; right:28px; z-index:3; margin:0; padding:0; }
            .field-modal-name { font-size:24px; }
            .field-modal-info > div { min-height:58px; }
        }

        /* =========================================================
           FOOTER
        ========================================================= */

        footer {
            background: var(--surface);
            padding: 80px 0;
            border-top: 5px solid var(--sage-100);
        }

        .footer-grid {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 40px;
        }

        .footer-title {
            font-size: 26px;
            font-weight: 700;
            margin-bottom: 20px;
            color: var(--dark-text, var(--green-775));
        }

        .footer-links a {
            display: block;
            color: var(--gray-725);
            text-decoration: none;
            margin-bottom: 10px;
        }

        @media (hover: hover) {

        .footer-links a:hover {
            color: var(--dark-text, var(--green-775));
        }
}

        .copyright {
            margin-top: 40px;
            padding-top: 30px;
            border-top: 1px solid var(--sage-100);
            text-align: center;
            color: var(--gray-550);
        }

        /* =========================================================
           RESPONSIVE
        ========================================================= */

        @media (max-width: 992px) {

            .hero {
                min-height: auto;
            }

            .hero--banner .hero-inner {
                position: relative;
                min-height: 90vw;
            }

            .hero--banner .hero-buttons {
                position: absolute;
                z-index: 4;
                top: 42vw;
                right: 9vw;
                margin: 0;
                gap: 8px;
                direction: ltr;
                flex-wrap: nowrap;
            }

            .hero--banner .hero-buttons .btn-primary-custom,
            .hero--banner .hero-buttons .btn-secondary-custom {
                width: 108px;
                min-width: 108px;
                height: 28px;
                padding: 0;
                flex: 0 0 auto;
                font-size: 8px;
                line-height: 1;
            }

            .hero-sub-banner-frame {
                margin-top: -90px;
            }

            .hero-inner {
                min-height: auto;
                flex-direction: column;
                padding: 70px 0 0;
                text-align: center;
            }

            .hero-content,
            .hero-image {
                width: 100%;
            }

            .hero-content {
                margin-bottom: 0;
            }

            .hero-content h1 {
                font-size: 48px;
            }

            .hero-buttons {
                justify-content: center;
            }

            .hero-image .hero-banner {
                max-height: 450px;
            }

            .logo-grid {
                grid-template-columns: repeat(2, 1fr);
            }

            .fields-grid {
                grid-template-columns: 1fr;
            }

            .cta-content {
                flex-direction: column;
                text-align: center;
            }

            .cta-image,
            .cta-text {
                width: 100%;
            }

            .cta-image img {
                max-height: 350px;
            }

            .cta-text h2 {
                font-size: 40px;
            }

            .map-wrapper {
                grid-template-columns: 1fr;
            }

            .footer-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 576px) {

            .hero-inner {
                padding: 50px 20px;
            }

            .hero-content h1 {
                font-size: 38px;
            }

            .hero-content p {
                font-size: 18px;
            }

            .hero-buttons {
                flex-direction: column;
                width: 100%;
            }

            .btn-primary-custom,
            .btn-secondary-custom {
                width: 100%;
            }

            .unleash {
                padding: 60px 20px;
            }

            .unleash h2 {
                font-size: 48px;
            }

            .unleash h3 {
                font-size: 28px;
            }

            .program,
            .partners,
            .fields,
            .map-section {
                padding: 70px 0;
            }

            .program {
                padding-bottom: 25px;
            }

            .partners {
                padding-top: 25px;
            }

            .section-title,
            .fields h2 {
                font-size: 38px;
                margin-bottom: 40px;
            }

            .program h2 {
                font-size: 30px;
            }

            .program h3 {
                font-size: 22px;
            }

            .program-slider {
                justify-content: flex-start;
                overflow-x: auto;
                padding: 10px 5px 20px;
                scrollbar-width: none;
            }

            .program-slider::-webkit-scrollbar {
                display: none;
            }

            .program-card {
                width: 150px;
                height: 230px;
            }

            .logo-grid {
                grid-template-columns: 1fr 1fr;
                gap: 15px;
            }

            .logo-box {
                height: 80px;
            }

            .cta-text h2 {
                font-size: 34px;
            }

            .cta-text li {
                font-size: 18px;
            }

            .field-card img {
                height: 210px;
            }

            .map,
            .featured-field {
                min-height: 350px;
            }
        }

@media (max-width: 992px) {
    .hero-composite {
        min-height: 0;
    }

    .hero-composite .hero-buttons {
        position: absolute;
        top: 40%;
        right: 8vw;
        left: auto;
        width: auto;
        display: flex;
        justify-content: flex-end;
        gap: 6px;
        direction: rtl;
    }

    .hero-composite .hero-buttons .btn-primary-custom,
    .hero-composite .hero-buttons .btn-secondary-custom {
        width: 96px;
        min-width: 96px;
        height: 26px;
        padding: 0;
        flex: 0 0 auto;
        font-size: 8px;
    }
}

.site-footer { padding: 0; border: 0; background: var(--sage-100); }
.leaflet-field-pin { position:relative; display:grid; width:42px !important; height:42px !important; place-items:center; border:3px solid var(--orange); border-radius:50%; background:var(--green-825); color:var(--text-on-brand); box-shadow:0 3px 8px rgba(0,0,0,.28); transition:transform .18s ease,background .18s ease; }
.leaflet-field-pin::after { position:absolute; z-index:-1; width:18px; height:18px; content:""; border-right:3px solid var(--orange); border-bottom:3px solid var(--orange); background:var(--green-825); transform:rotate(45deg); bottom:-10px; }
.leaflet-field-pin span { position:absolute; z-index:1; inset:0; display:grid; place-items:center; font-size:17px; line-height:1; }
.leaflet-field-pin.is-active { background:var(--orange); transform:scale(1.16); }
@media (hover: hover) {
.leaflet-field-pin:hover { background:var(--orange); transform:scale(1.16); }
}
.leaflet-field-pin.is-active::after { background:var(--orange); }
@media (hover: hover) {
.leaflet-field-pin:hover::after { background:var(--orange); }
}
.footer-stadium { position: relative; padding: 42px 2.7% 0; overflow: hidden; background:var(--surface-page); }
.footer-stadium::before { display:none; }
.footer-stadium::after { display:none; }
.footer-star { position:absolute; z-index:2; display:block; height:auto; pointer-events:none; user-select:none; }
.footer-star-green { top:175px; left:-18px; width:clamp(95px,10vw,145px); }
.footer-star-orange { top:25px; right:-18px; width:clamp(110px,11vw,163px); }
.footer-panel { position:relative; z-index:3; display: grid; min-height: 528px; grid-template-columns: 1.15fr .9fr 1fr; gap: clamp(45px, 5vw, 85px); max-width: 1525px; margin: auto; padding: 165px clamp(55px, 7.5vw, 120px) 48px; overflow:hidden; border-radius: 18px 18px 0 0; background:var(--surface); color: var(--sage-900); }
.footer-panel::before { position:absolute; inset:0; z-index:0; background:url("/images/stadium.png") center top / 100% 100% no-repeat; content:""; filter:brightness(0); opacity:.075; pointer-events:none; }
:root[data-theme="dark"] .footer-panel { background:var(--surface-raised); }
:root[data-theme="dark"] .footer-panel::before { filter:brightness(0) invert(1); opacity:.11; }
.footer-panel::after { position:absolute; top:105px; right:7%; bottom:0; left:7%; z-index:1; background:var(--surface); content:""; pointer-events:none; }
.footer-panel > section { position:relative; z-index:3; }
.footer-panel h3 { margin: 0 0 22px; color: var(--dark-text, #063f35); font-size: 24px; font-weight: 800; }
.footer-panel section:not(.footer-help) { padding-top: 78px; padding-right: 28px; }
.footer-panel .footer-links { border-right: 2px solid var(--sage-200); }
.footer-panel .footer-contact { border-right: 0; }
.footer-panel a, .footer-panel p { display: block; margin: 0 0 15px; color: var(--dark-text, #263a34); font-weight: 600; text-decoration: none; }
.footer-panel .footer-links,
.footer-panel .footer-contact { display: grid; grid-template-rows: 54px repeat(4, minmax(0, 1fr)); gap: 0; height: 360px; box-sizing: border-box; font-size: 16px; }
.footer-panel .footer-links { grid-template-rows: 54px repeat(4, 38px); }
.footer-panel .footer-links > h3,
.footer-panel .footer-contact > h3 { margin: 0; align-self: start; line-height: 32px; }
.footer-panel .footer-links > a,
.footer-panel .footer-contact > a,
.footer-panel .footer-contact > p { display: flex; align-items: flex-start; margin-bottom: 0; }
.footer-panel .footer-contact > .footer-location { grid-row: 3; }
.footer-panel .footer-contact > .footer-faq { grid-row: 4; }
.footer-panel .footer-contact svg { flex: 0 0 24px; width: 24px; height: 24px; margin-left: 8px; vertical-align: middle; fill: none; stroke: var(--green-825); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
@media (hover: hover) {
.footer-panel a:hover { color: var(--orange); }
}
.footer-help { text-align: center; }
.footer-help img { width: 92px; margin: 0 auto 22px; filter:brightness(0) saturate(100%) invert(24%) sepia(25%) saturate(1034%) hue-rotate(116deg) brightness(88%) contrast(94%); }
.footer-help h2 { margin: 0 0 12px; padding: 9px; background: var(--orange); color: var(--text-on-brand); font-size: 24px; }
.footer-help > p { color: var(--dark-text, var(--green-550)); font-weight: 700; line-height: 1.8; }
.footer-report-trigger { display: inline-flex; align-items: center; gap: 16px; padding: 10px 18px; border: 2px solid var(--green-dark); border-radius: 30px; background:var(--surface); color: var(--text-primary); font:inherit; font-weight: 800; cursor:pointer; }
.footer-report-trigger span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 50%; background: var(--green-dark); color: var(--text-on-brand); }

.report-modal[hidden] { display:none; }
body.report-modal-open { overflow:hidden; }
.report-modal { position:fixed; inset:0; z-index:2100; display:grid; place-items:center; padding:max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left)); opacity:0; transition:opacity .18s ease; }
.report-modal.is-open { opacity:1; }
.report-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); }
.report-modal-dialog { position:relative; width:min(830px, 100%); max-height:calc(100vh - 44px); overflow:auto; border:2px solid var(--green-425); border-radius:24px; background:var(--surface-page); box-shadow:0 18px 45px rgba(0,0,0,.55); direction:rtl; transform:translateY(18px); transition:transform .18s ease; }
.report-modal.is-open .report-modal-dialog { transform:none; }
.report-modal-close { position:absolute; top:12px; left:14px; z-index:3; display:grid; width:38px; height:38px; place-items:center; border:0; border-radius:50%; background:rgba(255,255,255,.9); color:var(--dark-text, var(--green-825)); font-size:27px; cursor:pointer; }
.report-modal-close { font-size:0; }
.report-modal-close::before,.report-modal-close::after { position:absolute; top:50%; left:50%; width:17px; height:2.5px; border-radius:2px; background:currentColor; content:""; }
.report-modal-close::before { transform:translate(-50%,-50%) rotate(45deg); }
.report-modal-close::after { transform:translate(-50%,-50%) rotate(-45deg); }
:root[data-theme="dark"] .report-modal-dialog { border-color:var(--dark-glass-border); background:var(--surface); box-shadow:0 24px 70px rgba(0,0,0,.65),inset 0 3px 0 var(--green-425); }
:root[data-theme="dark"] .report-modal-close { border:1px solid var(--dark-glass-border); background:var(--surface-raised); color:var(--text-primary); box-shadow:0 4px 14px rgba(0,0,0,.28); }
.report-modal-header { position:relative; margin:0; padding:28px 70px 22px; background:transparent; color:var(--dark-text, var(--green-825)); clip-path:none; }
.report-modal-header h2 { max-width:620px; margin:0 auto; font-size:21px; font-weight:800; text-align:center; }
[data-report-modal] .report-modal-header { margin:0; padding:28px 70px 22px; background:transparent; color:var(--dark-text, var(--green-825)); clip-path:none; }
[data-report-modal] .report-modal-header h2 { max-width:680px; font-size:clamp(20px,2.5vw,27px); line-height:1.45; }
.report-form { padding:10px 48px 34px; }
.report-form select, .report-form textarea, .report-form input:not([type=file]) { width:100%; border:1.5px solid var(--green-800); background:var(--surface); color:var(--text-primary); font:inherit; font-size:15px; outline:none; }
.contact-form-input { height:51px; padding:0 22px; border-radius:28px; }
.contact-character-count { display:block; margin:5px 16px 0; color:var(--sage-575); font-size:11px; font-weight:700; direction:ltr; text-align:right; }
.contact-character-count.is-at-limit { color:#e2553d; }
.contact-form .report-submit, .report-form .report-submit { margin-top:24px; }
.contact-form-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:0 20px; }
.contact-form-grid .report-label { margin:10px 0 8px; }
.report-select-wrap { display:block; width:55%; margin:0 0 17px auto; }
.report-context-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
.report-context-grid .report-select-wrap { width:100%; }
.report-context-grid .report-label { margin-top:0; }
.report-form select { height:51px; padding:0 48px 0 20px; border-radius:28px; appearance:none; -webkit-appearance:none; -moz-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23079a7e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:left 18px center; background-size:16px 16px; }
.report-form select:invalid { color:var(--gray-400); }
.report-form select option { color:var(--text-primary); }
.report-label { display:block; margin:10px 0 12px; color:var(--dark-text, var(--green-825)); font-size:18px; font-weight:800; }
.report-label span { color:var(--dark-text, var(--green-200)); font-size:15px; }
.required-marker { color:var(--red-450); font-size:15px; font-style:normal; }
.optional-marker { color:var(--gray-400); font-size:14px; font-style:normal; font-weight:600; }
.report-form textarea { min-height:117px; padding:17px 22px; resize:vertical; border-radius:30px; }
.report-help { margin:-6px 0 18px; color:var(--gray-850); }
.report-form-row { display:grid; grid-template-columns:1.25fr .95fr; gap:40px; }
.report-form-row > input { height:51px; padding:0 20px; border-radius:28px; }
.report-file { display:flex; height:51px; align-items:center; justify-content:center; gap:16px; border:1.5px solid #087664; border-radius:28px; background:var(--surface); color:var(--gray-400); font-size:15px; cursor:pointer; overflow:hidden; }
.report-file input { position:absolute; width:1px; height:1px; opacity:0; }
.report-file.has-file { color:var(--dark-text, var(--green-825)); }
.report-form select.field-error, .report-form textarea.field-error, .report-form input.field-error, .report-form label.report-file.field-error { border-color:var(--red-500); }
.report-attachment { display:flex; flex-direction:column; gap:12px; }
.report-attachment-list { display:flex; flex-wrap:wrap; gap:12px; }
.report-attachment-list:empty { display:none; }
.report-attachment-chip { position:relative; width:76px; height:76px; border:1.5px solid var(--sage-275); border-radius:14px; background:var(--surface-page); overflow:hidden; }
.report-attachment-thumb { display:block; width:100%; height:100%; object-fit:cover; }
.report-attachment-remove { position:absolute; top:4px; right:4px; display:grid; place-items:center; width:20px; height:20px; border:0; border-radius:50%; background:rgba(0,0,0,.55); color:var(--text-on-brand); font-size:13px; line-height:1; cursor:pointer; }
@media (hover: hover) {
.report-attachment-remove:hover { background:var(--red-175); }
}
.report-char-counter { display:block; margin:-10px 0 12px; color:var(--gray-400); font-size:13px; text-align:left; }
.report-char-counter.is-under, .report-char-counter.is-over { color:var(--red-500); }
.report-optional, .report-error { display:block; color:var(--red-500); }
.report-optional { margin:7px 0 20px; font-size:15px; }
.report-submit { display:flex; width:300px; align-items:center; justify-content:space-between; padding:8px 10px 8px 24px; border:2px solid #55ce68; border-radius:34px; background:var(--orange); color:var(--text-on-brand); box-shadow:0 3px 5px rgba(0,0,0,.3); font:inherit; font-size:18px; font-weight:800; cursor:pointer; }
.report-submit span { display:grid; width:48px; height:48px; place-items:center; border-radius:50%; background:var(--green-150); font-size:25px; }
.report-success-open { overflow:hidden; }
.map-program-popup{display:grid;min-width:150px;gap:5px;font-family:Cairo,sans-serif;text-align:right;direction:rtl}.map-program-popup strong{color:var(--dark-text, var(--green-825));font-size:14px}.map-program-popup span{color:var(--sage-700);font-size:12px}.map-program-popup .map-popup-distance{color:var(--orange);font-weight:900}.map-program-popup a,.map-program-popup button{margin-top:4px;padding:6px 10px;border:0;border-radius:15px;background:var(--blue-400);color:var(--text-on-brand)!important;font:inherit;font-size:11px;font-weight:800;text-align:center;text-decoration:none;cursor:pointer}.map-program-popup a.map-popup-distance{margin-top:0;padding:0;background:none;color:var(--orange)!important;font-size:12px;font-weight:900;text-align:right}
.leaflet-tooltip.nawel-map-tooltip{padding:8px 12px;border:1px solid var(--sage-200);border-radius:11px;background:var(--surface);color:var(--text-primary);box-shadow:0 6px 18px rgba(0,0,0,.18);font-family:Cairo,sans-serif;text-align:right;direction:rtl}.nawel-map-tooltip>div{display:grid;gap:2px}.nawel-map-tooltip strong{font-size:12px}.nawel-map-tooltip span{color:var(--blue-400);font-size:10px;font-weight:800}.nawel-map-tooltip .map-tooltip-distance{margin-top:3px;color:var(--orange);font-size:10px;font-weight:900;direction:ltr}.leaflet-tooltip-top.nawel-map-tooltip:before{border-top-color:var(--surface)}.nawel-map-active-marker{filter:drop-shadow(0 5px 7px rgba(0,0,0,.3))}
.map-user-location-icon{display:grid!important;place-items:center;border:3px solid var(--surface);border-radius:50%;background:var(--blue-550);box-shadow:0 3px 10px rgba(0,0,0,.35)}.map-user-location-icon svg{width:23px;height:23px;fill:none;stroke:var(--text-on-brand);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.report-success-modal[hidden] { display:none; }
.report-success-modal { position:fixed; inset:0; z-index:3000; display:grid; place-items:center; padding:max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left)); opacity:0; transition:opacity .18s ease; }
.report-success-modal.is-open { opacity:1; }
.report-success-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.7); backdrop-filter:blur(3px); }
.report-success-dialog { position:relative; width:min(830px, 100%); min-height:195px; padding:65px 35px 28px; border:2px solid var(--green-325); border-radius:23px; background:var(--surface-page); box-shadow:0 18px 28px rgba(0,0,0,.58); color:var(--text-primary); text-align:center; transform:translateY(15px) scale(.98); transition:transform .18s ease; }
.report-success-modal.is-open .report-success-dialog { transform:none; }
.report-success-icon { position:absolute; top:0; right:50%; display:grid; width:98px; height:98px; place-items:center; border:2px solid var(--green-200); border-radius:50%; background:var(--orange); color:var(--text-on-brand); box-shadow:0 4px 6px rgba(0,0,0,.3); font-size:48px; font-weight:900; transform:translate(50%, -48%); }
.report-success-modal.is-error .report-success-dialog { border-color:#e05b4d; }
.report-success-modal.is-error .report-success-icon { border-color:#f0a096; background:var(--red-550); }
.report-success-modal.is-error .report-success-dialog h2 { color:var(--red-775); }
.report-success-modal.is-error .report-success-confirm { background:var(--red-550); }
.booking-auth-modal[hidden]{display:none}.booking-auth-modal{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));opacity:0;transition:opacity .18s ease}.booking-auth-modal.is-open{opacity:1}.booking-auth-backdrop{position:absolute;inset:0;background:rgba(0,35,29,.78);backdrop-filter:blur(4px)}.booking-auth-dialog{position:relative;width:min(470px,100%);padding:38px 30px 30px;border:2px solid #e05b4d;border-radius:25px;background:var(--surface-page);box-shadow:0 24px 65px rgba(0,0,0,.42);color:var(--text-primary);text-align:center;direction:rtl;transform:translateY(16px) scale(.98);transition:transform .18s ease}.booking-auth-modal.is-open .booking-auth-dialog{transform:none}.booking-auth-icon{display:grid;width:64px;height:64px;margin:0 auto 18px;place-items:center;border-radius:50%;background:var(--red-550);color:var(--text-on-brand);font-size:36px;font-weight:900}.booking-auth-dialog h2{margin:0 0 10px;font-size:25px;font-weight:900}.booking-auth-dialog p{margin:0;color:var(--sage-700);line-height:1.8}.booking-auth-actions{display:flex;gap:10px;margin-top:25px}.booking-auth-actions a,.booking-auth-actions button{flex:1;padding:12px 16px;border-radius:24px;font:inherit;font-weight:800;text-decoration:none}.booking-auth-actions a{border:0;background:var(--green-375);color:var(--text-on-brand)}.booking-auth-actions button{border:1px solid var(--green-800);background:transparent;color:var(--text-primary);cursor:pointer}@media(max-width:480px){.booking-auth-dialog{padding:30px 18px 20px}.booking-auth-actions{flex-direction:column}}
.booking-cancel-actions .booking-cancel-confirm{border-color:var(--red-550);background:var(--red-550);color:var(--text-on-brand)}@media (hover: hover) {.booking-cancel-actions .booking-cancel-confirm:hover{background:var(--red-725)}
}
.report-success-dialog h2 { margin:8px 0 8px; color:var(--dark-text, var(--green-825)); font-size:27px; font-weight:900; }
.report-success-dialog p { margin:0 0 18px; font-size:18px; }
.report-success-close { position:absolute; top:15px; left:16px; border:0; background:transparent; color:var(--dark-text, var(--green-825)); font-size:28px; cursor:pointer; }
:root[data-theme="dark"] :is(.report-success-dialog,.booking-auth-dialog) { border-color:var(--dark-glass-border); background:var(--surface); box-shadow:0 24px 70px rgba(0,0,0,.62); }
:root[data-theme="dark"] .report-success-close { display:grid; width:36px; height:36px; place-items:center; border:1px solid var(--dark-glass-border); border-radius:50%; background:var(--surface-raised); }
.report-success-confirm { min-width:150px; padding:10px 28px; border:0; border-radius:25px; background:var(--orange); color:var(--text-on-brand); font:inherit; font-weight:800; cursor:pointer; }

@media (max-width: 767px) {
    .report-modal { padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); }
    .report-modal-dialog { max-height:calc(100vh - 20px); border-radius:18px; }
    .report-modal-header { margin:0; padding:26px 42px 18px; }
    .report-modal-header h2 { font-size:16px; }
    [data-report-modal] .report-modal-header { margin:0; padding:26px 42px 18px; }
    [data-report-modal] .report-modal-header h2 { font-size:17px; line-height:1.5; }
    .report-form { padding:10px 20px 26px; }
    .report-select-wrap { width:100%; }
    .report-context-grid { grid-template-columns:1fr; gap:0; }
    .report-form-row { grid-template-columns:1fr; gap:14px; }
    .contact-form-grid { grid-template-columns:1fr; gap:0; }
    .report-submit { width:100%; }
    .report-success-dialog { min-height:180px; padding:58px 20px 24px; }
    .report-success-icon { width:82px; height:82px; font-size:40px; }
}

/* Phones: Contact Us and Report a Problem are native bottom sheets styled like the login
   screen: grabber to drag them closed, filled fields, a full-width send button, and errors
   in one top banner (home.js) while the field just tints and shakes. */
@media (max-width: 767px) {
    :is([data-contact-modal], [data-report-modal]) { place-items:end stretch; padding:0; }
    :is([data-contact-modal], [data-report-modal]) .report-modal-dialog { width:100%; max-height:92dvh; border:0; border-radius:24px 24px 0 0; background:var(--surface); box-shadow:0 -10px 40px rgba(0,0,0,.25); transform:translateY(100%); transition:transform .25s ease; }
    :is([data-contact-modal], [data-report-modal]) .report-modal-dialog::before { position:absolute; top:7px; left:50%; width:36px; height:5px; border-radius:3px; background:var(--sage-275); content:""; transform:translateX(-50%); }
    :is([data-contact-modal], [data-report-modal]) .report-modal-header { padding:22px 20px 4px 56px; touch-action:none; }
    :is([data-contact-modal], [data-report-modal]) .report-modal-header h2 { margin:0; color:var(--text-primary); font-size:20px; text-align:right; }
    :is([data-contact-modal], [data-report-modal]) .report-modal-close { top:14px; width:34px; height:34px; background:var(--surface-page); color:var(--text-primary); }
    :root[data-theme="dark"] :is([data-contact-modal], [data-report-modal]) .report-modal-close { background:var(--surface-raised); }
    :is([data-contact-modal], [data-report-modal]) .report-form { padding:8px 20px calc(20px + env(safe-area-inset-bottom)); }

    /* 16px stops iOS from zooming the page when a field is focused. */
    :is([data-contact-modal], [data-report-modal]) .report-form :is(input, textarea, select) { border:1px solid transparent; border-radius:14px; background-color:var(--surface-page); font-size:16px; }
    :is([data-contact-modal], [data-report-modal]) .report-form textarea { resize:none; }
    :is([data-contact-modal], [data-report-modal]) .report-form :is(input, textarea, select):focus { border-color:var(--green-325); background-color:var(--surface); }
    :is([data-contact-modal], [data-report-modal]) .report-form .field-error { border-color:var(--red-675); background-color:var(--red-50); }
    :is([data-contact-modal], [data-report-modal]) .report-form .field-error.is-shaking { animation:sheet-field-shake .35s ease; }
    :is([data-contact-modal], [data-report-modal]) .report-error { display:none; }

    :is([data-contact-modal], [data-report-modal]) .report-submit { justify-content:center; width:100%; height:52px; margin-top:8px; padding:0; border:0; border-radius:16px; background:var(--orange); box-shadow:none; font-size:18px; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
    :is([data-contact-modal], [data-report-modal]) .report-submit span { display:none; }
    :is([data-contact-modal], [data-report-modal]) .report-submit:active { transform:scale(.97); }

    /* Contact: label inset at the top of each field, like the login fields. */
    [data-contact-modal] .contact-form-field { position:relative; margin-bottom:12px; }
    [data-contact-modal] .contact-form-field .report-label { position:absolute; top:7px; right:17px; z-index:1; margin:0; color:var(--sage-625); font-size:12px; font-weight:700; pointer-events:none; }
    [data-contact-modal] .report-label span { display:none; }
    [data-contact-modal] .contact-form-field:focus-within .report-label { color:var(--dark-text, var(--green)); }
    [data-contact-modal] .contact-form-field:has(.field-error) .report-label { color:var(--red-675); }
    [data-contact-modal] .report-form :is(input, textarea) { height:58px; padding:24px 16px 6px; }
    [data-contact-modal] .report-form textarea { height:auto; min-height:120px; padding-top:28px; }
    [data-contact-modal] .contact-character-count { margin:4px 4px 0; }

    /* Report: dropdowns, help text and the image picker keep their labels above the field. */
    [data-report-modal] .report-modal-header h2 { font-size:16px; line-height:1.6; }
    [data-report-modal] .report-label { margin:12px 0 6px; color:var(--sage-625); font-size:13px; font-weight:700; }
    [data-report-modal] .report-help { margin:-2px 0 8px; color:var(--sage-625); font-size:12px; }
    [data-report-modal] .report-select-wrap { margin-bottom:0; }
    [data-report-modal] .report-form :is(input:not([type=file]), select) { height:52px; }
    [data-report-modal] .report-form input:not([type=file]) { padding:0 16px; }
    [data-report-modal] .report-form select { padding:0 16px 0 44px; }
    [data-report-modal] .report-form textarea { min-height:120px; padding:14px 16px; }
    [data-report-modal] .report-char-counter { margin:4px 4px 0; }
    [data-report-modal] .report-form-row { gap:12px; }
    [data-report-modal] .report-file { height:52px; border:1px dashed #b9c6c0; border-radius:14px; background:var(--surface-page); }
    [data-report-modal] .report-submit { margin-top:20px; }

    .sheet-toast { position:fixed; top:calc(12px + env(safe-area-inset-top)); right:16px; left:16px; z-index:3; padding:12px 46px 12px 14px; border-radius:14px; background:var(--surface); box-shadow:0 8px 24px rgba(0,0,0,.18); color:var(--red-850); font-size:14px; font-weight:700; line-height:1.6; transition:opacity .25s ease, transform .25s ease; }
    .sheet-toast::before { position:absolute; top:12px; right:14px; display:grid; width:22px; height:22px; place-items:center; border-radius:50%; background:var(--red-675); color:var(--text-on-brand); content:"!"; font-size:13px; font-weight:900; line-height:1; }
    .sheet-toast.is-hiding { opacity:0; transform:translateY(-16px); pointer-events:none; }
}

@media (min-width: 768px) {
    .sheet-toast { display:none; }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    :is([data-contact-modal], [data-report-modal]) .report-modal-dialog, .sheet-toast { transition:none; }
    :is([data-contact-modal], [data-report-modal]) .report-form .field-error.is-shaking { animation:none; }
}

@keyframes sheet-field-shake {
    20%, 60% { transform:translateX(-6px); }
    40%, 80% { transform:translateX(6px); }
}

@media (max-width: 900px) {
    .map-section { padding:60px 0; }
    .welcome-bottom { margin-top:60px; }
    .welcome-page .map-section { padding-top:32px; }
    .map-section-title { margin-bottom:32px; }
    .mobile-map-tabs { position:sticky; top:10px; z-index:900; display:grid; width:min(430px,calc(100% - 36px)); grid-template-columns:1fr 1fr; gap:5px; margin:0 auto 18px; padding:5px; border:1px solid var(--sage-200); border-radius:999px; background:rgba(255,255,255,.94); box-shadow:0 8px 20px rgba(7,88,71,.12); backdrop-filter:blur(8px); }
    .mobile-map-tabs button { min-height:44px; padding:8px 12px; border:0; border-radius:999px; background:transparent; color:var(--dark-text, var(--green-825)); font:inherit; font-size:13px; font-weight:900; cursor:pointer; }
    .mobile-map-tabs button[aria-selected="true"] { background:var(--green-825); color:var(--text-on-brand); }
    .map-section[data-mobile-panel="map"] .featured-field { display:none; }
    .map-section[data-mobile-panel="details"] .map-wrapper { display:none; }
    .map-tools { top:auto; bottom:28px; left:10px; right:10px; max-width:none; align-items:flex-end; }
    .map-tools select,.map-tools button { min-height:35px; flex:1 1 auto; padding:6px 8px; font-size:10px; }
    .map-tools .map-tool-icon { width:38px; min-width:38px; flex:0 0 38px; padding:0; }
    .map-tools-status { flex:0 0 auto; }
    .map-section .container { width:100%; max-width:none; padding-inline:18px; }
    .map-layout { grid-template-columns:minmax(0,1fr); gap:26px; align-items:stretch; }
    .map-layout .map-wrapper { order:1; }
    .map-layout .featured-field { order:2; }
    .map-layout .featured-field { width:100%; min-width:0; padding:16px; border:1px solid var(--sage-150); border-radius:22px; background:var(--surface); box-shadow:0 12px 28px rgba(7,88,71,.09); }
    .featured-field-media { padding:26px 40px 10px 0; }
    .featured-field-media > .featured-field-image { height:clamp(240px,58vw,400px); border:0; border-radius:16px; }
    .featured-field h2 { margin-bottom:12px; font-size:clamp(22px,5vw,28px); line-height:1.5; }
    .featured-actions { margin:12px 0 18px; }
    .featured-actions > * { min-width:0; min-height:48px; padding:9px 10px; font-size:13px; }
    .map-wrapper { width:100%; min-width:0; min-height:clamp(360px,65vh,520px); border-width:2px; border-radius:20px; }
    .map-image { height:clamp(360px,65vh,520px); }
    .leaflet-control-zoom a { width:36px!important; height:36px!important; line-height:36px!important; }
}

@media (max-width: 480px) {
    .map-section { padding:42px 0; }
    .welcome-bottom { margin-top:42px; }
    .welcome-page .map-section { padding-top:24px; }
    .map-section-title { margin-bottom:24px; font-size:30px; }
    .map-section .container { padding-inline:10px; }
    .map-layout { gap:18px; }
    .map-layout .featured-field { padding:11px; border-radius:17px; }
    .featured-field-media { padding:22px 32px 8px 0; }
    .featured-field-media > .featured-field-vector { right:-38px; bottom:7px; }
    .featured-field-media > .featured-field-image { height:210px; border-radius:13px; }
    .featured-actions { grid-template-columns:1fr; gap:8px; margin:10px 0 15px; }
    .featured-actions > * { min-height:44px; }
    .map-wrapper,.map-image { min-height:390px; height:390px; }
    .leaflet-popup-content-wrapper { max-width:calc(100vw - 55px); }
}
.site-footer .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: 25px; min-height: 78px; margin: auto; padding: 24px clamp(24px, 5vw, 100px); background: #32a852; color: var(--text-on-brand); font-size: 14px; font-weight: 600; text-align: center; }
.welcome-page .footer-social a { border-color: var(--surface); color: var(--text-on-brand); }
.site-footer .footer-bottom p { margin: 0; }
.footer-help .footer-saff { display:block; width:max-content; margin:0 auto; padding-top:22px; }
.footer-help .footer-saff img { display:block; width:auto; height:80px; margin:0; object-fit:contain; filter:none; }
.footer-legal { display: flex; gap: 0; }
.footer-legal a { padding: 0 12px; color: inherit; text-decoration: none; }
.footer-legal a + a { border-right: 1px solid var(--surface); }
@media (hover: hover) {
.footer-legal a:hover { color: var(--orange); }
}
.footer-social { display: flex; align-items: center; gap: 10px; font-size: 20px; }
.footer-social strong { margin-left: 10px; font-weight: 600; }
.footer-social a { display: grid; width: 28px; height: 28px; place-items: center; border: 1px solid var(--green-425); border-radius: 50%; color: var(--dark-text, #2b9e4f); font-size: 12px; text-decoration: none; }
.footer-social svg { width:14px; height:14px; fill:currentColor; }
.footer-social rect, .footer-social circle { fill:none; stroke:currentColor; stroke-width:1.8; }
.footer-social .footer-social-dot { fill:currentColor; stroke:none; }
@media (hover: hover) {
.footer-social a:hover { border-color: var(--orange); color: var(--orange); }
}
@media (max-width: 767px) { .footer-stadium { padding: 45px 16px 0; background-size: auto 170px, 180px auto, 190px auto, 190px auto; } .footer-star-green { top:190px; left:-25px; width:78px; } .footer-star-orange { top:55px; right:-25px; width:88px; } .footer-panel { min-height:0; grid-template-columns: 1fr; gap: 28px; padding: 45px 25px; } .footer-panel section:not(.footer-help) { height: auto; border: 0; padding: 0; text-align: center; } .footer-panel .footer-links, .footer-panel .footer-contact { display: block; } .footer-panel .footer-links > a { display: block; margin-bottom: 15px; } .footer-panel .footer-contact > a, .footer-panel .footer-contact > p { display: flex; align-items: flex-start; justify-content: center; margin-bottom: 15px; } .site-footer .footer-bottom { flex-direction: column; align-items: center; padding-block: 24px; font-size: 12px; } .footer-legal { flex-wrap: wrap; justify-content: center; } }
@media (max-width: 767px) { .footer-help .footer-saff img { width:auto; height:70px; } }
/* Tablets (iPad mini/Air portrait): help block on its own row, links + contact side by side below it. */
@media (min-width: 768px) and (max-width: 1100px) {
    .footer-panel { min-height:0; grid-template-columns: 1fr 1fr; gap: 36px 40px; padding: 150px 60px 40px; }
    .footer-panel .footer-help { grid-column: 1 / -1; max-width: 420px; margin: 0 auto; }
    .footer-panel section:not(.footer-help) { padding-top: 0; }
    .footer-panel .footer-links { border-right: 0; }
    .footer-panel .footer-links, .footer-panel .footer-contact { height: auto; grid-template-rows: auto; gap: 14px; }
    .footer-panel .footer-contact > .footer-location, .footer-panel .footer-contact > .footer-faq { grid-row: auto; }
    .footer-panel .footer-links > h3, .footer-panel .footer-contact > h3 { margin-bottom: 6px; }
    .site-footer .footer-bottom { flex-wrap: wrap; justify-content: center; gap: 14px 25px; }
    .footer-legal a { white-space: nowrap; }
    .footer-social strong { white-space: nowrap; font-size: 16px; }
}

@media (max-width: 767px) {
    .fields::before { top:-48px; left:8px; width:110px; }
    .fields h2::before { top:-30px; left:-45px; }
    .fields h2::after { right:-45px; bottom:-22px; }
    /* The (up to 3) program cards become a sideways row that snaps card by card. */
    .fields-grid {
        display: flex;
        gap: 14px;
        margin-inline: -12px;
        padding: 4px 12px 18px;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 12px;
        scrollbar-width: none;
    }

    .fields-grid::-webkit-scrollbar {
        display: none;
    }

    .field-card {
        flex: 0 0 min(86%, 340px);
        padding: 14px;
        border-radius: 26px;
        scroll-snap-align: center;
    }

    .fields-grid > .fields-empty {
        flex: 1 0 100%;
    }

    .field-card img {
        height: 200px;
    }

    .field-detail,
    .field-durations span {
        min-height: 39px;
        margin-bottom: 10px;
    }

    .field-btn {
        min-height: 48px;
        margin-top: 15px;
    }
}

/* Mobile program carousel: focused card with side previews */
@media (max-width: 767px) {
    .featured-field-media {
        padding:24px 36px 9px 0;
    }
    .featured-field-media > .featured-field-image { height:clamp(210px,58vw,400px); }
    .program { padding:55px 0 30px; overflow:hidden; }
    .program-curved-separator { margin-bottom:25px; }
    .program-star-orange { top:35px; right:-18px; width:78px; }
    .program-star-green { top:210px; left:-12px; width:70px; }
    .program::before { top:0; left:-8px; width:150px; height:720px; opacity:1; transform:translateY(-41%); }
    .program::after { right:-16px; bottom:-15px; width:90px; height:220px; opacity:.75; }
    .program .container { max-width:100%; padding-inline:0; }
    .program-slider-wrap { width:100%; padding:20px 0 0; overflow:hidden; }
    .program-slider {
        width:100%;
        height:270px;
        margin:0 0 22px;
        padding:0;
        overflow:visible;
        transform:none;
    }
    .program-slider::after {
        top:-12px;
        left:calc(50% - 132px);
        width:55px;
        height:62px;
    }
    /* [data-position] beats the desktop 380px side-card size, so all three cards read as cards */
    .program-card,
    .program-card[data-position] {
        top:50%;
        width:260px;
        height:212px;
        padding:0;
        border-radius:14px;
        overflow:hidden;
    }
    .program-card[data-position="0"] {
        transform:translate(-50%,-50%);
        box-shadow:0 13px 25px rgba(0,0,0,.28);
    }
    .program-card[data-position="-1"] { transform:translate(calc(-50% - 148px), calc(-50% + 22px)) rotate(6deg); }
    .program-card[data-position="1"] { transform:translate(calc(-50% + 148px), calc(-50% + 22px)) rotate(-6deg); }
    .program-card[data-position="-2"],
    .program-card[data-position="2"] { opacity:0; pointer-events:none; }
    .program-slider-controls { position:relative; z-index:8; margin-bottom:28px; }
    .program-slider-control { width:42px; height:42px; border-color:var(--green-800); color:var(--text-primary); box-shadow:0 4px 10px rgba(0,0,0,.12); }
    .program h2 { padding-inline:18px; font-size:27px; }
    .program h3 { padding-inline:18px; font-size:20px; }
    .program>div>p { padding-inline:22px; }
}

@media (max-width: 380px) {
    .featured-field-media { padding:20px 28px 7px 0; }
    .program-slider { height:235px; }
    .program-card, .program-card[data-position] { width:225px; height:183px; }
    .program-card[data-position="-1"] { transform:translate(calc(-50% - 128px), calc(-50% + 19px)) rotate(6deg); }
    .program-card[data-position="1"] { transform:translate(calc(-50% + 128px), calc(-50% + 19px)) rotate(-6deg); }
}

/* Welcome artwork takes ~75% of the screen height, cropping at most ~37% off
   top and bottom; copy and actions sit in its copy area. */
.hero-composite {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1382 / 881;
    max-height: max(75svh, 40vw);
    container-type: size;
}

.hero-composite-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Headline copy over the artwork; cqw keeps it locked to the image's scale. */
.sponsors-ads-middle { container-type: inline-size; }

.hero-copy {
    position: absolute;
    z-index: 2;
    top: 37.3%;
    right: 2.5%;
    direction: rtl;
    text-align: right;
    font-family: "Cairo", sans-serif;
    font-weight: 400;
}

.hero-copy h1 {
    margin: 0 0 2.4cqw;
    color: #85d775;
    font-size: 4.4cqw;
    font-weight: 400;
    line-height: 4.4cqw;
}

.hero-copy p {
    margin: 0;
    color: #f7f6f2;
    font-size: 2.35cqw;
    line-height: 2.82cqw;
}

/* Image-relative tops for the cropped artwork: y% of it sits at 50cqh + (y - 50)% of 63.75cqw. */
.hero-composite .hero-copy { top: calc(50cqh - 8.1cqw); }

.hero-composite .hero-buttons {
    top: calc(50cqh + 7.01cqw);
    right: 5.5%;
    left: auto;
    width: 40%;
    justify-content: flex-start;
    gap: clamp(6px, 1vw, 14px);
    flex-flow: row nowrap;
    direction: rtl;
}

.hero-composite .hero-buttons .btn-primary-custom,
.hero-composite .hero-buttons .btn-secondary-custom {
    width: auto;
    min-width: clamp(105px, 11vw, 155px);
    height: clamp(34px, 3.2vw, 46px);
    padding: 0 clamp(14px, 2vw, 28px);
    flex: 0 0 auto;
    font-size: clamp(11px, 1vw, 15px);
    white-space: nowrap;
}

@media (max-width: 767px) {
    .hero-composite .hero-buttons {
        top: 61%;
        right: 4.5%;
        width: 43%;
        gap: 4px;
    }

    .hero-composite .hero-buttons .btn-primary-custom,
    .hero-composite .hero-buttons .btn-secondary-custom {
        width: 50%;
        min-width: 0;
        height: clamp(22px, 6.5vw, 32px);
        padding: 0 4px;
        border-width: 1px;
        font-size: clamp(7px, 2vw, 10px);
    }
}

.sponsors-ads { position:relative; direction:ltr; }
.sponsors-ads-banner { display:block; width:100%; height:auto; }
.sponsors-ads-row { display:flex; align-items:stretch; justify-content:flex-start; gap:0; width:100%; direction:ltr; }
.sponsors-ads-side { position:relative; flex:0 0 auto; width:min(220px, 18vw); overflow:hidden; }
.sponsors-ads-side img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:cover; }
/* Middle fills whatever width is left after the side panel and squares
   column, and sizes its height from that width via aspect-ratio (not
   align-items:stretch) so contain never has to letterbox — the box is
   always the same shape as the image. Squares' width is solved (not just
   approximated by a ratio) so its two stacked 1:1 images plus the 14px gap
   between them add up to exactly the middle column's height, at any
   viewport width: squares_h = 2*squares_w + 14 = middle_h = middle_w *
   881/1382, with middle_w = available_w - squares_w. */
/* Scroll hint at the bottom of the hero */
.hero-scroll-hint {
    position: absolute;
    z-index: 2;
    bottom: 18px;
    left: 50%;
    display: grid;
    width: 44px;
    height: 44px;
    place-items: center;
    border-radius: 50%;
    background: var(--orange-625);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
    color: #fff;
    transform: translateX(-50%);
    animation: hero-scroll-bounce 1.8s ease-in-out infinite;
}

.hero-scroll-hint svg { width: 22px; height: 22px; }
.hero-scroll-hint:focus-visible { outline: 3px solid #f7f6f2; outline-offset: 3px; }

@keyframes hero-scroll-bounce {
    0%, 100% { transform: translate(-50%, 0); }
    50% { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
    .hero-scroll-hint { animation: none; }
}

.sponsors-ads-middle { position:relative; flex:1 1 0%; align-self:flex-start; min-width:0; aspect-ratio:1382 / 881; }
.sponsors-ads-middle img { position:absolute; inset:0; display:block; width:100%; height:100%; object-fit:contain; }
.sponsors-hero-buttons { position:absolute; z-index:2; top:61%; right:5.5%; display:flex; flex-flow:row nowrap; justify-content:center; gap:clamp(6px, 1vw, 14px); direction:rtl; }
.sponsors-hero-buttons .btn-primary-custom,
.sponsors-hero-buttons .btn-secondary-custom { width:auto; min-width:clamp(80px, 11vw, 155px); height:clamp(28px, 3.2vw, 46px); padding:0 clamp(10px, 2vw, 28px); flex:0 0 auto; font-size:clamp(10px, 1vw, 15px); white-space:nowrap; }
.sponsors-ads-squares { flex:0 0 auto; align-self:flex-start; min-width:0; width:calc((100% - min(220px, 18vw)) * 0.241701 - 5.3073px); display:flex; flex-direction:column; gap:14px; }
.sponsors-ads-squares img { display:block; width:100%; height:auto; aspect-ratio:1 / 1; object-fit:cover; }
.sponsors-ads-row--variant3 > .sponsors-ads-squares { margin-top:0; }

@media (max-width:700px) {
    .sponsors-ads-side,
    .sponsors-ads-squares { display:none; }
}

.program-manifesto strong,
.partners .section-title,
.fields h2,
.welcome-bottom > .map-section-title { font-family:Cairo,sans-serif; font-size:30px; font-weight:400; }

/* Phones: confirmation and status popups open as bottom sheets. The existing
   is-open transform transition slides them (180ms matches home.js close delay). */
@media (max-width: 767px) {
    .booking-auth-modal,
    .report-success-modal {
        place-items: end stretch;
        padding: 0;
    }

    .booking-auth-dialog,
    .report-success-dialog {
        width: 100%;
        padding-bottom: calc(24px + env(safe-area-inset-bottom));
        border-width: 2px 0 0;
        border-radius: 24px 24px 0 0;
        transform: translateY(100%);
    }
}

/* Phones: field/program details open as a bottom sheet capped at 80% of the screen:
   edge-to-edge media, readable text, and the book button pinned to the bottom. */
@media (max-width: 767px) {
    .field-modal { padding:0; place-items:end stretch; }
    .field-modal-dialog { width:100%; height:auto; max-height:80dvh; padding:0 0 calc(84px + env(safe-area-inset-bottom)); overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; border:0; border-radius:24px 24px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.25); transform:translateY(24px); }
    .field-modal-dialog::after { display:none; }
    /* Grabber handle over the media, like a native sheet. */
    .field-modal-dialog::before { position:absolute; top:8px; left:50%; z-index:7; display:block; width:36px; height:5px; border-radius:3px; background:rgba(255,255,255,.85); box-shadow:0 1px 3px rgba(0,0,0,.25); content:""; transform:translateX(-50%); }
    .field-modal.is-open .field-modal-dialog { animation:sheet-up .25s ease-out; }
    .field-modal-close { position:sticky; top:12px; left:auto; z-index:6; display:grid; place-items:center; margin:12px auto -52px 14px; width:40px; height:40px; background:var(--control-glass); box-shadow:0 2px 10px rgba(0,0,0,.2); font-size:26px; }
    .field-modal-image, .field-modal-video { height:min(300px,42dvh); border-radius:0; box-shadow:none; }
    .field-modal-media-pills, .field-modal-city, .field-modal-rating { top:18px; }
    .field-modal-rating { left:64px; }
    .field-modal-media-pills { right:14px; }
    .field-modal-content { padding:18px 16px 0; }
    .field-modal-name { padding-left:0; font-size:22px; }
    .field-modal-description { display:block; margin:8px 0 10px; font-size:14px; line-height:1.8; -webkit-line-clamp:unset; }
    .field-modal-location { font-size:14px; }
    .field-modal-info { gap:8px; margin-top:14px; padding:14px 0 0; border-bottom:0; }
    .field-modal-info > div { min-height:84px; padding:10px 6px; }
    .field-modal-info small { font-size:11px; }.field-modal-info strong { font-size:13px; }
    .field-info-icon { width:30px; height:30px; }
    .field-modal-actions { position:fixed; right:0; bottom:0; left:0; z-index:5; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--sage-150); background:var(--surface); }
    .field-modal-actions > * { width:100%; min-height:50px; padding:6px 10px 6px 20px; font-size:16px; }
    .field-modal-free-play > span:last-child { width:36px; height:36px; }
}

/* =========================================================
   PHONE HOME (≤767px only): app-style hub instead of the website sections.
   Desktop never sees these elements and keeps its original layout.
========================================================= */
.home-hub,
.home-mobile-only,
.home-see-all,
.nearby-fields { display:none; }

@media (max-width: 767px) {
    .welcome-page .hero-composite,
    .welcome-page .sponsors-ads-row,
    .welcome-page .program,
    .welcome-page .program-curved-separator,
    .welcome-page .partners,
    .welcome-page .cta-image-crop,
    .welcome-page .home-web-only { display:none; }
    .welcome-page .home-mobile-only { display:inline; }

    /* Hub: greeting, level card, next booking, quick actions */
    .home-hub { display:grid; gap:14px; padding:16px 16px 4px; }
    .home-hub-level { display:grid; gap:10px; padding:16px; border-radius:20px; background:linear-gradient(135deg, var(--green-dark), var(--green)); color:var(--text-on-brand); text-decoration:none; box-shadow:0 10px 24px rgba(0,84,71,.25); }
    .home-hub-level-top { display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
    .home-hub-level-top strong { font-size:15px; font-weight:700; }
    .home-hub-level-top span { font-size:20px; font-weight:800; white-space:nowrap; }
    .home-hub-progress { display:block; height:8px; overflow:hidden; border-radius:999px; background:rgba(255,255,255,.25); }
    .home-hub-progress i { display:block; height:100%; border-radius:inherit; background:var(--green-light); }
    .home-hub-level small { font-size:12px; opacity:.9; }

    .home-hub-next { display:flex; align-items:center; gap:12px; padding:14px; border-radius:18px; background:var(--surface); color:inherit; text-decoration:none; box-shadow:0 6px 18px rgba(7,88,71,.08); }
    .home-hub-next-icon { display:grid; flex:none; width:44px; height:44px; place-items:center; border-radius:14px; background:var(--sage-100); color:var(--dark-text, var(--green-dark)); }
    .home-hub-next-icon svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; }
    .home-hub-next-body { display:grid; gap:2px; min-width:0; }
    .home-hub-next-body small { color:var(--dark-text, var(--green)); font-size:12px; font-weight:700; }
    .home-hub-next-body strong { overflow:hidden; color:var(--text-primary); font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
    .home-hub-next-body span { overflow:hidden; color:var(--sage-700); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }

    .home-hub-join { padding:16px; border-radius:20px; background:var(--surface); box-shadow:0 6px 18px rgba(7,88,71,.08); }
    .home-hub-join p { margin:0 0 12px; color:var(--text-primary); font-size:14px; }
    .home-hub-join div { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .home-hub-join a { display:flex; width:100%; min-height:46px; align-items:center; justify-content:center; }

    /* Quick actions: picture tiles. Big field tile on the start side, the other two stacked beside it. */
    .home-hub-actions { display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(2, 104px); gap:10px; }
    .home-hub-tile { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:2px; overflow:hidden; padding:14px; border:0; border-radius:20px; color:var(--text-on-brand); font:inherit; text-align:start; text-decoration:none; box-shadow:0 8px 20px rgba(0,84,71,.18); cursor:pointer; isolation:isolate; -webkit-tap-highlight-color:transparent; transition:transform .15s ease; }
    .home-hub-tile:active { transform:scale(.97); }
    .home-hub-tile::before { position:absolute; top:-30px; left:-30px; z-index:-1; width:110px; height:110px; border-radius:50%; background:rgba(255,255,255,.12); content:""; }
    .home-hub-tile strong { font-size:17px; font-weight:800; line-height:1.3; }
    .home-hub-tile small { font-size:12px; font-weight:600; opacity:.85; }
    .home-hub-tile img { position:absolute; z-index:-1; pointer-events:none; }
    .home-hub-tile--field { grid-row:1 / 3; background:linear-gradient(160deg, var(--green) 0%, var(--green-dark) 75%); }
    .home-hub-tile--field img { bottom:-6px; left:-14px; width:88%; }
    .home-hub-tile--activity img { bottom:-8px; left:-6px; } /* taller artwork: kept narrow, clear of the text */

    /* Coaches/volunteers: shift widget, stats, two tiles side by side, tasks, fields */
    .home-hub-actions:has(> .home-hub-tile--activity) { grid-template-rows:120px; }
    .home-hub-actions:has(> .home-hub-tile--activity) .home-hub-tile--field { grid-row:auto; }
    .home-hub-tile--activity img { width:44%; }
    .home-hub-stats { display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; }
    .home-hub-stats div { display:grid; gap:2px; padding:12px 8px; border-radius:16px; background:var(--surface); text-align:center; box-shadow:0 6px 18px rgba(7,88,71,.08); }
    .home-hub-stats strong { color:var(--dark-text, var(--green-dark)); font-size:22px; font-weight:800; line-height:1.1; }
    .home-hub-stats small { color:var(--sage-700); font-size:12px; font-weight:600; }
    .home-hub-list { display:grid; gap:8px; }
    .home-hub-list header { display:flex; align-items:baseline; justify-content:space-between; }
    .home-hub-list h2 { margin:0; color:var(--text-primary); font-size:17px; font-weight:800; }
    .home-hub-list header a { color:var(--dark-text, var(--green)); font-size:14px; font-weight:700; text-decoration:none; }
    .home-hub-task { display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:16px; background:var(--surface); box-shadow:0 6px 18px rgba(7,88,71,.08); }
    .home-hub-task > a { display:flex; flex:1; align-items:center; gap:12px; min-width:0; color:inherit; text-decoration:none; }
    .home-hub-action { flex:none; min-height:36px; padding:0 14px; border:0; border-radius:999px; background:var(--green); color:var(--text-on-brand); font:inherit; font-size:13px; font-weight:800; cursor:pointer; }
    .home-hub-action.is-out { background:#ff6b2c; }
    .home-hub-action:disabled { opacity:.6; cursor:progress; }
    .home-hub-badge { flex:none; padding:6px 10px; border-radius:999px; background:var(--sage-100); color:var(--dark-text, var(--green)); font-size:12px; font-weight:800; }
    .home-hub-task time { display:grid; flex:none; min-width:56px; padding:6px 4px; border-radius:12px; background:var(--sage-100); color:var(--dark-text, var(--green-dark)); text-align:center; }
    .home-hub-task time strong { font-size:15px; font-weight:800; }
    .home-hub-task time small { font-size:11px; font-weight:600; }
    .home-hub-task > a > span { display:grid; gap:2px; min-width:0; }
    .home-hub-task > a > span strong { overflow:hidden; color:var(--text-primary); font-size:15px; text-overflow:ellipsis; white-space:nowrap; }
    .home-hub-task > a > span small { overflow:hidden; color:var(--sage-700); font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
    .home-hub-empty { margin:0; padding:16px; border-radius:16px; background:var(--surface); color:var(--sage-700); font-size:14px; text-align:center; }
    .home-hub-fields { display:flex; gap:10px; overflow-x:auto; margin:0 -16px; padding:2px 16px 8px; scrollbar-width:none; }
    .home-hub-fields div { display:grid; flex:none; gap:4px; min-width:150px; padding:12px 14px; border-radius:16px; background:var(--surface); box-shadow:0 6px 18px rgba(7,88,71,.08); }
    .home-hub-fields strong { color:var(--text-primary); font-size:14px; font-weight:800; }
    .home-hub-fields small { color:var(--sage-700); font-size:12px; }

    .home-hub-calendar-card { padding:16px; border-radius:20px; background:var(--surface); box-shadow:0 6px 18px rgba(7,88,71,.08); }
    .home-hub-calendar-card h2 { margin:0; color:var(--text-primary); font-size:17px; font-weight:800; }
    .home-hub-calendar-card .captain-shift-card { padding:0; box-shadow:none; } /* already inside a card */
    .home-hub-calendar-card .captain-history-open { width:100%; justify-content:center; }
    .home-hub-calendar-nav { display:flex; align-items:center; justify-content:space-between; margin:14px 0 10px; color:var(--text-primary); font-size:15px; }
    .home-hub-calendar-nav a { display:grid; width:32px; height:32px; place-items:center; border-radius:50%; background:var(--sage-100); color:var(--dark-text, var(--green-dark)); font-size:20px; text-decoration:none; }
    .home-hub-calendar-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:4px; text-align:center; }
    .home-hub-calendar-grid .is-weekday { color:var(--sage-700); font-size:12px; font-weight:700; }
    .home-hub-calendar-grid button { position:relative; display:grid; aspect-ratio:1; place-content:center; padding:0; border:0; border-radius:10px; background:transparent; color:var(--text-primary); font:inherit; font-size:13px; font-weight:700; line-height:1.1; cursor:pointer; }
    .home-hub-calendar-grid button i { font-size:11px; font-style:normal; }
    .home-hub-calendar-grid button.is-checked { background:var(--green); color:var(--text-on-brand); }
    .home-hub-calendar-grid button.is-missed { background:var(--red-225); color:var(--text-on-brand); }
    .home-hub-calendar-grid button.is-today { box-shadow:inset 0 0 0 2px #005447; }
    .home-hub-calendar-grid button.is-upcoming::after { position:absolute; bottom:3px; left:50%; width:5px; height:5px; border-radius:50%; background:var(--yellow-775); content:""; transform:translateX(-50%); }
    .home-hub-calendar-grid button[aria-pressed="true"] { outline:2px solid var(--yellow-775); outline-offset:1px; }
    .home-hub-calendar-detail { margin:10px 0 0; padding:10px 12px; border-radius:12px; background:var(--surface-page); color:var(--text-primary); font-size:13px; white-space:pre-line; }
    .home-hub-calendar-legend { display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:10px; color:var(--sage-700); font-size:12px; }
    .home-hub-calendar-legend i { display:inline-grid; width:14px; height:14px; margin-inline-end:5px; place-items:center; border-radius:4px; color:var(--text-on-brand); font-size:10px; font-style:normal; vertical-align:-2px; }
    .home-hub-calendar-legend i.is-checked { background:var(--green); }
    .home-hub-calendar-legend i.is-missed { background:var(--red-225); }
    .home-hub-calendar-legend i.is-upcoming { width:8px; height:8px; border-radius:50%; background:var(--yellow-775); }

    /* Coaches/volunteers can't book: drop the booking-oriented programs list and map. */
    .welcome-page:is([data-user-role="coach"], [data-user-role="volunteer"]) :is(.fields, .map-section, .map-section-title, .home-see-all) { display:none; }
    .home-hub-tile--program { background:linear-gradient(135deg, #ff8a3d 0%, var(--orange) 70%); }
    .home-hub-tile--program img { bottom:-18px; left:-10px; width:56%; }
    .home-hub-tile--calendar { background:linear-gradient(135deg, var(--yellow-425) 0%, var(--yellow) 45%, var(--yellow-775) 100%); color:var(--green-dark); }
    .home-hub-tile--calendar img { bottom:-10px; left:-12px; width:52%; border-radius:10px; box-shadow:0 4px 12px rgba(0,0,0,.15); transform:rotate(-8deg); }
    .home-hub-tile--calendar img[src*="trophy"] { bottom:-8px; left:-4px; width:40%; border-radius:0; box-shadow:none; transform:rotate(-10deg); }

    /* Sponsor banner (the only ad slot kept on phones) as a rounded card */
    .welcome-page .sponsors-ads { margin:14px 16px 0; overflow:hidden; border-radius:18px; }

    /* Section headers: small title on the right, "الكل ›" on the left */
    .home-see-all { display:inline-block; color:var(--dark-text, var(--green)); font-size:14px; font-weight:700; text-decoration:none; }

    .welcome-page .fields { padding:22px 0 6px; overflow:visible; }
    .welcome-page .fields::before,
    .welcome-page .fields h2::before,
    .welcome-page .fields h2::after { display:none; }
    .welcome-page .fields > .container { display:flex; width:100%; flex-wrap:wrap; align-items:center; justify-content:space-between; padding-inline:16px; }
    .welcome-page .fields h2 { width:auto; margin:0 0 12px; font-size:18px; font-weight:800; }
    .welcome-page .fields .home-see-all { margin-bottom:12px; }
    .welcome-page .fields-grid { flex:1 0 100%; margin-inline:-16px; padding-inline:16px; scroll-padding-inline:16px; }
    .welcome-page .field-card { flex-basis:min(80%, 320px); border:0; border-radius:20px; box-shadow:0 6px 18px rgba(7,88,71,.1); }
    .welcome-page .field-card img { height:160px; }

    .welcome-page .welcome-bottom { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; margin-top:10px; }
    /* min-width:0: without it the nearby-fields row's cards stretch the map section past the screen. */
    .welcome-page .welcome-bottom > * { flex:1 0 100%; min-width:0; }
    .welcome-page .welcome-bottom > .map-section-title { flex:0 1 auto; margin:0 0 12px; padding-inline:16px; font-size:18px; font-weight:800; }
    .welcome-page .welcome-bottom > .home-see-all { flex:none; margin-bottom:12px; padding-inline:16px; }
    .welcome-page .map-section { padding:0 0 8px; }
    .welcome-page .map-section .container { padding-inline:16px; }

}

/* =========================================================
   PHONE HOME (≤767px only), native-style sections: programs as media cards,
   nearby fields as a map + swipeable card row, partners as an inset grouped list.
========================================================= */
@media (max-width: 767px) {
    /* Section headers: app-style title weight */
    .welcome-page .fields h2,
    .welcome-page .welcome-bottom > .map-section-title { color:var(--dark-text, var(--green-900)); font-size:19px; font-weight:800; }
    .welcome-page .home-see-all { font-size:14px; font-weight:700; }

    /* Programs for you: full-bleed image card, whole card taps through to the program. */
    .welcome-page .fields-grid { gap:12px; padding-bottom:14px; }
    .welcome-page .field-card { display:flex; flex:0 0 min(76%, 300px); flex-direction:column; padding:0; border:0; border-radius:20px; background:var(--surface) !important; box-shadow:0 1px 2px rgba(7,88,71,.06), 0 6px 16px rgba(7,88,71,.08); scroll-snap-align:start; -webkit-tap-highlight-color:transparent; transition:transform .12s ease; }
    .welcome-page .field-card:has(.field-btn:active) { transform:scale(.98); }
    .welcome-page .field-card img { height:150px; border-radius:0; }
    .welcome-page .program-preview-points { top:10px; right:10px; min-height:26px; padding:3px 10px; background:rgba(0,0,0,.45); box-shadow:none; font-size:12px; pointer-events:none; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
    .welcome-page .field-body { display:flex; flex:1; flex-direction:column; gap:6px; padding:12px 14px 14px; }
    .welcome-page .field-body h3 { overflow:hidden; margin:0 0 2px; color:var(--dark-text, var(--green-900)); font-size:16px; font-weight:800; text-align:right; text-overflow:ellipsis; white-space:nowrap; }
    .welcome-page .field-detail { direction:rtl; justify-content:flex-start; gap:6px; min-height:0; margin:0; padding:0; background:none; color:var(--sage-700); font-size:13px; }
    .welcome-page .field-detail span:last-child { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .welcome-page .field-detail .field-detail-icon { flex:none; color:var(--gray-400); }
    .welcome-page .field-detail-icon svg { width:15px; height:15px; }
    /* The button's hit area covers the card; visually it's a small pill at the bottom. */
    .welcome-page .field-btn { position:static; direction:rtl; align-self:flex-start; gap:4px; width:auto; min-height:0; margin-top:6px; padding:6px 14px; border:0; border-radius:999px; background:var(--red-100); box-shadow:none; color:var(--orange); font-size:13px; }
    .welcome-page .field-btn::after { position:absolute; inset:0; content:""; }
    .welcome-page .field-btn span { display:none; }

    .welcome-page .map-wrapper { border:0; border-radius:20px; isolation:isolate; } /* keeps Leaflet's z-indexes and the hint under the app bars */

    /* Nearby fields layout: an always-on map preview with a swipeable card row under it
       (replaces the map/details tabs and the single featured card). */
    .welcome-page .mobile-map-tabs,
    .welcome-page .map-layout .featured-field { display:none !important; }
    .welcome-page .map-section[data-mobile-panel] .map-wrapper { display:block; }
    .welcome-page .map-layout { gap:0; }
    .welcome-page .map-wrapper,
    .welcome-page .map-image { min-height:0; height:clamp(320px, 52dvh, 460px); }
    /* Map controls as compact floating pills (top-left) and round buttons, like a native map. */
    .welcome-page .map-tools { top:10px; right:auto; bottom:auto; left:10px; max-width:calc(100% - 64px); flex-wrap:nowrap; align-items:center; gap:6px; }
    .welcome-page .map-tools > *,
    .welcome-page .map-fullscreen-control { flex:none; border:0; background:rgba(255,255,255,.92); box-shadow:0 1px 6px rgba(0,0,0,.18); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); -webkit-tap-highlight-color:transparent; }
    .welcome-page .map-tools .select2-container { width:auto !important; min-width:0; border-radius:999px; }
    .welcome-page .map-tools .select2-container--default .select2-selection--single { height:34px; min-height:34px; border:0; border-radius:999px; background-color:transparent; background-position:left 11px center; background-size:10px 7px; box-shadow:none; }
    .welcome-page .map-tools .select2-container--default .select2-selection--single .select2-selection__rendered { height:34px; padding:0 12px 0 28px; color:var(--dark-text, var(--green-900)); font:700 12px/34px "Cairo", sans-serif; }
    .welcome-page .map-tools .map-tool-icon,
    .welcome-page .map-fullscreen-control { width:34px; min-width:34px; height:34px; min-height:34px; padding:0; border-radius:50%; color:var(--dark-text, var(--green-900)); }
    .welcome-page .map-tools button[aria-pressed="true"] { background:var(--green-800); color:var(--text-on-brand); }
    .welcome-page .map-tool-icon svg,
    .welcome-page .map-fullscreen-control svg { width:18px; height:18px; }
    .welcome-page .map-fullscreen-control { top:10px; right:10px; }
    .welcome-page .map-tools-status { padding:4px 10px; border-radius:999px; font-size:11px; }
    :root[data-theme="dark"] .welcome-page .map-tools .select2-container,
    :root[data-theme="dark"] .welcome-page .map-tools .map-tool-icon,
    :root[data-theme="dark"] .welcome-page .map-fullscreen-control,
    :root[data-theme="dark"] .welcome-page .map-tools-status {
        border:1px solid var(--control-glass-border);
        background:var(--control-glass);
        color:var(--text-primary);
        box-shadow:0 3px 12px rgba(0,0,0,.28);
    }
    :root[data-theme="dark"] .welcome-page .map-tools .select2-selection__rendered { color:var(--text-primary) !important; }
    :root[data-theme="dark"] .welcome-page .leaflet-bar a {
        border-color:var(--control-glass-border);
        background:var(--control-glass);
        color:var(--text-primary);
    }
    @media (hover: hover) {
    :root[data-theme="dark"] .welcome-page .leaflet-bar a:hover { background:var(--surface-raised); }
            }
    .welcome-page .map-wrapper .leaflet-control-attribution { padding:0 4px; font-size:8px; line-height:1.6; }
    /* One-finger drag over the map (home.js): a short "use two fingers" hint instead of moving it. */
    .map-wrapper::after { position:absolute; inset:0; z-index:1100; display:grid; place-items:center; padding:20px; background:rgba(0,0,0,.45); color:var(--text-on-brand); font-size:15px; font-weight:800; text-align:center; content:"استخدم إصبعين لتحريك الخريطة"; opacity:0; pointer-events:none; transition:opacity .25s ease; }
    .map-wrapper.show-gesture-hint::after { opacity:1; }

    .nearby-fields { display:flex; gap:10px; margin-top:12px; padding:2px 16px 14px; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scroll-padding-inline:16px; scrollbar-width:none; }
    .nearby-fields::-webkit-scrollbar { display:none; }
    .nearby-field { display:flex; flex:0 0 min(88%, 360px); align-items:center; gap:14px; padding:12px; border:2px solid transparent; border-radius:18px; background:var(--surface); box-shadow:0 1px 2px rgba(7,88,71,.06), 0 6px 16px rgba(7,88,71,.08); color:inherit; font:inherit; text-align:right; scroll-snap-align:center; -webkit-tap-highlight-color:transparent; transition:transform .12s ease, border-color .15s ease; }
    .nearby-field:active { transform:scale(.97); }
    .nearby-field.is-active { border-color:var(--green-325); }
    .nearby-field img { flex:none; width:92px; height:92px; border-radius:14px; object-fit:cover; }
    .nearby-field span { display:grid; gap:3px; min-width:0; }
    .nearby-field strong { overflow:hidden; color:var(--dark-text, var(--green-900)); font-size:17px; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
    .nearby-field small { overflow:hidden; color:var(--sage-700); font-size:13px; text-overflow:ellipsis; white-space:nowrap; }

    /* Partners: inset grouped list, a caption and logo per row. */
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .welcome-page .field-card:has(.field-btn:active),
    .nearby-field:active { transform:none; }
}

/* Source: games.css */
.games-page { background:var(--surface); color:var(--text-primary); }
.games-page .site-header { position:relative; z-index:10; }
.games-hero-art { position:relative; width:100%; align-self:stretch; overflow:hidden; }
.games-hero-copy { width:100%; max-width:650px; padding:60px 70px; direction:rtl; text-align:right; }
.games-hero-copy h1 { margin:0 0 38px; color:var(--text-primary); font-size:72px; font-weight:900; line-height:1.2; text-align:right; }
.games-hero-copy h1 span { position:relative; z-index:1; }
.games-hero-copy h1 span::before { position:absolute; right:-18px; bottom:3px; z-index:-1; width:115%; height:55%; background:#ffd43a; content:""; transform:rotate(-2deg); }
.games-hero-copy p { max-width:570px; margin:0 0 48px; color:var(--gray-775); font-size:27px; line-height:1.75; text-align:right; }
.games-hero-copy > a { display:inline-flex; align-items:center; gap:28px; padding:11px 22px; border-radius:28px; background:var(--orange); color:var(--text-on-brand); box-shadow:0 4px 7px rgba(0,0,0,.18); font-weight:800; text-decoration:none; }
.games-catalog { position:relative; padding:70px 0 100px; overflow:hidden; background:var(--surface-page); }
.games-catalog::before,
.games-catalog::after { position:absolute; z-index:0; display:block; height:auto; content:""; pointer-events:none; }
.games-catalog::before { top:260px; right:-20px; width:clamp(105px,11vw,163px); aspect-ratio:163 / 433; background:url('/images/orangeStar.png') right center/contain no-repeat; }
.games-catalog::after { bottom:55px; left:-15px; width:clamp(90px,10vw,145px); aspect-ratio:145 / 301; background:url('/images/greenStar.png') left center/contain no-repeat; }
.games-container { position:relative; z-index:1; width:min(1100px, calc(100% - 40px)); margin:auto; }
.games-filter-title { margin:0 0 16px; font-size:20px; text-align:right; }
.games-filters { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)) minmax(90px,.75fr) auto; gap:12px; padding:14px; border:1px solid var(--sage-200); border-radius:25px; background:var(--surface-page); box-shadow:0 3px 8px rgba(0,0,0,.08); font-size:13px; }
.games-filters input, .games-filters select { box-sizing:border-box; width:100%; height:45px; padding:0 18px; border:1px solid var(--sage-200); border-radius:24px; background:var(--surface); color:var(--gray-725); font:inherit; }
.games-filters input:focus,
.games-filters input:focus-visible,
.games-filters select:focus,
.games-filters select:focus-visible { border-color:var(--input-focus); box-shadow:0 0 0 3px var(--input-focus-ring); outline:0; }
.games-filters>select{padding-right:18px;padding-left:46px;background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%2345ba61' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 17px center;background-size:12px 8px;appearance:none;-webkit-appearance:none}
/* Games/Programs filters — Tom Select skin (replaces the old Select2 skin;
   .programs-filters carries the .games-filters class too, so this covers both pages). */
.games-filters .ts-wrapper { width:100%; min-width:0; font-family:Cairo,sans-serif; }
.games-filters .ts-control { box-sizing:border-box; display:flex; overflow:hidden; flex-wrap:nowrap; align-items:center; width:100%; height:45px; min-height:45px; padding:0 14px 0 34px!important; border:1px solid var(--sage-200); border-radius:24px; background-color:var(--surface); color:var(--gray-725); font-size:13px; font-family:Cairo,sans-serif; text-align:right; cursor:pointer; }
.games-filters .ts-wrapper.single .ts-control>.item,
.games-filters .ts-summary-label { overflow:hidden; flex:1 1 auto; min-width:0; color:var(--gray-725); font-weight:400; text-overflow:ellipsis; white-space:nowrap; }
.games-filters .ts-control input { min-width:0!important; max-width:100%; font:400 13px Cairo,sans-serif; color:var(--gray-725); cursor:pointer; caret-color:transparent; text-overflow:ellipsis; }
.games-filters .ts-control input::placeholder { color:var(--gray-725); }
.games-filters .ts-wrapper.has-search-query .ts-summary-label,
.games-filters .ts-wrapper.single.has-search-query .ts-control>.item { display:none!important; }
.games-filters .ts-summary-mode .item { display:none!important; }

/* Tom Select gives single and multi controls different default borders/shadows.
   Keep every closed filter control visually identical. */
.games-filters .ts-wrapper.single:not(.dropdown-active) .ts-control,
.games-filters .ts-wrapper.multi:not(.dropdown-active) .ts-control {
    border:1px solid var(--sage-200)!important;
    border-radius:24px!important;
    background:var(--surface)!important;
    box-shadow:none!important;
    outline:0!important;
}

/* Tom Select places its RTL class on the wrapper, so position the arrow explicitly. */
.games-filters .ts-wrapper.single .ts-control:after,
.games-filters .ts-wrapper.multi .ts-control:after { left:13px!important; right:auto!important; border-top-color:var(--green-375); }
.games-filters .ts-wrapper.single.dropdown-active .ts-control:after,
.games-filters .ts-wrapper.multi.dropdown-active .ts-control:after { border-bottom-color:var(--green-375); }
.games-filters .ts-wrapper.multi .ts-control:after { border-color:var(--green-375) transparent transparent; border-style:solid; border-width:5px 5px 0; content:" "; display:block; height:0; margin-top:-3px; position:absolute; top:50%; width:0; }
.games-filters .ts-wrapper.multi.dropdown-active .ts-control:after { border-color:transparent transparent var(--green-375); border-width:0 5px 5px; margin-top:-4px; }

.games-filters .ts-wrapper.single.dropdown-active .ts-control,
.games-filters .ts-wrapper.multi.dropdown-active .ts-control { border-color:var(--input-focus); box-shadow:0 0 0 3px var(--input-focus-ring); }

.games-filters .ts-dropdown { overflow:hidden; border:1px solid var(--sage-200); border-radius:14px; background:var(--surface); font-family:Cairo,sans-serif; font-size:15px; box-shadow:0 10px 25px rgba(0,0,0,.12); }
.games-filters .ts-dropdown .ts-dropdown-input { border:1px solid var(--sage-200); border-radius:10px; font-family:Cairo,sans-serif; }
.games-filters .ts-dropdown .option { min-height:42px; padding:10px 14px; color:var(--text-primary); }
.games-filters .ts-dropdown .option.active { background:var(--green-375); color:var(--text-on-brand); }
.games-filters .ts-dropdown .option.selected { background:var(--green-50); color:var(--dark-text, var(--green-675)); }
.games-filters .ts-dropdown .option:has(.tomselect-checkbox) { display:flex; align-items:center; gap:10px; }
.games-filters .ts-dropdown .tomselect-checkbox { flex:none; width:18px; height:18px; margin:0; accent-color:var(--green-675); cursor:pointer; }
.games-search { position:relative; }
.games-search input { padding-right:46px;padding-left:18px; }
.games-search span { position:absolute;top:50%;right:17px;z-index:1;display:grid;width:20px;height:20px;place-items:center;color:var(--dark-text, var(--green-375));pointer-events:none;transform:translateY(-50%)}
.games-search span svg{display:block;width:20px;height:20px;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.games-filter-actions { display:flex; align-items:center; gap:10px; min-width:0; }
.games-filter-submit { display:flex; align-items:center; gap:8px; height:45px; padding:0 16px; border:0; border-radius:22px; background:var(--green-200); color:var(--text-on-brand); font:inherit; font-weight:800; cursor:pointer; white-space:nowrap; }
.games-filter-submit svg { width:20px; height:20px; }
.games-filter-clear { display:flex; align-items:center; height:45px; padding:0 16px; border:1px solid var(--sage-200); border-radius:22px; background:var(--surface); color:var(--gray-725); font:inherit; font-weight:700; cursor:pointer; white-space:nowrap; }
@media (hover: hover) {
.games-filter-clear:hover { background:var(--surface-page); } }
.fields-mobile-bar,.fields-filter-mobile-trigger,.fields-filter-close,.fields-filter-backdrop { display:none; }
body.fields-filter-open { overflow:hidden; }
.games-heading-row { display:flex; align-items:end; justify-content:space-between; margin:0 0 25px; }
.games-heading-row h2 { margin:0; color:var(--text-primary); font-size:40px; font-weight:900; }
.games-results-footer { position:relative; display:flex; min-height:50px; align-items:center; justify-content:center; margin-top:45px; }
.games-results-count { position:absolute; right:0; color:var(--sage-700); }
.fields-view-toggle { display:flex; gap:8px; padding:5px; border-radius:999px; background:var(--sage-150); }
.fields-view-toggle button { min-height:42px; padding:8px 20px; border:0; border-radius:999px; background:transparent; color:var(--text-primary); font:inherit; font-weight:800; cursor:pointer; }
.fields-view-toggle button.active { background:var(--green-200); color:var(--text-on-brand); box-shadow:0 3px 8px rgba(0,0,0,.12); }
.games-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:25px 18px; }
.game-card { position:relative; padding:13px; border:1px solid var(--sage-150); border-radius:20px; background:var(--surface); box-shadow:0 5px 14px rgba(0,0,0,.07); }
.game-card-distance { position:absolute; top:24px; right:24px; z-index:2; display:inline-flex; min-width:68px; min-height:30px; align-items:center; justify-content:center; padding:5px 12px; border-radius:999px; background:var(--blue-225); color:var(--text-on-brand); box-shadow:0 3px 8px rgba(0,0,0,.2); font-size:12px; font-weight:900; direction:rtl; text-decoration:none; cursor:pointer; }
@media (hover: hover) {
.game-card:hover { border-color:var(--orange); } }
.game-card > img { width:100%; height:205px; border-radius:14px; object-fit:cover; }
.game-card h3 { margin:12px 0; color:var(--dark-text, #28ad50); font-size:19px; font-weight:900; text-align:right; }
.game-card-detail { display:flex; align-items:center; justify-content:space-between; min-height:36px; margin:7px 0; padding:6px 12px; border:1px solid var(--green-125); border-radius:10px; background:var(--green-50); color:var(--dark-text, #348e62); font-size:13px; }
.game-card-detail svg { width:20px; height:20px; flex:0 0 20px; color:#68a9ff; }
.game-card-actions { display:flex; align-items:center; gap:8px; margin-top:12px; }
.game-card-button { display:flex; flex:1; align-items:center; justify-content:center; gap:48px; padding:7px; border:0; border-radius:25px; background:var(--orange); color:var(--text-on-brand); box-shadow:0 3px 6px rgba(0,0,0,.18); font:inherit; font-weight:800; cursor:pointer; }
.game-card-calendar { display:grid; width:48px; height:48px; flex:0 0 48px; place-items:center; border:2px solid var(--green-800); border-radius:50%; background:var(--surface); color:var(--text-primary); cursor:pointer; }
.game-card-calendar svg { width:24px; height:24px; }
@media (hover: hover) {
.game-card-calendar:hover { background:var(--green-50); } }
.games-empty { grid-column:1/-1; padding:70px 20px; border-radius:20px; background:var(--surface-page); color:var(--text-primary); font-size:20px; font-weight:800; text-align:center; }
.games-pagination { display:flex; align-items:center; justify-content:center; gap:8px; }
.games-pagination a, .games-pagination span { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:var(--gray-675); text-decoration:none; }
.games-pagination a.active { background:var(--green-400); color:var(--text-on-brand); }
[data-games-results] { margin-top:55px; padding:30px; scroll-margin-top:20px; border-radius:24px; background:var(--surface); transition:opacity .18s ease; }

.booking-modal[hidden] { display:none; }
body.booking-modal-open { overflow:hidden; }
.booking-modal { position:fixed; inset:0; z-index:2400; display:grid; place-items:center; padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left)); opacity:0; transition:opacity .18s ease; }
.booking-modal.is-open { opacity:1; }
.booking-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.72); backdrop-filter:blur(3px); }
.booking-dialog { position:relative; display:block; width:min(1250px,100%); max-height:calc(100vh - 24px); padding:22px 65px 20px; overflow-x:hidden; overflow-y:scroll; overscroll-behavior:contain; scrollbar-gutter:stable; -webkit-overflow-scrolling:touch; touch-action:pan-y; border-radius:40px; background:var(--surface-page); color:var(--gray-850); direction:rtl; transform:translateY(18px) scale(.98); transition:transform .18s ease; }
.booking-dialog::-webkit-scrollbar { width:9px; }
.booking-dialog::-webkit-scrollbar-track { margin:28px 0; background:transparent; }
.booking-dialog::-webkit-scrollbar-thumb { border:2px solid var(--surface-page); border-radius:10px; background:#8ecf9d; }
.booking-dialog { scrollbar-width:thin; scrollbar-color:#8ecf9d transparent; }
.booking-modal.is-open .booking-dialog { transform:none; }
.booking-close { position:absolute; top:20px; left:24px; z-index:3; display:grid; width:40px; height:40px; place-items:center; border:0; border-radius:50%; background:var(--surface); color:var(--dark-text, var(--green-825)); box-shadow:0 3px 10px rgba(0,0,0,.15); cursor:pointer; }
.booking-close svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.booking-heading { margin-bottom:20px; }
.booking-heading small { color:var(--sage-575); }
.booking-heading h2 { margin:14px 0 8px; font-size:31px; font-weight:900; }
.booking-heading h2 span { margin-right:12px; font-size:18px; font-weight:500; }
.booking-heading p { margin:0; color:var(--gray-500); font-size:17px; }
.booking-heading-with-image { display:flex; align-items:center; gap:18px; }
.booking-heading-with-image h2 { margin-top:0; }
.booking-field-image { flex-shrink:0; width:88px; height:88px; border-radius:20px; object-fit:cover; }
.booking-layout { display:grid; min-height:0; grid-template-columns:1.55fr .82fr; gap:30px; align-items:start; overflow:visible; }
.booking-calendar-panel, .booking-options { border-radius:24px; background:var(--surface); box-shadow:0 12px 25px rgba(0,0,0,.08); }
.booking-calendar-panel { padding:22px 28px; }
.booking-calendar-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:18px; }
.booking-calendar-header h3 { margin:0; font-size:20px; font-weight:900; }
.booking-calendar-header h3 span { color:var(--dark-text, var(--green-750)); }
.booking-calendar-controls { display:flex; gap:9px; direction:ltr; }
.booking-calendar-controls button { min-width:34px; height:34px; padding:0 10px; border:1px solid var(--sage-200); border-radius:8px; background:var(--surface); color:var(--gray-500); cursor:pointer; }
.booking-weekdays, .booking-calendar-days { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }
.booking-weekdays { margin-bottom:8px; color:var(--sage-700); font-weight:800; text-align:center; }
.booking-calendar-days > span { min-height:48px; }
.booking-calendar-days > button { display:flex; min-height:48px; flex-direction:column; align-items:center; justify-content:center; gap:2px; border:1px solid transparent; border-radius:10px; background:transparent; color:var(--gray-850); cursor:pointer; }
.booking-calendar-days > button strong { font-size:16px; }
.booking-calendar-days > button small { color:var(--dark-text, var(--green-325)); font-size:10px; }
.booking-calendar-days > button.is-unavailable { color:var(--gray-175); cursor:not-allowed; }
.booking-calendar-days > button.is-unavailable small { color:var(--gray-175); }
.booking-calendar-days > button.is-full { background:var(--red-50); color:var(--orange); cursor:not-allowed; }
.booking-calendar-days > button.is-full small { color:var(--orange); }
.booking-calendar-days > button.is-today { border-color:var(--green-750); }
.booking-calendar-days > button.is-selected { background:var(--green-750); color:var(--text-on-brand); }
.booking-calendar-days > button.is-selected small { color:var(--text-on-brand); }
.booking-legend { display:flex; justify-content:center; gap:25px; margin-top:14px; padding:14px 0 0; border-top:1px solid var(--sage-150); color:var(--sage-575); font-size:12px; }
.booking-legend span { display:flex; align-items:center; gap:7px; }
.booking-legend i { width:9px; height:9px; border-radius:50%; }
.booking-legend i.selected { background:var(--green-750); }.booking-legend i.full { background:var(--orange); }.booking-legend i.unavailable { background:var(--gray-175); }.booking-legend i.available { background:var(--green-325); }
.booking-sidebar { display:grid; gap:16px; }
.booking-options { padding:22px; }
.booking-options h3 { margin:0 0 16px; font-size:16px; font-weight:900; }
.booking-durations { display:grid; grid-template-columns:repeat(auto-fit,minmax(75px,1fr)); gap:8px; margin-bottom:14px; }
.booking-durations button, .booking-times button { min-height:42px; border:1px solid var(--sage-200); border-radius:25px; background:var(--surface); color:var(--dark-text, #252b29); font:inherit; cursor:pointer; }
.booking-durations button.is-selected { border-color:#0bbd86; background:#0bbd86; color:var(--text-on-brand); font-weight:800; }
.booking-times { display:grid; grid-template-columns:repeat(2,1fr); gap:7px; margin-bottom:14px; }
.booking-times button { border-color:var(--green-450); border-radius:10px; font-size:13px; }
.booking-times button.is-selected { border-color:var(--orange); background:var(--orange); color:var(--text-on-brand); }
.booking-times button.is-booked { border:1px dashed var(--sage-475); background:var(--sage-100); color:var(--gray-275); text-decoration:line-through dashed #999; cursor:not-allowed; }
.booking-times-empty { grid-column:1/-1; color:var(--gray-400); font-size:13px; }
.booking-players { display:grid; grid-template-columns:42px 60px 42px 1fr; gap:10px; align-items:center; direction:ltr; }
.booking-players button { width:38px; height:38px; border:1px solid var(--green-450); border-radius:50%; background:var(--surface); color:var(--dark-text, var(--green-450)); font-size:23px; cursor:pointer; }
.booking-players strong { padding:10px; border-radius:25px; background:var(--green-50); text-align:center; }
.booking-players small { color:var(--sage-575); text-align:right; direction:rtl; }
.booking-notes { padding:14px 22px; border:1px solid var(--status-warning-border); border-radius:12px; background:var(--status-warning-bg); color:var(--status-warning-text); }
.booking-notes h3 { margin:0 0 14px; font-size:15px; }.booking-notes ul { margin:0; padding-right:20px; font-size:12px; line-height:2.1; }
.booking-footer-actions { display:flex; width:100%; justify-content:center; gap:12px; margin:0; }
.booking-submit { display:flex; width:175px; min-height:48px; align-items:center; justify-content:space-between; gap:10px; padding:6px 10px 6px 18px; border:0; border-radius:28px; background:var(--orange); color:var(--text-on-brand); box-shadow:0 4px 8px rgba(0,0,0,.18); font:inherit; font-weight:800; white-space:nowrap; cursor:pointer; }
.booking-submit > span:last-child { display:grid; width:36px; height:36px; place-items:center; border-radius:50%; background:var(--green-150); }
.booking-back { width:145px; min-height:48px; border:2px solid var(--green); border-radius:28px; background:transparent; color:var(--dark-text, var(--green)); font:inherit; font-weight:800; cursor:pointer; }
.booking-submit:disabled { opacity:.65; cursor:wait; }
.booking-feedback { position:relative; margin:0; padding:12px 42px 12px 14px; border:1px solid var(--sage-275); border-radius:12px; background:var(--surface); color:var(--sage-800); font-size:13px; font-weight:700; line-height:1.6; text-align:right; }
.booking-feedback::before { position:absolute; top:50%; right:14px; font-size:20px; transform:translateY(-50%); }
.booking-feedback.is-error { border-color:#f0b5af; background:var(--red-100); color:var(--red-775); }.booking-feedback.is-error::before { content:"!"; }
.booking-feedback.is-success { border-color:#a9dfb7; background:var(--green-50); color:var(--dark-text, var(--green-550)); }.booking-feedback.is-success::before { content:"✓"; }

@media (max-width: 900px) {
    .games-filters { grid-template-columns:repeat(2,1fr); }
    .games-grid { grid-template-columns:repeat(2,1fr); }
    .booking-dialog { display:block; height:auto; max-height:calc(100vh - 36px); padding:35px; overflow:auto; }
    .booking-layout { grid-template-columns:1fr; overflow:visible; }
    .booking-footer-actions { width:100%; }
}

@media (max-width: 600px) {
    .games-hero { display:none; } /* the app header is the page top on phones */
    .games-catalog { padding:6px 0 24px; overflow:clip; } /* clip, not hidden, so the search bar can stick */
    .games-catalog::before, .games-catalog::after { display:none; }
    .games-container { width:min(100% - 24px,1100px); }
    /* Sticky search + filter button; drops below the short app header while it is showing (navbar.css). */
    .fields-mobile-bar { position:sticky; top:0; z-index:5; display:flex; gap:10px; margin:0 -12px; padding:10px 12px; background:var(--surface-page); transition:top .6s cubic-bezier(.2,.8,.2,1); } /* same timing as the app header (navbar.css) */
    body:has(.site-header.is-scrolled:not(.is-hidden)) .fields-mobile-bar { top:calc(56px + env(safe-area-inset-top)); }
    .fields-mobile-search { display:flex; flex:1; min-width:0; height:46px; align-items:center; gap:8px; padding:0 14px; border-radius:14px; background:var(--surface); box-shadow:0 2px 10px rgba(7,88,71,.08); }
    .fields-mobile-search svg { width:20px; height:20px; flex:none; stroke:var(--sage-575); stroke-width:2; stroke-linecap:round; }
    .fields-mobile-search input { flex:1; min-width:0; height:100%; padding:0; border:0; background:none; color:var(--dark-text, var(--green-900)); font:inherit; font-size:16px; outline:0; }
    .fields-filter-mobile-trigger { position:relative; display:grid; width:46px; height:46px; flex:none; place-items:center; border:0; border-radius:14px; background:var(--green-dark); color:var(--text-on-brand); }
    .fields-filter-mobile-trigger svg { width:22px; height:22px; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
    .fields-filter-mobile-trigger.has-filters::after { position:absolute; top:8px; left:8px; width:9px; height:9px; border:2px solid var(--green-dark); border-radius:50%; background:var(--yellow); content:""; }
    .games-filters .games-search { display:none; } /* the sticky bar is the search on phones */
    .fields-filter-backdrop:not([hidden]) { position:fixed; inset:0; z-index:2490; display:block; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); }
    .fields-filter-section { position:fixed; right:0; bottom:0; left:0; z-index:2500; display:none; max-height:85dvh; padding:52px calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)); overflow-y:auto; border-radius:22px 22px 0 0; background:var(--surface-page); box-shadow:0 20px 50px rgba(0,0,0,.3); }
    .fields-filter-section.is-open { display:block; animation:sheet-up .22s ease-out; }
    .fields-filter-close { position:absolute; top:10px; left:12px; display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:50%; background:var(--surface); color:var(--text-primary); font-size:25px; line-height:1; }
    .fields-filter-section .games-filter-title { margin-bottom:18px; }
    .games-filters { grid-template-columns:1fr; }
    .games-filter-actions { flex-direction:column; align-items:stretch; }
    .games-filter-submit,.games-filter-clear { justify-content:center; height:45px; }
    [data-games-results] { margin-top:4px; padding:0; background:transparent; }
    .games-heading-row h2 { font-size:29px; }
    .games-heading-row { align-items:center; gap:12px; margin:0 0 12px; }
    .games-results-footer { flex-direction:column; gap:8px; }
    .games-results-count { position:static; align-self:flex-start; }
    .fields-view-toggle { flex:1; }
    .fields-view-toggle { padding:3px; border-radius:12px; }
    .fields-view-toggle button { min-width:0; min-height:36px; flex:1; padding-inline:9px; border-radius:10px; font-size:13px; }
    .fields-view-toggle button.active { background:var(--surface); color:var(--dark-text, var(--green-dark)); box-shadow:0 1px 4px rgba(0,0,0,.12); }
    /* List rows: photo | name, address, size | calendar. The whole row opens the field. */
    .games-grid { display:grid; grid-template-columns:1fr; gap:10px; }
    .game-card { display:grid; grid-template-columns:88px minmax(0,1fr) auto; grid-template-rows:repeat(3,auto); align-content:center; column-gap:12px; row-gap:4px; padding:10px; border:0; border-radius:18px; box-shadow:0 4px 14px rgba(7,88,71,.08); }
    @media (hover: hover) {
    .game-card:hover { border-color:transparent; } }
    .game-card > img { grid-row:1 / 4; width:88px; height:88px; border-radius:14px; }
    .game-card h3 { grid-column:2; margin:0; overflow:hidden; color:var(--dark-text, var(--green-900)); font-size:16px; text-overflow:ellipsis; white-space:nowrap; }
    .game-card-detail { grid-column:2; justify-content:flex-start; gap:6px; min-height:0; margin:0; padding:0; border:0; background:none; color:var(--sage-700); font-size:12px; }
    .game-card-detail span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .game-card-detail svg { order:-1; width:15px; height:15px; flex-basis:15px; color:var(--dark-text, var(--green)); }
    .game-card-distance { top:14px; right:14px; min-width:0; min-height:0; padding:2px 8px; font-size:10px; }
    .game-card-actions { display:contents; }
    .game-card-button { position:absolute; inset:0; z-index:1; padding:0; border-radius:inherit; background:transparent; box-shadow:none; color:transparent; font-size:0; }
    .game-card-button:focus-visible { outline:3px solid var(--green); outline-offset:2px; }
    .game-card-button span { display:none; } /* the arrow's green circle (app-core.css) */
    .game-card-calendar { position:relative; z-index:2; grid-column:3; grid-row:1 / 4; width:44px; height:44px; flex-basis:44px; border:0; background:var(--sage-100); color:var(--dark-text, var(--green-dark)); }
    .game-card-calendar svg { width:22px; height:22px; }
    .games-empty { padding:40px 16px; background:var(--surface); font-size:16px; }
    .games-results-footer { margin-top:16px; }
    .games-results-footer .results-load-more { display:none; } /* nearing the bottom loads more (games.js) */
    .booking-modal { padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left)); }
    .booking-dialog { max-height:calc(100vh - 16px); padding:24px 14px; border-radius:22px; }
    .booking-heading { padding:0 8px; }
    .booking-heading h2 { font-size:27px; }.booking-heading h2 span { display:block; margin:8px 0 0; }
    .booking-calendar-panel, .booking-options { padding:18px 12px; border-radius:16px; }
    .booking-calendar-header { display:grid; gap:15px; }
    .booking-weekdays, .booking-calendar-days { gap:2px; font-size:11px; }
    .booking-calendar-days > button, .booking-calendar-days > span { min-height:53px; padding:2px; }
    .booking-legend { flex-wrap:wrap; gap:12px; }
    .booking-durations { grid-template-columns:repeat(auto-fit,minmax(70px,1fr)); }
    .booking-footer-actions { flex-direction:column; }
    .booking-submit, .booking-back { width:100%; }
}

/* When a sponsor side/square ad is active for this page, the hero renders
   as the flex "middle" of .sponsors-ads-row (see games.blade.php) so the ad
   flanks the page's own untouched hero instead of duplicating it. */
.sponsors-ads-row > .games-hero { flex:1 1 0%; min-width:0; }

/* Active-filter chips (games + programs): one full-width row under the
   filter bar, hidden until something is selected. */


/* Phones: booking (fields and programs) is a bottom sheet 80% of the screen tall over the dimmed page,
   with the confirm bar pinned to the bottom. Tapping the dimmed part closes it. */
@media (max-width: 767px) {
    .booking-modal { padding:0; place-items:end stretch; }
    .booking-dialog { width:100%; height:80dvh; max-height:none; padding:18px 14px 24px; border-radius:24px 24px 0 0; box-shadow:0 -10px 40px rgba(0,0,0,.25); }
    .booking-modal.is-open .booking-dialog { animation:sheet-up .25s ease-out; }
    .booking-close { position:sticky; top:0; float:left; z-index:6; margin:-4px -2px 0 0; }
    .booking-heading { padding:0 0 0 50px; }
    .booking-heading h2 { font-size:22px; }
    .booking-field-image { width:64px; height:64px; border-radius:14px; }
    .booking-dialog:has(.booking-footer-actions) { padding-bottom:calc(96px + env(safe-area-inset-bottom)); }
    .booking-footer-actions { position:fixed; right:0; bottom:0; left:0; z-index:5; flex-direction:row; gap:10px; padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--sage-150); background:var(--surface); }
    .booking-footer-actions .booking-submit { flex:2; width:auto; }
    .booking-footer-actions .booking-back { flex:1; width:auto; }
}

/* Phones: the Fields / Programs filter sheet looks like an iOS sheet: grabber, compact title
   bar, pills and checkmark lists (js/filter-sheet.js) instead of dropdowns, and a bottom bar
   pinned under the list with reset beside apply. Scoped to the open sheet, so the desktop
   filter bar is untouched. */
.filter-options { display:none; }
/* Pill / checkmark-list controls, shown wherever a page reveals .filter-options (Activities too). */
.filter-options-title { margin:0 2px 8px; color:var(--sage-625); font-size:13px; font-weight:700; }
.filter-options-pills { display:flex; flex-wrap:wrap; gap:8px; }
.filter-options-pills button { min-height:38px; padding:0 16px; border:1px solid var(--sage-200); border-radius:19px; background:var(--surface); color:var(--text-primary); font:inherit; font-size:14px; font-weight:700; -webkit-tap-highlight-color:transparent; }
.filter-options-pills button[aria-pressed="true"] { border-color:var(--green-dark); background:var(--green-dark); color:var(--text-on-brand); }
/* 16px stops iOS from zooming the page when the search is focused. */
.filter-options-search { box-sizing:border-box; width:100%; height:40px; margin:0 0 8px; padding:0 14px; border:1px solid transparent; border-radius:12px; background:var(--sage-100); color:var(--dark-text, var(--green-900)); font:inherit; font-size:16px; outline:0; }
.filter-options-search:focus { border-color:var(--green-325); background:var(--surface); }
.filter-options-list button[hidden] { display:none; }
.filter-options-list { max-height:236px; overflow-y:auto; overscroll-behavior:contain; border-radius:14px; background:var(--surface); }
.filter-options-list button { display:flex; width:100%; min-height:46px; align-items:center; justify-content:space-between; gap:12px; padding:0 16px; border:0; border-bottom:1px solid var(--sage-100); background:none; color:var(--text-primary); font:inherit; font-size:15px; text-align:right; -webkit-tap-highlight-color:transparent; }
.filter-options-list button:last-child { border-bottom:0; }
.filter-options-list button[aria-pressed="true"] { color:var(--dark-text, var(--green-dark)); font-weight:800; }
.filter-options-list button[aria-pressed="true"]::after { flex:none; width:6px; height:12px; margin-bottom:3px; border:solid var(--green); border-width:0 2.5px 2.5px 0; content:""; transform:rotate(45deg); }
@media (max-width: 700px) {
    :is(.fields-filter-section, .programs-filter-section).is-open { padding-top:12px; padding-bottom:0; background:var(--surface-page); }
    :is(.fields-filter-section, .programs-filter-section).is-open::before { position:absolute; top:6px; left:50%; width:36px; height:5px; border-radius:3px; background:var(--sage-275); content:""; transform:translateX(-50%); }
    :is(.fields-filter-section, .programs-filter-section).is-open .games-filter-title { margin:4px 44px 10px; font-size:17px; line-height:34px; text-align:center; }
    :is(.fields-filter-section, .programs-filter-section).is-open :is(.fields-filter-close, .programs-filter-close) { top:16px; }
    :is(.fields-filter-section, .programs-filter-section).is-open .games-filters { gap:18px; padding:0; border:0; background:none; box-shadow:none; }
    :is(.fields-filter-section, .programs-filter-section).is-open .ts-wrapper { display:none; }

    :is(.fields-filter-section, .programs-filter-section).is-open .filter-options { display:block; }

    :is(.fields-filter-section, .programs-filter-section).is-open .games-filter-actions { position:sticky; bottom:0; flex-direction:row; align-items:center; gap:12px; margin:0 -18px; padding:12px 18px calc(12px + env(safe-area-inset-bottom)); border-top:1px solid var(--sage-150); background:var(--surface-page); }
    :is(.fields-filter-section, .programs-filter-section).is-open .games-filter-clear { flex:none; height:52px; padding:0 8px; border:0; background:none; color:var(--dark-text, var(--green-dark)); font-size:15px; font-weight:800; }
    :is(.fields-filter-section, .programs-filter-section).is-open .games-filter-submit { flex:1; justify-content:center; height:52px; border-radius:16px; font-size:17px; }
    :is(.fields-filter-section, .programs-filter-section).is-open .games-filter-submit svg { display:none; }
}

/* Paid bookings: the green arrow circle must never shrink when the label grows ("ادفع 25 ر.س واحجز"). */
.booking-submit { width:auto; min-width:175px; }
.booking-submit > span:last-child { flex:none; }

/* Payment popup (public/js/payment-popup.js): header (timer · title · ×), 2-step bar, booking card, amount, card form panel. */
.payment-modal { position:fixed; inset:0; z-index:1100; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,23,20,.55); opacity:0; transition:opacity .18s ease; direction:rtl; }
.payment-modal.is-open { opacity:1; }
.payment-modal[hidden] { display:none; }
.payment-modal-dialog { position:relative; width:min(440px,100%); max-height:calc(100dvh - 32px); overflow-y:auto; padding:18px 20px 20px; border-radius:24px; background:var(--surface); box-shadow:0 18px 40px rgba(0,0,0,.18); transform:translateY(12px); transition:transform .18s ease; }
.payment-modal.is-open .payment-modal-dialog { transform:none; }
.payment-modal .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.payment-modal [hidden] { display:none !important; }

.payment-modal-head { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; margin-bottom:18px; }
.payment-modal-head h2 { grid-column:2; margin:0; font-size:19px; font-weight:900; color:var(--gray-850); }
.payment-modal-timer { grid-column:1; justify-self:start; display:inline-flex; align-items:center; gap:6px; margin:0; padding:7px 12px; border-radius:999px; background:var(--green-75); color:var(--dark-text, var(--green-dark)); font-size:14px; font-weight:800; }
.payment-modal-timer svg { width:17px; height:17px; }
.payment-modal-timer b { font-weight:800; font-variant-numeric:tabular-nums; }
.payment-modal-timer.is-urgent { background:var(--status-danger-bg); color:var(--red-850); }
.payment-modal-close { grid-column:3; justify-self:end; display:grid; width:36px; height:36px; place-items:center; padding:0; border:0; background:none; color:var(--gray-850); cursor:pointer; }
.payment-modal-close svg { width:24px; height:24px; }

.payment-modal-steps { display:flex; margin:0 0 18px; padding:0; list-style:none; }
.payment-modal-steps li { position:relative; flex:1; display:grid; justify-items:center; gap:8px; color:var(--slate-500); font-size:14px; font-weight:700; }
.payment-modal-steps li span { position:relative; z-index:1; display:grid; width:34px; height:34px; place-items:center; border-radius:50%; background:#c9cdcb; color:#fff; font-size:15px; font-weight:800; }
/* Connector between the two circles: green once step 2 is reached, half green before. */
.payment-modal-steps li + li::before { content:""; position:absolute; top:16px; right:-50%; left:50%; height:3px; background:linear-gradient(to left, var(--green-dark) 50%, #d9dcda 50%); }
.payment-modal-steps li.is-active { color:var(--gray-850); }
.payment-modal-steps li.is-active span { background:var(--green-dark); }
.payment-modal-steps li.is-active + li.is-active::before { background:var(--green-dark); }
.payment-modal-steps li.is-done span { font-size:0; background:var(--green-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/18px no-repeat; }

.payment-modal-summary { margin:0 0 18px; }
.payment-modal-booking { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:14px 16px; border:1px solid var(--sage-150); border-radius:18px; background:var(--surface); }
.payment-modal-field { display:flex; align-items:center; gap:12px; min-width:0; }
.payment-modal-field-icon { display:grid; flex:none; width:50px; height:50px; place-items:center; border-radius:14px; background:var(--green-75); color:var(--dark-text, var(--green-dark)); }
.payment-modal-field-icon svg { width:24px; height:24px; }
.payment-modal-field small { display:block; color:var(--slate-500); font-size:13px; }
.payment-modal-field b { display:block; font-size:16px; font-weight:900; color:var(--gray-850); overflow-wrap:anywhere; }
.payment-modal-booking ul { display:grid; gap:10px; flex:none; margin:0; padding:0; list-style:none; font-size:14px; direction:ltr; }
.payment-modal-booking li { display:flex; align-items:center; gap:10px; }
.payment-modal-booking li svg { flex:none; width:17px; height:17px; color:#8f9793; }
.payment-modal-booking li bdi { font-weight:600; color:var(--gray-850); }
.payment-modal-amount { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding:16px 18px; border-radius:16px; background:var(--status-info-bg); }
.payment-modal-amount span { color:var(--dark-text, #6b4a36); font-size:15px; font-weight:700; }
.payment-modal-amount strong { font-size:26px; font-weight:900; color:var(--orange); }
.payment-modal-note { display:block; margin-top:10px; color:var(--slate-500); font-size:12px; line-height:1.7; }
@media (max-width:380px) {
    .payment-modal-booking { flex-direction:column; align-items:stretch; }
    .payment-modal-booking ul { padding-top:12px; border-top:1px solid var(--sage-150); }
}

.payment-modal-form-title { margin:0 0 12px; padding:0; font-size:19px; font-weight:900; color:var(--gray-850); }
.payment-modal-form { padding:16px; border-radius:18px; background:var(--surface-page); }
.payment-modal-dialog.is-verifying .payment-modal-form { padding:0; background:none; }
.payment-modal-pay-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.payment-modal-pay-head button { padding:0; border:0; background:none; color:var(--dark-text, var(--green-dark)); font:inherit; font-size:13px; font-weight:800; text-decoration:underline; cursor:pointer; }

/* Step 1: choose a payment method. */
.payment-modal-methods { display:grid; gap:12px; margin:0; padding:0; border:0; min-width:0; }
.payment-modal-methods label { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--sage-150); border-radius:16px; background:var(--surface); cursor:pointer; transition:border-color .15s, background .15s; }
.payment-modal-methods label:has(input:checked) { border:2px solid var(--green-dark); padding:13px 15px; background:var(--green-50); }
.payment-modal-methods label > span:last-of-type { display:grid; gap:2px; min-width:0; }
.payment-modal-methods b { font-size:16px; font-weight:900; color:var(--gray-850); }
.payment-modal-methods label small { color:var(--slate-500); font-size:13px; }
.payment-modal-methods input { order:3; flex:none; width:24px; height:24px; margin:0 auto 0 0; border:2px solid #c9cdcb; border-radius:50%; background:var(--surface); appearance:none; cursor:pointer; }
.payment-modal-methods input:checked { border-color:var(--green-dark); background:var(--green-dark) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center/14px no-repeat; }
.payment-modal-methods input:focus-visible { outline:2px solid var(--green-dark); outline-offset:2px; }
.payment-modal-method-logo { display:grid; flex:none; width:58px; height:50px; place-items:center; border-radius:12px; color:var(--gray-850); }
.payment-modal-method-logo svg { width:34px; height:34px; }
.payment-modal-method-logo.is-stc { align-content:center; gap:0; background:#4f1b8f; color:#fff; font-size:20px; font-weight:900; line-height:1; direction:ltr; }
.payment-modal-method-logo.is-stc small { color:#d7b8ff; font-size:11px; }
.payment-modal-continue { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:56px; margin-top:6px; border:0; border-radius:16px; background:var(--green-dark); color:#fff; font:inherit; font-size:18px; font-weight:800; box-shadow:0 6px 14px rgba(0,84,71,.22); cursor:pointer; }
.payment-modal-continue svg { width:22px; height:22px; }
.payment-modal-feedback { margin:0 0 12px; color:var(--red-850); font-size:13px; font-weight:700; }
.payment-modal-loading { padding:28px 0; text-align:center; color:var(--slate-500); font-weight:700; }
.payment-modal-verify-timer { display:flex; align-items:center; gap:8px; margin:0 0 12px; padding:10px 14px; border-radius:14px; background:var(--green-75); color:var(--dark-text, var(--green-dark)); font-size:14px; font-weight:800; }
.payment-modal-verify-timer svg { flex:none; width:18px; height:18px; }
.payment-modal-verify-timer b { margin-inline-start:auto; font-size:17px; font-variant-numeric:tabular-nums; }
.payment-modal-verify-timer.is-urgent { background:var(--status-danger-bg); color:var(--red-850); }
/* STC Pay OTP when the popup reopens on it (Moyasar's own dialog can't be restored). */
.payment-modal-otp { display:grid; gap:12px; }
.payment-modal-otp label { color:var(--gray-850); font-size:15px; font-weight:700; }
.payment-modal-otp input { min-height:62px; padding:0 16px; border:0; border-radius:14px; background:var(--surface); color:var(--text-primary); box-shadow:0 0 0 1px var(--sage-200); font:inherit; font-size:22px; font-weight:800; letter-spacing:.5em; text-align:center; }
.payment-modal-otp input:focus { outline:0; box-shadow:0 0 0 2px var(--green-dark); }
.payment-modal-otp-error { margin:0; color:var(--red-850); font-size:13px; font-weight:700; }
.payment-modal-otp button:disabled { opacity:.6; cursor:wait; }
.payment-modal-3ds { display:block; width:100%; height:min(560px,70dvh); border:0; border-radius:16px; background:var(--surface); }
.payment-modal-confirm { position:absolute; inset:0; z-index:2; display:flex; align-items:center; justify-content:center; padding:16px; background:rgba(15,23,20,.45); }
.payment-modal-confirm section { display:grid; gap:16px; width:min(360px,100%); padding:24px 20px; border-radius:22px; background:var(--surface); box-shadow:0 18px 40px rgba(0,0,0,.2); text-align:center; }
.payment-modal-confirm p { margin:0; color:var(--gray-850); font-size:15px; font-weight:800; line-height:1.8; }
.payment-modal-confirm section div { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.payment-modal-confirm button { min-height:44px; padding:0 20px; border:1px solid var(--sage-200); border-radius:28px; background:var(--surface); color:var(--gray-850); font:inherit; font-weight:800; cursor:pointer; }
.payment-modal-confirm .payment-modal-confirm-yes { border-color:var(--red-850); background:var(--red-850); color:var(--text-on-brand); }
.payment-modal-confirm button:disabled { opacity:.6; cursor:wait; }
@media (max-width:640px) {
    .payment-modal { align-items:flex-end; padding:0; }
    .payment-modal-dialog { width:100%; max-height:92dvh; border-radius:24px 24px 0 0; }
}

/* Moyasar form (v2, Tailwind scoped under div#mysr) re-themed to the Nawel payment design:
   card number → expiry + CVV → card holder, each with its own label and icon, green pay button.
   Moyasar ships one "معلومات البطاقة" legend for the fused number/expiry/CVC box, so the
   per-field labels are drawn with CSS (legend text swapped, grid ::before/::after). */
body div#mysr, body div#mysr * { font-family:"Cairo", sans-serif !important; }
body div#mysr > div.box-border { max-width:none !important; }
body div#mysr .bg-primary { background-color:var(--green-dark) !important; }
body div#mysr button.bg-primary, body div#mysr button.bg-stc { min-height:56px; border-radius:16px !important; font-size:18px !important; font-weight:800 !important; }
body div#mysr button.bg-primary { box-shadow:0 6px 14px rgba(0,84,71,.22) !important; }
body div#mysr .text-primary-400 { color:var(--dark-text, var(--green-dark)) !important; }
body div#mysr input.shadow-input { min-height:54px; border-radius:14px !important; background:#fff no-repeat left 16px center/20px !important; font-size:15px !important; box-shadow:0 0 0 1px #dfe3e0 !important; }
body div#mysr input.shadow-input:focus { box-shadow:0 0 0 2px var(--green-dark) !important; }
body div#mysr input.shadow-input-error, body div#mysr input.shadow-input[error]:not([error=""]) { box-shadow:0 0 0 1px #ef9896 !important; }
body div#mysr label, body div#mysr legend { color:var(--gray-850); font-size:15px; font-weight:700; }

body div#mysr form.space-y-6 { display:flex; flex-direction:column; gap:16px; }
body div#mysr form.space-y-6 > * { margin:0 !important; }
body div#mysr form.space-y-6 > [aria-label="معلومات البطاقة"] { order:1; }
body div#mysr form.space-y-6 > [aria-label="الاسم على البطاقة"] { order:2; }
body div#mysr form.space-y-6 > button { order:3; margin-top:8px !important; }
body div#mysr legend { font-size:0; }
body div#mysr legend::after { content:"رقم البطاقة"; font-size:15px; }
body div#mysr label[for="mysr-cc-name"] { font-size:0; }
body div#mysr label[for="mysr-cc-name"]::after { content:"اسم حامل البطاقة"; font-size:15px; }
/* The card group is laid out as one grid so each of Moyasar's error slots sits under its own
   field. Its inner number/expiry/CVC box and error <p> become `display:contents` (their
   children join this grid); the grid is RTL, so column 1 is the right one (CVV, as designed).
   Error slots come in a fixed order: csc, cc, exp, exp_month, exp_year.
   1 label "رقم البطاقة" · 2 number · 3 its error · 4 CVV / expiry labels · 5 inputs · 6-8 errors */
body div#mysr [aria-label="معلومات البطاقة"] { display:grid !important; grid-template-columns:1fr 1fr; column-gap:12px; }
body div#mysr [aria-label="معلومات البطاقة"] > * { margin:0 !important; }
body div#mysr [aria-label="معلومات البطاقة"] > div:first-child { grid-row:1; grid-column:1 / -1; margin-bottom:8px !important; }
body div#mysr [aria-label="معلومات البطاقة"] span.uppercase.text-error { display:none !important; }
body div#mysr .grid-cols-2, body div#mysr [aria-label="معلومات البطاقة"] > p.text-error { display:contents !important; }
body div#mysr .grid-cols-2::before, body div#mysr .grid-cols-2::after { grid-row:4; margin:16px 0 8px; color:var(--gray-850); font-size:15px; font-weight:700; }
body div#mysr .grid-cols-2::after { content:"رمز الأمان (CVV)"; grid-column:1; }
body div#mysr .grid-cols-2::before { content:"تاريخ الانتهاء"; grid-column:2; }
body div#mysr .grid-cols-2 input { border-radius:14px !important; padding-left:48px !important; }
body div#mysr #mysr-cc-number { grid-row:2; grid-column:1 / -1; padding-right:120px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f9793' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20M6 15h4'/%3E%3C/svg%3E") !important; }
body div#mysr #mysr-cc-csc { grid-row:5; grid-column:1; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f9793' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E") !important; }
body div#mysr #mysr-cc-exp { grid-row:5; grid-column:2; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f9793' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E") !important; }
body div#mysr #mysr-cc-name { padding-left:48px !important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238f9793' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21a8 8 0 0 1 16 0'/%3E%3C/svg%3E") !important; }
/* Empty card fields read right-to-left (Arabic placeholder on the right); typed digits / names stay LTR. */
body div#mysr :is(#mysr-cc-name, #mysr-cc-number, #mysr-cc-exp, #mysr-cc-csc):placeholder-shown { direction:rtl; text-align:right; }
body div#mysr :is(#mysr-cc-name, #mysr-cc-number, #mysr-cc-exp, #mysr-cc-csc)::placeholder { color:#9aa29e; opacity:1; }
body div#mysr .grid-cols-2 > .absolute { position:static !important; grid-row:2; grid-column:1 / -1; justify-self:start; align-self:center; margin-right:14px; transform:none !important; pointer-events:none; }
body div#mysr [aria-label="معلومات البطاقة"] > p.text-error > span:nth-child(1) { grid-row:6; grid-column:1; }
body div#mysr [aria-label="معلومات البطاقة"] > p.text-error > span:nth-child(2) { grid-row:3; grid-column:1 / -1; }
body div#mysr [aria-label="معلومات البطاقة"] > p.text-error > span:nth-child(3) { grid-row:6; grid-column:2; }
body div#mysr [aria-label="معلومات البطاقة"] > p.text-error > span:nth-child(4) { grid-row:7; grid-column:2; }
body div#mysr [aria-label="معلومات البطاقة"] > p.text-error > span:nth-child(5) { grid-row:8; grid-column:2; }
/* Each error: right-aligned under its field, red alert icon on the right before the text. */
body div#mysr [aria-label="معلومات البطاقة"] > p.text-error > span:not(:empty),
body div#mysr [aria-label="الاسم على البطاقة"] > p.text-error { display:flex !important; align-items:flex-start; gap:6px; margin:6px 0 0 !important; direction:rtl; text-align:right; color:var(--red-850); font-size:13px; font-weight:700; line-height:1.5; }
body div#mysr [aria-label="معلومات البطاقة"] > p.text-error > span:not(:empty)::before,
body div#mysr [aria-label="الاسم على البطاقة"] > p.text-error::before { content:""; flex:none; width:16px; height:16px; margin-top:2px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b42318' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center/contain no-repeat; }

/* STC Pay: Moyasar's mobile → OTP dialog, as a white sheet above the payment popup. */
body div#mysr .fixed.inset-0.z-10 > div { gap:18px; padding:24px 20px calc(24px + env(safe-area-inset-bottom)) !important; border-radius:24px 24px 0 0 !important; background:var(--surface) !important; box-shadow:0 -10px 30px rgba(0,0,0,.18) !important; }
/* Same breakpoint as the payment popup: a bottom sheet on phones, a centred 440px card above it (Moyasar forces w-full !important). */
@media (min-width:641px) {
    body div#mysr .fixed.inset-0.z-10 { justify-content:center !important; }
    body div#mysr .fixed.inset-0.z-10 > div { width:min(440px,calc(100% - 32px)) !important; max-width:none !important; margin-inline:auto !important; border-radius:24px !important; }
}
body div#mysr .fixed.inset-0.z-10 button.ms-auto { color:var(--slate-500); font-size:0; }
body div#mysr .fixed.inset-0.z-10 button.ms-auto::after { content:"إلغاء"; font-size:14px; font-weight:800; }
body div#mysr #mysr-stc-mobile, body div#mysr #mysr-stc-otp { font-size:20px !important; font-weight:800; letter-spacing:.12em; }
body div#mysr #mysr-stc-otp { min-height:62px; letter-spacing:.5em; }

/* Source: programs.css */
.programs-page { background:var(--surface-page); color:var(--dark-text, #263d36); }
body.programs-filter-open { overflow:hidden; }
.programs-page .site-header { position:relative; z-index:10; background:var(--surface-page); }
.programs-hero-art { position:relative; align-self:stretch; overflow:hidden; }
.programs-hero-copy { max-width:650px; padding:60px 70px; direction:rtl; }
.programs-hero-copy h1 { margin:0 0 38px; color:var(--text-primary); font-size:72px; font-weight:900; }
.programs-hero-copy h1 span { position:relative; z-index:1; }.programs-hero-copy h1 span::before { position:absolute; right:-17px; bottom:3px; z-index:-1; width:112%; height:52%; background:var(--yellow); content:""; transform:rotate(-2deg); }
.programs-hero-copy p { max-width:570px; margin:0 0 48px; color:var(--gray-775); font-size:27px; line-height:1.75; }
.programs-hero-copy > a { display:inline-flex; align-items:center; gap:24px; padding:9px 18px; border-radius:28px; background:var(--blue-225); color:var(--text-on-brand); box-shadow:0 4px 7px rgba(0,0,0,.2); font-weight:800; text-decoration:none; }
.programs-catalog { padding:56px 0 96px; background:var(--surface); }
.programs-container { width:min(1380px,100%); margin-inline:auto; padding-inline:clamp(24px,4vw,64px); }
.programs-filter-section { width:min(1100px,100%); margin:0 auto 42px; }
.programs-mobile-bar,.program-card-cover,.programs-filter-mobile-trigger,.programs-filter-close,.programs-filter-backdrop { display:none; }
.programs-filters { margin-bottom:0; background:var(--surface); }
.programs-calendar { width:min(1100px,100%); margin:0 auto 42px; padding:24px; border-radius:20px; background:var(--surface); box-shadow:0 5px 16px rgba(21,76,61,.045); }
.programs-calendar-header h3 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.programs-calendar-navigation { display:inline-flex; align-items:center; gap:8px; }
.programs-calendar-header h3 button { min-width:30px; height:30px; padding:0 8px; border:1px solid var(--sage-200); border-radius:8px; background:var(--surface); color:var(--gray-500); font-size:14px; cursor:pointer; }
/* Month/year popover from calendar-month-picker.js (programs + player activities). */
.calendar-month-picker-anchor { position:relative; }
.calendar-month-picker { position:absolute; top:calc(100% + 8px); left:50%; z-index:30; display:grid; width:260px; gap:10px; padding:12px; border:1px solid var(--sage-200); border-radius:14px; background:var(--surface); box-shadow:0 10px 25px rgba(0,0,0,.12); color:var(--text-primary); font:400 13px Cairo,sans-serif; transform:translateX(-50%); }
.calendar-month-picker[hidden] { display:none; }
.calendar-month-picker input { box-sizing:border-box; width:100%; height:36px; padding:0 10px; border:1px solid var(--sage-200); border-radius:10px; color:var(--text-primary); font:700 14px Cairo,sans-serif; text-align:center; }
.calendar-month-picker input:focus-visible { border-color:var(--input-focus); box-shadow:0 0 0 3px var(--input-focus-ring); outline:0; }
.calendar-month-picker-months { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.programs-calendar-header .calendar-month-picker-months button { min-width:0; height:34px; padding:0 4px; border:1px solid var(--sage-150); border-radius:10px; background:var(--surface); color:var(--text-primary); font:600 12px Cairo,sans-serif; white-space:nowrap; }
@media (hover: hover) {
.programs-calendar-header .calendar-month-picker-months button:hover { border-color:var(--green-325); background:var(--sage-50); } }
.programs-calendar-header .calendar-month-picker-months button.is-selected { border-color:var(--green-325); background:var(--green-325); color:var(--text-on-brand); }
.programs-calendar-days > button { position:relative; }
.programs-calendar-days > button.is-closed { background:var(--sage-100); color:var(--gray-175); cursor:not-allowed; }
.programs-calendar-days > button.is-closed small { color:var(--gray-175); font-size:10px; }
@media (hover: hover) {
.programs-calendar-days > button.is-open:hover { border-color:var(--green-325); } }
.programs-calendar-days > button.is-today { border:2px dashed var(--green-325); background:var(--surface); }
.programs-calendar-days > button.is-today small { color:var(--dark-text, var(--green-325)); font-size:10px; }
.programs-calendar-days > button.is-picked { background:var(--orange); color:var(--text-on-brand); }
.programs-calendar-days > button.is-picked small { color:var(--text-on-brand); font-size:10px; }
.programs-calendar-lock { width:11px; height:11px; }
.programs-calendar-badge { position:absolute; top:-8px; right:-8px; display:grid; min-width:20px; height:20px; place-items:center; padding:0 5px; border-radius:50%; font-size:11px; font-weight:900; box-shadow:0 2px 4px rgba(0,0,0,.2); }
.programs-calendar-days > button.is-today .programs-calendar-badge { background:var(--green-325); color:var(--text-on-brand); }
.programs-calendar-days > button.is-picked .programs-calendar-badge { background:var(--surface); color:var(--orange); }
.programs-calendar-dots { display:flex; gap:3px; }
.programs-calendar-dots i { display:block; width:6px; height:6px; border-radius:50%; }
.programs-results-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:24px; color:var(--text-primary); }
.programs-results-heading h2 { margin:0; font-size:32px; font-weight:900; }
.programs-results-footer { position:relative; display:flex; min-height:50px; align-items:center; justify-content:center; margin-top:8px; }
.programs-results-count { position:absolute; right:0; color:var(--sage-700); }
[data-program-results] { scroll-margin-top:20px; transition:opacity .18s ease; }
.programs-page .program-card { position:relative; top:auto; left:auto; display:grid; width:100%; height:auto; min-height:326px; grid-template-columns:minmax(300px,28%) minmax(0,1fr); gap:20px; margin-bottom:42px; padding:54px 20px 20px; overflow:visible; border:1px solid var(--sage-150); border-radius:20px; background:var(--surface); box-shadow:0 5px 16px rgba(21,76,61,.045); opacity:1; visibility:visible; align-items:stretch; direction:ltr; transform:none; }
.program-card-side { position:relative; display:flex; height:100%; flex-direction:column; justify-content:flex-end; gap:10px; align-self:end; padding-bottom:68px; }
.program-card-distance { position:absolute; top:-46px; right:0; z-index:2; display:inline-flex; min-width:68px; min-height:30px; align-items:center; justify-content:center; padding:5px 12px; border-radius:999px; background:var(--orange); color:var(--text-on-brand); box-shadow:0 3px 8px rgba(0,0,0,.2); font-size:12px; font-weight:900; direction:rtl; text-decoration:none; cursor:pointer; }
.program-points { position:absolute; top:-48px; left:0; display:inline-flex; min-width:100px; height:34px; align-items:center; justify-content:center; padding:0 17px; border:1px solid var(--orange); border-radius:18px; background:var(--orange); color:var(--text-on-brand); box-shadow:0 3px 9px rgba(21,76,61,.08); font-size:13px; font-weight:900; direction:rtl; }
.program-points-mobile { display:none; }
.program-card-distance-mobile { display:none; }
.program-card-info { display:grid; grid-template-columns:1fr 1fr; gap:10px; direction:rtl; }
.program-info-pill { display:flex; height:40px; align-items:center; justify-content:flex-start; gap:8px; padding:0 14px; border:1px solid var(--sage-200); border-radius:999px; background:var(--surface); color:var(--gray-850); font-size:12px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.program-info-location { min-width:0; text-decoration:none; }.program-info-location span { min-width:0; overflow:hidden; text-overflow:ellipsis; }
.program-info-pill svg { width:18px; height:18px; flex:none; fill:none; stroke:var(--green-325); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.program-book { position:absolute; bottom:20px; left:0; display:flex; width:calc((100% - 10px) / 2); height:40px; align-items:center; justify-content:flex-end; padding:3px 20px 3px 42px; border:0; border-radius:22px; color:var(--text-on-brand); font:inherit; font-size:12px; font-weight:800; cursor:pointer; }
.program-book-orange { background:var(--orange); }.program-book-blue { background:var(--blue-225); }.program-book span { position:absolute; left:4px; width:31px; height:31px; background:var(--green-150); font-size:15px; }
.program-card-body { display:flex; min-width:0; flex-direction:column; background:var(--surface); direction:rtl; }
.program-card-body header { display:flex; height:45px; flex:none; align-items:start; justify-content:space-between; gap:28px; padding-inline:8px; }
.program-card-body header > div { display:flex; align-items:baseline; gap:10px; }.program-card-body h2 { margin:0; color:var(--orange); font-size:25px; font-weight:900; line-height:1.2; white-space:nowrap; }.program-card-body h2 strong { color:inherit; }
.program-level-badge { display:inline-flex; flex:none; align-items:center; justify-content:center; height:38px; padding:0 26px; background-repeat:no-repeat; background-position:center; background-size:100% 100%; color:var(--text-on-brand); font-size:14px; font-weight:900; white-space:nowrap; }
.program-card-body time { display:flex; flex:none; align-items:center; gap:5px; padding-top:5px; color:var(--gray-725); font-size:17px; direction:rtl; }.program-card-body time svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
.program-card-body > p { display:flex; height:141px; min-height:141px; flex:none; align-items:center; text-align:right; margin:15px 0 0; padding:20px 28px; border:1px solid var(--sage-100); border-radius:20px; background:var(--surface); color:var(--gray-850); font-size:16px; line-height:2; }
.program-card--green .program-points, .program-card--green .program-points-mobile { border-color:var(--green-300); background:var(--green-300); }.program-card--green .program-level-badge { background-image:url('/images/greenBrush.png'); }.program-card--green h2 { color:var(--dark-text, var(--green-300)); }
.program-card--yellow .program-points, .program-card--yellow .program-points-mobile { border-color:#efc232; background:#efc232; }.program-card--yellow .program-level-badge { background-image:url('/images/yellowBrush.png'); }.program-card--yellow h2 { color:#c99a12; }
.program-card--blue .program-points, .program-card--blue .program-points-mobile { border-color:#81acf1; background:#81acf1; }.program-card--blue .program-level-badge { background-image:url('/images/blueBrush.png'); }.program-card--blue h2 { color:#5c8de0; }
.program-card--red .program-points, .program-card--red .program-points-mobile { border-color:var(--orange-50); background:var(--orange-50); }.program-card--red .program-level-badge { background-image:url('/images/redBrush.png'); }.program-card--red h2 { color:var(--orange-50); }
.programs-page .program-card--blue { background:var(--surface) url('/images/blueProgramBg.png') center / 100% 100% no-repeat; }
.programs-page .program-card--yellow { background:var(--surface) url('/images/yellowProgramBg.png') center / 100% 100% no-repeat; }
.program-card--blue .program-card-body, .program-card--yellow .program-card-body { background:transparent; }
.programs-pagination { display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:7px; padding-top:12px; }.programs-pagination a,.programs-pagination span { display:grid; width:38px; height:38px; place-items:center; border-radius:50%; color:var(--sage-700); text-decoration:none; }.programs-pagination a { background:var(--surface); }.programs-pagination a.active { background:var(--blue-225); color:var(--text-on-brand); }
.program-alert { margin:0 0 28px; padding:15px 20px; border:1px solid var(--sage-200); border-radius:14px; background:var(--surface); color:var(--text-primary); font-weight:800; text-align:center; }.program-alert.is-success { border-color:#9cddb0; background:var(--green-50); color:var(--dark-text, var(--green-650)); }.program-alert.is-error { border-color:#efb2aa; background:var(--red-100); color:var(--red-775); }
.program-book:disabled { opacity:.65; cursor:not-allowed; }
.program-details-modal .field-modal-program { cursor:pointer; }
.program-details-modal .field-modal-free-play:disabled { opacity:.6; cursor:not-allowed; }
/* Fully booked (incl. seats held for payment): same grey dashed look as a booked field slot. */
.field-modal-free-play.is-booked { border:1px dashed var(--sage-475); background:var(--sage-100); color:var(--gray-275); text-decoration:line-through dashed #999; box-shadow:none; opacity:1; cursor:not-allowed; }
.program-calendar-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,.7fr); gap:28px; align-items:start; }
.program-booking-summary { display:grid; gap:14px; padding:24px; border-radius:24px; background:var(--surface); box-shadow:0 12px 25px rgba(0,0,0,.08); }.program-booking-summary h3 { margin:0; color:var(--text-primary); font-size:20px; }.program-booking-summary p { margin:0; color:var(--sage-700); line-height:1.7; }.program-booking-summary > strong { padding:12px; border-radius:12px; background:var(--green-50); color:var(--dark-text, var(--green-550)); text-align:center; }.program-booking-summary form { display:flex; justify-content:center; }.program-booking-summary .booking-back { justify-self:center; }
.program-booking-summary .booking-notes h3 { margin:0 0 14px; color:var(--status-warning-text); font-size:15px; }
@media (max-width:900px) { .program-calendar-layout { grid-template-columns:1fr; }.program-booking-summary { grid-template-columns:1fr 1fr; }.program-booking-summary h3,.program-booking-summary form,.program-booking-summary .booking-notes { grid-column:1/-1; }.program-booking-summary .booking-back { grid-column:1/-1; } }
@media (max-width:600px) { .program-booking-summary { grid-template-columns:1fr; padding:16px; }.program-booking-summary > * { grid-column:1!important; }.program-details-modal .field-modal-description { -webkit-line-clamp:3; } }
@media (max-width:900px) {
    .programs-container { width:100%; padding-inline:24px; }.programs-page .program-card { min-height:264px; grid-template-columns:minmax(210px,30%) 1fr; gap:16px; padding-top:44px; }.program-card-info { gap:8px; }.program-book { width:calc((100% - 8px) / 2); }.program-info-pill { height:34px; font-size:11px; }.program-points { top:-46px; height:28px; font-size:11px; }.program-card-body header { height:38px; gap:12px; padding-inline:3px; }.program-card-body header > div { display:block; }.program-card-body h2 { font-size:19px; white-space:normal; }.program-card-body time { font-size:12px; }.program-card-body > p { height:110px; min-height:110px; margin-top:10px; padding:12px 18px; font-size:12px; }
}


@media (max-width:700px) {
    .programs-filter-backdrop:not([hidden]) { position:fixed; inset:0; z-index:2490; display:block; background:rgba(0,0,0,.62); backdrop-filter:blur(3px); }
    .programs-filter-section { position:fixed; right:0; bottom:0; left:0; z-index:2500; display:none; width:auto; max-height:85dvh; margin:0; padding:52px calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left)); overflow-y:auto; border-radius:22px 22px 0 0; background:var(--surface); box-shadow:0 20px 50px rgba(0,0,0,.3); }
    .programs-filter-section.is-open { display:block; animation:sheet-up .22s ease-out; }
    .programs-filter-close { position:absolute; top:10px; left:12px; display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:50%; background:var(--surface); color:var(--text-primary); font-size:25px; line-height:1; }
    .programs-filter-section .games-filter-title { margin-bottom:18px; }
    .programs-filter-section .games-filters { grid-template-columns:1fr; }
    .programs-filter-section .games-filter-actions { flex-direction:column; align-items:stretch; }
    .programs-filter-section .games-filter-submit,
    .programs-filter-section .games-filter-clear { justify-content:center; height:45px; }
    .programs-results-heading { gap:12px; }
    .programs-results-heading .fields-view-toggle { flex:1; }
    .programs-results-heading .fields-view-toggle button { min-width:0; flex:1; padding-inline:8px; font-size:12px; }
    .programs-results-footer { flex-direction:column; gap:8px; }
    .programs-results-count { position:static; align-self:flex-start; }
}

/* When a sponsor side/square ad is active for this page, the hero renders
   as the flex "middle" of .sponsors-ads-row (see programs.blade.php) so the
   ad flanks the page's own untouched hero instead of duplicating it. */
.sponsors-ads-row > .programs-hero { flex:1 1 0%; min-width:0; }

/* Dates from the neighboring month complete the calendar's first and last weeks. */
.booking-calendar-days > button.is-adjacent-month:not(.is-closed),
.profile-calendar-days > button.is-adjacent-month:not(:disabled) {
    color: var(--sage-525);
    background: transparent;
}
.booking-calendar-days > button.is-adjacent-month:not(:disabled):focus-visible,
.profile-calendar-days > button.is-adjacent-month:not(:disabled):focus-visible {
    color: var(--dark-text, var(--green-750));
    border-color: var(--green-750);
}
@media (hover: hover) {
.booking-calendar-days > button.is-adjacent-month:not(:disabled):hover,
.profile-calendar-days > button.is-adjacent-month:not(:disabled):hover {
    color: var(--dark-text, var(--green-750));
    border-color: var(--green-750);
} }
.booking-calendar-days > button.is-adjacent-month:disabled,
.profile-calendar-days > button.is-adjacent-month:disabled {
    background: var(--sage-100);
    color: var(--gray-175);
    cursor: not-allowed;
}
@media (hover: hover) {
.booking-calendar-days > button.is-adjacent-month:disabled:hover,
.profile-calendar-days > button.is-adjacent-month:disabled:hover {
    border-color: transparent;
    color: var(--gray-175);
} }

/* The list wrapper adds no box above phone width. */
.programs-list { display:contents; }


/* Phones: the calendar leaves the page flow and opens as a bottom sheet from the date button in the search bar. */
@media (max-width:700px) {
    .programs-calendar { position:fixed; right:0; bottom:0; left:0; z-index:2500; display:none; width:auto; max-height:85dvh; margin:0; padding:52px calc(14px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); overflow-y:auto; border-radius:22px 22px 0 0; box-shadow:0 20px 50px rgba(0,0,0,.3); }
    .programs-calendar.is-open { display:block; animation:sheet-up .22s ease-out; }
}

/* =========================================================
   PHONES (≤700px): app-style programs page
   No hero; a sticky bar with search, date and filter buttons; a vertical list of
   photo cards (cover with points, level and distance on it, then name, date and
   info chips, then the book button). Desktop keeps the layout above.
========================================================= */
@media (max-width:700px) {
    .programs-hero { display:none; } /* the app header is the page top on phones */
    .programs-catalog { padding:6px 0 24px; background:var(--surface-page); }
    .programs-container { width:100%; padding-inline:12px; }

    /* Sticky bar; drops below the short app header while it is showing (navbar.css). */
    .programs-mobile-bar { position:sticky; top:0; z-index:5; display:flex; gap:8px; margin:0 -12px; padding:10px 12px; background:var(--surface-page); transition:top .6s cubic-bezier(.2,.8,.2,1); }
    body:has(.site-header.is-scrolled:not(.is-hidden)) .programs-mobile-bar { top:calc(56px + env(safe-area-inset-top)); }
    .programs-mobile-search { display:flex; flex:1; min-width:0; height:46px; align-items:center; gap:8px; padding:0 14px; border-radius:14px; background:var(--surface); box-shadow:0 2px 10px rgba(7,88,71,.08); }
    .programs-mobile-search svg { width:20px; height:20px; flex:none; stroke:var(--sage-575); stroke-width:2; stroke-linecap:round; }
    .programs-mobile-search input { flex:1; min-width:0; height:100%; padding:0; border:0; background:none; color:var(--dark-text, var(--green-900)); font:inherit; font-size:16px; outline:0; }
    .programs-calendar-trigger { display:flex; max-width:120px; height:46px; flex:none; align-items:center; gap:6px; padding:0 12px; border:0; border-radius:14px; background:var(--surface); color:var(--text-primary); font:inherit; font-size:13px; font-weight:800; box-shadow:0 2px 10px rgba(7,88,71,.08); }
    .programs-calendar-trigger svg { width:20px; height:20px; flex:none; fill:none; stroke:var(--green); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
    .programs-calendar-trigger span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .programs-filter-mobile-trigger { position:relative; display:grid; width:46px; height:46px; flex:none; place-items:center; border:0; border-radius:14px; background:var(--green-dark); color:var(--text-on-brand); }
    .programs-filter-mobile-trigger svg { width:22px; height:22px; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; }
    .programs-filter-mobile-trigger.has-filters::after { position:absolute; top:8px; left:8px; width:9px; height:9px; border:2px solid var(--green-dark); border-radius:50%; background:var(--yellow); content:""; }
    .programs-filter-section .games-search { display:none; } /* the sticky bar is the search on phones */

    /* Nearby / all: a segmented control. */
    .programs-results-heading { margin:4px 0 12px; }
    .programs-results-heading .fields-view-toggle { padding:3px; border-radius:12px; }
    .programs-results-heading .fields-view-toggle button { min-height:36px; border-radius:10px; font-size:13px; }
    .programs-results-heading .fields-view-toggle button.active { background:var(--surface); color:var(--dark-text, var(--green-dark)); box-shadow:0 1px 4px rgba(0,0,0,.12); }

    /* Cards: the side, body and header wrappers are unwrapped so their parts sit in one column. */
    .programs-list { display:grid; gap:14px; }
    .programs-page .program-card { position:relative; display:flex; min-width:0; min-height:0; flex-direction:column; gap:0; margin:0; padding:0 0 14px; overflow:hidden; border:0; border-radius:20px; background:var(--surface); background-image:none; box-shadow:0 4px 16px rgba(7,88,71,.08); }
    .programs-page .program-card-side,
    .programs-page .program-card-body,
    .programs-page .program-card-body header,
    .programs-page .program-card-body header > div { display:contents; }
    .programs-page .program-card img.program-card-cover { display:block; order:0; flex:none; width:100%; height:150px; object-fit:cover; } /* beats app-core's .program-card img { height:100% } */
    .programs-page .program-points,
    .programs-page .program-card-side .program-card-distance,
    .programs-page .program-card-body > p,
    .programs-page .program-info-location { display:none; }
    /* On the cover: points (yellow) and distance at the top, level at the bottom. */
    .programs-page .program-points-mobile { position:absolute; top:12px; left:12px; display:inline-flex; height:28px; align-items:center; padding:0 12px; border:0; border-radius:999px; background:var(--yellow); color:var(--green-dark); font-size:12px; font-weight:900; box-shadow:0 2px 8px rgba(0,0,0,.15); }
    .programs-page .program-card-distance-mobile { position:absolute; top:12px; right:12px; display:inline-flex; min-width:0; min-height:0; height:28px; align-items:center; padding:0 10px; border-radius:999px; font-size:11px; }
    .programs-page .program-card-body header .program-level-badge { position:absolute; top:108px; right:12px; margin:0; box-shadow:0 2px 8px rgba(0,0,0,.15); }
    .programs-page .program-card-body h2 { order:1; flex:none; margin:12px 14px 0; overflow:hidden; color:var(--dark-text, var(--green-900)); font-size:17px; line-height:1.5; text-overflow:ellipsis; white-space:nowrap; }
    .programs-page .program-card-body time { order:2; flex:none; display:flex; width:auto; align-items:center; gap:6px; margin:2px 14px 0; padding:0; color:var(--sage-700); font-size:12px; white-space:normal; }
    .programs-page .program-card-body time svg { width:15px; height:15px; flex:none; }
    .programs-page .program-card-info { order:3; display:flex; flex-wrap:wrap; gap:6px; margin:10px 14px 0; }
    .programs-page .program-info-pill { width:auto; min-width:0; height:28px; padding:0 10px; border:0; border-radius:999px; background:var(--sage-100); color:var(--dark-text, #35524a); font-size:11px; }
    .programs-page .program-info-pill svg { width:14px; height:14px; }
    .programs-page .program-book { position:static; order:4; display:flex; width:auto; max-width:none; height:44px; align-items:center; justify-content:center; margin:12px 14px 0; border-radius:14px; background:var(--orange); box-shadow:none; font-size:15px; }
    .programs-page .program-book span { display:none; } /* the arrow's green circle (app-core.css) */
    .programs-list > .program-alert { margin:0; }

    .programs-results-footer { flex-direction:column; gap:8px; margin-top:16px; }
    .programs-results-count { position:static; align-self:flex-start; }
    .programs-results-footer .results-load-more { display:none; } /* nearing the bottom loads more (programs.js) */
}

/* Source: profile.css */
.profile-page { background:var(--surface-page); color:var(--text-primary); }
.profile-page .site-header { position:relative; z-index:5; background:transparent; }
@media (min-width:768px) { .profile-page .nav-menu > a,.profile-page .nav-dropdown-toggle { color:var(--text-primary); }@media (hover: hover) {.profile-page .nav-menu > a:hover { color:var(--dark-text, var(--green)); } } }
.profile-dashboard { position:relative; display:grid; width:min(1380px,100%); min-height:1450px; grid-template-columns:minmax(0,58fr) minmax(340px,42fr); column-gap:clamp(30px,4vw,64px); margin:auto; padding:55px clamp(24px,5vw,74px) 120px; direction:ltr; isolation:isolate; }
.profile-dashboard::before { position:absolute; top:0; left:clamp(10px,3vw,45px); z-index:-1; width:min(540px,47%); aspect-ratio:492/370; background:url('/playerBg.png') left top/contain no-repeat; content:""; pointer-events:none; }
.profile-dashboard > * { direction:rtl; }
.profile-intro { display:grid; width:100%; min-height:500px; grid-column:2; grid-row:1; place-items:center; align-content:start; color:var(--text-on-brand); text-align:center; }
.profile-intro h1 { justify-self:end; margin:0 0 78px; font-size:44px; font-weight:900; }.profile-intro h1 i { display:inline-block; width:12px; height:12px; margin-left:12px; border-radius:50%; background:var(--yellow); }
.profile-avatar-wrap { position:relative; width:180px; height:180px; margin-inline:auto; }.profile-avatar { display:grid; width:100%; height:100%; place-items:center; overflow:hidden; border:4px solid var(--green-800); border-radius:50%; background:var(--surface-page); }.profile-avatar svg { display:block; width:120px; height:120px; fill:var(--text-primary); }
.profile-edit { position:absolute; right:-14px; bottom:6px; z-index:2; display:grid; width:38px; height:38px; place-items:center; border:3px solid var(--surface); border-radius:50%; background:var(--yellow); color:var(--text-on-brand); box-shadow:0 3px 8px rgba(0,0,0,.18); font-size:22px; text-decoration:none; }.profile-intro h2 { margin:20px 0 0; font-size:25px; }
.profile-personal-qr{display:flex;align-items:center;gap:10px;width:min(290px,100%);margin-top:14px;padding:8px 12px;border-radius:16px;background:var(--surface-page);color:var(--dark-text, var(--green-625));text-align:right}.profile-personal-qr img{width:76px;height:76px;flex:none}.profile-personal-qr small{font-size:10px;font-weight:800;line-height:1.6}
.profile-stats { display:grid; width:100%; grid-column:1; grid-row:1; grid-template-columns:1fr 1.25fr; gap:20px; align-self:center; direction:ltr; }.profile-stats > * { min-width:0; direction:rtl; }.points-card,.level-card,.progress-card,.rating-card,.profile-calendar-card,.profile-program-ticket,.profile-field-ticket,.profile-settings { border-radius:24px; background:var(--surface-page); }
.points-card { position:relative; min-height:290px; padding:20px; text-align:center; }.points-card h2 { position:relative; z-index:1; margin:0 0 28px; }.points-ring { position:relative; z-index:1; display:grid; width:155px; height:155px; margin:auto; place-items:center; border-radius:50%; background:conic-gradient(#62c86a 0 var(--progress),var(--sage-150) var(--progress)); }.points-ring::before { position:absolute; width:115px; height:115px; border-radius:50%; background:var(--surface-page); content:""; }.points-ring strong { position:relative; z-index:1; color:var(--blue-550); font-size:35px; }
.points-stack,.level-stack { display:grid; gap:12px; }
.rating-card { position:relative; display:grid; min-height:80px; place-content:center; gap:6px; padding:16px 24px; border:1px solid var(--green-200); border-radius:24px; text-align:center; text-decoration:none; transition:background .15s; }@media (hover: hover) {.rating-card:hover { background:var(--green-50); } }.rating-card small { display:block; margin:0; color:var(--dark-text, var(--green-825)); font-size:15px; font-weight:900; }.rating-card strong { color:var(--blue-550); font-size:28px; font-weight:900; }.rating-card strong span { color:var(--dark-text, var(--green-825)); font-size:15px; font-weight:700; }.rating-card-arrow { position:absolute; top:12px; left:16px; color:var(--text-primary); font-size:17px; font-weight:900; line-height:1; }
.level-card,.progress-card { position:relative; min-height:140px; padding:26px 35px; }.level-card { display:grid; min-height:112px; grid-template-rows:auto auto; align-content:center; row-gap:15px; overflow:visible; padding:16px 24px 18px 100px; border:1px solid var(--green-200); border-radius:24px; }.level-card small { display:block; margin:0; color:var(--dark-text, var(--green-825)); font-size:15px; font-weight:900; line-height:1.2; }.level-card strong { color:var(--dark-text, var(--green-825)); font-size:18px; font-weight:900; line-height:1.35; }.level-card strong span { color:var(--dark-text, var(--green-200)); }.level-medal { position:absolute; bottom:-23px; left:-1px; width:96px; height:122px; object-fit:contain; object-position:left bottom; pointer-events:none; }
.level-card.level-card--journey { min-height:0; grid-template-rows:none; row-gap:6px; padding:30px 24px 20px; }
.level-card--journey .level-name { display:block; color:var(--dark-text, var(--green-200)); font-size:14px; font-weight:800; }
.level-badge { position:absolute; top:-20px; left:0; z-index:1; width:46px; }
.level-badge-medal { display:block; width:100%; height:auto; pointer-events:none; }
.level-badge-number { position:absolute; bottom:2px; left:50%; display:grid; width:24px; height:24px; place-items:center; border:2px solid var(--surface-page); border-radius:50%; background:#2f6fea; color:var(--text-on-brand); font-size:12px; font-weight:900; box-shadow:0 2px 5px rgba(0,0,0,.2); transform:translateX(-46%); }
.level-journey-btn { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:6px; padding:11px 16px; border:0; border-radius:999px; background:var(--yellow); color:var(--green-800); font-size:14px; font-weight:900; text-decoration:none; }
@media (hover: hover) {
.level-journey-btn:hover { background:#ffc700; } }
.level-journey-btn span[aria-hidden] { font-size:17px; line-height:1; }
@media (max-width:1100px) and (min-width:701px) { .level-card.level-card--journey { padding-left:24px; row-gap:6px; } }
@media (max-width:700px) { .level-card.level-card--journey { min-height:0; padding:24px 16px 18px; row-gap:6px; } }

.level-journey-summary { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; }
.level-journey-current-pill { padding:5px 12px; border-radius:6px; background:var(--orange); color:var(--text-on-brand); font-size:11px; font-weight:900; white-space:nowrap; }
.level-journey-progress { flex:1 1 260px; min-width:220px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:0 12px; }
.level-journey-progress .progress-track { flex-basis:100%; }
.level-journey-progress small { margin-bottom:10px; color:var(--dark-text, var(--green-825)); font-size:13px; font-weight:800; }
.level-journey-progress strong { order:-1; margin-bottom:10px; color:var(--text-primary); font-size:26px; font-weight:900; }
.level-journey-points { color:var(--dark-text, var(--green-275)); font-size:34px; }
.level-journey-badges { display:flex; flex-wrap:wrap; gap:10px; }
.level-journey-badge { display:inline-flex; align-items:center; gap:6px; padding:10px 16px; border:1px solid var(--sage-150); border-radius:999px; background:var(--surface-page); color:var(--text-primary); font-size:12.5px; font-weight:800; white-space:nowrap; }

.coach-account-card .level-path-title { display:flex; width:fit-content; align-items:center; gap:8px; margin:0 auto 14px 0; color:var(--dark-text, #004b3c); font-size:15px; font-weight:800; }
.level-path-title button { display:inline-flex; align-items:center; gap:8px; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
.level-points-info { position:fixed; inset:0; margin:auto; height:fit-content; width:min(420px, calc(100% - 32px)); padding:0; border:0; border-radius:14px; box-shadow:0 18px 50px rgba(0,0,0,.2); direction:rtl; }
.level-points-info::backdrop { background:rgba(0,0,0,.45); }
.level-points-info form { display:grid; gap:12px; padding:22px; text-align:center; }
.level-points-info h3 { margin:0; color:var(--dark-text, #004b3c); font-size:16px; font-weight:900; }
.level-points-info p { margin:0; color:var(--text-primary); font-size:14px; line-height:1.9; }
.level-points-info button { justify-self:center; padding:8px 22px; border:0; border-radius:8px; background:var(--green-275); color:var(--text-on-brand); font:inherit; font-weight:800; cursor:pointer; }
.level-path-title svg { width:17px; height:17px; flex:none; fill:none; stroke:#eb5e18; stroke-linecap:round; stroke-width:2; }
.level-path { display:flex; gap:9px; margin:0; padding:0 0 22px; list-style:none; direction:rtl; overflow-x:auto; }
.level-path-step { --level-path-hole:#fff; position:relative; display:flex; flex:1 1 0; min-width:104px; flex-direction:column; align-items:center; padding:6px 6px 12px; border:1px solid var(--green-125); border-radius:10px; background:var(--sage-50); color:var(--dark-text, var(--green-275)); text-align:center; }
.level-path-step::before { position:absolute; top:30px; right:0; left:0; height:7px; background:var(--green-125); content:""; }
.level-path-step:first-child::before { right:50%; }
.level-path-step:last-child::before { left:50%; }
.level-path-step:not(:last-child)::after { position:absolute; top:30px; left:-10px; width:9px; height:7px; background:var(--green-275); content:""; }
.level-path-badge { position:absolute; top:6px; right:6px; z-index:1; display:grid; width:18px; height:18px; place-items:center; border-radius:50%; background:var(--green-275); color:var(--text-on-brand); }
.level-path-badge svg { width:12px; height:12px; fill:none; stroke:currentColor; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.8; }
.level-path-icon { position:relative; z-index:1; display:grid; width:55px; height:55px; box-sizing:border-box; place-items:center; border:2px solid var(--green-275); border-radius:50%; background:var(--surface); }
.level-path-icon > svg { width:41px; height:41px; }
.level-path-num { position:absolute; bottom:-7px; left:50%; display:grid; min-width:13px; height:13px; box-sizing:content-box; place-items:center; padding:0 1px; border:2px solid var(--surface); border-radius:999px; background:var(--green-275); color:var(--text-on-brand); font-size:8px; font-weight:900; line-height:1; transform:translateX(-50%); }
.level-path-name { max-width:100%; margin-top:17px; font-size:11px; font-weight:700; line-height:1.3; }
.level-path-step small { margin-top:6px; font-size:12px; font-weight:500; line-height:1.2; direction:ltr; }
.level-path-step.is-current { --level-path-hole:#42c55a; border-color:#a0e2ac; background:var(--green-125); }
.level-path-step.is-current::before { background:linear-gradient(to left,var(--green-275) 0%,var(--green-275) 20%,#8cdc9b 50%,var(--sage-200) 50%); box-shadow:0 0 6px rgba(66,197,90,.35); }
.level-path-step.is-current .level-path-icon { border:0; background:var(--green-275); }
.level-path-step.is-current .level-path-icon > svg { color:var(--text-on-brand); }
.level-path-step.is-current:last-child .level-path-icon > svg { color:#fde75a; }
.level-path-icon > svg.is-crowned { width:100%; height:100%; }
.level-path-crown { fill:currentColor; }
.level-path-step.is-current:not(:last-child)::after,.level-path-step.is-locked::after { background:var(--sage-200); }
.level-path-pill { position:absolute; bottom:-21px; left:50%; z-index:1; padding:4px 10px; border-radius:4px; background:var(--green-275); color:var(--text-on-brand); font-size:11px; font-weight:800; line-height:15px; white-space:nowrap; transform:translateX(-50%); }
.level-path-step.is-locked { border-color:var(--sage-150); background:var(--surface-page); color:var(--gray-175); }
.level-path-step.is-locked::before { background:var(--sage-150); }
.level-path-step.is-locked .level-path-icon { border-color:var(--sage-475); }
.level-path-step.is-locked .level-path-icon > svg { color:var(--sage-475); }
.level-path-step.is-locked .level-path-num,.level-path-step.is-locked .level-path-badge { background:var(--sage-475); }

.level-journey-rewards { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.level-journey-reward-card { padding:18px 20px; border:1px solid var(--sage-100); border-radius:16px; background:var(--surface); }
.level-journey-reward-card small { display:block; margin-bottom:8px; color:var(--gray-400); font-size:11px; font-weight:700; }
.level-journey-reward-card strong { display:block; padding-top:10px; border-top:1px solid var(--sage-100); color:var(--orange); font-size:14px; font-weight:900; }
@media (max-width:700px) { .level-journey-rewards { grid-template-columns:1fr; } .level-journey-current-pill { order:-1; } }
.progress-card h3 { margin:0 0 10px; }.progress-card b { font-size:12px; }.progress-track { height:15px; margin:12px 0; overflow:hidden; border-radius:10px; background:var(--sage-200); }.progress-track i { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#58c568,var(--yellow)); }.progress-card small { color:var(--text); font-weight:700; }
.profile-upcoming { display:grid; grid-column:1/-1; grid-template-columns:1fr 1fr; gap:40px; margin-top:80px; direction:rtl; }.profile-upcoming > div { min-width:0; direction:rtl; }.profile-upcoming h2 { margin:0 0 28px; color:var(--text-on-brand); font-size:27px; text-align:center; }.profile-upcoming article,.profile-empty { display:flex; min-height:48px; align-items:center; justify-content:space-between; gap:18px; margin:0 0 30px; padding:10px 24px; border-radius:25px; background:var(--surface-page); color:var(--gray-725); }.profile-upcoming article strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.profile-empty { justify-content:center; }
.profile-details-grid { display:grid; grid-column:1/-1; grid-template-columns:1fr 1fr 1.15fr; gap:22px; margin-top:85px; direction:rtl; }.profile-details-grid > * { min-width:0; direction:rtl; }
.profile-calendar-card,.profile-program-ticket,.profile-field-ticket { min-height:350px; padding:28px; }.profile-calendar-card header { display:flex; align-items:center; justify-content:space-between; }.profile-calendar-card header h2 { margin:0; }.profile-calendar-card button { border:0; background:transparent; color:var(--dark-text, var(--green-200)); font-size:24px; }.profile-weekdays,.profile-calendar-days { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:9px; text-align:center; }.profile-weekdays { margin:35px 0 15px; gap:3px; color:#7b7891; font-size:10px; }.profile-weekdays span { min-width:0; white-space:nowrap; }.profile-calendar-days b { display:grid; aspect-ratio:1; place-items:center; border-radius:50%; color:var(--gray-675); font-size:12px; }.profile-calendar-days b.booked { border:1px solid var(--gray-725); }.profile-calendar-days b.today { border:0; background:#3d9be9; color:var(--text-on-brand); }
.profile-program-ticket h2,.profile-field-ticket h2 { margin:0 0 30px; font-size:19px; }.profile-program-ticket dl,.profile-field-ticket dl { display:grid; grid-template-columns:1fr 1fr; gap:24px 15px; margin:0; }.profile-details-grid dt { font-weight:900; }.profile-details-grid dd { margin:3px 0 0; color:var(--gray-675); font-size:13px; }.ticket-actions { display:flex; gap:10px; margin-top:35px; }.ticket-actions > * { flex:1; margin:0; }.ticket-actions button { width:100%; padding:9px; border:0; border-radius:20px; background:var(--orange); color:var(--text-on-brand); font:inherit; font-size:12px; text-align:center; cursor:pointer; }.ticket-actions .profile-program-details { background:var(--green-200); }.profile-modal-cancel { background:var(--orange); }
.profile-settings { grid-column:1/-1; margin-top:80px; padding:35px; }.profile-settings > h2 { margin-top:0; }.profile-settings > div { margin-top:25px; padding:25px; border-radius:16px; background:var(--surface); }.profile-settings header h2 { margin:0; }.profile-settings form { display:grid; gap:14px; }.profile-settings label { display:block; margin-bottom:5px; font-weight:800; }.profile-settings input { width:100%; padding:11px 14px; border:1px solid var(--sage-275); border-radius:10px; }.profile-settings button { padding:10px 22px; border:0; border-radius:22px; background:var(--blue-225); color:var(--text-on-brand); font:inherit; font-weight:800; }
@media (max-width:1000px) { .profile-dashboard { grid-template-columns:minmax(0,56fr) minmax(300px,44fr); column-gap:24px; }.profile-stats { grid-template-columns:1fr; }.points-card { min-height:205px; }.points-ring { width:115px; height:115px; }.points-ring::before { width:84px; height:84px; }.level-card,.progress-card { min-height:115px; }.profile-details-grid { grid-template-columns:1fr 1fr; }.profile-field-ticket { grid-column:auto; } }
@media (max-width:700px) { .profile-dashboard { display:block; padding:35px 14px 70px; }.profile-intro { width:100%; min-height:360px; }.profile-intro h1 { justify-self:center; margin-bottom:35px; font-size:31px; }.profile-avatar-wrap { width:140px; height:140px; }.profile-avatar svg { width:94px; height:94px; }.profile-edit { right:-10px; width:34px; height:34px; font-size:19px; }.profile-intro h2 { font-size:20px; }.profile-stats { width:100%; grid-template-columns:1fr; margin:20px 0 0; }.level-card,.progress-card { padding:22px; }.profile-upcoming { grid-template-columns:1fr; gap:20px; margin-top:55px; }.profile-upcoming article { margin-bottom:14px; padding-inline:16px; }.profile-details-grid { grid-template-columns:1fr; margin-top:55px; }.profile-field-ticket { grid-column:auto; grid-template-columns:1fr; }.ticket-qr { width:165px; margin:auto; }.profile-settings { margin-top:50px; padding:18px; }.profile-settings > div { padding:15px; }.profile-program-ticket dl,.profile-field-ticket dl { grid-template-columns:1fr; gap:14px; } }
.program-ticket-qr { display:flex; align-items:center; gap:12px; margin:-18px 0 18px; padding:9px; border:1px solid var(--sage-200); border-radius:14px; background:var(--surface); }.program-ticket-qr img { width:82px; height:82px; flex:none; }.program-ticket-qr small { color:var(--dark-text, var(--green-625)); font-size:11px; font-weight:800; line-height:1.7; }
.field-modal-media-gapped { margin-top:44px; }
.field-modal-reference { display:inline-flex; flex:0 0 auto; align-items:center; gap:8px; margin-bottom:14px; padding:8px 14px; border:1px solid var(--sage-200); border-radius:999px; background:var(--surface-page); }.field-modal-reference small { color:var(--sage-700); font-size:12px; font-weight:700; }.field-modal-reference b { color:var(--text-primary); font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:14px; font-weight:800; letter-spacing:.02em; }
@media(max-width:600px){.field-modal-media-gapped{margin-top:38px}}
.task-qr-dialog { width:min(920px,100%); }
.task-qr-panels { display:grid; grid-template-columns:minmax(200px,260px) minmax(0,1fr); gap:16px; margin-top:18px; direction:ltr; }.task-qr-panels > * { direction:rtl; }
.task-qr-card { display:flex; flex-direction:column; align-items:center; gap:12px; padding:20px; border:1px solid var(--sage-200); border-radius:20px; background:var(--surface); box-shadow:0 4px 16px rgba(0,0,0,.06); text-align:center; }.task-qr-card img { width:140px; height:140px; }.task-qr-card small { color:var(--dark-text, var(--green-625)); font-size:12px; font-weight:800; line-height:1.7; }
.task-qr-status { display:inline-block; padding:6px 16px; border-radius:999px; font-size:13px; font-weight:800; color:var(--text-on-brand); background:var(--red-725); }.task-qr-status.is-attended { background:var(--green-375); }
.task-qr-status.is-late { background:var(--orange-900); }
.task-qr-status.is-not-started { background:var(--slate-500); }
.task-qr-attended-pill { display:inline-block; padding:6px 16px; border-radius:999px; background:#2563eb; color:var(--text-on-brand); font-size:12px; font-weight:800; }
.task-qr-info { padding:20px; border:1px solid var(--sage-200); border-radius:20px; background:var(--surface); box-shadow:0 4px 16px rgba(0,0,0,.06); }
.task-qr-info h2 { display:flex; align-items:center; gap:8px; margin:0 0 16px; color:var(--text-primary); font-size:17px; }
.task-qr-info h2 .captain-program-title-icon { display:block; width:24px; height:24px; flex:0 0 24px; }.task-qr-info h2 .captain-program-title-icon img { display:block; width:100%; height:100%; object-fit:contain; }
.task-qr-info p { display:flex; align-items:center; gap:10px; margin:10px 0; }
.task-qr-info .field-info-icon { position:static; flex:0 0 auto; width:34px; height:34px; border-radius:10px; transform:none; }.task-qr-info .field-info-icon svg { width:18px; height:18px; }
.task-qr-info strong { flex:1; min-width:0; padding:9px 12px; border-radius:10px; background:var(--green-50); color:var(--dark-text, var(--green-500)); font-size:12px; font-weight:700; text-align:center; }
@media(max-width:600px){.task-qr-panels{grid-template-columns:1fr}.task-qr-info h2{justify-content:center}}
@media(max-width:480px){.task-qr-card img{width:120px;height:120px}}
.task-details-player-summary { margin-top:20px; }
.task-details-rating-categories { display:flex; flex-direction:column; gap:6px; margin-top:14px; padding:14px 18px; border-radius:14px; background:var(--surface-page); }
.task-details-rating-categories h4 { margin:0 0 4px; color:var(--text-primary); font-size:12px; font-weight:800; text-align:center; }
.task-details-rating-categories p { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:0; padding:5px 2px; font-size:13px; font-weight:700; color:var(--sage-900); }
.task-details-rating-categories .captain-stars { font-size:18px; }
@media(max-width:700px){.task-details-player-summary .captain-table-head,.task-details-player-summary .captain-player-list article{min-width:640px}.task-details-player-summary .captain-player-list{overflow-x:auto}}
.task-details-dialog { overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; }
.profile-calendar-days button { display:grid; width:100%; aspect-ratio:1; padding:0; place-items:center; border:0; border-radius:50%; background:transparent; color:var(--gray-675); font-size:12px; cursor:pointer; }.profile-calendar-days button:focus-visible { background:var(--green-75); outline:2px solid var(--green-200); }@media (hover: hover) {.profile-calendar-days button:hover { background:var(--green-75); outline:2px solid var(--green-200); } }.profile-calendar-days button.booked { border:1px solid var(--gray-725); }.profile-calendar-days button.today { border:0; background:#3d9be9; color:var(--text-on-brand); }
.profile-schedule-modal[hidden]{display:none}.profile-schedule-modal{position:fixed;inset:0;z-index:2200;display:grid;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));place-items:center;opacity:0;transition:opacity .18s}.profile-schedule-modal.is-open{opacity:1}.profile-schedule-backdrop{position:absolute;inset:0;background:rgba(3,29,24,.76);backdrop-filter:blur(4px)}.profile-schedule-dialog{position:relative;width:min(620px,100%);max-height:calc(100dvh - 40px);overflow:auto;padding:30px;border-radius:26px;background:var(--surface-page);box-shadow:0 24px 65px rgba(0,0,0,.38);direction:rtl}.profile-schedule-close{position:absolute;top:16px;left:16px;width:36px;height:36px;border:0;border-radius:50%;background:var(--sage-150);color:var(--text-primary);font-size:24px;cursor:pointer}.profile-schedule-dialog header small{color:var(--dark-text, var(--green-375));font-weight:800}.profile-schedule-dialog header h2{margin:7px 0 22px;font-size:24px}.profile-schedule-list{display:grid;gap:12px}.profile-schedule-item{display:grid;grid-template-columns:1fr auto;gap:7px 15px;padding:16px 18px;border:1px solid var(--sage-200);border-radius:15px;background:var(--surface)}.profile-schedule-item strong{font-size:16px}.profile-schedule-item span,.profile-schedule-item small{color:var(--gray-500);font-size:12px}.profile-schedule-empty{padding:28px;border-radius:15px;background:var(--surface);color:var(--gray-500);text-align:center}
.profile-schedule-badges{grid-row:1/3;grid-column:2;display:grid;justify-items:end;align-self:center;gap:6px}.profile-schedule-badges b{padding:6px 12px;border-radius:999px;background:var(--sage-100);color:var(--sage-750);font-size:11px;font-weight:800;white-space:nowrap}
.profile-schedule-status-upcoming{background:#eaf1fd!important;color:#2563eb!important}.profile-schedule-status-ongoing{background:var(--red-100)!important;color:var(--red-725)!important}.profile-schedule-status-completed{background:var(--green-75)!important;color:var(--dark-text, #188044)!important}
@media(max-width:500px){.profile-schedule-modal{padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left))}.profile-schedule-dialog{padding:26px 16px;border-radius:20px}.profile-schedule-item{grid-template-columns:1fr}.profile-schedule-badges{grid-row:auto;grid-column:auto;justify-items:start}}
@media(max-width:1100px) and (min-width:701px){.level-card{padding-right:18px;padding-left:88px;row-gap:12px}.level-medal{width:84px;height:112px}.level-card strong{font-size:16px}}
@media(max-width:700px){.level-stack{gap:12px}.level-card{min-height:118px;padding:17px 16px 18px 92px;row-gap:14px}.level-card small{font-size:15px}.level-card strong{font-size:17px}.level-medal{bottom:-22px;width:88px;height:116px}}
@media(max-width:700px){.profile-dashboard::before{top:0;left:0;width:min(430px,96%);opacity:.95}.profile-intro{position:relative;z-index:1}.profile-stats{position:relative;z-index:1;margin-top:210px}}
.notifications-page{background:var(--surface-page);color:var(--dark-text, var(--green-875))}.notifications-page .site-header{background:var(--surface-page);color:var(--text-primary);box-shadow:0 2px 5px rgba(0,0,0,.12)}
.notifications-page .nav-menu a,.notifications-page .nav-dropdown-toggle,.notifications-page .language,.notifications-page .navbar-logout{color:var(--text-primary)}.notifications-page .nav-menu .active{background:var(--yellow);color:var(--green-800)}@media (hover: hover) {.notifications-page .nav-menu .active:hover{background:var(--yellow);color:var(--green-800)} }.notifications-page .navbar-toggler{border-color:rgba(23,79,69,.5);color:var(--text-primary)}.notifications-page .navbar-toggler.is-open{border-color:var(--green-800);background:var(--green-800);color:var(--text-on-brand)}
@media(max-width:767px){.notifications-page .nav-wrapper{background:var(--green-dark)}.notifications-page .nav-wrapper .nav-menu a,.notifications-page .nav-wrapper .nav-menu .active,.notifications-page .nav-wrapper .nav-dropdown-toggle,.notifications-page .nav-wrapper .navbar-logout{color:var(--text-on-brand)}.notifications-page .nav-wrapper .nav-menu .active{background:var(--yellow);color:var(--green-dark)}}
.notifications-page-main{position:relative;display:flex;min-height:70vh;justify-content:center;padding:48px 20px 110px;overflow:hidden}.notifications-page-main::before,.notifications-page-main::after{position:absolute;border-radius:50%;content:"";pointer-events:none}.notifications-page-main::before{top:80px;right:-180px;width:420px;height:420px;background:rgba(75,190,102,.08)}.notifications-page-main::after{bottom:20px;left:-130px;width:300px;height:300px;border:55px solid rgba(255,210,26,.1)}
.notifications-container{position:relative;z-index:1;width:min(920px,100%)}
.notifications-section-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:38px 5px 18px}.notifications-section-heading>div{display:flex;align-items:center;gap:12px}.notifications-heading-icon{display:grid;width:42px;height:42px;place-items:center;border-radius:14px;background:var(--green-75);color:var(--dark-text, #19885a)}.notifications-heading-icon svg{width:21px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.notifications-section-heading h2{margin:0 0 3px;font-size:18px;font-weight:800}.notifications-section-heading p{margin:0;color:var(--gray-400);font-size:11px}.notifications-unread-pill{padding:7px 13px;border-radius:20px;background:var(--green-75);color:var(--dark-text, #188357);font-size:11px;font-weight:800}
.notifications-list{display:flex;flex-direction:column;gap:12px}.notification-item{position:relative;display:grid;grid-template-columns:52px minmax(0,1fr) 34px;align-items:center;gap:16px;padding:19px 20px;border:1px solid var(--sage-150);border-radius:20px;background:var(--surface);color:inherit;box-shadow:0 5px 20px rgba(31,76,61,.045);text-align:right;text-decoration:none;transition:border-color .18s,box-shadow .18s,transform .18s}@media (hover: hover) {.notification-item:hover{border-color:#b9dec6;box-shadow:0 12px 28px rgba(31,76,61,.1);color:inherit;transform:translateY(-2px)} }.notification-item.is-unread{border-right:4px solid var(--green-375);background:linear-gradient(90deg,var(--surface) 0%,var(--surface) 72%,var(--surface-page) 100%)}.notification-item-icon{display:grid;width:52px;height:52px;place-items:center;border-radius:17px;background:var(--green-50);color:var(--dark-text, var(--green-500))}.notification-item.is-read .notification-item-icon{background:var(--surface-page);color:#81908a}.notification-item-icon svg{width:25px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.7}.notification-item-body{display:flex;min-width:0;flex-direction:column;gap:5px}.notification-item-title{display:flex;align-items:center;gap:8px}.notification-item-title strong{color:var(--text-primary);font-size:14px;font-weight:800}.notification-item-title span{padding:3px 8px;border-radius:10px;background:var(--green-375);color:var(--text-on-brand);font-size:9px;font-weight:800}.notification-item-body small{color:var(--sage-700);font-size:12px;line-height:1.8}.notification-item-time{display:flex;align-items:center;gap:5px;color:var(--sage-525);font-size:10px;white-space:nowrap}.notification-item-time svg{width:13px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.8}.notification-item-arrow{display:grid;width:30px;height:30px;place-items:center;border-radius:50%;background:var(--surface-page);color:var(--sage-525)}@media (hover: hover) {.notification-item:hover .notification-item-arrow{background:var(--green-75);color:var(--dark-text, #258d59)} }.notification-item-arrow svg{width:15px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}
.notifications-empty{display:grid;min-height:330px;padding:50px 20px;place-items:center;align-content:center;border:1px dashed var(--sage-375);border-radius:24px;background:var(--surface);color:var(--sage-700);text-align:center}.notifications-empty>span{display:grid;width:78px;height:78px;margin-bottom:18px;place-items:center;border-radius:25px;background:var(--green-50);color:var(--dark-text, #32a55d)}.notifications-empty svg{width:36px;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.6}.notifications-empty h2{margin:0 0 6px;color:var(--text-primary);font-size:18px}.notifications-empty p{margin:0 0 20px;font-size:12px}.notifications-empty a{padding:9px 19px;border-radius:22px;background:var(--green-375);color:var(--text-on-brand);font-size:12px;font-weight:800;text-decoration:none}.notifications-container .programs-pagination{margin-top:28px}.notifications-container .programs-pagination a{box-shadow:0 3px 10px rgba(31,76,61,.06)}.notifications-container .programs-pagination a.active{background:var(--green-375)}
.notifications-list{gap:24px}.notifications-group{display:flex;flex-direction:column;gap:12px}.notifications-group h3{margin:0 5px;color:var(--gray-400);font-size:12px;font-weight:800}
/* Phones: an inset grouped list like the "more" sheet (navbar.css .more-group) instead of floating cards; unread = dot + bold title. */
@media(max-width:767px){
.notifications-page{background:var(--surface-page)}.notifications-page-main{min-height:0;padding:8px 16px 110px;overflow:visible}.notifications-page-main::before,.notifications-page-main::after{display:none}
.notifications-section-heading{margin:0 4px 16px;gap:12px}.notifications-heading-icon,.notifications-section-heading p{display:none}.notifications-section-heading h2{margin:0;font-size:28px}.notifications-unread-pill{padding:0;background:none;color:var(--dark-text, var(--green));font-size:13px}
.notifications-list{gap:20px}.notifications-group{gap:1px;overflow:hidden;border:1px solid var(--sage-150);border-radius:16px;background:var(--sage-150)}.notifications-group h3{margin:0;padding:10px 16px 6px;background:var(--surface-page);color:var(--sage-625);font-weight:700}
.notification-item{grid-template-columns:36px minmax(0,1fr);align-items:start;gap:12px;padding:14px 16px;border:0;border-radius:0;background:var(--surface);box-shadow:none;transition:background-color .15s;-webkit-tap-highlight-color:transparent}@media (hover: hover) {.notification-item:hover{box-shadow:none;transform:none} }.notification-item:active{background:var(--surface-page)}.notification-item.is-unread{border-right:0;background:var(--surface)}
.notification-item.is-unread::before{position:absolute;top:22px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--green);content:""}
.notification-item-icon{width:36px;height:36px;border-radius:50%}.notification-item-icon svg{width:18px}.notification-item-arrow,.notification-item-title span,.notification-item-time svg{display:none}
.notification-item-body{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px}.notification-item-title{min-width:0}.notification-item-title strong{overflow:hidden;font-size:15px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.notification-item.is-unread .notification-item-title strong{font-weight:800}
.notification-item-time{grid-column:2;grid-row:1;font-size:12px}.notification-item-body small{display:-webkit-box;grid-column:1/-1;overflow:hidden;font-size:13px;line-height:1.6;-webkit-box-orient:vertical;-webkit-line-clamp:2}
.notifications-empty{min-height:0;padding:72px 20px;border:0;background:none}
}
.notification-item-time{direction:rtl;justify-content:flex-start;text-align:right}.notification-item-arrow{direction:rtl}
.admin-table-badge{display:inline-flex;padding:5px 10px;border-radius:6px;background:var(--sage-100);color:var(--sage-750);font-size:10px;font-weight:700;letter-spacing:.01em}.admin-table-badge.is-new{background:var(--yellow-300);color:#9c7a3c}.admin-table-badge.is-in_progress{background:var(--sage-100);color:#526e8c}.admin-table-badge.is-closed{background:var(--sage-100);color:var(--dark-text, #4c8266)}
.player-reports-list{display:grid;gap:12px;margin-top:18px}.player-reports-empty{margin-top:18px;color:var(--gray-500)}
.player-report-card{display:grid;gap:6px;padding:16px 18px;border:1px solid var(--sage-150);border-radius:16px;background:var(--surface-raised);color:inherit;text-decoration:none;transition:border-color .16s,background .16s}@media (hover: hover) {.player-report-card:hover{border-color:var(--green-125);background:var(--surface-raised);color:inherit} }.player-report-card-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.player-report-card p{margin:0;color:var(--sage-800);font-size:13px;line-height:1.7}.player-report-card small{color:var(--gray-400);font-size:11px}
/* Phones: بلاغاتي uses the Activities filter bar (captain-profile.css .activities-page) and tappable report cards. */
@media(max-width:767px){
    body.profile-page .coach-account.player-reports{width:auto;margin:0 0 calc(110px + env(safe-area-inset-bottom));padding:0 16px;background:none}
    .player-reports .coach-account-hero{padding:8px 0 14px;overflow:visible}
    .player-reports .coach-account-hero-art{display:none}
    .player-reports .coach-account-hero-info h1{margin:0 0 4px;color:var(--dark-text, var(--green-900));font-size:22px;line-height:1.3}
    .player-reports .coach-account-hero-info p{margin:0;color:var(--sage-700);font-size:13px}
    .player-reports .coach-account-card{margin:0;padding:0;border-radius:0;background:none;box-shadow:none}
    :root[data-theme="dark"] .player-reports .coach-account-card{outline:0}
    .player-reports .coach-account-card>h2{display:none}
    .player-reports-list{gap:10px;margin-top:14px}
    .player-report-card{gap:4px;padding:14px;border:0;background:var(--surface);box-shadow:0 4px 16px rgba(7,88,71,.08);-webkit-tap-highlight-color:transparent;transition:transform .12s ease}
    .player-report-card:active{transform:scale(.98);background:var(--sage-50)}
    .player-report-card-head strong{min-width:0;overflow:hidden;color:var(--dark-text, var(--green-900));font-size:15px;font-weight:800;text-overflow:ellipsis;white-space:nowrap}
    .player-report-card-head .admin-table-badge{flex:none;padding:4px 10px;border-radius:999px;font-size:11px}
    .player-report-card p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2}
    .player-reports-empty{padding:56px 20px;text-align:center}
    .player-reports .activities-filter-reset{line-height:48px;text-align:center;text-decoration:none}
}
@media(max-width:767px) and (prefers-reduced-motion:reduce){.player-report-card{transition:none}.player-report-card:active{transform:none}}
.player-report-status-row{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}
.player-report-description{color:var(--sage-800);line-height:1.9;white-space:pre-line}
.admin-details-media{display:grid;grid-auto-columns:minmax(180px,45%);grid-auto-flow:column;gap:10px;margin-top:16px;overflow-x:auto;scroll-snap-type:x mandatory}.admin-details-media img{width:100%;height:180px;border-radius:16px;background:#10251f;object-fit:cover;scroll-snap-align:start}
.admin-comment-thread{margin-top:16px}.admin-comment-list{display:grid;gap:10px;margin:0 0 14px;padding:0;list-style:none;max-height:320px;overflow-y:auto}.admin-comment-item{padding:10px 12px;border:1px solid var(--sage-150);border-radius:12px;background:var(--surface)}.admin-comment-item-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:4px}.admin-comment-item-head small{color:var(--gray-400);font-size:10.5px}.admin-comment-item p{margin:0;font-size:12.5px;line-height:1.7;overflow-wrap:anywhere}.admin-comment-empty{padding:10px 0;color:var(--gray-400);font-size:12px}.admin-comment-form{display:flex;gap:8px}.admin-comment-form textarea{flex:1;min-height:60px;padding:10px 12px;border:1px solid var(--sage-375);border-radius:11px;background:var(--surface);color:var(--text-primary);font:inherit;font-size:12.5px;resize:vertical}.admin-comment-form button{align-self:flex-end;height:38px;padding:0 16px;border:0;border-radius:9px;background:var(--green-825);color:var(--text-on-brand);font:inherit;font-size:12px;font-weight:900;cursor:pointer}
@media(max-width:600px){.player-report-status-row{flex-direction:column;align-items:flex-start;gap:10px}.admin-comment-form{flex-direction:column}.admin-comment-form button{align-self:stretch}}

/* Player ratings history (تقييماتي) — native <details>/<summary> disclosure, no JS */
.player-ratings-list{display:grid;gap:14px}
.player-rating-card{border:1px solid var(--sage-150);border-radius:16px;background:var(--surface-raised);overflow:hidden}
.player-rating-card summary{display:flex;align-items:center;gap:16px;padding:16px 20px;cursor:pointer;list-style:none}
.player-rating-card summary::-webkit-details-marker{display:none}
.player-rating-icon{display:grid;flex:0 0 42px;width:42px;height:42px;place-items:center;border-radius:50%;background:var(--sage-100)}
.player-rating-icon img{width:22px;height:22px;object-fit:contain}
.player-rating-heading{flex:1;min-width:0;display:grid;gap:4px}
.player-rating-heading strong{font-size:15px;color:var(--text-primary)}
.player-rating-heading small{color:var(--gray-400);font-size:11px}
.player-rating-score{display:grid;justify-items:end;gap:4px}
.player-rating-score b{color:var(--text-primary);font-size:15px}
.player-rating-toggle{flex:0 0 10px;width:10px;height:10px;border-right:2px solid var(--gray-400);border-bottom:2px solid var(--gray-400);transform:rotate(45deg);transition:transform .15s}
.player-rating-card[open] .player-rating-toggle{transform:rotate(225deg)}
.player-rating-detail{display:flex;align-items:stretch;gap:0;padding:18px 20px;border-top:1px solid var(--sage-100);overflow-x:auto}
.player-rating-category{flex:1 1 0;min-width:88px;display:grid;justify-items:center;align-content:start;gap:8px;padding:0 14px;text-align:center}
.player-rating-category:not(:first-child){border-inline-start:1px solid var(--sage-150)}
.player-rating-category>span:first-child{font-size:12px;font-weight:800;color:var(--sage-900)}
.player-rating-category b{font-size:12px;color:var(--sage-625);font-weight:700}
.player-rating-rater{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:0 14px 0 0;border-inline-start:1px solid var(--sage-150)}
.player-rating-rater:first-child{border-inline-start:none;padding-inline-start:0}
.player-rating-rater-text{display:grid;gap:4px;text-align:right}
.player-rating-rater-text small{display:block;color:var(--gray-400);font-size:11px}
.player-rating-rater-text strong{color:var(--text-primary);font-size:13px}
.player-rating-rater-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.player-rating-score .captain-stars,.player-rating-category .captain-stars{font-size:14px;direction:rtl}
@media(max-width:600px){.player-rating-detail{flex-wrap:wrap;gap:14px 0}.player-rating-category{flex:0 0 40%;border-inline-start:none!important}.player-rating-rater{flex:0 0 100%;border-inline-start:none;padding-top:14px;border-top:1px solid var(--sage-100)}}
@media(max-width:600px){.player-rating-card summary{flex-wrap:wrap;gap:10px}.player-rating-score{justify-items:start}}

.player-ratings-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:18px}
.player-ratings-filter{align-items:center}.player-ratings-filter form{display:flex;align-items:center;margin-inline-start:10px;padding-inline-start:20px;border-inline-start:1px solid var(--sage-275)}
.player-ratings-filter a{padding:8px 20px;border:1px solid var(--sage-275);border-radius:18px;color:var(--sage-900);font-size:13px;font-weight:700;text-decoration:none}
.player-ratings-filter a.active{border-color:var(--green-375);background:var(--green-50);color:var(--dark-text, var(--green-700))}
.player-ratings-pagination{display:flex;align-items:center;justify-content:center;gap:7px;padding-top:18px}
.player-ratings-pagination a,.player-ratings-pagination span{display:grid;width:38px;height:38px;place-items:center;border-radius:50%;color:var(--sage-700);text-decoration:none}
.player-ratings-pagination a{background:var(--surface-page)}
.player-ratings-pagination a.active{background:var(--green-375);color:var(--text-on-brand)}

.badges-card { display:block; width:100%; border:0; font:inherit; text-align:right; cursor:pointer; transition:background .15s; }
@media (hover: hover) {
.badges-card:hover { background:var(--sage-100); } }
.badges-card h2 { margin:0 0 10px; color:var(--text-primary); font-size:26px; font-weight:900; }
.badges-card img { display:block; width:min(150px,70%); height:auto; margin:0 auto 44px; }
.badges-card-pill { position:absolute; bottom:18px; left:20px; padding:12px 26px; border-radius:999px; background:var(--orange-325); color:var(--text-on-brand); font-size:15px; font-weight:800; }
.badges-modal-dialog { position:relative; width:min(1160px,100%); max-height:calc(100dvh - 40px); overflow:auto; padding:22px 32px 40px; border-radius:16px; background:var(--surface); box-shadow:0 10px 40px rgba(0,20,15,.12); animation:coach-account-modal-in .2s cubic-bezier(.19,1,.22,1); }
.badges-modal-header { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:42px; }
.badges-modal-header h2 { margin:0 0 0 auto; color:var(--dark-text, var(--green-875)); font-size:26px; font-weight:900; }
.badges-filter { display:inline-flex; overflow:hidden; border-radius:999px; background:var(--surface); box-shadow:0 6px 18px rgba(0,0,0,.09); }
.badges-filter input { position:absolute; opacity:0; pointer-events:none; }
.badges-filter span { display:block; padding:12px 26px; color:var(--text-primary); font-size:16px; font-weight:800; cursor:pointer; transition:background .15s,color .15s; }
.badges-filter input:checked + span { background:#3fb15a; color:var(--text-on-brand); }
.badges-filter input:focus-visible + span { outline:2px solid var(--green-800); outline-offset:-4px; }
.badges-modal-close { display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:50%; background:var(--sage-100); color:var(--text-primary); font-size:20px; line-height:1; cursor:pointer; }
.badges-grid { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; }
.badge-tile { display:flex; width:min(325px,100%); min-height:437px; box-sizing:border-box; flex-direction:column; align-items:center; padding:12px 24px 24px; border:4px solid var(--green-275); border-radius:36px; background:var(--green-125); text-align:center; }
.badge-tile h3 { margin:0 0 8px; color:var(--text-primary); font-size:20px; font-weight:800; }
.badge-tile p { margin:0; font-size:17px; font-weight:800; }
.badge-tile img { display:block; height:auto; }
.badge-tile-pill { display:inline-flex; align-items:center; gap:6px; padding:8px 26px; border-radius:14px; font-size:17px; font-weight:800; }
.badge-tile-pill svg { width:18px; height:18px; fill:none; stroke-linecap:round; stroke-linejoin:round; stroke-width:2.2; }
.badge-tile.is-earned .badge-tile-pill { background:var(--sage-100); color:var(--dark-text, var(--green-200)); }
.badge-tile.is-earned .badge-tile-pill circle { fill:var(--green-200); stroke:none; }
.badge-tile.is-earned .badge-tile-pill path { stroke:var(--text-on-brand); }
.badge-tile.is-earned p { margin:36px 0 34px; color:var(--dark-text, var(--green-200)); }
.badge-tile.is-earned img { width:180px; }
.badge-tile.is-locked { border-color:var(--gray-725); background:var(--gray-100); }
.badge-tile.is-locked img { width:205px; margin:6px 0 24px; }
.badge-tile.is-locked .badge-tile-pill { padding:10px 30px; background:var(--gray-725); color:var(--text-on-brand); }
.badge-tile.is-locked .badge-tile-pill svg { stroke:var(--text-on-brand); }
.badge-tile.is-locked p { margin-top:36px; color:var(--gray-725); }
.badges-modal:has(input[value="earned"]:checked) .badge-tile.is-locked,.badges-modal:has(input[value="locked"]:checked) .badge-tile.is-earned { display:none; }
@media (max-width:700px) { .badges-modal-dialog { padding:18px 16px 28px; } .badges-filter span { padding:10px 16px; font-size:14px; } }
.badges-empty { display:none; width:100%; margin:40px 0; color:var(--sage-575); font-size:17px; font-weight:800; text-align:center; }
.badges-modal:has(input[value="locked"]:checked) .is-locked-empty { display:block; }

/* Player payments (profile/player-payments) */
.admin-table-badge.is-payment-processing{background:var(--sage-100);color:#526e8c}.admin-table-badge.is-payment-paid{background:var(--sage-100);color:var(--dark-text, #4c8266)}.admin-table-badge.is-payment-failed{background:var(--red-100);color:#a15c5c}.admin-table-badge.is-payment-expired{background:var(--yellow-300);color:#9c7a3c}.admin-table-badge.is-payment-paid_late{background:#fde8d8;color:var(--dark-text, #a24a12)}.admin-table-badge.is-payment-refunded{background:var(--sage-100);color:#5a6672}
/* Dark: the status hues above are tuned for light pills; lift them so they read on the dark pill. */
:root[data-theme="dark"] .admin-table-badge.is-payment-processing{color:#a9c2dd}:root[data-theme="dark"] .admin-table-badge.is-payment-failed{color:#eba9a9}:root[data-theme="dark"] .admin-table-badge.is-payment-expired{color:#e2c482}:root[data-theme="dark"] .admin-table-badge.is-payment-paid_late{background:rgba(244,91,18,.18);color:#f4b48c}:root[data-theme="dark"] .admin-table-badge.is-payment-refunded{color:#b8c3cd}
.player-payment-card .player-rating-score .admin-table-badge{justify-self:end}
.player-payment-detail{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:16px 20px;border-top:1px solid var(--sage-100)}
.player-payment-detail dl{display:flex;flex-wrap:wrap;gap:14px 28px;margin:0}.player-payment-detail dl>div{display:grid;gap:4px}
.player-payment-detail dt{color:var(--gray-400);font-size:11px;font-weight:600}.player-payment-detail dd{margin:0;color:var(--text-primary);font-size:13px;font-weight:700}.player-payment-detail dd small{color:var(--gray-400);font-weight:600}
.player-payment-receipt{display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:18px;background:var(--orange);color:var(--text-on-brand);font-size:13px;font-weight:800;text-decoration:none;transition:background .16s}@media (hover: hover) {.player-payment-receipt:hover{background:#d94d0b;color:var(--text-on-brand)} }.player-payment-receipt svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.player-ratings-filter:has(.player-payments-search){flex-wrap:nowrap}.player-payments-search{display:flex;flex:1 1 0;min-width:0;align-items:center;gap:8px}.player-payments-search .captain-filter-search{flex:1 1 140px;min-width:0;height:40px}.player-payments-search select.captain-filter-pill,.player-payments-search .captain-filter-date{flex:0 1 120px;width:auto;min-width:0;max-width:none;height:40px;padding:0 14px}.player-payments-search .captain-filter-date input{padding:0 32px 0 10px;font-size:12px}.player-payments-search-clear{flex-shrink:0;white-space:nowrap;color:var(--sage-700);font-size:12px;font-weight:700;text-decoration:none}@media (hover: hover) {.player-payments-search-clear:hover{color:var(--text-primary)} }
@media(max-width:767px){.player-ratings-filter:has(.player-payments-search){flex-wrap:wrap}.player-payments-search{flex:1 1 100%;flex-wrap:wrap;margin-inline-start:0;padding-inline-start:0;border-inline-start:0}.player-payments-search select.captain-filter-pill,.player-payments-search .captain-filter-date{flex:1 1 calc(50% - 4px)}.player-payments-search .captain-filter-search{flex:1 1 100%}.player-payments-search .captain-filter-search{flex:1 1 auto;min-width:0}}

/* Source: captain-profile.css */
@media(min-width:768px){.captain-profile-page .nav-menu>a,.captain-profile-page .nav-dropdown-toggle{color:var(--text-primary)}@media (hover: hover){.captain-profile-page .nav-menu>a:hover{color:var(--dark-text, var(--green))}}}
.captain-dashboard{display:block;width:min(1380px,100%);margin:auto;padding:clamp(36px,5vw,64px) clamp(24px,5vw,72px) 110px}
.captain-hero{position:relative;display:grid;grid-template-columns:minmax(0,56fr) minmax(330px,44fr);align-items:start;column-gap:clamp(32px,5vw,76px);direction:ltr}.captain-hero>*{direction:rtl}
.captain-identity{position:relative;grid-column:2;grid-row:1;display:grid;min-height:220px;align-content:center;gap:16px;padding:28px 8px;color:var(--text-primary)}
.captain-identity-info{display:flex;align-items:flex-start;gap:16px;margin-top:26px}
.captain-avatar{display:grid;width:78px;height:78px;flex:0 0 78px;place-items:center;overflow:hidden;border:3px solid var(--surface);border-radius:50%;background:var(--surface-page)}.captain-avatar svg{width:52px;height:52px;fill:var(--text-primary)}.captain-avatar img{width:100%;height:100%;object-fit:cover}
.captain-identity-text{min-width:0}.captain-identity-text h1{margin:0 0 6px;font-size:22px;font-weight:800}.captain-identity-text .captain-identity-role{margin:0 0 10px;color:var(--sage-850);font-size:13px}
.captain-shift-card{margin-top:14px;padding:16px;border-radius:18px;background:var(--surface);border:1px solid var(--sage-325);box-shadow:0 6px 18px rgba(23,79,67,.08);max-width:420px}
.captain-shift-location{display:flex;align-items:center;gap:10px;margin-bottom:14px}.captain-shift-location strong{display:block;font-size:14px;color:var(--text-primary)}.captain-shift-location small{color:var(--sage-850);font-size:12px}
.captain-shift-pin svg{width:26px;height:26px;fill:none;stroke:#26784d;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.captain-shift-card.is-near .captain-shift-pin svg{fill:var(--green-75)}
.captain-shift-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px}.captain-shift-actions button{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px;border-radius:14px;font-weight:800;font-size:14px;cursor:pointer;border:1px solid var(--sage-325)}
.captain-shift-actions button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.captain-shift-in{background:var(--surface);color:var(--text-primary)}.captain-shift-out{background:var(--green-800);color:var(--text-on-brand);border-color:var(--green-800)!important}.captain-shift-actions button:disabled{opacity:.45;cursor:not-allowed}
.captain-shift-actions button.is-done{flex-direction:column;gap:2px;opacity:1;cursor:default}.captain-shift-actions button.is-done bdi{font-size:11px;font-weight:600}
.captain-shift-in.is-done{background:var(--green-50);color:var(--dark-text, var(--green-700));border-color:#bfe3cd}.captain-shift-out.is-done{background:var(--green-800);color:var(--text-on-brand)}
.captain-shift-log{margin-top:12px;border-top:1px solid var(--sage-150);padding-top:10px;font-size:13px;color:var(--sage-850)}.captain-shift-log summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none}.captain-shift-log summary::-webkit-details-marker{display:none}
.captain-shift-log summary span{display:flex;align-items:center;gap:8px}.captain-shift-log svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.captain-shift-log[open] .captain-shift-chevron{transform:rotate(180deg)}.captain-shift-log p{margin:8px 0 0}
.captain-identity-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:16px;background:#26784d;color:var(--text-on-brand);font-size:12px;font-weight:800}
.captain-hero-art{grid-column:1;grid-row:1;display:grid;min-height:220px;place-items:center;padding:10px 5%}.captain-hero-art img{display:block;width:min(420px,100%);max-height:340px;object-fit:contain}
.captain-season-banner{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:28px;padding:26px 34px;border-radius:22px;background:linear-gradient(120deg,#0b4437,var(--green-825));box-shadow:0 10px 30px rgba(0,0,0,.18)}
.captain-season-icon{display:grid;width:56px;height:56px;flex:0 0 56px;place-items:center;border-radius:50%;background:rgba(255,255,255,.14)}.captain-season-icon svg{width:30px;height:30px;fill:none;stroke:var(--yellow);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.captain-season-text{flex:1;min-width:0;text-align:right}.captain-season-text h2{margin:0 0 6px;color:var(--text-on-brand);font-size:22px}.captain-season-text p{margin:0;color:#cfe3d8;font-size:13px}
.captain-season-cta{flex:0 0 auto;padding:11px 26px;border:1px solid rgba(255,255,255,.6);border-radius:20px;color:var(--text-on-brand);font-size:13px;font-weight:800;text-decoration:none}@media (hover: hover){.captain-season-cta:hover{background:rgba(255,255,255,.12)}}
.captain-sessions{margin-top:48px}.captain-sessions-heading{display:flex;align-items:center;justify-content:space-between;margin:0 0 22px}.captain-sessions-heading h2{margin:0;color:var(--text-primary);font-size:22px}.captain-sessions-viewall{color:var(--dark-text, var(--green));font-size:13px;font-weight:700;text-decoration:none;opacity:.9}@media (hover: hover){.captain-sessions-viewall:hover{opacity:1;text-decoration:underline}}
.captain-filters{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;overflow-x:auto;padding-bottom:6px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.captain-filters>*,.activities-filter-sheet>*{flex:0 0 auto}
/* Activities: the phone-only filter sheet wrapper is layout-transparent on desktop. */
.activities-filter-sheet{display:contents}
:is(.activities-filter-close,.activities-filter-title,.activities-filter-date-title,.activities-filter-reset,.activities-filter-backdrop,.activities-filter-trigger,.activities-status-chips){display:none}
.captain-filter-pill{height:48px;padding:0 22px;border:1px solid transparent;border-radius:24px;background:var(--surface);color:var(--text-primary);font:inherit;font-size:13px;font-weight:700;appearance:none;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08)}
select.captain-filter-pill{width:170px;min-width:0;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;-webkit-appearance:none;-moz-appearance:none}
.captain-filter-pill.is-active{border-color:var(--green-375);box-shadow:0 2px 8px rgba(69,189,99,.3)}
.captain-filter-date{position:relative;display:flex;align-items:center;gap:10px;min-width:170px;height:48px;padding:0 22px;border-radius:24px;background:var(--surface);box-shadow:0 2px 6px rgba(0,0,0,.08);cursor:pointer}
.captain-filter-date span{display:flex;flex:0 0 16px;color:var(--dark-text, var(--green-375));pointer-events:none}.captain-filter-date span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.captain-filter-date input{position:absolute;inset:0;width:100%;height:100%;margin:0;border:0;background:transparent;padding:0 46px 0 22px;font:inherit;font-size:13px;font-weight:700;color:transparent;cursor:pointer}
.captain-filter-date input::-webkit-calendar-picker-indicator{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;opacity:0;cursor:pointer}
.captain-filter-date.has-value input{color:var(--text-primary)}
.captain-filter-date-placeholder{position:absolute;inset:0;display:flex;align-items:center;padding:0 46px 0 22px;font:inherit;font-size:13px;font-weight:700;color:var(--text-primary);white-space:nowrap;overflow:hidden;pointer-events:none}
.captain-filter-date.has-value .captain-filter-date-placeholder{display:none}
.captain-filter-search{position:relative;flex:0 0 220px;min-width:200px;height:48px}
.captain-filter-search input{width:100%;height:100%;padding:0 44px 0 22px;border:0;border-radius:24px;background:var(--surface);box-shadow:0 2px 6px rgba(0,0,0,.08);font:inherit;font-size:13px}
.captain-filter-search span{position:absolute;top:50%;left:18px;transform:translateY(-50%);display:flex;color:var(--dark-text, var(--green-375))}.captain-filter-search span svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
[data-captain-session-results]{transition:opacity .15s ease}[data-captain-session-results].is-loading{opacity:.45;pointer-events:none}
.captain-filter-submit{display:flex;align-items:center;gap:8px;height:48px;padding:0 26px;border:0;border-radius:24px;background:var(--green-200);color:var(--text-on-brand);font:inherit;font-size:13px;font-weight:800;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.08)}.captain-filter-submit svg{width:18px;height:18px}@media (hover: hover){.captain-filter-submit:hover{background:var(--green-400)}}
.captain-filter-clear{display:flex;align-items:center;height:48px;padding:0 22px;border:1px solid rgba(23,79,67,.25);border-radius:24px;background:var(--surface);color:var(--text-primary);font:inherit;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none}@media (hover: hover){.captain-filter-clear:hover{background:var(--surface-page)}}.captain-filter-clear[hidden]{display:none}
.captain-session-group{margin-top:34px}.captain-session-group-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 16px}.captain-session-group-head h3{margin:0;color:var(--text-primary);font-size:19px}.captain-session-group-pill{padding:8px 20px;border:1px solid rgba(23,79,67,.3);border-radius:16px;background:transparent;color:var(--text-primary);font-size:12px;font-weight:800;cursor:pointer}@media (hover: hover){.captain-session-group-pill:hover{background:rgba(23,79,67,.08)}}
.captain-session-list{gap:clamp(16px,2.5vw,32px)}.captain-session-list article{position:relative;padding:20px;border-radius:14px;background:var(--surface-raised);box-shadow:0 4px 12px rgba(0,0,0,.08)}.captain-session-list h3{position:relative;min-height:48px;margin:0 0 12px;font-size:17px;line-height:1.5}.captain-session-list p{margin:8px 0;padding:7px 10px;border-radius:8px;background:var(--green-50);color:var(--dark-text, var(--green-500));font-size:12px}.captain-session-list article>div{display:flex;gap:10px;margin-top:14px}.captain-session-list article>div form{flex:1;display:flex}.captain-session-list article button{flex:1;min-height:38px;padding:8px;border:0;border-radius:20px;background:var(--green-800);color:var(--text-on-brand);font:inherit;font-size:11px}.captain-session-list article button:last-child{background:var(--green-375)}.captain-session-time-range{display:flex;gap:8px}.captain-session-time-range p{flex:1;min-width:0}.captain-session-date-row{justify-content:space-between}.captain-session-date-main{display:flex;align-items:center;gap:8px;min-width:0}.captain-session-reference{flex:0 0 auto;padding:3px 10px;border-radius:12px;background:var(--green-125);color:var(--dark-text, var(--green-700));font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600;letter-spacing:.02em}.captain-session-list p.captain-no-clockout{background:var(--red-100);color:var(--red-725);font-weight:700}.captain-session-list p.captain-late{background:var(--yellow-300);color:#b9770e;font-weight:700}.captain-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;grid-column:1/-1;padding:52px 24px;border:1.5px dashed var(--sage-375);border-radius:16px;background:var(--sage-50);text-align:center}.captain-empty svg{width:38px;height:38px;fill:none;stroke:var(--gray-175);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}.captain-empty p{margin:0;padding:0;background:transparent;color:var(--gray-400);font-size:14px;font-weight:700}
.captain-session-list h3 .captain-status-toggle{display:inline-flex;flex:0 0 auto;align-items:center;justify-content:center;width:18px;height:18px;min-height:0;margin-inline-start:auto;padding:0;border:0;border-radius:50%;background:transparent!important;color:#b9770e;font-size:0;cursor:pointer}.captain-session-list h3 .captain-status-toggle svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.captain-status-popover{position:absolute;z-index:5;top:44px;inset-inline-end:14px;width:190px;padding:8px;border-radius:12px;background:var(--surface);box-shadow:0 10px 26px rgba(0,0,0,.2)}.captain-status-popover[hidden]{display:none!important}.captain-status-popover:not([hidden]){display:flex!important;flex-direction:column!important;gap:6px}.captain-status-popover p{margin:0!important;text-align:right;line-height:1.4}
.captain-session-group.is-upcoming .captain-session-list article>div form button:not(:disabled){background:#ef7d24}
.captain-session-group.is-finished .captain-session-list article>div button{background:var(--green-375)}
.captain-session-group.is-finished .captain-session-list article>div [data-clock-in]:not(:disabled){background:var(--green-800)}
.captain-session-group.is-finished .captain-session-list article>div [data-clock-out]:not(:disabled){background:var(--blue-50)}
.captain-session-list article>div button:first-child:disabled,.captain-session-list article>div button:last-child:disabled{background:var(--sage-200);color:var(--gray-400);cursor:not-allowed}
.captain-session-list article>div button.player-task-qr-button.is-active{background:var(--blue-50);color:var(--text-on-brand);cursor:pointer}
.captain-session-list article>div button.player-task-qr-button:disabled{background:var(--sage-200);color:var(--gray-400);cursor:not-allowed}
.player-task-qr-icon{width:19px!important;height:19px!important;object-fit:contain}
.captain-session-list article>div button.captain-session-status:disabled{cursor:not-allowed;opacity:.9;color:var(--text-on-brand)}
.captain-session-list article>div button.captain-session-status-attended:disabled{background:var(--green-375)}
.captain-session-list article>div button.captain-session-status-late:disabled{background:var(--orange-900)}
.captain-session-list article>div button.captain-session-status-absent:disabled{background:var(--red-725)}
.captain-session-list article>div button.captain-session-status-confirmed:disabled{background:#ef7d24}
.captain-session-list article>div button.captain-session-status-started:disabled{background:#2f7ded}
.captain-session-group.is-finished .captain-session-list article>div button.captain-session-status-confirmed:disabled{background:var(--green-800)}
.captain-session-group.is-ongoing .captain-session-list article{position:relative}
.captain-session-group.is-ongoing .captain-session-list article::before{content:"";position:absolute;top:14px;left:14px;width:10px;height:10px;border-radius:50%;background:#e5322d;box-shadow:0 0 0 4px rgba(229,50,45,.22);animation:captain-live-pulse 1.6s ease-in-out infinite}
@keyframes captain-live-pulse{0%,100%{opacity:1}50%{opacity:.45}}
.captain-players{grid-column:1/-1;margin-top:64px;padding-bottom:30px;border-radius:25px;background:var(--surface-page);overflow:hidden}.captain-table-head{display:grid;grid-template-columns:2fr .7fr 1fr 1.5fr 1.2fr;padding:14px 35px;border-radius:25px;background:var(--sage-150);color:var(--gray-725);font-size:13px;font-weight:800;text-align:center}.captain-player-list{padding:20px 35px}.captain-player-list article{position:relative;display:grid;grid-template-columns:2fr .7fr 1fr 1.5fr 1.2fr;align-items:center;min-height:58px;border-bottom:1px solid var(--sage-275);text-align:center}.player-row-toggle{position:absolute;top:14px;right:-22px;border:0;background:transparent;color:var(--dark-text, var(--green-675))}.captain-stars{color:var(--yellow-650);font-size:26px;direction:ltr;white-space:nowrap}.captain-stars i{color:var(--gray-50);font-style:normal}.captain-player-list article>b{padding:7px;border-radius:18px;background:var(--sage-375);color:var(--text-on-brand);font-size:11px}.captain-player-list article>b.attended{background:var(--green-375)}.captain-player-list article>b.late{background:var(--yellow);color:#5c4400}.captain-player-expanded{display:none;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:25px;margin:12px 0;padding:25px;border-radius:18px;background:var(--sage-150)}.captain-player-list article:first-child .captain-player-expanded{display:grid}.captain-player-expanded section{min-height:100px}.captain-player-expanded section:only-child{grid-column:1/-1}.captain-player-expanded h3{margin:0 0 15px}.captain-player-expanded section>strong{color:var(--dark-text, var(--green-825));font-size:25px}.large-stars{margin-right:20px;color:var(--gray-50);font-size:33px}.captain-player-expanded button,.captain-bottom-cards button{padding:11px 24px;border:0;border-radius:20px;background:var(--blue-50);color:var(--text-on-brand);font:inherit}.captain-pagination{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:22px}.captain-pagination>*{display:grid;width:34px;height:34px;place-items:center;border-radius:50%}.captain-pagination b{background:var(--green-375);color:var(--text-on-brand)}
.captain-bottom-cards{display:grid;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:30px;margin-top:100px}.captain-bottom-cards article{display:grid;align-content:start;min-height:300px;gap:14px;padding:30px 38px;border-radius:25px;background:var(--surface-page)}.captain-bottom-cards h2{margin:0 0 8px;text-align:center}.captain-bottom-cards input{height:45px;padding:0 18px;border:1px solid var(--sage-200);border-radius:22px;background:transparent;font:inherit}.captain-bottom-cards article:last-child p{display:flex;justify-content:space-between;margin:0;padding:12px 5px;border-bottom:1px solid var(--sage-200)}.captain-bottom-cards article:last-child>b,.captain-checkin{margin-top:auto;padding:12px!important;border-radius:20px;background:var(--green-375)!important;color:var(--text-on-brand);text-align:center}
@media(max-width:950px){.captain-hero{grid-template-columns:minmax(0,52fr) minmax(290px,48fr);column-gap:20px}.captain-filters{grid-template-columns:repeat(2,1fr)}.captain-filters button{grid-column:1/-1}.captain-session-list{gap:14px}.captain-session-list article{padding:14px}.captain-players{overflow-x:auto}.captain-table-head,.captain-player-list article{min-width:800px}.captain-bottom-cards{margin-top:75px}}
@media(max-width:700px){.captain-dashboard{padding:30px 12px 70px}.captain-hero{display:block}.captain-identity{min-height:auto;padding:15px}.captain-hero-art{display:none}.captain-season-banner{flex-wrap:wrap;margin-top:16px;padding:20px}.captain-sessions{margin-top:34px}.captain-sessions-heading{flex-direction:column;gap:8px;text-align:center}.captain-filters{grid-template-columns:1fr;padding:14px}.captain-filters button{grid-column:auto}.captain-session-list{gap:12px}.captain-players{margin-top:45px}.captain-table-head{display:none}.captain-player-list{padding:12px}.captain-player-list article{display:grid;min-width:0;grid-template-columns:1fr 1fr;gap:10px;padding:14px 4px;text-align:right}.captain-player-list article>strong{grid-column:1/-1;padding-right:32px}.captain-player-list .player-row-toggle{right:2px}.captain-stars{font-size:20px}.captain-player-expanded,.captain-player-list article:first-child .captain-player-expanded{display:grid;grid-template-columns:1fr;padding:16px}.captain-bottom-cards{grid-template-columns:1fr;gap:20px;margin-top:55px}.captain-bottom-cards article{min-height:260px;padding:22px}}

/* Player table accordion */
.captain-player-expanded[hidden]{display:none!important}.captain-player-expanded:not([hidden]){display:grid}.captain-player-list article:first-child .captain-player-expanded[hidden]{display:none!important}.captain-player-list article.is-expanded{padding-bottom:12px}.player-row-toggle{display:grid;width:30px;height:30px;padding-right:50px;place-items:center;border-radius:50%;cursor:pointer;transition:transform .18s ease;background:transparent!important}.player-row-toggle[aria-expanded="true"]{background:var(--green-75);transform:rotate(0)}
@media(max-width:700px){.captain-player-expanded[hidden],.captain-player-list article:first-child .captain-player-expanded[hidden]{display:none!important}.captain-player-expanded:not([hidden]){display:grid;grid-template-columns:1fr;padding:16px}}

.captain-stars em{color:var(--yellow-650);font-style:normal}.captain-rating-form{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:14px}.captain-rating-input{display:flex;flex-direction:row-reverse}.captain-rating-input input{position:absolute;opacity:0;pointer-events:none}.captain-rating-input label{color:var(--gray-50);font-size:34px;cursor:pointer;transition:color .15s,transform .15s}.captain-rating-input input:checked~label{color:var(--yellow-650)}@media (hover: hover){.captain-rating-input label:hover,.captain-rating-input label:hover~label{color:var(--yellow-650)}}@media (hover: hover){.captain-rating-input label:hover{transform:scale(1.08)}}.captain-rating-form button{padding:8px 18px!important;background:var(--green-375)!important}.captain-rating-locked{margin:8px 0;color:var(--gray-550)}.large-stars.is-disabled{margin:0;color:var(--gray-50)}

/* Overall vs. individual rating mode toggle */
.captain-rating-mode{display:flex;gap:10px;width:100%;justify-content:center;margin-bottom:4px}
.captain-rating-mode label{display:flex;align-items:center;gap:6px;padding:6px 16px;border:1px solid var(--sage-275);border-radius:16px;color:var(--sage-900);font-size:12px;font-weight:700;cursor:pointer}
.captain-rating-mode input{margin:0}
.captain-rating-mode input:checked+label,.captain-rating-mode label:has(input:checked){border-color:var(--green-375);background:var(--green-50);color:var(--dark-text, var(--green-700))}
.captain-rating-overall:not([hidden]){display:flex;justify-content:center;width:100%}

/* Per-category ratings, required when "individual" mode is selected */
.captain-rating-categories{width:100%;margin-top:16px;padding-top:14px;border-top:1px solid var(--sage-275)}
.captain-rating-categories h4{margin:0 0 8px;color:var(--text-primary);font-size:12px;font-weight:800;text-align:center}
.captain-rating-categories h4 span{color:var(--gray-400);font-weight:600}
.captain-rating-category{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 2px;font-size:13px;color:var(--sage-900);font-weight:700}
.captain-rating-category+.captain-rating-category{border-top:1px solid var(--sage-100)}
.captain-rating-input--sm{gap:2px}
.captain-rating-input--sm label{font-size:22px}

/* Player rating color scale */
.captain-stars.rating-1 em,.captain-modal-summary .rating-1{color:var(--red-450)}.captain-stars.rating-2 em,.captain-modal-summary .rating-2{color:var(--yellow-525)}.captain-stars.rating-3 em,.captain-stars.rating-4 em,.captain-modal-summary .rating-3,.captain-modal-summary .rating-4{color:var(--dark-text, var(--green-175))}.captain-stars.rating-5 em,.captain-modal-summary .rating-5{color:var(--yellow-900)}.captain-rating-input input[value="1"]:checked~label{color:var(--red-450)}.captain-rating-input input[value="2"]:checked~label{color:var(--yellow-525)}.captain-rating-input input[value="3"]:checked~label,.captain-rating-input input[value="4"]:checked~label{color:var(--dark-text, var(--green-175))}.captain-rating-input input[value="5"]:checked~label{color:var(--yellow-900)}

@media (hover: hover){

.captain-rating-input input[value="1"]+label:hover,.captain-rating-input input[value="1"]+label:hover~label{color:var(--red-450)}}@media (hover: hover){.captain-rating-input input[value="2"]+label:hover,.captain-rating-input input[value="2"]+label:hover~label{color:var(--yellow-525)}}@media (hover: hover){.captain-rating-input input[value="3"]+label:hover,.captain-rating-input input[value="3"]+label:hover~label,.captain-rating-input input[value="4"]+label:hover,.captain-rating-input input[value="4"]+label:hover~label{color:var(--dark-text, var(--green-175))}}@media (hover: hover){.captain-rating-input input[value="5"]+label:hover,.captain-rating-input input[value="5"]+label:hover~label{color:var(--yellow-900)}}

.captain-booking-reference{direction:ltr;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:700;letter-spacing:.02em}
.captain-manual-attendance-form{display:grid;gap:9px}.captain-manual-attendance-form label{padding-inline:8px;color:var(--text-primary);font-size:12px;font-weight:800}.captain-manual-attendance-form input[dir="ltr"]{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em}.captain-manual-attendance-form .captain-checkin{margin-top:8px}
.captain-attendance-workspace{display:grid;grid-column:1/-1;grid-template-columns:310px minmax(0,1fr);gap:28px;align-items:start;margin-top:64px;direction:ltr}.captain-attendance-workspace>*{direction:rtl}.captain-attendance-workspace .captain-players{grid-column:2;grid-row:1;align-self:start;margin:0}.captain-coach-attendance{grid-column:1;grid-row:1;align-self:start;margin:0;padding:0 20px 28px;border:1px solid rgba(23,79,67,.12);border-radius:25px;background:var(--surface-page);box-shadow:0 5px 15px rgba(0,0,0,.09);text-align:center;overflow:hidden}.captain-coach-attendance h2{display:grid;min-height:45px;margin:0 -20px 18px;place-items:center;border-radius:25px;background:var(--sage-150);color:var(--text-primary);font-size:21px}.captain-coach-attendance form{display:grid;gap:10px}.captain-coach-attendance button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:62px;border:0;border-radius:22px;background:var(--blue-50);color:var(--text-on-brand);font:inherit;font-size:17px;line-height:1.25;cursor:pointer}.captain-coach-attendance button:disabled{opacity:.65;cursor:wait}.captain-coach-attendance button svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.captain-coach-role{margin-top:12px;padding:11px;border:1px solid var(--sage-200);border-radius:22px;background:var(--surface);color:var(--text-primary);font-size:17px;font-weight:700}.captain-coach-attendance>p{margin:20px 10px 4px;color:var(--sage-800);font-size:13px;font-weight:700;line-height:1.6}.captain-location-status{margin:0!important;color:var(--sage-700)!important;font-size:11px!important;font-weight:600!important}
@media(max-width:700px){.captain-attendance-workspace{grid-template-columns:1fr}.captain-attendance-workspace .captain-players{grid-column:1;grid-row:1}.captain-coach-attendance{grid-column:1;grid-row:2;width:min(430px,100%);margin:auto}}
.captain-coach-attendance button.is-verified{background:var(--orange-50);opacity:1;cursor:pointer}.captain-coach-attendance button.is-verified:disabled{background:var(--green-375);opacity:1;cursor:default}.captain-coach-attendance button.is-verified.is-awaiting:disabled{background:#9aa3ab;color:var(--text-on-brand)}.captain-coach-attendance button.is-verified svg{display:none}

/* Per-session detail popup, opened from a card's "بدء الجلسة" button */
.captain-session-modal[hidden]{display:none}.captain-session-modal{position:fixed;inset:0;z-index:2600;display:grid;place-items:center;padding:max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));opacity:0;transition:opacity .18s ease}.captain-session-modal.is-open{opacity:1}
.captain-session-dialog{position:relative;width:min(900px,100%);max-height:calc(100dvh - 44px);overflow-x:hidden;overflow-y:auto;border:2px solid var(--green-375);border-radius:28px;background:var(--surface-page);box-shadow:0 22px 65px rgba(0,0,0,.42);transform:translateY(18px) scale(.98);transition:transform .18s ease}.captain-session-modal.is-open .captain-session-dialog{transform:none}
.captain-session-modal-feedback{margin:16px 22px 0;padding:12px 16px;border-radius:14px;background:var(--green-50);color:var(--dark-text, var(--green-700));font-size:13px;font-weight:800;text-align:center}.captain-session-modal-feedback[hidden]{display:none}.captain-session-modal-feedback.is-error{background:var(--red-100);color:var(--red-725)}
.captain-session-modal-cover{height:160px;overflow:hidden;border-radius:24px 24px 0 0}.captain-session-modal-cover img{display:block;width:100%;height:100%;object-fit:cover}
.captain-session-modal-cards{display:grid;grid-template-columns:minmax(0,1fr) 200px;align-items:center;gap:18px;padding:18px 22px 0}
.captain-attendance-summary{display:grid;gap:12px;align-content:center;padding:16px 14px;border:1px solid rgba(23,79,67,.12);border-radius:20px;background:var(--surface-page);text-align:center}
.captain-attendance-summary-row{display:grid;gap:7px}
.captain-attendance-pill{display:inline-flex;align-items:center;justify-content:center;padding:7px 12px;border:0;border-radius:16px;background:var(--green-800);color:var(--text-on-brand);font:inherit;font-size:12px;font-weight:700;direction:ltr;unicode-bidi:isolate;cursor:default}.captain-attendance-pill[hidden]{display:none}
button.captain-attendance-pill:not(:disabled){cursor:pointer}
.captain-attendance-pill.is-pending{background:var(--sage-200);color:var(--gray-400)}
button.captain-attendance-pill.is-pending{cursor:not-allowed}
.captain-session-modal-info{padding:6px 4px}.captain-session-modal-info h2{margin:0 0 14px;color:var(--text-primary);font-size:20px}.captain-session-modal-info p{display:flex;align-items:center;gap:8px;margin:10px 0;padding:9px 12px;border-radius:10px;background:var(--green-50);color:var(--dark-text, var(--green-500));font-size:13px}.captain-session-modal-info p svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.captain-session-modal-checkin{display:grid;grid-template-columns:200px 38px minmax(0,1fr);align-items:end;gap:14px;margin:18px 22px 0;padding:18px;border:1px solid var(--sage-200);border-radius:18px;background:var(--sage-100)}.captain-attendance-action-heading{display:grid;grid-column:1/-1;gap:3px}.captain-attendance-action-heading strong{color:var(--text-primary);font-size:15px}.captain-attendance-action-heading span{color:var(--sage-625);font-size:11px}.captain-session-modal-checkin>.captain-scan-player-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 14px;border:0;border-radius:13px;background:var(--blue-50);color:var(--text-on-brand);font:inherit;font-size:12px;font-weight:800;cursor:pointer}.captain-scan-player-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}.captain-attendance-divider{display:flex;align-items:center;align-self:stretch;color:var(--gray-400);font-size:11px}.captain-attendance-divider::before,.captain-attendance-divider::after{content:"";width:1px;height:calc(50% - 15px);margin:auto;background:var(--sage-375)}.captain-attendance-divider span{display:grid;width:27px;height:27px;flex:0 0 27px;place-items:center;border-radius:50%;background:var(--surface)}.captain-session-modal-checkin .captain-manual-attendance-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:end;gap:9px}.captain-session-modal-checkin .captain-manual-attendance-form label{display:grid;gap:5px;min-width:0;padding:0}.captain-session-modal-checkin .captain-manual-attendance-form label span{color:var(--sage-800);font-size:10px}.captain-session-modal-checkin .captain-manual-attendance-form input{width:100%;min-width:0;height:44px;padding:0 11px;border:1px solid var(--sage-200);border-radius:12px;background:var(--surface);font:inherit;font-size:11px}.captain-session-modal-checkin .captain-checkin{min-height:44px;margin:0;padding:0 14px!important;font-size:11px;white-space:nowrap}
.captain-checkin-locked-hint{grid-column:1/-1;margin:0 0 4px;color:#a15b1f;font-size:12px;font-weight:800}.captain-checkin-locked-hint[hidden]{display:none}
.captain-session-modal-checkin[data-locked] button:not([data-session-modal-checkin-hint]),.captain-session-modal-checkin[data-locked] input{opacity:.55;pointer-events:none;cursor:not-allowed}
.captain-player-expanded [data-open-attendance-url][disabled]{opacity:.55;cursor:not-allowed}
.captain-session-dialog .captain-table-head{min-width:0;margin:22px 22px 0;width:calc(100% - 44px)}.captain-session-dialog .captain-player-list{padding:14px 22px 26px}.captain-session-dialog .captain-player-list article{min-width:0}
@media(max-width:760px){.captain-session-modal{padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}.captain-session-dialog{max-height:calc(100dvh - 16px);border-radius:20px}.captain-session-modal-cover{height:120px}.captain-session-modal-cards{grid-template-columns:1fr;padding:16px 16px 0}.captain-session-modal-checkin{grid-template-columns:1fr;margin:16px;padding:16px}.captain-session-modal-checkin>.captain-scan-player-button{width:100%}.captain-attendance-divider{display:flex;align-items:center;gap:10px}.captain-attendance-divider::before,.captain-attendance-divider::after{width:auto;height:1px;flex:1;margin:0}.captain-session-modal-checkin .captain-manual-attendance-form{grid-template-columns:1fr 1fr}.captain-session-modal-checkin .captain-checkin{grid-column:1/-1}.captain-session-dialog .captain-table-head{display:none}.captain-session-dialog .captain-player-list{padding:14px}}
@media(max-width:480px){.captain-session-modal-cover{height:90px}.captain-session-modal-checkin .captain-manual-attendance-form{grid-template-columns:1fr}.captain-session-modal-checkin .captain-checkin{grid-column:auto}}

/* Coach program card icons */
.captain-session-list h3{display:flex;align-items:flex-start;gap:8px}.captain-program-title-icon{display:block;width:25px;height:25px;flex:0 0 25px}.captain-program-title-icon img{display:block;width:100%;height:100%;object-fit:contain}.captain-session-list p{display:flex;align-items:center;gap:8px}.captain-session-list p svg{width:17px;height:17px;flex:0 0 17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.captain-session-list article>div button{display:inline-flex;align-items:center;justify-content:center;gap:6px}.captain-session-list article>div button svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.captain-session-list article>div button:first-child svg{fill:currentColor;stroke:none}

body.captain-modal-open{overflow:hidden}.captain-players-modal[hidden]{display:none}.captain-players-modal{position:fixed;inset:0;z-index:2600;display:grid;place-items:center;padding:max(22px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(22px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));opacity:0;transition:opacity .18s ease}.captain-players-modal.is-open{opacity:1}.captain-players-backdrop{position:absolute;inset:0;background:rgba(0,35,29,.78);backdrop-filter:blur(4px)}.captain-players-dialog{position:relative;width:min(980px,100%);max-height:calc(100dvh - 44px);padding:32px;overflow:auto;border:2px solid var(--green-375);border-radius:28px;background:var(--surface-page);box-shadow:0 22px 65px rgba(0,0,0,.42);transform:translateY(18px) scale(.98);transition:transform .18s ease}.captain-players-modal.is-open .captain-players-dialog{transform:none}.captain-modal-close{position:absolute;top:15px;left:16px;display:grid;width:38px;height:38px;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--dark-text, var(--green-825));font-size:27px;cursor:pointer}.captain-players-dialog>header{padding:0 8px 22px}.captain-players-dialog>header small{color:var(--dark-text, var(--green-375));font-weight:900}.captain-players-dialog>header h2{margin:6px 0;color:var(--text-primary);font-size:28px}.captain-players-dialog>header p{margin:0;color:var(--gray-500)}.captain-modal-table-head,.captain-modal-player-list article{display:grid;grid-template-columns:2fr .65fr 1fr 1.2fr;gap:10px;align-items:center;text-align:center}.captain-modal-table-head{padding:12px 28px;border-radius:20px;background:var(--sage-150);color:var(--sage-800);font-size:12px;font-weight:900}.captain-modal-player-list{padding:10px 22px}.captain-modal-player-list article{position:relative;min-height:58px;border-bottom:1px solid var(--sage-275)}.captain-modal-row-toggle{position:absolute;right:-14px;border:0;background:transparent;color:var(--dark-text, var(--green-675));font-size:18px;cursor:pointer}.captain-modal-player-list article>b{padding:7px;border-radius:18px;background:var(--sage-375);color:var(--text-on-brand);font-size:11px}.captain-modal-player-list article>b.attended{background:var(--green-375)}.captain-modal-summary{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;padding:16px 22px;border-radius:14px;background:var(--sage-150)}.captain-modal-summary[hidden]{display:none}.captain-modal-summary strong{color:var(--dark-text, var(--green-675))}.captain-modal-empty{padding:45px;text-align:center}
@media(max-width:600px){.captain-players-modal{padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left))}.captain-players-dialog{max-height:calc(100dvh - 16px);padding:52px 12px 18px;border-radius:20px}.captain-modal-table-head{display:none}.captain-modal-player-list{padding:0}.captain-modal-player-list article{grid-template-columns:1fr 1fr;gap:9px;padding:14px 8px;text-align:right}.captain-modal-player-list article>strong{grid-column:1/-1}.captain-modal-summary{grid-column:1/-1;display:grid;gap:8px;padding:13px}.captain-modal-summary[hidden]{display:none}}
.captain-attendance-modal[hidden]{display:none}.captain-attendance-modal{position:fixed;inset:0;z-index:2650;display:grid;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));place-items:center;opacity:0;transition:opacity .18s}.captain-attendance-modal.is-open{opacity:1}.captain-attendance-backdrop{position:absolute;inset:0;background:rgba(3,29,24,.78);backdrop-filter:blur(5px)}.captain-attendance-dialog{position:relative;width:min(620px,100%);padding:34px;border:1px solid var(--green-200);border-radius:25px;background:var(--surface-page);box-shadow:0 24px 65px rgba(0,0,0,.4);color:var(--text-primary);direction:rtl}.captain-attendance-dialog header small{color:var(--dark-text, var(--green-375));font-weight:900}.captain-attendance-dialog header h2{margin:7px 0 8px;font-size:26px}.captain-attendance-dialog header p{margin:0 0 24px;color:var(--sage-700)}.captain-attendance-dialog form{display:grid;gap:10px}.captain-attendance-dialog label{font-weight:900}.captain-attendance-dialog input{width:100%;padding:13px 15px;border:1px solid var(--sage-375);border-radius:13px;background:var(--surface);color:var(--text-primary);font:inherit;direction:ltr;text-align:left}.captain-attendance-dialog input:focus{border-color:var(--input-focus);outline:3px solid var(--input-focus-ring)}.captain-attendance-dialog form>p{margin:0;color:var(--red-725);font-size:12px;font-weight:800}.captain-attendance-dialog form>div{display:flex;gap:10px;margin-top:10px}.captain-attendance-dialog form button{flex:1;padding:11px;border:0;border-radius:22px;background:var(--blue-400);color:var(--text-on-brand);font:inherit;font-weight:800;cursor:pointer}.captain-attendance-dialog form button:last-child{border:1px solid var(--green-800);background:transparent;color:var(--text-primary)}@media(max-width:520px){.captain-attendance-modal{padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left))}.captain-attendance-dialog{padding:28px 16px 18px;border-radius:19px}.captain-attendance-dialog header h2{font-size:21px}.captain-attendance-dialog form>div{flex-direction:column}}
.captain-scanner{position:relative;overflow:hidden;width:100%;aspect-ratio:4/3;border-radius:18px;background:#0c1f19}.captain-scanner video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.captain-scanner-frame{position:absolute;inset:14%;border:3px solid rgba(255,255,255,.85);border-radius:16px;box-shadow:0 0 0 999px rgba(0,0,0,.35)}
.captain-scanner-status{position:absolute;right:12px;bottom:12px;left:12px;margin:0;padding:9px 14px;border-radius:14px;background:rgba(7,32,26,.72);color:var(--text-on-brand);font-size:12px;font-weight:700;text-align:center}
.captain-attendance-dialog [data-attendance-url-error]{margin:14px 0 0;color:var(--red-725);font-size:12px;font-weight:800}.captain-attendance-dialog [data-attendance-url-error][hidden]{display:none}
.captain-scanner-manual-toggle{display:block;width:100%;margin-top:16px;padding:11px;border:1px dashed #9fb0a9;border-radius:16px;background:transparent;color:var(--text-primary);font:inherit;font-weight:800;font-size:12px;cursor:pointer}@media (hover: hover){.captain-scanner-manual-toggle:hover{background:rgba(23,79,67,.06)}}
.captain-attendance-dialog form[hidden]{display:none}.captain-attendance-dialog form{margin-top:14px}

/* Field bookings claimed by this coach */
.captain-field-bookings{grid-column:1/-1;margin-top:55px}.captain-field-bookings>h2{margin:0 0 22px;color:var(--text-primary)}.captain-field-booking-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.captain-field-booking-list article{padding:22px;border-radius:18px;background:var(--surface-page);box-shadow:0 4px 12px rgba(0,0,0,.08)}.captain-field-booking-list header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.captain-field-booking-list h3{margin:0;font-size:18px}.captain-field-booking-list header span{direction:ltr;color:var(--dark-text, var(--green-675));font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;font-weight:800}.captain-field-booking-list dl{display:grid;gap:9px;margin:0 0 16px}.captain-field-booking-list dl div{display:flex;justify-content:space-between;gap:12px;padding-bottom:7px;border-bottom:1px solid var(--sage-200)}.captain-field-booking-list dt{color:var(--sage-625);font-size:12px}.captain-field-booking-list dd{margin:0;font-size:13px;font-weight:800}.captain-field-booking-list article>b{display:block;padding:8px;border-radius:18px;background:var(--sage-375);color:var(--text-on-brand);font-size:12px;text-align:center}.captain-field-booking-list article>b.attended{background:var(--green-375)}
@media(max-width:950px){.captain-field-booking-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.captain-field-bookings{margin-top:42px}.captain-field-bookings>h2{text-align:center}.captain-field-booking-list{grid-template-columns:1fr}}

/* Unified program and field-booking task grid — 3 up, the rest revealed by "عرض الكل" */
.captain-session-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}.captain-session-list .captain-empty{grid-column:1/-1}.captain-field-task>div b{display:block;width:100%;padding:9px;border-radius:20px;background:var(--green-375);color:var(--text-on-brand);text-align:center}
.captain-field-task .captain-session-time-range p span{direction:rtl;font-family:inherit;font-weight:400}
.captain-session-list .captain-field-task .captain-session-date-row span{direction:rtl;font-family:inherit;font-weight:400}
.captain-session-list .captain-field-task .captain-session-date-row .captain-session-reference{direction:ltr;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}
.captain-session-list article:nth-child(n+4){display:none}.captain-session-list.is-expanded article:nth-child(n+4){display:block}
@media(max-width:950px){.captain-session-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.captain-session-list{grid-template-columns:1fr}}
.captain-sessions-toolbar{grid-column:1/-1;min-width:0}
.captain-sessions-toolbar .captain-filter-search{flex:1 1 220px}
.captain-player-list article>b.late,.captain-modal-player-list article>b.late{background:var(--orange-900)}
.captain-player-list article>b.absent,.captain-modal-player-list article>b.absent{background:var(--red-725)}
.captain-activity-tabs .admin-tabs-nav{display:flex;align-items:center;justify-content:flex-start;gap:28px;margin-bottom:24px;padding:20px 24px;border:0;background:transparent}
.captain-activity-tabs .admin-tabs-btn{display:inline-flex;min-height:54px;padding:9px 24px;margin:0;align-items:center;justify-content:center;gap:10px;border:0;border-radius:999px;background:var(--surface);color:var(--dark-text, var(--green-775));font:inherit;font-size:18px;font-weight:500;line-height:1.25;white-space:nowrap;cursor:pointer;transition:background-color .16s,color .16s,box-shadow .16s}
.captain-activity-tabs .admin-tabs-btn+.admin-tabs-btn{margin-right:0}
@media (hover: hover){
.captain-activity-tabs .admin-tabs-btn:hover{color:var(--dark-text, var(--green-775));box-shadow:0 3px 12px rgba(5,78,65,.16)}}
.captain-activity-tabs .admin-tabs-btn.is-active{background:#005b4d;color:var(--text-on-brand);box-shadow:none}
.captain-activity-tabs .captain-activity-tab-icon{width:32px;height:32px;padding:6px;border:2px solid currentColor;border-radius:50%;fill:none;stroke:currentColor;stroke-width:1.7}
@media(max-width:700px){.captain-activity-tabs .admin-tabs-nav{gap:10px;padding:12px}.captain-activity-tabs .admin-tabs-btn{min-height:46px;padding:8px 14px;font-size:14px}.captain-activity-tabs .captain-activity-tab-icon{width:28px;height:28px;padding:5px}}

/* Wraps just the player's own activities page (not the coach's captain
   dashboard, which also shares .captain-dashboard) with the rounded #ECECEC
   card from the design reference. No extra inline padding needed here —
   .captain-dashboard's own base padding (clamp 24-72px) is already more
   generous than what was added on the profile page. */
body.profile-page .captain-dashboard { background:var(--sage-100); border-radius:40px; }

/* Keep a gutter around the card at every width so the corner artwork stays visible. */
body.profile-page .captain-dashboard{width:min(1380px,calc(100% - 32px))}

/* Attendance history modal */
.captain-history-open{display:flex;width:fit-content;align-items:center;gap:8px;margin-top:14px;padding:10px 18px;border:1px solid var(--sage-325);border-radius:14px;background:var(--surface);color:var(--text-primary);font:inherit;font-weight:800;cursor:pointer}
.captain-history-open svg,.history-close{width:20px;height:20px}.captain-history-open svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.history-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));background:rgba(0,0,0,.45)}.history-modal[hidden]{display:none}
.history-dialog{position:relative;width:min(760px,100%);max-height:100%;overflow:auto;padding:28px;border-radius:24px;background:var(--surface);color:var(--text-primary)}
.history-dialog h2{margin:0;font-size:24px;font-weight:800}.history-sub{margin:6px 0 20px;color:var(--sage-625);font-size:14px}
.history-close{position:absolute;top:18px;left:18px;display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--sage-200);border-radius:50%;background:var(--surface);font-size:24px;line-height:1;cursor:pointer}
.history-filters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.history-filters label{display:grid;gap:6px;font-size:13px;font-weight:700}
.history-filters select,.history-filters input{min-width:0;height:44px;padding:0 12px;border:1px solid var(--sage-150);border-radius:14px;background:var(--surface);color:var(--text-primary);font:inherit;font-size:13px}
.history-filters input.flatpickr-input{cursor:pointer}
.history-buttons{grid-column:1/-1;display:flex;gap:10px}.history-buttons button,.history-export{height:44px;padding:0 26px;border-radius:14px;font:inherit;font-weight:800;cursor:pointer}
.history-apply{border:0;background:var(--green-825);color:var(--text-on-brand)}.history-reset,.history-export{border:1px solid var(--sage-325);background:var(--surface);color:var(--text-primary)}
.history-table-wrap{margin-top:20px;overflow-x:auto}.history-table{width:100%;border-collapse:collapse;font-size:13px}
.history-table th{padding:12px;background:var(--surface-page);font-size:12px;text-align:right}.history-table td{padding:12px;border-bottom:1px solid var(--sage-100);font-weight:700}
.history-table small{display:block;color:var(--gray-450);font-weight:400}.history-empty{text-align:center;color:var(--gray-450)}
.history-pager{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;margin:16px 0;font-size:13px;color:var(--sage-625)}
.history-pager div{display:flex;gap:6px}.history-pager button{min-width:36px;height:36px;border:1px solid var(--sage-200);border-radius:10px;background:var(--surface);cursor:pointer}
.history-pager button.is-active{background:var(--green-825);border-color:var(--green-825);color:var(--text-on-brand)}.history-pager button:disabled{opacity:.4;cursor:default}
@media(max-width:767px){
    /* A bottom sheet, the same shape as the activities filter sheet. */
    .history-modal{align-items:end;padding:0}
    .history-dialog{width:100%;max-height:90dvh;padding:20px calc(16px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));border-radius:22px 22px 0 0;background:var(--surface-page);animation:sheet-up .22s ease-out}
    .history-dialog h2{font-size:19px;line-height:34px}
    .history-sub{margin:2px 0 16px;font-size:12px}
    .history-close{top:18px;left:14px;width:34px;height:34px;border:0;background:var(--surface);font-size:25px}

    /* Filters: field and range full width, the two dates side by side. 16px text so iOS doesn't zoom. */
    .history-filters{grid-template-columns:1fr 1fr;gap:10px}
    .history-filters>label:is(:first-child,:nth-child(4)){grid-column:1/-1}
    .history-filters select,.history-filters input{height:46px;font-size:16px}
    .history-buttons button{flex:1;height:48px;padding:0}

    /* Rows as cards: date + duration, then the field, then in/out times. */
    .history-table-wrap{margin-top:18px;overflow:visible}
    .history-table thead{display:none}
    .history-table tbody{display:grid;gap:10px}
    .history-table tr{display:grid;grid-template-areas:"date dur" "field field" "times times";grid-template-columns:1fr auto;gap:6px 10px;padding:14px;border-radius:16px;background:var(--surface);box-shadow:0 4px 16px rgba(7,88,71,.08)}
    .history-table tr:has(.history-empty){display:block}
    .history-table td{padding:0;border:0}
    .history-table td:first-child{grid-area:date;color:var(--dark-text, var(--green-900));font-size:15px}
    .history-table td:first-child small{display:inline;margin-inline-start:6px;font-size:12px}
    .history-table td:nth-child(2){grid-area:field;color:var(--sage-850);font-size:13px}
    .history-duration{grid-area:dur;align-self:start;padding:3px 10px!important;border-radius:999px;background:var(--green-75);color:var(--dark-text, var(--green));font-size:12px}
    .history-table :is(.history-in,.history-out){grid-row:3;display:flex;gap:6px;color:var(--dark-text, var(--green-900));font-size:13px}
    .history-in{grid-column:1}.history-out{grid-column:2}
    .history-table :is(.history-in,.history-out)::before{color:var(--gray-400);font-weight:600;content:attr(data-label)}
    .history-out.is-missing{color:var(--red-725)}
    .history-empty{padding:28px 16px!important}

    /* Paging: prev/next only; the numbered buttons can run long. */
    .history-pager{flex-wrap:nowrap;margin:14px 0}
    .history-pager div button:not(:first-child,:last-child){display:none}
    .history-pager button{min-width:40px;height:40px}
    .history-export{width:100%;height:48px}
}
.captain-season-banner.captain-streak-banner{display:block;padding:0;border-radius:0;background:none;box-shadow:none}
.captain-streak-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;align-items:center;gap:28px;min-height:215px;padding:24px 34px;border:1px solid rgba(92,176,102,.55);border-radius:28px;background:linear-gradient(160deg,var(--text-dark) 0 55%,#265545 55.1%);color:var(--text-on-brand)}
.captain-streak-card .captain-season-icon{width:84px;height:84px;flex-basis:84px;background:none}.captain-streak-card .captain-season-icon svg{width:84px;height:84px;stroke:var(--green-250);stroke-width:1.5}
.captain-streak-card .captain-season-text h2{margin:0 0 12px;font-size:44px;line-height:1.2}.captain-streak-card .captain-season-text p{color:#cfe3d8;font-size:22px}
.captain-streak-progress{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;font-size:14px}.captain-streak-progress strong{font-size:20px}.captain-streak-progress span{font-weight:800}.captain-streak-progress small{color:#cfe3d8;font-size:12px}
.captain-streak-dots{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;direction:rtl}.captain-streak-dots i{display:grid;width:46px;height:46px;place-items:center;border-radius:50%;font-style:normal;font-size:22px;font-weight:400;color:var(--text-on-brand)}.captain-streak-dots .is-attended{background:#4fa564}.captain-streak-dots .is-missed{background:#2b3440}.captain-streak-dots .is-upcoming{background:var(--sage-150)}.captain-streak-dots svg{width:20px;height:20px;fill:none;stroke:var(--sage-575);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.captain-streak-cta{padding:14px 36px;border-color:var(--green-250);border-radius:30px;background:var(--green-250);font-size:16px}@media (hover: hover){.captain-streak-cta:hover{background:#4fa564}}
@media(max-width:1100px){.captain-streak-card{grid-template-columns:auto minmax(0,1fr) auto;gap:20px 24px}.captain-streak-progress{grid-column:1/-1;grid-row:2}.captain-streak-card .captain-season-text h2{font-size:34px}.captain-streak-card .captain-season-text p{font-size:18px}}
@media(max-width:700px){.captain-streak-card{grid-template-columns:auto minmax(0,1fr);gap:16px;min-height:0;padding:20px}.captain-streak-card .captain-season-icon,.captain-streak-card .captain-season-icon svg{width:56px;height:56px;flex-basis:56px}.captain-streak-card .captain-season-text h2{margin-bottom:6px;font-size:24px}.captain-streak-card .captain-season-text p{font-size:14px}.captain-streak-cta{grid-column:1/-1;text-align:center}.captain-streak-dots{gap:8px}.captain-streak-dots i{width:38px;height:38px}}
.streak-page>*{max-width:1100px;margin-inline:auto}
.streak-mobile-bar{display:none}
.streak-back{display:inline-block;margin-bottom:20px;color:var(--dark-text, var(--green));font-size:14px;font-weight:800;text-decoration:none}
.streak-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:28px}.streak-top .streak-back{margin:0}
.streak-length{display:flex;align-items:baseline;gap:8px;padding:12px 22px;border-radius:18px;background:var(--orange-325);color:var(--text-on-brand)}.streak-length strong{font-size:34px;line-height:1}.streak-length span{font-weight:800}
.streak-hero{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(310px,.85fr);align-items:stretch;gap:18px}
.streak-hero:not(:has(.streak-countdown)){grid-template-columns:1fr}.streak-hero:not(:has(.streak-countdown)) .streak-mine{max-width:760px}
.streak-mine,.streak-countdown{display:flex;align-items:center;gap:14px;width:100%;box-sizing:border-box;padding:18px 24px;border-radius:14px;background:var(--text-dark);color:var(--text-on-brand);box-shadow:0 10px 26px rgba(0,0,0,.2)}
.streak-mine h2,.streak-countdown h2{margin:0;font-size:28px}.streak-mine-title small{font-size:14px}
.streak-mine-title{flex:1;min-width:170px}.streak-mine>div:not(.streak-mine-title){flex:0 1 190px;min-width:150px}
.streak-mine>div:not(.streak-mine-title){display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 18px;border-radius:10px;background:rgba(255,255,255,.08)}.streak-mine>div small{color:#cfe3d8;font-size:12px}.streak-mine>div strong{color:#f5c518;font-size:18px}.streak-mine strong.is-level{color:var(--green-250)}
.streak-countdown{flex-direction:column;justify-content:center;gap:12px}.streak-countdown h2{font-size:14px;font-weight:700}.streak-countdown>div{display:flex;width:100%;justify-content:space-evenly;gap:12px}.streak-countdown span{display:flex;flex-direction:column;align-items:center;min-width:42px}.streak-countdown strong{font-size:18px}.streak-countdown small{font-size:11px;color:#cfe3d8}
.streak-monthly-title{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;width:100%}
.streak-info{position:relative;top:20px;align-self:center;display:inline-flex;align-items:center;justify-content:center;gap:9px;height:42px;box-sizing:border-box;padding:0 14px;border:1px solid color-mix(in srgb,var(--orange-325) 55%,transparent);border-radius:999px;background:color-mix(in srgb,var(--orange-325) 10%,var(--surface));color:var(--dark-text,var(--green-900));font:800 13px/1 Cairo,sans-serif;box-shadow:0 3px 10px rgba(139,83,32,.08);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background-color .18s ease,border-color .18s ease}.streak-info>span{display:grid;flex:none;width:22px;height:22px;place-items:center;border-radius:50%;background:var(--orange-325);color:#fff;font:800 13px/22px Inter,sans-serif}.streak-info:focus-visible{outline:3px solid color-mix(in srgb,var(--orange-325) 32%,transparent);outline-offset:3px}@media(hover:hover){@media (hover: hover){.streak-info:hover{border-color:var(--orange-325);background:color-mix(in srgb,var(--orange-325) 16%,var(--surface));box-shadow:0 6px 16px rgba(139,83,32,.14);transform:translateY(-1px)}}}
.streak-info-dialog{position:fixed;inset:0;margin:auto;height:fit-content;width:min(420px,calc(100% - 32px));padding:28px 24px;border:0;border-radius:24px;background:var(--surface-page);color:var(--dark-text, var(--text-dark));box-shadow:0 24px 60px rgba(0,0,0,.35)}.streak-info-dialog::backdrop{background:rgba(0,0,0,.5)}
.streak-info-dialog h2{margin:0 0 16px;font-size:20px;text-align:center}.streak-info-dialog h3{margin:14px 0 4px;color:var(--green-250);font-size:16px}.streak-info-dialog p{margin:0;font-size:14px;line-height:1.8}.streak-info-dialog form{margin-top:22px;text-align:center}
@media(max-width:700px){.streak-mine,.streak-countdown{flex:1 1 100%;flex-wrap:wrap;justify-content:center;padding:14px}.streak-mine-title{flex:1 1 100%;text-align:center}.streak-mine h2{font-size:22px}.streak-countdown>div{gap:18px}}
.streak-section{margin-top:48px}.streak-section h2{margin:0 0 18px;font-size:26px;color:var(--dark-text, var(--text-dark))}
.streak-weeks{display:flex;align-items:stretch;gap:22px;overflow-x:auto;padding:4px 2px 14px;scroll-snap-type:x proximity}
.streak-monthly-head{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:18px}.streak-monthly-head h2{margin:0}
.streak-filter{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.streak-quick-months{display:flex;gap:8px}.streak-quick-months a{display:inline-flex;align-items:center;height:40px;padding:0 18px;text-decoration:none}.streak-quick-months .is-active{border-color:var(--green-250);background:var(--green-250);color:var(--text-on-brand)}
.streak-monthly-cards{display:grid;grid-template-columns:minmax(0,2.3fr) minmax(220px,1fr);gap:18px}
.streak-chain-card,.streak-perfect-month{padding:24px;border-radius:18px;background:var(--surface);color:var(--dark-text, var(--text-dark));box-shadow:0 10px 26px rgba(0,0,0,.2)}.streak-chain-card h3,.streak-perfect-month h3{display:flex;align-items:center;gap:8px;margin:0 0 6px;font-size:20px}.streak-chain-card>p,.streak-perfect-month p{margin:0 0 20px;color:var(--sage-575);font-size:13px}
.streak-chain{--chain-gap:18px;isolation:isolate;display:flex;gap:var(--chain-gap);margin:0;padding:0;list-style:none}.streak-chain li{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:14px 8px 18px;border:1px solid #c8eccb;border-radius:8px;background:rgba(242,254,245,.72);color:#6ac267;font-size:12px;text-align:center}
.streak-range{display:block;color:var(--sage-575);font-size:12px}.streak-chain-card>.streak-range{margin:-2px 0 8px}.streak-chain .streak-range{color:inherit;font-size:inherit}
.streak-chain li+li::before{content:"";position:absolute;inset-inline-start:calc(-50% - var(--chain-gap));top:39px;width:calc(100% + var(--chain-gap));height:6px;z-index:-1;background:#b6b6b6}.streak-chain li.is-complete+li.is-complete::before{background:#6ac267}
.streak-chain strong{font-size:13px}.streak-chain-ball{--level-path-hole:#fff;position:relative;display:grid;place-items:center;width:55px;height:55px;box-sizing:border-box;margin-bottom:6px;border:2px solid #6ac267;border-radius:50%;background:#fff;color:#6ac267}.streak-chain-ball>svg{width:41px;height:41px}.streak-chain-ball i{position:absolute;bottom:-6px;inset-inline-start:50%;transform:translateX(50%);display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:#6ac267;color:#fff;font-size:11px;font-style:normal}.streak-chain-ball i:empty{display:none}.streak-chain-ball i svg{width:11px;height:11px;fill:none;stroke:var(--text-on-brand);stroke-width:2.5}.streak-chain .is-current .streak-chain-ball{--level-path-hole:#6ac267;border:0;background:#6ac267;color:#fff}.streak-chain .is-upcoming .streak-chain-ball{--level-path-hole:#b6b6b6;border-color:#575757;background:#b6b6b6;color:#575757}.streak-chain .is-missed .streak-chain-ball{border-color:var(--red-625);color:var(--red-625)}
.streak-chain .is-current{background:#cfedd0;border-color:#ade0b0}.streak-chain .is-upcoming{background:#b6b6b6;border-color:#575757;color:#575757}.streak-chain .is-upcoming i{background:#575757}.streak-chain .is-missed{background:var(--red-100);border-color:#f3c2c2;color:var(--red-625)}.streak-chain .is-missed i{background:var(--red-625)}
.streak-chain em{position:absolute;bottom:-11px;padding:2px 8px;border-radius:4px;background:#6ac267;color:#fff;font-style:normal;font-size:10px;white-space:nowrap}
.streak-perfect-month{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.streak-perfect-month h3{gap:10px;margin-bottom:10px;font-size:24px;font-weight:800;color:var(--dark-text, var(--text-dark))}.streak-perfect-month h3 img{width:56px;height:56px}.streak-perfect-month p{max-width:190px;margin:0 0 18px;color:#bdbdbd;font-size:14px;line-height:1.9}.streak-perfect-xp{display:inline-flex;align-items:center;justify-content:center;gap:14px;width:186px;height:58px;box-sizing:border-box;border:1.5px solid #555;border-radius:999px;background:#b5b5b5;color:#555;font-size:19px;font-weight:800}.streak-perfect-xp svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}.streak-perfect-month.is-done .streak-perfect-xp{border-color:var(--green-250);background:var(--green-250);color:var(--text-on-brand)}
.streak-week-card{flex:0 0 400px;scroll-snap-align:start;display:flex;flex-direction:column;padding:26px;border-radius:18px;background:var(--surface);color:var(--dark-text, var(--text-dark));box-shadow:0 10px 26px rgba(0,0,0,.2)}
.streak-week-card>header{display:grid;grid-template-columns:1fr auto;gap:4px 12px;margin-bottom:20px}.streak-week-card h3{margin:0;font-size:16px}.streak-week-summary{grid-column:1/-1;margin:10px 0 0;color:var(--sage-750);font-size:13px;font-weight:700}.streak-week-card>header small{grid-column:1;font-size:14px;font-weight:700}.streak-perfect-badge{grid-row:1/3;grid-column:2;align-self:start;display:inline-flex;align-items:center;gap:5px;padding:7px 12px;border-radius:16px;background:var(--gray-225);color:var(--text);font-size:12px;font-weight:800}.streak-perfect-badge.is-done{background:var(--green-250);color:var(--text-on-brand)}.streak-perfect-badge img{width:16px;height:16px;object-fit:contain}.streak-perfect-badge svg,.streak-xp-chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2}
.streak-sessions{flex:1;margin:0 0 16px;padding:0;list-style:none}.streak-sessions li{position:relative;display:flex;align-items:center;gap:12px;padding:9px 0}.streak-sessions li+li::before{content:"";position:absolute;inset-inline-start:13px;bottom:calc(50% + 14px);height:calc(100% - 28px);border-inline-start:1px solid var(--sage-375)}
.streak-sessions b{flex:0 0 28px;display:grid;place-items:center;height:28px;border:1px solid var(--green-250);border-radius:50%;color:var(--dark-text, var(--green-250));font-size:13px}.streak-sessions div{flex:1;min-width:0}.streak-sessions strong{display:flex;align-items:center;gap:6px;font-size:15px}.streak-sessions strong svg{--level-path-hole:#fff;flex:none;width:19px;height:19px;color:var(--dark-text, var(--green-275))}.streak-sessions .is-upcoming strong svg{color:var(--sage-475)}.streak-sessions .is-missed strong svg{color:var(--red-325)}.streak-sessions small{display:block;color:var(--sage-575);font-size:10px}
.streak-xp{flex:none;padding:3px 8px;border:1px solid var(--green-250);border-radius:12px;color:var(--dark-text, var(--green-250));font-size:12px;font-weight:800}.streak-sessions .is-missed .streak-xp{border-color:var(--red-325);color:var(--red-325)}.streak-sessions .is-upcoming .streak-xp{border-color:var(--gray-50);color:var(--sage-525)}
.streak-sessions .is-upcoming strong,.streak-sessions .is-upcoming b{color:var(--sage-525);border-color:var(--sage-525)}.streak-sessions .is-missed b{border-color:var(--red-325);color:var(--red-325)}.streak-sessions .is-next b{flex-basis:36px;height:36px;background:var(--green-250);color:var(--text-on-brand);border-color:var(--green-250);font-size:14px}.streak-sessions .is-next strong{color:var(--dark-text, var(--text-dark))}.streak-sessions .is-none{color:var(--sage-525);font-size:14px}.streak-sessions small{font-size:12px;line-height:1.5}
.streak-week-foot{display:flex;flex-direction:column;gap:10px}.streak-week-foot div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.streak-xp-chip{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:0;padding:8px 6px;border:1px solid #b9e0bd;border-radius:999px;background:var(--surface-page);color:var(--dark-text, var(--green-250));font-size:10px;font-weight:700;white-space:nowrap}.streak-xp-chip svg{flex:none;width:12px;height:12px}.streak-xp-chip.is-locked{border-color:var(--sage-275);background:var(--surface-page);color:var(--dark-text, #4a5a52)}
/* Cards show 4 sessions (⋮ marks the rest) so they line up; "view all" opens the full card in a dialog. */
.streak-weeks .streak-sessions li:nth-child(n+5):not(.streak-more){display:none}
.streak-sessions .streak-more{padding:0}.streak-sessions .streak-more b{border:0;color:var(--sage-525);font-size:20px;line-height:1}.streak-week-dialog .streak-more{display:none}
.streak-view-all{align-self:center;margin-top:12px;padding:0;border:0;background:none;color:var(--green-250);font:inherit;font-size:13px;font-weight:800;cursor:pointer}.streak-week-dialog .streak-view-all{display:none}
.streak-week-dialog{width:min(460px,calc(100% - 32px));max-height:calc(100% - 32px);padding:0;overflow-y:auto;background:var(--surface)}.streak-week-dialog .streak-week-card{box-shadow:none}.streak-week-dialog form{margin:0 0 22px}
.streak-week-foot strong{padding:12px;border:1px solid #b9e0bd;border-radius:999px;background:var(--surface-page);color:var(--dark-text, var(--green-250));text-align:center;font-size:17px}
/* Dark: the chain/perfect-month/chips above use hardcoded light tints; map them onto dark tokens. */
:root[data-theme="dark"] .streak-chain li{border-color:var(--border);background:var(--surface-raised)}:root[data-theme="dark"] .streak-chain li+li::before{background:var(--sage-425)}:root[data-theme="dark"] .streak-chain .is-current{border-color:var(--green-125);background:var(--green-75)}:root[data-theme="dark"] .streak-chain .is-upcoming{border-color:var(--sage-425);background:var(--sage-200);color:var(--sage-575)}:root[data-theme="dark"] .streak-chain .is-upcoming i{background:var(--sage-425)}:root[data-theme="dark"] .streak-chain .is-missed{border-color:#6b2c28}
:root[data-theme="dark"] .streak-chain li:not(.is-current) .streak-chain-ball{--level-path-hole:var(--surface);background:var(--surface)}:root[data-theme="dark"] .streak-sessions strong svg{--level-path-hole:var(--surface)}:root[data-theme="dark"] .streak-chain li.is-upcoming .streak-chain-ball{--level-path-hole:var(--sage-275);border-color:var(--sage-575);background:var(--sage-275);color:var(--sage-575)}
:root[data-theme="dark"] .streak-perfect-month p{color:var(--sage-575)}:root[data-theme="dark"] .streak-perfect-month:not(.is-done) .streak-perfect-xp{border-color:var(--sage-575);background:var(--surface-raised);color:var(--sage-575)}:root[data-theme="dark"] .streak-perfect-badge:not(.is-done){background:var(--surface-raised)}:root[data-theme="dark"] :is(.streak-xp-chip,.streak-week-foot strong){border-color:var(--green-125)}
@media(max-width:860px){.streak-monthly-cards{grid-template-columns:1fr}.streak-chain{--chain-gap:10px;overflow-x:auto;padding-bottom:14px}.streak-chain li{min-width:110px}}
@media(min-width:768px) and (max-width:980px){.streak-hero{grid-template-columns:1fr}.streak-hero:not(:has(.streak-countdown)) .streak-mine{max-width:none}}
@media(max-width:700px){.streak-page{padding-inline:14px}.streak-section h2{font-size:21px}}
/* =========================================================
   PLAYER STREAK (phones, profile/player-streak)
   App-style: full-bleed page, compact header row with the month picker, a 4-up chain that
   never overflows, a slim Perfect Month row, and swipeable week cards that peek the next one.
========================================================= */
@media(max-width:767px){
    body.profile-page .streak-page{width:100%;margin:0;padding:8px 16px calc(110px + env(safe-area-inset-bottom));border-radius:0;background:var(--surface-page);overflow-x:hidden}
    .streak-mobile-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
    .streak-mobile-bar small{display:block;margin-bottom:2px;color:var(--sage-575);font-size:11px;font-weight:700}
    .streak-mobile-bar h1{margin:0;color:var(--dark-text,var(--green-900));font-size:24px;font-weight:900;line-height:1.2}
    .streak-mobile-info{display:grid;width:38px;height:38px;padding:0;place-items:center;border:1px solid var(--border);border-radius:50%;background:var(--surface);color:var(--dark-text,var(--green-900));font:800 17px/1 Inter,sans-serif;box-shadow:0 3px 12px rgba(7,88,71,.08);-webkit-tap-highlight-color:transparent}
    .streak-mobile-info:active{transform:scale(.94)}
    .streak-top{display:none}
    .streak-hero{display:block}
    .streak-mine{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%;padding:18px;border-radius:24px;background:linear-gradient(145deg,#073f35 0%,#09614f 58%,#137b61 100%);box-shadow:0 14px 34px rgba(7,88,71,.2);overflow:hidden}
    .streak-mine::after{content:"";position:absolute;inset:auto -45px -70px auto;width:180px;height:180px;border:34px solid rgba(255,255,255,.045);border-radius:50%;pointer-events:none}
    .streak-mine-title{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;text-align:start}
    .streak-mine-title h2{font-size:18px}.streak-mine-title small{font-size:11px;color:#cfe3d8}
    .streak-mine>div:not(.streak-mine-title){position:relative;z-index:1;align-items:flex-start;gap:3px;padding:11px 12px;border:1px solid rgba(255,255,255,.1);border-radius:14px;background:rgba(255,255,255,.08)}
    .streak-mine>div small{font-size:10px}.streak-mine>div strong{font-size:15px}
    .streak-countdown{width:100%;margin-top:10px;padding:12px 16px;border-radius:18px;background:var(--surface);color:var(--dark-text,var(--green-900));box-shadow:0 4px 16px rgba(7,88,71,.08)}
    .streak-countdown h2{width:100%;color:var(--sage-625);text-align:center;font-size:11px}
    .streak-countdown>div{width:100%;justify-content:space-around;gap:6px}.streak-countdown strong{font:800 18px/1 Inter,Cairo,sans-serif}.streak-countdown small{margin-top:3px;color:var(--sage-575);font-size:9px}
    .streak-back{margin-bottom:10px;font-size:13px}
    .streak-section{margin-top:22px}.streak-section h2,.streak-monthly-head h2{font-size:18px}.streak-section h2{margin-bottom:12px}
    .streak-monthly{margin-top:24px}
    .streak-monthly-head{gap:10px;margin-bottom:12px}
    .streak-monthly-title{flex-wrap:nowrap}.streak-info{display:none}
    .streak-filter{width:100%;flex-wrap:nowrap;overflow-x:auto;margin-inline:-16px;padding:2px 16px 6px;scrollbar-width:none}.streak-filter::-webkit-scrollbar{display:none}
    .streak-filter .captain-filter-date{flex:none;min-width:126px;height:40px;padding:0 10px;gap:6px;border-radius:13px}
    .streak-quick-months{flex:none;gap:7px}.streak-quick-months a{height:40px;padding:0 14px;border-radius:13px;font-size:12px;white-space:nowrap}
    .streak-filter .captain-filter-date input,.streak-filter .captain-filter-date-placeholder{padding:0 30px 0 10px;font-size:12px}

    .streak-monthly-cards{grid-template-columns:minmax(0,1fr);gap:12px}
    .streak-chain-card,.streak-perfect-month{padding:16px;border:1px solid var(--border);border-radius:20px;box-shadow:0 5px 18px rgba(7,88,71,.07)}
    .streak-chain-card h3,.streak-perfect-month h3{font-size:16px}.streak-chain-card>p{margin-bottom:14px;font-size:12px}
    .streak-chain{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));--chain-gap:6px;gap:var(--chain-gap);overflow:visible;padding-bottom:12px}
    .streak-chain li{min-width:0;padding:10px 2px 14px;font-size:10px;line-height:1.35}
    .streak-chain li+li::before{height:4px;top:28px}
    .streak-chain strong{font-size:11px}
    .streak-chain-ball{width:40px;height:40px;margin-bottom:4px}.streak-chain-ball>svg{width:30px;height:30px}
    .streak-chain-ball i{width:15px;height:15px;font-size:9px}
    .streak-chain em{bottom:-9px;padding:1px 6px;font-size:9px}

    .streak-perfect-month{display:grid;grid-template-columns:1fr auto;align-items:center;gap:2px 12px;text-align:start}
    .streak-perfect-month h3{margin:0}.streak-perfect-month h3 img{width:26px;height:26px}
    .streak-perfect-month p{grid-column:1;max-width:none;margin:0;font-size:12px}
    .streak-perfect-xp{grid-row:1/3;grid-column:2;width:auto;height:auto;margin:0;padding:8px 16px;font-size:15px}

    .streak-weeks{align-items:stretch;gap:12px;margin-inline:-16px;padding:2px 16px 12px;scroll-padding-inline:16px;scroll-snap-type:x mandatory;scrollbar-width:none}
    .streak-weeks::-webkit-scrollbar{display:none}
    .streak-week-card{flex:0 0 calc(100% - 28px);padding:18px;border:1px solid var(--border);border-radius:22px;box-shadow:0 5px 18px rgba(7,88,71,.07)}
    .streak-week-card>header{margin-bottom:14px}.streak-week-card h3{font-size:15px}.streak-week-card>header small{font-size:13px}.streak-week-summary{font-size:12px}
    .streak-sessions{margin-bottom:14px}.streak-sessions li{padding:8px 0}
    .streak-sessions strong{font-size:14px}.streak-sessions small{font-size:12px;line-height:1.5}.streak-xp{font-size:11px}
    .streak-week-foot strong{font-size:15px}.streak-week-foot div{gap:6px}.streak-xp-chip{gap:3px;padding:8px 4px;font-size:8.5px}.streak-xp-chip svg{width:10px;height:10px}

    .streak-top{margin-bottom:14px}
    .streak-length{padding:10px 18px;border-radius:14px}.streak-length strong{font-size:26px}
    .streak-empty{padding:18px;border-radius:16px;font-size:14px}
}
.flatpickr-calendar{font-family:Cairo,sans-serif;direction:rtl}.flatpickr-current-month{display:flex;align-items:center;justify-content:center}
.flatpickr-calendar:not(.noCalendar) .flatpickr-prev-month{left:auto!important;right:0!important}
.flatpickr-calendar:not(.noCalendar) .flatpickr-next-month{right:auto!important;left:0!important}
.flatpickr-calendar:not(.noCalendar) .flatpickr-prev-month svg,.flatpickr-calendar:not(.noCalendar) .flatpickr-next-month svg{transform:scaleX(-1)}
.flatpickr-calendar:not(.noCalendar) .flatpickr-prev-month,.flatpickr-calendar:not(.noCalendar) .flatpickr-next-month{display:grid;place-items:center;color:var(--gray-500);font-size:25px;line-height:1}

/* =========================================================
   PLAYER ACTIVITIES (phones, profile/player-activities)
   Styling only: every data-* hook, form and button stays as it is for profile.js.
   The app header already greets the player, so the identity block goes; the tabs
   become a segmented control, the filters a compact grid, and the cards tighten up.
========================================================= */
@media(max-width:767px){
    .activities-page{padding:12px 16px calc(110px + env(safe-area-inset-bottom))}
    .activities-page .captain-hero{display:block}
    .activities-page .captain-hero-art,.player-activities .captain-identity{display:none}
    /* Coach/volunteer: only the daily shift card and attendance history stay; name, avatar and badge go. */
    .coach-activities .captain-identity{min-height:0;margin-bottom:12px;padding:0}
    .coach-activities .captain-identity-info{display:block;margin:0}
    .coach-activities :is(.captain-avatar,.captain-identity-text>h1,.captain-identity-role,.captain-identity-badge){display:none}
    .coach-activities .captain-shift-card{max-width:none;margin-top:0;padding:14px;border-radius:16px}
    .coach-activities .captain-history-open{width:100%;justify-content:center;min-height:44px;margin-top:10px;padding:8px 14px;border-radius:14px;font-size:14px}

    /* Streak / discover banner */
    .activities-page .captain-season-banner{margin-top:0;padding:14px;border-radius:18px;box-shadow:0 6px 18px rgba(0,84,71,.18)}
    .activities-page .captain-season-banner:not(.captain-streak-banner){flex-wrap:nowrap;gap:12px}
    .activities-page .captain-streak-banner{display:block;padding:0;box-shadow:none}
    .activities-page .captain-season-icon{width:42px;height:42px;flex-basis:42px}
    .activities-page .captain-season-icon svg{width:22px;height:22px}
    .activities-page .captain-season-text h2,.activities-page .captain-streak-card .captain-season-text h2{margin-bottom:2px;font-size:16px}
    .activities-page .captain-season-text p,.activities-page .captain-streak-card .captain-season-text p{font-size:12px}
    .activities-page .captain-season-cta{padding:8px 16px;border-radius:999px;font-size:12px}
    .activities-page .captain-streak-card{flex-wrap:wrap;justify-content:flex-start;gap:12px;min-height:0;padding:14px;border-radius:18px;text-align:right}
    .activities-page .captain-streak-card .captain-season-text{flex:1;flex-basis:auto;text-align:right}
    .activities-page .captain-streak-progress{position:static;order:3;width:100%;transform:none}
    .activities-page .captain-streak-dots i{width:32px;height:32px}
    .activities-page .captain-streak-cta{order:4;width:100%;text-align:center}

    /* Tabs: a segmented control */
    .activities-page .captain-activity-tabs .admin-tabs-nav{display:grid;grid-template-columns:1fr 1fr;gap:0;margin:16px 0 12px;padding:3px;border-radius:12px;background:var(--sage-150)}
    .activities-page .captain-activity-tabs .admin-tabs-btn{min-width:0;min-height:38px;padding:6px 10px;border-radius:10px;background:transparent;color:var(--sage-850);font-size:13px;font-weight:700;box-shadow:none;overflow:hidden;text-overflow:ellipsis}
    .activities-page .captain-activity-tabs .admin-tabs-btn.is-active{background:var(--surface);color:var(--dark-text, var(--green-dark));box-shadow:0 1px 4px rgba(0,0,0,.12)}
    .activities-page .captain-activity-tabs .captain-activity-tab-icon{width:18px;height:18px;padding:0;border:0}

    /* Filters: search + filter button, a status chip row that applies on tap, and a bottom
       sheet for type and date (js/filter-sheet.js builds the pills; profile.js / captain-profile.js apply them). */
    .activities-page .captain-sessions{margin-top:0}
    .coach-activities .captain-sessions{margin-top:16px}/* no tabs row above to space it from the banner */
    .activities-page .captain-sessions-heading{display:none}
    .activities-page .captain-filters{display:flex;flex-wrap:wrap;gap:10px;overflow:visible;padding:0}
    .activities-page .captain-filter-search{flex:1;min-width:0;height:46px}
    .activities-page .activities-filter-trigger{position:relative;display:grid;width:46px;height:46px;flex:none;place-items:center;border:0;border-radius:14px;background:var(--green-dark);color:var(--text-on-brand)}
    .activities-page .activities-filter-trigger svg{width:22px;height:22px;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
    .activities-page .activities-filter-trigger.has-filters::after{position:absolute;top:8px;left:8px;width:9px;height:9px;border:2px solid var(--green-dark);border-radius:50%;background:var(--yellow);content:""}
    .activities-page :is(.captain-filter-submit,.captain-filter-clear){display:none}

    .activities-page .activities-status-chips{display:block;flex-basis:100%;margin:0 -16px;padding:0 16px;overflow-x:auto;scrollbar-width:none}
    .activities-page .activities-status-chips::-webkit-scrollbar{display:none}
    .activities-page .activities-status-chips .filter-options{display:block}
    .activities-page .activities-status-chips .filter-options-title{display:none}
    .activities-page .activities-status-chips .filter-options-pills{flex-wrap:nowrap}
    .activities-page .activities-status-chips button{flex:none;min-height:34px;font-size:13px}

    .activities-page .activities-filter-backdrop:not([hidden]){position:fixed;inset:0;z-index:2490;display:block;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}
    .activities-page .activities-filter-sheet{position:fixed;right:0;bottom:0;left:0;z-index:2500;display:none;max-height:85dvh;padding:12px calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));overflow-y:auto;border-radius:22px 22px 0 0;background:var(--surface-page);box-shadow:0 20px 50px rgba(0,0,0,.3)}
    .activities-page .activities-filter-sheet.is-open{display:block;animation:sheet-up .22s ease-out}
    .activities-page .activities-filter-sheet::before{position:absolute;top:6px;left:50%;width:36px;height:5px;border-radius:3px;background:var(--sage-275);content:"";transform:translateX(-50%)}
    .activities-page .activities-filter-close{position:absolute;top:16px;left:12px;display:grid;width:34px;height:34px;place-items:center;border:0;border-radius:50%;background:var(--surface);color:var(--text-primary);font-size:25px;line-height:1}
    .activities-page .activities-filter-title{display:block;margin:4px 44px 14px;color:var(--dark-text, var(--green-900));font-size:17px;line-height:34px;text-align:center}
    .activities-page .activities-filter-sheet select{display:none}
    .activities-page .activities-filter-sheet .filter-options{display:block;margin-bottom:18px}
    .activities-page .activities-filter-date-title{display:block}
    .activities-page .activities-filter-sheet .captain-filter-date{display:flex;width:100%;max-width:none;height:48px;border-radius:14px}
    .activities-page .activities-filter-sheet .captain-filter-date input,.activities-page .activities-filter-sheet .captain-filter-date-placeholder{padding:0 38px 0 12px;font-size:16px}
    .activities-page .activities-filter-reset{display:block;width:100%;height:48px;margin-top:18px;border:0;border-radius:14px;background:var(--surface);color:var(--dark-text, var(--green-dark));font:inherit;font-size:15px;font-weight:800}

    /* Groups and cards */
    .activities-page .captain-session-group{margin-top:22px}
    .activities-page .captain-session-group-head{margin-bottom:10px}
    .activities-page .captain-session-group-head h3{font-size:16px;font-weight:800}
    .activities-page .captain-session-group-pill{padding:5px 12px;border-radius:999px;font-size:11px}
    .activities-page .captain-session-list{grid-template-columns:1fr;gap:10px}
    .activities-page .captain-session-list article{padding:14px;border-radius:16px;box-shadow:0 4px 16px rgba(7,88,71,.08)}
    /* Players: the whole card opens its details (profile.js), so its own details button goes.
       Coaches act from the card's own buttons, so their cards stay untappable. */
    .player-activities .captain-session-list article{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s ease}
    .player-activities .captain-session-list article:active{transform:scale(.98)}
    .player-activities .captain-session-list [data-open-task-details]{display:none}
    .activities-page .captain-session-list h3{min-height:0;margin:0 0 8px;padding-inline-end:18px;color:var(--dark-text, var(--green-900));font-size:15px}
    .activities-page .captain-session-list p{margin:4px 0;padding:0;background:none;color:var(--sage-850);font-size:12px}
    .activities-page .captain-session-list p svg{width:15px;height:15px;flex-basis:15px;color:var(--dark-text, var(--green))}
    .activities-page .captain-session-list .captain-session-date-row{justify-content:space-between}
    .activities-page .captain-session-list .captain-session-reference{padding:2px 8px;border-radius:999px;background:var(--surface-page);color:var(--sage-700);font-size:11px}
    .activities-page .captain-session-time-range{display:flex;gap:14px}
    .activities-page .captain-session-list article>div{margin-top:12px;gap:8px}
    .activities-page .captain-session-list article>div button{min-height:40px;border-radius:12px;font-size:13px;font-weight:700}
    .activities-page .captain-empty{padding:28px 16px;border-radius:16px}

    /* Popups. Styling only: every data-* hook profile.js fills stays where it is. */
    .player-activities :is([data-task-details-modal],[data-task-qr-modal]) .field-modal-dialog{padding-bottom:calc(24px + env(safe-area-inset-bottom))}
    .player-activities :is([data-task-details-modal],[data-task-qr-modal]) .task-qr-panels{display:flex;flex-direction:column;gap:0;margin-top:0}
    .player-activities :is([data-task-details-modal],[data-task-qr-modal]) .task-qr-info{padding:0;border:0;border-radius:0;background:none;box-shadow:none}
    .player-activities :is([data-task-details-modal],[data-task-qr-modal]) .task-qr-info h2{justify-content:flex-start;margin:0 0 6px;color:var(--dark-text, var(--green-900));font-size:20px;line-height:1.4}

    /* Details: shorter photo, a title header, then an iOS grouped list of rows. */
    .player-activities [data-task-details-modal] :is(.field-modal-image,.field-modal-video){height:min(200px,30dvh)}
    .player-activities [data-task-details-modal] .task-qr-info{order:1;padding:16px 16px 0}
    .player-activities [data-task-details-modal] .field-modal-reference{margin:0 0 14px;padding:0;border:0;background:none;color:var(--sage-625);font-size:13px}
    .player-activities [data-task-details-modal] .field-modal-reference b{color:var(--dark-text, var(--green-900))}
    .player-activities [data-task-details-modal] .task-qr-info p{gap:12px;margin:0;padding:11px 14px;border-top:1px solid var(--sage-150);background:var(--surface-page)}
    .player-activities [data-task-details-modal] .task-qr-info p:first-of-type{border-top:0;border-radius:14px 14px 0 0}
    .player-activities [data-task-details-modal] .task-qr-info p:last-of-type{border-radius:0 0 14px 14px}
    .player-activities [data-task-details-modal] .task-qr-info .field-info-icon{width:30px;height:30px;margin:0;border-radius:8px;background:var(--green-75);color:var(--dark-text, var(--green))}
    .player-activities [data-task-details-modal] .task-qr-info strong{flex:1 1 auto;padding:0;background:none;color:var(--dark-text, var(--green-900));font-size:14px;font-weight:700;text-align:right}
    .player-activities [data-task-details-modal] .task-qr-time-row{flex-wrap:wrap}
    .player-activities [data-task-details-modal] .task-qr-time-row strong{flex:0 1 auto}
    /* LTR so the range reads "9:00 AM - 11:00 AM", not reversed by the RTL row. */
    .player-activities [data-task-details-modal] .task-qr-time-row strong+strong{color:var(--sage-625);font-weight:600;direction:ltr;unicode-bidi:isolate}
    /* Attendance code as a compact row: small QR beside its status. */
    /* Rows 1 and 4 soak up the spare height so the status + text sit centred beside the code. */
    .player-activities [data-task-details-modal] .task-details-qr{order:2;display:grid;grid-template-columns:84px 1fr;grid-template-rows:1fr auto auto 1fr;justify-items:start;gap:0 14px;margin:12px 16px 0;padding:12px;border:0;border-radius:14px;background:var(--surface-page);box-shadow:none;text-align:right}
    .player-activities [data-task-details-modal] .task-details-qr img{grid-row:1/5;grid-column:1;width:84px;height:84px;border-radius:8px;background:var(--surface)}
    .player-activities [data-task-details-modal] .task-details-qr .task-qr-status{grid-row:2;grid-column:2;margin-bottom:6px}
    .player-activities [data-task-details-modal] .task-details-qr :is(small,.task-qr-attended-pill){grid-row:3;grid-column:2}
    .player-activities [data-task-details-modal] .task-details-qr small{color:var(--sage-625);font-size:12px;line-height:1.6}

    /* Summary: the player's own row as a card (attendance + stars), not a sideways table. */
    .player-activities [data-task-details-modal] .task-details-player-summary{margin:12px 16px 0;padding:0;border-radius:14px;background:var(--surface-page);overflow:visible}
    .player-activities [data-task-details-modal] .task-details-player-summary .captain-table-head{display:none}
    .player-activities [data-task-details-modal] .task-details-player-summary .captain-player-list{overflow:visible}
    .player-activities [data-task-details-modal] .task-details-player-summary .captain-player-list article{display:flex;min-width:0;min-height:0;align-items:center;gap:10px;padding:14px;border:0;background:none}
    .player-activities [data-task-details-modal] .task-details-player-summary article::before{flex:1;color:var(--dark-text, var(--green-900));content:"تقييم الجلسة";font-size:14px;font-weight:700}
    /* Name, age and booking number are already above; attendance is on the QR row. */
    .player-activities [data-task-details-modal] .task-details-player-summary article>:is(strong,b,span:not(.captain-stars)){display:none}
    .player-activities [data-task-details-modal] .task-details-player-summary .captain-stars{line-height:1}
    .player-activities [data-task-details-modal] .task-details-player-summary .captain-stars{font-size:18px}
    .player-activities [data-task-details-modal] .task-details-rating-categories{margin:12px 16px 0;border-radius:14px;background:var(--surface-page)}
    .player-activities [data-task-details-modal] .task-details-rating-categories h4{text-align:right}

    /* QR: a ticket. No cover photo; a big scannable code first, then a compact stub. */
    .player-activities [data-task-qr-modal] .field-modal-media{display:none}
    .player-activities [data-task-qr-modal] .field-modal-dialog::before{background:var(--sage-275);box-shadow:none}
    .player-activities [data-task-qr-modal] .task-qr-panels{padding:8px 20px 0}
    .player-activities [data-task-qr-modal] .task-qr-card{gap:10px;padding:0;border:0;background:none;box-shadow:none}
    .player-activities [data-task-qr-modal] .task-qr-card img{width:min(240px,62vw);height:min(240px,62vw);padding:10px;border:1px solid var(--sage-150);border-radius:18px;background:var(--surface)}
    .player-activities [data-task-qr-modal] .task-qr-card small{color:var(--sage-625);font-size:13px}
    .player-activities [data-task-qr-modal] .task-qr-info{margin-top:18px;padding-top:16px;border-top:2px dashed var(--sage-200);text-align:center}
    .player-activities [data-task-qr-modal] .task-qr-info h2{justify-content:center;font-size:18px}
    .player-activities [data-task-qr-modal] .task-qr-info p{justify-content:center;gap:6px;margin:6px 0}
    .player-activities [data-task-qr-modal] .task-qr-info p:nth-of-type(n+3){display:none}
    .player-activities [data-task-qr-modal] .task-qr-info .field-info-icon{display:none}
    .player-activities [data-task-qr-modal] .task-qr-info strong{flex:0 1 auto;padding:0;background:none;color:var(--sage-850);font-size:14px;font-weight:700}
}
.streak-empty{margin:0;padding:24px;border-radius:18px;background:var(--surface);color:var(--dark-text, #4a5a52);font-size:15px;font-weight:700;text-align:center;box-shadow:0 10px 26px rgba(0,0,0,.2)}

/* Source: coach-account.css */
@media(min-width:768px){
    .coach-account-page .nav-menu>a,.coach-account-page .nav-dropdown-toggle{color:var(--text-primary)}
    @media (hover: hover){
    .coach-account-page .nav-menu>a:hover{color:var(--dark-text, var(--green))}
    }
}

.coach-account{width:min(1100px,calc(100% - 32px));margin:0 auto 90px}

.coach-account-hero{position:relative;overflow:hidden;padding:28px 8px 70px}
.coach-account-hero-art{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;opacity:.35;pointer-events:none}
.coach-account-hero-art img{max-width:min(320px,55%);max-height:100%;width:auto;height:auto;object-fit:contain;margin-inline-end:clamp(10px,3vw,40px)}
.coach-account-dashboard-link{position:relative;z-index:1;display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;padding:9px 18px;border:1px solid rgba(23,79,67,.3);border-radius:20px;color:var(--text-primary);font-size:13px;font-weight:800;text-decoration:none}
@media (hover: hover){
.coach-account-dashboard-link:hover{background:rgba(23,79,67,.08)}
}
.coach-account-hero-info{position:relative;z-index:1;display:flex;flex-direction:row-reverse;align-items:center;justify-content:flex-end;gap:22px;text-align:right}
.coach-account-hero-info h1{margin:0 0 8px;color:var(--text-primary);font-size:26px;font-weight:800}
.coach-account-hero-info p{margin:0 0 12px;color:var(--sage-850);font-size:14px}
.coach-account-badge{display:inline-flex;padding:6px 16px;border-radius:20px;background:var(--green-900);color:var(--text-on-brand);font-size:12px;font-weight:800}
.coach-account-avatar{position:relative;display:grid;flex-shrink:0;width:110px;height:110px;place-items:center;overflow:hidden;border:4px solid var(--surface);border-radius:50%;background:var(--sage-150);color:var(--text-primary);font-size:36px;font-weight:800}
.coach-account-avatar img{width:100%;height:100%;object-fit:cover}
.profile-page .coach-account-avatar>span{line-height:1;transform:translateY(-.1em)}
.coach-account-avatar-edit{position:absolute;right:50%;bottom:0;display:grid;width:100%;height:34px;place-items:center;padding:0;border:0;background:rgba(7,88,71,.88);color:var(--text-on-brand);cursor:pointer;transform:translateX(50%);transition:background .18s ease}.coach-account-avatar-edit:focus-visible{background:var(--orange)}@media (hover: hover){.coach-account-avatar-edit:hover{background:var(--orange)}
}.coach-account-avatar-edit svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.coach-account-hero-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:28px}
.coach-account-hero-row .coach-account-hero-info{min-width:0;flex:1 1 auto}
.coach-account-hero-stats{flex:1 1 480px;min-width:0;direction:rtl}
.coach-account-hero-stats .profile-stats{width:100%;margin:0;direction:rtl}
.coach-account-hero-stats :is(.points-card,.level-card,.progress-card,.rating-card):not(:hover){background:var(--surface)}
.coach-account-hero-stats :is(.points-card,.level-card,.progress-card,.rating-card){border:1px solid var(--green-200)}
.coach-account-hero-row--top{align-items:flex-start}
/* Player profile hero: the name is the only heavy text; card titles share the progress card's title style. */
.player-account .coach-account-badge{font-weight:700}
.player-account .coach-account-hero-stats *{font-weight:700}
.player-account .coach-account-hero-stats :is(.badges-card h2,.level-card small,.progress-card h3,.rating-card small){color:var(--text-primary);font-size:18px}
.player-account .coach-account-hero-stats .badges-card img{margin-bottom:12px}.player-account .coach-account-hero-stats .badges-card-pill{position:static;display:flex;align-items:center;justify-content:center;width:100%;gap:8px;padding:11px 16px;border:0;background:var(--yellow);color:var(--green-800);font-family:inherit;font-size:14px;cursor:pointer}@media (hover: hover){.player-account .coach-account-hero-stats .badges-card-pill:hover{background:#ffc700}
}.player-account .coach-account-hero-stats .badges-card{cursor:default}.player-account .coach-account-hero-stats .badges-card-pill span{font-size:17px;line-height:1}
/* Badges button pinned to the bottom of its card. */
.player-account .coach-account-hero-stats .badges-card{display:flex;flex-direction:column;gap:6px}.player-account .coach-account-hero-stats .badges-card-pill{margin-top:auto}
@media (hover: hover){
.player-account .coach-account-hero-stats .progress-card:hover{background:var(--surface)}
}
@media (hover: hover){
.player-account .coach-account-hero-stats :is(.points-card,.level-card):hover{background:var(--green-50)}
}
.coach-account-hero-stats .points-stack{grid-template-rows:1fr auto}.coach-account-hero-stats .rating-card{min-height:0;gap:0;padding:6px 36px;line-height:1.3}.coach-account-hero-stats .rating-card-arrow{top:50%;transform:translateY(-50%)}

.coach-account-card{position:relative;margin-top:28px;padding:30px clamp(20px,4vw,38px);border-radius:22px;background:var(--surface-raised);box-shadow:0 18px 40px rgba(0,0,0,.14)}
.profile-page .coach-account-card{box-shadow:0 4px 14px rgba(0,0,0,.06)}
.coach-account-info{margin-top:-46px}
.coach-account-incomplete-notice{margin-bottom:22px;padding:14px 18px;border:1px solid #f3dc7a;border-radius:14px;background:var(--yellow-175)}
.coach-account-incomplete-notice h3{margin:0 0 4px;color:var(--text-primary);font-size:18px;font-weight:800}
.coach-account-incomplete-notice p{margin:0;color:var(--sage-750);font-size:14px}
.coach-account-card h2{margin:0 0 22px;color:var(--text-primary);font-size:19px}
.coach-account-section-heading{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:22px}.coach-account-section-heading h2{margin:0}
.coach-account-card-actions{display:flex;justify-content:flex-end;gap:12px;margin-bottom:8px}.coach-account-section-heading .coach-account-btn,.coach-account-card-actions .coach-account-btn{flex:none;justify-content:center;width:165px;min-height:34px;padding:7px 14px;font-size:11px;text-align:center}
.coach-account-empty{margin:0;color:var(--gray-400);font-size:14px}
.coach-account-field-locked-hint{margin:0;color:#a0662b;font-size:12px}

.coach-account-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:22px 18px;margin:0}
.coach-account-grid dt{margin:0 0 6px;color:var(--gray-400);font-size:12px;font-weight:700;text-align:right}
.coach-account-grid dd{margin:0;color:var(--gray-900);font-size:14px;font-weight:800;text-align:right}

.coach-account-documents{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px}
.coach-account-bank-documents{padding-top:20px}
.coach-account-document{display:grid;justify-items:center;gap:8px;padding:22px 14px;border:1px solid var(--sage-150);border-radius:16px;text-align:center}
.coach-account-document-icon{font-size:24px}
.coach-account-document strong{color:var(--gray-900);font-size:13px}
.coach-account-document a{color:var(--dark-text, var(--green));font-size:12px;font-weight:800;text-decoration:underline}

.coach-account-contract-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:24px}
.coach-account-status-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:14px;background:var(--green-75);color:var(--dark-text, var(--green-525));font-size:12px;font-weight:800}
.coach-account-status-badge::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green-525)}

.coach-account-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.coach-account-field{padding:20px;border-radius:16px;background:var(--surface-page)}
.coach-account-field h3{margin:0 0 12px;color:var(--text-primary);font-size:15px}
.coach-account-field-divider{border:0;border-top:1px solid rgba(23,79,67,.12);margin:12px 0}
.coach-account-field p{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:12px 0 0;padding:7px 10px;border-radius:8px;background:var(--green-50);color:var(--dark-text, var(--green-500));font-size:12px}
.coach-account-field-roles{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0;padding:0;list-style:none}
.coach-account-field-roles li{padding:5px 12px;border-radius:20px;background:#eef3fb;color:var(--dark-text, #2b5da8);font-size:12px;font-weight:700}

.coach-account-field-schedule{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.coach-account-field-schedule li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border-radius:8px;background:var(--green-50);font-size:12px}
.coach-account-field-schedule-day{color:var(--text-primary);font-weight:800}
.coach-account-field-schedule-time{color:var(--dark-text, var(--green-500))}

.coach-account-btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border:0;border-radius:20px;font-family:"Cairo",sans-serif;font-size:13px;font-weight:800;cursor:pointer;text-decoration:none}
.coach-account-btn-icon{width:18px;height:18px;flex:0 0 18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.coach-account-btn:disabled{opacity:.5;cursor:not-allowed}
.coach-account-btn-primary{background:var(--orange);color:var(--text-on-brand)}
.coach-account-btn-outline{border:1px solid var(--sage-375);background:var(--surface);color:var(--text-primary)}
.coach-account-btn-danger{border:1px solid #f3c9c9;background:var(--red-100);color:var(--red-725)}

.coach-account-danger-zone{border:1px dashed #e6b8b8}
.coach-account-danger-zone h2{color:var(--red-725);font-size:15px}
.coach-account-danger-zone p{margin:0 0 16px;color:var(--sage-700);font-size:13px;line-height:1.6}
.coach-account-danger-link{border:0;background:transparent;padding:0;color:var(--red-725);font-family:"Cairo",sans-serif;font-size:12px;font-weight:700;text-decoration:underline;cursor:pointer}
.coach-account-danger-link:focus-visible{color:var(--dark-text, #8f2a1f)}
@media (hover: hover){
.coach-account-danger-link:hover{color:var(--dark-text, #8f2a1f)}
}

.coach-account-modal[hidden]{display:none}
.coach-account-modal{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));background:rgba(8,25,20,.6);backdrop-filter:blur(6px);animation:coach-account-modal-backdrop-in .2s ease}
.coach-account-modal-backdrop{position:absolute;inset:0}
.coach-account-modal-dialog{position:relative;width:min(640px,100%);max-height:calc(100dvh - 40px);overflow:auto;border-radius:24px;background:var(--surface);box-shadow:0 30px 80px rgba(0,20,15,.35);animation:coach-account-modal-in .2s cubic-bezier(.19,1,.22,1)}
.coach-account-modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 24px;background:linear-gradient(135deg,var(--green-700),var(--green-825));color:var(--text-on-brand);border-radius:24px 24px 0 0}

.coach-account-modal-header h2{margin:0;font-size:16px;font-weight:900}
.coach-account-modal-close{display:grid;width:32px;height:32px;place-items:center;border:0;border-radius:50%;background:rgba(255,255,255,.14);color:var(--text-on-brand);font-size:20px;line-height:1;cursor:pointer;transition:background .16s,transform .16s}
@media (hover: hover){
.coach-account-modal-close:hover{background:rgba(255,255,255,.24);transform:rotate(90deg)}
}
@keyframes coach-account-modal-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes coach-account-modal-backdrop-in{from{opacity:0}to{opacity:1}}
.coach-account-form{display:grid;gap:16px;padding:22px}
.coach-account-form.is-section-filtered{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end}
.coach-account-form.is-section-filtered[data-editing-section="identity"]{grid-template-columns:repeat(6,minmax(0,1fr))}.coach-account-form.is-section-filtered[data-editing-section="identity"] label{grid-column:span 3}.coach-account-form.is-section-filtered[data-editing-section="identity"] label:has([data-name-part]){grid-column:span 2}.coach-account-form.is-section-filtered[data-editing-section="identity"] label:has([name="city_id"]),.coach-account-form.is-section-filtered[data-editing-section="identity"] label:has([name="school_id"]){grid-column:span 3;order:10;align-self:start}.coach-account-form.is-section-filtered[data-editing-section="identity"]>.coach-account-availability-editor{grid-column:1/-1;order:11}.coach-account-form.is-section-filtered[data-editing-section="identity"] .coach-account-birth-date{grid-column:1/-1;order:12}.coach-account-form.is-section-filtered[data-editing-section="identity"]>.coach-account-form-error{order:19}.coach-account-form.is-section-filtered[data-editing-section="identity"]>button{order:20}.coach-account-form.is-section-filtered[data-editing-section="identity"] label.is-last-odd{grid-column:1/-1}.coach-account-form.is-section-filtered[data-editing-section="identity"] label.coach-account-field-alone{grid-column:1/-1}
@media(min-width:521px){.profile-page .coach-account-form.is-section-filtered[data-editing-section="identity"] :is(label:has([name="nationality"]),label:has([name="city_id"]),label:has([name="school_id"])){grid-column:span 2;order:10;align-self:start}.profile-page .coach-account-form label:has([name="nationality"]) :is(input,select){height:48px;border-radius:25px}:is(.profile-page,.coach-profile-page) .coach-account-birth-date .birth-date-picker{gap:16px}}:is(.profile-page,.coach-profile-page) .coach-account-birth-date .birth-date-picker{grid-template-columns:repeat(3,minmax(0,1fr))}
.coach-account-form.is-section-filtered .coach-account-form-row:not([hidden]){display:contents}
.coach-account-form.is-section-filtered label.is-last-odd,
.coach-account-form.is-section-filtered>.coach-account-form-error,
.coach-account-form.is-section-filtered>button{grid-column:1/-1}
.coach-account-form label{display:grid;align-content:start;gap:6px;color:var(--text-primary);font-size:12px;font-weight:800}
.coach-account-form input,.coach-account-form select{padding:11px 14px;border:1px solid var(--sage-200);border-radius:12px;background:var(--surface);font:inherit}
.coach-account-form input:disabled{border-color:var(--gray-50);background:var(--sage-275);color:var(--gray-325);cursor:not-allowed}
.coach-account-form label.has-error input{border-color:var(--red-175)}
.coach-account-form small[data-field-error]{display:block;min-height:16px;margin:0 8px;color:var(--red-175);font-size:11px;font-weight:700;direction:rtl;text-align:right}
.coach-account-form label:has(>small[data-city-error]){position:relative}.coach-account-form small[data-city-error]{position:absolute;top:100%;inset-inline:0;min-height:0}
.coach-account-birth-date{min-width:0}.coach-account-birth-date .birth-date-picker{display:grid;grid-template-columns:1fr 1.35fr .8fr;gap:8px}.coach-account-birth-date .birth-date-picker select{min-width:0;width:100%;padding-inline:10px;cursor:pointer}.coach-account-birth-date .birth-date-picker select:invalid{color:var(--gray-275)}
.coach-account-form-row{display:grid;gap:14px}
.coach-account-form-row-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.coach-account-form-row-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.coach-account-form-error{margin:0;color:var(--red-725);font-size:12px;font-weight:700}
.coach-account-form-warning{margin:0;color:var(--sage-700);font-size:13px;line-height:1.6}
.coach-account-form button{margin-top:4px}
.coach-account-form>.coach-account-form-submit{width:max-content;justify-self:end}
.coach-account-form-actions{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:16px;direction:ltr}
.coach-account-form.is-section-filtered[data-editing-section="identity"] .coach-account-form-actions{order:20}
.coach-account-form-actions .coach-account-form-submit{justify-content:center;min-width:150px;border-radius:999px}
.coach-account-cancel-button{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:48px;padding:9px 16px;border:1px solid #d6ebea;border-radius:999px;background:var(--surface);color:var(--text-primary);font-family:"Cairo",sans-serif;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer;direction:ltr}
.coach-account-cancel-button[hidden]{display:none}
.coach-account-cancel-button svg{width:18px;height:18px;fill:none;stroke:#ed2424;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.coach-account-cancel-button:focus-visible{border-color:#b7d8d4;background:var(--sage-50)}
@media (hover: hover){
.coach-account-cancel-button:hover{border-color:#b7d8d4;background:var(--sage-50)}
}
.coach-account-form[data-editing-section="identity"] .coach-account-email-field{grid-column:1/-1}
.coach-account-attachment-editor{display:contents}.coach-account-attachment-editor label small{color:var(--sage-575);font-size:10px;font-weight:600}.coach-account-attachment-editor input[type="file"]{padding:7px;background:var(--sage-50);cursor:pointer}.coach-account-attachment-editor input[type="file"]::file-selector-button{margin-left:10px;padding:7px 12px;border:0;border-radius:18px;background:var(--green-800);color:var(--text-on-brand);font:600 11px "Cairo",sans-serif;cursor:pointer}
.coach-account-bank-grid{display:grid;grid-column:1/-1;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}.coach-account-bank-grid[hidden]{display:none}.coach-account-bank-column{display:flex!important;height:max-content;align-self:start;flex-direction:column;gap:16px}.coach-account-bank-column>label{flex:0 0 auto}.coach-account-bank-column label small{color:var(--sage-575);font-size:10px;font-weight:600}.coach-account-bank-column input[type="file"]{padding:7px;background:var(--sage-50);cursor:pointer}.coach-account-bank-column input[type="file"]::file-selector-button{margin-left:10px;padding:7px 12px;border:0;border-radius:18px;background:var(--green-800);color:var(--text-on-brand);font:600 11px "Cairo",sans-serif;cursor:pointer}

.iban-bank-card{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid rgba(21,148,71,.22);border-radius:14px;background:linear-gradient(135deg,rgba(21,148,71,.1),rgba(21,148,71,.035));color:var(--dark-text, var(--green-650))}
.iban-bank-card[hidden]{display:none}
.iban-bank-icon{display:grid;flex:0 0 40px;width:40px;height:40px;place-items:center;border-radius:12px;background:var(--green);color:var(--text-on-brand);box-shadow:0 5px 14px rgba(21,148,71,.2)}
.iban-bank-icon svg{width:22px;height:22px}
.iban-bank-details{display:grid;flex:1;gap:2px;min-width:0}
.iban-bank-details small{color:#5d7767;font-size:10px}
.iban-bank-details strong{overflow:hidden;color:var(--dark-text, #174c2d);font-size:14px;text-overflow:ellipsis;white-space:nowrap}
.iban-bank-code{flex:0 0 auto;padding:5px 9px;border-radius:999px;background:rgba(21,148,71,.12);color:var(--dark-text, var(--green-650));font-size:11px;font-weight:800}

.freelance-platform-link{display:flex;grid-column:1/-1;align-items:center;gap:7px;padding:11px 14px;border:1px solid var(--sage-150);border-radius:12px;background:var(--surface-page);color:var(--gray-625);font-size:12px}
.freelance-platform-link[hidden]{display:none}
.freelance-platform-link>span:first-child{display:grid;width:24px;height:24px;place-items:center;border-radius:7px;background:rgba(21,148,71,.1);color:var(--dark-text, var(--green));font-size:14px;font-weight:800}
.freelance-platform-link a{color:var(--dark-text, var(--green-575));font-weight:800;text-decoration:none}
@media (hover: hover){
.freelance-platform-link a:hover{text-decoration:underline}
}
.coach-account-phone-otp-modal{z-index:2400}.coach-account-phone-otp-content{display:grid;gap:16px;padding:24px}.coach-account-phone-otp-content p{margin:0;color:var(--sage-700);font-size:13px;line-height:1.7}.coach-account-phone-otp-content label{display:grid;gap:7px;color:var(--text-primary);font-size:12px;font-weight:800}.coach-account-phone-otp-content input{padding:12px 14px;border:1px solid var(--sage-275);border-radius:14px;font:inherit;text-align:center;direction:ltr}.coach-account-phone-otp-content small{min-height:20px;color:var(--dark-text, #39824d);font-size:11px;font-weight:700;text-align:center}.coach-account-phone-otp-actions{display:flex;justify-content:center;gap:10px}.coach-account-phone-otp-actions .coach-account-btn{margin:0}
.coach-account-availability-editor{grid-column:1/-1;display:grid;gap:16px}.coach-account-availability-editor[hidden]{display:none}.coach-account-availability-editor fieldset{min-width:0;margin:0;padding:14px;border:1px solid var(--sage-150);border-radius:14px}.coach-account-availability-editor legend{padding:0 7px;color:var(--text-primary);font-size:13px;font-weight:900}.coach-account-availability-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.coach-account-availability-options label{display:flex;grid-template-columns:none;align-items:center;gap:8px;padding:10px;border-radius:10px;background:var(--surface-page)}.coach-account-availability-options input,.coach-account-availability-toggle input{width:17px;height:17px;margin:0;accent-color:var(--green-425)}.coach-account-availability-schedules{display:grid;gap:12px}.coach-account-availability-field[hidden]{display:none}.coach-account-availability-day{display:grid;grid-template-columns:minmax(100px,.8fr) repeat(2,minmax(120px,1fr));align-items:end;gap:10px;padding:10px 0;border-bottom:1px solid var(--sage-100)}.coach-account-availability-day:last-child{border-bottom:0}.coach-account-availability-toggle{display:flex!important;grid-template-columns:none!important;align-items:center;gap:8px;height:44px}
.coach-account-availability-skills{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--sage-100)}.coach-account-availability-skills-label{display:block;margin-bottom:9px;color:var(--text-primary);font-size:12px;font-weight:800}
.coach-account-time-field span{font-size:11px;color:var(--sage-700)}.coach-account-time-field select{width:100%;height:44px;padding:0 38px 0 12px;color:var(--text-primary);background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 8px;appearance:none;text-align:left}.coach-account-time-field select:focus{outline:0;border-color:var(--input-focus);box-shadow:0 0 0 3px var(--input-focus-ring)}.coach-account-time-field select:disabled{color:var(--sage-525);background-color:var(--surface-page);cursor:not-allowed}

.coach-account-form .select2-container{min-width:0;font-family:"Cairo",sans-serif}.coach-account-form .select2-container--default .select2-selection--single{height:48px;border:1px solid var(--sage-275);border-radius:25px;background-color:var(--surface);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 18px center;background-size:12px 8px}
.coach-account-form .select2-container--default .select2-selection--single .select2-selection__arrow{display:none}
.coach-account-form[dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered,
.coach-account-form .select2-container--default .select2-selection--single .select2-selection__rendered{padding-right:18px;padding-left:40px;color:var(--gray-775);font:500 14px "Cairo",sans-serif;line-height:46px}
.coach-account-form .select2-container--default .select2-selection--single .select2-selection__placeholder{color:var(--gray-275)}
.coach-account-form .select2-container--default.select2-container--focus .select2-selection--single,
.coach-account-form .select2-container--default.select2-container--open .select2-selection--single{border-color:var(--input-focus);box-shadow:0 0 0 3px var(--input-focus-ring)}
.coach-account-form .select2-container--default .select2-selection--multiple{box-sizing:border-box;width:100%;height:48px;min-height:48px;padding:3px 12px;overflow:hidden;border:1px solid var(--sage-275);border-radius:25px;background:var(--surface)}
.coach-account-form .select2-container--default.select2-container--focus .select2-selection--multiple,
.coach-account-form .select2-container--default.select2-container--open .select2-selection--multiple{border-color:var(--input-focus);box-shadow:0 0 0 3px var(--input-focus-ring)}
.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__rendered{display:flex;width:100%;min-width:0;height:40px;min-height:40px;flex-wrap:nowrap;align-items:center;gap:4px;padding:0;overflow:hidden}
.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__choice{position:relative;flex:0 0 auto;margin:2px 0;padding:3px 9px 3px 27px;border:0;border-radius:16px;background:var(--green-800);color:var(--text-on-brand);font:600 12px "Cairo",sans-serif;line-height:22px}
.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove{display:block;position:absolute;top:0;right:auto;bottom:0;left:0;width:24px;height:24px;margin:auto;padding:0;border:0;border-radius:50%;color:transparent;font-size:0;line-height:0}
.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove>span{visibility:hidden}
.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before,.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove::after{content:"";position:absolute;top:50%;left:50%;width:12px;height:3px;border-radius:2px;background:var(--surface);transform-origin:center}
.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove::before{transform:translate(-50%,-50%) rotate(45deg)}
.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove::after{transform:translate(-50%,-50%) rotate(-45deg)}
@media (hover: hover){
.coach-account-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{background:var(--green-875);color:var(--text-on-brand)}
}
.coach-account-form .select2-container--default .select2-selection--multiple .select2-search--inline{min-width:24px;max-width:120px;flex:0 1 120px;overflow:hidden}.coach-account-form .select2-container--default .select2-selection--multiple .select2-search--inline .select2-search__field{box-sizing:border-box;width:auto!important;min-width:24px;max-width:120px;height:30px;margin:2px 0;font:500 13px "Cairo",sans-serif}
.coach-account-form .select2-selection__rendered:has(.select2-selection__choice) .select2-search--inline{width:0;min-width:0;max-width:0;flex:0 0 0;visibility:hidden}
.coach-account-form .coach-account-multi-select+.select2-container .select2-search--inline{display:none!important}
.coach-account-form .coach-account-multi-select+.select2-container.is-empty .select2-selection__rendered::before{content:"اختر اللغات";align-self:center;color:var(--gray-275);font:500 13px "Cairo",sans-serif}
.coach-account-modal .select2-dropdown{overflow:hidden;border:1px solid var(--green-425);border-radius:14px;direction:rtl;font-family:"Cairo",sans-serif;font-size:14px}.coach-account-modal .select2-search--dropdown{padding:8px;background:var(--surface)}.coach-account-modal .select2-search--dropdown .select2-search__field{box-sizing:border-box;width:100%;height:40px;padding:7px 12px;border:1px solid var(--sage-275)!important;border-radius:10px;outline:0;font:500 14px "Cairo",sans-serif}.coach-account-modal .select2-search--dropdown .select2-search__field:focus{border-color:var(--input-focus)!important;box-shadow:0 0 0 3px var(--input-focus-ring)}.coach-account-modal .select2-results__options{max-height:min(260px,45vh)!important;overscroll-behavior:contain}.coach-account-modal .select2-results__option{box-sizing:border-box;min-height:42px;padding:9px 16px;background:var(--surface);color:var(--text-primary);font:700 14px/24px "Cairo",sans-serif}.coach-account-modal .select2-results__option--selected{background:var(--sage-100)}.coach-account-modal .select2-results__option--highlighted.select2-results__option--selectable{background:var(--green-425);color:var(--text-on-brand)}.coach-account-form .select2-container--default.select2-container--disabled .select2-selection--single,.coach-account-form .select2-container--default.select2-container--disabled .select2-selection--multiple{border-color:var(--gray-50);background-color:var(--sage-275);color:var(--gray-325);cursor:not-allowed}

@media(max-width:900px){
    .coach-account-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
    .coach-account-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media(max-width:640px){
    .coach-account-hero-info{flex-direction:column;text-align:center}
    .coach-account-hero-info h1,.coach-account-hero-info p{text-align:center}
    .coach-account-hero-row{flex-direction:column;align-items:stretch}
    .coach-account-hero-stats{flex-basis:auto}
    .coach-account-card-actions{flex-direction:column}
    .coach-account-grid{grid-template-columns:1fr 1fr}
    .coach-account-fields{grid-template-columns:1fr}
    .coach-account-contract-actions{flex-direction:column;align-items:flex-end}
    .coach-account-hero-art{display:none}
}

@media(max-width:520px){
    .coach-account-bank-grid{grid-template-columns:1fr}
    .coach-account-form-row-2,.coach-account-form-row-3{grid-template-columns:1fr}
    .coach-account-form.is-section-filtered{grid-template-columns:1fr}
    .coach-account-form.is-section-filtered[data-editing-section="identity"]{grid-template-columns:1fr}.coach-account-form.is-section-filtered[data-editing-section="identity"] label,.coach-account-form.is-section-filtered[data-editing-section="identity"] label:has([data-name-part]),.coach-account-form.is-section-filtered[data-editing-section="identity"] .coach-account-birth-date,.coach-account-form.is-section-filtered[data-editing-section="identity"] label:has([name="city_id"]),.coach-account-form.is-section-filtered[data-editing-section="identity"] label:has([name="school_id"]){grid-column:1/-1}
    .coach-account-form.is-section-filtered label.is-last-odd,
    .coach-account-form.is-section-filtered>.coach-account-form-error,
    .coach-account-form.is-section-filtered>button{grid-column:auto}
    .coach-account-availability-editor{grid-column:auto}.coach-account-availability-options{grid-template-columns:1fr}.coach-account-availability-day{grid-template-columns:1fr 1fr}.coach-account-availability-toggle{grid-column:1/-1}
    .coach-account-birth-date .birth-date-picker{gap:5px}.coach-account-birth-date .birth-date-picker select{padding-inline:6px;font-size:11px}
}

/* Wraps just the player's own profile page (not the coach/volunteer variants
   that also share .coach-account) with the rounded #ECECEC card from the
   design reference. The extra inline padding is added on top of the
   existing max-width (not carved out of it) so the hero row keeps the same
   content width it was built for — otherwise the level/progress cards'
   fixed-width medal padding + nowrap text overflow the hero's own
   overflow:hidden edge above the 1100px breakpoint. */
body.profile-page .coach-account {
    background:var(--sage-100);
    border-radius:40px;
    padding:0 clamp(16px,4vw,40px) clamp(32px,4vw,56px);
    width:min(calc(1100px + clamp(16px,4vw,40px) * 2), calc(100% - 32px));
}

/* Delete-account popup: same green header, pill field and pill action as the edit popup. */
.coach-account-form .password-toggle-wrap input{box-sizing:border-box;width:100%}
.coach-account-delete-dialog{width:min(460px,100%)}
.coach-account-modal-header-danger{background:linear-gradient(135deg,var(--red-725),var(--red-900))}
.coach-account-delete-dialog .coach-account-form-warning{padding:12px 16px;border-radius:14px;background:var(--red-100);color:var(--red-900)}
.coach-account-delete-dialog input[type="password"],.coach-account-delete-dialog input[type="text"]{height:48px;border-radius:25px}
.coach-account-delete-dialog .coach-account-form-submit{justify-content:center;min-width:150px;border:0;border-radius:999px;background:var(--red-725);color:var(--text-on-brand)}
@media (hover: hover){
.coach-account-delete-dialog .coach-account-form-submit:hover{background:var(--red-900)}
}
.coach-profile-page .coach-account-form.is-section-filtered[data-editing-section="identity"]{align-items:start}
.coach-profile-page .coach-account-form[data-editing-section="identity"] input:not([type="hidden"]){height:48px;border-radius:25px}

/* Upload widget chips (attachment-field.js), shared with the register page. */
.coach-attachment-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.coach-attachment-list:not(:empty) {
    margin-top: 8px;
}

.coach-attachment-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    border: 1px solid var(--sage-275);
    border-radius: 20px;
    background: var(--surface-page);
}

.coach-attachment-name {
    overflow: hidden;
    flex: 1;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coach-attachment-remove {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    width: 20px;
    height: 20px;
    border: 0;
    border-radius: 50%;
    background: var(--surface);
    color: var(--red-175);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}

@media (hover: hover){

.coach-attachment-remove:hover {
    background: #ffe4e4;
}
}

.coach-attachment-status {
    margin: 6px 4px 0;
    color: var(--gray-625);
    font-size: 12px;
}

.coach-attachment-status.is-error {
    color: var(--red-175);
}

a.coach-attachment-name { text-decoration: none; }
.coach-account-document-field { display: flex; flex-direction: column; min-width: 0; }
.coach-account-document-field[hidden] { display: none; }

/* =========================================================
   PLAYER PROFILE (phones, profile/player-account)
   Centered avatar and name, a compact stat strip and badges row in place of the
   stat cards, info as list rows, and the popups as bottom sheets.
========================================================= */
.player-profile-stats,.player-profile-badges{display:none}

@media(max-width:767px){
    body.profile-page .coach-account.player-account{width:auto;margin:0 0 calc(110px + env(safe-area-inset-bottom));padding:0 16px;border-radius:0;background:none}
    .player-account .coach-account-hero{padding:8px 0 0;overflow:visible}
    .player-account .coach-account-hero-stats{display:none}

    .player-account .coach-account-hero-info{flex-direction:column-reverse;align-items:center;gap:10px;text-align:center}
    .player-account .coach-account-hero-info>div{display:grid;justify-items:center;gap:6px}
    .player-account .coach-account-hero-info h1.app-header-duplicate{display:block;margin:0;color:var(--dark-text, var(--green-900));font-size:22px;line-height:1.3}
    .player-account .coach-account-hero-info p{margin:0;color:var(--sage-700);font-size:13px}
    .player-account .coach-account-avatar{width:96px;height:96px;box-shadow:0 0 0 3px var(--yellow),0 8px 20px rgba(7,88,71,.15)}
    .player-account .coach-account-avatar-edit{height:28px}
    .player-account .coach-account-badge{padding:5px 14px;background:linear-gradient(135deg,var(--green-dark),var(--green))}

    .player-profile-stats{display:grid;grid-template-columns:repeat(3,1fr);margin-top:18px;overflow:hidden;border-radius:18px;background:var(--surface);box-shadow:0 4px 16px rgba(7,88,71,.08)}
    .player-profile-stats>a,.player-profile-stats>span{display:grid;justify-items:center;gap:2px;padding:14px 6px 10px;color:var(--dark-text, var(--green-900));text-decoration:none;-webkit-tap-highlight-color:transparent}
    .player-profile-stats>*+*:not(.player-profile-progress){border-inline-start:1px solid var(--sage-100)}
    .player-profile-stats>a:active{background:var(--surface-page)}
    .player-profile-stats strong{font-size:22px;font-weight:900;line-height:1.2}
    .player-profile-stats small{color:var(--sage-700);font-size:12px;font-weight:700}
    .player-profile-progress{display:grid;grid-column:1/-1;gap:6px;padding:10px 16px 14px;border-top:1px solid var(--sage-100)}
    .player-profile-progress .progress-track{display:block;height:8px;margin:0;border-radius:999px;background:var(--sage-150)}
    .player-profile-progress .progress-track i{height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--green),var(--green-200))}

    .player-profile-badges{display:flex;width:100%;align-items:center;gap:8px;margin-top:12px;padding:12px 16px;border:0;border-radius:18px;background:var(--surface);box-shadow:0 4px 16px rgba(7,88,71,.08);font:inherit;text-align:right;cursor:pointer;-webkit-tap-highlight-color:transparent}
    .player-profile-badges:active{background:var(--surface-page)}
    .player-profile-badges>span{display:grid;flex:1;min-width:0}
    .player-profile-badges strong{color:var(--dark-text, var(--green-900));font-size:15px;font-weight:800}
    .player-profile-badges small{color:var(--sage-700);font-size:12px;font-weight:600}
    .player-profile-badges img{width:38px;height:38px;object-fit:contain}
    .player-profile-badges img.is-locked{filter:grayscale(1);opacity:.45}
    .player-profile-badges::after{color:var(--sage-525);font-size:20px;line-height:1;content:"‹"}

    .player-account .badges-modal-dialog{padding:18px 16px calc(24px + env(safe-area-inset-bottom))}
}

/* =========================================================
   PROFILE SECTIONS (phones, player/coach/volunteer profiles)
   Each card: heading and a small edit pill on one line, then label/value rows,
   documents as tappable rows, and full-width contract buttons.
========================================================= */
@media(max-width:767px){
    .coach-account{margin-bottom:calc(110px + env(safe-area-inset-bottom))}
    .coach-account:not(.player-account) .coach-account-hero{padding:16px 0 0}
    .coach-account:not(.player-account) .coach-account-hero-info{flex-direction:column;align-items:center;gap:10px;text-align:center}
    .coach-account:not(.player-account) .coach-account-hero-info :is(h1,p){text-align:center}
    .coach-account:not(.player-account) .coach-account-hero-info h1{font-size:22px}
    .coach-account:not(.player-account) .coach-account-avatar{width:96px;height:96px}
    .coach-account .coach-account-avatar-edit{height:32px}

    .coach-account .coach-account-card{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:0 10px;margin-top:16px;padding:16px;border-radius:18px;box-shadow:0 4px 16px rgba(7,88,71,.08)}
    .coach-account .coach-account-card>*{grid-column:1/-1;order:3}
    .coach-account .coach-account-card>.coach-account-incomplete-notice{order:0;margin-bottom:12px}
    .coach-account .coach-account-card>h2{grid-column:1;order:1}
    .coach-account .coach-account-card>.coach-account-card-actions{grid-column:2;order:2;margin:0}
    .coach-account .coach-account-section-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;margin-bottom:0}
    .coach-account .coach-account-card h2{margin:0;color:var(--dark-text, var(--green-900));font-size:16px;font-weight:800;line-height:1.4}
    .coach-account :is(.coach-account-section-heading,.coach-account-card-actions) .coach-account-btn{width:auto;max-width:150px;min-height:36px;padding:5px 12px;border-color:var(--sage-150);border-radius:999px;color:var(--dark-text, var(--green));font-size:12px;line-height:1.3;white-space:normal}
    .coach-account .coach-account-field-locked-hint,.coach-account .coach-account-empty{margin-top:10px;font-size:13px}

    .coach-account .coach-account-grid{display:block;margin-top:6px}
    .coach-account .coach-account-grid>div{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid var(--sage-100)}
    .coach-account .coach-account-grid>div:last-child{padding-bottom:0;border-bottom:0}
    .coach-account .coach-account-grid dt{flex:none;max-width:50%;margin:0;font-size:13px}
    .coach-account .coach-account-grid dd{min-width:0;font-size:14px;font-weight:700;text-align:left;overflow-wrap:anywhere}

    .coach-account .coach-account-documents{grid-template-columns:1fr;gap:8px;margin-top:12px;padding-top:0}
    .coach-account .coach-account-document{display:flex;align-items:center;gap:12px;min-height:56px;padding:10px 14px;border-radius:14px;text-align:right}
    .coach-account .coach-account-document strong{flex:1;min-width:0;font-size:14px}
    .coach-account .coach-account-document a{display:inline-flex;align-items:center;min-height:36px;padding:0 14px;border-radius:999px;background:var(--sage-100);text-decoration:none}

    .coach-account .coach-account-contract{margin-top:6px}
    .coach-account .coach-account-contract-actions{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;margin-top:16px}
    .coach-account .coach-account-contract-actions .coach-account-btn{justify-content:center;min-height:44px;padding:8px 12px}

    .coach-account .coach-account-fields{grid-template-columns:1fr;gap:10px;margin-top:12px}
    .coach-account .coach-account-field{padding:14px}
    .coach-account .coach-account-field-schedule li{min-height:36px;font-size:13px}
}

/* =========================================================
   EDIT POPUPS (phones, player/coach/volunteer profiles)
   Popups slide up as bottom sheets over the tab bar, with the header and save
   bar pinned while the form scrolls. Fields are 16px so iOS doesn't zoom on focus.
========================================================= */
@media(max-width:767px){
    .coach-account .coach-account-modal{align-items:end;justify-items:stretch;padding:0}
    .coach-account :is(.coach-account-modal-dialog,.badges-modal-dialog){width:100%;max-height:92dvh;overscroll-behavior:contain;padding-bottom:env(safe-area-inset-bottom);border-radius:24px 24px 0 0;animation:sheet-up .22s ease-out}
    .coach-account .coach-account-modal-header{position:sticky;top:0;z-index:3;padding:14px 18px}
    .coach-account .coach-account-modal-close{width:40px;height:40px}
    .coach-account .coach-account-form{padding:18px 16px}
    .coach-account .coach-account-form label{font-size:13px}
    .coach-account .coach-account-form :is(input:not([type="checkbox"],[type="radio"],[type="file"]),select){min-height:48px;font-size:16px}
    .coach-account .coach-account-form select{padding-block:0} /* 11px padding left 24px for ~30px Cairo text, clipping it */
    .coach-account .coach-account-form input[type="file"]{box-sizing:border-box;width:100%;min-width:0;max-width:100%;overflow:hidden}
    .coach-account .coach-account-modal .select2-search--dropdown .select2-search__field{font-size:16px}
    .coach-account .coach-account-form>.coach-account-form-submit{width:100%;min-height:48px;justify-content:center}
    .coach-account .coach-account-modal-dialog:has(.coach-account-form-actions){padding-bottom:0}
    .coach-account .coach-account-form:has(>.coach-account-form-actions){padding-bottom:0}
    .coach-account .coach-account-form-actions{position:sticky;bottom:0;z-index:3;margin:0 -16px;padding:12px 16px calc(12px + env(safe-area-inset-bottom));border-top:1px solid var(--sage-100);background:var(--surface)}
    .coach-account .coach-account-form-actions .coach-account-form-submit{flex:1;min-height:48px}

    .coach-account .coach-account-bank-grid{grid-template-columns:1fr}
    .coach-account .iban-bank-details small{font-size:12px}

    /* Availability editor: bigger checkboxes and rows. */
    .coach-account .coach-account-availability-editor fieldset{padding:12px}
    .coach-account .coach-account-availability-options{grid-template-columns:1fr}
    .coach-account .coach-account-availability-options label{min-height:48px;padding:10px 12px;font-size:14px}
    .coach-account :is(.coach-account-availability-options,.coach-account-availability-toggle) input{width:22px;height:22px}
    .coach-account .coach-account-availability-day{grid-template-columns:1fr 1fr}
    .coach-account .coach-account-availability-toggle{grid-column:1/-1;font-size:14px}
    .coach-account .coach-account-time-field span{font-size:12px}
}

@media(max-width:767px) and (prefers-reduced-motion:reduce){
    .coach-account :is(.coach-account-modal-dialog,.badges-modal-dialog){animation:none}
}

/* Source: leaderboard.css */
.leaderboard .lb-title{margin:34px 0 14px;color:var(--text-primary);font-size:20px;font-weight:800}
.lb-filters{display:flex;flex-wrap:nowrap;align-items:center;gap:12px;padding:16px;border-radius:20px;background:var(--surface)}
.lb-filters select{flex:1 1 0;min-width:0;height:48px;padding:0 16px;border:1px solid var(--sage-150);border-radius:14px;background:var(--surface);color:var(--text-primary);font:inherit;font-size:13px}
.lb-filters button{flex:0 0 auto;padding:0 34px;height:48px;border:0;border-radius:14px;background:var(--orange-325);color:var(--text-on-brand);font:inherit;font-weight:800;cursor:pointer}
.lb-reset{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;padding:0 24px;height:48px;border:1.5px solid var(--sage-150);border-radius:14px;color:var(--text-primary);font:inherit;font-weight:800;font-size:13px;text-decoration:none;white-space:nowrap}
@media (hover: hover){
.lb-reset:hover{background:var(--surface-page)}}
.lb-filters .lb-share{padding:0 24px;border:1.5px solid var(--sage-150);background:transparent;color:var(--text-primary);font-size:13px}
@media (hover: hover){
.lb-filters .lb-share:hover{background:var(--surface-page)}}
.lb-tabs{display:inline-flex;margin:22px 0;padding:4px;border-radius:30px;background:var(--surface)}
.lb-tabs a{padding:11px 34px;border-radius:26px;color:var(--text-primary);font-weight:800;text-decoration:none}
.lb-tabs a.is-active{background:var(--green-250);color:var(--text-on-brand)}
.lb-layout{display:flex;flex-direction:row;align-items:flex-start;gap:24px}
.lb-board{flex:1;min-width:0;padding:28px;border-radius:20px;background:var(--surface)}
.lb-board h3,.lb-me h3{margin:0 0 18px;color:var(--text-primary);font-size:22px;font-weight:800}
.lb-podium{display:flex;justify-content:center;align-items:flex-end;gap:28px;margin:24px 0 32px}
.lb-podium-item{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:130px;text-align:center;font-size:13px}
.lb-podium-item.place-1{order:0;transform:translateY(-14px)}
.lb-podium-avatar{display:grid;place-items:center;width:78px;height:78px;overflow:hidden;border:4px solid var(--gray-50);border-radius:50%;background:var(--surface-page)}
.place-1 .lb-podium-avatar{width:92px;height:92px;border-color:var(--yellow-525)}
.place-3 .lb-podium-avatar{border-color:#c98644}
.lb-podium-avatar svg,.lb-player i svg{width:60%;fill:var(--sage-425);stroke:none}
.lb-podium-rank{color:var(--gray-175);font-size:20px;font-weight:800}.place-1 .lb-podium-rank{color:var(--yellow-525)}.place-3 .lb-podium-rank{color:#c98644}
.lb-pill{padding:3px 12px;border-radius:12px;background:var(--surface-page);font-size:12px;font-weight:800}
.lb-city{color:var(--gray-450);font-size:11px}
.lb-table{width:100%;border-collapse:collapse}
.lb-table th{padding:12px 16px;background:var(--text-dark);color:var(--text-on-brand);font-size:12px;text-align:right}
.lb-table td{padding:12px 16px;font-size:13px;font-weight:700}
.lb-table tbody tr:nth-child(odd){background:var(--surface-page)}
.lb-table tbody tr.is-me{outline:2px solid var(--orange-325);outline-offset:-2px}
.lb-podium-item.is-me{outline:2px solid var(--orange-325);outline-offset:6px;border-radius:14px}
.lb-rank{display:inline-grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--text-dark);color:var(--text-on-brand)}
.lb-player{display:inline-flex;align-items:center;gap:10px}.lb-player i{display:grid;place-items:center;width:32px;height:32px;overflow:hidden;border-radius:50%;background:var(--surface-page)}
.lb-empty{margin:18px 0 0;color:var(--gray-450);font-size:11px;text-align:center}
.lb-me{flex:0 0 300px;padding:24px;border-radius:20px;background:var(--surface)}
.lb-me-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.lb-me-head .lb-podium-avatar{flex:0 0 auto;width:64px;height:64px;border-width:3px}
.lb-me strong{color:var(--text-primary);font-size:17px}.lb-me small{display:block;margin-top:4px;color:var(--gray-550)}
.lb-me-note{margin:16px 0 0;color:var(--text-primary);font-size:13px;line-height:1.8}
.lb-me-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}
.lb-me-stats div{padding:14px 8px;border-radius:12px;background:var(--sage-100);text-align:center}
.lb-me-stats b{display:block;color:#f3b91d;font-size:22px}.lb-me-stats span{font-size:11px;color:var(--gray-725)}
/* Tablets: filters wrap, "me" card stacks below the board as a two-column strip (profile | stats). */
@media(max-width:1100px){.lb-filters{flex-wrap:wrap}.lb-filters select{flex:1 1 180px}.lb-layout{flex-direction:column}.lb-me{flex:auto;width:100%;box-sizing:border-box}.lb-board{width:100%;box-sizing:border-box;padding:20px}.lb-podium{gap:18px}}
@media(min-width:768px) and (max-width:1100px){.lb-me{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;align-items:start}.lb-me>h3{grid-column:1/-1}.lb-me-stats{grid-column:2;grid-row:2/span 2;margin-top:0}}
@media(max-width:800px){.lb-board{padding:16px}.lb-podium{gap:12px}.lb-table th:nth-child(3),.lb-table td:nth-child(3){display:none}}
@media(max-width:480px){.lb-tabs{display:flex}.lb-tabs a{flex:1;padding:11px 8px;text-align:center}.lb-podium{gap:6px}.lb-table th,.lb-table td{padding:10px 8px}}
.lb-filters-trigger,.lb-filters .lb-filters-close,.lb-filters-backdrop{display:none}
/* Phones: the filter form opens as a bottom sheet from .lb-filters-trigger (leaderboard.js). */
@media(max-width:767px){.leaderboard .lb-title{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.lb-filters-trigger{display:flex;width:100%;min-height:48px;margin-top:24px;align-items:center;justify-content:center;gap:10px;border:0;border-radius:24px;background:var(--green-200);color:var(--text-on-brand);font:inherit;font-weight:900;box-shadow:0 4px 10px rgba(0,0,0,.14)}.lb-filters-trigger span{font-size:22px}.lb-filters-backdrop:not([hidden]){position:fixed;inset:0;z-index:2490;display:block;background:rgba(0,0,0,.62);backdrop-filter:blur(3px)}.lb-filters{position:fixed;right:0;bottom:0;left:0;z-index:2500;display:none;flex-direction:column;align-items:stretch;max-height:85dvh;padding:52px calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));overflow-y:auto;border-radius:22px 22px 0 0;box-shadow:0 20px 50px rgba(0,0,0,.3)}.lb-filters.is-open{display:flex;animation:sheet-up .22s ease-out}.lb-filters select,.lb-filters button,.lb-filters .lb-reset{flex:none;width:100%}.lb-filters .lb-filters-close{position:absolute;top:10px;left:12px;display:grid;width:34px;height:34px;padding:0;place-items:center;border:1px solid var(--sage-150);border-radius:50%;background:var(--surface);color:var(--text-primary);font-size:25px;line-height:1}body.lb-filters-open{overflow:hidden}}

/* Phones: tabs + icon filter button in one row, your rank first, and the top-10 table as a compact list. */
@media(max-width:767px){
.lb-toolbar{display:flex;align-items:center;gap:10px;margin:18px 0 14px}
.lb-toolbar .lb-tabs{order:1;display:flex;flex:1;min-width:0;margin:0}
.lb-toolbar .lb-tabs a{flex:1;padding:10px 6px;font-size:14px;text-align:center}
.lb-toolbar .lb-filters-trigger{order:2;flex:none;width:48px;min-height:48px;margin:0;padding:0;border-radius:50%;font-size:0}
.lb-layout{align-items:stretch;gap:14px}
.lb-me{order:-1;padding:16px}
.lb-me h3{margin-bottom:12px;font-size:16px}
.lb-me-head .lb-podium-avatar{width:48px;height:48px}
.lb-me-stats{margin-top:12px}
.lb-me-stats div{padding:10px 8px}
.lb-me-stats b{font-size:20px}
.lb-me-note{margin-top:12px;font-size:12px}
.lb-board h3{margin-bottom:8px;font-size:17px}
.lb-podium{gap:8px;margin:28px 0 20px}
.lb-podium-item{flex:1;min-width:0;max-width:none;font-size:12px}
.lb-podium-item strong{overflow-wrap:anywhere}
.lb-podium-avatar{width:62px;height:62px;border-width:3px}
.place-1 .lb-podium-avatar{width:76px;height:76px}
.lb-table thead{display:none}
.lb-table tbody tr,.lb-table tbody tr:nth-child(odd){background:none;border-bottom:1px solid var(--sage-100)}
.lb-table tbody tr:last-child{border-bottom:0}
.lb-table td{padding:10px 4px}
.lb-table td:not(:first-child):not(:nth-child(2)):not(:last-child){display:none}
.lb-table td:first-child{width:40px}
.lb-table td:last-child{color:var(--orange-325);font-weight:900;text-align:left;white-space:nowrap}
.lb-table td:last-child::after{margin-right:4px;color:var(--gray-450);font-size:11px;font-weight:700;content:"نقطة"}
.lb-rank{width:28px;height:28px;font-size:12px}
}

/* Source: level-up.css */
.level-up-modal { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.level-up-backdrop { position:absolute; inset:0; background:rgba(7,88,71,.72); animation:level-up-fade .3s ease both; }
.level-up-dialog { position:relative; width:min(420px,100%); padding:34px 26px 28px; border-radius:28px; background:var(--surface-page); text-align:center; box-shadow:0 24px 60px rgba(0,0,0,.35); animation:level-up-pop .55s cubic-bezier(.2,1.4,.4,1) both; }
.level-up-medal { width:110px; height:140px; margin:-90px auto 6px; display:block; object-fit:contain; filter:drop-shadow(0 8px 12px rgba(0,0,0,.3)); animation:level-up-bounce 1.6s ease-in-out .5s infinite; }
.level-up-dialog small { display:block; color:var(--dark-text, var(--green-200)); font-size:16px; font-weight:800; }
.level-up-dialog h2 { margin:4px 0 0; color:var(--dark-text, var(--green-825)); font-size:30px; font-weight:900; }
.level-up-number { margin:6px 0 10px; color:var(--dark-text, var(--green-200)); font-size:72px; font-weight:900; line-height:1; }
.level-up-dialog p { margin:0 0 20px; color:var(--dark-text, var(--green-825)); font-size:15px; font-weight:700; }
.level-up-confirm { min-width:150px; padding:11px 28px; border:0; border-radius:999px; background:var(--green-825); color:var(--text-on-brand); font-size:16px; font-weight:800; cursor:pointer; }
@media (hover: hover) {
.level-up-confirm:hover { background:var(--green-675); } }
@keyframes level-up-fade { from { opacity:0; } }
@keyframes level-up-pop { from { opacity:0; transform:scale(.6) translateY(30px); } }
@keyframes level-up-bounce { 50% { transform:translateY(-8px) rotate(-3deg); } }
@media (prefers-reduced-motion:reduce) { .level-up-dialog, .level-up-backdrop, .level-up-medal { animation:none; } }
.streak-reward-trophy { display:grid; width:92px; height:92px; margin:0 auto 14px; place-items:center; border-radius:50%; background:var(--green-50); }
.streak-reward-trophy img { width:64px; height:64px; object-fit:contain; }
.streak-reward-box { display:flex; align-items:center; justify-content:center; gap:10px; margin:22px 0 20px; padding:14px 18px; border:1px solid var(--green-200); border-radius:14px; background:var(--surface-page); color:var(--dark-text, var(--green-825)); font-size:14px; font-weight:700; }
.streak-reward-box strong { color:var(--dark-text, var(--green-200)); font-size:22px; font-weight:900; }
.level-up-dialog .streak-reward-sub { margin:4px 0 22px; color:var(--dark-text, var(--green-200)); font-size:17px; font-weight:600; }
.streak-reward-label { display:block; margin-bottom:10px; color:var(--dark-text, var(--green-825)); font-size:14px; font-weight:700; }
.streak-reward-weeks { display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:8px; margin:0 0 22px; padding:0; list-style:none; }
.streak-reward-weeks li { display:grid; gap:2px; min-width:0; padding:14px 4px 10px; border:1px solid var(--green-200); border-radius:14px; background:var(--green-50); }
.streak-reward-weeks strong { color:var(--dark-text, var(--green-200)); font-size:22px; font-weight:900; line-height:1.1; }
.streak-reward-weeks span { color:var(--dark-text, var(--green-200)); font-size:13px; font-weight:800; }
.streak-reward-weeks small { margin-top:6px; color:var(--dark-text, var(--green-200)); font-size:11px; font-weight:700; }
.streak-reward-total { margin:0 0 24px; color:var(--dark-text, var(--green-200)); font-size:36px; font-weight:900; line-height:1.1; }
.streak-reward-actions { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; }
.streak-reward-actions .level-up-confirm { display:inline-block; text-decoration:none; }
.level-up-confirm.is-outline { border:1px solid var(--orange-325); background:transparent; color:var(--orange-325); }
@media (hover: hover) {
.level-up-confirm.is-outline:hover { background:var(--orange-325); color:var(--text-on-brand); } }
.level-up-medal.is-reward { width:130px; height:130px; }
.level-up-dialog .level-up-reward { display:flex; align-items:center; gap:10px; margin:0 0 14px; padding:12px 14px; border-radius:16px; background:var(--surface); line-height:1.8; text-align:right; }
.level-up-reward img { width:40px; height:40px; flex:none; object-fit:contain; }

/* Source: coach-review.css */
.coach-review-page {
    min-height: 100vh;
    background: var(--surface-page);
}

@media (min-width: 768px) {
    .coach-review-page .nav-menu > a,
    .coach-review-page .nav-dropdown-toggle {
        color: var(--text-primary);
    }

    @media (hover: hover) {

    .coach-review-page .nav-menu > a:hover {
        color: var(--dark-text, var(--green));
    }
    }
}

.coach-review {
    width: min(760px, calc(100% - 32px));
    margin: 0 auto 80px;
    padding-top: 40px;
}

.coach-review-hero {
    display: flex;
    flex-direction: row-reverse;
    align-items: flex-start;
    gap: 24px;
    padding: 12px 8px 70px;
    color: var(--text-primary);
}

.coach-review-avatar {
    display: grid;
    flex-shrink: 0;
    width: 96px;
    height: 96px;
    place-items: center;
    overflow: hidden;
    border: 3px solid rgba(255, 255, 255, .8);
    border-radius: 50%;
    background: var(--sage-150);
    color: var(--text-primary);
    font-size: 34px;
    font-weight: 800;
}

.coach-review-heading {
    flex: 1;
    text-align: right;
}

.coach-review-heading h1 {
    margin: 0 0 10px;
    font-size: 32px;
    font-weight: 800;
}

.coach-review-heading > p {
    margin: 0 0 18px;
    color: var(--text-primary);
    font-size: 16px;
}

.coach-review-badge {
    display: inline-flex;
    padding: 7px 18px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 800;
}

.coach-review-badge.is-pending {
    background: var(--yellow-175);
    color: #9b6812;
}

.coach-review-badge.is-confirmed {
    background: var(--green-75);
    color: var(--dark-text, var(--green-525));
}

.coach-review-badge.is-cancelled {
    background: var(--red-100);
    color: #b94b4b;
}

.coach-review-app-number {
    margin: 12px 0 0;
    color: var(--dark-text, #3f5b53);
    font-size: 14px;
    letter-spacing: .03em;
    text-align: right;
    direction: ltr;
}

.coach-review-card {
    margin-top: -50px;
    padding: 34px 38px;
    border-radius: 24px;
    background: var(--surface);
    box-shadow: 0 18px 40px rgba(0, 0, 0, .14);
}

.coach-review-card h2 {
    margin: 0 0 26px;
    color: var(--text-primary);
    font-size: 19px;
}

.coach-review-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}

.coach-review-step {
    position: relative;
    display: flex;
    gap: 18px;
    padding-bottom: 30px;
}

.coach-review-step:last-child {
    padding-bottom: 0;
}

.coach-review-step::before {
    content: "";
    position: absolute;
    top: 30px;
    right: 14px;
    bottom: 0;
    width: 2px;
    background: var(--sage-200);
}

.coach-review-step:last-child::before {
    display: none;
}

.coach-review-step-icon {
    position: relative;
    z-index: 1;
    display: grid;
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    place-items: center;
    border-radius: 50%;
    background: var(--sage-100);
    color: var(--gray-400);
    font-size: 13px;
    font-weight: 800;
}

.coach-review-step.is-done .coach-review-step-icon {
    background: var(--green);
    color: var(--text-on-brand);
}

.coach-review-step.is-active .coach-review-step-icon {
    background: var(--yellow);
    color: #7a5c00;
}

.coach-review-step.is-rejected .coach-review-step-icon {
    background: var(--red-225);
    color: var(--text-on-brand);
}

.coach-review-step-body {
    padding-top: 2px;
}

.coach-review-step-title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 4px;
    color: var(--gray-900);
    font-size: 15px;
    font-weight: 800;
}

.coach-review-step.is-upcoming .coach-review-step-title,
.coach-review-step.is-upcoming .coach-review-step-desc {
    color: var(--gray-175);
}

.coach-review-step-tag {
    display: inline-flex;
    padding: 3px 10px;
    border-radius: 12px;
    background: var(--yellow-175);
    color: #9b6812;
    font-size: 11px;
    font-weight: 800;
}

.coach-review-step-desc {
    margin: 0;
    color: var(--sage-700);
    font-size: 13px;
    line-height: 1.6;
}

@media (max-width: 640px) {
    .coach-review-hero {
        flex-direction: column;
        align-items: center;
        padding-bottom: 60px;
        text-align: center;
    }

    .coach-review-heading {
        text-align: center;
    }

    .coach-review-card {
        padding: 24px 20px;
    }
}

/* =========================================================
   CONTRACT SIGNING
========================================================= */

.coach-review-sign {
    width: min(980px, calc(100% - 32px));
}

.coach-sign-approved-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: -30px;
    padding: 22px 30px;
    border-radius: 18px;
    background: linear-gradient(100deg, #06392f 0%, #1c7a52 100%);
    color: var(--text-on-brand);
    box-shadow: 0 14px 30px rgba(0, 0, 0, .18);
}

.coach-sign-approved-banner strong {
    display: block;
    margin-bottom: 4px;
    font-size: 16px;
}

.coach-sign-approved-banner p {
    margin: 0;
    color: rgba(255, 255, 255, .82);
    font-size: 13px;
}

.coach-sign-approved-icon {
    display: grid;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .15);
    font-size: 18px;
}

.coach-sign-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
    margin-top: 22px;
}

.coach-sign-card {
    padding: 26px 28px;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .08);
}

.coach-sign-card h2 {
    margin: 0 0 16px;
    color: var(--text-primary);
    font-size: 16px;
}

.coach-sign-document {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border: 1px solid var(--sage-150);
    border-radius: 14px;
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease;
}

@media (hover: hover) {

.coach-sign-document:hover {
    border-color: var(--green);
}
}

.coach-sign-document-icon {
    font-size: 22px;
}

.coach-sign-document-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.coach-sign-document-info strong {
    overflow: hidden;
    color: var(--gray-900);
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.coach-sign-document-info small {
    color: var(--gray-400);
    font-size: 11px;
}

.coach-sign-document-download {
    flex-shrink: 0;
    color: var(--dark-text, var(--green));
    font-size: 18px;
}

.coach-sign-preview {
    height: 160px;
    overflow: hidden;
    border: 1px solid var(--sage-150);
    border-radius: 14px;
    background: var(--surface-page);
}

.coach-sign-preview iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.coach-sign-parties {
    display: grid;
    gap: 10px;
    margin-top: 16px;
}

.coach-sign-party {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    font-size: 13px;
    font-weight: 700;
    color: var(--gray-775);
}

.coach-sign-agreements {
    display: grid;
    gap: 10px;
    margin-top: 22px;
}

.coach-sign-details {
    margin-top: 22px;
}

.coach-sign-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
    gap: 18px;
}

.coach-sign-field-column {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 18px;
}

.coach-sign-fields label {
    display: grid;
    gap: 7px;
    color: var(--gray-775);
    font-size: 13px;
    font-weight: 700;
}

.coach-sign-fields input,
.coach-sign-fields select {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--sage-200);
    border-radius: 12px;
    background: var(--surface);
    font: inherit;
}

.coach-sign-fields input:focus,
.coach-sign-fields select:focus {
    border-color: var(--input-focus);
    outline: 3px solid var(--input-focus-ring);
}

.coach-sign-fields input.field-is-valid:not([type="file"]) {
    border-color: rgba(21, 148, 71, .55);
    background-color: var(--sage-50);
}

.coach-sign-fields input.field-is-invalid {
    border-color: var(--red-325);
    background-color: var(--red-50);
    outline-color: rgba(216, 70, 70, .1);
}

.coach-sign-fields .field-validation-message {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--dark-text, #c93636);
    font-size: 11px;
    font-weight: 600;
}

.coach-sign-fields .field-validation-message::before {
    content: "!";
    display: inline-grid;
    width: 16px;
    height: 16px;
    place-items: center;
    border-radius: 50%;
    background: rgba(216, 70, 70, .12);
    font-size: 10px;
    font-weight: 900;
}

.coach-sign-fields .field-validation-message[hidden] {
    display: none;
}

.coach-sign-fields input[type="file"] {
    padding: 9px;
    font-weight: 400;
}

.coach-sign-fields small {
    color: var(--gray-400);
    font-size: 11px;
    font-weight: 400;
}

.iban-bank-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(21, 148, 71, .22);
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(21, 148, 71, .1), rgba(21, 148, 71, .035));
    color: var(--dark-text, var(--green-650));
}

.iban-bank-card[hidden] {
    display: none;
}

.iban-bank-icon {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border-radius: 12px;
    background: var(--green);
    color: var(--text-on-brand);
    box-shadow: 0 5px 14px rgba(21, 148, 71, .2);
}

.iban-bank-icon svg {
    width: 22px;
    height: 22px;
}

.iban-bank-details {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.iban-bank-details small {
    color: #5d7767;
    font-size: 10px;
}

.iban-bank-details strong {
    overflow: hidden;
    color: var(--dark-text, #174c2d);
    font-size: 14px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.iban-bank-code {
    flex: 0 0 auto;
    padding: 5px 9px;
    border-radius: 999px;
    background: rgba(21, 148, 71, .12);
    color: var(--dark-text, var(--green-650));
    font-size: 11px;
    font-weight: 800;
}

.freelance-platform-link {
    display: flex;
    grid-column: 1 / -1;
    align-items: center;
    gap: 7px;
    padding: 11px 14px;
    border: 1px solid var(--sage-150);
    border-radius: 12px;
    background: var(--surface-page);
    color: var(--gray-625);
    font-size: 12px;
}

.freelance-platform-link > span:first-child {
    display: grid;
    width: 24px;
    height: 24px;
    place-items: center;
    border-radius: 7px;
    background: rgba(21, 148, 71, .1);
    color: var(--dark-text, var(--green));
    font-size: 14px;
    font-weight: 800;
}

.freelance-platform-link a {
    color: var(--dark-text, var(--green-575));
    font-weight: 800;
    text-decoration: none;
}

@media (hover: hover) {

.freelance-platform-link a:hover {
    text-decoration: underline;
}
}

.coach-sign-fields .select2-container--default .select2-selection--single {
    height: 46px;
    border: 1px solid var(--sage-200);
    border-radius: 12px;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 12px 8px;
}

.coach-sign-fields .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

.coach-sign-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 14px;
    padding-left: 36px;
    color: var(--gray-900);
    font: inherit;
    line-height: 44px;
}

.coach-sign-fields .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gray-275);
}

.coach-sign-fields .select2-container--default.select2-container--focus .select2-selection--single,
.coach-sign-fields .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

.coach-sign-agreement {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 14px;
    background: var(--surface);
    color: var(--gray-775);
    font-size: 13px;
    cursor: pointer;
}

.coach-sign-agreement input {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    accent-color: var(--green);
}

.coach-sign-button {
    display: block;
    width: 100%;
    margin-top: 18px;
    padding: 16px;
    border: 0;
    border-radius: 16px;
    background: var(--orange);
    color: var(--text-on-brand);
    font-family: "Cairo", sans-serif;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: opacity .15s ease;
}

.coach-sign-button:disabled {
    background: var(--gray-50);
    cursor: not-allowed;
}

.coach-sign-modal[hidden] {
    display: none;
}

.coach-sign-modal {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: grid;
    place-items: center;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
}

.coach-sign-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, .55);
}

.coach-sign-modal-dialog {
    position: relative;
    width: min(520px, 100%);
    overflow: hidden;
    border-radius: 20px;
    background: var(--surface);
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}

.coach-sign-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 22px;
    background: var(--orange);
    color: var(--text-on-brand);
}

.coach-sign-modal-header h2 {
    margin: 0;
    font-size: 16px;
}

.coach-sign-modal-close {
    border: 0;
    background: transparent;
    color: var(--text-on-brand);
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
}

.coach-sign-canvas-wrap {
    margin: 24px;
    border: 1px dashed var(--sage-275);
    border-radius: 14px;
    background: var(--surface);
}

.coach-sign-canvas-wrap canvas {
    display: block;
    width: 100%;
    height: 220px;
    touch-action: none;
    cursor: crosshair;
}

.coach-sign-modal-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px 24px;
}

.coach-sign-confirm {
    padding: 13px 28px;
    border: 0;
    border-radius: 24px;
    background: var(--orange);
    color: var(--text-on-brand);
    font-family: "Cairo", sans-serif;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
}

.coach-sign-confirm:disabled {
    opacity: .7;
    cursor: wait;
}

.coach-sign-clear {
    border: 0;
    background: transparent;
    color: var(--gray-400);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}

.coach-sign-modal-error {
    margin: 0 24px 20px;
    color: #b94b4b;
    font-size: 13px;
}

@media (max-width: 720px) {
    .coach-sign-grid {
        grid-template-columns: 1fr;
    }

    .coach-sign-fields {
        grid-template-columns: 1fr;
    }

    .coach-sign-approved-banner {
        flex-direction: column;
        align-items: flex-start;
        text-align: right;
    }
}

/* Source: login.css (scoped) */
body.login-page,body.login-page {
            margin: 0;
            width: 100%;
            height: 100%;
        }

        body.login-page {
            font-family: "Cairo", sans-serif;
            background: var(--green-light);
            overflow-x: hidden;
        }

        body.login-page .login-page {
            position: relative;

            width: 100vw;
            min-height: 100vh;
            min-height: 100dvh;
            padding-block: 24px;
            display: flex;
            align-items: center;
            justify-content: flex-end;

            background: var(--green-light);
        }

        /*
        |--------------------------------------------------------------------------
        | Background artwork
        |--------------------------------------------------------------------------
        */

        body.login-page .background {
            position: absolute;
            inset: 0;

            background-image: url(/images/bg.png);
            background-repeat: no-repeat;
            background-size: cover;
            background-position: center;

            z-index: 1;
        }

        /*
        |--------------------------------------------------------------------------
        | CARD
        |--------------------------------------------------------------------------
        */

body.login-page .login-card {
    position: relative;
    margin-block: auto;
    margin-left: 11.8%;

    width: min(500px, 35vw);
    min-height: 640px;

    padding: 30px 40px 35px;

    background: var(--surface);

    border-radius: 25px;

    box-shadow:
        0 8px 10px rgba(0, 0, 0, 0.28);

    z-index: 10;
}

body.login-page .login-home-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 18px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 800;
    text-decoration: none;
}

body.login-page .login-home-link svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.login-page .login-home-link:focus-visible {
    color: var(--dark-text, var(--green));
}

@media (hover: hover) {

body.login-page .login-home-link:hover {
    color: var(--dark-text, var(--green));
}
}

        /*
        |--------------------------------------------------------------------------
        | TITLE
        |--------------------------------------------------------------------------
        */

        body.login-page .login-title {
            margin: 0;

            padding: 0;

            text-align: center;

            color: var(--dark-text, var(--green));

            font-size: 24px;
            font-weight: 800;

            line-height: 1.5;
        }

        /*
        |--------------------------------------------------------------------------
        | FORM
        |--------------------------------------------------------------------------
        */

        body.login-page .login-form {
            width: 100%;
            margin-top: 45px;
            direction: rtl;
        }

        body.login-page .password-reset-intro {
            margin: 18px 0 0;
            color: var(--sage-700);
            font-size: 14px;
            line-height: 1.9;
            text-align: center;
        }

        body.login-page .password-reset-form .email-field {
            margin-bottom: 0;
        }

        body.login-page .password-reset-form .login-button {
            margin-top: 28px;
        }

        /*
        |--------------------------------------------------------------------------
        | LABEL
        |--------------------------------------------------------------------------
        */

        body.login-page .login-label {
            display: block;

            margin-bottom: 7px;

            padding-right: 5px;

            color: var(--dark-text, var(--text-dark));

            font-size: 18px;
            font-weight: 700;

            text-align: right;
        }

        /*
        |--------------------------------------------------------------------------
        | INPUT
        |--------------------------------------------------------------------------
        */

        body.login-page .login-input {
            display: block;
            width: 100%;
            height: 49px;

            border: 1px solid #E2E8F0;

            border-radius: 30px;

            padding: 6px 18px;

            background: var(--surface);

            color: var(--dark-text, var(--text-dark));

            font-family: "Cairo", sans-serif;

            font-size: 15px;

            direction: rtl;
            text-align: right;

            box-shadow: none !important;
        }

        body.login-page .login-input:focus {
            border-color: var(--input-focus);

            box-shadow: none !important;
        }

        /*
        |--------------------------------------------------------------------------
        | FIELD SPACING
        |--------------------------------------------------------------------------
        */

        body.login-page .email-field {
            margin-bottom: 37px;
        }

        body.login-page .password-field {
            margin-bottom: 0;
        }

        /*
        |--------------------------------------------------------------------------
        | IDENTIFIER TABS (national ID / email)
        |--------------------------------------------------------------------------
        */

        body.login-page .login-id-tabs {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 24px;
            align-items: end;
            margin-bottom: 14px;
        }

        body.login-page .login-id-tab {
            width: 100%;
            padding: 0 0 10px;
            border: 0;
            border-bottom: 2px solid transparent;
            background: transparent;
            color: var(--gray-400);
            font-family: "Cairo", sans-serif;
            font-size: 16px;
            font-weight: 800;
            line-height: 1.6;
            text-align: center;
            cursor: pointer;
            transition: color .15s ease, border-color .15s ease;
        }

        @media (hover: hover) {

        body.login-page .login-id-tab:hover {
            color: var(--dark-text, var(--text-dark));
        }
}

        body.login-page .login-id-tab.is-active {
            color: var(--orange);
            border-bottom-color: var(--orange);
        }

        body.login-page .login-id-input-wrap {
            position: relative;
        }

        /*
        | Physical (not logical) side on purpose: browsers force
        | `direction: ltr` on `type="email"` inputs regardless of the
        | page's dir="rtl", which would flip a logical `padding-inline-end`
        | to the opposite physical side depending on the active tab. The
        | icon below is a sibling element unaffected by the input's own
        | direction, so it always sits on the same physical side — this
        | padding has to match it unconditionally.
        */
        body.login-page .login-id-input-wrap .login-input {
            padding-left: 46px;
        }

        body.login-page .login-id-input-wrap .login-input[type="email"]:not(:placeholder-shown) {
            direction: ltr;
            text-align: left;
        }

        body.login-page .login-id-icon {
            position: absolute;
            top: 50%;
            left: 16px;
            transform: translateY(-50%);
            display: grid;
            place-items: center;
            color: var(--gray-400);
            pointer-events: none;
        }

        body.login-page .login-id-icon svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: currentColor;
            stroke-width: 1.8;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /*
        |--------------------------------------------------------------------------
        | FORGOT PASSWORD
        |--------------------------------------------------------------------------
        */

        body.login-page .forgot-password {
            display: block;

            margin-top: 12px;

            color: var(--orange);

            font-size: 12px;
            font-weight: 700;

            text-align: right;

            text-decoration: underline;
        }

        /*
        |--------------------------------------------------------------------------
        | LOGIN BUTTON
        |--------------------------------------------------------------------------
        */

        body.login-page .login-button {
            width: 100%;

            height: 49px;

            margin-top: 67px;

            padding: 0;

            border: none;

            border-radius: 30px;

            background: var(--orange);

            color: var(--text-on-brand);

            font-family: "Cairo", sans-serif;

            font-size: 19px;
            font-weight: 800;

            box-shadow:
                0 3px 5px rgba(0, 0, 0, 0.25);
        }

        @media (hover: hover) {

        body.login-page .login-button:hover {
            background: #e95109;

            color: var(--text-on-brand);
        }
}

        /*
        |--------------------------------------------------------------------------
        | REGISTER
        |--------------------------------------------------------------------------
        */

        body.login-page .register-section {
    margin-top: 25px;
    text-align: center;
}

body.login-page .register-text {
    margin-bottom: 12px;

    color: var(--dark-text, var(--text-dark));
    font-size: 13px;
    font-weight: 700;
}

body.login-page .register-sheet-open,body.login-page .register-sheet-close,body.login-page .register-sheet-title,body.login-page .register-sheet-backdrop {
    display: none;
}

body.login-page .register-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    margin-bottom: 10px;
}

body.login-page .register-buttons:has(>:only-child) {
    grid-template-columns: 1fr;
}

body.login-page .register-button {
    min-width: 0;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #E2E8F0;
    border-radius: 30px;
    background: var(--surface);
    color: var(--dark-text, var(--green));
    font-family: "Cairo", sans-serif;
    font-size: 14px;
    font-weight: 800;
    text-decoration: none;
    line-height: 1.45;
    text-align: center;
    white-space: normal;
    transition: .2s ease;
}

@media (hover: hover) {

body.login-page .register-button:hover {
    background: var(--sage-50);
    color: var(--dark-text, var(--green));
    transform: translateY(-1px);
}
}

        /*
        |--------------------------------------------------------------------------
        | RESPONSIVE
        |--------------------------------------------------------------------------
        */

       @media (max-width: 1100px) {

    body.login-page .login-card {
        margin-left: 7%;

        width: 440px;
        min-height: 600px;
    }
}

        @media (max-width: 767px) {

    body.login-page {
        overflow-y: auto;
    }

    body.login-page .login-page {
        min-height: 100vh;
        min-height: 100dvh;
        height: auto;

        padding: 24px 20px;

        display: flex;
        align-items: center;
        justify-content: center;
    }

    body.login-page .login-card {
        margin-inline: auto;

        width: 100%;
        max-width: 450px;

        min-height: auto;

        padding: 30px 25px;
    }

    body.login-page .login-id-tabs {
        gap: 12px;
    }

    body.login-page .login-id-tab {
        font-size: 14px;
    }

    body.login-page .register-button {
        padding-inline: 6px;
        font-size: 12px;
    }
}

@media (max-width: 380px) {
    body.login-page .login-page {
        padding-inline: 12px;
    }

    body.login-page .login-card {
        padding-inline: 20px;
    }

    body.login-page .login-id-tabs {
        gap: 8px;
    }

    body.login-page .register-buttons {
        gap: 6px;
    }
}

/* =========================================================
   NAVBAR
========================================================= */

body.login-page .site-header {
    position: relative;
    z-index: 1000;

    min-height: 95px;
    padding: 15px 3.5%;

    display: flex;
    align-items: center;

    color: var(--text-on-brand);
}

body.login-page .logo-link {
    display: block;
    flex: 0 0 auto;

    text-decoration: none;
}

body.login-page .logo {
    display: block;

    width: 100px;
    height: auto;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

body.login-page .nav-wrapper {
    width: 100%;

    display: flex;
    align-items: center;
}

body.login-page .nav-menu {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 30px;

    margin-right: auto;
    margin-left: auto;
}

body.login-page .nav-menu a {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 38px;

    padding: 5px 0;

    color: var(--text-on-brand);

    font-size: 18px;
    font-weight: 500;

    line-height: 1.4;

    text-decoration: none;
    white-space: nowrap;

    transition:
        color .15s ease,
        background-color .15s ease;
}

@media (hover: hover) {

body.login-page .nav-menu a:hover {
    color: var(--yellow);
}
}

body.login-page .nav-menu a:focus-visible {
    outline: 3px solid rgba(255, 210, 26, .8);
    outline-offset: 4px;

    border-radius: 8px;
}

body.login-page .nav-menu .active {
    padding: 5px 22px;

    border-radius: 30px;

    background: var(--yellow);
    color: var(--green-dark);

    font-weight: 800;
}

@media (hover: hover) {

body.login-page .nav-menu .active:hover {
    color: var(--dark-text, var(--green-dark));
}
}


/* =========================================================
   LANGUAGE
========================================================= */

body.login-page .language {
    display: flex;
    align-items: center;

    margin-right: 20px;

    color: var(--text-on-brand);

    font-size: 13px;
    font-weight: 700;

    white-space: nowrap;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

body.login-page .auth-button {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 10px;

    min-width: 170px;
    height: 50px;

    padding: 0 18px;

    border-radius: 30px 0 0 30px;

    background: #2989dc;
    color: var(--text-on-brand);

    font-size: 18px;

    text-decoration: none;
    white-space: nowrap;

    transition: background-color .15s ease;
}

@media (hover: hover) {

body.login-page .auth-button:hover {
    background: var(--blue-725);
    color: var(--text-on-brand);
}
}

body.login-page .auth-button:focus-visible {
    outline: 3px solid rgba(255, 255, 255, .8);
    outline-offset: 3px;
}

body.login-page .auth-icon {
    width: 36px;
    height: 36px;

    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    border-radius: 50%;

    background: var(--surface);
    color: #2989dc;

    font-size: 18px;
}


/* =========================================================
   MOBILE TOGGLE
========================================================= */

body.login-page .navbar-toggler {
    display: none;

    width: 45px;
    height: 42px;

    margin: 0;
    padding: 0;

    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 8px;

    background: transparent;
    color: var(--text-on-brand);

    align-items: center;
    justify-content: center;

    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {

body.login-page .navbar-toggler:hover {
    background: rgba(255, 255, 255, .08);
}
}

body.login-page .navbar-toggler:focus {
    outline: none;
}

body.login-page .navbar-toggler:focus-visible {
    outline: 3px solid rgba(255, 210, 26, .9);
    outline-offset: 3px;
}

body.login-page .menu-icon,body.login-page .close-icon {
    pointer-events: none;

    font-family: Arial, sans-serif;
    line-height: 1;
    text-align: center;
}

body.login-page .menu-icon {
    display: block;
    font-size: 28px;
}

body.login-page .close-icon {
    display: none;
    font-size: 34px;
}

body.login-page .navbar-toggler.is-open .menu-icon {
    display: none;
}

body.login-page .navbar-toggler.is-open .close-icon {
    display: block;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    body.login-page .nav-menu {
        gap: 15px;
    }

    body.login-page .nav-menu a {
        font-size: 14px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    body.login-page .site-header {
        position: relative;
        z-index: 1000;

        min-height: 75px;

        padding: 12px 18px;

        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    body.login-page .logo {
        width: 80px;
    }


    /* ---------------------------------------------------------
       MENU BUTTON
    --------------------------------------------------------- */

    body.login-page .navbar-toggler {
        position: relative;
        z-index: 1101;

        display: flex;

        width: 45px;
        height: 42px;
    }


    /* ---------------------------------------------------------
       MOBILE NAVIGATION
    --------------------------------------------------------- */

    body.login-page .nav-wrapper {
        position: fixed;

        top: 0;
        left: 0;

        z-index: 1050;

        width: 100%;
        height: 100dvh;

        display: none;

        flex-direction: column;
        align-items: stretch;

        padding: calc(90px + env(safe-area-inset-top)) calc(20px + env(safe-area-inset-right)) calc(30px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));

        margin: 0;

        background: var(--green-dark);

        overflow-y: auto;

        box-shadow:
            0 10px 30px rgba(0, 0, 0, .3);
    }

    body.login-page .nav-wrapper.is-open {
        display: flex;
    }


    /* ---------------------------------------------------------
       MOBILE LINKS
    --------------------------------------------------------- */

    body.login-page .nav-menu {
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: stretch;

        gap: 5px;

        margin: 0;
    }

    body.login-page .nav-menu a {
        width: 100%;

        min-height: 48px;

        padding: 12px 18px;

        display: flex;
        align-items: center;

        border-radius: 10px;

        color: var(--text-on-brand);

        font-size: 16px;

        text-align: right;
        text-decoration: none;
    }

    @media (hover: hover) {

    body.login-page .nav-menu a:hover {
        background: rgba(255, 255, 255, .08);
    }
            }

    body.login-page .nav-menu .active {
        padding: 12px 18px;

        background: var(--yellow);
        color: var(--green-dark);
    }


    /* ---------------------------------------------------------
       LANGUAGE
    --------------------------------------------------------- */

    body.login-page .language {
        justify-content: flex-start;

        margin: 15px 0 0;
        padding: 15px 18px;

        border-top:
            1px solid rgba(255, 255, 255, .15);

        color: var(--text-on-brand);
    }


    /* ---------------------------------------------------------
       LOGIN
    --------------------------------------------------------- */

    body.login-page .auth-button {
        width: 100%;
        min-width: 0;

        height: 50px;

        margin-top: 15px;

        border-radius: 30px;

        justify-content: center;

        font-size: 15px;
    }
}
body.login-page .login-status-modal{position:fixed;inset:0;z-index:3000;display:grid;place-items:center;padding:max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(20px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left))}body.login-page .login-status-backdrop{position:absolute;inset:0;background:rgba(0,35,29,.78);backdrop-filter:blur(5px)}body.login-page .login-status-dialog{position:relative;width:min(480px,100%);padding:38px 28px 28px;border:2px solid var(--red-275);border-radius:26px;background:var(--surface-page);color:var(--text-primary);text-align:center;box-shadow:0 24px 65px rgba(0,0,0,.42)}body.login-page .login-status-close{position:absolute;top:14px;left:14px;width:36px;height:36px;border:0;border-radius:50%;background:var(--surface);color:var(--text-primary);font-size:25px}body.login-page .login-status-icon{display:grid;width:64px;height:64px;margin:0 auto 16px;place-items:center;border-radius:50%;background:var(--red-275);color:var(--text-on-brand);font-size:36px;font-weight:900}body.login-page .login-status-dialog h2{margin:0 0 10px;font-size:25px}body.login-page .login-status-dialog p{margin:0 0 24px;color:var(--sage-750);line-height:1.8}body.login-page .login-status-confirm{min-width:160px;padding:11px 24px;border:0;border-radius:23px;background:var(--green-800);color:var(--text-on-brand);font:inherit;font-weight:800}
body.login-page .login-status-actions{display:grid;gap:10px}body.login-page .login-status-actions button{width:100%;min-height:46px;padding:10px 18px;border-radius:24px;font:inherit;font-weight:800;cursor:pointer}body.login-page .login-status-resend{border:1px solid #4e8fee;background:#4e8fee;color:var(--text-on-brand)}body.login-page .login-status-confirm{border:1px solid var(--green-800)}@media (hover: hover) {body.login-page .login-status-resend:hover{filter:brightness(.95)}
}

/* Phones: the login status popup opens as a bottom sheet. */
@media (max-width: 767px) {
    body.login-page .login-status-modal {
        place-items: end stretch;
        padding: 0;
    }

    body.login-page .login-status-dialog {
        width: 100%;
        padding-bottom: calc(28px + env(safe-area-inset-bottom));
        border-width: 2px 0 0;
        border-radius: 26px 26px 0 0;
        animation: sheet-up .22s ease-out;
    }
}

/* Phones: a native sign-in screen. The artwork becomes a rounded banner at the top with a
   round home button over it; the form sits on plain white with app-style controls. */
@media (max-width: 767px) {
    /* Artwork green, not white: Safari tints the status-bar strip from the body, so the banner runs up behind the clock. .login-page keeps the form white. */
    body.login-page {
        background: var(--green-light);
    }

    /* Exactly one screen tall: the banner gives up height so the form never scrolls. */
    body.login-page .login-page {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        height: 100dvh;
        min-height: 0;
        padding: 0;
        background: var(--surface);
    }

    body.login-page .background {
        position: relative;
        flex: 0 1 30dvh;
        min-height: 96px;
        border-radius: 0 0 32px 32px;
        background-color: var(--green-light);
        background-position: 62% 40%;
        background-size: auto 150%;
    }

    body.login-page .login-card {
        position: static;
        flex: 1 0 auto;
        width: 100%;
        max-width: none;
        min-height: 0;
        margin: 0;
        padding: 20px calc(20px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
        border-radius: 0;
        box-shadow: none;
    }

    body.login-page .login-home-link {
        position: absolute;
        top: calc(12px + env(safe-area-inset-top));
        right: 16px;
        z-index: 2;
        display: flex;
        width: 40px;
        height: 40px;
        margin: 0;
        align-items: center;
        justify-content: center;
        gap: 0;
        padding: 0;
        border-radius: 50%;
        background: rgba(23, 79, 67, .45);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        color: var(--text-on-brand);
        font-size: 0;
        line-height: 0;
    }

    body.login-page .login-home-link svg {
        display: block;
        width: 21px;
        height: 21px;
        stroke-width: 2.2;
    }

    body.login-page .login-title {
        color: var(--text-primary);
        font-size: 22px;
        text-align: right;
    }

    body.login-page .login-form {
        margin-top: 14px;
    }

    body.login-page .login-id-tabs {
        gap: 4px;
        margin-bottom: 10px;
        padding: 4px;
        border-radius: 14px;
        background: var(--surface-page);
    }

    body.login-page .login-id-tab {
        padding: 9px 6px;
        border: 0;
        border-radius: 11px;
        font-size: 14px;
        line-height: 1.4;
    }

    body.login-page .login-id-tab.is-active {
        background: var(--surface);
        color: var(--text-primary);
        box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
    }

    /* 16px stops iOS from zooming the page when an input is focused. */
    body.login-page .login-input {
        height: 50px;
        border: 1px solid transparent;
        border-radius: 14px;
        background: var(--surface-page);
        font-size: 16px;
    }

    body.login-page .login-input:focus {
        border-color: var(--green-325);
        background: var(--surface);
    }

    body.login-page .email-field {
        margin-bottom: 14px;
    }

    body.login-page .login-label {
        margin-bottom: 4px;
        font-size: 14px;
    }

    body.login-page .forgot-password {
        font-size: 13px;
        text-decoration: none;
    }

    body.login-page .login-button {
        height: 52px;
        margin-top: 18px;
        border-radius: 16px;
        font-size: 18px;
        box-shadow: none;
    }

    body.login-page .register-section {
        margin-top: 16px;
    }

    body.login-page .register-text {
        margin: 0;
        font-size: 14px;
    }

    body.login-page .register-sheet-open {
        display: inline;
        padding: 4px;
        border: 0;
        background: none;
        color: var(--orange);
        font: inherit;
        font-weight: 800;
    }

    body.login-page .register-sheet-backdrop:not([hidden]) {
        position: fixed;
        inset: 0;
        z-index: 20;
        display: block;
        background: rgba(0, 0, 0, .55);
    }

    body.login-page .register-sheet {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 21;
        display: none;
        padding: 52px calc(18px + env(safe-area-inset-right)) calc(20px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));
        border-radius: 24px 24px 0 0;
        background: var(--surface);
        box-shadow: 0 -10px 40px rgba(0, 0, 0, .25);
    }

    body.login-page .register-sheet.is-open {
        display: block;
        animation: sheet-up .22s ease-out;
    }

    body.login-page .register-sheet-close {
        position: absolute;
        top: 10px;
        left: 12px;
        display: grid;
        width: 34px;
        height: 34px;
        place-items: center;
        border: 0;
        border-radius: 50%;
        background: var(--surface-page);
        color: var(--text-primary);
        font-size: 24px;
        line-height: 1;
    }

    body.login-page .register-sheet-title {
        position: absolute;
        top: 14px;
        right: 18px;
        display: block;
        margin: 0;
        color: var(--text-primary);
        font-size: 17px;
        font-weight: 800;
    }

    body.login-page .register-sheet .register-buttons {
        grid-template-columns: 1fr;
        gap: 8px;
        margin-bottom: 8px;
    }

    body.login-page .register-button {
        height: 50px;
        border: 0;
        border-radius: 14px;
        background: var(--surface-page);
        font-size: 13px;
    }
}

/* Phones: form-level alerts float as a card over the banner (so the form never grows
   and scrolls), and field errors get an icon and a tinted field. */
@media (max-width: 767px) {
    body.login-page .login-card .alert {
        position: fixed;
        top: calc(64px + env(safe-area-inset-top));
        right: 16px;
        left: 16px;
        z-index: 30;
        margin: 0 !important;
        padding: 12px 46px 12px 14px;
        border: 0;
        border-radius: 14px;
        background: var(--surface);
        box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
        font-size: 14px;
        font-weight: 700;
        line-height: 1.6;
        animation: login-alert-in .25s ease-out;
    }

    body.login-page .login-card .alert::before {
        position: absolute;
        top: 12px;
        right: 14px;
        display: grid;
        width: 22px;
        height: 22px;
        place-items: center;
        border-radius: 50%;
        color: var(--text-on-brand);
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
    }

    body.login-page .login-card .alert-danger {
        color: var(--red-850);
    }

    body.login-page .login-card .alert-danger::before {
        background: var(--red-675);
        content: "!";
    }

    body.login-page .login-card .alert-success {
        color: var(--dark-text, var(--green-575));
    }

    body.login-page .login-card .alert-success::before {
        background: #16a34a;
        content: "✓";
    }

    body.login-page .login-input.is-invalid {
        border-color: var(--red-675);
        background-color: var(--red-50);
    }

    /* Native apps don't print text under fields: the banner above carries the message and
       the field tints and shakes. !important beats the inline display the login script sets. */
    body.login-page .login-card .invalid-feedback {
        display: none !important;
    }

    body.login-page .login-card .alert {
        transition: opacity .25s ease, transform .25s ease;
    }

    body.login-page .login-card .alert.is-hiding {
        opacity: 0;
        transform: translateY(-16px);
        pointer-events: none;
    }

    body.login-page .login-input.is-shaking {
        animation: login-field-shake .35s ease;
    }
}

@keyframes login-field-shake {
    20%, 60% { transform: translateX(-6px); }
    40%, 80% { transform: translateX(6px); }
}

@keyframes login-alert-in {
    from { opacity: 0; transform: translateY(-12px); }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    body.login-page .login-card .alert,body.login-page .login-input.is-shaking {
        animation: none;
    }
}

/* Remember-me switch + forgot link share one row. */
body.login-page .login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
}

body.login-page .login-options .forgot-password {
    margin: 0;
}

body.login-page .remember-switch {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--dark-text, var(--text-dark));
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    user-select: none;
}

body.login-page .remember-switch input {
    position: relative;
    flex: none;
    width: 42px;
    height: 24px;
    margin: 0;
    border-radius: 12px;
    background: var(--sage-275);
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    transition: background .2s ease;
}

body.login-page .remember-switch input::before {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
    content: "";
    transition: transform .2s ease;
}

body.login-page .remember-switch input:checked {
    background: var(--green-325);
}

/* Page is always RTL: "on" slides the knob to the left, like a mirrored iOS switch. */
body.login-page .remember-switch input:checked::before {
    transform: translateX(-18px);
}

body.login-page .remember-switch input:focus-visible {
    outline: 2px solid var(--green-325);
    outline-offset: 2px;
}

body.login-page .register-button-icon {
    display: none;
}

/* The status modal is filled and shown by JS; its display:grid would beat [hidden]. */
body.login-page .login-status-modal[hidden],body.login-page .login-status-actions[hidden] {
    display: none;
}

/* Submit in flight: label swaps for a spinner. */
body.login-page .login-button.is-loading,body.login-page .login-button.is-loading:disabled {
    position: relative;
    color: transparent;
    opacity: 1;
    pointer-events: none;
}

body.login-page .login-button.is-loading::after {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    margin: auto;
    border: 3px solid rgba(255, 255, 255, .4);
    border-top-color: var(--surface);
    border-radius: 50%;
    content: "";
    animation: login-spin .7s linear infinite;
}

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

/* Phones: app-style bottom CTA, press feedback and a list-style register sheet. */
@media (max-width: 767px) {
    /* The sign-in button sits in the thumb zone at the bottom of the screen. */
    body.login-page .login-card {
        display: flex;
        flex-direction: column;
    }

    body.login-page .login-form {
        display: flex;
        flex: 1 0 auto;
        flex-direction: column;
    }

    body.login-page .login-options {
        margin-bottom: 18px;
    }

    body.login-page .login-form .login-button {
        margin-top: auto;
    }

    body.login-page .login-button,body.login-page .register-button,body.login-page .login-id-tab,body.login-page .register-sheet-close,body.login-page .login-home-link {
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, background-color .12s ease;
    }

    body.login-page .login-button:active,body.login-page .register-button:active {
        transform: scale(.97);
    }

    body.login-page .login-button:active {
        background: #e95109;
    }

    body.login-page .register-button:active {
        background: var(--sage-150);
    }

    body.login-page .remember-switch {
        min-height: 44px;
        font-size: 14px;
    }

    body.login-page .forgot-password {
        padding-block: 12px;
    }

    /* Grabber handle: hints the sheet can be dragged down to close. */
    body.login-page .register-sheet::before {
        position: absolute;
        top: 7px;
        left: 50%;
        width: 36px;
        height: 5px;
        border-radius: 3px;
        background: var(--sage-275);
        content: "";
        transform: translateX(-50%);
    }

    body.login-page .register-sheet {
        transition: transform .2s ease;
    }

    /* Settings-style rows: icon, label, chevron. */
    body.login-page .register-sheet .register-button {
        justify-content: flex-start;
        gap: 12px;
        height: 56px;
        padding-inline: 12px 16px;
        color: var(--text-primary);
        font-size: 15px;
    }

    body.login-page .register-sheet .register-button::after {
        width: 8px;
        height: 8px;
        margin-inline-start: auto;
        border-bottom: 2px solid var(--sage-525);
        border-left: 2px solid var(--sage-525);
        content: "";
        transform: rotate(45deg);
    }

    body.login-page .register-button-icon {
        display: grid;
        flex: none;
        width: 34px;
        height: 34px;
        place-items: center;
        border-radius: 10px;
        background: var(--surface);
        color: var(--dark-text, var(--green));
    }

    body.login-page .register-button-icon svg {
        width: 19px;
        height: 19px;
        fill: none;
        stroke: currentColor;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    body.login-page .login-button:active,body.login-page .register-button:active {
        transform: none;
    }
}

/* Desktop: the tabs already name the ID field, so its label is for screen readers only. */
body.login-page .login-id-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

body.login-page .login-subtitle {
    display: none;
}

/* Phones: the artwork is a hero at the top and the form is a sheet sliding over it;
   fields are filled boxes with the label inset at the top, like native text fields. */
@media (max-width: 767px) {
    /* Grow past one screen on short phones (scroll) instead of clipping the form. */
    body.login-page .login-page {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
    }

    body.login-page .background {
        flex: 0 0 calc(26dvh + 28px);
        min-height: 124px;
        border-radius: 0;
    }

    body.login-page .login-card {
        position: relative;
        z-index: 1;
        margin-top: -28px;
        padding-top: 26px;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    }

    /* Card is now positioned, so pin the home button to the viewport instead. */
    body.login-page .login-home-link {
        position: fixed;
    }

    body.login-page .login-title {
        font-size: 26px;
        line-height: 1.35;
    }

    body.login-page .login-subtitle {
        display: block;
        margin: 4px 0 0;
        color: var(--sage-625);
        font-size: 14px;
        font-weight: 600;
    }

    body.login-page .login-form {
        margin-top: 20px;
    }

    body.login-page .email-field,body.login-page .password-field {
        position: relative;
    }

    body.login-page .email-field {
        margin-bottom: 12px;
    }

    body.login-page .login-label,body.login-page .login-id-label {
        position: absolute;
        top: 7px;
        right: 17px;
        z-index: 2;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
        overflow: visible;
        clip-path: none;
        color: var(--sage-625);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
        pointer-events: none;
        transition: color .15s ease;
    }

    body.login-page .email-field:focus-within .login-label,body.login-page .password-field:focus-within .login-label {
        color: var(--dark-text, var(--green));
    }

    body.login-page .email-field:has(.is-invalid) .login-label,body.login-page .password-field:has(.is-invalid) .login-label {
        color: var(--red-675);
    }

    body.login-page .login-input {
        height: 58px;
        padding-top: 24px;
        padding-bottom: 6px;
        border-radius: 16px;
        line-height: 1.5;
    }

    body.login-page .login-input::placeholder {
        color: var(--gray-175);
        font-size: 15px;
    }

    body.login-page .login-id-icon {
        top: 29px;
    }

    body.login-page .login-button {
        height: 54px;
    }

    /* "Create account" becomes a full-width secondary button under the primary one. */
    body.login-page .register-text {
        display: flex;
        flex-direction: column;
        gap: 8px;
        color: var(--sage-625);
        font-size: 13px;
        font-weight: 600;
    }

    body.login-page .register-sheet-open {
        display: block;
        width: 100%;
        height: 54px;
        padding: 0;
        border: 1.5px solid var(--sage-200);
        border-radius: 16px;
        background: var(--surface);
        color: var(--text-primary);
        font-size: 16px;
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, background-color .12s ease;
    }

    body.login-page .register-sheet-open:active {
        background: var(--surface-page);
        transform: scale(.97);
    }
}

/* Source: register.css (scoped) */
body.register-page .register-page {
    position: relative;

    min-height: 100vh;

    background: var(--green-dark);

    overflow: hidden;
}


/* =========================================================
   BACKGROUND DECORATION
========================================================= */

body.register-page .register-page::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 25%;
    height: 100%;

    background: var(--green-light);

    clip-path: polygon(
        22% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    z-index: 0;

    pointer-events: none;
}


/* =========================================================
   REGISTER CONTAINER
========================================================= */

body.register-page .register-container {
    position: relative;

    z-index: 5;

    width: calc(100% - 100px);

    max-width: 1340px;

    margin: 85px auto 0;
}


/* =========================================================
   REGISTER CARD
========================================================= */

body.register-page .register-card {
    position: relative;

    min-height: 750px;

    padding: 40px 40px 100px;

    background: var(--sage-100);

    border-radius: 42px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, .12);
}




/* =========================================================
   FORM
========================================================= */

body.register-page .player-form {
    padding: 0 15px;
}


/* =========================================================
   FORM ROW
========================================================= */

body.register-page .form-row {
    display: grid;

    grid-template-columns: 1fr 1fr;

    column-gap: 70px;

    row-gap: 28px;

    margin-bottom: 28px;
}


/* =========================================================
   FORM GROUP
========================================================= */

body.register-page .form-group {
    display: grid;

    grid-template-columns: 190px 1fr;

    align-items: center;

    gap: 15px;
}


/* =========================================================
   FORM LABEL
========================================================= */

body.register-page .form-label {
    margin: 0;

    color: var(--dark-text, var(--text-dark));

    font-size: 18px;
    font-weight: 800;

    line-height: 1.5;

    text-align: right;
}

body.register-page .required-marker {
    color: var(--red-450);
    font-style: normal;
}

body.register-page label.required-marker::after,body.register-page legend.required-marker::after,body.register-page .form-label.required-marker::after {
    content: " *";
    color: var(--red-450);
}


/* =========================================================
   INPUT
========================================================= */

body.register-page .player-form .form-control {
    width: 100%;

    height: 44px;

    padding: 4px 18px;

    border: 1px solid var(--gray-675);

    border-radius: 25px;

    background: var(--surface);

    color: var(--text);

    font-family: "Cairo", sans-serif;

    font-size: 15px;

    box-shadow: none;
}

body.register-page .player-form .form-control:focus {
    border-color: var(--input-focus);

    box-shadow:
        0 0 0 3px var(--input-focus-ring);
}


/* =========================================================
   SELECT
========================================================= */

body.register-page .player-form select.form-control {
    cursor: pointer;
}


/* =========================================================
   DATE PICKER
========================================================= */

body.register-page .birth-date-picker {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 8px;
}

body.register-page .birth-date-picker .form-control-custom {
    min-width: 0;
    padding-inline: 12px 32px;
    cursor: pointer;
}

body.register-page .birth-date-picker .form-control-custom:invalid {
    color: var(--gray-275);
}

body.register-page .birth-date-picker.is-invalid .form-control-custom {
    border-color: var(--red-450);
}

body.register-page .name-form-group {
    grid-column: 1 / -1;
}

body.register-page .name-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

body.register-page .name-field {
    min-width: 0;
}

body.register-page .name-fields.is-invalid .form-control-custom {
    border-color: var(--red-450);
}

@media (max-width: 400px) {
    body.register-page .name-fields {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    body.register-page .birth-date-picker {
        grid-template-columns: 1fr 1.15fr 1fr;
        gap: 5px;
    }

    body.register-page .birth-date-picker .form-control-custom {
        padding-inline: 7px 22px;
        font-size: 12px;
    }
}


/* =========================================================
   GENDER
========================================================= */

body.register-page .gender-row {
    display: grid;

    grid-template-columns: 190px 1fr;

    align-items: center;

    gap: 15px;

    margin-bottom: 25px;
}

body.register-page .gender-group {
    display: flex;

    align-items: center;

    gap: 25px;
}


/* =========================================================
   RADIO OPTION
========================================================= */

body.register-page .radio-option {
    display: flex;

    align-items: center;

    gap: 8px;

    color: var(--dark-text, var(--text-dark));

    font-size: 18px;

    cursor: pointer;
}


/* Hide native radio */

body.register-page .radio-option input {
    width: 28px;
    height: 28px;

    margin: 0;

    appearance: none;

    border: 1px solid var(--gray-725);

    border-radius: 50%;

    background: var(--surface);

    cursor: pointer;
}


/* Checked radio */

body.register-page .radio-option input:checked {
    border: 7px solid var(--orange);
}


/* =========================================================
   PARENT / GUARDIAN SECTION
========================================================= */

body.register-page .parent-title {
    margin: 25px 0 18px;

    color: var(--dark-text, var(--text-dark));

    font-size: 21px;
    font-weight: 800;

    line-height: 1.5;

    text-align: right;
}


/* Parent box */

body.register-page .parent-box {
    padding: 20px 30px;

    border: 1px solid var(--gray-775);

    border-radius: 30px;

    background: transparent;
}


/* =========================================================
   CONSENT
========================================================= */

body.register-page .consent {
    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin: 30px 10px 0;

    color: var(--text);

    font-size: 16px;

    line-height: 1.7;

    cursor: pointer;
}


/* Consent checkbox */

body.register-page .consent input {
    flex: 0 0 auto;

    width: 27px;
    height: 27px;

    margin-top: 4px;
    margin-left: 0;

    appearance: none;

    border: 1px solid var(--gray-725);

    border-radius: 50%;

    background: var(--surface);

    cursor: pointer;
}


/* Checked */

body.register-page .consent input:checked {
    border: 7px solid var(--green);
}


/* Consent links */

body.register-page .consent a {
    color: var(--dark-text, var(--green));

    font-weight: 700;

    text-decoration: underline;
}


/* =========================================================
   COACH FORM
========================================================= */

body.register-page .coach-form .parent-title {
    color: var(--dark-text, var(--green));
}

body.register-page .coach-secondary-button {
    width: 100%;
    min-height: 44px;
    border: 0;
    border-radius: 25px;
    background: var(--orange);
    color: var(--text-on-brand);
    font-family: "Cairo", sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
}

body.register-page .registration-otp-message {
    grid-column: 2;
    margin-top: 4px;
    color: var(--dark-text, var(--green));
    font-size: 12px;
}

body.register-page .coach-file-input {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    cursor: pointer;
}

body.register-page .coach-file-input.is-full {
    cursor: not-allowed;
    opacity: 0.6;
}

body.register-page .coach-file-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

body.register-page .coach-file-status {
    color: var(--text);
}

body.register-page .coach-file-button {
    color: var(--dark-text, var(--green-dark));
    font-family: "Cairo", sans-serif;
    font-weight: 700;
}

body.register-page .coach-attachments {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 70px;
    margin-bottom: 28px;
}

body.register-page .coach-preferences {
    margin-top: 35px;
}

body.register-page .coach-preferences select[multiple] {
    min-height: 100px;
    border-radius: 22px;
}

body.register-page .coach-form .select2-container,body.register-page .volunteer-form .select2-container {
    min-width: 0;
    font-family: "Cairo", sans-serif;
}

body.register-page .coach-form .select2-container--default .select2-selection--multiple,body.register-page .volunteer-form .select2-container--default .select2-selection--multiple {
    min-height: 44px;
    padding: 4px 10px;
    border: 1px solid var(--gray-675);
    border-radius: 25px;
    background: var(--surface);
}

body.register-page .coach-form .select2-container--default.select2-container--focus .select2-selection--multiple,body.register-page .volunteer-form .select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

body.register-page .coach-form .select2-container--default .select2-selection--multiple .select2-selection__choice,body.register-page .volunteer-form .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 3px 3px 3px 0;
    padding: 2px 8px 2px 24px;
    border: 0;
    border-radius: 15px;
    background: var(--green-dark);
    color: var(--text-on-brand);
}

body.register-page .coach-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove,body.register-page .volunteer-form .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    right: auto;
    left: 0;
    height: 100%;
    border: 0;
    border-radius: 15px 0 0 15px;
    color: var(--text-on-brand);
}

/* Single-value dropdowns (nationality, city, school, volunteer field, etc.) */

body.register-page .select2-container--default .select2-selection--single {
    height: 48px;
    border: 1px solid var(--sage-275);
    border-radius: 25px;
    background-color: var(--surface);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 18px center;
    background-size: 12px 8px;
}

body.register-page .select2-container--default .select2-selection--single .select2-selection__arrow {
    display: none;
}

body.register-page [dir="rtl"] .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-right: 18px;
    padding-left: 40px;
}

body.register-page .select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--gray-775);
    font: 500 14px "Cairo", sans-serif;
    line-height: 46px;
}

body.register-page .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gray-275);
}

body.register-page .select2-container--default.select2-container--focus .select2-selection--single,body.register-page .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

body.register-page .select2-container--default.select2-container--disabled .select2-selection--single {
    border-color: var(--gray-50);
    background-color: var(--sage-275);
    color: var(--gray-325);
    cursor: not-allowed;
}

body.register-page .form-group.has-error .select2-container--default .select2-selection--single,body.register-page .player-field.has-error .select2-container--default .select2-selection--single,body.register-page select.is-invalid+.select2-container .select2-selection--single {
    border-color: var(--red-175);
}

body.register-page .coach-preferences .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

body.register-page .coach-preferences .select2-selection__rendered::before {
    display: flex;
    align-items: center;
    min-height: 35px;
    padding-right: 6px;
    color: var(--gray-775);
    content: attr(data-summary);
    font-size: 14px;
    font-weight: 500;
}

body.register-page .coach-preferences .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: none !important;
}

body.register-page .coach-preferences .select2-container:not(.select2-container--open) .select2-search--inline {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.register-page .coach-preferences .select2-container:not(.select2-container--open) .select2-selection--multiple,body.register-page .coach-preferences .select2-container:not(.select2-container--open) .select2-selection__rendered {
    height: 44px;
    overflow: hidden !important;
}

body.register-page .coach-preferences .select2-container--open .select2-selection__rendered {
    max-height: 96px;
    overflow-y: auto !important;
}

body.register-page .coach-preferences .select2-container--open .select2-selection__rendered::before {
    display: none;
}

body.register-page .coach-preferences .select2-container--open.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-block !important;
}

body.register-page .coach-conduct-consent {
    margin-top: 12px;
}

body.register-page .coach-schedule-group {
    margin-top: 28px;
}

body.register-page .coach-schedule-hint {
    margin: 10px 0 0;
    padding: 14px 18px;
    border: 1px dashed var(--sage-275);
    border-radius: 16px;
    color: var(--gray-625);
    font-size: 13px;
}

body.register-page .coach-schedule-hint[hidden] {
    display: none;
}

body.register-page .coach-field-schedules {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;
}

body.register-page .coach-field-schedules.is-invalid {
    border-radius: 20px;
    outline: 1px solid var(--red-175);
}

body.register-page .coach-field-schedule {
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--sage-275);
    border-radius: 20px;
}

body.register-page .coach-field-schedule legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: var(--text-primary);
    font-weight: 800;
}

body.register-page .coach-field-schedule-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green-800);
    color: var(--text-on-brand);
    font-size: 12px;
    font-weight: 800;
}

body.register-page .coach-field-schedule .coach-schedule {
    margin-top: 6px;
    padding: 0;
}

body.register-page .coach-schedule {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 6px;
    border-radius: 20px;
    border: 1px solid transparent;
}

body.register-page .coach-schedule.is-invalid {
    border-color: var(--red-175);
}

body.register-page .coach-schedule-day {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 20px;
    border: 1px solid var(--sage-275);
    border-radius: 16px;
    background: var(--surface);
    transition: opacity .2s ease, border-color .2s ease;
}

body.register-page .coach-schedule-day:not(:has(input[data-schedule-toggle]:checked)) {
    opacity: .55;
}

body.register-page .coach-schedule-day.has-error {
    border-color: var(--red-175);
}

body.register-page .coach-schedule-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 100px;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

body.register-page .coach-schedule-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--text-primary);
}

body.register-page .coach-schedule-times {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

body.register-page .coach-schedule-times label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-625);
    font-size: 13px;
}

body.register-page .coach-schedule-times select {
    width: 120px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--sage-275);
    border-radius: 20px;
    background: var(--surface);
    color: var(--gray-775);
    font: 500 14px "Cairo", sans-serif;
    cursor: pointer;
}

body.register-page .coach-schedule-times select:disabled {
    background: var(--sage-100);
    color: var(--gray-100);
    cursor: not-allowed;
}

body.register-page .time-picker-native {
    display: none;
}

body.register-page .time-picker {
    position: relative;
}

body.register-page .time-picker-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    width: 138px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--sage-275);
    border-radius: 20px;
    background: var(--surface);
    color: var(--gray-775);
    font: 600 13px "Cairo", sans-serif;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease;
}

@media (hover: hover) {

body.register-page .time-picker-trigger:hover:not(:disabled) {
    border-color: var(--green);
}
}

body.register-page .time-picker-trigger:focus-visible,body.register-page .time-picker.is-open .time-picker-trigger {
    border-color: var(--green-dark);
    box-shadow: 0 0 0 3px rgba(23, 79, 66, .12);
    outline: none;
}

body.register-page .time-picker-trigger span:first-child {
    direction: ltr;
}

body.register-page .time-picker-trigger span:first-child.is-placeholder {
    color: var(--gray-175);
    font-weight: 500;
}

body.register-page .time-picker-trigger:disabled {
    background: var(--sage-100);
    color: var(--gray-100);
    cursor: not-allowed;
}

body.register-page .time-picker-chevron {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    border-inline-end: 2px solid var(--gray-400);
    border-bottom: 2px solid var(--gray-400);
    transform: rotate(45deg);
    transition: transform .15s ease;
}

body.register-page .time-picker-trigger:disabled .time-picker-chevron {
    border-color: var(--gray-100);
}

body.register-page .time-picker.is-open .time-picker-chevron {
    transform: rotate(225deg);
}

body.register-page .time-picker-panel {
    position: absolute;
    inset-inline-start: 0;
    top: calc(100% + 6px);
    z-index: 20;
    width: 150px;
    max-height: 224px;
    overflow-y: auto;
    padding: 6px;
    border: 1px solid var(--sage-275);
    border-radius: 14px;
    background: var(--surface);
    box-shadow: 0 12px 28px rgba(23, 79, 66, .14);
}

body.register-page .time-picker.opens-up .time-picker-panel {
    top: auto;
    bottom: calc(100% + 6px);
}

body.register-page .time-picker-option {
    padding: 8px 12px;
    border-radius: 10px;
    color: var(--gray-775);
    font: 500 13px "Cairo", sans-serif;
    text-align: center;
    direction: ltr;
    cursor: pointer;
}

body.register-page .time-picker-option:focus-visible {
    background: var(--sage-100);
    outline: none;
}

@media (hover: hover) {

body.register-page .time-picker-option:hover {
    background: var(--sage-100);
    outline: none;
}
}

body.register-page .time-picker-option.is-selected {
    background: var(--green-dark);
    color: var(--text-on-brand);
    font-weight: 700;
}

@media (max-width: 640px) {
    body.register-page .coach-schedule-day {
        flex-direction: column;
        align-items: flex-start;
    }
}

/*
|--------------------------------------------------------------------------
| VOLUNTEER FIELD SCHEDULE (INDEPENDENT COPY OF THE COACH VERSION ABOVE)
|--------------------------------------------------------------------------
| Kept separate from .coach-* so styling one flow can never affect the
| other; only the generic .time-picker-* widget above is shared.
*/

body.register-page .volunteer-preferences {
    margin-top: 35px;
}

body.register-page .volunteer-preferences select[multiple] {
    min-height: 100px;
    border-radius: 22px;
}

body.register-page .volunteer-preferences .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    padding: 0;
}

body.register-page .volunteer-preferences .select2-selection__rendered::before {
    display: flex;
    align-items: center;
    min-height: 35px;
    padding-right: 6px;
    color: var(--gray-775);
    content: attr(data-summary);
    font-size: 14px;
    font-weight: 500;
}

body.register-page .volunteer-preferences .select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: none !important;
}

body.register-page .volunteer-preferences .select2-container:not(.select2-container--open) .select2-search--inline {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.register-page .volunteer-preferences .select2-container:not(.select2-container--open) .select2-selection--multiple,body.register-page .volunteer-preferences .select2-container:not(.select2-container--open) .select2-selection__rendered {
    height: 44px;
    overflow: hidden !important;
}

body.register-page .volunteer-preferences .select2-container--open .select2-selection__rendered {
    max-height: 96px;
    overflow-y: auto !important;
}

body.register-page .volunteer-preferences .select2-container--open .select2-selection__rendered::before {
    display: none;
}

body.register-page .volunteer-preferences .select2-container--open.select2-container--default .select2-selection--multiple .select2-selection__choice {
    display: inline-block !important;
}

body.register-page .volunteer-schedule-group {
    margin-top: 28px;
}

body.register-page .volunteer-schedule-hint {
    margin: 10px 0 0;
    padding: 14px 18px;
    border: 1px dashed var(--sage-275);
    border-radius: 16px;
    color: var(--gray-625);
    font-size: 13px;
}

body.register-page .volunteer-schedule-hint[hidden] {
    display: none;
}

body.register-page .volunteer-field-schedules {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 10px;
}

body.register-page .volunteer-field-schedules.is-invalid {
    border-radius: 20px;
    outline: 1px solid var(--red-175);
}

body.register-page .volunteer-field-schedule {
    margin: 0;
    padding: 14px 16px 16px;
    border: 1px solid var(--sage-275);
    border-radius: 20px;
}

body.register-page .volunteer-field-schedule legend {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 8px;
    color: var(--text-primary);
    font-weight: 800;
}

body.register-page .volunteer-field-schedule-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--green-800);
    color: var(--text-on-brand);
    font-size: 12px;
    font-weight: 800;
}

body.register-page .volunteer-field-schedule .volunteer-schedule {
    margin-top: 6px;
    padding: 0;
}

body.register-page .volunteer-field-skills {
    margin: 10px 8px 0;
}

body.register-page .volunteer-schedule {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
    padding: 6px;
    border-radius: 20px;
    border: 1px solid transparent;
}

body.register-page .volunteer-schedule.is-invalid {
    border-color: var(--red-175);
}

body.register-page .volunteer-schedule-day {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 20px;
    border: 1px solid var(--sage-275);
    border-radius: 16px;
    background: var(--surface);
    transition: opacity .2s ease, border-color .2s ease;
}

body.register-page .volunteer-schedule-day:not(:has(input[data-schedule-toggle]:checked)) {
    opacity: .55;
}

body.register-page .volunteer-schedule-day.has-error {
    border-color: var(--red-175);
}

body.register-page .volunteer-schedule-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 100px;
    color: var(--text-primary);
    font-weight: 700;
    cursor: pointer;
}

body.register-page .volunteer-schedule-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--text-primary);
}

body.register-page .volunteer-schedule-times {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px 18px;
}

body.register-page .volunteer-schedule-times label {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--gray-625);
    font-size: 13px;
}

body.register-page .volunteer-schedule-times select {
    width: 120px;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--sage-275);
    border-radius: 20px;
    background: var(--surface);
    color: var(--gray-775);
    font: 500 14px "Cairo", sans-serif;
    cursor: pointer;
}

body.register-page .volunteer-schedule-times select:disabled {
    background: var(--sage-100);
    color: var(--gray-100);
    cursor: not-allowed;
}

@media (max-width: 640px) {
    body.register-page .volunteer-schedule-day {
        flex-direction: column;
        align-items: flex-start;
    }
}

body.register-page .coach-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    margin: 0 auto 45px;
    padding: 0;
    list-style: none;
}

body.register-page .coach-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: var(--gray-175);
    font-size: 14px;
    text-align: center;
}

body.register-page .coach-step::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 0;
    width: 100%;
    height: 2px;
    background: var(--sage-375);
    z-index: 0;
}

body.register-page .coach-step span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--sage-475);
    border-radius: 50%;
    background: var(--sage-100);
    font-weight: 800;
}

body.register-page .coach-step.is-active,body.register-page .coach-step.is-complete {
    color: var(--dark-text, var(--green));
}

body.register-page .coach-step.is-active::before,body.register-page .coach-step.is-complete::before {
    background: var(--green-dark);
}

body.register-page .coach-step.is-active span {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: var(--text-on-brand);
}

body.register-page .coach-step.is-complete span {
    border-color: var(--green-dark);
    background: var(--yellow);
    color: var(--green-dark);
}

body.register-page .coach-two-step {
    padding: 0;
    color: var(--text-primary);
}

body.register-page .coach-two-step .coach-steps {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 34px;
}

body.register-page .coach-two-step .coach-step::before {
    top: 18px;
    right: 50%;
    width: 100%;
    height: 4px;
}

body.register-page .coach-two-step .coach-step:last-child::before {
    right: -50%;
}

body.register-page .coach-two-step .coach-step span {
    width: 38px;
    height: 38px;
}

body.register-page .coach-step-actions {
    margin-top: 22px;
}

/* =========================================================
   VOLUNTEER FORM
========================================================= */

body.register-page .volunteer-steps {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 760px;
    margin: 0 auto 45px;
    padding: 0;
    list-style: none;
}

body.register-page .volunteer-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 7px;
    color: var(--gray-175);
    font-size: 14px;
    text-align: center;
}

body.register-page .volunteer-step::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 0;
    width: 100%;
    height: 2px;
    background: var(--sage-375);
    z-index: 0;
}

body.register-page .volunteer-step span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--sage-475);
    border-radius: 50%;
    background: var(--sage-100);
    font-weight: 800;
}

body.register-page .volunteer-step.is-active,body.register-page .volunteer-step.is-complete {
    color: var(--dark-text, var(--green));
}

body.register-page .volunteer-step.is-active::before,body.register-page .volunteer-step.is-complete::before {
    background: var(--green-dark);
}

body.register-page .volunteer-step.is-active span {
    border-color: var(--green-dark);
    background: var(--green-dark);
    color: var(--text-on-brand);
}

body.register-page .volunteer-step.is-complete span {
    border-color: var(--green-dark);
    background: var(--yellow);
    color: var(--green-dark);
}

body.register-page .volunteer-panel[hidden] {
    display: none;
}

body.register-page .volunteer-intro {
    margin: 0 0 25px;
    color: var(--gray-850);
    font-size: 18px;
    line-height: 1.9;
    text-align: center;
}

body.register-page .volunteer-form .parent-title {
    color: var(--dark-text, var(--green-dark));
}

body.register-page .volunteer-form .form-label small {
    color: #e33;
    font-size: 11px;
    font-weight: 500;
}

body.register-page .volunteer-details-grid {
    margin-top: 35px;
}

body.register-page .volunteer-details-grid select[multiple] {
    min-height: 100px;
    border-radius: 22px;
}

body.register-page .volunteer-declarations {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
}

body.register-page .volunteer-actions {
    margin-top: 25px;
    text-align: right;
}

body.register-page .volunteer-back {
    padding: 9px 24px;
    border: 1px solid var(--green-dark);
    border-radius: 24px;
    background: transparent;
    color: var(--dark-text, var(--green-dark));
    font-family: "Cairo", sans-serif;
    font-weight: 700;
    cursor: pointer;
}

/* Match the volunteer/coach journey to the player registration system. */
body.register-page .register-card:has(.volunteer-two-step),body.register-page .register-card:has(.coach-two-step) {
    min-height: auto;
    padding: 48px 70px 56px;
}

body.register-page .volunteer-two-step {
    padding: 0;
    color: var(--text-primary);
}

body.register-page .volunteer-two-step .volunteer-steps {
    margin-right: auto;
    margin-left: auto;
    margin-bottom: 34px;
}

body.register-page .volunteer-two-step .volunteer-step::before {
    top: 18px;
    right: 50%;
    width: 100%;
    height: 4px;
}

body.register-page .volunteer-two-step .volunteer-step:last-child::before {
    right: -50%;
}

body.register-page .volunteer-two-step .volunteer-step span {
    width: 38px;
    height: 38px;
}

body.register-page .coach-form-frame>p {
    margin: 0 0 28px;
    color: var(--gray-400);
    font-size: 14px;
}

body.register-page .volunteer-form-frame .form-row,body.register-page .volunteer-form-frame .coach-attachments,body.register-page .volunteer-form-frame .volunteer-details-grid,body.register-page .coach-form-frame .form-row,body.register-page .coach-form-frame .coach-attachments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 26px;
    margin: 0 0 28px;
}

body.register-page .volunteer-form-frame .form-group,body.register-page .coach-form-frame .form-group {
    display: block;
    min-width: 0;
}

body.register-page .volunteer-form-frame .form-label,body.register-page .coach-form-frame .form-label {
    display: block;
    margin: 0 4px 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

body.register-page .volunteer-form-frame .form-control-custom,body.register-page .volunteer-form-frame .name-fields input,body.register-page .coach-form-frame .form-control-custom,body.register-page .coach-form-frame .name-fields input {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--sage-275);
    border-radius: 25px;
    outline: 0;
    background: var(--surface);
    color: var(--gray-775);
    font: 500 14px "Cairo", sans-serif;
}

body.register-page .volunteer-form-frame .form-control-custom:focus,body.register-page .volunteer-form-frame .name-fields input:focus,body.register-page .coach-form-frame .form-control-custom:focus,body.register-page .coach-form-frame .name-fields input:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

body.register-page .volunteer-form-frame select.form-control-custom,body.register-page .coach-form-frame select.form-control-custom {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 18px center;
    background-size: 12px 8px;
}

body.register-page .volunteer-form-frame .form-control-custom:disabled,body.register-page .coach-form-frame .form-control-custom:disabled {
    border-color: var(--gray-50);
    background: var(--sage-275);
    color: var(--gray-325);
    cursor: not-allowed;
}

body.register-page .volunteer-form-frame .form-group.has-error .form-control-custom,body.register-page .volunteer-form-frame .form-group.has-error .name-fields,body.register-page .volunteer-form-frame .name-field.has-error .form-control-custom,body.register-page .coach-form-frame .form-group.has-error .form-control-custom,body.register-page .coach-form-frame .form-group.has-error .name-fields,body.register-page .coach-form-frame .name-field.has-error .form-control-custom {
    border-color: var(--red-175);
}

body.register-page .volunteer-form-frame .form-control-custom.is-invalid,body.register-page .coach-form-frame .form-control-custom.is-invalid {
    border-color: var(--red-175);
}

body.register-page .volunteer-form-frame small[data-field-error],body.register-page .coach-form-frame small[data-field-error] {
    display: block;
    min-height: 16px;
    margin: 6px 4px 0;
    color: var(--red-175);
    font-size: 12px;
}

body.register-page .volunteer-step-actions {
    margin-top: 22px;
}

@media (max-width: 991px) {
    body.register-page .register-card:has(.volunteer-two-step),body.register-page .register-card:has(.coach-two-step) { padding: 38px 34px 44px; }
    body.register-page .volunteer-form-frame .form-row,body.register-page .volunteer-form-frame .coach-attachments,body.register-page .volunteer-form-frame .volunteer-details-grid,body.register-page .coach-form-frame .form-row,body.register-page .coach-form-frame .coach-attachments { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
    body.register-page .register-card:has(.volunteer-two-step),body.register-page .register-card:has(.coach-two-step) { padding: 28px 14px 34px; }
    body.register-page .volunteer-form-frame .form-row,body.register-page .volunteer-form-frame .coach-attachments,body.register-page .volunteer-form-frame .volunteer-details-grid,body.register-page .coach-form-frame .form-row,body.register-page .coach-form-frame .coach-attachments { grid-template-columns: 1fr; }
    body.register-page .volunteer-step-actions { gap: 12px; }
    body.register-page .volunteer-step-actions button { min-width: 0; width: 100%; gap: 14px; font-size: 16px; }
}


/* =========================================================
   ERROR MESSAGE
========================================================= */

body.register-page .register-error {
    margin-bottom: 20px;

    padding: 12px 18px;

    border-radius: 12px;

    background: #f8d7da;

    color: var(--dark-text, #842029);

    font-size: 14px;

    text-align: right;
}


/* =========================================================
   SUCCESS MESSAGE
========================================================= */

body.register-page .register-success {
    margin-bottom: 20px;

    padding: 12px 18px;

    border-radius: 12px;

    background: var(--sage-325);

    color: var(--dark-text, #0f5132);

    font-size: 14px;

    text-align: right;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    body.register-page .register-container {
        width: calc(100% - 40px);

        margin-top: 50px;
    }

    body.register-page .register-card {
        padding: 35px 30px 100px;

        border-radius: 35px;
    }

    body.register-page .steps {
        width: 70%;
    }

    body.register-page .form-row {
        column-gap: 30px;
    }

    body.register-page .form-group,body.register-page .gender-row {
        grid-template-columns: 140px 1fr;
    }

    body.register-page .form-label {
        font-size: 16px;
    }

    body.register-page .parent-box {
        padding: 20px;
    }
}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    body.register-page .register-page {
        min-height: 100vh;

        overflow: visible;
    }


    /* -----------------------------------------------------
       BACKGROUND
    ----------------------------------------------------- */

    body.register-page .register-page::after {
        display: none;
    }


    /* -----------------------------------------------------
       CONTAINER
    ----------------------------------------------------- */

    body.register-page .register-container {
        width: calc(100% - 20px);

        margin-top: 25px;
        margin-bottom: 40px;
    }


    /* -----------------------------------------------------
       CARD
    ----------------------------------------------------- */

    body.register-page .register-card {
        min-height: auto;

        padding: 30px 18px 100px;

        border-radius: 25px;
    }

    body.register-page .coach-attachments {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    body.register-page .volunteer-steps,body.register-page .coach-steps {
        margin-bottom: 30px;
    }

    body.register-page .volunteer-intro {
        font-size: 15px;
    }

    body.register-page .volunteer-declarations {
        grid-template-columns: 1fr;
        gap: 0;
    }


    /* -----------------------------------------------------
       STEPS
    ----------------------------------------------------- */

    body.register-page .steps {
        width: 90%;

        margin-bottom: 35px;
    }

    body.register-page .steps::before {
        top: 12px;
    }

    body.register-page .step-line {
        top: 12px;
    }

    body.register-page .step-circle {
        width: 27px;
        height: 27px;

        font-size: 13px;
    }

    body.register-page .step-title {
        margin-top: 5px;

        font-size: 11px;

        white-space: normal;

        text-align: center;
    }


    /* -----------------------------------------------------
       FORM
    ----------------------------------------------------- */

    body.register-page .player-form {
        padding: 0;
    }

    body.register-page .form-row {
        display: block;

        margin-bottom: 0;
    }


    /* -----------------------------------------------------
       FORM GROUP
    ----------------------------------------------------- */

    body.register-page .form-group {
        display: block;

        margin-bottom: 20px;
    }

    body.register-page .form-label {
        display: block;

        margin-bottom: 7px;

        font-size: 15px;

        text-align: right;
    }


    /* -----------------------------------------------------
       INPUT
    ----------------------------------------------------- */

    body.register-page .player-form .form-control {
        height: 46px;

        font-size: 14px;
    }


    /* -----------------------------------------------------
       GENDER
    ----------------------------------------------------- */

    body.register-page .gender-row {
        display: block;

        margin-bottom: 20px;
    }

    body.register-page .gender-row .form-label {
        margin-bottom: 10px;
    }

    body.register-page .gender-group {
        justify-content: flex-start;

        gap: 20px;
    }

    body.register-page .radio-option {
        font-size: 15px;
    }

    body.register-page .radio-option input {
        width: 25px;
        height: 25px;
    }


    /* -----------------------------------------------------
       PARENT
    ----------------------------------------------------- */

    body.register-page .parent-title {
        margin-top: 25px;

        margin-bottom: 15px;

        font-size: 18px;
    }

    body.register-page .parent-box {
        padding: 18px;

        border-radius: 20px;
    }


    /* -----------------------------------------------------
       CONSENT
    ----------------------------------------------------- */

    body.register-page .consent {
        margin: 25px 0 0;

        gap: 8px;

        font-size: 13px;

        line-height: 1.7;
    }

    body.register-page .consent input {
        width: 24px;
        height: 24px;

        margin-top: 3px;
    }


    /* -----------------------------------------------------
       ALERTS
    ----------------------------------------------------- */

    body.register-page .register-error,body.register-page .register-success {
        font-size: 13px;

        text-align: right;
    }
}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 400px) {

    body.register-page .register-container {
        width: calc(100% - 14px);
    }

    body.register-page .register-card {
        padding-left: 14px;
        padding-right: 14px;

        border-radius: 20px;
    }

    body.register-page .steps {
        width: 100%;
    }

    body.register-page .step-title {
        font-size: 10px;
    }

    body.register-page .gender-group {
        gap: 15px;
    }

    body.register-page .radio-option {
        gap: 6px;

        font-size: 14px;
    }

}

body.register-page .player-form .form-control-custom:disabled {
    background-color: var(--sage-200);
    border-color: #b8b8b8;

    color: var(--gray-275);

    cursor: not-allowed;

    opacity: 1;
}

body.register-page .player-form .form-control-custom:disabled::placeholder {
    color: var(--gray-175);
}

/* Player registration — two-step layout */
body.register-page .register-card:has(.player-two-step) {
    min-height: auto;
    padding: 48px 70px 56px;
}

body.register-page .player-two-step {
    padding: 0;
    color: var(--text-primary);
}

body.register-page .player-steps {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0 0 34px;
    padding: 0 7%;
    direction: rtl;
    list-style: none;
}

body.register-page .player-step {
    position: relative;
    display: grid;
    justify-items: center;
    gap: 10px;
    color: var(--gray-100);
    font-size: 15px;
    text-align: center;
}

body.register-page .player-step::before {
    content: "";
    position: absolute;
    top: 18px;
    right: 50%;
    width: 100%;
    height: 4px;
    background: var(--sage-275);
    z-index: 0;
}

body.register-page .player-step:first-child::before {
    right: 50%;
}

body.register-page .player-step:last-child::before {
    right: -50%;
}

body.register-page .player-step span {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border: 1px solid var(--sage-425);
    border-radius: 50%;
    background: var(--sage-100);
    box-shadow: 0 2px 7px rgba(0, 0, 0, .12);
    font-weight: 700;
}

body.register-page .player-step.is-active,body.register-page .player-step.is-complete {
    color: var(--text-primary);
}

body.register-page .player-step.is-active::before,body.register-page .player-step.is-complete::before {
    background: var(--green-800);
}

body.register-page .player-step.is-active span,body.register-page .player-step.is-complete span {
    border-color: var(--green-425);
    background: var(--green-800);
    color: var(--text-on-brand);
}

body.register-page .player-step-panel[hidden] {
    display: none !important;
}

body.register-page .player-form-frame {
    padding: 38px 42px 26px;
    border: 1px solid var(--sage-275);
    border-radius: 18px;
}

body.register-page .player-form-intro {
    margin-bottom: 32px;
}

body.register-page .player-form-intro h1 {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 800;
}

body.register-page .player-form-intro p {
    margin: 0;
    color: var(--gray-400);
    font-size: 14px;
}

body.register-page .player-fields-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px 26px;
}

body.register-page .player-field {
    min-width: 0;
}

body.register-page .player-field label,body.register-page .player-field legend {
    display: block;
    margin: 0 4px 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 700;
}

body.register-page .player-field i {
    color: #f15a24;
    font-style: normal;
}

body.register-page .player-field input,body.register-page .player-field select {
    width: 100%;
    height: 48px;
    padding: 0 18px;
    border: 1px solid var(--sage-275);
    border-radius: 25px;
    outline: 0;
    background: var(--surface);
    color: var(--gray-775);
    font: 500 14px "Cairo", sans-serif;
    transition: border-color .2s, box-shadow .2s;
}

body.register-page .player-field input:focus,body.register-page .player-field select:focus {
    border-color: var(--input-focus);
    box-shadow: 0 0 0 3px var(--input-focus-ring);
}

body.register-page .player-field select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-left: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23666666' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 18px center;
    background-size: 12px 8px;
    cursor: pointer;
}

body.register-page .player-field input:disabled,body.register-page .player-field select:disabled {
    border-color: var(--gray-50);
    background: var(--sage-275);
    color: var(--gray-325);
    cursor: not-allowed;
}

body.register-page .player-field .birth-date-picker {
    display: grid;
    grid-template-columns: 1fr 1.2fr 1fr;
    gap: 7px;
}

body.register-page .player-field .birth-date-picker select {
    min-width: 0;
    padding-inline: 10px;
    text-align: center;
}

body.register-page .player-field.has-error input,body.register-page .player-field.has-error select,body.register-page .player-field.has-error .player-gender-options {
    border-color: var(--red-175);
}

body.register-page .player-field small[data-field-error] {
    display: block;
    min-height: 18px;
    margin: 4px 9px 0;
    color: var(--red-400);
    font-size: 11px;
}

body.register-page .player-field label small {
    color: var(--red-400);
    font-size: 12px;
    font-weight: 400;
}

body.register-page .player-gender {
    margin: 0;
    padding: 0;
    border: 0;
}

body.register-page .player-gender>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

body.register-page .player-gender label {
    margin: 0;
}

body.register-page .player-gender input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.register-page .player-gender span {
    display: grid;
    place-items: center;
    height: 48px;
    border: 1px solid var(--sage-275);
    border-radius: 25px;
    background: var(--surface);
    color: var(--gray-550);
    cursor: pointer;
}

body.register-page .player-gender input:checked+span {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--text-on-brand);
}

body.register-page .player-guardian {
    margin-top: 24px;
    padding-top: 26px;
    border-top: 1px solid var(--sage-275);
}

body.register-page .player-guardian[hidden] {
    display: none;
}

body.register-page .player-guardian h2 {
    margin: 0 0 5px;
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 800;
}

body.register-page .player-guardian>p {
    min-height: 18px;
    margin: 0 0 14px;
    color: var(--gray-500);
    font-size: 12px;
}

body.register-page .player-guardian .player-field:has(input:disabled) {
    opacity: .55;
}

body.register-page .player-consent {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 28px;
    color: var(--gray-775);
    font-size: 14px;
    line-height: 1.9;
    cursor: pointer;
}

body.register-page .player-consent input {
    flex: 0 0 20px;
    width: 20px;
    height: 20px;
    margin-top: 4px;
    accent-color: var(--text-primary);
}

body.register-page .player-consent-wrapper.has-error .player-consent input {
    outline: 2px solid var(--red-175);
    outline-offset: 2px;
}

body.register-page .player-consent-wrapper small[data-field-error] {
    display: block;
    min-height: 16px;
    margin: 4px 0 0 32px;
    color: var(--red-175);
    font-size: 12px;
}

body.register-page .player-step-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 22px;
}

body.register-page .player-step-actions a {
    color: var(--gray-675);
    text-decoration: none;
}

body.register-page .player-step-actions button,body.register-page .player-step-placeholder button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 70px;
    min-width: 290px;
    min-height: 58px;
    padding: 8px 18px 8px 30px;
    border: 2px solid #35c363;
    border-radius: 32px;
    background: var(--green-825);
    color: var(--text-on-brand);
    font: 800 22px "Cairo", sans-serif;
    box-shadow: 0 0 16px rgba(48, 211, 105, .32);
}

body.register-page .player-step-actions button span {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: #44d36f;
    color: var(--dark-text, var(--green-825));
}

body.register-page .player-step-actions button span svg {
    width: 18px;
    height: 18px;
}

body.register-page .player-technical-frame {
    min-height: 450px;
}

body.register-page .player-technical-frame .player-form-intro h2 {
    margin: 0 0 4px;
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 800;
}

body.register-page .player-technical-question {
    max-width: 700px;
    margin: 35px 0 0 auto;
    padding: 0;
    border: 0;
}

body.register-page .player-technical-question legend {
    margin-bottom: 18px;
    color: var(--text-primary);
    font-size: 17px;
    font-weight: 700;
}

body.register-page .player-technical-question legend i {
    color: #f15a24;
    font-style: normal;
}

body.register-page .player-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

body.register-page .player-choice-grid label {
    margin: 0;
}

body.register-page .player-choice-grid input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

body.register-page .player-choice-grid span {
    display: grid;
    place-items: center;
    min-height: 70px;
    padding: 10px 18px;
    border: 1px solid var(--sage-275);
    border-radius: 36px;
    background: var(--surface);
    color: var(--gray-550);
    font-size: 18px;
    cursor: pointer;
    transition: .2s ease;
}

body.register-page .player-choice-grid input:checked+span {
    border-color: var(--orange);
    background: var(--orange);
    color: var(--text-on-brand);
}

body.register-page .player-technical-question:disabled {
    opacity: .48;
}

body.register-page .player-technical-question:disabled .player-choice-grid span {
    cursor: not-allowed;
}

body.register-page .player-technical-question small {
    display: block;
    min-height: 18px;
    margin: 5px 14px 0;
    color: var(--red-400);
    font-size: 11px;
}

body.register-page .player-frequency-question {
    margin-top: 20px;
}

body.register-page .player-frequency-question:has(select:disabled) {
    opacity: .48;
}

body.register-page .player-step-actions .player-previous-button {
    min-width: 180px;
    gap: 20px;
    border-color: var(--sage-425);
    background: transparent;
    color: var(--text-primary);
    box-shadow: none;
    font-size: 17px;
}

@media (max-width: 991px) {
    body.register-page .register-card:has(.player-two-step) {
        padding: 38px 34px 44px;
    }

    body.register-page .player-fields-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    body.register-page .register-container {
        width: calc(100% - 20px);
        margin-top: 30px;
    }

    body.register-page .register-card:has(.player-two-step) {
        padding: 28px 14px 34px;
        border-radius: 24px;
    }

    body.register-page .player-steps {
        margin-bottom: 24px;
        padding: 0;
    }

    body.register-page .player-step {
        font-size: 12px;
    }

    body.register-page .player-form-frame {
        padding: 24px 14px 20px;
        border-radius: 14px;
    }

    body.register-page .player-fields-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    body.register-page .player-form-intro h1,body.register-page .player-guardian h2 {
        font-size: 17px;
    }

    body.register-page .player-step-actions {
        align-items: stretch;
        flex-direction: column-reverse;
        gap: 18px;
    }

    body.register-page .player-step-actions button {
        width: 100%;
        min-width: 0;
    }

    body.register-page .player-choice-grid {
        grid-template-columns: 1fr;
    }

    body.register-page .player-choice-grid span {
        min-height: 56px;
        font-size: 15px;
    }

    body.register-page .player-step-actions a {
        align-self: flex-start;
    }
}

/* Phones: an app-style sign-up screen like login. Plain white page, no card, filled
   inputs, compact step dots, and the step's buttons pinned in a bottom bar. */
@media (max-width: 767px) {
    body.register-page,body.register-page .register-page {
        background: var(--surface);
    }

    body.register-page .register-container {
        width: 100%;
        margin: 0;
    }

    body.register-page .register-container .register-card {
        min-height: 0;
        padding: 14px calc(16px + env(safe-area-inset-right)) calc(100px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
        border-radius: 0;
        background: var(--surface);
        box-shadow: none;
    }

    body.register-page .player-form-frame,body.register-page .coach-form-frame,body.register-page .volunteer-form-frame {
        padding: 0;
        border: 0;
    }

    body.register-page .player-steps,body.register-page .volunteer-steps {
        margin: 0 0 20px;
        padding: 0;
    }

    body.register-page .player-step {
        gap: 6px;
        font-size: 12px;
    }

    body.register-page .player-step::before {
        top: 14px;
        height: 3px;
    }

    body.register-page .player-step span {
        background: var(--surface);
        box-shadow: none;
        font-size: 13px;
    }

    body.register-page .player-step span,body.register-page .coach-two-step .coach-step span {
        width: 30px;
        height: 30px;
    }

    body.register-page .player-form-intro {
        margin-bottom: 18px;
    }

    body.register-page .player-form-intro h1 {
        font-size: 20px;
    }

    body.register-page .player-form-intro p {
        font-size: 13px;
    }

    body.register-page .player-fields-grid {
        gap: 14px;
    }

    /* 16px stops iOS from zooming the page when a field is focused. */
    body.register-page .player-field input,body.register-page .player-field select,body.register-page .coach-form-frame .form-control-custom,body.register-page .coach-form-frame .name-fields input,body.register-page .volunteer-form-frame .form-control-custom,body.register-page .volunteer-form-frame .name-fields input {
        border-color: transparent;
        border-radius: 14px;
        background-color: var(--surface-page);
        font-size: 16px;
    }

    body.register-page .player-field input,body.register-page .player-field select,body.register-page .coach-form-frame input.form-control-custom,body.register-page .coach-form-frame select.form-control-custom,body.register-page .volunteer-form-frame input.form-control-custom,body.register-page .volunteer-form-frame select.form-control-custom {
        height: 50px;
    }

    body.register-page .player-field input:focus,body.register-page .player-field select:focus,body.register-page .coach-form-frame .form-control-custom:focus,body.register-page .volunteer-form-frame .form-control-custom:focus {
        border-color: var(--green-325);
        background-color: var(--surface);
        box-shadow: none;
    }

    body.register-page .player-field input:disabled,body.register-page .player-field select:disabled,body.register-page .coach-form-frame .form-control-custom:disabled,body.register-page .volunteer-form-frame .form-control-custom:disabled {
        border-color: transparent;
        background-color: var(--sage-150);
    }

    body.register-page .player-step-actions {
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 50;
        flex-direction: row;
        align-items: stretch;
        gap: 10px;
        margin: 0;
        padding: 12px calc(16px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
        border-top: 1px solid var(--sage-150);
        background: var(--surface);
    }

    body.register-page .player-step-actions button,body.register-page .volunteer-step-actions button {
        flex: 1;
        width: auto;
        min-width: 0;
        min-height: 52px;
        gap: 10px;
        padding: 6px 10px 6px 20px;
        border-width: 0;
        border-radius: 16px;
        box-shadow: none;
        font-size: 17px;
    }

    body.register-page .player-step-actions button span {
        width: 34px;
        height: 34px;
    }

    body.register-page .player-step-actions .player-previous-button {
        flex: 0 0 auto;
        min-width: 0;
        padding: 6px 14px;
        border: 1px solid var(--sage-150);
        font-size: 15px;
    }

    body.register-page .player-step-actions .player-previous-button span {
        display: none;
    }
}

/* Phones: field errors show only when there is one, with an icon, and tint their field. */
@media (max-width: 767px) {
    body.register-page small[data-field-error]:empty {
        display: none;
    }

    body.register-page .player-field small[data-field-error]:not(:empty),body.register-page .coach-form-frame small[data-field-error]:not(:empty),body.register-page .volunteer-form-frame small[data-field-error]:not(:empty),body.register-page .player-consent-wrapper small[data-field-error]:not(:empty) {
        display: flex;
        min-height: 0;
        align-items: flex-start;
        gap: 6px;
        margin: 6px 4px 0;
        color: var(--red-675);
        font-size: 13px;
        font-weight: 700;
        line-height: 1.5;
    }

    body.register-page small[data-field-error]:not(:empty)::before {
        display: grid;
        flex: none;
        width: 16px;
        height: 16px;
        margin-top: 2px;
        place-items: center;
        border-radius: 50%;
        background: var(--red-675);
        color: var(--text-on-brand);
        content: "!";
        font-size: 11px;
        font-weight: 900;
        line-height: 1;
    }

    body.register-page .player-field.has-error input,body.register-page .player-field.has-error select,body.register-page .coach-form-frame .form-control-custom.is-invalid,body.register-page .volunteer-form-frame .form-control-custom.is-invalid,body.register-page .coach-form-frame .form-group.has-error .form-control-custom,body.register-page .volunteer-form-frame .form-group.has-error .form-control-custom {
        border-color: var(--red-675);
        background-color: var(--red-50);
    }

    body.register-page .register-error {
        position: relative;
        margin-bottom: 16px;
        padding: 12px 44px 12px 14px;
        border-radius: 14px;
        background: var(--red-100);
        color: var(--red-850);
        font-weight: 700;
    }

    body.register-page .register-error::before {
        position: absolute;
        top: 12px;
        right: 14px;
        display: grid;
        width: 22px;
        height: 22px;
        place-items: center;
        border-radius: 50%;
        background: var(--red-675);
        color: var(--text-on-brand);
        content: "!";
        font-size: 13px;
        font-weight: 900;
        line-height: 1;
    }
}

/* Submit in flight: label swaps for a spinner (toggled by the pages' inline script). */
body.register-page .player-step-actions button.is-loading,body.register-page .volunteer-step-actions button.is-loading {
    position: relative;
    pointer-events: none;
}

body.register-page .player-step-actions button.is-loading>*,body.register-page .volunteer-step-actions button.is-loading>* {
    visibility: hidden;
}

body.register-page .player-step-actions button.is-loading,body.register-page .volunteer-step-actions button.is-loading {
    color: transparent !important;
}

body.register-page .player-step-actions button.is-loading::after,body.register-page .volunteer-step-actions button.is-loading::after {
    position: absolute;
    inset: 0;
    width: 22px;
    height: 22px;
    margin: auto;
    border: 3px solid rgba(255, 255, 255, .4);
    border-top-color: var(--surface);
    border-radius: 50%;
    content: "";
    animation: register-spin .7s linear infinite;
}

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

/* Phones: same language as login. The artwork shows as a band under the app bar with the
   form on a white sheet over it; single-control fields get the label inset at the top of
   a filled box, like native text fields. */
@media (max-width: 767px) {
    body.register-page .register-container {
        padding-top: 56px;
        background: var(--green-light) url(/images/bg.png) 62% 0 / auto 260px no-repeat;
    }

    body.register-page .register-container .register-card {
        min-height: calc(100dvh - 120px);
        padding-top: 22px;
        border-radius: 28px 28px 0 0;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
    }

    body.register-page .player-form-intro h1 {
        font-size: 22px;
        line-height: 1.4;
    }

    body.register-page .player-form-intro p {
        color: var(--sage-625);
    }

    body.register-page :is(.player-field,.coach-form-frame .form-group,.volunteer-form-frame .form-group):has(>label+:is(input:not([type="radio"],[type="checkbox"],[type="file"]),select,.password-toggle-wrap)) {
        position: relative;
    }

    body.register-page :is(.player-field,.coach-form-frame .form-group,.volunteer-form-frame .form-group):has(>label+:is(input:not([type="radio"],[type="checkbox"],[type="file"]),select,.password-toggle-wrap))>label {
        position: absolute;
        top: 7px;
        right: 17px;
        left: 44px;
        z-index: 2;
        margin: 0;
        overflow: hidden;
        color: var(--sage-625);
        font-size: 12px;
        font-weight: 700;
        line-height: 1.4;
        text-overflow: ellipsis;
        white-space: nowrap;
        pointer-events: none;
        transition: color .15s ease;
    }

    body.register-page :is(.player-field,.form-group):focus-within>label {
        color: var(--dark-text, var(--green));
    }

    body.register-page :is(.player-field,.form-group).has-error>label,body.register-page :is(.player-field,.form-group):has(>.is-invalid)>label {
        color: var(--red-675);
    }

    body.register-page .player-field input:not([type="radio"],[type="checkbox"],[type="file"]),body.register-page .player-field select,body.register-page .coach-form-frame input.form-control-custom,body.register-page .coach-form-frame select.form-control-custom,body.register-page .volunteer-form-frame input.form-control-custom,body.register-page .volunteer-form-frame select.form-control-custom {
        height: 58px;
        padding-top: 24px;
        padding-bottom: 6px;
        border-radius: 16px;
        line-height: 1.5;
    }

    /* Cairo's Arabic line box is ~30px at 16px; the 26px left by the input padding
       above clipped the bottom of the selected option, so selects get more room. */
    body.register-page .player-field select,body.register-page .coach-form-frame select.form-control-custom,body.register-page .volunteer-form-frame select.form-control-custom {
        padding-top: 22px;
        padding-bottom: 0;
        line-height: normal;
    }

    /* The birth-date trio has no inset label, so its selects stay vertically centered. */
    body.register-page .birth-date-picker select {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    body.register-page .player-field input::placeholder,body.register-page .form-control-custom::placeholder {
        color: var(--gray-175);
        font-size: 15px;
    }

    /* Select2 dropdowns (full registration) get the same filled box. */
    body.register-page .select2-container--default .select2-selection--single {
        height: 58px;
        border-color: transparent;
        border-radius: 16px;
        background-color: var(--surface-page);
    }

    body.register-page .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-top: 22px;
        font-size: 16px;
        line-height: 34px; /* fills the 56px box; 28px clipped Cairo's descenders */
    }

    body.register-page .birth-date-picker .select2-container--default .select2-selection--single .select2-selection__rendered {
        padding-top: 0;
        line-height: 56px;
    }

    body.register-page .select2-container--default.select2-container--focus .select2-selection--single,body.register-page .select2-container--default.select2-container--open .select2-selection--single {
        border-color: var(--green-325);
        background-color: var(--surface);
        box-shadow: none;
    }

    body.register-page .select2-container--default.select2-container--disabled .select2-selection--single {
        border-color: transparent;
        background-color: var(--sage-150);
    }

    body.register-page .player-field.has-error .select2-container--default .select2-selection--single,body.register-page .form-group.has-error .select2-container--default .select2-selection--single,body.register-page select.is-invalid+.select2-container .select2-selection--single {
        border-color: var(--red-675);
        background-color: var(--red-50);
    }

    /* Press feedback, like native buttons. */
    body.register-page .player-step-actions button,body.register-page .volunteer-step-actions button,body.register-page .coach-secondary-button,body.register-page .player-gender-options label {
        -webkit-tap-highlight-color: transparent;
        transition: transform .12s ease, background-color .12s ease;
    }

    body.register-page .player-step-actions button:active,body.register-page .volunteer-step-actions button:active,body.register-page .coach-secondary-button:active {
        transform: scale(.97);
    }
}

@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    body.register-page .player-step-actions button:active,body.register-page .volunteer-step-actions button:active,body.register-page .coach-secondary-button:active {
        transform: none;
    }
}