/* MegaBox V1 desktop visual refresh. Backend and provider logic unchanged. */
:root{--mbx-gold:#f7c76a;--mbx-glass:rgba(8,21,39,.86);--mbx-edge:rgba(244,194,94,.25)}
body{background:radial-gradient(ellipse at 50% -8%,#142c43 0%,#071526 35%,#050c18 100%);}
.top-header{height:82px;background:linear-gradient(110deg,rgba(4,13,25,.98),rgba(10,26,45,.94))!important;border-bottom:1px solid var(--mbx-edge)!important;box-shadow:0 8px 30px rgba(0,0,0,.22)}
.top-header__inner{gap:16px}.brand img{width:206px;max-height:62px;object-fit:contain}
.top-actions{gap:12px}.inline-login{gap:9px}.inline-login .btn{height:39px;min-width:100px;border-radius:12px;letter-spacing:.03em}
.inline-login .btn-login{background:rgba(255,255,255,.055);border:1px solid rgba(255,208,125,.45);box-shadow:inset 0 1px rgba(255,255,255,.08);color:#ffe0a1}
.inline-login .btn-register{background:linear-gradient(130deg,#fff0b2,#d69a36 62%,#ad641b);color:#1c1307;box-shadow:0 7px 20px rgba(217,152,53,.23)}
.main-nav{height:84px;background:linear-gradient(180deg,rgba(11,25,42,.98),rgba(5,14,27,.98))!important;border-bottom:1px solid rgba(250,194,93,.25)!important;box-shadow:0 8px 28px rgba(0,0,0,.20)}
.main-nav__inner{height:84px;display:flex;align-items:stretch;justify-content:space-between;gap:1px;overflow:visible}
.main-nav .nav-link{height:84px;min-width:0;flex:1 1 auto;padding:5px 8px 7px!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#f3e8d5!important;text-decoration:none;font-size:10px!important;font-weight:800;letter-spacing:.065em;white-space:nowrap;border:1px solid transparent;border-bottom:2px solid transparent;border-radius:12px 12px 0 0;transition:background .22s,border-color .22s,transform .22s,box-shadow .22s}
.main-nav .nav-art{display:block;width:51px;height:51px;object-fit:contain;flex:0 0 51px;filter:drop-shadow(0 4px 5px rgba(0,0,0,.35));transition:transform .22s,filter .22s}
.main-nav .nav-link:hover,.main-nav .nav-link:focus-visible,.main-nav .nav-link--active{background:linear-gradient(180deg,rgba(255,222,157,.15),rgba(255,181,63,.04))!important;border-color:rgba(255,208,117,.24)!important;border-bottom-color:#f6c46c!important;color:#ffde9e!important;box-shadow:inset 0 1px rgba(255,242,206,.08),0 4px 20px rgba(229,162,50,.08)}
.main-nav .nav-link:hover .nav-art,.main-nav .nav-link:focus-visible .nav-art{transform:translateY(-3px) scale(1.09);filter:drop-shadow(0 5px 9px rgba(237,170,54,.38))}
.main-nav .nav-dropdown{flex:1 1 auto;min-width:0;display:flex;justify-content:center;height:84px}
.main-nav .nav-dropdown .nav-link{width:100%}
.main-nav .nav-dropdown-menu{top:84px;border:1px solid rgba(246,195,105,.35);border-radius:0 0 16px 16px;background:rgba(6,19,34,.88);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 20px 45px rgba(0,0,0,.45);z-index:60}
.main-nav .nav-dropdown-menu a:hover{background:rgba(251,190,80,.16);color:#ffd58c}
.main-nav .mega-wrap{top:84px!important}
.main-nav .mega-panel{background:rgba(7,20,36,.87)!important;backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);border:1px solid rgba(242,191,98,.27)!important;box-shadow:0 25px 80px rgba(0,0,0,.50)!important}
.main-nav .mega-provider-card{background:linear-gradient(180deg,rgba(24,41,61,.86),rgba(9,21,39,.92))!important;border-color:rgba(255,205,117,.24)!important}
.main-nav .badge{top:2px;right:2px;padding:1px 5px;font-size:8px;z-index:1}
.hero{border-bottom-color:rgba(255,202,103,.24)}
.hero,.daily-match-card,.featured-game-card,.promo-card,.provider-card{transition:box-shadow .25s,border-color .25s}
html[data-theme="light"] .top-header{background:rgba(255,251,243,.97)!important;border-color:#e9d4a9!important}
html[data-theme="light"] .main-nav{background:linear-gradient(180deg,#fffaf1,#f5ead8)!important;border-color:#dfc18d!important}
html[data-theme="light"] .main-nav .nav-link{color:#513a18!important}
html[data-theme="light"] .main-nav .nav-link:hover,html[data-theme="light"] .main-nav .nav-link--active{background:rgba(211,149,40,.14)!important;color:#8b5718!important}
html[data-theme="light"] .inline-login .btn-login{background:#fff8e8;color:#74491c}
html[data-theme="light"] .main-nav .nav-dropdown-menu{background:rgba(255,250,240,.96)}
html[data-theme="light"] .main-nav .nav-dropdown-menu a{color:#342c20}
html[data-theme="light"] .main-nav .mega-panel{background:rgba(250,248,242,.96)!important}
@media(max-width:1390px){.main-nav .nav-link{font-size:9px!important;padding-inline:4px!important}.main-nav .nav-art{width:43px;height:43px;flex-basis:43px}}
@media(max-width:1120px){.main-nav__inner{width:calc(100% - 20px);gap:0}.main-nav .nav-art{width:36px;height:36px;flex-basis:36px}.main-nav .nav-link{font-size:8px!important;padding-inline:2px!important}.brand img{width:165px}}
@media(prefers-reduced-motion:reduce){.main-nav .nav-link,.main-nav .nav-art{transition:none!important}}


/* V1 refresh — final navigation override; no gold separator lines. */
.top-header,.main-nav{border-top:0!important;border-bottom:0!important}
.main-nav .nav-link,.main-nav .nav-link:hover,
.main-nav .nav-link:focus-visible,.main-nav .nav-link.active,
.main-nav .nav-link--active {
  border-bottom:0!important;
  border-bottom-color:transparent!important;
}
/* Retain gold active-tab glass, but remove its border outline. */
.main-nav .nav-link:hover,.main-nav .nav-link:focus-visible,
.main-nav .nav-link.active,.main-nav .nav-link--active {
  border-color:transparent!important;
}
html[data-theme="light"] body,
body.light-mode,body.day-mode,body.theme-light,body[data-theme="light"] {
  background:#f8fafc!important;color:#17253b!important;
}

:is(html[data-theme="light"],body[data-theme="light"],body.light-mode,body.day-mode,body.theme-light) .main-nav {
  background:rgba(255,255,255,.97)!important;
  border:0!important;
}
:is(html[data-theme="light"],body[data-theme="light"],body.light-mode,body.day-mode,body.theme-light) .main-nav .nav-link {
  color:#24354b!important;
  border:0!important;
}
:is(html[data-theme="light"],body[data-theme="light"],body.light-mode,body.day-mode,body.theme-light) .main-nav :is(.nav-link:hover,.nav-link.active,.nav-link--active) {
  color:#9a6216!important;
  background:rgba(238,185,84,.14)!important;
  border:0!important;
}
:is(html[data-theme="light"],body[data-theme="light"],body.light-mode,body.day-mode,body.theme-light) .main-nav .mega-panel {
  background:rgba(255,255,255,.97)!important;
  color:#17253b!important;
}
:is(html[data-theme="light"],body[data-theme="light"],body.light-mode,body.day-mode,body.theme-light) .main-nav .mega-provider-card {
  background:#fff!important;
  border-color:#e8edf3!important;
}
:is(html[data-theme="light"],body[data-theme="light"],body.light-mode,body.day-mode,body.theme-light) .main-nav .nav-dropdown-menu {
  background:rgba(255,255,255,.98)!important;
}


/* ============================================================
   MEGABOX — LONG PAGE CASINO BACKGROUNDS
   Images: /assets/images/backgrounds/bg-light.png, bg-dark.png
   Images retain their aspect ratio; no stretching or tiling.
   Header stays dark in BOTH modes for the white MegaBox logo.
   ============================================================ */
html[data-theme="dark"] body {
  background-color:#06101e!important;
  background-image:url('/assets/images/backgrounds/bg-dark.png')!important;
  background-position:center top!important;
  background-size:100% auto!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
}
html[data-theme="light"] body {
  background-color:#f4efe6!important;
  background-image:url('/assets/images/backgrounds/bg-light.png')!important;
  background-position:center top!important;
  background-size:100% auto!important;
  background-repeat:no-repeat!important;
  background-attachment:scroll!important;
  color:#17253b!important;
}
/* The top bar is deliberately dark in bright mode so the existing
   white logo and its text remain readable. */
html[data-theme="light"] .top-header,
html[data-theme="dark"] .top-header {
  background:linear-gradient(110deg,rgba(4,13,25,.99),rgba(10,26,45,.97))!important;
  color:#fff!important;
  border:0!important;
}
html[data-theme="light"] .top-header :is(.micro-link,.language-btn,.member-profile__identity strong) {
  color:#f5f7ff!important;
}
html[data-theme="light"] .top-header .inline-login .btn-login {
  background:rgba(255,255,255,.08)!important;
  color:#ffe0a1!important;
  border-color:rgba(255,208,125,.45)!important;
}
/* Keep the navigation light in bright mode; icons and labels remain visible. */
html[data-theme="light"] .main-nav {
  background:linear-gradient(180deg,rgba(255,250,241,.97),rgba(245,234,216,.96))!important;
  border:0!important;
}
html[data-theme="light"] .main-nav .nav-link {color:#513a18!important}
html[data-theme="light"] .main-nav :is(.nav-link:hover,.nav-link.active,.nav-link--active) {
  background:rgba(211,149,40,.14)!important;
  color:#8b5718!important;
  border-color:transparent!important;
}
/* Allow the page-long casino artwork to appear through sections.
   Keep cards, panels and the video hero untouched for readability. */
html[data-theme="dark"] :is(.site-shell,main,.daily-matches,.featured-section,
 .content-section,.official-partners-section,.payment-methods-section,.site-footer),
html[data-theme="light"] :is(.site-shell,main,.daily-matches,.featured-section,
 .content-section,.official-partners-section,.payment-methods-section,.site-footer) {
  background:transparent!important;
  border-top:0!important;
  border-bottom:0!important;
}
html[data-theme="dark"] .daily-matches,
html[data-theme="dark"] .featured-section,
html[data-theme="dark"] .official-partners-section,
html[data-theme="dark"] .payment-methods-section {
  background:rgba(3,11,23,.50)!important;
}
html[data-theme="light"] .daily-matches,
html[data-theme="light"] .featured-section,
html[data-theme="light"] .official-partners-section,
html[data-theme="light"] .payment-methods-section {
  background:rgba(255,250,243,.58)!important;
}
html[data-theme="light"] .payment-methods-head h2,
html[data-theme="light"] .official-partners-title h2 {color:#17253b!important}
html[data-theme="light"] .payment-methods-head p,
html[data-theme="light"] .official-partners-title>small {color:#596579!important}
/* Leave hero videos exactly as they are. */
@media (max-width:767px) {
  html[data-theme="dark"] body,
  html[data-theme="light"] body {background-size:auto 1900px!important}
}