/* ==========================================================================
   9wickets — Mobile Nav Drawer REDESIGN "Premium Dark" (2026-07, loads LAST)
   --------------------------------------------------------------------------
   The drawer (#vk-mobile-menu / .vk-mobile, a right-side slide-in panel
   .vk-mobile__inner over a dimming .vk-mobile scrim) had accumulated THREE
   earlier competing redesigns in wickets-home.css (a dark "obsidian +
   numbered chip" version ~line 9860, a counter-chip variant ~line 9979, and
   a side-drawer sizing pass ~line 12748) plus header.css's own "premium
   white card" override — all !important, all fighting per-property, none
   fully winning. Net result: a plain cream drawer, no close button (none of
   those earlier passes ever added a real close element — only a comment
   saying the burger "becomes" one, restyled/repositioned but never given an
   X icon), and a large dead gap before the footer.

   This file is the single authoritative layer for color/background/type —
   !important throughout, enqueued dependent on vk-seo-special (the last
   style in the whole cascade), so it reliably wins regardless of which of
   the four earlier blocks happens to win which property. The accordion
   OPEN/CLOSE MECHANIC itself (max-height transition + .is-open toggling,
   in vk-overrides.css ~line 207) is deliberately left untouched — this file
   only repaints colors on top of it, at lower specificity than those rules
   on purpose so the working animation isn't disturbed.

   Matches the dark/black/gold identity already established this pass in
   video-hero.css / seo-special.css / cta-premium.css rather than
   reintroducing a fourth, different "premium" look.

   Close button: no such element exists in the drawer's markup (HFE-
   generated nav list only) — mobile-menu-close.js injects one real
   <button class="vk-mobile__close"> and wires it to the existing burger's
   click handler (wickets-home.js's setupMobileMenu already has full
   open/close state logic; the injected button just calls burger.click()
   rather than duplicating that logic).
   Scoped entirely under .vk-mobile / .vk-mobile__* / .lms-mobile__*.
   ========================================================================== */

/* ---------- scrim: dim the page behind, don't blank it out ---------- */
body.vk .vk-mobile {
    background: rgba(8, 6, 4, .58) !important;
    -webkit-backdrop-filter: blur(2px) !important;
    backdrop-filter: blur(2px) !important;
}

/* ---------- the actual drawer panel ---------- */
body.vk .vk-mobile__inner {
    background: linear-gradient(180deg, #17150F 0%, #0E0C09 100%) !important;
    border-left: 1px solid rgba(249, 233, 0, .14) !important;
    box-shadow: -30px 0 70px -24px rgba(0, 0, 0, .6) !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 78px 20px 24px !important;
    position: relative !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
}
/* brand wordmark removed by request — earlier layers (wickets-home.css)
   put text content on this same ::before, so it has to be explicitly
   suppressed here rather than just deleting this rule (deleting it would
   let their content show through again, just unstyled). */
body.vk .vk-mobile__inner::before {
    content: none !important;
    display: none !important;
}
/* soft gold glow, top of the panel — same decorative language as the dark
   banners elsewhere (video-hero/cta-premium radial glows) */
body.vk .vk-mobile__inner::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    top: -60px !important;
    left: 50% !important;
    width: 260px !important;
    height: 200px !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(closest-side, rgba(249, 233, 0, .18), transparent 72%) !important;
    filter: blur(20px) !important;
    pointer-events: none !important;
    z-index: 0 !important;
}

/* ---------- close button (injected by mobile-menu-close.js) ---------- */
body.vk .vk-mobile__close {
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: rgba(249, 233, 0, .12);
    border: 1px solid rgba(249, 233, 0, .3);
    color: #F9E900;
    cursor: pointer;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
body.vk .vk-mobile__close:hover {
    background: rgba(249, 233, 0, .22);
    border-color: rgba(249, 233, 0, .5);
    transform: rotate(90deg);
}
body.vk .vk-mobile__close svg { width: 17px !important; height: 17px !important; display: block !important; flex: none !important; }

/* ---------- top-level nav rows ---------- */
body.vk .vk-mobile__inner > ul {
    position: relative !important;
    z-index: 1 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
}
/* wickets-home.css carries TWO rules at the exact selector `body.vk
   .vk-mobile li a`, both !important (a leftover pair from two prior
   redesign passes) — that selector's specificity (2 classes + 2 type
   selectors: li, a) is HIGHER than `.vk-mobile__item > a` (2 classes + 1
   type), so it was winning regardless of this file loading last. Matching
   their exact selector text here — not just an equivalent one — is the
   only way to win the tie on specificity instead of losing to it. */
body.vk .vk-mobile li a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 15px 16px !important;
    min-height: 0 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .05) !important;
    border: 1px solid rgba(255, 255, 255, .10) !important;
    color: #FFFFFF !important;
    font-family: var(--vk-font-bn) !important;
    font-size: 15.5px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    transition: background .3s ease, border-color .3s ease, transform .3s ease !important;
}
body.vk .vk-mobile li a:hover,
body.vk .vk-mobile li a:focus-visible {
    background: rgba(249, 233, 0, .10) !important;
    border-color: rgba(249, 233, 0, .35) !important;
    transform: translateX(-2px);
}
body.vk .vk-mobile .lms-mobile__label { color: inherit !important; flex: 1 1 auto; min-width: 0; }
/* the caret badge (circle) itself is already sized/positioned by
   vk-overrides.css (kept — that's what the .is-open rotate hooks into);
   only its resting colors get repainted for the dark background here */
body.vk .vk-mobile .lms-mobile__caret {
    background: rgba(249, 233, 0, .14) !important;
    color: #F9E900 !important;
}
body.vk .vk-mobile__inner .vk-mobile__item.has-children.is-open > a .lms-mobile__caret {
    background: rgba(249, 233, 0, .28) !important;
}

/* ---------- sub-menu (accordion children) — vk-overrides.css keeps
   ownership of the open/close max-height transition (higher specificity
   there, left alone on purpose); only colors are repainted here ---------- */
body.vk .vk-mobile__inner .lms-mobile__sub { border-left-color: rgba(255, 255, 255, .14) !important; }
body.vk .vk-mobile__inner .lms-mobile__sub-item > a {
    color: rgba(255, 255, 255, .70) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}
body.vk .vk-mobile__inner .lms-mobile__sub-item > a:hover {
    color: #F9E900 !important;
    background: rgba(255, 255, 255, .05) !important;
}
body.vk .vk-mobile__inner .lms-mobile__sub-item > a::before { background: rgba(249, 233, 0, .55) !important; }
body.vk .vk-mobile__inner .lms-mobile__sub-item > a:hover::before { background: #F9E900 !important; }

/* ---------- CTA row ---------- */
body.vk .vk-mobile li.vk-mobile__cta {
    margin-top: 14px !important;
    list-style: none !important;
}
body.vk .vk-mobile li.vk-mobile__cta a {
    min-height: 0 !important;
    border: 0 !important;
}

/* ---------- footer ---------- */
body.vk .vk-mobile__foot {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 22px !important;
    padding-top: 18px !important;
    padding-left: 4px !important;
    padding-right: 4px !important;
    padding-bottom: 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .10) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
    color: rgba(255, 255, 255, .48) !important;
    font-size: 11.5px !important;
}
body.vk .vk-mobile__foot span:first-child { color: rgba(255, 255, 255, .62) !important; }

@media (prefers-reduced-motion: reduce) {
    body.vk .vk-mobile__close,
    body.vk .vk-mobile__item > a { transition: none !important; }
}