@import "https://static-hep.hepbet-static.workers.dev/desktop-custom.css";

/* bv-jackpot-bg: /assets/images/jackpot-bg.png was cached as 404 at the CDN */
.casino-jackpot-widget.casino-jackpot-widget--widget{background-image:url(/assets/images/jackpot-bg.png?bvjk=2) !important;}

/* bv-promogap: restore the gap under the promotions category bar (was clipped to 66px) */
html[class*=is-mobile] .promotion-page .horizontalList,
html[class*=is-mobile] .horizontalList:has(.promotion-horizontal-sl-list-bc){height:80px !important;max-height:80px !important;}
/* --- systemic slider gap fix --- */
.hm-row-bc.has-slider { grid-auto-rows: auto !important; gap: 0 !important; align-content: start !important; }
.hm-row-bc.has-slider > .hm-row-bc-inner { min-height: 0 !important; }
/* The slider/skeleton can carry an inline aspect-ratio (e.g. 384/97) on
   .slider-bc while the image uses its own ratio -> empty band underneath. */
.hm-row-bc.has-slider .slider-bc { aspect-ratio: auto !important; height: auto !important; }
.hm-row-bc.has-slider .slider-bc > .sdr-item-holder-bc { height: auto !important; }
.hm-row-bc.has-slider .carouselWrapper,
.hm-row-bc.has-slider .carouselWrapper > .swiper,
.hm-row-bc.has-slider .carouselWrapper > .swiper > .swiper-wrapper,
.hm-row-bc.has-slider .carouselWrapper > .swiper > .swiper-wrapper > .swiper-slide {
    height: auto !important;
    min-height: 0 !important;
}
/* Beat the SPA's INLINE aspect-ratio on .sdr-item-holder-bc (only !important
   in a stylesheet can override an inline style). */
.hm-row-bc.has-slider .sdr-item-holder-bc { height: auto !important; aspect-ratio: auto !important; }
.hm-row-bc.has-slider .sdr-item-holder-bc > .sdr-item-bc { height: auto !important; aspect-ratio: auto !important; }
.hm-row-bc.has-slider .sdr-image-bc { height: auto !important; width: 100% !important; object-fit: contain !important; }
/* Normalise the row title block so rows WITH and WITHOUT a title line up
   (base CSS gives .page-view-more a min-height/margin that shifts the row). */
.hm-row-bc > .hm-row-bc-inner > .page-view-more { min-height: 0 !important; margin: 0 0 6px !important; padding: 0 !important; }
.hm-row-bc > .hm-row-bc-inner > .page-view-more .view-title-more { margin: 0 !important; line-height: 1.2 !important; }
/* Hide the BetConstruct deposit/withdraw promotion banner slider (its banners
   are BetConstruct partner content, not site content). */
.dep-w-info-bc .slider-bc { display: none !important; }

/* bv-root: page background (reference navy) + content area transparent */
body{background-color:#171C2B !important;}
.layout-content-holder-bc{background-color:transparent !important;}

/* bv-hide-notif: hide automatic whats-new notifications */
.notification-new-container,.notification-new-header,.notification-new-item,.notification-new-holder,.notification-container{display:none !important;}

/* bv-notif-center: dikey ortala (mobil) */
.notification-new-item{display:flex !important;align-items:center !important;min-height:44px !important;gap:8px !important;}
.notification-new-item-info{flex:1 1 auto !important;display:flex !important;align-items:center !important;line-height:1.3 !important;}
.notification-new-item-icon{flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;justify-content:center !important;}
.notification-new-item>i.bc-i-close-remove{flex:0 0 auto !important;display:inline-flex !important;align-items:center !important;}


@media (max-width:1024px){
  #chat-widget-container,#livechat-compact-container,#livechat-full,[id*="livechat"][id*="container"],iframe[title*="chat" i]{z-index:1400 !important;bottom:54px !important;}
  .e1mwfyk10,[class*="e1mwfyk"],[aria-label*="LiveChat sohbet"],[aria-label*="LiveChat"]{bottom:54px !important;z-index:1400 !important;}
  [data-lc-id][role="main"],div[data-lc-id]{z-index:1400 !important;}
}

/* bv-navgbtn: move back-to-top button out of the centre (was covering payment icons) */
.nav-floating-btn{left:auto !important;right:16px !important;bottom:120px !important;margin:0 !important;}
@media (max-width:1024px){.nav-floating-btn{left:auto !important;right:12px !important;bottom:120px !important;margin:0 !important;}}

/* bv-list-size: match reference .horizontalList height (66px) */
.horizontalList .horizontalSliderWrapper,.horizontalList .horizontalSliderRow{padding-top:0 !important;padding-bottom:0 !important;}
.horizontalList{max-height:66px !important;overflow:hidden !important;}

/* bv-verbump */

/* bv-promogap: restore gap under the promotions category bar (bar was clipped to 66px) */
html[class*=is-mobile] .promotion-page .horizontalList,
html[class*=is-mobile] .horizontalList:has(.promotion-horizontal-sl-list-bc){height:80px !important;max-height:80px !important;}

/* bv-jackpot-bg: /assets/images/jackpot-bg.png was cached as 404 at the CDN */
.casino-jackpot-widget.casino-jackpot-widget--widget{background-image:url(/assets/images/jackpot-bg.png?bvjk=2) !important;}

#root, :root, body, html.is-mobile, html.is-mobile body {
  --b: 18, 18, 18 !important;
  --b-rgb: 18, 18, 18 !important;
  --b-hover: 16, 16, 16 !important;
  --yellow: #FFE71D !important;
  --yellow-rgb: 255, 231, 29 !important;
  --green: #157B45 !important;
  --green-rgb: 21, 123, 69 !important;
  --black: #121212 !important;
  --black-rgb: 18, 18, 18 !important;
  --white: #fff !important;
  --red: #CA4547 !important;
  --red-rgb: 202, 69, 71 !important;
  --gray: #222a34 !important;
  --gray-rgb: 34, 42, 52 !important;
  --brand: 22, 199, 46 !important;
  --secondary: 6, 169, 170 !important;
  --oc-2: 182, 134, 46 !important;
  --oc-3: 255, 52, 73 !important;
  --odd-up: 22, 199, 46 !important;
  --odd-down: 255, 52, 73 !important;
  --header: 33, 33, 33 !important;
  --menu: 33, 33, 33 !important;
  --tab-navigation: #E3E3ED !important;
  --tab-navigation-rgb: 227, 227, 237 !important;
  --hero-sc: 255, 255, 255 !important;
}

#root, :root, body, html.is-mobile, html.is-mobile body {
  --hero: 238, 40, 50 !important;
  --hero-hover: 238, 40, 50 !important;
  --hero-sc: 255, 255, 255 !important;
  --oc-1: 238, 40, 50 !important;
  --oc-1-hover: 238, 40, 50 !important;
  --oc-1-sc: 255, 255, 255 !important;
  --accent: 238, 40, 50 !important;
  --accent-hover: 238, 40, 50 !important;
  --accent-sc: 255, 255, 255 !important;
}

/* profile panel scrollbar: transparent, no white track */
.u-i-profile-page-content,.u-i-profile-page-content *{scrollbar-color:rgba(255,255,255,.2) transparent;}
.u-i-profile-page-content::-webkit-scrollbar,.u-i-profile-page-content *::-webkit-scrollbar{width:6px;height:6px;}
.u-i-profile-page-content::-webkit-scrollbar-track,.u-i-profile-page-content *::-webkit-scrollbar-track,
.u-i-profile-page-content::-webkit-scrollbar-corner,.u-i-profile-page-content *::-webkit-scrollbar-corner{background:transparent!important;}
.u-i-profile-page-content::-webkit-scrollbar-thumb,.u-i-profile-page-content *::-webkit-scrollbar-thumb{background:rgba(255,255,255,.2);border-radius:3px;}

/* not-verified red glow removed */
.user-not-verified,
.avatarHolderImg.user-not-verified,
.hdr-user-avatar-icon-bc.user-not-verified,
.account-verified-edit-icon.bc-i-not-verified,
.bc-i-not-verified{text-shadow:none!important;box-shadow:none!important;filter:none!important;}
.account-verified-button,.account-verified-button:hover,.account-verified-button:focus,.account-verified-button:active{box-shadow:none!important;}

/* header bonus balance -> white */
.hdr-user-info-content-bc.bonus-available .hdr-user-info-texts-bc.ext-2{color:#fff!important;}

/* bv-jackpot-bg: /assets/images/jackpot-bg.png was cached as 404 at the CDN */
.casino-jackpot-widget.casino-jackpot-widget--widget{background-image:url(/assets/images/jackpot-bg.png?bvjk=2) !important;}

/* bv-promogap: restore the gap under the promotions category bar (was clipped to 66px) */
html[class*=is-mobile] .promotion-page .horizontalList,
html[class*=is-mobile] .horizontalList:has(.promotion-horizontal-sl-list-bc){height:80px !important;max-height:80px !important;}

/* --- mobile bottom navigation: native CSS composes rgba(var(--tab-navigation),.9),
   so the variable must be an "R, G, B" triplet. A per-site hex value made it
   invalid and left the bottom nav fully transparent. --- */
:root, html, body, #root.layout-bc, html.is-mobile {
    --tab-navigation: 25, 25, 25 !important;
    --tab-navigation-rgb: 25, 25, 25 !important;
}

/* --- promotion-detail modal (web): keep the reference 2-column grid, but let
   the details box own the scroll inside the flex column (otherwise the modal
   grows/clips instead of scrolling). --- */
#root .popup-inner-bc:has(> .promotion-details-container) {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
}
#root .popup-inner-bc:has(> .promotion-details-container) > .promotion-details-container {
    flex: 1 1 auto !important;
    min-height: 0 !important;
}

/* --- mobile header: keep the native compact single row --- */
@media (max-width: 767px) {    /* overlay-sliding pages (profile, promotions, bonus journey, ...): the
       wrapper height is calc(100% - header-height) and the custom CSS
       height:100% chains leave the inner scroller with no real height, so the
       content can't scroll. Give the overlay the full viewport + a working
       vertical scroll area. */
    #root .overlay-sliding-wrapper-bc {
        height: 100dvh !important;
        top: 0 !important;
        bottom: 0 !important;
    }
    #root .overlay-sliding-w-c-content-slider-bc {
        height: 100% !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
    }

    #root.layout-bc .header-bc .hdr-main-content-bc {
        box-sizing: border-box !important;
        width: 100% !important; height: 49px !important; min-height: 0 !important;
        padding: 0 var(--padding-page-aside) !important;
        margin: 0 !important; flex-wrap: nowrap !important;
        justify-content: flex-start !important; gap: 0 !important;
    }
    #root.layout-bc .header-bc .logo-container {
        flex: 1 1 auto !important; min-width: 0 !important;
        justify-content: flex-start !important; height: auto !important; margin-inline-end: 8px !important;
    }
    #root.layout-bc .header-bc .hdr-logo-bc,
    #root.layout-bc .header-bc .logo {
        width: auto !important; height: 32px !important; max-height: 32px !important; object-fit: contain !important;
    }
    #root.layout-bc .header-bc .hdr-user-bc {
        flex: 0 0 auto !important; min-width: 0 !important;
        flex-wrap: nowrap !important; justify-content: flex-end !important;
        margin: 0 !important; margin-inline-start: auto !important; gap: 6px !important;
    }
    #root.layout-bc .header-bc .hdr-user-bc > * { margin: 0 !important; }

    /* popups / modals (promotions, etc.): always allow the content to scroll
       on mobile — the inner box was overflow:hidden with no scroll area. */
    #root .popup-holder-bc .popup-middleware-bc,
    #root .popup-holder-bc .popup-inner-bc {
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior: contain !important;
    }
    #root .popup-holder-bc .popup-inner-bc > * { max-height: none !important; overflow: visible !important; }

    /* promotion-detail overlay (mobile): the REAL DOM is
       .overlay-sliding-wrapper-bc.promotion-details-popup >
       .overlay-sliding-w-c-content-slider-bc > .promotion-details-container
       The custom CSS keeps a desktop 2-col grid + height:auto inside a flex
       column, so nothing overflows the scroller. Force single column and give
       the slider a real, tappable scroll area. */
    #root .overlay-sliding-wrapper-bc.promotion-details-popup,
    #root .overlay-sliding-wrapper-bc:has(.promotion-details-container) {
        height: 100dvh !important;
        top: 0 !important;
        bottom: auto !important;
        background: rgba(var(--b), 1) !important;
    }
    #root .overlay-sliding-w-c-content-slider-bc:has(.promotion-details-container) {
        height: 100% !important;
        max-height: 100dvh !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior: contain !important;
    }
    #root .overlay-sliding-w-c-content-slider-bc:has(.promotion-details-container) .promotion-details-container {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        flex: 0 0 auto !important;
        padding: 12px !important;
    }
    #root .overlay-sliding-wrapper-bc .promotion-details-header { position: static !important; }
    #root .overlay-sliding-wrapper-bc .promotion-details-info,
    #root .overlay-sliding-wrapper-bc .promotion-details-info .promotion-details-info {
        height: auto !important; max-height: none !important; overflow: visible !important; padding: 0 !important;
    }
    #root .overlay-sliding-wrapper-bc .spoiler-content { max-height: none !important; overflow: visible !important; }

    /* Header flows with the page on mobile so the content is never hidden
       behind the fixed header (the fixed box was only 49px tall while its
       children extended to ~129px, leaving the first content rows covered). */
    #root.layout-bc .header-bc {
        position: static !important; top: auto !important; left: auto !important;
        height: auto !important; padding-top: max(8px, env(safe-area-inset-top)) !important;
    }
    #root.layout-bc .layout-header-holder-bc { height: auto !important; min-height: 0 !important; }
    #root.layout-bc .layout-content-holder-bc { padding-top: 0 !important; }

    /* mobile slide-out menu: restore the 2-column card grid (a stray global
       .m-block-nav-items-bc grid rule used to scatter/overlap the items) */
    .m-nav-info-w-container-bc .m-block-nav-items-bc,
    #root .m-nav-info-w-container-bc .m-block-nav-items-bc {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 8px !important;
        padding: 8px !important;
    }
    .m-nav-info-w-container-bc .m-block-nav-items-bc > .menu-group-title,
    #root .m-nav-info-w-container-bc .m-block-nav-items-bc > .menu-group-title {
        grid-column: 1 / -1 !important;
    }
    .m-nav-info-w-container-bc .app-nav-arrow-block-bc,
    #root .m-nav-info-w-container-bc .app-nav-arrow-block-bc {
        width: auto !important; min-width: 0 !important; margin: 0 !important;
    }
    .m-nav-info-w-container-bc .app-nav-link,
    #root .m-nav-info-w-container-bc .app-nav-link { display: block !important; width: 100% !important; }
    .m-nav-info-w-container-bc .m-nav-items-list-item-bc,
    #root .m-nav-info-w-container-bc .m-nav-items-list-item-bc {
        height: 56px !important; min-height: 0 !important; width: 100% !important;
        flex-direction: row !important; align-items: center !important;
    }
    /* match the reference card look: plain surface (not the per-site red
       radial gradient loaded from custom.css) and tighter height */
    .m-nav-info-w-container-bc .m-nav-items-list-item-bc,
    #root .m-nav-info-w-container-bc .m-nav-items-list-item-bc {
        background: #1b1b1d !important;
        border: 1px solid rgba(255,255,255,.06) !important;
        border-radius: 8px !important;
        height: 52px !important;
        min-height: 52px !important;
        max-height: 52px !important;
        padding: 0 10px !important;
    }
    .m-nav-info-w-container-bc .m-nav-list-item-title-bc,
    #root .m-nav-info-w-container-bc .m-nav-list-item-title-bc {
        text-transform: none !important; letter-spacing: 0 !important;
    }
    .m-nav-info-w-container-bc .nav-ico-w-row-bc,
    #root .m-nav-info-w-container-bc .nav-ico-w-row-bc {
        width: auto !important; height: auto !important; flex: 0 0 auto !important;
        padding: 0 !important; margin: 0 10px 0 0 !important;
        justify-content: flex-start !important; align-items: center !important; z-index: auto !important;
    }
    .m-nav-info-w-container-bc .nav-ico-w-row-bc svg,
    #root .m-nav-info-w-container-bc .nav-ico-w-row-bc svg { width: 22px !important; height: 22px !important; }
    .m-nav-info-w-container-bc .m-nav-items-list-item-bc .m-nav-list-item-title-bc,
    #root .m-nav-info-w-container-bc .m-nav-items-list-item-bc .m-nav-list-item-title-bc {
        flex: 1 1 auto !important; min-width: 0 !important; width: auto !important;
        writing-mode: horizontal-tb !important; text-align: left !important;
        white-space: normal !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }
}

/* --- footer: let the licence seal render at its real size --- */
#root.layout-bc > .layout-footer-holder-bc .footerWrapper .footerContainer .sliderSingleEl:has(.anj-container) {
    height: auto !important; min-height: 0 !important;
}
#root.layout-bc > .layout-footer-holder-bc .footerWrapper .footerContainer .sliderSingleEl:has(.anj-container) > .sliderImage {
    height: auto !important; min-height: 0 !important;
}
#root.layout-bc > .layout-footer-holder-bc .footerWrapper .footerContainer .FooterLicenceCuracaoContainer,
#root.layout-bc > .layout-footer-holder-bc .footerWrapper .footerContainer .FooterLicenceCuracaoContainer > div,
#root.layout-bc > .layout-footer-holder-bc .footerWrapper .footerContainer .FooterLicenceCuracaoContainer a {
    width: 96px !important; height: 96px !important; max-width: 96px !important; min-width: 96px !important; max-height: none !important;
}