/* SARDEN11 V6 theme preset palette; Gold default styling stays untouched.
   Overrides apply when body has .sv-themed (non-gold preset or custom colors).
   Variables set by template/visual-theme.php from admin panel. */

/* ---- Global surface / text from admin ---- */
body.sv-themed {
  background-color: var(--sv-bg, #1A140C) !important;
  color: var(--sv-text, #FFF6E0) !important;
}
body.sv-themed .app-container,
body.sv-themed .main-content-area {
  background-color: transparent;
}

/* ---- Titles & headings ---- */
body.sv-themed .home-hot-title h3,
body.sv-themed .home-togel-title h3,
body.sv-themed .provider-lobby-title,
body.sv-themed .provider-home-title,
body.sv-themed .desktop-footer-menu h4 {
  color: var(--sv-primary) !important;
  background: none !important;
  -webkit-text-fill-color: var(--sv-primary) !important;
}

/* ---- Links & nav accents ---- */
body.sv-themed .home-hot-all,
body.sv-themed .home-togel-nav a,
body.sv-themed .home-togel-play,
body.sv-themed .desktop-footer-menu a:hover {
  color: var(--sv-primary) !important;
  border-color: var(--sv-glow) !important;
}

/* ---- Cards / shells ---- */
body.sv-themed .home-hot-shell,
body.sv-themed .home-hot-card.is-active,
body.sv-themed .home-togel-card {
  border-color: var(--sv-primary) !important;
  box-shadow: 0 0 14px color-mix(in srgb, var(--sv-glow) 38%, transparent), 0 7px 20px #0006 !important;
}
body.sv-themed .home-hot-card.is-active {
  background: linear-gradient(155deg, var(--sv-secondary), var(--sv-surface, #19121a)) !important;
}
body.sv-themed .home-hot-arrow {
  background: linear-gradient(155deg, var(--sv-secondary), var(--sv-surface, #181018)) !important;
  border-color: var(--sv-primary) !important;
}

/* ---- Login guard popup (theme-aware, full styles) ---- */
.login-guard-overlay {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background:
    radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--sv-primary, #ffd45a) 18%, transparent), transparent 55%),
    rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: lg-fade-in .28s ease;
}
.login-guard-overlay[hidden] { display: none !important; }

@keyframes lg-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes lg-pop {
  from { opacity: 0; transform: translateY(16px) scale(.94); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lg-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sv-glow, #ffd45a) 45%, transparent); }
  50% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--sv-glow, #ffd45a) 0%, transparent); }
}

.login-guard-dialog {
  --lg-gold: var(--sv-primary, #ffd45a);
  position: relative;
  width: min(400px, 100%);
  padding: 28px 24px 22px;
  border-radius: 22px;
  border: 1px solid color-mix(in srgb, var(--sv-primary, #ffd45a) 55%, transparent);
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sv-primary, #ffd45a) 16%, transparent), transparent 45%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--sv-secondary, #a10b12) 20%, transparent), transparent 50%),
    linear-gradient(160deg, var(--sv-panel, #1a140c), var(--sv-surface, #0e0a0a) 70%);
  color: var(--sv-text, #f5ecd8);
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--sv-primary, #ffd45a) 20%, transparent),
    0 0 40px color-mix(in srgb, var(--sv-glow, #ffd45a) 22%, transparent),
    0 24px 48px rgba(0, 0, 0, .55);
  overflow: hidden;
  animation: lg-pop .32s cubic-bezier(.2, .9, .3, 1);
  text-align: center;
}

.login-guard-glow {
  pointer-events: none;
  position: absolute;
  inset: -40%;
  background: radial-gradient(circle at 50% 20%, color-mix(in srgb, var(--sv-glow, #ffd45a) 25%, transparent), transparent 50%);
  opacity: .7;
}
.login-guard-shine {
  pointer-events: none;
  position: absolute;
  top: 0; left: -30%;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);
  transform: skewX(-18deg);
  animation: lg-shine 4s ease-in-out infinite;
}
@keyframes lg-shine {
  0%, 100% { left: -40%; opacity: 0; }
  40% { opacity: 1; }
  70% { left: 120%; opacity: 0; }
}

.login-guard-dialog::after {
  content: "";
  position: absolute;
  left: 12%; right: 12%; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--sv-primary, #ffd45a), transparent);
  opacity: .85;
}

.login-guard-close {
  position: absolute;
  top: 12px; right: 12px;
  width: 34px; height: 34px;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sv-primary, #ffd45a) 35%, transparent);
  background: rgba(0,0,0,.35);
  color: var(--sv-text, #f5ecd8);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: .2s ease;
  z-index: 2;
}
.login-guard-close:hover {
  background: color-mix(in srgb, var(--sv-primary, #ffd45a) 25%, transparent);
  border-color: var(--sv-primary, #ffd45a);
  color: #fff;
}

.login-guard-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
  position: relative;
  z-index: 1;
}
.login-guard-brand-rule {
  display: block;
  width: 48px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--sv-primary, #ffd45a));
}
.login-guard-brand-rule:last-child {
  background: linear-gradient(90deg, var(--sv-primary, #ffd45a), transparent);
}
.login-guard-brand-gem {
  color: var(--sv-primary, #ffd45a);
  font-size: 11px;
  text-shadow: 0 0 10px color-mix(in srgb, var(--sv-glow, #ffd45a) 60%, transparent);
}

.login-guard-icon-halo {
  position: relative;
  width: 88px; height: 88px;
  margin: 0 auto 16px;
  z-index: 1;
}
.login-guard-icon-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid color-mix(in srgb, var(--sv-primary, #ffd45a) 40%, transparent);
  animation: lg-pulse 2.4s ease-in-out infinite;
}
.login-guard-symbol {
  position: absolute;
  inset: 10px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--sv-primary, #ffd45a) 35%, transparent), transparent 55%),
    linear-gradient(160deg, var(--sv-secondary, #5a0a10), #120808);
  border: 1px solid color-mix(in srgb, var(--sv-primary, #ffd45a) 50%, transparent);
  color: var(--sv-primary, #ffd45a);
  box-shadow: 0 0 24px color-mix(in srgb, var(--sv-glow, #ffd45a) 30%, transparent);
  overflow: hidden;
}
.login-guard-custom-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 10px;
}

.login-guard-dialog h2 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 1.2px;
  line-height: 1.25;
  color: var(--sv-text, #fff6df);
  text-transform: uppercase;
}
.login-guard-dialog h2 span {
  color: var(--sv-primary, #ffd45a);
  text-shadow: 0 0 14px color-mix(in srgb, var(--sv-glow, #ffd45a) 45%, transparent);
}

.login-guard-dialog p#loginGuardMessage {
  position: relative;
  z-index: 1;
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--sv-text, #f5ecd8) 72%, transparent);
}

.login-guard-separator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 auto 16px;
  width: 70%;
  position: relative;
  z-index: 1;
}
.login-guard-separator span {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--sv-primary, #ffd45a) 50%, transparent));
}
.login-guard-separator span:last-child {
  background: linear-gradient(90deg, color-mix(in srgb, var(--sv-primary, #ffd45a) 50%, transparent), transparent);
}
.login-guard-separator b {
  color: var(--sv-primary, #ffd45a);
  font-size: 10px;
  font-weight: 400;
}

.login-guard-actions {
  display: grid;
  gap: 10px;
  position: relative;
  z-index: 1;
}

.login-guard-login {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--sv-primary, #ffd45a) 70%, #fff);
  background: var(--sv-gradient-main, linear-gradient(135deg, var(--sv-primary, #ffd45a), var(--sv-secondary, #c98a09)));
  color: var(--sv-surface, #1a1200) !important;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .8px;
  text-decoration: none !important;
  box-shadow:
    0 0 20px color-mix(in srgb, var(--sv-glow, #ffd45a) 35%, transparent),
    0 8px 20px rgba(0,0,0,.35);
  transition: .2s ease;
}
.login-guard-login:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}
.login-guard-action-arrow {
  font-size: 14px;
  opacity: .85;
}

.login-guard-cancel {
  padding: 11px 16px;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--sv-primary, #ffd45a) 25%, transparent);
  background: rgba(0,0,0,.35);
  color: color-mix(in srgb, var(--sv-text, #f5ecd8) 80%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .4px;
  cursor: pointer;
  transition: .2s ease;
}
.login-guard-cancel:hover {
  border-color: var(--sv-primary, #ffd45a);
  color: var(--sv-text, #fff);
  background: color-mix(in srgb, var(--sv-primary, #ffd45a) 12%, transparent);
}

.login-guard-footnote {
  position: relative;
  z-index: 1;
  margin: 16px 0 0;
  font-size: 10px;
  letter-spacing: 1.5px;
  color: color-mix(in srgb, var(--sv-primary, #ffd45a) 65%, transparent);
  text-transform: uppercase;
}

body.login-guard-open {
  overflow: hidden !important;
}

/* Theme force (sv-themed) */
body.sv-themed .login-guard-dialog {
  --lg-gold: var(--sv-primary) !important;
  border-color: color-mix(in srgb, var(--sv-primary) 55%, transparent) !important;
  background:
    radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--sv-primary) 16%, transparent), transparent 45%),
    radial-gradient(circle at 0% 100%, color-mix(in srgb, var(--sv-secondary) 20%, transparent), transparent 50%),
    linear-gradient(160deg, var(--sv-panel, var(--sv-bg-soft, #1a140c)), var(--sv-surface, #0e0a0a) 70%) !important;
  color: var(--sv-text) !important;
}
body.sv-themed .login-guard-login {
  background: var(--sv-gradient-main, linear-gradient(135deg, var(--sv-primary), var(--sv-secondary))) !important;
  color: var(--sv-surface, #1a140c) !important;
}
body.sv-themed .login-guard-dialog::after {
  background: linear-gradient(90deg, transparent, var(--sv-primary), transparent) !important;
}


/* ---- Jackpot ---- */
body.sv-themed .jackpot-value,
body.sv-themed .jackpot-currency {
  color: var(--sv-primary) !important;
  text-shadow: 0 0 12px color-mix(in srgb, var(--sv-glow) 50%, transparent);
}

/* ---- Footer ---- */
body.sv-themed .desktop-site-footer {
  border-top-color: var(--sv-primary) !important;
  background: var(--sv-footer-bg, var(--sv-bg-deep, #0a0807)) !important;
}
body.sv-themed .bottom-navigation .nav-item.active span {
  color: var(--sv-primary) !important;
}
body.sv-themed .bottom-navigation {
  background: var(--sv-footer-bg, var(--sv-bg-deep, #0a0807)) !important;
  border-top-color: var(--sv-border-soft, var(--sv-primary)) !important;
}

/* ---- Buttons / CTAs ---- */
body.sv-themed .btn-futuristic,
body.sv-themed .btn-login-futuristic {
  background: var(--sv-gradient-main, linear-gradient(135deg, var(--sv-primary), var(--sv-secondary))) !important;
  border-color: var(--sv-glow) !important;
  color: var(--sv-surface, #1a140c) !important;
  box-shadow: 0 0 16px color-mix(in srgb, var(--sv-glow) 35%, transparent);
}
body.sv-themed .btn-register-futuristic {
  border-color: var(--sv-accent, var(--sv-primary)) !important;
  color: var(--sv-accent, var(--sv-primary)) !important;
}

/* ---- Header balance / member chrome ---- */
body.sv-themed .member-header-balance {
  border-color: var(--sv-primary) !important;
  color: var(--sv-primary) !important;
  box-shadow: 0 0 10px rgba(var(--sv-primary-rgb, 242,188,90), 0.35) !important;
}
body.sv-themed .member-header-balance .balance-currency {
  color: var(--sv-primary) !important;
}
body.sv-themed .member-header-balance .balance-amount {
  color: var(--sv-text) !important;
}

/* ---- Info bar / running text accents ---- */
body.sv-themed .info-icon,
body.sv-themed .info-label {
  color: var(--sv-primary) !important;
}
body.sv-themed .slider-dot .active {
  background: var(--sv-primary) !important;
  box-shadow: 0 0 10px var(--sv-glow) !important;
}

/* ---- Provider cards ---- */
body.sv-themed .provider-lobby-heading,
body.sv-themed .provider-home-section {
  border-color: color-mix(in srgb, var(--sv-primary) 30%, transparent);
}

/* Optional custom popup icons. Default emoji/SVG markup remains until one is set. */
.login-guard-custom-icon {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sv-hot-fire-icon {
  display: block;
  width: 38px;
  height: 38px;
  object-fit: contain;
  filter: drop-shadow(0 0 7px var(--sv-glow, #f90));
}

/* Always apply CSS variable fallbacks — gold defaults */
:root {
  --sv-primary: #F2BC5A;
  --sv-secondary: #9A541E;
  --sv-glow: #F7A63D;
  --sv-accent: #FFE29A;
  --sv-surface: #1A140C;
  --sv-text: #FFF6E0;
}


/* ============================================================
   Pemetaan warna admin (sesuai permintaan):
   - Teks/Label (--sv-text) → SEMUA tulisan label/judul di screenshot
   - Utama (--sv-primary) → khusus tema web (border, glow, gradient, tombol)
   ============================================================ */

/* --- Teks/Label: menu kategori --- */
.category-label,
.category-item span {
  color: var(--sv-text) !important;
  -webkit-text-fill-color: var(--sv-text) !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.85) !important;
}
.category-link:hover .category-label {
  color: var(--sv-accent, var(--sv-text)) !important;
  -webkit-text-fill-color: var(--sv-accent, var(--sv-text)) !important;
}

/* --- Teks/Label: judul section --- */
.home-hot-title h3,
.home-hot-title-text h3,
.home-togel-title h3,
.provider-home-title,
.provider-lobby-title {
  color: var(--sv-text) !important;
  -webkit-text-fill-color: var(--sv-text) !important;
  background: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,.75) !important;
}
.home-hot-title span,
.home-hot-title-text span,
.home-togel-title span,
.provider-home-subtitle {
  color: color-mix(in srgb, var(--sv-text) 60%, #888) !important;
}

/* --- Teks/Label: header sidebar --- */
.modern-card-header,
.sidebar-apk-head,
.sidebar-apk-head span {
  color: var(--sv-text) !important;
  -webkit-text-fill-color: var(--sv-text) !important;
}
.modern-progress-label,
.modern-payment-name,
.modern-wd-user,
.sidebar-last-wd li span,
.sidebar-payment li span {
  color: color-mix(in srgb, var(--sv-text) 75%, #999) !important;
}
.modern-wd-amount,
.sidebar-last-wd li b,
.sidebar-service b {
  color: var(--sv-text) !important;
}

/* --- Teks/Label: info bar & balance amount --- */
.info-label,
.info-icon,
.member-header-balance .balance-amount,
.desktop-footer-menu a,
.bottom-navigation .nav-item span {
  color: var(--sv-text) !important;
}
.jackpot-value,
.jackpot-currency {
  color: var(--sv-text) !important;
}

/* --- Warna Utama: khusus tema web (border, tombol, gradient, hover aktif) --- */
.member-header-balance,
.member-header-balance .balance-currency,
.bottom-navigation .nav-item.active span,
.desktop-footer-menu h4,
.desktop-footer-menu a:hover,
.slider-dot .active,
.home-hot-all,
.modern-progress-time,
.sidebar-payment li i {
  color: var(--sv-primary) !important;
  border-color: var(--sv-primary);
}
.btn-login,
.btn-register,
.btn-login-futuristic,
.btn-register-futuristic,
.desktop-login-submit,
.desktop-register-link,
.sidebar-promo-btn,
.sidebar-apk-btn,
.provider-play-btn,
.btn-futuristic {
  background: var(--sv-gradient-main, linear-gradient(135deg, var(--sv-primary), var(--sv-secondary))) !important;
  border-color: var(--sv-primary) !important;
  color: var(--sv-surface, #0a0807) !important;
  -webkit-text-fill-color: var(--sv-surface, #0a0807) !important;
}
.modern-card-header {
  background: linear-gradient(90deg, var(--sv-secondary), var(--sv-primary), var(--sv-secondary)) !important;
}
.modern-card {
  border-color: color-mix(in srgb, var(--sv-primary) 28%, transparent) !important;
}
.modern-progress-fill,
.modern-progress-bar > div {
  background: var(--sv-gradient-main, linear-gradient(90deg, var(--sv-primary), var(--sv-secondary))) !important;
}

/* Jackpot frame dari variabel runtime (upload admin) */
.jackpot-card {
  background-image: var(--sv-jackpot-mobile, url('/assets/img/jackpot/jackpot.png')) !important;
  background-size: 100% 100% !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}
@media (min-width: 900px) {
  .jackpot-card {
    background-image: var(--sv-jackpot-desktop, url('/assets/img/jackpot/jackpot-desktop.png')) !important;
  }
}