/* ============================================================ */
/* === PALETTE — bc.game-matched (set 2026-04-26)            === */
/* === Body grey (#232626), header/menu lighter (#292D2E),    === */
/* === accent emerald (#24EE89).                                */
/* ============================================================ */

:root {
    --b: 35, 38, 38 !important;          /* #232626 — bc.game body bg */
    --hero: 36, 238, 137 !important;     /* #24EE89 — bc.game brand green */
    --oc-1: 36, 238, 137 !important;
    --oc-2: 36, 238, 137 !important;
    --header: 41, 45, 46 !important;     /* #292D2E — header + nav bg */
    --menu: 41, 45, 46 !important;
}

/* ============================================================ */
/* === LANDING PAGE — centered chrome + nice hero slider     === */
/* === Home-only: max content 1440px, symmetric gutters       */
/* === beyond, slider collapsed to a single full-width slot   */
/* === with rounded corners. Sport / casino / other routes    */
/* === stay untouched (BC defaults).                          */
/* ============================================================ */

html.is-web {
    --tb-max-content: 1440px;
    --tb-side-gutter: max(0px, calc((100vw - var(--tb-max-content)) / 2));
}

/* Home-only side gutters on content + footer */
html.is-web .layout-bc.is-home-page .layout-content-holder-bc,
html.is-web .layout-bc.is-home-page .layout-footer-holder-bc {
    padding-inline-start: var(--tb-side-gutter) !important;
    padding-inline-end: var(--tb-side-gutter) !important;
    box-sizing: border-box !important;
}

/* Betslip drawer also respects the right gutter on home so it stays
   inside the centered chrome at viewports wider than 1440px */
html.is-web .layout-bc.is-home-page .layout-betslip-holder-bc {
    inset-inline-end: var(--tb-side-gutter) !important;
}

/* === Hero slider — fill the empty sibling slot ===
   BC ships the home hero row as a 2-column grid (508px empty + 833px
   active slider). Collapse to a single full-width column. */
html.is-web .is-home-page .hm-row-bc.has-slider {
    grid-template-columns: 1fr !important;
}

html.is-web .is-home-page .hm-row-bc.has-slider > *:not(:has(.slider-bc)) {
    display: none !important;
}

html.is-web .is-home-page .hm-row-bc.has-slider > *:has(.slider-bc) {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: none !important;
}

html.is-web .is-home-page .hm-row-bc.has-slider .slider-bc,
html.is-web .is-home-page .hm-row-bc.has-slider .carouselWrapper,
html.is-web .is-home-page .hm-row-bc.has-slider .swiper {
    width: 100% !important;
    max-width: none !important;
}

/* Kill the empty black bar below the slider image (zero out padding,
   margin, min-height on every Swiper layer) */
html.is-web .is-home-page .hm-row-bc.has-slider .slider-bc,
html.is-web .is-home-page .hm-row-bc.has-slider .carouselWrapper,
html.is-web .is-home-page .hm-row-bc.has-slider .swiper,
html.is-web .is-home-page .hm-row-bc.has-slider .swiper-wrapper,
html.is-web .is-home-page .hm-row-bc.has-slider .swiper-slide {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
    min-height: 0 !important;
}

/* Hide pagination dots / scrollbar that show empty when slider has 1 slide */
html.is-web .is-home-page .hm-row-bc.has-slider .swiper-pagination,
html.is-web .is-home-page .hm-row-bc.has-slider .swiper-scrollbar,
html.is-web .is-home-page .hm-row-bc.has-slider .swiper-pagination-bullets {
    display: none !important;
}

/* Image baseline gap fix */
html.is-web .is-home-page .hm-row-bc.has-slider .slider-bc img,
html.is-web .is-home-page .hm-row-bc.has-slider .swiper-slide img {
    display: block !important;
    margin-bottom: 0 !important;
    vertical-align: top !important;
}

/* === Hero slider — rounded corners (bc.game-style large radius) === */
html.is-web .slider-bc,
html.is-web .slider-bc .swiper,
html.is-web .slider-bc .swiper-slide,
html.is-web .slider-bc .swiper-slide img,
html.is-web .banners-section .banner-bc {
    border-radius: 20px !important;
    overflow: hidden !important;
}

/* ============================================================ */
/* === TOP NAV — center + pill style on top-level items      === */
/* === BC ships the nav as a horizontal flex row inside       === */
/* === header-bc > nav-content-bc > nav-content-menu.         === */
/* === Submenus (.nav-menu-sub + chevrons) are LEFT UNTOUCHED  === */
/* === so BC's hover-flyout pattern still works as shipped.   === */
/* ============================================================ */

html.is-web nav.nav-menu-container.header-navigation,
html.is-web nav.header-navigation > div,
html.is-web nav.header-navigation .nav-content-menu,
html.is-web nav.header-navigation > .nav-menu,
html.is-web nav.header-navigation > div > .nav-menu,
html.is-web nav.header-navigation .nav-menu-hide-items {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    padding-block: 4px !important;
    height: auto !important;
    max-height: none !important;
    min-height: 44px !important;
}

/* === Top-level pill items (only direct children of .nav-menu /
   .nav-menu-hide-items — NOT submenu descendants) === */
html.is-web body nav.nav-menu-container.header-navigation .nav-menu > li > a.nav-menu-item,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu-hide-items > li > a.nav-menu-item {
    height: 32px !important;
    padding: 0 10px !important;
    margin: 0 2px !important;
    gap: 6px !important;
    border-radius: 8px !important;
    color: rgba(var(--b-sc), 0.72) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* Hover — same look as selected/active (green-tinted card with soft glow) */
html.is-web body nav.nav-menu-container.header-navigation .nav-menu > li:hover > a.nav-menu-item,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu-hide-items > li:hover > a.nav-menu-item {
    background: linear-gradient(90deg, rgba(var(--hero), 0.20) 0%, rgba(var(--hero), 0.04) 100%) !important;
    border-color: rgba(var(--hero), 0.35) !important;
    color: rgba(var(--hero), 1) !important;
    font-weight: 600 !important;
    box-shadow: 0 0 16px rgba(var(--hero), 0.10) !important;
}

/* Active — green-tinted card with soft glow */
html.is-web body nav.nav-menu-container.header-navigation .nav-menu > li > a.nav-menu-item.active,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu > li > a.nav-menu-item.selected,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu > li > a.nav-menu-item[aria-current="page"],
html.is-web body nav.nav-menu-container.header-navigation .nav-menu-hide-items > li > a.nav-menu-item.active,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu-hide-items > li > a.nav-menu-item.selected,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu-hide-items > li > a.nav-menu-item[aria-current="page"] {
    background: linear-gradient(90deg, rgba(var(--hero), 0.20) 0%, rgba(var(--hero), 0.04) 100%) !important;
    border-color: rgba(var(--hero), 0.35) !important;
    color: rgba(var(--hero), 1) !important;
    font-weight: 600 !important;
    box-shadow: 0 0 16px rgba(var(--hero), 0.10) !important;
}

/* No focus ring on top-level pills */
html.is-web body nav.nav-menu-container.header-navigation .nav-menu > li > a.nav-menu-item:focus,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu > li > a.nav-menu-item:focus-visible,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu-hide-items > li > a.nav-menu-item:focus,
html.is-web body nav.nav-menu-container.header-navigation .nav-menu-hide-items > li > a.nav-menu-item:focus-visible {
    outline: none !important;
    text-decoration: none !important;
}

/* === Submenu wrapper — strip the panel bg so items float as cards === */
html.is-web nav.header-navigation .nav-menu-sub {
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

/* Submenu items — opaque cards so they don't read as glassy/see-through.
   Uses bc.game's bg-layer4 (rgb 50,55,56), one step lighter than the nav row. */
html.is-web nav.header-navigation .nav-menu-sub a.nav-menu-item {
    background: rgb(50, 55, 56) !important;
    border: 1px solid rgba(var(--b-sc), 0.06) !important;
    border-radius: 8px !important;
}

html.is-web nav.header-navigation .nav-menu-sub li:hover > a.nav-menu-item {
    background: rgb(58, 63, 64) !important;
    border-color: rgba(var(--b-sc), 0.08) !important;
}