/* ============================================================
   GG.CS Sports — responsive (mobile-first)
   Themes via html[data-theme="dark" | "day"]  (localStorage: theme)
   Tokens from Figma: Montserrat / #F59216 accent
   ============================================================ */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent
}

html, body {
    height: 100%
}

body {
    font-family: 'Montserrat',sans-serif;
    background: var(--bg);
    color: var(--text);
    -webkit-font-smoothing: antialiased;
    overscroll-behavior-y: none
}

button {
    font-family: inherit;
    border: 0;
    background: none;
    cursor: pointer;
    color: inherit
}

svg {
    display: block
}

/* ---------------- THEME TOKENS ---------------- */
html[data-theme="dark"] {
    --bg: #171717;
    --ftfh-bg: #262626;
    --header-bg: #2C2C2C;
    --header-shadow: 0 2px 2px rgba(0,0,0,.25);
    --text: #FFFFFF;
    --text-2: #E2E2E2;
    --muted: #9D9D9D;
    --accent: #F59216;
    --red: #EB545A;
    --tab-bg: #252525;
    --tab-text: #9D9D9D;
    --tab-badge: #474747;
    --lcard-bg: #252525;
    --lcard-text: #FFFFFF;
    --lcard-bar: #474747;
    --card-overlay: rgba(39, 39, 39, 0.6);
    --card-text: #FFFFFF;
    --card-time: #FFFFFF;
    --card-icon: #D9D9D9;
    --bc-ic-idle: #7f7f7f;
    --odds-bg: rgba(113, 113, 113, 0.5);
    --mkt-label: #FFFFFF;
    --odds-label: #FFFFFF;
    --nav-bg: #252525;
    --nav-ic: #D9D9D9;
    --nav-text: #FFFFFF;
    --toggle-pill: #1C1C1C;
    --score-bg: rgba(113, 113, 113, 0.5);
    --score-text: rgba(255, 255, 255, 1);
    --pad: 8px; /* page side padding */
    --lhead-bar: #252525;
    --matchcard-team: #E2E2E2;
    --bctop-bg: #14141473;
    --filter-fil: none;
    --MoreBet-bg: #171717;
    --MoreMkt-txt: #252525;
    --theme-bar: #F59216;
    --hide-balance: #fff;
    --border-line: 1px solid #4c4c4c;
    --MyBetHead-txt: #ffffffb3;
}

html[data-theme="day"] {
    --bg: #E9E9E9;
    --ftfh-bg: #e6e6e6;
    --header-bg: #FFFFFF;
    --header-shadow: 0 2px 2px rgba(0,0,0,.25);
    --text: #3B3B3B;
    --text-2: #6D6D6D;
    --muted: #919191;
    --accent: #F59216;
    --red: #EB545A;
    --tab-bg: #FFFFFF;
    --tab-text: #6D6D6D;
    --tab-badge: #6D6D6D;
    --lcard-bg: #FFFFFF;
    --lcard-text: #251B1B;
    --lcard-bar: #B4B4B4;
    --card-overlay: rgba(255, 255, 255, 0.8);
    --card-text: #3B3B3B;
    --card-time: #6D6D6D;
    --card-icon: #6D6D6D;
    --bc-ic-idle: #B4B4B4;
    --odds-bg: rgba(233, 233, 233, 1);
    --mkt-label: #3B3B3B;
    --odds-label: #6D6D6D;
    --nav-bg: #FFFFFF;
    --nav-ic: #6D6D6D;
    --nav-text: #6D6D6D;
    --toggle-pill: #B4B4B4;
    --score-bg: rgba(233, 233, 233, 1);
    --score-text: rgba(109, 109, 109, 1);
    --pad: 8px;
    --lhead-bar: #F59216;
    --matchcard-team: #3B3B3B;
    --bctop-bg: rgba(244, 244, 244, 1);
    --filter-fil: brightness(0) saturate(100%) invert(40%) sepia(34%) saturate(0%) hue-rotate(171deg) brightness(99%) contrast(87%);
    --MoreBet-bg: #fff;
    --MoreMkt-txt: #fff;
    --theme-bar: #fff;
    --hide-balance: #252525;
    --border-line: 1px solid #4c4c4c14;
    --MyBetHead-txt: #3B3B3B;
}

@media (min-width:900px) {
    html[data-theme="dark"], html[data-theme="day"] {
        --pad: clamp(16px,3.5vw,60px)
    }
}

.app {
    width: 100%;
    min-height: 100vh;
    background: var(--bg);
    position: relative
}

/* ============================================================
   STICKY HEAD — topbar + filter tabs + league strip stay pinned;
   only the sections below scroll vertically.
   ============================================================ */
.sticky-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--bg)
}

/* ================= TOPBAR ================= */
.topbar {
    height: 60px;
    background: var(--header-bg);
    box-shadow: var(--header-shadow);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 var(--pad) 0 max(6px,calc(var(--pad) - 6px))
}

.brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0
}

.brand-ball {
/*    width: 48px;
    height: 48px;*/
    flex: 0 0 auto
}

.hello {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px
}

.wallet {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: 2px
}

.ic-eye {
    width: 16px;
    height: 16px;
    fill: var(--hide-balance);
    cursor: pointer
}

.wallet .cur {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent)
}

.wallet .amt {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent) !important;
    letter-spacing: .3px
}

/* desktop header nav (hidden on mobile) */
.header-nav {
    display: none
}

.top-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 0 0 auto
}

.tg-wrap, .flag-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px
}

.tg-label, .flag-label {
    display: none;
    font-size: 11px;
    font-weight: 700;
    color: var(--text)
}

/* theme toggle pill (60x30, knob 26) */
.theme-toggle {
    width: 60px;
    height: 30px;
    border-radius: 30px;
    background: var(--toggle-pill);
    box-shadow: inset 0 4px 4px rgba(0,0,0,.25);
    position: relative;
    transition: background .25s
}

    .theme-toggle .knob {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: var(--theme-bar);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: transform .25s ease
    }

        .theme-toggle .knob svg {
            width: 18px;
            height: 18px
        }

html[data-theme="dark"] .theme-toggle .knob {
    transform: translateX(30px)
}

html[data-theme="dark"] .ic-sun {
    display: none
}

html[data-theme="day"] .ic-moon {
    display: none
}

.flag {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 0 0 1px rgba(0,0,0,.15)
}

    .flag img, .flag svg {
        width: 100%;
        height: 100%;
        object-fit: cover
    }

/* bet success/fail toast (#tip_cust88, positioned by the old CSS) — just make
   sure it layers above the new header (50) and bottom-nav (60) */
#tip_cust88 {
    z-index: 99999;
}

/* ===== language picker dropdown (flag click) ===== */
.flag-wrap {
    position: relative
}

.lang-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 168px;
    max-height: 60vh;
    overflow-y: auto;
    display: none;
    padding: 6px;
    background: var(--header-bg, #2C2C2C);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0,0,0,.45);
    z-index: 200;
    list-style: none
}

    .lang-menu.open {
        display: block
    }

    .lang-menu li {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 8px 10px;
        border-radius: 8px;
        cursor: pointer;
        white-space: nowrap;
        font: 600 13px/1 Montserrat, sans-serif;
        color: var(--text, #fff)
    }

        .lang-menu li:hover {
            background: rgba(150,150,150,.16)
        }

        .lang-menu li.active {
            background: var(--accent);
            color: #fff
        }

    .lang-menu .lang-flag {
        width: 22px;
        height: 22px;
        border-radius: 50%;
        object-fit: cover;
        flex: 0 0 auto;
        box-shadow: 0 0 0 1px rgba(0,0,0,.15)
    }

html[data-theme="day"] .lang-menu {
    background: #FFFFFF;
    border-color: rgba(0,0,0,.12)
}

.flag svg {
    width: 100%;
    height: 100%
}

/* ================= FILTER TABS ================= */
.filter-tabs {
    display: flex;
    gap: 8px;
    padding: 12px var(--pad);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    background: var(--bg)
}

    .filter-tabs::-webkit-scrollbar {
        display: none
    }

.tab {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    background: var(--tab-bg);
    color: var(--tab-text);
    font-size: 12px;
    font-weight: 700;
    transition: background .2s,color .2s
}

    .tab .t-ic {
        width: 16px;
        height: 16px;
        color: currentColor;
        fill: #9D9D9D;
    }

    .tab .badge {
        min-width: 24px;
        height: 18px;
        padding: 0 6px;
        border-radius: 999px;
        background: var(--tab-badge);
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center
    }
.filter-tabs .tab{
    width:unset;
}
.tab.active {
    background: var(--accent);
    color: #fff
}

        .tab.active .t-ic {
            color: #fff;
            fill:#fff;
        }

        .tab.active .badge {
            background: var(--red)
        }

    .tab .t-ic.run {
        color: var(--red)
    }

    .tab.active .t-ic.run {
        color: #fff
    }

    /* a filter tab with no data (empty/0 badge): dimmed + not clickable */
    .tab.tab-empty {
        opacity: .4;
        pointer-events: none;
        cursor: default
    }

/* ================= LEAGUE CAROUSEL ================= */
.league-strip {
    position: relative;
    padding: 0 var(--pad) 10px;
    background: var(--bg)
}

.league-scroll {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch
}

    .league-scroll::-webkit-scrollbar {
        display: none
    }

.league-card {
    flex: 0 0 210px;
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    background: var(--lcard-bg);
    color: var(--lcard-text);
    border-radius: 5px;
    padding: 8px 10px 8px 14px;
    min-height: 56px;
    border: 2px solid transparent;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    cursor: pointer;
    overflow: hidden
}
    /* thick left bar: grey by default, orange when selected (pic 2) */
    .league-card::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 6px;
        background: var(--lcard-bar);
        transition: background .2s
    }

    .league-card.active {
        border-color: var(--accent)
    }

        .league-card.active::before {
            background: var(--accent)
        }

.lc-logo {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 5px;
    overflow: hidden
}

    .lc-logo svg, .lc-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius:50%;
        background:#fff;
    }

.lc-name {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.25;
    text-transform: uppercase
}

.lc-count {
    position: absolute;
    top: 0;
    right: 0;
    background: var(--lcard-bar);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    min-width: 18px;
    height: 16px;
    padding: 0 4px;
    border-radius: 0 3px 0 5px;
    display: flex;
    align-items: center;
    justify-content: center
}

.active .lc-count {
    background: var(--accent);
}
/* ">>" overlays the cards at the right edge — no reserved space */
.league-more {
    position: absolute;
    right: var(--pad);
    top: 0;
    bottom: 10px;
    width: 26px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    filter: drop-shadow(0 0 3px rgba(0,0,0,.55))
}

    .league-more svg {
        width: 22px;
        height: 22px
    }

/* left-scroll affordance: mirror of ">>", shown once scrolled right */
.league-more, .league-less {
    transition: opacity .2s
}

.league-less {
    right: auto;
    left: var(--pad);
    border: 0;
    background: none;
    padding: 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none
}

    .league-less.show {
        opacity: 1;
        pointer-events: auto
    }

.league-more.hide {
    opacity: 0;
    pointer-events: none
}

/* ================= LEAGUE SECTION ================= */
.league-section {
    padding: 0 var(--pad)
}

    .league-section + .league-section {
        margin-top: 8px
    }

.league-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    background: var(--lhead-bar);
    color: #fff;
    border-radius: 5px;
    padding: 10px 12px;
    cursor: pointer;
    user-select: none
}

    .league-head h2 {
        font-size: 12px;
        font-weight: 800;
        line-height: 1.35;
        text-transform: uppercase
    }

    .league-head .chev {
        flex: 0 0 auto;
        transition: transform .25s
    }

        .league-head .chev svg {
            width: 25px;
            height: 25px
        }

.league-section.collapsed .chev {
    transform: rotate(180deg)
}

.league-section.collapsed .cards {
    display: none
}

/* ================= BET CARDS (responsive grid) ================= */
.cards {
    display: grid;
    grid-template-columns: repeat(auto-fill,minmax(min(340px,100%),1fr));
    gap: 10px;
    padding: 5px 0 0
}

.bet-card {
    position: relative;
    border-radius: 5px;
    overflow: hidden;
    color: var(--card-text);
    background-size: cover;
    background-position: center;
    --card-pad-x: 15px;
    --card-pad-t: 8px;
    padding: var(--card-pad-t) var(--card-pad-x) 10px;
    min-height: 190px; /* your new height */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* <-- spreads the rows to fill the card */
}


    .bet-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: var(--card-overlay)
    }

    .bet-card > * {
        position: relative
    }


/* -- row 1 : live time + icon strip -- */
.bc-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-inline: calc(-1 * var(--card-pad-x)); /* out to left & right edges */
    margin-top: calc(-1 * var(--card-pad-t)); /* up to the top edge */
    padding: var(--card-pad-t) var(--card-pad-x); /* keep content off the edges */
    background: var(--bctop-bg);
}

.bc-live {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 12px;
    font-weight: 400;
    color: var(--card-time)
}

.ic-live {
    width: 16px;
    height: 16px;
    color: var(--red)
}

.bc-icons {
    display: flex;
    align-items: center;
    gap: 10px
}

    /* inline-SVG card icons (fav / parlay / cashout / stream / center / forecast /
       info). Idle = grey (--bc-ic-idle); "has data" = accent. tv/lc use .has-src
       (also drives their click handlers); the star uses .on (favorited). */
    .bc-icons .bc-ic {
        width: 14px;
        height: 14px;
        color: var(--bc-ic-idle);
        cursor: pointer
    }

        .bc-icons .bc-ic.act,
        .bc-icons .bc-ic.has-src,
        .bc-icons .js-fav.on {
            color: var(--accent);
            opacity: 1;
        }

.plus-mkts {
    background: var(--accent);
    color: var(--MoreMkt-txt);
    font-size: 12px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 5px
}

/* -- row 2 : logos / score / names -- */
.bc-mid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    /*margin-top: 6px;*/
    margin-top: unset;
    gap: 6px;
    height: 60%;
    padding: 10px 0;
}

.bet-card .team {
    display: flex;
    flex-direction: column;
    gap: 0px;
    min-width: 0;
    max-width: 130px; /* keep the column narrow, off the center */
}

    .bet-card .team.home {
        justify-self: start; /* hug the left edge */
    }

    .bet-card .team.away {
        justify-self: end;
        align-items: flex-end;
        text-align: right
    }

.t-logo {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
    background: #f4f4f5;
}

    .t-logo svg, .t-logo img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        filter: drop-shadow( .5px 0 0 rgba(0,0,0,.35)) drop-shadow(-.5px 0 0 rgba(0,0,0,.35)) drop-shadow( 0 .5px 0 rgba(0,0,0,.35)) drop-shadow( 0 -.5px 0 rgba(0,0,0,.35));   
    }

.red-card {
    display: inline-block;
    min-width: 14px;
    padding: 0 3px;
    border-radius: 3px;
    background: var(--red);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    text-align: center;
    vertical-align: middle
}

.t-name {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0,0,0,.25);
    color: var(--matchcard-team);
    max-width: 110px; /* forces the wrap under the logo */
    display: -webkit-box;
    -webkit-line-clamp: 2; /* never more than 2 lines */
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 10px;
}

html[data-theme="day"] .t-name {
    text-shadow: none
}

.score {
    display: flex;
    gap: 6px;
    padding-top: 2px
}

    .score b {
        width: 30px;
        height: 38px;
        border-radius: 5px;
        background: var(--score-bg);
        color: var(--score-text);
        font-size: 14px;
        font-weight: 500;
        display: flex;
        align-items: center;
        justify-content: center
    }

/* centre column of bc-mid: score on top, market label directly beneath it */
.bc-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 96px;
}

/* -- market label -- */
.mkt-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--accent);
    text-align: center;
    white-space: nowrap;
    min-height: 15px;
    position: absolute;
    bottom: 5px;
}

    .mkt-label::before, .mkt-label::after {
        content: '';
        width: 14px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px
    }

/* -- odds row (swipeable) -- */
.mkt-wrap {
    position: relative; /* anchor the edge arrows so they overlay the side padding */
    display: flex;
    align-items: center;
    gap: 4px
}

.mkt-view {
    flex: 1;
    overflow: hidden;
    touch-action: pan-y
}

.odds-row {
    display: flex;
    gap: 6px
}

.odd-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    height: 34px;
    padding: 0 10px;
    border-radius: 5px;
    background: var(--odds-bg);
    backdrop-filter: blur(.5px);
    transition: background .15s;
    min-width: 0
}

    .odd-btn .l {
        font-size: 12px;
        font-weight: 600;
        color: var(--odds-label);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .odd-btn .v {
        font-size: 12px;
        font-weight: 700;
        color: var(--accent);
        white-space: nowrap
    }

    .odd-btn.selected {
        background: var(--accent)
    }

        .odd-btn.selected .l, .odd-btn.selected .v {
            color: #fff
        }

    .odd-btn.locked {
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: not-allowed;
        opacity: .55
    }

        .odd-btn.locked .lock-ic {
            width: 15px;
            height: 15px;
            margin: 0 auto;
            color: var(--odds-label)
        }

.mkt-next {
    position: absolute;
    top: 50%;
    right: calc(-1 * var(--card-pad-x)); /* sit in the card's right padding */
    transform: translateY(-50%);
    width: 16px;
    height: 34px;
    color: var(--accent);
    opacity: .9;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center
}

    .mkt-next svg {
        width: 14px;
        height: 14px
    }

/* prev (left) arrow: absolute in the card's LEFT padding so it overlays instead
   of shrinking .mkt-view. Hidden on page 1; fades in on page 2+ (.has-prev)
   until you swipe back to page 1. Mirrors .mkt-next, glyph flipped. */
.mkt-prev {
    position: absolute;
    top: 50%;
    left: calc(-1 * var(--card-pad-x)); /* sit in the card's left padding */
    transform: translateY(-50%);
    width: 16px;
    height: 34px;
    color: var(--accent);
    opacity: 0;
    z-index: 2;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .15s ease
}

.mkt-wrap.has-prev .mkt-prev {
    opacity: .9;
    pointer-events: auto
}

.mkt-prev svg {
    width: 14px;
    height: 14px;
    transform: scaleX(-1)
}

/* market slide animation */
@keyframes slideInR {
    from {
        transform: translateX(60px);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

@keyframes slideInL {
    from {
        transform: translateX(-60px);
        opacity: 0
    }

    to {
        transform: none;
        opacity: 1
    }
}

.anim-r .odds-row {
    animation: slideInR .22s ease
}

.anim-l .odds-row {
    animation: slideInL .22s ease
}

/* ================= BOTTOM NAV (mobile) ================= */
.bottom-space {
    height: 78px
}

.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 62px;
    background: var(--nav-bg);
    display: flex;
    z-index: 60;
    box-shadow: 0 -2px 6px rgba(0,0,0,.25);
    border-radius: 20px 20px 0 0;
}

    .bottom-nav .nav-item {
        flex: 1
    }

.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: var(--nav-text);
    transition: background .2s,color .2s
}

    .nav-item svg {
        width: 20px;
        height: 20px;
        color: var(--nav-ic)
    }

    .nav-item span {
        font-size: 10px;
        font-weight: 700
    }

    .nav-item.betslip svg {
        color: var(--accent)
    }

    /* --- bet-slip nav: count badge, empty (dimmed) state, land bump --- */
    .nav-item.betslip {
        position: relative
    }

        /* box hugging just the icon SVG so the count badge anchors to the
           icon's top-right corner, not the whole nav button */
        .nav-item.betslip .nav-ic {
            position: relative;
            display: inline-flex;
            line-height: 0;
            font-style: normal
        }

        .nav-item.betslip .slip-count {
            display: none;
            position: absolute;
            top: -6px;
            right: -8px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 999px;
            background: var(--red);
            color: #fff;
            font: 800 10px/16px Montserrat, sans-serif;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .4)
        }

            .nav-item.betslip .slip-count.show {
                display: inline-block
            }

        .nav-item.betslip.is-empty {
            opacity: .4;
            pointer-events: none
        }

        .nav-item.betslip.bump {
            animation: slipBump .3s ease
        }

    /* --- My Bets / Running nav: running-ticket count badge (legacy Runningbadge) --- */
    .nav-item[data-nav="mybet"] {
        position: relative
    }

        /* box hugging just the icon SVG so the count badge anchors to the
           icon's top-right corner, not the whole nav button */
        .nav-item[data-nav="mybet"] .nav-ic {
            position: relative;
            display: inline-flex;
            line-height: 0;
            font-style: normal
        }

        .nav-item[data-nav="mybet"] .run-count {
            display: none;
            position: absolute;
            top: -6px;
            right: -8px;
            min-width: 16px;
            height: 16px;
            padding: 0 4px;
            border-radius: 999px;
            background: var(--red);
            color: #fff;
            font: 800 10px/16px Montserrat, sans-serif;
            text-align: center;
            box-shadow: 0 1px 3px rgba(0, 0, 0, .4)
        }

            .nav-item[data-nav="mybet"] .run-count.show {
                display: inline-block
            }
@keyframes slipBump {
    0%, 100% {
        transform: none
    }

    40% {
        transform: scale(1.18)
    }
}

/* dot that flies from the tapped odds to the bet-slip nav */
.bet-fly {
    position: fixed;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, .4);
    z-index: 100000;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(1);
    transition: left .6s cubic-bezier(.2, .7, .25, 1), top .6s cubic-bezier(.2, .7, .25, 1), transform .6s ease, opacity .6s ease
}

/* a full CLONE of the odds button that flies to the bet-slip nav. It keeps
   its own .odd-btn styling; this rule only makes it float + animate. The
   duration is set inline from FLY_MS in newapp.js (default .9s) so the two
   never drift — the value here is just the fallback. */
.bet-fly-clone {
    position: fixed !important;
    margin: 0 !important;
    z-index: 100000;
    pointer-events: none;
    transform-origin: center center;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .45);
    will-change: left, top, transform, opacity;
    transition: left .9s cubic-bezier(.2, .7, .25, 1), top .9s cubic-bezier(.2, .7, .25, 1), transform .9s cubic-bezier(.2, .7, .25, 1), opacity .9s ease
}
/* ticket stays orange */
.bottom-nav .nav-item.active {
    background: var(--accent);
    color: #fff
}

    .bottom-nav .nav-item.active svg,
    nav#bottomNav .active svg circle,
    nav#bottomNav .active svg path {
        color: #fff;
        fill:#fff;
    }

/* ============================================================
   NAV ICONS (ported from new_footer_svg.txt) — used by BOTH the bottom
   (mobile) nav and the header (desktop) nav. Each item ships the dark +
   day artwork; show the one matching [data-theme]. The orange (#F59216)
   accent is baked in, so it never depends on color.
   ============================================================ */
.nav-item .ftic {
    display: none;
    width: auto;
    height: 20px
}

/* header icons are a touch larger to match the desktop header */
.header-nav .nav-item .ftic {
    width: auto;
    height: 22px
}

[data-theme="dark"] .nav-item .ftic-dark {
    display: block
}

[data-theme="day"] .nav-item .ftic-day {
    display: block
}

/* BOTTOM nav only: an active item gets an orange background, so force the
   white-bodied (dark) artwork for contrast in either theme. The header nav's
   active state only recolours the label, so it keeps the theme artwork. */
.bottom-nav .nav-item.active .ftic-dark {
    display: block
}

.bottom-nav .nav-item.active .ftic-day {
    display: none
}

/* GUEST session: dim + disable the nav bars (nothing to reach until login) */
.bottom-nav.nav-guest svg, .header-nav.nav-guest svg, .bottom-nav.nav-guest span, .header-nav.nav-guest span {
    opacity: .4;
    pointer-events: none
}
.nav-guest .nav-item {
    pointer-events: none;
    cursor: default;
}
/* ============================================================
   DESKTOP  (≥900px): nav moves into topbar, bottom nav hidden,
   toggle + flag get labels, taller header (per desktop mock)
   ============================================================ */
@media (min-width:1100px) {
    .cards {
        grid-template-columns: repeat(3,1fr)
    }
    /* max 3 per row */
}

@media (min-width:900px) {
    .topbar {
        height: 76px
    }

    .brand-ball {
        width: 54px;
        height: 54px
    }

    .hello {
        max-width: 340px;
        font-size: 13px
    }

    .header-nav {
        display: flex;
        align-items: center;
        gap: 34px;
        margin-left: auto;
        margin-right: 14px
    }

        .header-nav .nav-item {
            gap: 4px
        }

            .header-nav .nav-item svg {
                width: 22px;
                height: 22px
            }

            .header-nav .nav-item span {
                font-size: 12px;
                color: var(--text)
            }

            .header-nav .nav-item.active svg {
                color: var(--accent)
            }

            .header-nav .nav-item.active span {
                color: var(--accent)
            }

            .header-nav .nav-item.betslip.active svg {
                color: var(--accent)
            }

    .tg-label, .flag-label {
        display: block
    }

    .top-actions {
        gap: 22px
    }

    .bottom-nav {
        display: none
    }

    .bottom-space {
        height: 24px
    }

    .league-card {
        flex-basis: 230px
    }
}

@media (prefers-reduced-motion:reduce) {
    * {
        animation: none !important;
        transition: none !important
    }
}

/* +74 badge is now the "more markets / openTV" trigger */
.plus-mkts {
    cursor: pointer
}

    .plus-mkts:active {
        filter: brightness(.9)
    }
/* Asian-Handicap HTML labels (HDPH/HDPA come as <span> markup) */
.odd-btn .l .Give {
    opacity: .9
}

/* Give = the feed's handicap/total line spans (HDPH/HDPA, class="Give") and the
   giving-team live score (md-hs / md-as get .Give from IHG). */
.Give {
    color: rgb(246, 103, 84);
}

.odd-btn .l span {
    font-weight: 600
}

/* ============================================================
   NAV BRIDGE — overlay for legacy pages injected by toPage(),
   back button, and a fallback loader for legacy showMsk().
   ============================================================ */

/* #pagePanel is only a mount host — keep it out of layout so the
   inline offsets legacy sets on it don't affect the shell. */
#pagePanel {
    position: static;
}

    /* each injected page (.pagePanel) is the actual full-screen overlay */
    #pagePanel > .pagePanel {
        position: fixed;
        left: 0;
        right: 0;
        top: var(--nav-head-h, 0px); /* sit BELOW the sticky header */
        bottom: var(--nav-foot-h, 0px); /* and ABOVE the bottom nav    */
        z-index: 40; /* header(50) & bottom-nav(60) stay on top */
        background: var(--MoreBet-bg, #171717);
        color: var(--text, #fff);
        overflow: auto;
        -webkit-overflow-scrolling: touch;
        transform: translateY(100%);
        opacity: 0;
        transition: transform .22s ease, opacity .22s ease;
        pointer-events: none;
    }

        #pagePanel > .pagePanel.in {
            transform: none;
            opacity: 1;
            pointer-events: auto;
        }

        /* legacy pages (wfRunning2H50 / wfStatement2H50 / wfSettingH50) swap
           straight in/out — only the match-detail panel keeps the slide */
        #pagePanel > .pagePanel:not(.match-detail) {
            transition: none;
        }

/* back / close */
#navPageBack {
    position: fixed;
    left: 12px;
    top: calc(var(--nav-head-h, 0px) + 8px); /* just under the header */
    z-index: 45; /* above panel(40), below header(50) */
    display: none;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    font: 600 13px/1 Montserrat, system-ui, sans-serif;
    cursor: pointer;
    /*box-shadow: 0 2px 8px rgba(0, 0, 0, .3);
    background: var(--accent, #F59216);*/
    box-shadow: unset;
    background: unset;
}

    #navPageBack.show {
        display: inline-flex;
    }

    #navPageBack svg {
        width: 18px;
        height: 18px;
    }
.md-pbet > #navPageBack {
    position: absolute;
    left: 6px;
    top: 4px;
    z-index: 2;
}

body.nav-page-open {
    overflow: hidden;
}

/* fallback loader for legacy showMsk() (#loading) if global.css isn't present */
#loading {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .35);
}

    #loading .icon-loading {
        width: 34px;
        height: 34px;
        border: 3px solid rgba(255, 255, 255, .3);
        border-top-color: var(--accent, #F59216);
        border-radius: 50%;
        animation: navspin .8s linear infinite;
    }

        #loading .icon-loading span {
            display: none;
        }

@keyframes navspin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================================
   MATCH DETAIL PANEL (new openTV) — accordion markets view.
   The panel frame reuses "#pagePanel > .pagePanel" (overlay, header/footer
   inset, navPageBack). These rules style its internals to match the design.
   ============================================================ */
.match-detail {
    background: var(--bg);
    font-family: Montserrat, system-ui, sans-serif;
}

/* title */
.md-head {
    background: var(--header-bg);
    padding: 12px 14px;
}

.md-title {
    color: var(--text);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    line-height: 1.35;
}

/* info strip */
.md-infobar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 8px 14px;
    background: var(--bg);
}

.md-live {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--accent);
    font-weight: 700;
    font-size: 13px;
}

    .md-live .ic-live {
        width: 16px;
        height: 16px;
    }

.md-icons {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--card-icon, #d9d9d9);
}

    .md-icons svg {
        width: 17px;
        height: 17px;
    }

    .md-icons .mini.orange {
        color: var(--accent);
    }

    .md-icons .mini.gold {
        color: #F2C230;
    }

/* badge banner */
.md-banner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: start;
    gap: 8px;
    padding: 30px 14px 18px;
    margin-top:-25px;
    /*background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.55)), var(--header-bg);*/
}

.md-team {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.md-badge, .md-badge img, .md-badge svg {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
}

.md-tname {
    color: var(--card-text, #fff);
    font-size: 12px;
    font-weight: 600;
    max-width: 120px;
}

.md-score {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: center;
    padding-top: 4px;
}

    .md-score b {
        min-width: 30px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--score-bg, #d9d9d9);
        color: var(--score-text, #252525);
        border-radius: 8px;
        font-size: 16px;
        font-weight: 800;
    }

        /* giving team (IHG) — overrides the default score colour above */
        .md-score b.Give {
            color: rgb(246, 103, 84);
        }

/* center box between the two scores: LIVE (orange) / Upcoming (green) */
.md-live-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 82px;
}

    .md-live-box .mlb-label {
        font: 800 11px/1 Montserrat, sans-serif;
        letter-spacing: .5px;
        text-transform: uppercase;
        color: var(--accent, #F59216);
    }

    .md-live-box .mlb-date {
        font: 700 10px/1.1 Montserrat, sans-serif;
        color: var(--card-text, #fff);
        white-space: nowrap;
    }

    .md-live-box .mlb-time {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 70px;
        height: 30px;
        padding: 0 12px;
        border-radius: 8px;
        font: 800 13px/1 Montserrat, sans-serif;
        background: transparent;
        white-space: nowrap;
    }

    .md-live-box.live .mlb-time {
        border: 2px solid var(--accent, #F59216);
        color: var(--accent, #F59216);
    }

    .md-live-box.upcoming .mlb-time {
        border: 2px solid #2FAE60;
        color: #2FAE60;
    }

/* FT / FH toggle */
.md-toggle {
    display: flex;
    gap: 8px;
    padding: 12px 14px;
    background: var(--ftfh-bg);
}

.md-tg {
    flex: 1;
    height: 40px;
    border: 0;
    border-radius: 20px;
    cursor: pointer;
    background: var(--tab-badge, #474747);
    color: var(--tab-text, #e2e2e2);
    font: 700 13px/1 Montserrat, sans-serif;
    text-transform: uppercase;
    letter-spacing: .3px;
}

    .md-tg.active {
        background: var(--accent);
        color: #fff;
    }

.md-drill {
    width: 44px;
    height: 40px;
    flex: 0 0 44px;
    border: 0;
    border-radius: 10px;
    cursor: pointer;
    background: var(--accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

    .md-drill svg {
        width: 20px;
        height: 20px;
    }

/* accordion sections */
.md-markets {
    padding: 0 0 24px;
}

.mkt-acc {
    border-top: 1px solid rgba(255,255,255,.06);
}

.mkt-acc-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--text);
    font: 700 13px/1 Montserrat, sans-serif;
    text-transform:uppercase;
}

    .mkt-acc-head svg {
        width: 18px;
        height: 18px;
        color: var(--muted);
        transition: transform .2s ease;
    }

.mkt-acc.open .mkt-acc-head svg {
    transform: rotate(180deg);
}

.mkt-acc-body {
    display: none;
    padding: 0 14px 14px;
}

.mkt-acc.open .mkt-acc-body {
    display: block;
}

/* odds rows / cells */
.md-line {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

    .md-line:last-child {
        margin-bottom: 0;
    }

.md-odd {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 52px;
    padding: 0 12px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    background: var(--odds-bg, #232323);
    color: var(--text);
    font-family: Montserrat, sans-serif;
}

    .md-odd .ol {
        color: var(--text);
        font-size: 13px;
        font-weight: 600;
    }

    .md-odd .ov {
        color: var(--accent);
        font-size: 14px;
        font-weight: 800;
    }

/* Asian Handicap & Asian Total rows: stack the value (.ov) under the label
       (.ol), left-aligned. 1X2 / Odd-Even / Double Chance stay horizontal. */
.md-hdp .md-odd {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0px;
}

    /* HDP label: name ellipsizes, handicap keeps full width beside it */
    .md-hdp .md-odd .ol {
        display: flex;
        align-items: baseline;
        width: 100%;
        min-width: 0;
    }

.md-hdp .ol-name {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align:left;
}

.md-hdp .ol-hdp {
    flex: 0 0 auto;
    white-space: nowrap;
}

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

.md-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 52px;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
    background: var(--odds-bg, #232323);
    color: var(--text);
    font-family: Montserrat, sans-serif;
}

    .md-cell .ol {
        color: var(--muted);
        font-size: 12px;
        font-weight: 600;
    }

    .md-cell .ov {
        color: var(--accent);
        font-size: 14px;
        font-weight: 800;
    }

    /* selected + disabled */
    .md-odd.selected, .md-cell.selected {
        border-color: var(--accent);
        background: rgba(245,146,22,.14);
    }

    .md-odd.off, .md-cell.off {
        opacity: .4;
        cursor: default;
    }

        .md-odd.off .ov, .md-cell.off .ov {
            color: var(--muted);
        }

    /* blank spacer cell -> keeps the last CS row aligned (empty space under AOS) */
    .md-cell.blank {
        background: transparent;
        border-color: transparent;
        cursor: default;
        pointer-events: none;
    }
[data-mkt="x2"] button.odd-btn.md-odd {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    padding: unset;
    min-height: 52px;
}
.md-empty {
    padding: 24px 14px;
    color: var(--muted);
    text-align: center;
    font-size: 13px;
}

/* ── Notifications dropdown (AppHeader) ──────────────────────────────
   Used by components.js (AppHeader). Link this file on any page that
   renders <app-header>, e.g.:
     <link rel="stylesheet" href="../css/notifications.css">
--------------------------------------------------------------------- */

.euv0-notif-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.euv0-notif-bell {
    cursor: pointer;
}

.euv0-notif-dropdown {
    position: absolute;
    top: 44px;
    right: 0;
    left: auto;
    width: 400px;
    max-width: calc(100vw - 24px);
    background: #14311e;
    border-radius: 22px;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45);
    overflow: hidden;
    z-index: 1000;
    padding: 18px 18px 8px;
    box-sizing: border-box;
}

.euv0-notif-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px 16px;
    box-sizing: border-box;
}

.euv0-notif-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.euv0-notif-bell-icon {
    flex: 0 0 auto;
}

.euv0-notif-header-title {
    color: #ffffff;
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
}

.euv0-notif-close {
    color: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    font-size: 22px;
    line-height: 1;
}

    .euv0-notif-close:hover {
        color: #ffffff;
    }

.euv0-notif-list {
    max-height: 420px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 4px;
    box-sizing: border-box;
}

.euv0-notif-empty {
    padding: 28px 12px;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 14px;
    box-sizing: border-box;
}

.euv0-notif-item {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.045);
    border-radius: 18px;
    overflow: hidden;
    box-sizing: border-box;
    flex: 0 0 auto; /* keep natural height — don't let the column shrink these to fit */
    min-height: 150px;
}

.euv0-notif-icon {
    flex: 0 0 74px;
    background: rgba(0, 0, 0, 0.22);
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.euv0-notif-item-icon {
    flex: 0 0 auto;
}

.euv0-notif-body {
    flex: 1 1 auto;
    min-width: 0;
    padding: 16px 18px 16px 14px;
    box-sizing: border-box;
}

.euv0-notif-row-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.euv0-notif-item-title {
    color: #ffffff;
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
}

.euv0-notif-time {
    color: rgba(159, 208, 172, 0.7);
    font-size: 13px;
    white-space: nowrap;
    flex: 0 0 auto;
    line-height: 1.3;
}

.euv0-notif-snippet {
    margin: 6px 0 0;
    color: #a9cdb4;
    font-size: 14.5px;
    line-height: 1.45;
}

.euv0-notif-list::-webkit-scrollbar {
    width: 6px;
}

.euv0-notif-list::-webkit-scrollbar-thumb {
    background: rgba(159, 208, 172, 0.3);
    border-radius: 6px;
}

.mkt-label-txt {
    color: var(--mkt-label);
    font-weight: 600;
}

/* ============================================================
   LOGIN-REQUIRED PROMPT (guest taps an odds button)
   Ported behaviour of the old PlsLogIn modal (RES.PleaseLogIn + OK),
   styled self-contained so it needs no legacy CSS.
   ============================================================ */
.gg-loginreq {
    position: fixed;
    inset: 0;
    z-index: 100010;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .55);
    padding: 24px
}

.gg-loginreq-box {
    width: 100%;
    max-width: 320px;
    background: var(--card-bg, #252525);
    color: var(--nav-text, #fff);
    border-radius: 14px;
    padding: 22px 20px 18px;
    text-align: center;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .5)
}

.gg-loginreq-msg {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 16px
}

.gg-loginreq-ok {
    min-width: 120px;
    height: 40px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: var(--accent);
    color: #fff;
    font-size: 13px;
    font-weight: 800;
    cursor: pointer
}

    .gg-loginreq-ok:active {
        transform: scale(.97)
    }

.bottom-nav .nav-item.active:first-child {
    border-top-left-radius: 20px;
}

.bottom-nav .nav-item.active:last-child {
    border-top-right-radius: 20px;
}

.filter-tabs .tab:before, .filter-tabs .tab:after {
    content: unset;
}

/* Half Time / Full Time: one full-width row per outcome */
.md-htft .md-odd {
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    padding: 10px 12px;
    min-height:52px;
    text-align:left;
}

    .md-htft .md-odd .ol {
        width: 100%;
        line-height: 1.3;
    }

.md-htft .ol-code {
    margin-left: 4px;
    color: var(--muted); /* pic 3 shows this red — swap to e.g. #e5484d if you want that */
    font-weight: 700;
}

.betslip-panel.minimized {
    height: 35%;
}
#betslipPanel.betslip-panel.expanded {
    --nav-h: 60px; /* 底部 nav 讓位，.bottom-nav 實際是 62px，要齊平就改 62px */
    --slip-gap: 12px; /* betslip-content 往下推的距離 */
    top: var(--topbar-h) !important;
    bottom: 0 !important;
    height: auto !important;
    max-height: none !important;
    border-radius: 0 !important;
    overflow: hidden;
}

    /* 由下往上疊：nav → footer → chipcontainer → parlay-summary */
    #betslipPanel.betslip-panel.expanded > .betslip-footer {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: var(--nav-h);
        z-index: 4;
    }

    #betslipPanel.betslip-panel.expanded > .chipcontainer {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: calc(var(--nav-h) + var(--foot-h, 0px));
        z-index: 3;
    }

    #betslipPanel.betslip-panel.expanded #parlay .parlay-summary {
        position: absolute !important;
        left: 0;
        right: 0;
        bottom: calc(var(--nav-h) + var(--foot-h, 0px) + var(--chip-h, 0px));
        z-index: 2;
        margin: 0 !important;
        background: var(--tab-bg);
    }

    /* 注單清單：上面留 gap，下面留出三塊 + nav 的總高 */
    #betslipPanel.betslip-panel.expanded > .betslip-content {
        /*position: absolute;*/
        left: 0;
        right: 0;
        top: calc(var(--head-h, 0px) + var(--slip-gap));
        bottom: calc(var(--nav-h) + var(--foot-h, 0px) + var(--chip-h, 0px) + var(--sum-h, 0px));
        overflow-y: auto;
        max-height:700px !important;
    }

        #betslipPanel.betslip-panel.expanded .betslip-toggle::before,
        #betslipPanel.betslip-panel.expanded .betslip-toggle::after {
            background: var(--accent) !important;
        }
.mkt-acc-body .odd-btn.locked .ov {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mkt-acc-body .odd-btn.locked .lock-ic {
    width: 14px;
    height: 14px;
    opacity: .55;
}

.mkt-acc-body .odd-btn.locked .ol {
    opacity: .45;
}
.md-line.md-x2 { align-items: stretch; }
.md-x2 .md-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.md-x2 .md-col .odd-btn { width: 100%; }
.md-x2 .md-cap {
    display: block; text-align: center;
    font-size: 11px; line-height: 1.3; font-weight: 600;
    color: var(--bc-ic-idle, #7f7f7f);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.plus-mkts.hide {
    display: none
}

.active svg.ftic.ftic-dark rect{
    fill:#fff;
}
.quick-buttons.default .button.chip-default.chip-min, .quick-buttons.default .button.chip-default.chip-1, .quick-buttons.default .button.chip-default.chip-2,
.quick-buttons.default .button.chip-default.chip-5, .quick-buttons.default .button.chip-default.chip-10, .quick-buttons.default .button.chip-default.chip-50,
.quick-buttons.default .button.chip-default.chip-100, .quick-buttons.default .button.chip-default.chip-500, .quick-buttons.default .button.chip-default.chip-1000,
.quick-buttons.default .button.chip-default.chip-5000, .quick-buttons.default .button.chip-default.chip-10000, .quick-buttons.default .button.chip-default.chip-30000,
.quick-buttons.default .button.chip-default.chip-50000, .quick-buttons.default .button.chip-default.chip-100000, .quick-buttons.default .button.chip-default.chip-max {
    background: linear-gradient(180deg, #E6B902 0%, #F59216 100%);
}
#navPageBack svg path {
    fill: var(--text, #fff);
}
/*--------------------------------------------------*/
/*Phase 01 temporaty replace*/
/*Phase02 need remove*/
/*--------------------------------------------------*/
.md-toggle {
    display: block;
    padding: unset;
}
.md-tg{
    margin:0 15px;
    border-radius:unset;
    background:unset;
}
.md-tg.active{
    background: unset;
    color:var(--accent);
}
.md-odd.selected, .md-cell.selected{
    background:var(--accent);
}
.md-markets .selected span {
    color: #fff;
}
/*#dot {
    animation: blink 1.1s ease-in-out infinite;
}

@keyframes blink {
    0%,100% {
        opacity: 1
    }

    50% {
        opacity: 0.12
    }
}*/
.arc {
    opacity: 0.12;
}

#dot {
    animation: wave 1.8s ease-out infinite;
    animation-delay: 0s;
}

.arc-inner {
    animation: wave 1.8s ease-out infinite;
    animation-delay: 0.28s;
}

.arc-outer {
    animation: wave 1.8s ease-out infinite;
    animation-delay: 0.56s;
}

@keyframes wave {
    0% {
        opacity: 0.12
    }

    28% {
        opacity: 1
    }

    100% {
        opacity: 0.12
    }
}
.bc-live svg {
    fill: #EB545A;
}
iframe.md-tv-c {
    width: 100vw;
    aspect-ratio: 430 / 248;
    height: auto !important;
    max-height: 248px;
    border: none;
}
.md-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 430 / 248;
    overflow: hidden;
}
/*// 
    if both lcls is off, then btn.hide not clickable 

*/
.md-video-bar .btn-TV.off + .btn-TV.off + .btn-hide {
    pointer-events: none;
}
#matchDetail.md-upcoming .btn-LS,
#matchDetail.md-upcoming .btn-LC,
#matchDetail.md-upcoming .btn-hide {
    pointer-events: none;
    opacity: .4; /* 或直接沿用你 .off 的樣式 */
    cursor: default;
}
.mlb-time.mlb-ht {
    color: rgb(246, 103, 84) !important;
}