/* BIG777 theme — red accent on black */
:root {
  --bt-gold: #E31E24;
  --bt-gold-deep: #b8000c;
  --bt-gold-dim: #8b0000;
  --bt-red: #d10000;
  --bt-red-deep: #8b0000;
  --bt-purple: #1a1a1a;
  --bt-purple-mid: #1a1a1a;
  --bt-purple-deep: #0d0d0d;
  --bt-magenta: #1a1a1a;
  --bt-ink: #000000;
  --bt-cream: #f8f0dc;
  --bt-muted: #d4c4a8;
  --bt-box: linear-gradient(165deg, #1a1a1a 0%, #111111 48%, #0a0a0a 100%);
  --bt-box-soft: linear-gradient(180deg, rgba(26, 26, 26, 0.96) 0%, rgba(0, 0, 0, 0.98) 100%);
  --bt-glow: 0 0 18px rgba(227, 30, 36, 0.35), 0 8px 24px rgba(0, 0, 0, 0.45);
}

html,
body {
  background:
    radial-gradient(ellipse at top, #1a1a1a 0%, #0a0a0a 38%, #000000 100%) !important;
  color: var(--bt-cream) !important;
}

.topbar {
  background: linear-gradient(90deg, #0a0a0a 0%, #161616 50%, #000000 100%) !important;
  border-bottom: 1px solid rgba(227, 6, 19, 0.35);
}

.navbar,
.navbar-logo {
  background: linear-gradient(135deg, #111111 0%, #1a1a1a 50%, #0a0a0a 100%) !important;
  border-bottom: 1px solid rgba(227, 6, 19, 0.4) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35) !important;
}

.navbar::after {
  background: linear-gradient(90deg, transparent, var(--bt-gold) 20%, #ff4d6d 50%, var(--bt-gold) 80%, transparent) !important;
  opacity: 0.85 !important;
}

.logo img,
.logo-mobile img {
  height: 78px !important;
  width: auto !important;
  max-width: 170px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(227, 6, 19, 0.45));
}

.search input,
.search #searchInput {
  background: linear-gradient(180deg, #1a1a1a 0%, #050505 100%) !important;
  border: 1px solid var(--bt-gold-deep) !important;
  color: var(--bt-cream) !important;
}

.search input::placeholder {
  color: rgba(248, 240, 220, 0.65) !important;
}

.mega-cats a {
  color: var(--bt-gold) !important;
}

.mega-cats a:hover {
  color: #ffc9c9 !important;
}

.btn-3d {
  color: #fff !important;
}

.btn-3d.btn-promo {
  background: linear-gradient(180deg, #E31E24 0%, #B8141A 100%) !important;
  color: #fff !important;
  border: 1px solid #ff6b6b !important;
}

.btn-3d.btn-join {
  background: linear-gradient(180deg, #F5C400 0%, #D4A017 100%) !important;
  color: #fff !important;
  border: 1px solid #ffe066 !important;
}

.btn-3d.btn-login {
  background: linear-gradient(180deg, #22c55e 0%, #15803d 100%) !important;
  color: #fff !important;
  border: 1px solid #4ade80 !important;
}

.icon-btn,
.login-btn {
  background: linear-gradient(180deg, #222222 0%, #111111 100%) !important;
  color: var(--bt-gold) !important;
  border: 1px solid var(--bt-gold-deep) !important;
}

.pd-media-card,
.pd-side-card,
.pd-full-description,
.pd-buy-card,
.pd-info-card,
.product-single .pd-gallery,
.pd-related-card,
.pd-extra-meta {
  background: var(--bt-box) !important;
  border: 1px solid rgba(227, 6, 19, 0.55) !important;
  color: var(--bt-cream) !important;
  box-shadow: var(--bt-glow) !important;
}

.pd-main-image,
.pd-thumb-btn,
.pd-mslide {
  background: #000000 !important;
  border-color: rgba(227, 6, 19, 0.4) !important;
}

.pd-title,
.pd-sticky-title,
.pd-side-card h3,
.inst-head h3 {
  color: var(--bt-gold) !important;
}

.pd-short-desc,
.pd-short-desc p,
.pd-short-desc li,
.pd-side-card li,
.pd-full-description p,
.pd-full-description li {
  color: var(--bt-cream) !important;
}

.article-pro {
  background: var(--bt-box) !important;
  color: var(--bt-cream) !important;
  border: 2px solid var(--bt-gold) !important;
  box-shadow: 0 0 22px rgba(227, 6, 19, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.18) !important;
}

.article-pro h1,
.article-pro h2,
.article-pro h3 {
  color: var(--bt-gold) !important;
}

.article-pro p {
  color: var(--bt-cream) !important;
}

.article-pro p:hover {
  color: #ffc9c9 !important;
  text-shadow: 0 0 8px rgba(227, 6, 19, 0.35) !important;
}

.sgt-box {
  background: var(--bt-box) !important;
  color: var(--bt-cream) !important;
  border: 1px solid rgba(227, 6, 19, 0.55) !important;
}

.sgt-title,
.sgt-box h2,
.sgt-box h3 {
  color: var(--bt-gold) !important;
}

.sgt-box p,
.sgt-box li,
.sgt-box td,
.sgt-box span {
  color: var(--bt-cream) !important;
}

.paylater-promo,
.qoala-banner,
.qoala-banner-content,
.qoala-cta {
  background: linear-gradient(180deg, #222222 0%, #0a0a0a 100%) !important;
  border-color: var(--bt-gold) !important;
  color: var(--bt-gold) !important;
}

.qoala-shield-img {
  filter: none !important;
  width: 44px !important;
  height: 44px !important;
  object-fit: contain !important;
}

.pd-sticky-header {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.96), rgba(26, 26, 26, 0.96)) !important;
  border-bottom: 1px solid rgba(227, 6, 19, 0.4) !important;
}

.pd-sticky-btn-buy,
.pd-sticky-btn-cart,
.pd-sticky-btn-chat,
.btn-add-cart,
.btn-buy {
  background: linear-gradient(180deg, #d10000 0%, #7a0000 100%) !important;
  color: #fff8dc !important;
  border: 1px solid var(--bt-gold) !important;
}

.btn-buy {
  background: linear-gradient(180deg, #1a1a1a 0%, #1a1a1a 100%) !important;
  color: var(--bt-gold) !important;
}

.site-footer.footer-compact {
  --ft-bg-0: #000000;
  --ft-bg-1: #111111;
  --ft-bg-2: #0d0d0d;
  --ft-bg-3: #1a1a1a;
  --ft-orange: #E31E24;
  --ft-orange-dark: #b8000c;
  --ft-text: #f8f0dc;
  --ft-text-sec: #e0c48a;
  --ft-text-muted: #c4b08a;
  background: linear-gradient(180deg, #111111 0%, #000000 100%) !important;
  border-top: 1px solid rgba(227, 6, 19, 0.35);
}

.site-footer.footer-compact .ft-title {
  color: var(--bt-gold) !important;
}

.OLXTOTO-red-fixed-footer,
.BIG777-red-fixed-footer {
  background:
    radial-gradient(circle at 50% 0%, rgba(40, 40, 40, 0.45), rgba(0, 0, 0, 0.94) 62%),
    linear-gradient(180deg, #1a1a1a, #000000) !important;
  border-top: 1px solid rgba(227, 6, 19, 0.5) !important;
}

.OLXTOTO-red-fixed-footer a,
.BIG777-red-fixed-footer a {
  color: var(--bt-gold) !important;
}

.bottom-nav {
  background: linear-gradient(180deg, #0d0d0d, #000000) !important;
  border-top: 1px solid rgba(227, 6, 19, 0.35) !important;
}

.bottom-nav-item,
.bottom-nav-item-label {
  color: var(--bt-gold) !important;
}

.bank-tab {
  background: linear-gradient(180deg, #1a1a1a, #0a0a0a) !important;
  color: var(--bt-gold) !important;
  border: 1px solid rgba(227, 6, 19, 0.4) !important;
}

.bank-tab.active {
  background: linear-gradient(180deg, #d10000, #7a0000) !important;
  color: #fff8dc !important;
  border-color: var(--bt-gold) !important;
}

@media (max-width: 640px) {
  .logo img,
  .logo-mobile img {
    height: 56px !important;
  }

  body {
    padding-bottom: 128px;
  }
}