/* =========================================================
   JOKER1X2 MOBILE  — kartoosh dark navy mobile look
   Navy header (burger + wordmark + login/deposit),
   pill nav (nav-menu-mobile), banner slider,
   home-sport-menu, casino cards, footer-mobile.
   Loaded last (after joker1x2.css).
   ========================================================= */

@media (min-width: 1024px) {
    .header-block-mobile,
    .nav-menu-mobile,
    .footer-mobile,
    .home-sport-menu,
    .main-page-mobile__casino,
    .tab-navigation-w-bc { display: none !important; }
}

@media (max-width: 1023px) {
    .topbar { display: none !important; }

    /* mobile home page is navy edge-to-edge */
    body.home-page,
    body.home-page .app-content { background: var(--kt-navy, #18232d) !important; }
    body.home-page .page-content-inner { padding: 0 !important; }
    body.home-page .main-content {
        margin-top: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-bottom: 0 !important;
    }
    body.home-page .chat-fab { display: none !important; }
    body.home-page .site-footer { display: none !important; }

    /* ===== lettobet365 app shell (mobile home) =====
       The page is one locked screen: the header stays pinned,
       the content area scrolls inside, and the footer is pinned
       to the bottom via margin-top:auto (exact ltb structure). */
    body.home-page .main-content {
        display: flex;
        flex-direction: column;
    }
    body.home-page .page-content-inner,
    body.home-page .home,
    body.home-page .home-main {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }
    body.home-page .footer-mobile {
        margin-top: auto;
        padding-bottom: 10px;
        background: var(--kt-navy, #18232d);
    }

    /* desktop lime bar never shows on mobile now (pill nav replaces it) */
    .main-nav { display: none !important; }
}

/* =========================================================
   1. MOBILE HEADER  (white; burger + wordmark + user/deposit)
   ========================================================= */
.header-block-mobile {
    display: none;
    background: var(--kt-navy, #18232d);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
@media (max-width: 1023px) {
    .header-block-mobile { display: block; }
}

.header-block-mobile__top {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 58px;
    box-sizing: border-box;
    padding: 0 14px;
}

.header-block-mobile__burger {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--kt-magenta, #a71f67), var(--kt-magenta-2, #7e1549));
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.header-block-mobile__burger span {
    display: block;
    width: 18px;
    height: 2.5px;
    border-radius: 2px;
    background: #ffffff;
}

.header-block-mobile__logo-link {
    margin: 0 auto;
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    line-height: 1;
}

.jbr-wordmark {
    display: inline-flex;
    align-items: baseline;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-weight: 900;
    font-size: 23px;
    letter-spacing: 0.01em;
    line-height: 1;
    white-space: nowrap;
    user-select: none;
}
.jbr-wordmark__brand {
    color: #ffffff;
    background: none;
    -webkit-background-clip: initial;
    background-clip: initial;
    -webkit-text-fill-color: initial;
}
.jbr-wordmark__num {
    color: var(--kt-gold, #f8c524);
}
.jbr-wordmark__arrow {
    display: inline-flex;
    align-items: baseline;
    margin-left: 1px;
    align-self: center;
}
.jbr-wordmark__arrow svg {
    display: block;
}

.header-block-mobile__login {
    flex: 0 0 auto;
    min-width: 36px;
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--kt-gold, #f8c524);
    background: none;
    border: 0;
    padding: 0;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.header-block-mobile__login svg {
    width: 24px;
    height: 24px;
}

/* balance chip (logged-in users) */
.header-block-mobile__chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 32px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(248, 197, 36, 0.20);
    color: var(--kt-gold, #f8c524);
    font-size: 12px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

/* "Se connecter" / "Dépôt" button row */
.header-block-mobile__down {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    height: 51px;
    box-sizing: border-box;
    padding: 0 14px;
}
.header-block-mobile__buttons-wrapper {
    display: flex;
    align-items: center;
    gap: 10px;
}
.header-block-mobile .auth-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    padding: 0 34px;
    border-radius: 6px;
    background: linear-gradient(135deg, var(--kt-magenta, #a71f67), var(--kt-magenta-2, #7e1549));
    color: #ffffff;
    border: none;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
    text-decoration: none;
    text-transform: none;
    cursor: pointer;
    width: max-content;
    -webkit-tap-highlight-color: transparent;
}
.header-block-mobile .auth-button svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}
.header-block-mobile .auth-button:active {
    background: linear-gradient(135deg, #7e1549, #5c1035);
}

/* =========================================================
   2. LIME PILL NAV  (nav-menu-mobile)
   ========================================================= */
.nav-menu-mobile {
    display: none;
    background: var(--kt-navy-deep, #0f1720);
}
@media (max-width: 1023px) {
    .nav-menu-mobile { display: block; }
}

.nav-menu-mobile__items {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin: 0;
    padding: 0;
    list-style: none;
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.nav-menu-mobile__items::-webkit-scrollbar { display: none; }

.nav-menu-mobile__item {
    flex: 0 0 20%;
    min-width: 20%;
    max-width: 20%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 2px 8px;
    border-right: 1px solid rgba(255, 255, 255, 0.14);
    color: #e6ecf7;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    text-transform: capitalize;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}
.nav-menu-mobile__item:last-child { border-right: none; }
.nav-menu-mobile__item svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
.nav-menu-mobile__item span { line-height: 1; }
.nav-menu-mobile__item.is-active {
    background: rgba(167, 31, 103, 0.45);
    color: #ffffff;
    font-weight: 700;
}
.nav-menu-mobile__item.is-active svg { color: var(--kt-gold, #f8c524); }
.nav-menu-mobile__item:active { background: rgba(255, 255, 255, 0.10); }

/* =========================================================
   3. BANNER SLIDER
   ========================================================= */
.home-slider {
    position: relative;
    margin: 0;
    border-radius: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    background: var(--kt-navy-deep, #0f1720);
}
.home-slider__viewport { overflow: hidden; }
.home-slider__slides {
    display: flex;
    transition: transform 0.45s ease;
}
.home-slider__slide {
    flex: 0 0 100%;
    min-width: 100%;
    display: block;
}
.home-slider__slide img {
    display: block;
    width: 100%;
    aspect-ratio: 1280 / 541;
    object-fit: fill;
    user-select: none;
    -webkit-user-drag: none;
}
.home-slider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    z-index: 3;
    pointer-events: none;
}
.home-slider__dot {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    pointer-events: auto;
    transition: background 0.2s, transform 0.2s;
}
.home-slider__dot.is-active {
    background: #ffffff;
    transform: scale(1.25);
}

/* =========================================================
   4. SPORT MENU  (gray header + image tiles + lime name bar)
   ========================================================= */
.home-sport-menu {
    margin-top: 0;
    background: #dedfe4;
}
.home-sport-menu__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 39px;
    box-sizing: border-box;
    padding: 0 14px;
}
.home-sport-menu__head h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 800;
    color: #1e2126;
    letter-spacing: 0.01em;
}
.home-sport-menu__head a {
    font-size: 12px;
    font-weight: 700;
    color: var(--kt-magenta, #a71f67);
    text-decoration: none;
    white-space: nowrap;
}
.home-sport-menu__head a:hover { color: var(--kt-magenta-2, #7e1549); }

.home-sport-menu__items {
    display: flex;
    gap: 5px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0 5px 0;
    background: #dedfe4;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.home-sport-menu__items::-webkit-scrollbar { display: none; }

.home-sport-menu__item {
    flex: 0 0 158px;
    width: 158px;
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    background: #dedfe4;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}
.home-sport-menu__item img {
    display: block;
    width: 100%;
    height: 95px;
    object-fit: cover;
    background: var(--bg-card-hover, #2e3b46);
}
.home-sport-menu__name {
    background: linear-gradient(135deg, var(--kt-magenta, #a71f67), var(--kt-magenta-2, #7e1549));
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 4px 10px;
}

/* =========================================================
   5. CASINO CARDS
   ========================================================= */
.main-page-mobile__casino {
    display: flex;
    gap: 14px;
    padding: 26px 8px 4px;
}
.main-page-mobile__casino-item {
    flex: 1 1 0;
    min-width: 0;
    position: relative;
    display: block;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(17, 24, 39, 0.10);
    -webkit-tap-highlight-color: transparent;
}
.main-page-mobile__casino-item img {
    display: block;
    width: 100%;
    height: 74px;
    object-fit: cover;
}
.main-page-mobile__casino-title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 26px 10px 9px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.62) 100%);
    color: #ffffff;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
}

/* =========================================================
   6. DESKTOP GAME SHORTCUTS  (joker "slider-pages" style)
   ========================================================= */
.home-slider-pages {
    display: none;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 24px;
}
@media (min-width: 1024px) {
    .home-slider-pages { display: grid; }
}
.home-slider-page {
    display: flex;
    flex-direction: column;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    background: var(--bg-card, #24303a);
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.30);
    transition: transform 0.15s, box-shadow 0.15s;
}
.home-slider-page:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
}
.home-slider-page img {
    display: block;
    width: 100%;
    height: 170px;
    object-fit: cover;
    background: var(--bg-card-hover, #2e3b46);
}
.home-slider-page__label {
    background: linear-gradient(135deg, var(--kt-magenta, #a71f67), var(--kt-magenta-2, #7e1549));
    color: #ffffff;
    font-family: 'Roboto Condensed', 'Roboto', sans-serif;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-align: center;
    padding: 11px 12px;
}

/* =========================================================
   7. MOBILE FOOTER
   ========================================================= */
.footer-mobile {
    margin-top: 24px;
    padding-bottom: 10px;
    background: var(--kt-navy, #18232d);
}
.footer-mobile__payments {
    display: block;
    width: 100%;
    height: auto;
}
.footer-mobile__note {
    margin: 0;
    padding: 12px 16px 8px;
    text-align: center;
    color: #8b97b3;
    font-size: 12px;
    font-weight: 500;
}
.footer-mobile__socials {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 4px 0 6px;
}
.footer-mobile__socials a {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 8px;
    color: #c7d0e2;
}
.footer-mobile__socials a svg { width: 16px; height: 16px; }

/* =========================================================
   DESKTOP: banner slider sizes
   ========================================================= */
@media (min-width: 1024px) {
    .home-slider {
        margin: 24px 0 0;
        border-radius: 16px;
    }
    .home-slider__slide img { aspect-ratio: 1280 / 541; }
    .home-slider__dots { bottom: 14px; }
}

/* =========================================================
   8. LETTOBET SIDE MENU (drawer)  — exact ltb look
      Gray #dedfe4 fullscreen drawer sliding in from the left
      below the mobile header; 3-column #9fa4a7 icon tiles with
      white separators; active tile = lime underline + #494450.
   ========================================================= */
@media (max-width: 1023px) {
    .header-block-mobile { position: sticky; top: 0; z-index: 100; }

    .side-menu {
        background: #dedfe4;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: flex-start;
        margin-top: auto;
        overflow-x: auto;
        padding-bottom: .1875rem;
        position: fixed;
        top: 0;
        left: -100vw;
        transition: -webkit-transform .4s ease;
        transition: transform .4s ease;
        width: 100%;
        z-index: 520;
        -webkit-transform: translateX(0);
        transform: translateX(0);
    }
    .side-menu_open {
        -webkit-transform: translateX(100vw);
        transform: translateX(100vw);
    }

    .side-menu__items {
        align-items: flex-start;
        display: flex;
        flex-wrap: wrap;
        height: max-content;
        justify-content: flex-start;
        width: 100%;
    }

    .side-menu__item {
        align-items: center;
        background: #9fa4a7;
        border-bottom: .0625rem solid #fff;
        border-left: .0625rem solid #fff;
        color: #fff;
        display: flex;
        flex-direction: column;
        height: 4.175rem;
        justify-content: center;
        text-decoration: none;
        width: 33.33333%;
    }
    .side-menu__item * { fill: #fff; }
    .side-menu__item_active {
        border-bottom: .25rem solid var(--kt-gold, #f8c524);
        color: #494450;
    }
    .side-menu__item_active * { fill: #494450; }

    .side-menu__item-text {
        font-size: .8rem;
        margin-top: .2rem;
        text-align: center;
    }
    .side-menu__icon {
        align-items: center;
        display: flex;
        height: 1.6rem;
        justify-content: center;
        width: 1.6rem;
    }
}
@media (min-width: 1024px) {
    .side-menu { display: none !important; }
}

/* =========================================================
   9. MOBILE PARITY WITH REAL KARTOOSH  (measured 390x844)
   -------------------------------------------------------
   The real site keeps its normal page flow on mobile. The
   locked "app shell" + pill nav + hidden footer above was a
   different product. These rules restore the real layout:

     real header        : single 92px bar
                           (burger 36 + logo + "Se connecter" 28)
     real pill nav      : none
     real page scroll   : document scrolls (no inner scroller)
     real footer        : visible (desktop footer markup)
     real row gap       : 10px
     real content width : 370px (holder padding 0 10px)
   ========================================================= */
@media (max-width: 1023px) {
    /* --- real mobile header (measured 390x844 on m.kartoosh.bet) ---
       layout-header-holder-bc : 390x64, static wrapper
       header-bc                : 390x64, position FIXED, z-index 950, #18232d
       inside hdr-main-content-bc:
         logo-container  234x46 @   7, 9
         hdr-logo-bc     128x46 @   7, 9
         .header-icon     32x32 @ 142,16   (burger, left of the logo block)
         hdr-user-bc      94x28 @ 248,18   ("Se connecter" button)
         menu toggle      28x28 @ 348,18
       then a horizontally scrollable nav strip, 390x48 @ 0,64
       and the content holder carries padding-top 48px to clear it.  */
    .header-block-mobile {
        display: block;
        background: #18232d;
        box-shadow: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 64px;
        z-index: 950;
    }
    /* real: .logo-container is 234x46 @ 7,9 -> 7 + 128 logo + 7 gap + 32 promo */
    /* real site is RIGHT-ANCHORED, measured at 360/390/412/430/768:
         logo-container  left 7px,  right 149px  (grows with viewport)
         .hdr-user-bc    right 48px, width 94px   (sign-in)
         3-dot toggle    right 14px, width 28px
       => the 7px / 6px gaps hold at every width, not just 390. */
    .header-block-mobile .logo-container {
        position: absolute;
        top: 9px;
        left: 7px;
        right: 149px;
        width: auto;
        height: 46px;
        display: flex;
        align-items: center;
        gap: 7px;
    }
    .header-block-mobile .logo {
        display: block;
        width: 128px;
        height: 46px;
        flex: 0 0 128px;
    }
    .header-block-mobile .hdr-logo-bc {
        display: block;
        width: 128px;
        height: 46px;
        max-width: none;
        object-fit: contain;
    }
    /* real: .header-icon is the animated promotion GIF, 32x32 @ 142,16 */
    .header-block-mobile .header-icon {
        display: block;
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 4px;
        overflow: hidden;
    }
    .header-block-mobile .header-icon img {
        display: block;
        width: 32px;
        height: 32px;
        object-fit: cover;
        max-width: none;
    }
    /* real: .hdr-user-bc is 94x28, right-anchored 48px from the edge,
       leaving a 6px gap before the 28px toggle at right:14px */
    .header-block-mobile .hdr-user-bc {
        position: absolute;
        top: 18px;
        right: 48px;
        width: 94px;
        height: 28px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .header-block-mobile .hdr-user-bc .btn.s-small.sign-in,
    .header-block-mobile .hdr-user-chip {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 94px !important;
        height: 28px !important;
        min-width: 0;
        padding: 0 8px;
        border: 0;
        border-radius: 4px;
        background: #f8c524;
        color: #202a35;
        font-size: 13px;
        font-weight: 600;
        line-height: 1;
        white-space: nowrap;
        text-decoration: none;
        cursor: pointer;
    }
    .header-block-mobile .hdr-user-bc .btn.s-small.sign-in span {
        font: inherit;
        color: inherit;
    }
    /* real: 3-dot toggle is a 28px CIRCLE at right:14px, top 18px */
    .header-block-mobile .hdr-toggle-button-bc {
        position: absolute;
        top: 18px;
        right: 14px;
        width: 28px;
        height: 28px;
        display: block;
        background: rgba(255,255,255,.1);
        border-radius: 50%;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    .header-block-mobile .hdr-toggle-button-bc::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 3px;
        height: 15px;
        transform: translate(-50%,-50%);
        background-image: radial-gradient(circle at 50% 50%, #ffffff 1.5px, transparent 1.6px);
        background-size: 3px 5px;
        background-repeat: repeat-y;
    }
    .header-block-mobile .hdr-toggle-button-bc.is-active { background: rgba(255,255,255,.2); }


    /* the extra "Se connecter" row collapses into the bar */
    .header-block-mobile__down { display: none !important; }

    /* the lime pill nav does not exist on the real mobile site */
    .nav-menu-mobile { display: none !important; }

    /* the real site keeps the product navbar as a 48px horizontal
       scroll strip directly under the fixed 64px header
       (hdr-navigation-scrollable-bc: 390x48 @ 0,64) */
    .main-nav {
        display: block !important;
        position: fixed;
        top: 64px;
        left: 0;
        right: 0;
        width: 100%;
        height: 48px;
        margin: 0;
        padding: 0;
        border-radius: 0;
        background: #08745f !important;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        z-index: 940;
    }
    .main-nav::-webkit-scrollbar { display: none; }
    .main-nav__scroll {
        display: flex;
        align-items: center;
        gap: 0;
        height: 48px;
        width: max-content;
        padding: 0;
    }
    .main-nav__link {
        display: flex;
        align-items: center;
        height: 48px;
        padding: 0 10px;
        font-size: 16px;
        font-weight: 400;
        line-height: 48px;
        text-transform: none;
        letter-spacing: 0;
        color: rgba(255, 255, 255, 0.8) !important;
        background: none !important;
        white-space: nowrap;
    }
    .main-nav__link.is-active { color: #ffffff !important; }

    /* real kartoosh bottom tab bar (tab-navigation-w-bc): fixed 390x72,
       5 flex-column tabs (20px icons, 11px labels).
       Colour matches the mobile main nav above (#08745f, set !important at
       line 804). It was rgba(8,116,95,.9), so the 90% alpha blended darker
       against the navy page and the two bars did not read as one colour. */
    .tab-navigation-w-bc {
        display: flex !important;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 72px;
        background: #08745f;
        z-index: 950;
        box-sizing: border-box;
    }
    .tab-nav-item-bc {
        flex: 1 1 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        padding: 4px 4px 8px;
        box-sizing: border-box;
        border: 0;
        margin: 0;
        background: none;
        cursor: pointer;
        text-decoration: none;
        color: rgba(255, 255, 255, 0.5);
        -webkit-tap-highlight-color: transparent;
    }
    .tab-nav-item-bc.is-active { color: #ffffff; }
    .tab-nav-item-bc .tab-nav-icon-bc { display: inline-flex; width: 20px; height: 20px; }
    .tab-nav-item-bc .tab-nav-icon-bc svg { display: block; width: 20px; height: 20px; fill: currentColor; }
    .tab-nav-item-bc .tab-nav-title-bc { font-size: 11px; line-height: 1; font-weight: 400; }

    /* ---------- kartoosh MOBILE menu panel (hdr-nav-menu-holder-bc) ----------
       Measured live on m.kartoosh.bet/fr/ at 390x844:
         holder  fixed 390x844, z-index 950, padding-top 64px (below their header)
         sheet   bg rgb(24,35,45) = #18232d, slides up translateY(100%) -> 0
         title   "MENU" 16px/500 uppercase, line-height 44px, #fff  + X at right
         list    padding 7px 7px 64px, overflow auto
         items   48px rows on a 58px pitch (10px gap), 14px text,
                 16x16 currentColor icon in a 28px column, rgba(255,255,255,.6)
       Our header stack is taller than theirs (topbar 64 + green nav 53 = 117),
       so the holder pads to our header bottom instead of 64px. */
    .hdr-nav-menu-holder-bc {
        position: fixed;
        top: 0; left: 0; right: 0; bottom: 0;
        z-index: 950;
        padding-top: 117px;
        box-sizing: border-box;
        overflow: hidden;
    }
    .hdr-nav-menu-holder-bc[hidden] { display: none; }
    .m-navigation-container-bc {
        position: relative;
        height: 100%;
        background: #18232d;
        color: rgba(255, 255, 255, 0.6);
        transform: translateY(100%);
        transition: transform 0.3s ease;
        will-change: transform;
    }
    .hdr-nav-menu-holder-bc.is-open .m-navigation-container-bc { transform: translateY(0); }
    .m-nav-title-row-bc {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 44px;
        /* real site: box-shadow: 0 -1px 0 rgba(var(--b-sc), .1) inset */
        box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.1);
    }
    .m-nav-title-content-bc {
        margin: 0;
        color: #ffffff;
        font-size: 16px;
        font-weight: 500;
        line-height: 44px;
        text-transform: uppercase;
    }
    .closed-n-p-bc {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 44px;
        margin: 0;
        padding: 0;
        border: 0;
        background: none;
        color: rgba(255, 255, 255, 0.9);
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }
    /* The global `svg { width:100%; height:100% }` rule overrides the width/height
       attributes, which stretched this glyph to the full 28x44 button. Pin it to
       Kartoosh's measured inner icon size (14x14, colour rgba(255,255,255,.9)). */
    .closed-n-p-bc svg {
        display: block;
        flex: 0 0 auto;
        width: 14px;
        height: 14px;
    }
    .m-nav-info-w-container-bc {
        padding: 7px 7px 64px;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .m-nav-info-w-container-bc .app-nav-link {
        display: flex;
        text-decoration: none;
    }
    /* real site, measured: row x=14 w=362 on a 390 viewport, 48px tall,
       pitch 58px, bg rgba(255,255,255,.1), radius 4px, padding-inline 10px,
       margin 0. The 14px side inset comes from the row sitting inside the
       7px list padding, so flex:1 + 7px side margins reproduces w=362. */
    .m-nav-items-list-item-bc {
        display: flex;
        flex: 1 1 auto;
        align-items: center;
        height: 48px;
        width: auto;
        margin: 0 7px 10px;
        padding: 0 10px;
        border-radius: 4px;
        background: rgba(255, 255, 255, 0.1);
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        line-height: 16px;
    }
    .m-nav-items-list-item-bc.is-active,
    .m-nav-items-list-item-bc.is-active .m-nav-list-item-title-bc { color: #ffffff; }
    .nav-ico-w-row-bc {
        display: flex;
        flex: 0 0 28px;
        align-items: center;
        justify-content: center;
        width: 28px;
        height: 48px;
    }
    .asideMenuNavItemIconWrapper { display: inline-flex; width: 16px; height: 16px; }
    .asideMenuNavItemIconWrapper svg {
        display: block;
        width: 16px;
        height: 16px;
        fill: currentColor;
    }
    .m-nav-list-item-title-bc {
        flex: 1 1 auto;
        min-width: 0;
        margin: 0;
        overflow: hidden;
        color: rgba(255, 255, 255, 0.6);
        font-size: 14px;
        line-height: 16px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.kt-mobile-menu-open { overflow: hidden; }

    /* the real footer is visible on mobile */
    body.home-page .site-footer { display: block !important; }

    /* normal document scroll, not a locked inner scroller */
    body.home-page .app-content {
        overflow: visible !important;
        height: auto !important;
        max-height: none !important;
    }
    body.home-page .main-content,
    body.home-page .page-content-inner,
    body.home-page .home,
    body.home-page .home-main {
        display: block !important;
        min-height: 0 !important;
    }
    .footer-mobile { display: none !important; }

    /* the fixed 64px header + 48px nav strip sit above the content,
       so the page needs 112px of clearance (real holder @64 + pad 48) */
    body.home-page .app-content { padding-top: 0 !important; }
    body.home-page .kt-page { padding-top: 112px !important; }

    /* The legacy light-grey drawer (server-rendered as <aside class="side-menu side-menu_op">)
       used to be force-shown here. Its state class is `side-menu_op`, which never matches the
       `.side-menu_open` rule above, so it never received the off-screen translateX(100vw) and
       sat permanently over the whole viewport at z-index 520. Our Kartoosh panel (z 950) merely
       covered it, so the bug only surfaced on close. The new panel replaces it -> hide it. */
    .side-menu { display: none !important; }
}

/* Badge counters. An empty one stays invisible, same as the real site, but
     a badge that carries a count has to show - that is how the favourites
     count reaches the panel buttons. Scoped to the panel buttons only: the
     3-dot toggle also carries data-badge and keeps its own 28x28 icon box,
     so it gets its own bubble rule further down. */
  .sp-button-bc { position: relative; }
  .sp-button-bc [data-badge] { display: none; }
  .sp-button-bc [data-badge]:not(:empty) {
      display: block;
      position: absolute;
      top: 2px;
      right: 2px;
      min-width: 16px;
      height: 16px;
      padding: 0 4px;
      border-radius: 8px;
      background: #f8c524;
      color: #18232d;
      font-size: 10px;
      font-weight: 700;
      font-style: normal;
      line-height: 16px;
      text-align: center;
      pointer-events: none;
  }

/* ---- smart panel: 50x280 fixed @ 335,50, z-980 ---- */
.hdr-smart-panel-holder-arrow-bc {
    position: fixed;
    top: 50px;
    right: 5px;
    width: 50px;
    height: 280px;
    z-index: 980;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .16s ease;
}
.hdr-smart-panel-holder-arrow-bc.is-open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
/* the 7px arrow that points up at the 3-dot toggle */
.hdr-smart-panel-holder-arrow-bc::before {
    content: "";
    position: absolute;
    top: -7px;
    left: 25px;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 7px solid #18232d;
}
.hdr-smart-panel-holder-bc {
    position: relative;
    width: 50px;
    height: 280px;
    display: flex;
    flex-direction: column;
    padding: 0;
    background: #18232d;
    border-radius: 4px;
    overflow: hidden;
}
.sp-button-bc {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 56px;
    flex: 0 0 56px;
    padding: 1px 6px;
    background: rgba(255,255,255,.2);
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.sp-button-icon-bc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    color: #ffffff;
}
.sp-button-icon-bc svg {
    display: block;
    width: 18px;
    height: 18px;
}
.sp-button-content-text-bc { display: none; }

/* ===================================================================
   smart-panel destinations: sliding drawer, full-screen betslip and
   support sheet. Every rule is scoped to #ktSpDrawer / #ktSupport /
   #ktBetslip so the kartoosh class names they reuse (.form-control-bc,
   .betslip-bc, .tab-bc, ...) cannot leak into the desktop layout.
   Mobile only (the 3-dot toggle lives in .header-block-mobile, which is
   hidden >= 1024px).
   =================================================================== */
#ktSpDrawer,
#ktSupport {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(24, 35, 45, .7);
    z-index: 971;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
}
#ktSpDrawer.is-open,
#ktSupport.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
#ktSpDrawer .overlay-sliding-w-c-content-slider-bc,
#ktSupport .overlay-sliding-w-c-content-slider-bc {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background: #18232d;
}
#ktSpDrawer .back-nav-bc,
#ktSupport .back-nav-bc {
    display: flex;
    align-items: center;
    flex: 0 0 38px;
    height: 38px;
    padding: 0 7px;
    background: #18232d;
}
#ktSpDrawer .back-nav-icon-bc,
#ktSupport .back-nav-icon-bc {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    background: transparent;
    border: 0;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
#ktSpDrawer .back-nav-icon-bc svg,
#ktSupport .back-nav-icon-bc svg { display: block; width: 22px; height: 22px; }
#ktSpDrawer .back-nav-title-bc,
#ktSupport .back-nav-title-bc {
    display: block;
    margin: 0 8px;
    font-size: 16px;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
#ktSpDrawer .kt-sp-view-bc { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* login gate (kartoosh need-to-login) */
#ktSpDrawer .need-to-login {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 42px 10px;
    margin: 0 10px;
    color: rgba(255, 255, 255, .7);
    text-align: center;
}
#ktSpDrawer .need-to-login p { margin: 0; font-size: 14px; }
#ktSpDrawer .need-to-login .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    height: 36px;
    padding: 0 18px;
    background: #f8c524;
    color: #18232d;
    font-weight: 700;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
#ktSpDrawer .kt-sp-empty-bc { padding: 40px 16px; text-align: center; color: rgba(255, 255, 255, .6); font-size: 14px; }

/* settings selects */
#ktSpDrawer .settings-selectors-bc { padding: 7px; }
#ktSpDrawer .form-control-bc { position: relative; width: 100%; height: 52px; margin-bottom: 10px; }
#ktSpDrawer .form-control-select-bc {
    width: 100%;
    height: 52px;
    padding: 20px 30px 4px 15px;
    background: rgba(255, 255, 255, .15);
    color: rgba(255, 255, 255, .9);
    font-size: 15px;
    border: 0;
    border-radius: 4px;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
#ktSpDrawer .form-control-title-bc {
    position: absolute;
    top: 10px;
    left: 15px;
    right: 33px;
    font-size: 12px;
    color: rgba(255, 255, 255, .4);
    pointer-events: none;
}
#ktSpDrawer .form-control-icon-bc {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .6);
    pointer-events: none;
}
#ktSpDrawer .form-control-icon-bc svg { display: block; width: 16px; height: 16px; }

/* theme picker */
#ktSpDrawer .theme-title-bc {
    margin: 20px 0 0;
    padding: 20px 7px 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, .8);
}
#ktSpDrawer .sp-theme-container-bc {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 0 7px 16px;
}
#ktSpDrawer .sp-theme-item-bc {
    position: relative;
    height: 151px;
    padding: 0;
    background: #202a35;
    border: 2px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    overflow: hidden;
}
#ktSpDrawer .sp-theme-item-bc[data-kt-theme="light"] { background: #f1f3f7; }
#ktSpDrawer .sp-theme-item-bc.active { border-color: #f8c524; }
#ktSpDrawer .sp-theme-name-bc {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6px;
    text-align: center;
    font-size: 12px;
    color: rgba(255, 255, 255, .85);
}
#ktSpDrawer .sp-theme-item-bc[data-kt-theme="light"] .sp-theme-name-bc { color: #18232d; }

/* Favourites list.

   The drawer used to render horizontal rows with a small thumbnail, which read
   as an afterthought next to the rest of the site. The list is now a tile grid
   built from .kt-ftile, styled in assets/css/game-launch.css, which is the
   stylesheet that owns the tile controls - so there is one source of truth
   here. */

/* support sheet body */
#ktSupport .kt-support-bc { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
#ktSupport .kt-support__msg {
    max-width: 80%;
    margin: 8px 12px;
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
}
#ktSupport .kt-support__msg--agent { align-self: flex-start; background: rgba(255, 255, 255, .12); color: #ffffff; }
#ktSupport .kt-support__msg--user { align-self: flex-end; background: #f8c524; color: #18232d; }
#ktSupport .kt-support__list {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}
#ktSupport .kt-support__note { padding: 8px 12px; font-size: 12px; color: rgba(255, 255, 255, .5); }
#ktSupport .kt-support__form { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
#ktSupport .kt-support__input {
    flex: 1 1 auto;
    height: 40px;
    padding: 0 12px;
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    font-size: 14px;
    border: 0;
    border-radius: 4px;
}
#ktSupport .kt-support__send {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: #f8c524;
    color: #18232d;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}
#ktSupport .kt-support__send svg { display: block; width: 18px; height: 18px; }

/* full-screen betslip (scoped: #ktBetslip also carries .betslip-bc.Full) */
#ktBetslip {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 990;
    background: #18232d;
    opacity: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: opacity .2s ease, transform .2s ease, visibility .2s ease;
}
#ktBetslip.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
#ktBetslip .betslip-full-content-bc { display: flex; flex-direction: column; width: 100%; height: 100%; }
#ktBetslip .bs-f-header-bc { flex: 0 0 auto; padding: 8px 10px 0; }
#ktBetslip .bs-f-header-top-stage-bc { display: flex; align-items: center; gap: 10px; }
#ktBetslip .sport-search-betslip { position: relative; flex: 1 1 auto; display: flex; align-items: center; }
#ktBetslip .ss-input-bc {
    width: 100%;
    height: 40px;
    padding: 0 40px 0 14px;
    background: rgba(255, 255, 255, .1);
    color: #ffffff;
    font-size: 14px;
    border: 0;
    border-radius: 4px;
}
#ktBetslip .ss-input-bc::placeholder { color: rgba(255, 255, 255, .5); }
#ktBetslip .ss-icon-holder-bc {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, .7);
}
#ktBetslip .ss-icon-holder-bc svg { display: block; width: 18px; height: 18px; }
#ktBetslip .bs-f-h-t-close-icon-bc {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 0;
    color: #ffffff;
    cursor: pointer;
}
#ktBetslip .bs-f-h-t-close-icon-bc svg { display: block; width: 20px; height: 20px; }
#ktBetslip .second-tabs-bc { display: flex; margin-top: 6px; }
#ktBetslip .tab-bc {
    flex: 1 1 0;
    padding: 12px 4px;
    font-size: 13px;
    color: rgba(255, 255, 255, .55);
    text-align: center;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
#ktBetslip .tab-bc.active { color: #ffffff; border-bottom-color: #f8c524; }
#ktBetslip .betslip-body-bc { flex: 1 1 auto; overflow-y: auto; }
#ktBetslip .betslip-empty-bc {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 20px;
    color: rgba(255, 255, 255, .7);
    text-align: center;
}
#ktBetslip .betslip-empty-bc p { margin: 0; font-size: 15px; }
#ktBetslip .betslip-empty-bc .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 130px;
    height: 38px;
    padding: 0 18px;
    background: #f8c524;
    color: #18232d;
    font-weight: 700;
    border: 0;
    border-radius: 4px;
    text-decoration: none;
    cursor: pointer;
}

body.kt-drawer-open { overflow: hidden; }

/* keep the desktop layout untouched */
@media (min-width: 1024px) {
    #ktSpDrawer, #ktBetslip, #ktSupport { display: none !important; }
}

/* ===== footer sits flush against the content on mobile =====
   mobile.css adds `margin-top: 28px` to .site-footer, but the real
   kartoosh mobile footer starts immediately after the last content
   block (verified on /sports/tournaments: content ends 317, footer
   starts 317). Override so every mobile page lines up. */
@media (max-width: 1023px) {
    .site-footer { margin-top: 0; }
}