/**
 * Player UX layer — loaded last on every page that uses includes/header_player.php.
 *
 * Holds the navigation shell (grouped desktop nav, account menu, mobile tab bar)
 * plus cross-page fixes that individual page stylesheets got wrong in the same way.
 * Uses the theme tokens from theme.css / style.css only, so light and dark both work.
 */

:root {
    --ux-tabbar-h: 62px;
    --ux-radius: 14px;
    --ux-focus: 0 0 0 3px color-mix(in srgb, var(--pp-accent-bg, #d9f114) 55%, transparent);
    --ux-ink: #09090b;
}

/* ── Accessibility basics ─────────────────────────────────────────── */
.pp-skip-link {
    position: absolute;
    left: 0.75rem;
    top: -60px;
    z-index: 2000;
    padding: 0.55rem 1rem;
    border-radius: 999px;
    background: var(--pp-accent-bg, #d9f114);
    color: var(--ux-ink);
    font-weight: 800;
    text-decoration: none;
}
.pp-skip-link:focus { top: 0.6rem; }
#ppMain:focus { outline: none; }

.pp-player a:focus-visible,
.pp-player button:focus-visible,
.pp-player [role="tab"]:focus-visible,
.pp-player .btn:focus-visible,
.pp-player select:focus-visible,
.pp-player input:focus-visible {
    outline: none;
    box-shadow: var(--ux-focus) !important;
}

/* ── Shared small pieces ──────────────────────────────────────────── */
.pp-dot-badge {
    position: absolute;
    top: -3px;
    right: -5px;
    min-width: 17px;
    height: 17px;
    padding: 0 4px;
    border-radius: 999px;
    background: #ef4444;
    color: #fff;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 17px;
    text-align: center;
    box-shadow: 0 0 0 2px var(--pp-surface-card, #fff);
}

.pp-btn-accent {
    background: var(--pp-accent-bg, #d9f114) !important;
    color: var(--ux-ink) !important;
    border: 1px solid var(--pp-accent-bg, #d9f114) !important;
}
.pp-btn-accent:hover { filter: brightness(1.06); }

.pp-btn-ghost {
    background: transparent !important;
    color: var(--text) !important;
    border: 1px solid var(--border) !important;
}
.pp-btn-ghost:hover { border-color: var(--text) !important; }

/* ── Dropdown menus (More + account) ──────────────────────────────── */
.pp-menu {
    min-width: 248px;
    padding: 0.4rem;
    border-radius: var(--ux-radius);
    border: 1px solid var(--border);
    background: var(--pp-surface-card);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.22);
    margin-top: 0.4rem !important;
}
.pp-menu-item {
    display: flex !important;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem !important;
    border-radius: 10px;
    color: var(--text) !important;
    font-weight: 600;
    font-size: 0.88rem;
    white-space: normal;
}
.pp-menu-item:hover,
.pp-menu-item:focus { background: var(--pp-surface-hover, rgba(127, 127, 127, 0.12)) !important; }
.pp-menu-item.active,
.pp-menu-item:active { background: var(--pp-accent-bg, #d9f114) !important; color: var(--ux-ink) !important; }
.pp-menu-item.active .pp-menu-ico { background: var(--ux-ink); color: var(--pp-accent-bg, #d9f114); }
.pp-menu-item.active .pp-menu-hint { color: rgba(9, 9, 11, 0.7); }
.pp-menu-ico {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--pp-surface-card-2, rgba(127, 127, 127, 0.1));
    border: 1px solid var(--border);
    color: var(--text);
    font-size: 0.9rem;
}
.pp-menu-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.pp-menu-hint { font-size: 0.72rem; font-weight: 500; color: var(--text-muted); }
.pp-menu-item--danger,
.pp-menu-item--danger .pp-menu-ico { color: #ef4444 !important; }
.pp-menu .dropdown-divider { border-color: var(--border); margin: 0.35rem 0.25rem; }

.pp-account-head {
    display: flex;
    flex-direction: column;
    padding: 0.45rem 0.6rem 0.6rem;
    margin-bottom: 0.3rem;
    border-bottom: 1px solid var(--border);
}
.pp-account-name { font-weight: 800; color: var(--text); font-size: 0.92rem; }
.pp-account-sub { font-size: 0.75rem; color: var(--text-muted); }

.pp-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 2px 6px 2px 2px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
}
.pp-account-btn:hover { border-color: var(--text); }
.pp-account-btn .pp-avatar { min-width: 34px; min-height: 34px; width: 34px; height: 34px; }
.pp-account-caret { font-size: 0.7rem; opacity: 0.7; }

/* ── Desktop navigation (≥ 992px) ─────────────────────────────────── */
@media (min-width: 992px) {
    /* The old link row scrolled sideways with a hidden scrollbar, so links past
       the edge (Order Food, Bookings) were unreachable. Fewer links, no scroll. */
    .pp-topnav-links {
        overflow: visible !important;
        justify-content: center;
    }
    .pp-topnav-links .pp-navlink {
        font-size: 0.84rem !important;
        padding: 0.45rem 0.75rem !important;
        border-radius: 999px;
    }
    .pp-nav-more .dropdown-toggle {
        background: transparent;
        border: 0;
    }
    .pp-nav-more .dropdown-toggle::after {
        border: 0;
        content: "\F282";
        font-family: "bootstrap-icons";
        font-size: 0.65rem;
        vertical-align: 0;
        margin-left: 0.3rem;
    }
    .pp-topnav-actions { gap: 0.5rem !important; }

    /* Search collapses to an icon until focused, so it never squeezes the links. */
    .pp-topnav-search { max-width: none !important; }
    .pp-topnav-search .pp-search {
        position: relative;
        width: 40px !important;
        height: 40px;
        padding: 0 !important;
        justify-content: center;
        border-radius: 999px;
        transition: width 0.18s ease;
        cursor: pointer;
    }
    .pp-topnav-search .pp-search > i { pointer-events: none; }
    .pp-topnav-search .pp-search .search-input-width {
        position: absolute;
        inset: 0;
        width: 100% !important;
        opacity: 0;
        cursor: pointer;
    }
    .pp-topnav-search:focus-within .pp-search {
        width: 260px !important;
        justify-content: flex-start;
        padding: 0 0.85rem !important;
        cursor: text;
    }
    .pp-topnav-search:focus-within .pp-search .search-input-width {
        position: static;
        opacity: 1;
        cursor: text;
    }
    .pp-topnav-search .search-dropdown-adjust { left: auto; right: 0; min-width: 320px; }
}

@media (min-width: 1400px) {
    .pp-topnav-search .pp-search { width: 220px !important; padding: 0 0.85rem !important; justify-content: flex-start; cursor: text; }
    .pp-topnav-search .pp-search .search-input-width { position: static; opacity: 1; cursor: text; }
    .pp-topnav-search:focus-within .pp-search { width: 280px !important; }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .pp-topnav-links .pp-navlink { padding: 0.42rem 0.55rem !important; font-size: 0.8rem !important; }
    .pp-signup-btn { display: none !important; }
}

/* ── Mobile top bar + drawer (< 992px) ────────────────────────────── */
.pp-topnav-mobile-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
}
.pp-topnav-mobile-actions .pp-iconbtn { width: 40px; height: 40px; }

@media (max-width: 991.98px) {
    .pp-topnav-shell { display: flex; align-items: center; min-height: 56px; }
    .pp-topnav-start { display: flex; align-items: center; }
    .pp-topnav .navbar-toggler.pp-nav-toggler { margin-right: 0; }

    /* The pickleball toggler is the menu button — say so for people who don't guess it. */
    .pp-topnav .navbar-toggler.pp-nav-toggler::after {
        content: "Menu";
        position: absolute;
        bottom: -1px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 0.55rem;
        font-weight: 800;
        letter-spacing: 0.06em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .pp-topnav .navbar-toggler.pp-nav-toggler { position: relative; }
    .pp-nav-ball-icon { width: 24px; height: 24px; margin-top: -8px; animation: none; }

    .pp-nav-group-label {
        list-style: none;
        padding: 0.85rem 0.5rem 0.3rem;
        font-size: 0.66rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--text-muted);
    }
    .pp-nav-group-label:first-child { padding-top: 0.25rem; }

    #ppTopNav.pp-mobile-offcanvas .pp-navlink { min-height: 44px; font-size: 0.9rem !important; }
    #ppTopNav.pp-mobile-offcanvas .pp-mob-drawer-footer { padding-bottom: calc(0.65rem + env(safe-area-inset-bottom, 0px)); }
}

/* Drawer in dark mode: header_player.css hard-codes light surfaces for these. */
[data-theme="dark"] #ppTopNav.pp-mobile-offcanvas .pp-navlink { color: var(--text) !important; }
[data-theme="dark"] #ppTopNav.pp-mobile-offcanvas .pp-navlink > .pp-mob-icon { background: var(--pp-surface-card-2); color: var(--text); border: 1px solid var(--border); }
[data-theme="dark"] #ppTopNav.pp-mobile-offcanvas .pp-navlink:hover { background: var(--pp-surface-hover, rgba(255, 255, 255, 0.06)) !important; color: var(--text) !important; }
[data-theme="dark"] #ppTopNav.pp-mobile-offcanvas .pp-navlink.active { background: var(--pp-accent-bg) !important; color: var(--ux-ink) !important; }
[data-theme="dark"] #ppTopNav.pp-mobile-offcanvas .pp-navlink.active .pp-mob-icon { background: var(--ux-ink); color: var(--pp-accent-bg); border-color: transparent; }
[data-theme="dark"] #ppTopNav.pp-mobile-offcanvas .pp-mob-drawer-footer { background: var(--pp-surface-card); border-top-color: var(--border); }
[data-theme="dark"] #ppTopNav.pp-mobile-offcanvas .pp-offcanvas-tools .pp-search { background: var(--pp-surface-card-2); border-color: var(--border); }

/* ── Mobile bottom tab bar ────────────────────────────────────────── */
.pp-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1035; /* above page content, below Bootstrap offcanvas (1045) and modals (1055) */
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    height: calc(var(--ux-tabbar-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: color-mix(in srgb, var(--pp-surface-card) 92%, transparent);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
}
.pp-tabbar__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--text-muted);
    text-decoration: none;
    font-size: 0.68rem;
    font-weight: 700;
    -webkit-tap-highlight-color: transparent;
}
.pp-tabbar__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 28px;
    border-radius: 999px;
    font-size: 1.15rem;
    transition: background 0.15s ease;
}
.pp-tabbar__item.is-active { color: var(--text); }
.pp-tabbar__item.is-active .pp-tabbar__icon { background: var(--pp-accent-bg, #d9f114); color: var(--ux-ink); }
.pp-tabbar__item:active .pp-tabbar__icon { transform: scale(0.94); }
.pp-tabbar .pp-dot-badge { top: -4px; right: 2px; }

@media (max-width: 991.98px) {
    body.pp-has-tabbar { padding-bottom: calc(var(--ux-tabbar-h) + env(safe-area-inset-bottom, 0px)); }
    /* Floating things must clear the tab bar. */
    body.pp-has-tabbar .ai-chat-widget#aiChatWidget { bottom: calc(var(--ux-tabbar-h) + 0.9rem + env(safe-area-inset-bottom, 0px)) !important; }
    body.pp-has-tabbar .ccx-feed-toast { bottom: calc(var(--ux-tabbar-h) + 1rem) !important; }
    body.pp-has-tabbar .chat-container { height: calc(100dvh - 100px - var(--ux-tabbar-h)) !important; }
}
@media (min-width: 992px) {
    .pp-tabbar { display: none !important; }
}

/* ── Cookie notice: compact, never covers the tab bar ─────────────── */
html body .pp-cookie-notice {
    max-width: 30rem;
    padding: 0.7rem 0.8rem 0.7rem 1rem;
    gap: 0.6rem;
    font-size: 0.8rem;
    line-height: 1.4;
    flex-wrap: nowrap;
}
html body .pp-cookie-notice p { flex: 1 1 auto; }
html body .pp-cookie-notice button { width: auto; min-height: 40px; padding: 0.45rem 1rem; flex-shrink: 0; }
@media (max-width: 991.98px) {
    html body.pp-has-tabbar .pp-cookie-notice { bottom: calc(var(--ux-tabbar-h) + 0.5rem + env(safe-area-inset-bottom, 0px)); }
}

/* ── Global component fixes ───────────────────────────────────────── */

/* style.css makes .alert a flex row, which splits "text <strong>x</strong>." into
   three columns. Alerts that hold running text read as a paragraph instead. */
.alert:has(> strong),
.alert:has(> a),
.alert:has(> b) {
    display: block;
}
.alert:has(> strong) > i:first-child,
.alert:has(> a) > i:first-child { margin-right: 0.4rem; }

/* .btn-light stays white in dark mode while its text turns light — unreadable
   (profile "Upload Photo", and similar). Give it a dark surface instead. */
[data-theme="dark"] .btn-light {
    --bs-btn-color: var(--text);
    --bs-btn-bg: var(--pp-surface-card-2);
    --bs-btn-border-color: var(--border);
    --bs-btn-hover-color: var(--ux-ink);
    --bs-btn-hover-bg: var(--pp-accent-bg);
    --bs-btn-hover-border-color: var(--pp-accent-bg);
    color: var(--text);
    background-color: var(--pp-surface-card-2);
    border-color: var(--border) !important;
}

/* Pagination: brand accent instead of the leftover teal. */
.pp-player .pagination .page-link {
    border-radius: 10px !important;
    margin: 0 2px;
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--pp-surface-card);
    color: var(--text);
    font-weight: 700;
}
.pp-player .pagination .active > .page-link,
.pp-player .pagination .page-link.active {
    background: var(--pp-accent-bg, #d9f114) !important;
    border-color: var(--pp-accent-bg, #d9f114) !important;
    color: var(--ux-ink) !important;
    box-shadow: none;
}

/* Touch devices: hover lifts make cards jump under the finger. */
@media (hover: none) {
    .card-hover-animate:hover,
    .stat-card:hover,
    .game-card:hover,
    .pp-ops-tile:hover,
    .coach-card:hover {
        transform: none !important;
    }
}

/* Inputs: 16px on phones stops iOS from zooming the page on focus. */
@media (max-width: 767.98px) {
    .pp-player input[type="text"],
    .pp-player input[type="search"],
    .pp-player input[type="email"],
    .pp-player input[type="tel"],
    .pp-player input[type="password"],
    .pp-player input[type="number"],
    .pp-player input[type="date"],
    .pp-player select,
    .pp-player textarea {
        font-size: 16px !important;
    }
}

/* ── Listing pages: filter toolbars and view tabs ─────────────────── */
@media (max-width: 767.98px) {
    /* Search on its own row, the two filters side by side (was three stacked rows). */
    .op-discover-toolbar,
    .th-discover-toolbar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0.5rem !important;
    }
    .op-discover-toolbar > .op-search-wrap,
    .th-discover-toolbar > .th-search-wrap,
    .th-discover-toolbar > label:first-child {
        grid-column: 1 / -1;
    }
    .op-filter-select,
    .th-filter-select {
        min-width: 0;
        width: 100%;
        text-overflow: ellipsis;
    }
}

/* View tabs never wrap onto a second line; they scroll sideways if they must. */
.op-tabs,
.th-tabs,
.bk-type-tabs {
    flex-wrap: nowrap !important;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.op-tabs::-webkit-scrollbar,
.th-tabs::-webkit-scrollbar,
.bk-type-tabs::-webkit-scrollbar { display: none; }
.op-tab,
.th-tab,
.bk-type-tab {
    flex: 0 0 auto;
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .op-tabs,
    .th-tabs { display: flex !important; }
    .op-tab,
    .th-tab { flex: 1 0 auto; justify-content: center; }
}

/* ── Home ─────────────────────────────────────────────────────────── */
.pp-section-head { align-items: center !important; }

@media (max-width: 767.98px) {
    /* Quick actions as a 2×2 grid: all four visible without scrolling. */
    .pp-landing-premium .pp-ops-grid,
    .pp-ops-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.55rem !important;
    }
    .pp-landing-premium .pp-ops-tile,
    .pp-ops-tile {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.5rem !important;
        padding: 0.8rem !important;
        min-height: 0 !important;
    }
    .pp-ops-tile__hint { font-size: 0.72rem; }

    /* Section header: title left, "View all" right on one line. */
    .pp-landing-premium .pp-section-head,
    .pp-section-head {
        flex-direction: row !important;
        align-items: flex-start !important;
        justify-content: space-between;
    }
    .pp-section-head__sub { font-size: 0.8rem; }
    .pp-section-head__cta { margin-top: 0.15rem; }
}

/* ── Rankings: rows become compact cards on phones ────────────────── */
@media (max-width: 767.98px) {
    .pp-rank-table thead { display: none; }
    .pp-rank-table,
    .pp-rank-table tbody { display: block; }
    .pp-rank-table tr {
        display: grid;
        grid-template-columns: 2rem 1fr auto;
        grid-template-areas:
            "rank player dupr"
            "rank stats  stats";
        align-items: center;
        column-gap: 0.65rem;
        row-gap: 0.15rem;
        padding: 0.75rem 0.85rem;
        border-bottom: 1px solid var(--border);
    }
    .pp-rank-table td {
        display: block;
        padding: 0 !important;
        border: 0 !important;
        background: transparent !important;
    }
    .pp-rank-table td[data-col="rank"] { grid-area: rank; font-size: 1rem; font-weight: 800; text-align: center; }
    .pp-rank-table td[data-col="player"] { grid-area: player; min-width: 0; }
    .pp-rank-table td[data-col="dupr"] { grid-area: dupr; font-size: 1.05rem; font-weight: 800; }
    .pp-rank-table td[data-col="dupr"]:not(:empty)::before { content: "DUPR "; font-size: 0.6rem; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; }
    .pp-rank-table td[data-col="wins"],
    .pp-rank-table td[data-col="games"],
    .pp-rank-table td[data-col="winrate"] {
        grid-area: stats;
        display: none;
    }
    .pp-rank-stats-mobile { display: block !important; grid-area: stats; font-size: 0.75rem; color: var(--text-muted); }
    .pp-rank-table .rankings-player-avatar { width: 36px; height: 36px; flex-shrink: 0; }
    .pp-rank-table td[data-col="player"] > .d-flex { gap: 0.65rem !important; }
    .pp-rank-table td[data-col="player"] .d-flex .d-flex { flex-wrap: wrap; gap: 0.25rem 0.45rem !important; }
}
.pp-rank-stats-mobile { display: none; }

/* ── Player dashboard: shortcut rows become a two-column tile grid ── */
@media (max-width: 767.98px) {
    .pp-quick-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 0.6rem !important;
    }
    .pp-quick-grid .pp-quick-card {
        position: relative;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: space-between;
        gap: 0.6rem !important;
        min-height: 96px;
        padding: 0.85rem !important;
        margin: 0 !important;
    }
    .pp-quick-grid .pp-quick-badge {
        position: absolute;
        top: 0.6rem;
        right: 0.6rem;
        margin: 0 !important;
    }
}

/* ── Profile photo: the avatar had no shape or size of its own ────── */
.ep-avatar {
    width: 112px;
    height: 112px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--pp-accent-bg, #d9f114);
    color: var(--ux-ink);
    font-family: var(--font-display);
    font-size: 2.6rem;
    letter-spacing: 0.04em;
    border: 3px solid var(--pp-surface-card);
    box-shadow: 0 0 0 2px var(--border);
}

/* ── Respect reduced motion everywhere ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .pp-player *,
    .pp-player *::before,
    .pp-player *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Page header: one pattern for every listing page ──────────────── */
/* Same shape as the Open Play / Tournaments headers: kicker, title, one line of help. */
.pp-page-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    margin-bottom: 1.1rem;
}
.pp-page-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0 0 0.35rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.pp-page-kicker i { color: var(--accent, var(--pp-accent-text)); }
.pp-page-title { margin: 0; }
.pp-page-sub { margin: 0.35rem 0 0; max-width: 36rem; color: var(--text-muted); }
@media (max-width: 575.98px) {
    .pp-page-head { margin-bottom: 0.85rem; }
    .pp-page-sub { font-size: 0.88rem; }
}

/* ── Horizontal scrollers: show that more items sit off-screen ────── */
/* ux_system.js toggles these classes from the real scroll position. */
.ux-fade-end { -webkit-mask-image: linear-gradient(to right, #000 82%, transparent); mask-image: linear-gradient(to right, #000 82%, transparent); }
.ux-fade-start { -webkit-mask-image: linear-gradient(to left, #000 82%, transparent); mask-image: linear-gradient(to left, #000 82%, transparent); }
.ux-fade-start.ux-fade-end { -webkit-mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(to right, transparent, #000 14%, #000 86%, transparent); }

/* ── Narrow phones: brand sits beside the menu button, not under the icons ── */
@media (max-width: 400px) {
    .pp-topnav .navbar-brand.pp-brand {
        position: static;
        transform: none;
        margin-left: 0.35rem;
        font-size: 1.05rem !important;
        max-width: 46vw;
    }
}

/* ── Court details (stacked layout) ───────────────────────────────── */
/* .cd-layout stacks with align-items:flex-start, so the right column shrink-wrapped
   to the booking table and pushed the page 30px wider than the phone. The table
   already scrolls inside .cd-grid-wrap once the column is held to the screen width. */
@media (max-width: 991.98px) {
    .cd-layout > .cd-right { width: 100%; align-self: stretch; }
}

/* ── Primary actions use the brand accent ─────────────────────────── */
/* Pro Pass "Unlock Premium Pass" was ink-on-ink in dark mode and read as secondary. */
.sp-btn-main {
    background: var(--pp-accent-bg, #d9f114) !important;
    color: var(--ux-ink) !important;
}
.sp-btn-main:hover { filter: brightness(1.06); color: var(--ux-ink) !important; }

/* Coach booking banner: brand ink/green instead of the leftover purple. */
.bk-banner {
    background: linear-gradient(135deg, #09090b 0%, #10261a 60%, #1d3a12 100%) !important;
}
.bk-banner::before {
    background: radial-gradient(circle at 80% 20%, rgba(217, 241, 20, 0.16) 0%, transparent 55%) !important;
}
.bk-banner-role { color: var(--pp-accent-bg, #d9f114) !important; }
.bk-banner-name { font-family: var(--font-display); font-weight: 400 !important; letter-spacing: 0.03em !important; font-size: 1.9rem !important; }
.bk-avatar-wrap { background: var(--pp-surface-card-2) !important; }

/* ── Fixes from interaction testing ───────────────────────────────── */
@media (min-width: 992px) and (max-width: 1399.98px) {
    /* The expanded search overlays the links to its left instead of pushing them into the brand. */
    .pp-topnav-search { position: relative; width: 40px; height: 40px; }
    .pp-topnav-search .pp-search { position: absolute; right: 0; top: 0; z-index: 5; background: var(--pp-surface-card); }
}

/* The drawer lives inside the sticky nav's stacking context (z 1020), so the
   tab bar has to sit below that, and slides away while the drawer is open. */
.pp-tabbar { z-index: 1019; transition: transform 0.2s ease; }
body.ux-drawer-open .pp-tabbar { transform: translateY(110%); }

/* sports-system.css colours every active nav icon with the accent, which made the
   drawer's active icon lime-on-lime in light mode. Icons follow their tile colour. */
#ppTopNav.pp-mobile-offcanvas .pp-navlink .pp-mob-icon i { color: inherit !important; }