/* ============================================================
   TopUpBazar — Dark Gaming Theme (2026-10-15)
   Complete rebrand: dark esports UI. Overrides existing markup.
   Uses admin theme variables where possible.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@400;500;600;700&family=Orbitron:wght@600;700;800&display=swap');

:root {
  --tb-bg: #0a1128;
  --tb-bg2: #0d1530;
  --tb-card: #111c3a;
  --tb-card2: #16224a;
  --tb-line: rgba(0, 200, 255, 0.14);
  --tb-cyan: #00c8ff;
  --tb-purple: #8b5cf6;
  --tb-text: #e8eef5;
  --tb-muted: #8b9bb8;
  --tb-radius: 18px;
}

body {
  font-family: 'Hind Siliguri', ui-sans-serif, system-ui, sans-serif !important;
  background:
    radial-gradient(1000px 500px at 10% -5%, rgba(0, 200, 255, 0.09), transparent),
    radial-gradient(900px 500px at 95% 10%, rgba(139, 92, 246, 0.1), transparent),
    var(--tb-bg) !important;
  color: var(--tb-text) !important;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}


/* ---------- Kill the old light wrapper ---------- */
.body-bg { background: transparent !important; }

/* ---------- Notice: solid enough to read ---------- */
.notice-style {
  background: linear-gradient(90deg, #0e2a52, #1a1548) !important;
}


/* ---------- Support quick-link cards ---------- */
.support-cards { display: flex; gap: 10px; justify-content: center; margin: 14px auto; max-width: 1200px; padding: 0 14px; }
.support-card {
  background: linear-gradient(160deg, #111c3a, #0d1530) !important;
  border: 1px solid rgba(0,200,255,.14) !important;
  border-radius: 16px !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.3) !important;
}
.support-card .label { color: #8b9bb8 !important; }
.support-card .title { color: #fff !important; }


/* ---------- Follow-us cards ---------- */
.mt-8.grid a[style*="background-color: #FFFFFF"] {
  background: linear-gradient(160deg, #111c3a, #0d1530) !important;
  border: 1px solid rgba(0,200,255,.14) !important;
  border-radius: 14px !important;
}
.mt-8.grid a span { color: #e8eef5 !important; }
.mt-8.grid a span b { color: #00c8ff !important; }


/* ---------- Promo banner ---------- */
.tb-promo-banner { display: block; max-width: 1200px; margin: 18px auto; padding: 0 14px; }
.tb-promo-banner img { box-shadow: 0 12px 36px rgba(0,200,255,.18); border: 1px solid rgba(0,200,255,.16); transition: transform .25s; }
.tb-promo-banner:hover img { transform: scale(1.015); }

/* ---------- Header ---------- */
.header {
  position: sticky !important;
  top: 0; z-index: 50;
  background: rgba(10, 17, 40, 0.86) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--tb-line);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
.header .logo { height: 44px !important; width: auto !important; object-fit: contain; filter: drop-shadow(0 0 12px rgba(0,200,255,.35)); }
.header .link { color: var(--tb-text) !important; }
.header .link:hover { color: var(--tb-cyan) !important; }
.btn-pro-login {
  font-weight: 700 !important; font-size: 0.82rem !important;
  padding: 9px 22px !important; border-radius: 999px !important;
  border: 1.5px solid var(--tb-cyan) !important;
  color: var(--tb-cyan) !important; background: transparent !important;
  text-decoration: none !important; transition: all .2s !important;
}
.btn-pro-login:hover { background: rgba(0,200,255,.12) !important; box-shadow: 0 0 18px rgba(0,200,255,.35); }
.btn-register {
  font-weight: 700 !important; font-size: 0.82rem !important;
  padding: 9px 22px !important; border-radius: 999px !important;
  border: none !important;
  background: linear-gradient(135deg, var(--tb-cyan), var(--tb-purple)) !important;
  color: #04121f !important;
  box-shadow: 0 6px 22px rgba(0,200,255,.4) !important;
  text-decoration: none !important; transition: all .2s !important;
}
.btn-register:hover { transform: translateY(-1px); box-shadow: 0 10px 30px rgba(0,200,255,.55) !important; }

/* ---------- Notice ---------- */
.notice-container { padding: 12px 14px 0 !important; max-width: 1200px; }
.notice-style {
  border: 1px solid var(--tb-line) !important;
  border-radius: 16px !important;
  background: linear-gradient(90deg, rgba(0,200,255,.16), rgba(139,92,246,.16)) !important;
  color: var(--tb-text) !important;
  box-shadow: 0 6px 24px rgba(0,0,0,.3) !important;
  padding: 12px 16px !important;
}
.notice-heading {
  display: inline-block; font-weight: 700; font-size: .72rem;
  padding: 3px 14px; border-radius: 999px; margin-bottom: 6px;
  background: linear-gradient(135deg, var(--tb-cyan), var(--tb-purple)); color: #04121f;
}
.notice-text { font-size: .85rem; line-height: 1.6; color: var(--tb-text); }
.notice-style .btn-close { filter: invert(1); }

/* ---------- Hero ---------- */
section.carousel { max-width: 1200px; margin: 14px auto 0 !important; padding: 0 14px; }
.carousel__viewport { border-radius: 22px; overflow: hidden; border: 1px solid var(--tb-line); }
.carousel__slide img {
  width: 100% !important; aspect-ratio: 16 / 8 !important; object-fit: cover !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 44px rgba(0, 200, 255, 0.16) !important;
}
@media (min-width: 768px) { .carousel__slide img { aspect-ratio: 16 / 4.8 !important; } }
.carousel__button {
  background: rgba(17,28,58,.9) !important; border: 1px solid var(--tb-line) !important;
  border-radius: 50% !important; width: 42px !important; height: 42px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.4) !important;
}
.carousel__button svg { fill: var(--tb-cyan) !important; }

/* ---------- Section titles ---------- */
section#topup .section-contact-gap h3 {
  font-family: 'Orbitron', 'Hind Siliguri', sans-serif !important;
  font-size: 1.25rem !important; font-weight: 800 !important;
  color: #fff !important; letter-spacing: 2px; text-transform: uppercase;
  position: relative; padding-bottom: 12px; margin: 0;
}
section#topup .section-contact-gap h3::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 64px; height: 4px; border-radius: 4px;
  background: linear-gradient(90deg, var(--tb-cyan), var(--tb-purple));
  box-shadow: 0 0 14px rgba(0,200,255,.7);
}
.section-divider { display: none !important; }
section#topup { margin-top: 26px !important; }

/* ---------- Product cards ---------- */
.single-game-product { margin-bottom: 6px !important; }
.single-game-product > a {
  display: block; text-decoration: none !important;
  background: linear-gradient(160deg, var(--tb-card), var(--tb-bg2));
  border: 1px solid var(--tb-line); border-radius: var(--tb-radius);
  overflow: hidden; padding-bottom: 12px;
  box-shadow: 0 8px 26px rgba(0, 0, 0, 0.35);
  transition: transform .22s, box-shadow .22s, border-color .22s;
  position: relative;
}
.single-game-product > a::before {
  content: ''; position: absolute; inset: 0; border-radius: var(--tb-radius);
  padding: 1.5px; background: linear-gradient(135deg, rgba(0,200,255,.5), rgba(139,92,246,.5), transparent 60%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none; opacity: 0; transition: opacity .25s;
}
.single-game-product > a:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,200,255,.22); }
.single-game-product > a:hover::before { opacity: 1; }
.single-game-product img {
  border-radius: 0 !important; width: 100% !important;
  aspect-ratio: 1 / 1 !important; object-fit: cover !important;
  transition: transform .3s;
}
.single-game-product > a:hover img { transform: scale(1.06); }
.single-game-product h1 {
  font-size: .78rem !important; font-weight: 600 !important; color: var(--tb-text) !important;
  padding: 10px 8px 0 !important; margin: 0 !important; text-align: center;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; min-height: 2.6em;
}

/* ---------- Latest orders ---------- */
section.container .text-2xl { color: #fff !important; font-weight: 700 !important; }
.list-group > div, .list-group .list-group-item {
  background: var(--tb-card) !important; border: 1px solid var(--tb-line) !important;
  border-radius: 14px !important; margin-bottom: 10px !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.3) !important; color: var(--tb-text) !important;
}
.list-group .text-secondary, .list-group .text-muted { color: var(--tb-muted) !important; }

/* ---------- Content boxes (follow us etc) ---------- */
.bg-white { background: var(--tb-card) !important; }
.text-gray-400, .text-gray-500, .text-secondary-500, .text-secondary-900 { color: var(--tb-muted) !important; }
.text-black, .text-gray-900, .text-gray-800 { color: var(--tb-text) !important; }
.border { border-color: var(--tb-line) !important; }
section.container .rounded-md, section.container .rounded-lg {
  border-radius: var(--tb-radius) !important;
  background: linear-gradient(160deg, var(--tb-card), var(--tb-bg2)) !important;
  border: 1px solid var(--tb-line) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.3) !important;
}

/* ---------- Checkout ---------- */
.checkout_page .bg-white.border.rounded-md {
  border-radius: var(--tb-radius) !important;
  background: linear-gradient(160deg, var(--tb-card), var(--tb-bg2)) !important;
  border: 1px solid var(--tb-line) !important;
  box-shadow: 0 8px 26px rgba(0,0,0,.3) !important;
}
.checkout_page h2 { color: #fff !important; }
.checkout_page input[type="text"], .checkout_page input[type="number"],
.checkout_page input:not([type]), .checkout_page textarea, .checkout_page select {
  border: 1.5px solid rgba(0,200,255,.2) !important; border-radius: 12px !important;
  padding: 12px 14px !important; font-size: .95rem !important; width: 100%;
  background: #0b1430 !important; color: #fff !important;
  font-family: inherit; transition: all .18s;
}
.checkout_page input:focus { outline: none !important; border-color: var(--tb-cyan) !important; box-shadow: 0 0 0 4px rgba(0,200,255,.14) !important; }
.checkout_page input::placeholder { color: #5b6b8c; }
.variation_list {
  border: 1.5px solid rgba(0,200,255,.16) !important; border-radius: 14px !important;
  background: #0e1836 !important; transition: all .18s !important;
}
.variation_list:hover { border-color: var(--tb-cyan) !important; }
.variation_list.selected, .variation_list.active {
  border-color: var(--tb-cyan) !important;
  background: rgba(0,200,255,.1) !important;
  box-shadow: 0 0 20px rgba(0,200,255,.25) !important;
}
.variation_list .font-bold { color: var(--tb-cyan) !important; }
.variation_list span { color: var(--tb-text) !important; }
.checkout_page button[type="submit"] {
  width: 100%; font-size: 1.05rem !important; font-weight: 800 !important;
  letter-spacing: 1px; color: #04121f !important;
  background: linear-gradient(135deg, var(--tb-cyan), var(--tb-purple)) !important;
  border: none !important; border-radius: 14px !important; padding: 15px !important;
  box-shadow: 0 10px 30px rgba(0,200,255,.4) !important;
  transition: all .2s !important; text-transform: uppercase;
}
.checkout_page button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(0,200,255,.55) !important; }

/* ---------- Footer ---------- */
footer.footer-bg {
  background: linear-gradient(180deg, #070d22, #040815) !important;
  border-top: 1px solid var(--tb-line) !important; margin-top: 48px !important;
}
.footer-title { font-weight: 800 !important; letter-spacing: 2px !important; color: #fff !important; font-family: 'Orbitron','Hind Siliguri',sans-serif !important; font-size: 1rem !important; }
.footer_description { color: var(--tb-muted) !important; }
footer.footer-bg a { color: var(--tb-text) !important; transition: color .2s; }
footer.footer-bg a:hover { color: var(--tb-cyan) !important; }

/* ---------- Sticky mobile bottom nav ---------- */
@media (max-width: 767px) {
  body { padding-bottom: 78px; }
  .sticky-footer-container {
    background: rgba(10,17,40,.95) !important;
    backdrop-filter: blur(14px);
    border-top: 1px solid var(--tb-line);
    box-shadow: 0 -6px 24px rgba(0,0,0,.45);
  }
  .sticky-footer-container a, .sticky-footer-container span { color: var(--tb-muted) !important; }
  .sticky-footer-container a.active { color: var(--tb-cyan) !important; }
}

/* ---------- Popup ---------- */
.modal-content { background: var(--tb-card) !important; border: 1px solid var(--tb-line) !important; border-radius: 22px !important; color: var(--tb-text) !important; }

/* ---------- Misc ---------- */
img { max-width: 100%; }
a { -webkit-tap-highlight-color: transparent; }
::selection { background: rgba(0,200,255,.3); }
hr { border-color: var(--tb-line) !important; }
.alert { border-radius: 14px; }