/* ===================================================================
   TopVault — Bonuses mega-menu
   Wide multi-column dropdown built on the template's native
   navbar__item--has-children / navbar__sub-menu mechanism, so the
   mobile menu (cloned from .navbar__menu) keeps working automatically.
   =================================================================== */

.header .navbar__item--has-children.tv-has-mega > .navbar__dropdown-label{cursor:pointer}

/* ---- desktop panel ---- */
.header .navbar__sub-menu.tv-mega{
  left:0; right:auto; top:100%;
  width:min(880px, calc(100vw - 60px));
  min-width:0; max-width:none;
  padding:0; border-radius:18px; overflow:hidden;
  background:linear-gradient(180deg,#16161f,#0f0f18);
  border:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 70px rgba(0,0,0,.55), inset 0 0 0 1px rgba(47,224,255,.06);
  transform:translateY(16px);
}
.header .navbar__item--has-children.tv-has-mega:hover > .navbar__sub-menu.tv-mega{
  transform:translateY(10px);
}

.tv-mega__inner{display:grid;grid-template-columns:1fr 1fr 1fr 1.15fr;gap:0}
.tv-mega__col{padding:24px 24px 26px;border-inline-end:1px solid rgba(255,255,255,.06)}
.tv-mega__head{
  display:flex;align-items:center;gap:8px;
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:#2fe0ff;margin:0 0 14px;
}
.tv-mega__head i{font-size:14px;color:#a06bff}
.tv-mega__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.header .navbar__sub-menu.tv-mega .tv-mega__list li{border:0;margin:0}

.header .navbar__sub-menu.tv-mega a{
  display:flex;align-items:center;gap:10px;width:auto;
  padding:8px 0;border:0;color:rgba(255,255,255,.8);
  font-size:13.5px;font-weight:600;text-transform:none;
  transition:color .2s,transform .2s;
}
.header .navbar__sub-menu.tv-mega a::before{content:none}
.header .navbar__sub-menu.tv-mega a:hover{color:#fff;transform:translateX(4px);padding-inline-start:0}
.header .navbar__sub-menu.tv-mega a > .ti{font-size:16px;color:#a06bff;transition:color .2s;flex:none}
.header .navbar__sub-menu.tv-mega a:hover > .ti{color:#2fe0ff}

/* casino column logos */
.tv-mega__col--cas a img{
  width:24px;height:24px;border-radius:6px;object-fit:contain;
  background:rgba(255,255,255,.06);padding:3px;flex:none;
}

/* ---- featured promo cell ---- */
.tv-mega__promo{
  position:relative;padding:24px;display:flex;flex-direction:column;justify-content:center;
  background:
    radial-gradient(130% 150% at 100% 0%,rgba(255,77,219,.18),transparent 60%),
    radial-gradient(130% 150% at 0% 100%,rgba(47,224,255,.16),transparent 60%);
}
.tv-mega__promo .lbl{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#ffd24a;margin-bottom:12px;
}
.tv-mega__promo .logo{height:40px;margin-bottom:12px;display:flex;align-items:center}
.tv-mega__promo .logo img{height:100%;width:auto;max-width:140px;object-fit:contain}
.tv-mega__promo h6{color:#fff;font-size:16px;font-weight:800;margin:0 0 5px;line-height:1.2}
.tv-mega__promo p{color:rgba(255,255,255,.62);font-size:12px;margin:0 0 16px;line-height:1.5}
.header .navbar__sub-menu.tv-mega .tv-mega__promo a.tv-mega__btn{
  justify-content:center;gap:7px;padding:11px 14px;border-radius:10px;color:#1a0a14;
  font-weight:800;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  background:linear-gradient(90deg,#ffd24a,#ff6ad5);transform:none;
  box-shadow:0 8px 22px rgba(255,106,213,.35);
}
.header .navbar__sub-menu.tv-mega .tv-mega__promo a.tv-mega__btn:hover{transform:translateY(-2px);padding-inline-start:14px}

/* drop the promo + tighten on smaller desktops */
@media(max-width:1100px){
  .header .navbar__sub-menu.tv-mega{width:min(720px,calc(100vw - 40px))}
  .tv-mega__inner{grid-template-columns:1fr 1fr 1fr}
  .tv-mega__promo{display:none}
  .tv-mega__col:nth-child(3){border-inline-end:0}
}

/* ===================================================================
   Mobile — the panel is cloned into .mobile-menu and slide-toggled.
   Collapse the grid into a simple stacked list.
   =================================================================== */
@media(max-width:1199px){
  .mobile-menu .navbar__sub-menu.tv-mega{padding:0!important;background:transparent;border:0;box-shadow:none;transform:none;border-radius:0;width:100%}
  .mobile-menu .tv-mega__inner{display:block}
  .mobile-menu .tv-mega__col{padding:0;border:0}
  .mobile-menu .tv-mega__head{padding:18px 40px 4px;margin:0;color:#2fe0ff}
  .mobile-menu .navbar__sub-menu.tv-mega a{
    padding:13px 40px!important;font-size:15px;transform:none;
    border-bottom:1px solid rgba(255,255,255,.08);
  }
  .mobile-menu .navbar__sub-menu.tv-mega a:hover{transform:none}
  .mobile-menu .tv-mega__col--cas a img{width:22px;height:22px}
  .mobile-menu .tv-mega__promo{display:none}
}