/* ============================================================
   THEME — GOLDEN DRAGON
   ============================================================
   Bright red & gold luxury theme — CNY-level vibrancy with
   modern card-grid layout. Uses vivid #dc2626 red and #ffd700
   gold for maximum impact.
   Applied when body has class "golden-theme".
   ============================================================ */

/* === Color Variables === */
.golden-theme {
  --gd-red: #dc2626;
  --gd-red-light: #ef4444;
  --gd-red-dark: #991b1b;
  --gd-gold: #ffd700;
  --gd-gold-light: #ffe55c;
  --gd-gold-dark: #b8860b;
  --gd-deep: #1a0000;
  --gd-lantern-glow: rgba(255, 215, 0, 0.3);
}

/* ---------------------------------------------------------------
   GLOBAL OVERRIDES  (when golden-theme is active)
   --------------------------------------------------------------- */

/* Hero slider gold border */
.golden-theme .hero-slider,
.golden-theme .swiper-slide img {
  border-radius: 12px;
}
.golden-theme .swiper {
  border: 2px solid rgba(255, 215, 0, 0.3);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.1);
}

/* Navbar gold glow strip */
.golden-theme .x88-navbar::after,
.golden-theme .vn-navbar::after,
.golden-theme .cn-navbar::after,
.golden-theme .cs-navbar::after,
.golden-theme .ie-navbar::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gd-gold),
    var(--gd-red),
    var(--gd-gold),
    transparent
  );
  pointer-events: none;
}

/* Navbar gold border */
.golden-theme .x88-navbar {
  border-bottom: 2px solid var(--gd-gold) !important;
  box-shadow:
    0 2px 20px rgba(255, 215, 0, 0.15),
    0 12px 30px rgba(0, 0, 0, 0.55) !important;
}

/* Bottom nav accent */
.golden-theme .bottom-nav {
  border-top: 2px solid var(--gd-gold) !important;
  background: linear-gradient(180deg, #1a0000 0%, #000000 100%) !important;
  box-shadow:
    0 -2px 15px rgba(255, 215, 0, 0.1),
    0 -5px 20px rgba(0, 0, 0, 0.8) !important;
}
.golden-theme .bottom-nav__item--daftar .bottom-nav__icon {
  background: linear-gradient(
    135deg,
    var(--gd-red) 0%,
    var(--gd-red-dark) 100%
  ) !important;
  border: 2px solid var(--gd-gold) !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.3) !important;
}

/* ---------------------------------------------------------------
   PASARAN SWIPEABLE (if used via template system)
   --------------------------------------------------------------- */
.golden-theme .pasaran-swipeable .swiper-slide .pasaran-card {
  background: linear-gradient(
    180deg,
    rgba(153, 27, 27, 0.3) 0%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
  border-color: rgba(255, 215, 0, 0.25) !important;
}
.golden-theme .pasaran-swipeable .pasaran-card:hover {
  border-color: var(--gd-gold) !important;
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.2) !important;
}

/* ---------------------------------------------------------------
   LUCKY SPIN MODAL
   --------------------------------------------------------------- */
.golden-theme .lucky-spin-modal .modal-content {
  background: linear-gradient(
    180deg,
    rgba(153, 27, 27, 0.85) 0%,
    rgba(26, 0, 0, 0.98) 100%
  ) !important;
  border: 2px solid var(--gd-gold) !important;
  box-shadow: 0 0 50px rgba(255, 215, 0, 0.3) !important;
}
.golden-theme .lucky-spin-modal .modal-header {
  border-bottom: 1px solid rgba(255, 215, 0, 0.3) !important;
}
.golden-theme .lucky-spin-modal .modal-title {
  color: var(--gd-gold) !important;
}

/* ---------------------------------------------------------------
   FLOATING RTP BUTTON
   --------------------------------------------------------------- */
.golden-theme .floating-rtp-btn {
  background: linear-gradient(
    135deg,
    var(--gd-red-dark),
    var(--gd-red)
  ) !important;
  border: 2px solid var(--gd-gold) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.3) !important;
}
.golden-theme .floating-rtp-btn:hover {
  box-shadow: 0 0 35px rgba(255, 215, 0, 0.5) !important;
}

/* ---------------------------------------------------------------
   LOGIN / REGISTER FORMS
   --------------------------------------------------------------- */
.golden-theme .auth-card,
.golden-theme .login-card,
.golden-theme .register-card {
  background: linear-gradient(
    180deg,
    rgba(153, 27, 27, 0.15) 0%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
  border: 1px solid rgba(255, 215, 0, 0.25) !important;
}
.golden-theme .auth-card .btn-primary,
.golden-theme .login-card .btn-primary,
.golden-theme .register-card .btn-primary {
  background: linear-gradient(
    135deg,
    var(--gd-red),
    var(--gd-gold-dark)
  ) !important;
  border: 1px solid var(--gd-gold) !important;
}

/* ---------------------------------------------------------------
   DROPDOWN MENUS
   --------------------------------------------------------------- */
.golden-theme .dropdown-menu {
  background: linear-gradient(
    180deg,
    rgba(26, 0, 0, 0.98) 0%,
    rgba(15, 2, 2, 0.99) 100%
  ) !important;
  border: 1px solid rgba(255, 215, 0, 0.3) !important;
  box-shadow:
    0 15px 50px rgba(0, 0, 0, 0.7),
    0 0 20px rgba(255, 215, 0, 0.1) !important;
}
.golden-theme .dropdown-item:hover {
  background: linear-gradient(
    90deg,
    rgba(255, 215, 0, 0.12) 0%,
    rgba(153, 27, 27, 0.15) 50%,
    transparent 100%
  ) !important;
  color: var(--gd-gold) !important;
}

/* ---------------------------------------------------------------
   PROFILE PAGE
   --------------------------------------------------------------- */
.golden-theme .profile-section {
  background: var(--gd-deep) !important;
}
.golden-theme .profile-card {
  background: linear-gradient(
    180deg,
    rgba(153, 27, 27, 0.15) 0%,
    rgba(0, 0, 0, 0.9) 100%
  ) !important;
  border: 1px solid rgba(255, 215, 0, 0.2) !important;
}
.golden-theme .profile-card:hover {
  border-color: rgba(255, 215, 0, 0.4) !important;
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.1) !important;
}

/* ---------------------------------------------------------------
   SCROLLBAR STYLING
   --------------------------------------------------------------- */
.golden-theme ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.golden-theme ::-webkit-scrollbar-track {
  background: rgba(153, 27, 27, 0.2);
}
.golden-theme ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--gd-gold), var(--gd-gold-dark));
  border-radius: 4px;
}
.golden-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--gd-gold);
}

/* Text selection */
.golden-theme ::selection {
  background: var(--gd-red);
  color: var(--gd-gold);
}

/* ---------------------------------------------------------------
   SECTION DIVIDER GLOW LINE
   --------------------------------------------------------------- */
.golden-theme .gd-pasaran-section,
.golden-theme .gd-showcase-section,
.golden-theme .gd-providers-section {
  border-top: 1px solid rgba(255, 215, 0, 0.2);
}

/* ---------------------------------------------------------------
   FOOTER ENHANCEMENTS
   --------------------------------------------------------------- */
.golden-theme footer {
  border-top: 2px solid var(--gd-gold) !important;
  background: linear-gradient(
    180deg,
    rgba(153, 27, 27, 0.15) 0%,
    rgb(0, 0, 0) 100%
  ) !important;
}

/* ---------------------------------------------------------------
   ALERTS & TOASTS
   --------------------------------------------------------------- */
.golden-theme .alert {
  border-radius: 12px;
  border-left: 4px solid var(--gd-gold);
}

/* ---------------------------------------------------------------
   INPUT FIELDS
   --------------------------------------------------------------- */
.golden-theme input:not([type="checkbox"]):not([type="radio"]),
.golden-theme select,
.golden-theme textarea {
  background: rgba(42, 21, 21, 0.9) !important;
  border-color: rgba(255, 215, 0, 0.2) !important;
  color: #fff !important;
}
.golden-theme input:focus,
.golden-theme select:focus,
.golden-theme textarea:focus {
  border-color: var(--gd-gold) !important;
  box-shadow: 0 0 0 0.2rem rgba(255, 215, 0, 0.15) !important;
}

/* ---------------------------------------------------------------
   BUTTONS - GOLDEN STYLE
   --------------------------------------------------------------- */
.golden-theme .x88-btn-gold {
  background: linear-gradient(
    90deg,
    var(--gd-red-dark),
    var(--gd-red),
    var(--gd-red-dark)
  ) !important;
  border: 1px solid var(--gd-gold) !important;
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.2) !important;
}
.golden-theme .x88-btn-gold:hover {
  box-shadow: 0 0 25px rgba(255, 215, 0, 0.4) !important;
}
.golden-theme .x88-btn-outline {
  border-color: var(--gd-gold) !important;
  color: var(--gd-gold) !important;
}
.golden-theme .x88-btn-outline:hover {
  background: var(--gd-gold) !important;
  color: var(--gd-red-dark) !important;
}

/* ---------------------------------------------------------------
   LINKS
   --------------------------------------------------------------- */
.golden-theme
  a:not(.btn):not(.nav-link):not(.dropdown-item):not(.gd-cat-pill):not(
    .gd-view-all
  ):not(.gd-bet-btn) {
  color: var(--gd-gold);
}
.golden-theme
  a:not(.btn):not(.nav-link):not(.dropdown-item):not(.gd-cat-pill):not(
    .gd-view-all
  ):not(.gd-bet-btn):hover {
  color: var(--gd-gold-light);
}

/* ---------------------------------------------------------------
   CARDS / PANELS GLOBAL
   --------------------------------------------------------------- */
.golden-theme .card,
.golden-theme .panel,
.golden-theme .box {
  border-color: rgba(255, 215, 0, 0.1) !important;
}

/* ---------------------------------------------------------------
   RESPONSIVE ADJUSTMENTS
   --------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .golden-theme .gd-providers-panel {
    border-radius: 10px;
  }
}

@media (min-width: 992px) {
  /* Subtle radial background glow on desktop */
  .golden-theme main {
    background-image:
      radial-gradient(
        ellipse at 20% 50%,
        rgba(220, 38, 38, 0.06) 0%,
        transparent 50%
      ),
      radial-gradient(
        ellipse at 80% 20%,
        rgba(255, 215, 0, 0.04) 0%,
        transparent 50%
      );
    background-attachment: fixed;
  }
}