@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&display=swap');

/* Bayspin — TopHill/Betkral tarzı frontend polish (renkler aynı: altın / siyah) */
:root {
    --cs-pr: #D4AF37 !important;
    --cs-sc: #F4C430 !important;
    --cs-dark: #000000 !important;
    --cs-white: #ffffff !important;

    --cs-gr-pr: #050505 !important;
    --cs-gr-sc: #0A0A0A !important;

    --cs-header-gradient: linear-gradient(to left, #000000 0%, #0A0A0A 50%, #000000 100%) !important;
    --cs-btn-gradient: linear-gradient(to bottom, #F4C430 0%, #D4AF37 100%) !important;
    --cs-icon-gradient: linear-gradient(to bottom, #F4C430 0%, #D4AF37 100%) !important;

    --yellow: #D4AF37 !important;
    --gold: #F4C430 !important;
    --orange: #D4AF37 !important;

    --hero: 212, 175, 55 !important;
    --header: 0, 0, 0 !important;
    --b: 0, 0, 0 !important;
    --oc-1: 212, 175, 55 !important;
    --oc-2: 255, 255, 255 !important;
    --accent: 212, 175, 55 !important;
    --menu: 10, 10, 10 !important;
    --tab-navigation: 10, 10, 10 !important;

    --layout-width: 1670px;
    --cs-bg: none;
    --bm-radius: 12px;
    --bm-radius-lg: 20px;
    --bm-gold: #D4AF37;
    --bm-gold-bright: #F4C430;
    --bm-panel: #050505;
    --bm-panel-2: #0A0A0A;
}

html {
    --b: 0, 0, 0 !important;
    --hero: 212, 175, 55 !important;
    --hero-sc: 255, 255, 255 !important;
    --oc-1: 212, 175, 55 !important;
    --oc-1-sc: 255, 255, 255 !important;
    --oc-1-hover: 244, 196, 48 !important;
    --brand: 212, 175, 55 !important;
    --header: 0, 0, 0 !important;
    --menu: 10, 10, 10 !important;
    --menu-sc: 255, 255, 255 !important;
    --header-sc: 255, 255, 255 !important;
    --accent: 212, 175, 55 !important;
    --oc-2: 255, 255, 255 !important;
}

body {
    background: radial-gradient(circle at top, #0a0a0a 0%, #000000 70%) !important;
    background-color: #000000 !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    color: #ffffff !important;
    font-family: "Quicksand", system-ui, sans-serif !important;
}

body .layout-bc {
    background-color: #000000 !important;
    background-attachment: fixed !important;
    background-size: cover !important;
}

.snowflake,
.YoPhoneApp,
.switch-popup-wrapper,
in-auth-popup {
    display: none !important;
}

/* =========================
   PANELS / SURFACES
========================= */

.header-bc,
.layout-content-holder-bc,
.layout-footer-holder-bc,
.layout-header-holder-bc,
.nav-content-bc,
.nav-menu-container,
.sportsbook-container,
.left-menu-container,
.right-menu-container,
.center-column-container,
.betslip-holder-bc,
.betslip-bc,
.footer-bc,
.popup-inner-bc,
.modal-content,
.dialog-content {
    background: var(--bm-panel) !important;
    background-color: var(--bm-panel) !important;
}

.header-bc,
.nav-menu-sub {
    background: linear-gradient(to left, #000000 0%, #0A0A0A 50%, #000000 100%) !important;
}

.layout-header-holder-bc {
    box-shadow: none !important;
}

.header-bc {
    padding: 0 5px !important;
}

div#root.layout-bc .layout-content-holder-bc {
    max-width: 1630px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* =========================
   HEADER BUTTONS
========================= */

.btn.sign-in,
.hdr-user-bc .btn.sign-in {
    padding: 0 15px !important;
    border-radius: var(--bm-radius) !important;
    height: 40px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid var(--bm-gold) !important;
}

.btn.register,
.hdr-user-bc .btn.register {
    padding: 0 15px !important;
    border-radius: var(--bm-radius) !important;
    height: 40px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    background: linear-gradient(to bottom, #F4C430 0%, #D4AF37 100%) !important;
    border: 1px solid var(--bm-gold) !important;
}

.hdr-user-bc .btn {
    border-radius: var(--bm-radius) !important;
}

.btn.a-color,
.hdr-toggle-button-bc,
.header-custom-buttons a[class*=promotions],
.hdr-user-bc a[class*=promotions] {
    color: #ffffff !important;
    background: transparent !important;
    border: 1px solid rgba(212, 175, 55, 0.55) !important;
    border-radius: var(--bm-radius) !important;
}

.btn.a-color:hover,
.hdr-toggle-button-bc:hover,
.btn.sign-in:hover {
    background: rgba(212, 175, 55, 0.12) !important;
}

/* =========================
   TOP NAV (Betkral/TopHill-like chips)
========================= */

.nav-menu-container.header-navigation:first-child {
    background: linear-gradient(90deg, #000000 0%, #121212 50%, #000000 100%) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 0 !important;
    padding: 7px;
}

.nav-menu-container .nav-menu > li {
    margin: 0 5px;
}

.nav-menu-container .nav-menu > li > .nav-menu-item,
.nav-menu-container .nav-menu-other > .nav-menu-item {
    text-transform: capitalize;
    border-radius: 10px !important;
    padding: 0 8px !important;
    font-weight: 600 !important;
    font-size: 14px;
    color: #ffffff !important;
}

.nav-menu-container .nav-menu > li > .nav-menu-item > i,
.nav-menu-container .nav-menu-other > .nav-menu-item > i {
    background: #1a1a1a;
    padding: 5px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
}

.nav-menu-container .nav-menu > li > .nav-menu-item > .CMSIconSVGWrapper,
.nav-menu-container .nav-menu-other > .nav-menu-item > .CMSIconSVGWrapper {
    background: linear-gradient(to bottom, #F4C430, #D4AF37);
    padding: 5px;
    width: 23px;
    height: 23px;
    border-radius: 40px;
}

.nav-menu-container.header-navigation:first-child .nav-menu > li:hover > .nav-menu-item,
.nav-menu-container.header-navigation:first-child .nav-menu-other:hover > .nav-menu-item {
    box-shadow: none !important;
    background: rgba(212, 175, 55, 0.12) !important;
}

.nav-menu-container.header-navigation:first-child .nav-menu > li > .nav-menu-item.active,
.nav-menu-container.header-navigation:first-child .nav-menu-other > .nav-menu-item.active,
.tab-bc.active,
.btn.active,
.selected {
    background: linear-gradient(to bottom, #F4C430, #D4AF37) !important;
    color: #000000 !important;
    border-radius: 12px !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.28) !important;
}

.sport-search-icon-bc,
.sgm-market-search-icon,
.search-icon,
.favorite-icon,
.icon-star,
.star-icon i,
.active-icon {
    color: var(--bm-gold) !important;
    border-color: var(--bm-gold) !important;
}

.active,
.highlighted {
    border-color: var(--bm-gold) !important;
}

/* =========================
   CASINO / SLOTS / LIVE LOBBY
========================= */

.sdr-item-bc {
    border-radius: 10px !important;
}

.sdr-item-bc:before {
    display: none !important;
}

.horizontalSliderElem {
    padding: 0 !important;
    background: none !important;
    width: 130px !important;
}

.horizontalSliderElem img {
    filter: none !important;
    opacity: 1 !important;
}

.horizontal-sl-item-bc,
.casinoCategoryChooserContainer .horizontalSliderRow .horizontalSliderElem {
    border-radius: 10px !important;
}

.page-view-more {
    padding: 10px;
    background: linear-gradient(90deg, rgb(0 0 0) 0%, rgb(255 255 255 / 8%) 45%, rgb(0 0 0) 100%);
    border-radius: 10px;
}

.view-title-more {
    font-size: 14px;
    font-weight: 600;
    text-transform: capitalize;
    color: var(--bm-gold);
}

a.view-see-more {
    background: var(--bm-gold);
    padding: 7px 12px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    color: #000000;
}

.product-banner-container-bc {
    background: none !important;
    display: block !important;
    grid-template-columns: 1fr !important;
}

.is-home-page .product-banner-without-titles .product-banner-bc,
.product-banner-without-titles .product-banner-bc {
    width: 100% !important;
    height: auto !important;
    background: none !important;
}

.is-home-page .product-banner-without-titles .product-banner-img-bc,
.product-banner-without-titles .product-banner-img-bc {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    display: block;
}

/* =========================
   POPUPS / CARDS
========================= */

.popup-inner-bc {
    border-radius: 10px !important;
    border: 2px solid var(--bm-gold) !important;
    padding-top: 10px !important;
    box-shadow: 0 -2px 60px rgba(212, 175, 55, 0.35) !important;
}

.storiesWidgetListItem:not(.storiesItemSkeleton):not(.visited):before {
    background-image: linear-gradient(225deg, #D4AF37, #303030);
}

.footerLinkColTitle {
    font-weight: 600 !important;
    color: var(--bm-gold) !important;
}

/* =========================
   ODDS / MARKETS
========================= */

.market-bc,
.market-bc .coeff-bc,
.market-bc .market-name-bc,
.odd_coefficient,
.eur-odd,
.coef,
.d-odd,
.coefficient-bc {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(212, 175, 55, 0.15) !important;
    border-radius: 8px !important;
}

.market-bc.active,
.market-bc.active * {
    background: #D4AF37 !important;
    color: #000000 !important;
    border-color: #D4AF37 !important;
    box-shadow: 0 0 15px rgba(212, 175, 55, 0.40) !important;
}

/* =========================
   LOYALTY
========================= */

.u-i-p-a-content-bc:before {
    content: "";
    position: absolute !important;
    inset: 0 !important;
    opacity: .95 !important;
    background: radial-gradient(circle at 0% 100%, #0a0a0a, #000000 180%) !important;
}

.u-i-p-a-loyaltyPoint-bc {
    background-image: radial-gradient(circle at -14% 113%, #0a0a0a, #D4AF37) !important;
    border: 1px solid #D4AF37 !important;
}

/* =========================
   MISC
========================= */

.ftr-g-content-bc {
    display: none;
}

.popup-holder-bc:not(.user-profile-container) {
    z-index: 1099999901 !important;
}

/* Veritral Çark */
.iframe-widget.bm-veritral-cark {
    display: block;
    width: 100%;
    min-height: calc(100vh - 140px);
    border: 0;
    background: #000;
}

@keyframes pulse-force-gold {
    0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, .8); }
    70% { box-shadow: 0 0 0 15px rgba(212, 175, 55, 0); }
    100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
}

.nav-menu-container.header-navigation:first-child .nav-menu > li > .nav-menu-item[aria-label="YILBAŞI BİLETİ"]::after {
    animation: pulse-force-gold 2s infinite !important;
}