/* MegaBox Official Partners + MegaMenu | Unified Dark Gradient | 2026-10-08
   Full replacement for /assets/css/mbx-clean-logos.css
   Visual changes only: no PHP, SQL, links, wallet or provider logic modified.
*/
:root {
  --mbx-logo-top: #1b2a3b;
  --mbx-logo-mid: #132235;
  --mbx-logo-bottom: #0b1522;
  --mbx-logo-edge: rgba(224,187,122,.22);
  --mbx-logo-edge-hover: rgba(244,194,109,.66);
}

/* Official Partners: compact, even grid, identical dark cards for every brand. */
html body .official-partners-section .official-partners-grid {
  display:grid!important;
  grid-template-columns:repeat(7,minmax(0,1fr))!important;
  gap:14px 16px!important;
  align-items:stretch!important;
}
html body .official-partners-section .official-partner-card,
html body .official-partners-section .official-partner-card.has-logo,
html body .official-partners-section .official-partner-card[data-brand],
html[data-theme="light"] body .official-partners-section .official-partner-card,
html[data-theme="dark"] body .official-partners-section .official-partner-card {
  position:relative!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  height:84px!important;
  min-height:84px!important;
  padding:12px!important;
  border-radius:14px!important;
  border:1px solid var(--mbx-logo-edge)!important;
  background:linear-gradient(145deg,var(--mbx-logo-top) 0%,var(--mbx-logo-mid) 52%,var(--mbx-logo-bottom) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 14px rgba(0,0,0,.15)!important;
  overflow:hidden!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
html body .official-partners-section .official-partner-card:hover,
html body .official-partners-section .official-partner-card[data-brand]:hover,
html[data-theme="light"] body .official-partners-section .official-partner-card:hover {
  transform:translateY(-2px)!important;
  border-color:var(--mbx-logo-edge-hover)!important;
  background:linear-gradient(145deg,#223449 0%,#17283a 52%,#101b2a 100%)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 1px rgba(244,194,109,.08)!important;
}
html body .official-partners-section .official-partner-card img,
html body .official-partners-section .official-partner-card img.partner-logo,
html[data-theme="light"] body .official-partners-section .official-partner-card img.partner-logo {
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:96%!important;
  max-height:58px!important;
  object-fit:contain!important;
  opacity:1!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))!important;
}
html body .official-partners-section .official-partner-card strong,
html body .official-partners-section .official-partner-card span {
  color:#f0f4fa!important;
}

/* MegaMenu: same darker gradient, same on ALL provider cards and both themes. */
html body .main-nav .mega-provider-card,
html body .main-nav .mega-provider-card[data-brand],
html[data-theme="light"] body .main-nav .mega-provider-card,
html[data-theme="dark"] body .main-nav .mega-provider-card {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  box-sizing:border-box!important;
  height:74px!important;
  min-height:74px!important;
  min-width:0!important;
  padding:10px!important;
  border-radius:13px!important;
  border:1px solid var(--mbx-logo-edge)!important;
  background:linear-gradient(145deg,var(--mbx-logo-top) 0%,var(--mbx-logo-mid) 52%,var(--mbx-logo-bottom) 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055),0 5px 14px rgba(0,0,0,.15)!important;
  overflow:hidden!important;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
html body .main-nav .mega-provider-card:hover,
html body .main-nav .mega-provider-card[data-brand]:hover,
html[data-theme="light"] body .main-nav .mega-provider-card:hover {
  transform:translateY(-2px)!important;
  border-color:var(--mbx-logo-edge-hover)!important;
  background:linear-gradient(145deg,#223449 0%,#17283a 52%,#101b2a 100%)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.22),0 0 0 1px rgba(244,194,109,.08)!important;
}
html body .main-nav .mega-provider-card img {
  display:block!important;
  width:auto!important;
  height:auto!important;
  max-width:96%!important;
  max-height:53px!important;
  object-fit:contain!important;
  opacity:1!important;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.22))!important;
}
html body .main-nav .mega-provider-card span,
html[data-theme="light"] body .main-nav .mega-provider-card span {
  color:#f0f4fa!important;
}

/* Payment Methods: floating original artwork, no cards or square borders. */
html body .payment-methods-section .payment-methods-grid {
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  align-items:center!important;
  grid-template-columns:none!important;
  gap:22px 30px!important;
  padding:15px 0 18px!important;
}
html body .payment-methods-section .payment-tile,
html[data-theme="light"] body .payment-methods-section .payment-tile {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  flex:0 1 155px!important;
  width:155px!important;
  height:64px!important;
  min-width:0!important;
  min-height:0!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  overflow:visible!important;
}
html body .payment-methods-section .payment-tile:hover {
  transform:translateY(-2px)!important;
  background:transparent!important;
  border:0!important;
  box-shadow:none!important;
}
html body .payment-methods-section .payment-tile img {
  display:block!important;
  width:100%!important;
  height:auto!important;
  max-width:155px!important;
  max-height:56px!important;
  object-fit:contain!important;
  filter:drop-shadow(0 3px 5px rgba(0,0,0,.25))!important;
}
html body .payment-methods-section .payment-tile b {
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#eef5ff!important;
  font-size:14px!important;
  text-align:center!important;
}
html[data-theme="light"] body .payment-methods-section .payment-tile b {color:#20334b!important}
html body .payment-methods-section .payment-tile [hidden],
html body .official-partners-section [hidden],
html body .mega-provider-card [hidden] {display:none!important}

/* Existing TF Gaming dropdown: preserve its markup and links. */
html body .main-nav .nav-dropdown-menu.mbx-tf-menu {min-width:220px!important;padding:10px!important}
html body .main-nav .mbx-tf-menu a,
html body .main-nav .mbx-tf-menu .mbx-tf-pending {
  display:flex!important;align-items:center!important;gap:12px!important;
  padding:9px 10px!important;color:#f7e5bf!important;font-size:12px!important;
}
html body .main-nav .mbx-tf-menu img {width:75px;height:37px;object-fit:contain}
html body .main-nav .mbx-tf-menu small {display:block;font-size:10px;color:#8b9bb0;margin-top:4px}
html[data-theme="light"] body .main-nav .mbx-tf-menu a,
html[data-theme="light"] body .main-nav .mbx-tf-menu .mbx-tf-pending {color:#263a50!important}

@media(max-width:1250px){
  html body .official-partners-section .official-partners-grid {grid-template-columns:repeat(5,minmax(0,1fr))!important}
  html body .payment-methods-section .payment-tile {flex-basis:145px!important}
}
@media(max-width:920px){
  html body .official-partners-section .official-partners-grid {grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(max-width:640px){
  html body .official-partners-section .official-partners-grid {grid-template-columns:repeat(2,minmax(0,1fr))!important}
  html body .payment-methods-section .payment-methods-grid {gap:14px!important}
  html body .payment-methods-section .payment-tile {flex-basis:125px!important;width:125px!important}
}
@media(prefers-reduced-motion:reduce){
  html body .official-partners-section .official-partner-card,
  html body .main-nav .mega-provider-card {transition:none!important}
}