/* =========================================================
   iLotto Theme Variables v1.0 — Default Dark Theme
   =========================================================
   All pages include this file. theme-loader.js overrides
   these variables from the active theme in operator_themes.
   ========================================================= */

:root {
  /* ── Core Palette ── */
  --gold: #ffd700;
  --gold-dark: #cc9900;
  --green: #4ade80;
  --green-dark: #22c55e;
  --bg-dark: #0f0c29;
  --bg-mid: #302b63;
  --bg-light: #24243e;
  --bg-card: #1a1a2e;
  --text: #ffffff;
  --text-muted: #94a3b8;
  --danger: #ef4444;
  --danger-dark: #dc2626;

  /* ── Extended Palette ── */
  --primary: #1a1a2e;
  --primary-dark: #0f0c29;
  --secondary: #16213e;
  --accent: #ffd700;
  --accent-dark: #c8a032;
  --accent-alt: #ff8c00;
  --success: #4ade80;
  --success-dark: #22c55e;
  --warning: #fbbf24;
  --warning-dark: #d97706;
  --error: #ef4444;
  --info: #60a5fa;
  --info-dark: #3b82f6;

  /* ── Game Accents ── */
  --game-flash: #ff8c00;
  --game-flash-dark: #d97706;
  --game-mystery: #8b5cf6;
  --game-mystery-dark: #6d28d9;
  --game-spin: #a78bfa;
  --game-spin-alt: #f472b6;
  --game-scratch: #3b82f6;
  --game-scratch-dark: #1d4ed8;
  --game-daily: #4ade80;
  --game-daily-dark: #22c55e;
  --game-jackpot: #ffd700;
  --game-jackpot-dark: #ff8c00;
  --game-dropzone: #c8a032;
  --game-dropzone-alt: #ffd700;

  /* ── Surfaces ── */
  --surface: #24243e;
  --surface-elevated: #2a2a4a;
  --surface-hover: rgba(255,255,255,0.05);
  --surface-card: rgba(255,255,255,0.08);
  --surface-card-alt: rgba(255,255,255,0.02);
  --surface-overlay: rgba(0,0,0,0.85);
  --surface-modal: linear-gradient(145deg, var(--bg-light), var(--bg-mid));
  --surface-input: rgba(0,0,0,0.3);

  /* ── Borders ── */
  --border: rgba(255,255,255,0.1);
  --border-subtle: rgba(255,255,255,0.05);
  --border-accent: rgba(255,215,0,0.2);
  --border-accent-strong: rgba(255,215,0,0.3);

  /* ── Typography ── */
  --font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  --font-display: 'Orbitron', system-ui, sans-serif;
  --font-url: none;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 40px rgba(0,0,0,0.4);
  --shadow-xl: 0 20px 60px rgba(0,0,0,0.5);
  --shadow-glow-gold: 0 0 20px rgba(255,215,0,0.3);
  --shadow-glow-green: 0 0 20px rgba(74,222,128,0.3);
  --shadow-glow-accent: 0 8px 30px rgba(255,215,0,0.4);
  --shadow-card: 0 0 5px rgba(255,200,0,0.2);

  /* ── Border Radius ── */
  --radius-xs: 4px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
  --radius-2xl: 25px;
  --radius-pill: 30px;
  --radius-full: 50%;

  /* ── Gradients ── */
  --gradient-page: linear-gradient(135deg, var(--bg-dark), var(--bg-mid), var(--bg-light));
  --gradient-gold: linear-gradient(135deg, var(--gold), var(--gold-dark));
  --gradient-gold-h: linear-gradient(90deg, var(--gold), var(--accent-alt));
  --gradient-green: linear-gradient(90deg, var(--green), var(--green-dark));
  --gradient-danger: linear-gradient(135deg, var(--danger), var(--danger-dark));
  --gradient-card: linear-gradient(145deg, var(--surface-card), var(--surface-card-alt));
  --gradient-hero: linear-gradient(135deg, var(--bg-dark), var(--bg-mid), var(--bg-light));

  /* ── Alpha Variants (gold) ── */
  --gold-05: rgba(255,215,0,0.05);
  --gold-08: rgba(255,215,0,0.08);
  --gold-10: rgba(255,215,0,0.1);
  --gold-15: rgba(255,215,0,0.15);
  --gold-20: rgba(255,215,0,0.2);
  --gold-30: rgba(255,215,0,0.3);
  --gold-40: rgba(255,215,0,0.4);
  --gold-50: rgba(255,215,0,0.5);
  --gold-80: rgba(255,215,0,0.8);

  /* ── Alpha Variants (green) ── */
  --green-05: rgba(74,222,128,0.05);
  --green-10: rgba(74,222,128,0.1);
  --green-15: rgba(74,222,128,0.15);
  --green-20: rgba(74,222,128,0.2);
  --green-30: rgba(74,222,128,0.3);
  --green-40: rgba(74,222,128,0.4);
  --green-50: rgba(74,222,128,0.5);

  /* ── Alpha Variants (danger) ── */
  --danger-10: rgba(239,68,68,0.1);
  --danger-15: rgba(239,68,68,0.15);
  --danger-20: rgba(239,68,68,0.2);
  --danger-30: rgba(239,68,68,0.3);

  /* ── Alpha Variants (info) ── */
  --info-10: rgba(96,165,250,0.1);
  --info-20: rgba(96,165,250,0.2);

  /* ── Alpha Variants (surface overlays) ── */
  --white-05: rgba(255,255,255,0.05);
  --white-08: rgba(255,255,255,0.08);
  --white-10: rgba(255,255,255,0.1);
  --white-15: rgba(255,255,255,0.15);
  --white-20: rgba(255,255,255,0.2);
  --black-20: rgba(0,0,0,0.2);
  --black-25: rgba(0,0,0,0.25);
  --black-30: rgba(0,0,0,0.3);
  --black-50: rgba(0,0,0,0.5);
  --black-70: rgba(0,0,0,0.7);
  --black-85: rgba(0,0,0,0.85);
  --black-90: rgba(0,0,0,0.9);

  /* ── Picker/Modal Specific ── */
  --picker-bg: #1e293b;
  --picker-border: rgba(255,255,255,0.1);
  --picker-number-bg: rgba(255,255,255,0.08);
  --picker-number-text: #ffffff;
  --picker-number-selected-bg: var(--gold);
  --picker-number-selected-text: #000000;
  --picker-grid-bg: rgba(0,0,0,0.25);
  --picker-hint: #64748b;
  --shadow-nav: 0 -4px 16px rgba(0,0,0,0.2);

  /* ── Button Specific ── */
  --btn-primary-bg: var(--gradient-gold);
  --btn-primary-text: var(--bg-dark);
  --btn-secondary-bg: var(--white-10);
  --btn-secondary-text: #ffffff;
  --btn-disabled-bg: rgba(255,255,255,0.05);
  --btn-disabled-text: #555;

  /* ── Game Card Layout ── */
  --games-layout: grid;
  --games-columns: repeat(auto-fit, minmax(280px, 1fr));
  --games-scroll-snap: none;
  --games-overflow: visible;
  --games-card-min-width: auto;
}

/* =========================================================
   Utility Classes — used in HTML instead of inline styles
   ========================================================= */

/* ── Text Colors ── */
.text-gold, .text-accent    { color: var(--gold) !important; }
.text-gold-dark              { color: var(--accent-dark) !important; }
.text-green, .text-success   { color: var(--green) !important; }
.text-danger, .text-error    { color: var(--danger) !important; }
.text-info                   { color: var(--info) !important; }
.text-warning                { color: var(--warning) !important; }
.text-muted                  { color: var(--text-muted) !important; }
.text-white                  { color: var(--text) !important; }
.text-primary                { color: var(--text) !important; }
.text-hint                   { color: var(--picker-hint) !important; }
.text-accent-alt             { color: var(--accent-alt) !important; }
.text-game-flash             { color: var(--game-flash) !important; }
.text-game-mystery           { color: var(--game-mystery) !important; }
.text-game-spin              { color: var(--game-spin) !important; }
.text-game-daily             { color: var(--game-daily) !important; }

/* ── Background Colors ── */
.bg-page       { background: var(--gradient-page) !important; }
.bg-card       { background: var(--bg-card) !important; }
.bg-surface    { background: var(--surface) !important; }
.bg-overlay    { background: var(--surface-overlay) !important; }
.bg-input      { background: var(--surface-input) !important; }

/* ── Gradient Backgrounds ── */
.bg-gradient-gold     { background: var(--gradient-gold-h) !important; }
.bg-gradient-green    { background: var(--gradient-green) !important; }
.bg-gradient-danger   { background: var(--gradient-danger) !important; }
.bg-gradient-card     { background: var(--gradient-card) !important; }

/* ── Quick Action Button Variants ── */
.btn-game-flash   { background: linear-gradient(90deg, var(--warning), var(--warning-dark)) !important; color: #000 !important; }
.btn-game-dropzone { background: linear-gradient(90deg, var(--game-dropzone), var(--game-dropzone-alt)) !important; color: #000 !important; }
.btn-game-scratch { background: linear-gradient(90deg, var(--game-scratch), var(--game-scratch-dark)) !important; color: var(--text) !important; }
.btn-game-spin    { background: linear-gradient(90deg, var(--game-spin), var(--game-spin-alt)) !important; color: #000 !important; }
.btn-game-refer   { background: var(--gradient-gold-h) !important; color: #000 !important; }
.btn-game-daily   { background: var(--gradient-green) !important; color: #000 !important; }
.btn-game-jackpot { background: linear-gradient(90deg, var(--game-jackpot), var(--game-jackpot-dark)) !important; color: #000 !important; }
.btn-wallet       { background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-text) !important; border: 1px solid var(--border) !important; }

/* ── Accent Background Tints ── */
.bg-gold-tint  { background: var(--gold-15) !important; }
.bg-green-tint { background: var(--green-15) !important; }
.bg-danger-tint { background: var(--danger-15) !important; }
.bg-info-tint  { background: var(--info-10) !important; }

/* ── Banner Gradients ── */
.banner-jackpot  { background: linear-gradient(135deg, var(--gold-15), rgba(255,140,0,0.1)) !important; }
.banner-daily    { background: linear-gradient(135deg, var(--green-15), var(--green-10)) !important; }
.banner-live     { background: linear-gradient(135deg, var(--danger), #cc0000) !important; }

/* ── Glow Effects ── */
.glow-gold  { text-shadow: 0 0 20px var(--gold-40); }
.glow-green { text-shadow: 0 0 15px var(--green-50); }
.glow-accent { text-shadow: 0 0 30px var(--gold-30); }

/* ── Borders ── */
.border-gold   { border-color: var(--gold) !important; }
.border-accent { border-color: var(--border-accent) !important; }
.border-subtle { border-color: var(--border-subtle) !important; }
.border-green  { border-color: var(--green-30) !important; }

/* ── Shadows ── */
.shadow-card { box-shadow: var(--shadow-card); }
.shadow-glow-gold { box-shadow: var(--shadow-glow-gold); }
.shadow-glow-green { box-shadow: var(--shadow-glow-green); }

/* ── Number Picker Themed ── */
.picker-modal {
  background: var(--picker-bg) !important;
  border: 1px solid var(--picker-border) !important;
  border-radius: var(--radius-md) !important;
}
.picker-grid-bg {
  background: var(--picker-grid-bg) !important;
  border: 1px solid var(--border-subtle) !important;
  border-radius: var(--radius-sm) !important;
}
.picker-number {
  background: var(--picker-number-bg);
  color: var(--picker-number-text);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: all 0.2s;
}
.picker-number.selected {
  background: var(--picker-number-selected-bg) !important;
  color: var(--picker-number-selected-text) !important;
  border-color: var(--gold) !important;
}
.currency-btn.active {
  border-color: var(--gold) !important;
  background: var(--gold-20) !important;
  color: var(--gold) !important;
}
.stake-btn.active {
  border-color: var(--green) !important;
  background: var(--green-20) !important;
  color: var(--green) !important;
}

/* ── Toast Themed ── */
.toast.success     { background: linear-gradient(135deg, rgba(74,222,128,0.95), rgba(34,197,94,0.95)); }
.toast.error       { background: linear-gradient(135deg, rgba(248,113,113,0.95), rgba(239,68,68,0.95)); }
.toast.info        { background: linear-gradient(135deg, rgba(96,165,250,0.95), rgba(59,130,246,0.95)); }
.toast.warning     { background: linear-gradient(135deg, rgba(251,191,36,0.95), rgba(245,158,11,0.95)); color: #000; }

/* ── Games Grid Layout (supports both grid and horizontal scroll) ── */
.games-grid {
  display: var(--games-layout) !important;
  grid-template-columns: var(--games-columns);
  scroll-snap-type: var(--games-scroll-snap);
  overflow-x: var(--games-overflow);
}
.games-grid[data-scroll="horizontal"] {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 16px;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}
.games-grid[data-scroll="horizontal"] .game-card {
  min-width: 280px;
  max-width: 320px;
  flex-shrink: 0;
  scroll-snap-align: start;
}
.games-grid[data-scroll="horizontal"]::-webkit-scrollbar {
  height: 4px;
}
.games-grid[data-scroll="horizontal"]::-webkit-scrollbar-track {
  background: var(--white-05);
  border-radius: 4px;
}
.games-grid[data-scroll="horizontal"]::-webkit-scrollbar-thumb {
  background: var(--gold-30);
  border-radius: 4px;
}

/* ── Loading Spinner Themed ── */
.loading-spinner {
  border-color: var(--gold-30) !important;
  border-top-color: var(--gold) !important;
}
.loading-text {
  color: var(--gold) !important;
}

/* ── Bottom Navigation — hidden by default, shown by theme component_css ── */
.bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: var(--surface-card);
  border-top: 1px solid var(--border);
  padding: 8px 0 env(safe-area-inset-bottom, 8px);
  align-items: center;
  justify-content: space-around;
}
.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-decoration: none;
  color: var(--text-muted);
  font-size: 0.7rem;
  padding: 4px 12px;
  border-radius: 8px;
  transition: color 0.2s;
  border: none;
  background: none;
  cursor: pointer;
}
.nav-tab.active { color: var(--gold); font-weight: 700; }
.nav-icon { font-size: 1.3rem; }
.nav-center {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient-gold);
  border: none;
  color: var(--bg-dark);
  font-size: 1.3rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: -16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  text-decoration: none;
  transition: transform 0.2s;
}
.nav-center:hover { transform: scale(1.08); }

/* ── Footer Themed ── */
footer {
  color: var(--text-muted);
  border-top-color: var(--border-subtle);
}
footer a {
  color: var(--gold);
}

/* ── Success Modal Themed ── */
.success-modal-content {
  background: linear-gradient(135deg, var(--bg-dark), var(--secondary), var(--surface)) !important;
}

/* ── Drop Zone Card Themed ── */
.dz-prize-1st { color: var(--gold) !important; }
.dz-prize-2nd { color: var(--accent-dark) !important; }
.dz-prize-3rd { color: var(--text-muted) !important; }
.dz-prize-label { color: var(--text-muted) !important; }
.dz-info { color: var(--text-muted) !important; }
.dz-price { color: var(--accent-dark) !important; }
.dz-user-rank { background: var(--gold-08) !important; }
.game-card-badge { background: var(--accent-dark) !important; color: var(--bg-dark) !important; }
.game-card-featured { border-color: var(--gold-30) !important; background: linear-gradient(135deg, var(--bg-card), var(--surface)) !important; }
.game-card-featured::after { background: linear-gradient(90deg, var(--accent-dark), var(--gold), var(--accent-dark)) !important; }

/* ── Header Themed ── */
.header {
  background: var(--black-70);
  border-bottom-color: var(--gold);
  backdrop-filter: blur(12px);
}

/* ── Responsive refinements ── */
@media (max-width: 480px) {
  .games-grid[data-scroll="horizontal"] .game-card {
    min-width: 240px;
    max-width: 280px;
  }
}