/* Crown247 brand theme — mobile (logo: black / gold / silver) */
:root{
  --c247-black:#0a0a0a;
  --c247-black-2:#1a1a1a;
  --c247-gold:#d4af37;
  --c247-gold-bright:#f5c842;
  --c247-gold-deep:#a67c1a;
  --c247-silver:#c8c8c8;
  --c247-silver-bright:#e8e8e8;

  --header-bg:
    radial-gradient(ellipse 48% 160% at 6% 50%, rgba(245,200,66,.38) 0%, rgba(212,175,55,.16) 32%, transparent 68%),
    linear-gradient(180deg, #3a3220 0%, #1c1710 48%, #0a0a0a 100%);
  --header-wallet-text:var(--c247-gold-bright);
  --main-header-text:var(--c247-gold-bright);
  --main-header-icon:var(--c247-gold);
  --main-header-bg:
    radial-gradient(ellipse 48% 160% at 6% 50%, rgba(245,200,66,.38) 0%, rgba(212,175,55,.16) 32%, transparent 68%),
    linear-gradient(180deg, #3a3220 0%, #1c1710 48%, #0a0a0a 100%);
  --main-header-login-btn-bg:linear-gradient(180deg,#f5c842 0%,#d4af37 55%,#a67c1a 100%);
  --main-header-login-btn-boder:#a67c1a;
  --header-login-bg:linear-gradient(180deg,#f5c842 0%,#d4af37 55%,#a67c1a 100%);
  --header-login-text:#111;
  --menu-bg:linear-gradient(180deg,#f5c842 0%,#d4af37 50%,#b8922a 100%);
  --menu-text:#111;
  --menu-bg--select:#ffe08a;
  --menu-bg--hover:rgba(255,255,255,.22);
  --main-btn-bg:linear-gradient(180deg,#2a2a2a 0%,#0a0a0a 100%);
  --main-btn-text:var(--c247-gold-bright);
  --main-btn-border:#333;
  --fullmarket-highlight-bg:var(--c247-gold);
  --fullmarket-highlight-text:#111;
  --login-bg:linear-gradient(180deg,#f5c842 0%,#d4af37 100%);
  --login-btn-bg:linear-gradient(180deg,#2a2a2a 0%,#0a0a0a 100%);
  --login-btn-text:var(--c247-gold-bright);
  --sx-accent:var(--c247-gold-bright);
}

#app .login-logo{top:52%;width:80%;height:6.875rem}
#app .header-logo{
  height:2.688rem;
  filter:drop-shadow(0 0 8px rgba(245,200,66,.5)) drop-shadow(0 1px 2px rgba(0,0,0,.7));
}
#app .reset-password-logo{height:3.75rem}

#app .text-brand,
#app a.text-brand{color:var(--c247-gold)!important}
#app .bg-brand,
#app .bg-primary{background-color:var(--c247-gold)!important;color:#111!important}
#app .border-brand{border-color:var(--c247-gold)!important}
#app .open-bet-list-header.text-primary{color:#1e1e1e!important}
#app .in-play-hight-light-title,
#app [class*="in-play-hight-light-title"]{color:#fff!important}

#app .btn-primary,
#app .button-primary,
#app button.primary,
#app .place-bet-btn,
#app .bet-slip-place,
#app .login-btn,
#app .btn-login,
#app .confirm-btn{
  background:linear-gradient(180deg,#f5c842,#d4af37 55%,#a67c1a)!important;
  color:#111!important;
  border-color:#a67c1a!important;
}

#app .leagues-link.--active .leagues-link-dot,
#app .leagues-group-category-links .leagues-link-dot{
  background-color:var(--c247-gold)!important;
}

/* Sticky header (scrape) — News+wallet in flow so promo banner is fully visible. */
#app .modal{z-index:200000!important}
body:has(.modal:not(.header)) #app header,
body:has(.modal:not(.header)) #app .header-wrap,
body:has(.modal:not(.header)) #app .header-container,
body:has(.modal:not(.header)) #app nav.footer-wrap{z-index:1!important}
#app .header-container,
#app header,
#app .header-wrap,
#app #header{
  position:sticky!important;
  top:env(safe-area-inset-top,0px)!important;
  z-index:5000!important;
  overflow:visible!important;
  width:100%;
  background:
    radial-gradient(ellipse 48% 160% at 6% 50%, rgba(245,200,66,.38) 0%, rgba(212,175,55,.16) 32%, transparent 68%),
    linear-gradient(180deg, #3a3220 0%, #1c1710 48%, #0a0a0a 100%)!important;
  border-bottom:1px solid rgba(212,175,55,.55)!important;
  box-shadow:inset 0 1px 0 rgba(245,200,66,.18)!important;
}
#app:has(#header .marquee) main .marquee{
  display:none!important;
}
#app .header-liner,
#app .header-wrapper{
  position:relative;
  /* Above yellow sport-nav so Main Balance / My Account paint over it.
     LIVE tags sit at top:0 inside the yellow bar. */
  z-index:50!important;
  overflow:visible!important;
}
/* Header My Account uses .relative.account-container — raise under header only */
#app #header .header-info,
#app #header .header-wallet,
#app #header .header-setting,
#app #header .account-wrap,
#app #header .relative.account-container,
#app .header-container .header-info,
#app .header-container .header-wallet,
#app .header-container .header-setting,
#app .header-container .account-wrap,
#app .header-container .relative.account-container{
  position:relative!important;
  z-index:5100!important;
  overflow:visible!important;
}
#app #header .account-menu,
#app #header .multi-wallet-details,
#app #header .absolute.left-0.right-0.top-full,
#app .header-container .account-menu,
#app .header-container .multi-wallet-details,
#app .header-container .absolute.left-0.right-0.top-full{
  z-index:5200!important;
}
#app .navbar-list{
  position:relative;
  /* Below header-liner so wallet/account dropdowns win */
  z-index:10!important;
  /* Scroll on .filter-container — keep this row from clipping LIVE badges */
  overflow:visible!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  width:100%!important;
  max-width:100%!important;
  padding-top:0!important;
  padding-bottom:0!important;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#app .navbar-list::-webkit-scrollbar{display:none;height:0}
#app main,
#app .default-layout,
#app main .account-container,
#app .layout-content .account-container,
#app #c247-promo-slider{
  position:relative;
  z-index:1!important;
}
#app .navbar-container{
  height:1.875rem!important;
  display:flex!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  margin-left:0!important;
  margin-right:0!important;
  overflow:visible!important;
  padding-top:0!important;
  min-width:0!important;
  z-index:10!important;
}
#app .navbar-container > *{
  min-width:0!important;
}
#app .filter-container{
  overflow-x:auto!important;
  overflow-y:visible!important;
  -webkit-overflow-scrolling:touch;
  touch-action:pan-x;
  flex:1 1 0%!important;
  min-width:0!important;
  max-width:100%!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  padding-top:0!important;
  height:100%;
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#app .filter-container::-webkit-scrollbar{display:none;height:0}
#app .navbar-list .filter-item{
  overflow:visible!important;
  margin-top:0!important;
  flex:0 0 auto!important;
  white-space:nowrap!important;
  position:relative!important;
  z-index:1;
}
#app .filter-item-live-tag-wrap{
  /* Sit just inside yellow bar so overflow/scroll never clips; z above header-liner */
  top:0!important;
  z-index:30!important;
  overflow:visible!important;
  pointer-events:none;
}
#app .tag-live{z-index:30!important;overflow:visible!important}

/* Hide Sign up — registration closed */
#app .button-header-sign,
#app .header-sign-up-button,
#app a.btn-signup,
.button-header-sign,
.header-sign-up-button,
a.btn-signup{
  display:none!important;
}