/* ============================================================
   GG.CS — ggcs-transitions.css
   "Soft" view-switching layer + betslip bottom-sheet styling.

   This file EXTENDS newstyle.css; it does not duplicate it.
   - Page overlays (#pagePanel > .pagePanel) already slide up in
     newstyle.css. Here we only add: (1) a subtle content cross-fade
     for the match list when the filter/league changes, (2) the
     betslip bottom-sheet look + motion, (3) a shared backdrop, and
     (4) a reduced-motion guard.

   All colours come from the existing theme tokens (--bg, --text,
   --accent, --odds-bg, ...) so dark/day both work with zero extra
   variables.
   ============================================================ */

/* ---- 0. honour the OS "reduce motion" setting everywhere ---- */
@media (prefers-reduced-motion: reduce) {
    .view-swap-out,
    .view-swap-in,
    #betslipPanel,
    #ggBackdrop {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================================
   1. SOFT MATCH-LIST SWAP
   #sections is re-rendered (hard .html()) whenever the tab or
   league changes. We fade+lift it out, let app.js swap the DOM,
   then fade it back in. Driven by two classes toggled in app.js
   (softReplace()). Kept tiny so fast tab-hopping still feels snappy.
   ============================================================ */
#sections {
    transition: opacity .16s ease, transform .16s ease;
    will-change: opacity, transform;
}

    #sections.view-swap-out {
        opacity: 0;
        transform: translateY(6px);
    }

    #sections.view-swap-in {
        opacity: 1;
        transform: none;
    }

/* ============================================================
   2. SHARED BACKDROP  (behind betslip / any bottom sheet)
   app.js shows/hides #ggBackdrop alongside the slip so the page
   dims softly instead of the slip appearing over a hard scene.
   ============================================================ */
#ggBackdrop {
    position: fixed;
    inset: 0;
    z-index: 44; /* under betslip(48), under header(50)/nav(60) */
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility .2s ease;
    pointer-events: none;
}

    #ggBackdrop.show {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

/* ============================================================
   3. BETSLIP  — matched to Figma (single, .default chips)
   Targets the classes global.js emits (renderBetItem /
   buildQuickButtonsHtml). Exact colours/sizes from the design.
   ============================================================ */

@media (min-width: 720px) {
    #betslipPanel {
/*        left: auto;
        right: 12px;
        width: 400px;*/
        border-radius: 12px 12px 0 0;
    }

    #ggBackdrop.show {
        background: rgba(0, 0, 0, .35);
    }
}

#betslipPanel.minimized {
    max-height: 148px;
}

    #betslipPanel.minimized .betslip-content,
    #betslipPanel.minimized .chipcontainer {
        display: none;
    }

/* grab handle */
.betslip-toggle {
    flex: 0 0 auto;
    width: 40px;
    height: 4px;
    margin: 6px auto 0;
    background: #686667;
    border-radius: 2px;
    cursor: pointer;
}

/* tabs */
.betslip-tabs {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    height: 36px;
    margin-top: 10px;
    padding: 0 14px;
    background: #2A2A2A;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .25);
}

    .betslip-tabs .tab-btn {
        appearance: none;
        border: 0;
        background: transparent;
        height: 100%;
        padding: 0 24px;
        position: relative;
        font: 800 13px/16px Montserrat, sans-serif;
        color: #999999;
        cursor: pointer;
        text-transform: capitalize;
    }

        .betslip-tabs .tab-btn.active {
            color: #F59216;
        }

            .betslip-tabs .tab-btn.active::after {
                content: " ";
                position: absolute;
                width: 30%;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                border-radius: 2px;
                height: 2px;
                background-color: #F3B433;
            }

    .betslip-tabs .close-btn {
        margin-left: auto;
        appearance: none;
        border: 0;
        background: transparent;
        color: #939393;
        font-size: 15px;
        line-height: 1;
        padding: 6px;
        cursor: pointer;
    }

        .betslip-tabs .close-btn img {
            width: 15px;
            height: 15px;
        }

/* scroll body */
.betslip-content {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

    .betslip-content .tab-content {
        display: none;
    }

        .betslip-content .tab-content.active {
            display: block;
        }

#single, #parlay {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ---- single bet item ---- */
.bet-item {
    list-style: none;
}

    .bet-item .padd {
        position: relative;
        padding: 10px 14px 12px 46px;
    }

    .bet-item .bet-info > .d-flex {
        display: block;
    }

.btn-trash img {
    width: 18px;
    opacity: .85;
}

.bet-live {
    width: 24px;
    vertical-align: middle;
}

.bet-line1 .team-name {
    color: #D7D7D7;
    font: 400 13px/18px Montserrat, sans-serif;
}

.bet-line1 .vs {
    color: #999;
    margin: 0 2px;
}

/* odds -> top right */
.bet-item .odds {
    position: absolute;
    top: 10px;
    right: 14px;
    color: #F59216;
    font: 600 13px/13px Montserrat, sans-serif;
}

/* selection + (min-max | input) row */
.flex-box2 {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    /*margin-top: 8px;*/
}

.bet-line2 {
    flex: 1 1 auto;
    min-width: 0;
    color: #D7D7D7;
    font: 400 13px/16px Montserrat, sans-serif;
}

    .bet-line2 .bet-selection {
        font-weight: 700;
    }

    .bet-line2 .odds {
        /*position: static;*/
    }
/* if odds also lives inline, keep flow */

.SinBetBox {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.Min-Max-single {
    color: #858585;
    font: 400 12px/14px Montserrat, sans-serif;
    text-align: right;
    white-space: nowrap;
}

.bet-input-wrapper {
    position: relative;
}

.bet-input {
    width: 96px;
    height: 28px;
    padding: 0 8px;
    background: #000;
    border: 1px solid #4C4C4C;
    border-radius: 2px;
    color: #F59216;
    font: 600 13px Montserrat, sans-serif;
    text-align: right;
}

    .bet-input::placeholder {
        color: #9F9F9F;
        font-weight: 600;
        font-size: 11.8px;
    }

    .bet-input:focus {
        outline: none;
        border-color: #F59216;
    }

/* ---- chips (.default): CLEAR + MIN/100/500/MAX ---- */
.chipcontainer {
    flex: 0 0 auto;
    padding: 10px 14px;
}

.btn-quickBet, .quick-buttons {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

    .btn-quickBet::-webkit-scrollbar, .quick-buttons::-webkit-scrollbar {
        display: none;
    }

    .quick-buttons.default .button, .chip-default {
        flex: 0 0 auto;
        width: 56px;
        height: 32px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        cursor: pointer;
        user-select: none;
        font: 600 12px/18px Poppins, Montserrat, sans-serif;
        color: #fff;
        text-transform: uppercase;
        background: linear-gradient(180deg, #E6B902 0%, #F59216 100%);
    }

        .quick-buttons.default .button.chip-clear, .chip-clear {
            background: linear-gradient(180deg, #969696 0%, #464646 100%);
        }

/* ---- footer ---- */
.betslip-footer {
    flex: 0 0 auto;
    background: #2A2A2A;
    /*padding: 8px 14px calc(14px + env(safe-area-inset-bottom, 0px));*/
}

    .betslip-footer-container .totals,
    .betslip-footer-container .min-max,
    .betslip-footer .totals {
        display: flex;
        gap: 24px;
        margin-bottom: 8px;
    }

    .betslip-footer .flex-box {
        display: flex;
        align-items: center;
        gap: 6px;
        font: 600 13px/20px Poppins, Montserrat, sans-serif;
        color: #fff;
    }

        .betslip-footer .flex-box b, .betslip-footer .flex-box .val {
            font-weight: 400;
        }

.footer-actions {
    display: flex;
    gap: 8px;
}

.betnow-btn {
    flex: 1 1 auto;
    appearance: none;
    border: 0;
    height: 38px;
    border-radius: 6px;
    background: linear-gradient(180deg, #F59216 0%, #C76E00 100%);
    color: #fff;
    font: 700 15px/15px Montserrat, sans-serif;
    text-transform: capitalize;
    cursor: pointer;
    transition: filter .15s ease, transform .1s ease;
}

    .betnow-btn:active {
        transform: translateY(1px);
        filter: brightness(.96);
    }

    .betnow-btn:disabled, .betnow-btn.disabled {
        background: #4C4C4C;
        cursor: default;
    }

.trash-btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    padding: 0 10px;
    cursor: pointer;
}

/* ============================================================
   5. LIVE ODDS FLASH
   Gentle highlight when a watched card's odds value changes
   (in-place update, not a re-render).
   ============================================================ */
@keyframes oddFlash {
    0% {
        background: rgba(245, 146, 22, .35);
    }

    100% {
        background: transparent;
    }
}

.odd-btn.odd-flash {
    animation: oddFlash .6s ease;
}

@media (prefers-reduced-motion: reduce) {
    .odd-btn.odd-flash {
        animation: none;
    }
}

/* directional MBGGCS odds move: soft green when a value rises vs the previous
   poll, soft red when it drops (e.g. 1-0 7.00 -> 2.00 = drop = red). Slow,
   gentle pulse via an inset tint (base cell colour never flickers), repeated
   3 times so the change is easy to catch. */
@keyframes oddsUpFlash {
    0% {
        box-shadow: inset 0 0 0 999px rgba(52, 199, 89, 0);
    }

    50% {
        box-shadow: inset 0 0 0 999px rgba(52, 199, 89, .30);
    }

    100% {
        box-shadow: inset 0 0 0 999px rgba(52, 199, 89, 0);
    }
}

@keyframes oddsDownFlash {
    0% {
        box-shadow: inset 0 0 0 999px rgba(255, 69, 58, 0);
    }

    50% {
        box-shadow: inset 0 0 0 999px rgba(255, 69, 58, .30);
    }

    100% {
        box-shadow: inset 0 0 0 999px rgba(255, 69, 58, 0);
    }
}

.odd-btn.odds-up {
    animation: oddsUpFlash .6s ease-in-out 3;
}

.odd-btn.odds-down {
    animation: oddsDownFlash .6s ease-in-out 3;
}

@media (prefers-reduced-motion: reduce) {
    .odd-btn.odds-up, .odd-btn.odds-down {
        animation: none;
    }
}

/* ============================================================
   6. FLASH ICON (⚡) — filled only when FTIP true
   ============================================================ */
.mini.zap.off {
    color: var(--muted, #9d9d9d);
    opacity: .35;
}

.mini.zap.on {
    color: var(--accent, #f59216);
    opacity: 1;
}

/* ============================================================
   8. BETSLIP — market-closed overlay (on top, not below)
   ============================================================ */
.bet-item {
    position: relative;
}

    .bet-item.market-closed .padd {
        opacity: .45;
    }

.market-closed-overlay {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: rgba(0, 0, 0, .18);
}

    .market-closed-overlay .overlay-text {
        background: #C0392B;
        color: #fff;
        font: 700 12px/1 Montserrat, sans-serif;
        letter-spacing: .3px;
        padding: 7px 16px;
        border-radius: 6px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
    }

    .market-closed-overlay .overlay-trash-btn {
        cursor: pointer;
        line-height: 0;
    }

    .market-closed-overlay .overlay-trash-icon {
        width: 18px;
        filter: brightness(1.6);
    }

/* ============================================================
   9. BETSLIP — DAY THEME (own light colour combo)
   ============================================================ */
html[data-theme="day"] #betslipPanel {
    background: #FFFFFF;
    color: #3B3B3B;
    box-shadow: 0 -2px 15px rgba(0, 0, 0, .12);
}

html[data-theme="day"] .betslip-toggle {
    background: #C7C7C7;
}

html[data-theme="day"] .betslip-tabs {
    background: #FFFFFF;
    box-shadow: 0 2px 2px rgba(0, 0, 0, .08);
}

    html[data-theme="day"] .betslip-tabs .tab-btn {
        color: #919191;
    }

        html[data-theme="day"] .betslip-tabs .tab-btn.active {
            color: #F59216;
        }

    html[data-theme="day"] .betslip-tabs .close-btn {
        color: #6D6D6D;
    }

html[data-theme="day"] .bet-item {
    border-bottom-color: #4c4c4c14;
}

html[data-theme="day"] .bet-line1 .team-name,
html[data-theme="day"] .bet-line2 {
    color: #3B3B3B;
}

    html[data-theme="day"] .bet-item .odds,
    html[data-theme="day"] .bet-line2 .bet-selection {
        color: #F59216;
    }

    html[data-theme="day"] .bet-line2 .bet-selection {
        color: #3B3B3B;
    }

html[data-theme="day"] .Min-Max-single {
    color: #919191;
}

html[data-theme="day"] .bet-input {
    background: #F3F3F3;
    border-color: #CFCFCF;
    color: #C76E00;
}

    html[data-theme="day"] .bet-input::placeholder {
        color: #A9A9A9;
    }

html[data-theme="day"] .chipcontainer .chip-default {
    color: #fff;
}

html[data-theme="day"] .quick-buttons.default .button.chip-clear,
html[data-theme="day"] .chip-clear {
    background: linear-gradient(180deg, #D6D6D6 0%, #9E9E9E 100%);
}

html[data-theme="day"] .betslip-footer {
    background: #FFFFFF;
}

    html[data-theme="day"] .betslip-footer .flex-box,
    html[data-theme="day"] .betslip-footer .flex-box b {
        color: #3B3B3B;
    }

html[data-theme="day"] .bet-item.market-closed .padd {
    opacity: .5;
}

/* ============================================================
   10. MORE MARKETS — live video block (old design)
   ============================================================ */
.md-video {
    background: #000;
}

.md-video-bar {
    display: flex;
    background: #1A1A1A;
}

    .md-video-bar .btn-TV {
        flex: 1 1 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        padding: 11px 8px;
        color: #cfcfcf;
        font: 600 12px/1 Montserrat, sans-serif;
        text-decoration: none;
        cursor: pointer;
        text-transform: uppercase;
        letter-spacing: .3px;
    }

        .md-video-bar .btn-TV:active,
        .md-video-bar .btn-TV.active {
            color: var(--accent, #F59216);
        }

        /* logo in front of each label */
        .md-video-bar .btn-TV .btn-tv-ic {
            width: 16px;
            height: 16px;
            object-fit: contain;
            flex: 0 0 auto;
        }

        /* feature unavailable -> label/logo strongly faded, not clickable */
        .md-video-bar .btn-TV.off {
            opacity: .28;
            pointer-events: none;
            cursor: default;
        }

    .md-video-bar .btn-hide {
        flex: 1 1 0;
        color: #8a8a8a;
    }

.md-video-frame {
    position: relative;
    width: 100%;
    max-width: 100%; /* LiveCast content is 430px wide; wider frames leave dark side-gaps */
    /*margin: 0 auto;*/
    background: #000;
    overflow: hidden;
}

.md-tv-t, .md-tv-c {
    width: 100%;
    aspect-ratio: 430 / 248;
    height: auto;
    border: 0;
    display: block;
    background: #000;
}

/* ============================================================
   11. DETAIL COLLAPSE — while More Markets is open, the sticky-head
   shows only the topbar (tabs + league strip hidden), so the detail
   overlay covers up to just below the topbar.
   ============================================================ */
body.detail-collapsed .filter-tabs,
body.detail-collapsed .league-strip {
    display: none;
}

/* ============================================================
   12. FAVORITE STAR — highlighted when the match is favorited
   ============================================================ */
.bc-icons .js-fav {
    cursor: pointer;
    /*filter: var(--filter-fil);*/
}


/* ============================================================
   13. MORE MARKETS — league ribbon + collapse tab + loading
   ============================================================ */
.md-pbet {
    position: relative;
    top: 0;
    z-index: 1;
    text-align: center;
    padding: 12px 14px 22px;
    background: var(--header-bg, #101010);
    color: var(--text, #fff);
    font: 700 14px/1 Montserrat, sans-serif;
    letter-spacing: .3px;
    border-bottom: 1px solid #4c4c4c14;
}

.md-head {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 9px 80px 11px;
    margin: -12px auto 0;
    max-width: 400px;
    background: url(https://d2dgys6tg64hrs.cloudfront.net/ggcs/img2/orange-leaguebar.webp) center / 100% 100% no-repeat;
}

    .md-head .md-title {
        color: #fff;
        font: 700 13px/1.3 Montserrat, sans-serif;
        letter-spacing: .3px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

.md-collapse {
    display: flex;
    justify-content: center;
}

.md-collapse-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    background: var(--ftfh-bg);
    color: #4AA3FF;
    padding: 5px 34px;
    font: 600 13px/1 Montserrat, sans-serif;
    clip-path: polygon(0% 100%, 15% 10%, 20% 0%, 80% 0%, 85% 10%, 100% 100%);
}
.md-htft span.ol-code {
    color: rgb(246, 103, 84);
}
.sec-loading {
    display: flex;
    justify-content: center;
    padding: 44px 0;
}

    .sec-loading .spin {
        width: 28px;
        height: 28px;
        border-radius: 50%;
        border: 3px solid rgba(150, 150, 150, .25);
        border-top-color: var(--accent, #F59216);
        animation: ggspin .8s linear infinite;
    }

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

/* empty state (e.g. no favorites) */
.sec-empty {
    text-align: center;
    color: var(--muted, #9d9d9d);
    padding: 48px 16px;
    font: 600 14px Montserrat, sans-serif;
}

/* ============================================================
   14. MATCH CARD / DETAIL BANNER BACKGROUNDS
   Running matches (MatchStatus "R" -> .run) get the alternating
   odd/even running textures; everything else uses the theme match bg.
   md-banner mirrors its source card. Loaded after newstyle.css so
   these win by order.
   ============================================================ */
.bet-card {
    background-image: url('https://d2dgys6tg64hrs.cloudfront.net/ggcs/img/darkmatchbg.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

html[data-theme="day"] .bet-card {
    background-image: url('https://d2dgys6tg64hrs.cloudfront.net/ggcs/img/daymatchbg.webp');
}


    .cards > .bet-card.run:nth-child(odd),
    html[data-theme="day"] .cards > .bet-card.run:nth-child(odd) {
        background-image: url('https://d2dgys6tg64hrs.cloudfront.net/ggcs/img/running_even.webp');
    }

    .cards > .bet-card.run:nth-child(even),
    html[data-theme="day"] .cards > .bet-card.run:nth-child(even) {
        background-image: url('https://d2dgys6tg64hrs.cloudfront.net/ggcs/img/running_odds.webp');
    }