/* ==========================================================================
   TREASURYY WHITE LABEL THEME ENGINE & SHOWROOM STYLES
   10 Premium Custom Themes for iGaming & Casino Platform
   ========================================================================== */

/* Base transition for smooth theme switching */
:root {
  --theme-transition: background-color 0.3s ease, border-color 0.3s ease, color 0.2s ease, box-shadow 0.3s ease;
  --theme-name: 'Royal Gold';
}

html, body, header, aside, main, [class*="bg-background"], [class*="bg-card"], [class*="bg-[var(--topbar)]"], [class*="bg-[var(--sidebar-bg)]"] {
  transition: var(--theme-transition);
}

/* --------------------------------------------------------------------------
   THEME 1: Royal Gold (शाही गोल्ड) - Classic Vegas & Macau VIP
   -------------------------------------------------------------------------- */
[data-theme="royal-gold"], :root:not([data-theme]) {
  --theme-name: 'Royal Gold';
  --radius: 0.5rem;
  --background: #0d0f13;
  --foreground: #f8fafc;
  --card: #151922;
  --card-foreground: #f8fafc;
  --popover: #151922;
  --popover-foreground: #f8fafc;
  --primary: #eab308;
  --primary-foreground: #0d0f13;
  --secondary: #202734;
  --secondary-foreground: #f8fafc;
  --muted: #1c222e;
  --muted-foreground: #94a3b8;
  --accent: #222b3a;
  --accent-foreground: #f8fafc;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #2a3444;
  --input: #2a3444;
  --ring: #eab308;
  --gold: #facc15;
  --gold-soft: #ca8a04;
  --topbar: #0f1218;
  --sidebar-bg: #0d1015;
  --theme-glow: rgba(234, 179, 8, 0.25);
  --theme-gradient: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}

[data-theme="royal-gold"] .brand-glow,
:root:not([data-theme]) .brand-glow {
  text-shadow: 0 0 15px rgba(250, 204, 21, 0.4);
}

/* --------------------------------------------------------------------------
   THEME 2: Cyber Neon (साइबर नियॉन) - Tokyo Synthwave Crypto Casino
   -------------------------------------------------------------------------- */
[data-theme="cyber-neon"] {
  --theme-name: 'Cyber Neon';
  --radius: 0.25rem;
  --background: #07080f;
  --foreground: #f0f6fc;
  --card: #0f1222;
  --card-foreground: #f0f6fc;
  --popover: #0f1222;
  --popover-foreground: #f0f6fc;
  --primary: #00f0ff;
  --primary-foreground: #07080f;
  --secondary: #171d33;
  --secondary-foreground: #f0f6fc;
  --muted: #13182b;
  --muted-foreground: #8b9bb4;
  --accent: #19203a;
  --accent-foreground: #00f0ff;
  --destructive: #ff0055;
  --destructive-foreground: #ffffff;
  --border: #25315e;
  --input: #25315e;
  --ring: #00f0ff;
  --gold: #ff007f;
  --gold-soft: #00f0ff;
  --topbar: #0a0d1b;
  --sidebar-bg: #080a16;
  --theme-glow: rgba(0, 240, 255, 0.35);
  --theme-gradient: linear-gradient(135deg, #00f0ff 0%, #ff007f 100%);
}

[data-theme="cyber-neon"] .brand-glow {
  text-shadow: 0 0 12px #00f0ff, 0 0 24px rgba(255, 0, 127, 0.5);
}

[data-theme="cyber-neon"] aside, [data-theme="cyber-neon"] header {
  border-color: rgba(37, 49, 94, 0.8) !important;
}

/* --------------------------------------------------------------------------
   THEME 3: Emerald Prestige (एमराल्ड प्रेस्टीज) - Monte Carlo High Stakes
   -------------------------------------------------------------------------- */
[data-theme="emerald-prestige"] {
  --theme-name: 'Emerald Prestige';
  --radius: 0.65rem;
  --background: #05130d;
  --foreground: #ecfdf5;
  --card: #0d241a;
  --card-foreground: #ecfdf5;
  --popover: #0d241a;
  --popover-foreground: #ecfdf5;
  --primary: #10b981;
  --primary-foreground: #05130d;
  --secondary: #143829;
  --secondary-foreground: #ecfdf5;
  --muted: #102e21;
  --muted-foreground: #6ee7b7;
  --accent: #164230;
  --accent-foreground: #34d399;
  --destructive: #f43f5e;
  --destructive-foreground: #ffffff;
  --border: #1d4e39;
  --input: #1d4e39;
  --ring: #10b981;
  --gold: #34d399;
  --gold-soft: #059669;
  --topbar: #071911;
  --sidebar-bg: #05150e;
  --theme-glow: rgba(16, 185, 129, 0.3);
  --theme-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

[data-theme="emerald-prestige"] .brand-glow {
  text-shadow: 0 0 16px rgba(52, 211, 153, 0.5);
}

/* --------------------------------------------------------------------------
   THEME 4: Crimson Dynasty (क्रिमसन डायनेस्टी) - Imperial Macau Dragon
   -------------------------------------------------------------------------- */
[data-theme="crimson-dynasty"] {
  --theme-name: 'Crimson Dynasty';
  --radius: 0.5rem;
  --background: #0f0608;
  --foreground: #fff1f2;
  --card: #1c0d12;
  --card-foreground: #fff1f2;
  --popover: #1c0d12;
  --popover-foreground: #fff1f2;
  --primary: #f43f5e;
  --primary-foreground: #ffffff;
  --secondary: #2d131b;
  --secondary-foreground: #fff1f2;
  --muted: #240e15;
  --muted-foreground: #fda4af;
  --accent: #381622;
  --accent-foreground: #fbbf24;
  --destructive: #e11d48;
  --destructive-foreground: #ffffff;
  --border: #441c28;
  --input: #441c28;
  --ring: #f43f5e;
  --gold: #fbbf24;
  --gold-soft: #f43f5e;
  --topbar: #13080b;
  --sidebar-bg: #100609;
  --theme-glow: rgba(244, 63, 94, 0.35);
  --theme-gradient: linear-gradient(135deg, #f43f5e 0%, #fbbf24 100%);
}

[data-theme="crimson-dynasty"] .brand-glow {
  text-shadow: 0 0 16px rgba(244, 63, 94, 0.6);
}

/* --------------------------------------------------------------------------
   THEME 5: Midnight Sapphire (मिडनाइट नीलम) - Modern Atlantic City
   -------------------------------------------------------------------------- */
[data-theme="midnight-sapphire"] {
  --theme-name: 'Midnight Sapphire';
  --radius: 0.5rem;
  --background: #070d18;
  --foreground: #eff6ff;
  --card: #0f1c30;
  --card-foreground: #eff6ff;
  --popover: #0f1c30;
  --popover-foreground: #eff6ff;
  --primary: #3b82f6;
  --primary-foreground: #ffffff;
  --secondary: #172a47;
  --secondary-foreground: #eff6ff;
  --muted: #132239;
  --muted-foreground: #93c5fd;
  --accent: #1a3052;
  --accent-foreground: #60a5fa;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #233b63;
  --input: #233b63;
  --ring: #3b82f6;
  --gold: #60a5fa;
  --gold-soft: #2563eb;
  --topbar: #0a1322;
  --sidebar-bg: #08101e;
  --theme-glow: rgba(59, 130, 246, 0.35);
  --theme-gradient: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

[data-theme="midnight-sapphire"] .brand-glow {
  text-shadow: 0 0 16px rgba(96, 165, 250, 0.6);
}

/* --------------------------------------------------------------------------
   THEME 6: Amethyst Royale (एमथिस्ट रॉयल) - Mystic VIP Purple Lounge
   -------------------------------------------------------------------------- */
[data-theme="amethyst-royale"] {
  --theme-name: 'Amethyst Royale';
  --radius: 0.75rem;
  --background: #0c0615;
  --foreground: #faf5ff;
  --card: #170c26;
  --card-foreground: #faf5ff;
  --popover: #170c26;
  --popover-foreground: #faf5ff;
  --primary: #a855f7;
  --primary-foreground: #ffffff;
  --secondary: #26143d;
  --secondary-foreground: #faf5ff;
  --muted: #1e1030;
  --muted-foreground: #d8b4fe;
  --accent: #2e184a;
  --accent-foreground: #e879f9;
  --destructive: #f43f5e;
  --destructive-foreground: #ffffff;
  --border: #3b1f5f;
  --input: #3b1f5f;
  --ring: #a855f7;
  --gold: #e879f9;
  --gold-soft: #9333ea;
  --topbar: #10081d;
  --sidebar-bg: #0d0617;
  --theme-glow: rgba(168, 85, 247, 0.35);
  --theme-gradient: linear-gradient(135deg, #a855f7 0%, #e879f9 100%);
}

[data-theme="amethyst-royale"] .brand-glow {
  text-shadow: 0 0 18px rgba(232, 121, 249, 0.6);
}

/* --------------------------------------------------------------------------
   THEME 7: Sunset Mirage (सनसेट मिराज) - Dubai Desert Sun & Warm Amber
   -------------------------------------------------------------------------- */
[data-theme="sunset-mirage"] {
  --theme-name: 'Sunset Mirage';
  --radius: 0.5rem;
  --background: #110c0a;
  --foreground: #fff7ed;
  --card: #1e1511;
  --card-foreground: #fff7ed;
  --popover: #1e1511;
  --popover-foreground: #fff7ed;
  --primary: #f97316;
  --primary-foreground: #110c0a;
  --secondary: #2f201a;
  --secondary-foreground: #fff7ed;
  --muted: #261914;
  --muted-foreground: #fdba74;
  --accent: #39271f;
  --accent-foreground: #fb923c;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #463026;
  --input: #463026;
  --ring: #f97316;
  --gold: #f59e0b;
  --gold-soft: #ea580c;
  --topbar: #150f0c;
  --sidebar-bg: #120d0a;
  --theme-glow: rgba(249, 115, 22, 0.35);
  --theme-gradient: linear-gradient(135deg, #f97316 0%, #f59e0b 100%);
}

[data-theme="sunset-mirage"] .brand-glow {
  text-shadow: 0 0 16px rgba(249, 115, 22, 0.6);
}

/* --------------------------------------------------------------------------
   THEME 8: Nordic Frost (नॉर्डिक फ्रॉस्ट) - Arctic Minimalist Sportsbook
   -------------------------------------------------------------------------- */
[data-theme="nordic-frost"] {
  --theme-name: 'Nordic Frost';
  --radius: 0.375rem;
  --background: #0a0f14;
  --foreground: #ecfeff;
  --card: #111a22;
  --card-foreground: #ecfeff;
  --popover: #111a22;
  --popover-foreground: #ecfeff;
  --primary: #06b6d4;
  --primary-foreground: #0a0f14;
  --secondary: #1a2734;
  --secondary-foreground: #ecfeff;
  --muted: #15202b;
  --muted-foreground: #a5f3fc;
  --accent: #1e2e3c;
  --accent-foreground: #38bdf8;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #26384a;
  --input: #26384a;
  --ring: #06b6d4;
  --gold: #38bdf8;
  --gold-soft: #0891b2;
  --topbar: #0d131a;
  --sidebar-bg: #0b1016;
  --theme-glow: rgba(6, 182, 212, 0.3);
  --theme-gradient: linear-gradient(135deg, #06b6d4 0%, #38bdf8 100%);
}

[data-theme="nordic-frost"] .brand-glow {
  text-shadow: 0 0 15px rgba(56, 189, 248, 0.5);
}

/* --------------------------------------------------------------------------
   THEME 9: Toxic Venom (टॉक्सिक वेनम) - Hyper Esport & Crash Gaming
   -------------------------------------------------------------------------- */
[data-theme="toxic-venom"] {
  --theme-name: 'Toxic Venom';
  --radius: 0.375rem;
  --background: #080c09;
  --foreground: #f0fdf4;
  --card: #101812;
  --card-foreground: #f0fdf4;
  --popover: #101812;
  --popover-foreground: #f0fdf4;
  --primary: #22c55e;
  --primary-foreground: #080c09;
  --secondary: #19271c;
  --secondary-foreground: #f0fdf4;
  --muted: #141f17;
  --muted-foreground: #86efac;
  --accent: #1f3023;
  --accent-foreground: #84cc16;
  --destructive: #f43f5e;
  --destructive-foreground: #ffffff;
  --border: #263b2a;
  --input: #263b2a;
  --ring: #22c55e;
  --gold: #84cc16;
  --gold-soft: #16a34a;
  --topbar: #0c120e;
  --sidebar-bg: #090e0b;
  --theme-glow: rgba(34, 197, 94, 0.35);
  --theme-gradient: linear-gradient(135deg, #22c55e 0%, #84cc16 100%);
}

[data-theme="toxic-venom"] .brand-glow {
  text-shadow: 0 0 16px rgba(34, 197, 94, 0.6);
}

/* --------------------------------------------------------------------------
   THEME 10: Obsidian Stealth (ओब्सीडियन स्टील्थ) - Swiss Luxury Monochrome
   -------------------------------------------------------------------------- */
[data-theme="obsidian-stealth"] {
  --theme-name: 'Obsidian Stealth';
  --radius: 0.5rem;
  --background: #09090b;
  --foreground: #f8fafc;
  --card: #131316;
  --card-foreground: #f8fafc;
  --popover: #131316;
  --popover-foreground: #f8fafc;
  --primary: #f4f4f5;
  --primary-foreground: #09090b;
  --secondary: #1f1f25;
  --secondary-foreground: #f8fafc;
  --muted: #18181d;
  --muted-foreground: #94a3b8;
  --accent: #272730;
  --accent-foreground: #ffffff;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #2e2e38;
  --input: #2e2e38;
  --ring: #f4f4f5;
  --gold: #e4e4e7;
  --gold-soft: #a1a1aa;
  --topbar: #0d0d10;
  --sidebar-bg: #0b0b0d;
  --theme-glow: rgba(244, 244, 245, 0.2);
  --theme-gradient: linear-gradient(135deg, #ffffff 0%, #a1a1aa 100%);
}

[data-theme="obsidian-stealth"] .brand-glow {
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   INTERACTIVE WHITE LABEL THEME SHOWROOM FLOATING WIDGET
   ========================================================================== */

#wl-showroom-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 99999;
  background: var(--card, #151922);
  border: 1px solid var(--border, #2a3444);
  color: var(--foreground, #fff);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6), 0 0 20px var(--theme-glow, rgba(234, 179, 8, 0.3));
  border-radius: 9999px;
  padding: 10px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  backdrop-filter: blur(12px);
}

#wl-showroom-toggle:hover {
  transform: translateY(-3px) scale(1.03);
  border-color: var(--gold, #eab308);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.7), 0 0 28px var(--theme-glow, rgba(234, 179, 8, 0.5));
}

#wl-showroom-toggle .wl-pill-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--gold, #eab308);
  box-shadow: 0 0 10px var(--gold, #eab308);
  animation: wlPulse 2s infinite;
}

@keyframes wlPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.85); }
}

/* Showroom Modal Drawer */
#wl-showroom-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: flex-end;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

#wl-showroom-modal.active {
  opacity: 1;
  pointer-events: auto;
}

#wl-showroom-panel {
  width: 100%;
  max-width: 480px;
  height: 100%;
  background: var(--background, #0d0f13);
  border-left: 1px solid var(--border, #2a3444);
  box-shadow: -15px 0 50px rgba(0, 0, 0, 0.8);
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  overflow: hidden;
}

#wl-showroom-modal.active #wl-showroom-panel {
  transform: translateX(0);
}

.wl-panel-head {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border, #2a3444);
  background: var(--topbar, #0f1218);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.wl-panel-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wl-theme-card {
  background: var(--card, #151922);
  border: 1.5px solid var(--border, #2a3444);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.wl-theme-card:hover {
  transform: translateY(-2px);
  border-color: var(--card-accent, var(--gold, #eab308));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 16px var(--card-glow, rgba(234, 179, 8, 0.2));
}

.wl-theme-card.active-theme {
  border-color: var(--card-accent, var(--gold, #eab308));
  box-shadow: 0 0 0 2px var(--card-accent, var(--gold, #eab308)), 0 8px 24px rgba(0, 0, 0, 0.5);
}

.wl-theme-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.wl-theme-title {
  font-size: 15px;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--foreground, #fff);
}

.wl-theme-badge {
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 9999px;
  background: rgba(255, 255, 255, 0.08);
  color: var(--card-accent, var(--gold, #eab308));
}

.wl-theme-desc {
  font-size: 12px;
  color: var(--muted-foreground, #94a3b8);
  margin-bottom: 12px;
  line-height: 1.4;
}

.wl-color-swatches {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wl-swatch {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.5);
}

/* Quick live brand name tester inside showroom */
.wl-brand-tester {
  background: rgba(255, 255, 255, 0.03);
  border: 1px dashed var(--border, #2a3444);
  border-radius: 12px;
  padding: 16px;
  margin-top: 8px;
}

.wl-brand-tester input {
  width: 100%;
  background: var(--card, #151922);
  border: 1px solid var(--border, #2a3444);
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--foreground, #fff);
  font-size: 13px;
  outline: none;
  margin-top: 8px;
}

.wl-brand-tester input:focus {
  border-color: var(--gold, #eab308);
}