/*********************************************************
 * BetEngine Enterprise – MOBILE.CSS
 * Desktop-safe mobile layer:
 * - Mobile UI is hidden by default (desktop)
 * - Enabled only under @media (max-width: 900px)
 *********************************************************/

/* ==================================================
   DEFAULT (DESKTOP):  HIDE MOBILE UI ALWAYS
================================================== */
.header-mobile,
.mobile-only,
.mobile-menu-overlay,
.mobile-menu-panel,
.be-modal-overlay {
    display: none;
}

/* ==================================================
   MOBILE BREAKPOINT
================================================== */
@media (max-width: 900px) {

    /* Show mobile containers */
    .header-mobile,
    .mobile-only {
        display: block;
    }

    /* ==================================================
       MOBILE HEADER
    ================================================== */
    .header-mobile {
        position: sticky;
        top: 0;
        z-index: 1000;
        background: var(--bg-header, #0b0b12);
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    .mobile-top-bar {
        position: relative;
        display: flex;
        align-items: center; /* FIX: vertical aligment */
        justify-content: space-between;
        padding: 2px 14px 10px;
    }

    .mobile-top-bar .brand {
        position: static;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    .mobile-icon-btn {
        background: none;
        border: none;
        padding: 6px;
        cursor: pointer;
    }
    

    /* ==================================================
   MOBILE SEARCH OVERLAY — ENTERPRISE FIX (V2)
   ================================================== */

/* Top bar must not be clipped (dropdown must be visible) */
.header-mobile,
.header-mobile .mobile-top-bar {
  overflow: visible;
}

/* Keep top bar stable */
.header-mobile .mobile-top-bar {
  height: 48px;
  min-height: 48px;
  max-height: 48px;
  box-sizing: border-box;
  position: relative; /* positioning context for overlay */
  background-image: linear-gradient(180deg, rgb(39, 45, 49) 0%, rgb(10, 12, 18) 100%);
}

/* Anchor must be zero-footprint AND not a positioning context */
.header-mobile .mobile-search-anchor {
  position: static;     /* IMPORTANT: do NOT be relative */
  width: 0;
  height: 0;
  flex: 0 0 0;
  overflow: visible;
}

/* True overlay positioned relative to .mobile-top-bar */
.header-mobile .mobile-search-inline {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;            /* fill the top bar */
  height: auto;
  z-index: 5000;        /* above row 2 */
  overflow: visible;    /* allow dropdown to extend */
  pointer-events: none; /* inactive when closed */
}

body.mobile-search-open .header-mobile .mobile-search-inline {
  pointer-events: auto;
}

/* Search container fills the bar */
.header-mobile .mobile-search-inline .be-search {
  position: relative;   /* anchor for results */
  height: 100%;
  display: flex;
  align-items: center;
  background: var(--bg-header, #0b0b12);
}

/* Input row: stable vertical alignment */
.header-mobile .mobile-search-inline .be-search-input-wrapper {
  height: 100%;
  margin: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
}

/* Input sizing */
.header-mobile .mobile-search-inline .be-search-input {
  height: 36px;
  line-height: 36px;
}

/* Results dropdown must attach under the bar and stay visible */
.header-mobile .mobile-search-inline .be-search-results {
  position: absolute;
  top: 100% !important;
  left: 14px;
  right: 14px;
  margin: 0;
  z-index: 5001;
  margin-top: 0;
}


    /* ==================================================
       MOBILE HEADER ACTIONS
    ================================================== */
    .mobile-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .mobile-actions button {
        width: 36px;
        height: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        padding: 0;
        cursor: pointer;
        border-radius: 50%;
    }

    .mobile-actions button img {
        width: 18px;
        height: 18px;
        pointer-events: none;
    }

    .mobile-actions button:active {
        background: rgba(255, 255, 255, 0.08);
    }

    /* ==================================================
       HAMBURGER OVERLAY
    ================================================== */
    .mobile-menu-overlay {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s ease;
        z-index: 1900;
    }

    .mobile-menu-overlay.show {
        opacity: 1;
        pointer-events: auto;
    }

    /* ==================================================
       HAMBURGER PANEL
    ================================================== */
    .mobile-menu-panel {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        width: 86%;
        max-width: 340px;
        max-height: 100dvh;
        background: linear-gradient(180deg, #272d31, #0f1112);        color: #e6e6e6;        color: #e6e6e6;
        transform: translateX(-100%);
        transition: transform .25s ease;
        z-index: 2000;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        pointer-events: auto;
        padding-bottom: 18px;
        --mobile-menu-header-h: 56px;
        --mobile-menu-close-area: 52px;
        scrollbar-width: thin; /* Firefox */
        scrollbar-color: rgba(0, 0, 0, 0.35) transparent; /* thumb, track */
    }

    .mobile-menu-panel::-webkit-scrollbar-thumb {
         background-color: rgba(0, 0, 0, 0.35);
         border-radius: 999px;
         border: 2px solid transparent;
         background-clip: content-box;
    }

    .mobile-menu-panel::-webkit-scrollbar-thumb:hover {
         background-color: rgba(0, 0, 0, 0.45);
    }

    .mobile-menu-panel.open {
        transform: translateX(0);
    }

    /* Close button (sticky inside panel; does NOT push brand down) */
.mobile-menu-panel > button[aria-label="Close menu"],
.mobile-menu-panel > .mobile-menu-close {
  position: sticky;
  top: 0;
  left: 12px;
  z-index: 30;

  height: var(--mobile-menu-header-h, 56px);
  display: flex;
  align-items: center;
  justify-content: center;

  transform: none;
  background: none;
  border: none;
  padding: 6px;
  line-height: 0;

  /* Key: cancel the layout space so brand does not move down */
  margin-bottom: calc(-1 * var(--mobile-menu-header-h, 56px));
}


.mobile-menu-panel > button[aria-label="Close menu"] img,
.mobile-menu-panel > button[aria-label="Close menu"] svg,
.mobile-menu-panel > .mobile-menu-close img,
.mobile-menu-panel > .mobile-menu-close svg {
    width: 22px;
    height: 22px;
    display: block;

}

    .mobile-menu-panel .menu-brand {
  position: sticky;
  top: 0;
  z-index: 10;
}

    /* PATCH: Stabilize mobile tap/focus repaint jitter inside hamburger panel */
.mobile-menu-panel .menu-link {
  backface-visibility: hidden;
  transform: translateZ(0);
  will-change: transform;
}

/* Remove paint transitions during interaction (prevents shimmer/jitter) */
.mobile-menu-panel .menu-link:active,
.mobile-menu-panel .menu-link:focus {
  transition: none !important;
}

    /* ==================================================
       MENU HEADER
    ================================================== */
    .mobile-menu-panel .menu-brand {
        display: flex;
        align-items: flex-start;
        justify-content: center;
        gap: 10px;
        padding: 0px 1px;
        background: #0f121b;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        min-height: var(--mobile-menu-header-h, 56px);
        padding-left: var(--mobile-menu-close-area, 52px);
        box-sizing: border-box;
    }

    .mobile-menu-panel .menu-brand-img {
        display: block;
        height: auto;
    }

    /* ==================================================
       MENU SECTIONS
    ================================================== */
    .menu-section {
        padding: 14px 16px;
        
    }

    .menu-section + .menu-section {
        margin-top: 12px;
    }

    /* ==================================================
       NAVIGATION
    ================================================== */
    .menu-section.navigation .menu-link {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: none;
        border: none;
        border-bottom: 1px solid rgba(255,255,255,0.06);
        padding: 12px 18px;
        font-size: 15px;
        font-weight: 600;
        color: #f4a11a;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        cursor: pointer;
        text-align: left;
    }

    /* --------------------------------------------------
       EXCEPTION: Betting Tools is NOT a section header
    -------------------------------------------------- */
    .menu-group[data-group="betting"] > .menu-link {
        color: #ffffff;
        text-transform: uppercase;
        letter-spacing: normal;
    }
       
    .menu-section.navigation .menu-link[aria-expanded="true"] {
        color: var(--color-accent, #f4a11a);
    }

    .menu-section.navigation .submenu {
        display: none;
        flex-direction: column;
        margin-top: 6px;
        padding-left: 18px;
    }

    .menu-section.navigation .submenu.open {
        display: flex;
    }

    .menu-section.navigation .submenu-item {
        background: none;
        border: none;
        padding: 8px 0;
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
        text-align: left;
        cursor: pointer;
        text-transform: uppercase;
    }

     .menu-section.navigation .submenu-item.active {
    /* keep original label style */
    color: rgba(255, 255, 255, 0.8);
    font-weight: 500;

    /* underline only (text width only) */
    text-decoration-line: underline;
    text-decoration-color: var(--cyan, #f4a11a);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px;
}

    .menu-section.navigation {
        margin-top: 1px;
    }

    /* ==================================================
       ACCOUNT
    ================================================== */
    .menu-section.account {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        align-items: center;
    }

    /* ACCOUNT heading spans full grid */
    .menu-section.account h4 {
        grid-column: 1 / -1;
        margin-bottom: 6px;
        font-size: 12px;
        letter-spacing: 0.04em;
        
    }

    /* Buttons base */
    .menu-section.account .menu-item {
        height: 44px;
        font-size: 13px;
        font-weight: 500;
        letter-spacing: 0.06em;
        border-radius: 4px;
        padding: 10px 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
    }

    /* REGISTER – filled */
    .mobile-menu-panel .menu-auth-register {
        background: #f4a11a; 
        color: #111;
    }

    /* LOGIN – outline */
    .mobile-menu-panel .menu-auth-login {
        background: transparent;
        color: #fff;
        border: 1px solid rgba(255,255,255,0.25);
    }

    /* ==================================================
       PATCH: MOBILE ACCOUNT ALIGN WITH NAV SUBMENU
       Goal:
       - Logged-in account items align visually with navigation submenu items
       - Do not affect Login/Register button styling
    ================================================== */

    /* Reset possible list indentation inside account */
    .mobile-menu-panel .menu-section.account ul,
    .mobile-menu-panel .menu-section.account ol {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mobile-menu-panel .menu-section.account li {
        margin: 0;
        padding: 0;
    }

    /* Logged-in account items: same rhythm as .submenu-item */
    .mobile-menu-panel .menu-section.account a:not(.menu-auth-login):not(.menu-auth-register),
    .mobile-menu-panel .menu-section.account button:not(.menu-auth-login):not(.menu-auth-register),
    .mobile-menu-panel .menu-section.account .menu-item:not(.menu-auth-login):not(.menu-auth-register) {
        grid-column: 1 / -1;                 /* escape 2-col grid */
        display: block;
        width: 100%;
        padding: 8px 0 8px 12px;             /* matches submenu indent */
        font-size: 14px;
        font-weight: 500;
        color: rgba(255, 255, 255, 0.8);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        background: none;
        border: none;
        text-align: left;
    }

   /* PATCH: ACCOUNT container must stay single-column (prevents conflicts) */
.mobile-menu-panel .menu-section.account {
    display: block;
    
}
/* ACCOUNT divider: inset line (not full-width) */
.mobile-menu-panel .menu-section.account {
  border-bottom: none; /* ensure no full-width border */
  position: relative;
}

.mobile-menu-panel .menu-section.account::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* PATCH: Guest auth buttons side-by-side (only inside .mobile-auth-guest) */
.mobile-menu-panel .menu-section.account .mobile-auth-guest {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
    margin-top: 16px
}

.mobile-menu-panel .menu-section.account .mobile-auth-guest .menu-auth-register,
.mobile-menu-panel .menu-section.account .mobile-auth-guest .menu-auth-login {
    width: 100%;
    min-width: 0;
}
.mobile-menu-panel .menu-section.account {
  border-bottom: 0;
}

.mobile-menu-panel .menu-section.account {
  border-bottom: 0;
}

    /* ================================
   ACCOUNT USER ROW — FIX ALIGNMENT
================================ */

/* Make header a positioned anchor like menu links */
.mobile-menu-panel .mobile-auth-user .mobile-user-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;              /* tighter spacing between icon and username */
  padding-right: 34px;   /* reserve space for caret (same logic as menu links) */
}

/* Smaller avatar */
.mobile-menu-panel .mobile-auth-user .mobile-user-avatar {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

/* Force JS-injected caret to align with other carets */
.mobile-menu-panel .mobile-auth-user .be-user-caret {
  position: absolute !important;
  right: 18px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin-left: 0 !important;   /* cancel inline margin */
  flex: 0 0 auto !important;
}
/* PATCH: Standardize user caret size to match other carets */
.mobile-menu-panel .mobile-auth-user .be-user-caret {
  border-left-width: 7px !important;
  border-right-width: 7px !important;
  border-top-width: 8px !important;
  border-bottom-width: 8px !important;
}
/* PATCH: move user caret to bottom (align with ROI row) */
.mobile-menu-panel .mobile-auth-user .be-user-caret {
  top: auto !important;
  bottom: 2px !important;   /* adjust 8–12px if needed */
  transform: none !important;
}

  
    /* ==================================================
       PREFERENCES
    ================================================== */
    .menu-section.preferences {
        margin-top: 16px;
        padding-top: 16px;
    }

    .menu-section h4 {
        font-size: 12px;
        font-weight: 600;
        color: #9aa0b3;
        margin-bottom: 6px;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .menu-link,
    .menu-item {
        width: 100%;
        text-align: left;
        padding: 12px 0;
        background: none;
        border: none;
        color: #f4a11a;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
    }

    /* PREFERENCES: inset divider under label + inset divider at section bottom */
.mobile-menu-panel .menu-section.preferences {
  position: relative;
}

/* 1) Divider directly under the Preferences label */
.mobile-menu-panel .menu-section.preferences > h4 {
  position: relative;
  margin-bottom: 10px; /* keep spacing consistent */
  padding-bottom: 10px;
}

.mobile-menu-panel .menu-section.preferences > h4::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}

/* 2) Divider at the bottom of Preferences section */
.mobile-menu-panel .menu-section.preferences::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 0;
  height: 1px;
  background: rgba(255, 255, 255, 0.06);
}


    /* --------------------------------------------------
       Odds Format & Language — VISUALLY SECONDARY LABELS
       (Mobile only, label/trigger only)
    -------------------------------------------------- */
    .menu-section.preferences .menu-item.menu-odds,
    .menu-section.preferences .menu-item.menu-lang {    
        font-size: 11.5px;        /* smaller than section headers */
        font-weight: 500;       /* reduced emphasis */
        letter-spacing: 0.02em; /* tighter text */
        /* color intentionally NOT overridden*/
        padding-left: 16px;
    }

    /* =====================================================
       MOBILE — LANGUAGE ICON (LABEL ONLY)
       Visual-only enhancement
    ===================================================== */
    .menu-section.preferences .menu-item.menu-lang {
        display: flex;
    /* REQUIRED for ::before visibility */
        align-items: center;
        gap: 8px; /* icon ↔ text spacing */
    }

    .menu-section.preferences .menu-item.menu-lang::before {
        content: "";
        width: 16px;
        height: 16px;
        display: inline-block;
        background-image: url("../assets/icons/language.svg");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
        opacity: 0.9;
        flex-shrink: 0;
    }

    /* ==================================================
       NAVIGATION CARETS — SINGLE SOURCE OF TRUTH
       Mobile Only | OddsPortal-aligned
    ================================================== */

    /* Reserve space + anchor */
    .menu-group[data-group="community"] > .menu-link,
    .menu-group[data-group="bookmakers"] > .menu-link,
    .menu-group[data-group="premium"] > .menu-link,
    .menu-group[data-group="betting"] > .menu-link,
    .menu-section.preferences .menu-item.menu-odds,
    .menu-section.preferences .menu-item.menu-lang {
        position: relative;
        padding-right: 34px;
    }

    /* Shared caret geometry */
    .menu-group[data-group="community"] > .menu-link::after,
    .menu-group[data-group="bookmakers"] > .menu-link::after,
    .menu-group[data-group="premium"] > .menu-link::after,
    .menu-group[data-group="betting"] > .menu-link::after,
    .menu-section.preferences .menu-item.menu-odds::after,
    .menu-section.preferences .menu-item.menu-lang::after {
        content: "";
        position: absolute;
        right: 18px;
        top: 50%;
        transform: translateY(-50%);
        width: 0;
        height: 0;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-top: 8px solid currentColor;
        pointer-events: none;
    }

    /* Betting Tools — caret must stay gray (non inherit) */
    .menu-group[data-group="betting"] > .menu-link::after {
        border-top-color: rgba(255, 255, 255, 0.45);
    }

    /* Odds Format & Language — WHITE label */
    .menu-section.preferences .menu-item.menu-odds,
    .menu-section.preferences .menu-item.menu-lang {
        color: #ffffff;
    }

    /* Preferences value color (OddsPortal) — hard isolation */
    .mobile-menu-panel .menu-section.preferences .menu-item.menu-odds strong,
    .mobile-menu-panel .menu-section.preferences .menu-item.menu-lang strong,
    .mobile-menu-panel .menu-section.preferences .menu-item.menu-odds .value,
    .mobile-menu-panel .menu-section.preferences .menu-item.menu-lang .value {
        color: #f4a11a;
    }

    /* Odds Format & Language — value text isolation (FIX) */
    .menu-section.preferences .menu-item.menu-odds strong,
    .menu-section.preferences .menu-item.menu-lang strong {
        color: #f4a11a;
    }

    /* Odds Format & Language — ORANGE caret */
    .menu-section.preferences .menu-item.menu-odds::after,
    .menu-section.preferences .menu-item.menu-lang::after {
        border-top-color: #f4a11a;
    }

    /* Open state (modern browsers): rotate caret UP when submenu is open */
    .mobile-menu-panel .menu-group:has(> .submenu.open) > .menu-link::after {
        transform: translateY(-50%) rotate(180deg);
    }



/* ==================================================
   MODALS — MOBILE (Enterprise Order)
   Scope:
   - Base overlay
   - Overlay states
   - Bottom-sheet containers (Odds / Language)
   - Generic modal container
   - Header / Body behavior
   - Items UI
   - Z-index rules
================================================== */

/* ==================================================
   1. BASE MODAL OVERLAY
================================================== */
.be-modal-overlay {
    display: flex;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
    align-items: center;
    justify-content: center;
    z-index: 3000;
    pointer-events: none;
    opacity: 0;
    transition: opacity .22s ease;
}

/* ==================================================
   2. OVERLAY ALIGNMENT (Bottom Sheet Only)
================================================== */
#mobile-odds-modal,
#mobile-language-modal {
    align-items: flex-end !important;
}

/* ==================================================
   3. OVERLAY ACTIVE STATE
================================================== */
.be-modal-overlay.show {
    display: flex;
    pointer-events: auto;
    opacity: 1;
}

/* ==================================================
   4. BOTTOM-SHEET CONTAINER (Odds / Language)
================================================== */
#mobile-odds-modal .be-modal,
#mobile-language-modal .be-modal {
    width: 100vw;
    max-width: 100vw;
    max-height: 92vh;
    border-radius: 18px 18px 0 0;
    transform: translateY(100%);
    transition: transform .75s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
}

/* ==================================================
   5. BOTTOM-SHEET OPEN STATE
================================================== */
#mobile-odds-modal.show.is-open .be-modal,
#mobile-language-modal.show.is-open .be-modal {
    transform: translateY(0);
}

/* ==================================================
   6. GENERIC MODAL CONTAINER
================================================== */
.be-modal {
    width: 92%;
    max-width: 360px;
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    background: #11141d;
    border-radius: 12px;
    overflow: hidden;
}

/* ==================================================
   7. MODAL HEADER (Sticky)
================================================== */
.be-modal-header {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    min-height: 56px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: #11141d;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* ==================================================
   8. MODAL BODY (Scrollable)
================================================== */
.be-modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 16px 14px;
}
   
/* ==================================================
   SCROLL RULES — ENTERPRISE CLARITY
   Odds: no scroll
   Language: internal scroll
================================================== */

/* Odds list is short → no scroll */
#mobile-odds-modal .be-modal-body {
    overflow-y: hidden;
}

/* Language list is long → allow scroll */
#mobile-language-modal .be-modal-body {
    overflow-y: auto;
}

/* Extra comfort for long language lists */
.be-modal-body.modal-language {
    max-height: calc(82vh - 56px);
}

   /* Odds modal — fixed height, no internal scroll */
.be-modal-body.modal-odds {
    overflow: hidden;
}

/* Language modal — scroll enabled for long lists */
.be-modal-body.modal-language {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==================================================
   9. MODAL ITEMS
================================================== */
.be-modal-item {
    width: 100%;
    min-height: 48px;
    padding: 14px 18px;
    display: flex;
    align-item: center;
    border-radius: 10px;
    background: #151827;
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: #ffffff;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.08s;
}

.be-modal-item:hover {
    background: #1c2033;
    border-color: rgba(255, 255, 255, 0.18);
}

.be-modal-item.active {
    background: #ffec00;
    color: #11141d;
    border-color: #ffec00;
    font-weight: 600;
}
   .be-modal-item.active {
    box-shadow: 0 6px 18px rgba(255,236,0,0.25);
}

/* ==================================================
   10. AUTH OVERLAY PRIORITY
================================================== */
.be-auth-overlay {
    z-index: 4000;
}

/* ==================================================
   11. SLIDE-UP SHEET PATCH (Odds / Language ONLY)
   Does NOT affect other modals
================================================== */
#mobile-odds-modal.be-modal-overlay.show,
#mobile-language-modal.be-modal-overlay.show {
    opacity: 0;
    transition: opacity .22s ease;
}

#mobile-odds-modal.be-modal-overlay.show.is-open,
#mobile-language-modal.be-modal-overlay.show.is-open {
    opacity: 1;
}

#mobile-odds-modal .be-modal,
#mobile-language-modal .be-modal {
    transform: translateY(24px);
    opacity: 0;
    transition: transform .56s ease, opacity .35s ease-out;
    will-change: transform, opacity;
}

#mobile-odds-modal.be-modal-overlay.show.is-open .be-modal,
#mobile-language-modal.be-modal-overlay.show.is-open .be-modal {
    transform: translateY(0);
    opacity: 1;
}


    /* ==================================================
   SLIDE-UP SHEET (Odds / Language only)
   Scope: mobile-only, does not affect other modals
================================================== */
#mobile-odds-modal.be-modal-overlay.show,
#mobile-language-modal.be-modal-overlay.show {
    opacity: 0;
    transition: opacity .30s ease;
}

#mobile-odds-modal.be-modal-overlay.show.is-open,
#mobile-language-modal.be-modal-overlay.show.is-open {
    opacity: 1;
}

#mobile-odds-modal .be-modal,
#mobile-language-modal .be-modal {
    transform: translateY(24px);
    opacity: 0;
    transition: transform .22s ease, opacity .22s ease;
    will-change: transform, opacity;
}

#mobile-odds-modal.be-modal-overlay.show.is-open .be-modal,
#mobile-language-modal.be-modal-overlay.show.is-open .be-modal {
    transform: translateY(0);
    opacity: 1;
}

   

       /* ======================================================
       MOBILE HEADER – SPORTS ROW (ROW 2)
       FINAL RULES:
       - Row 2 has different background than Row 1
       - Labels are slightly larger and white by default
       - Active changes LABEL color only (icons do not change)
       - "More" is always light orange (icon + label)
    ======================================================= */

    .mobile-sports-row {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 8px 10px;
        background: linear-gradient(180deg, #272d31, #0f1112);
        border-bottom: 1px solid rgba(255,255,255,0.06);
        height: 48px;
        overflow-x: visible;
        -webkit-overflow-scrolling: touch;
    }

    .mobile-sports-row::-webkit-scrollbar {
        display: none;
    }

    .mobile-sport-item {
        flex: 0 0 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        min-width: 50px;
        padding: 6px 4px;
        background: none;
        border: 0;
        cursor: pointer;
        z-index: 1;
    }

    /* Icons stay neutral (do not change on active) */
    .mobile-sport-item img,
    .mobile-sport-item .sport-icon {
        width: 24px;
        height: 24px;
        display: block;
    }

    /* Inline SVG neutral color */
    .mobile-sport-item .sport-icon {
        color: #ffffff;
    }

    /* Ensure svg strokes remain neutral even if parent text changes */
    .mobile-sport-item .sport-icon * {
        stroke: currentColor;
    }

    /* Label: slightly larger, white by default */
    .mobile-sport-item .sport-label {
        font-size: 12px;
        line-height: 1.1;
        font-weight: 600;
        color: #9C9C9C;
        white-space: nowrap;
        text-transform: capitalize;
    }

    /* "More" always light orange (icon + label) */
    .mobile-sport-more .sport-label {
        color: #f4a11a;
    }

    .mobile-sport-more .sport-icon {
        color: #f4a11a;
        width: 24px;
        height: 24px;
    }

    /* FIX: prevent sports row container from blocking clicks */
    .mobile-sports-row {
        pointer-events: none;
    }

    .mobile-sports-row .mobile-sport-item {
        pointer-events: auto;
    }

   /* FIX: Disable desktop header in mobile to release pointer events */
   .header-desktop {
        display: none !important;
        pointer-events: none !important;
   }

    /* =====================================================
       BETENGINE – PREMIUM FOCUS MODE (MOBILE ONLY)
       Explicit navigation targeting (FINAL)
    ===================================================== */

    /* Hide ALL menu sections */
    .mobile-menu-panel.premium-mode .menu-section {
        display: none;
    }

    /* Show ONLY Navigation section */
    .mobile-menu-panel.premium-mode .menu-section.navigation {
        display: block;
    }

    /* Inside Navigation, hide all groups */
    .mobile-menu-panel.premium-mode .menu-group {
        display: none;
    }

    /* Show ONLY Premium group */
    .mobile-menu-panel.premium-mode .menu-group[data-group="premium"] {
        display: block;
    }

    /* =====================================================
       PREMIUM – FULL SECTION VERTICAL LAYOUT (AESTHETIC ONLY)
       Scope: Mobile menu → Premium
    ===================================================== */

    /* Premium group becomes a vertical section */
    .mobile-menu-panel.premium-mode
    .menu-group[data-group="premium"] {
        display: flex;
        flex-direction: column;
        gap: 14px;               /* consistent vertical rhythm */
    }

    /* Premium submenu becomes a clean vertical list */
    .mobile-menu-panel.premium-mode
    .menu-group[data-group="premium"]
    .submenu[data-subnav="premium"] {
        display: flex;
        flex-direction: column;
        gap: 10px;               /* one item per row */
        margin-top: 8px;
        padding-left: 0;         /* remove dropdown indentation */

        max-height: none;
        overflow: visible;
    }

    /* Premium items: full-width, left-aligned */
    .mobile-menu-panel.premium-mode
    .menu-group[data-group="premium"]
    .submenu-item {
        width: 100%;
        text-align: left;
        padding: 10px 0;
    }
/* ==================================================
   BOOKMARKS (MY LEAGUES) — TOP RIGHT PANEL
   - Width: 75vw (anchored to right)
   - Height: 40vh (fixed)
   - Internal scroll in body
================================================== */

#mobile-bookmarks-modal {
    align-items: flex-start !important;
    justify-content: flex-end !important;
    padding: 0 !important;
}

#mobile-bookmarks-modal .be-modal {
    width: min(75vw, 560px);
    height: 20vh;
    max-height: 40vh;
    margin: 0 !important;

    position: relative;
    top: 0;
    right: 0;

    border-radius: 18px;
}

#mobile-bookmarks-modal .be-modal-header {
    position: sticky;
    top: 0;
    z-index: 2;
}

#mobile-bookmarks-modal .be-modal-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    max-height: calc(40vh - 56px);
    padding: 16px 14px;
}

    /* ==================================================
   BOOKMARKS HEADER — ICON LEFT + THIN DIVIDER
================================================== */

/* Ensure header layout matches OddsPortal */
#mobile-bookmarks-modal .be-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Title: icon on the left, text pushed right */
#mobile-bookmarks-modal .be-modal-header h2,
#mobile-bookmarks-modal .be-modal-header .be-modal-title,
#mobile-bookmarks-modal .be-modal-header .title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}

/* Bookmark icon (OddsPortal-style) */
#mobile-bookmarks-modal .be-modal-header h2::before,
#mobile-bookmarks-modal .be-modal-header .be-modal-title::before,
#mobile-bookmarks-modal .be-modal-header .title::before {
  content: "★";
  display: inline-block;
  font-size: 18px;
  line-height: 1;
  color: #f5b400;
}

    #mobile-bookmarks-modal .be-modal {
  background-image: linear-gradient(180deg, rgb(39, 45, 49) 0%, rgb(10, 12, 18) 100%);
}

/* ===== BOOKMARKS MODAL: footer action aligned + divider ===== */
#mobile-bookmarks-modal .be-modal-footer{
  border-top: 1px solid rgba(255,255,255,.08);
  padding: 12px 14px;
}

#mobile-bookmarks-modal .be-modal-footer-link{
  display: block;
  width: 100%;
  text-align: left;
  color: rgba(255,255,255,.9);
  text-decoration: none;
  font-size: 14px;
  letter-spacing: .02em;
}

#mobile-bookmarks-modal .be-modal-footer-link:hover{
  color: var(--text-secondary, #00eaff);
}

  /* ==================================================
   MY COUPON (MOBILE) — TOP RIGHT PANEL (Enterprise)
   - Width: 75vw
   - Height: 30vh
   - Body scroll only
   - Footer pinned at bottom (like bookmarks)
   - Divider lines
================================================== */

#mobile-coupon-modal{
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 0 !important;
}

/* Panel */
#mobile-coupon-modal .be-modal{
  width: min(75vw, 560px);
  height: 20vh;
  max-height: 50vh;
  margin: 0 !important;

  border-radius: 16px;
  background-image: linear-gradient(180deg, rgb(39, 45, 49) 0%, rgb(10, 12, 18) 100%);
  overflow: hidden;

  /* KEY: split into header/body/footer layout */
  display: flex;
  flex-direction: column;
}

/* HEADER: icon + label in one line */
#mobile-coupon-modal .be-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;

  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

/* Left side */
#mobile-coupon-modal .be-modal-title{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* Icon sizing + gold color (IMG via filter) */
#mobile-coupon-modal .be-modal-title-icon{
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  filter: brightness(0) saturate(100%) invert(74%) sepia(55%) saturate(1900%) hue-rotate(2deg) brightness(102%) contrast(103%);
}

/* BODY: scroll area only */
#mobile-coupon-modal .be-modal-body{
  flex: 1 1 auto; /* KEY: consume remaining height */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 14px;
}

/* FOOTER: pinned at bottom (outside scroll) */
#mobile-coupon-modal .be-modal-footer{
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding: 10px 14px;
}

#mobile-coupon-modal .be-modal-footer-link{
  display: block;
  width: 100%;
  text-align: left;
  text-decoration: underline;
  color: rgba(0,234,255,0.9);
}

#mobile-coupon-modal .be-modal-footer-link:hover{
  color: rgba(0,234,255,1);
}

/* ==================================================
   NOTIFICATIONS (MOBILE) — TOP RIGHT PANEL (same as Bookmarks/Coupon)
   - Width: 75vw
   - Height: 40vh (same as Bookmarks; use 30vh if you prefer Coupon height)
   - Body scroll only
   - Header divider, title icon 18px gold (via filter)
================================================== */

#mobile-notifications-modal {
  align-items: flex-start !important;
  justify-content: flex-end !important;
  padding: 0 !important;
  background: transparent !important;
}

#mobile-notifications-modal .be-modal {
  width: min(75vw, 560px);
  height: 15vh;           /* use 30vh if you want Coupon height */
  max-height: 40vh;
  margin: 0 !important;

  border-radius: 16px;
  background-image: linear-gradient(180deg, rgb(39, 45, 49) 0%, rgb(10, 12, 18) 100%);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Header matches Bookmarks/Coupon */
#mobile-notifications-modal .be-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

/* Title layout (icon + label) */
#mobile-notifications-modal .be-modal-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  line-height: 1;
  white-space: nowrap;
}

/* Icon sizing + gold tint (same filter used on Coupon icon IMG) */
#mobile-notifications-modal .be-modal-title-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  display: block;
  filter: brightness(0) saturate(100%) invert(74%) sepia(55%) saturate(1900%) hue-rotate(2deg) brightness(102%) contrast(103%);
}

/* Body scroll area */
#mobile-notifications-modal .be-modal-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 12px 16px;
}

/* Placeholder text style (optional, mirrors others) */
#mobile-notifications-modal .be-modal-placeholder {
  color: rgba(255,255,255,0.7);
  font-size: 14px;
}