/*
 * singlotto — Black & Gold theme
 * Deep black surfaces + rich gold (#ffb800, primary accent) and
 * bronze (#8a6d1c, secondary accent). Variable NAMES are kept
 * identical to the previous theme so every page that reads them through
 * partials/_theme-vars.ejs re-skins automatically.
 */

/* ── CSS VARIABLES / DESIGN TOKENS ── */
:root {
  /* Core backgrounds — layered blacks */
  --theme-bg-deep:     #0a0704;                 /* deepest bg (page base) */
  --theme-bg-main:     #0d0d0d;                 /* main page bg */
  --theme-bg-card:     #1b1b1b;                 /* card surface */
  --theme-bg-elevated: #202020;                 /* elevated surface / nav */
  --theme-bg-input:    #151515;                 /* input field */

  /* Primary accent — Gold (สีเว็บไซต์) */
  --theme-gold:        #ffb800;                 /* primary gold */
  --theme-gold-bright: #ffc928;                 /* bright gold */
  --theme-gold-shine:  #221700;                 /* dim gold-tinted surface */
  --theme-gold-dim:    rgba(255, 184, 0, 0.10);
  --theme-gold-border: rgba(255, 184, 0, 0.45);
  --theme-gold-glow:   rgba(255, 184, 0, 0.22);

  /* Secondary accent — Bronze (สี header) */
  --theme-cyan:        #8a6d1c;                 /* header bronze */
  --theme-cyan-bright: #b8912a;                 /* bright bronze */
  --theme-cyan-rgb:    138, 109, 28;
  --theme-cyan-dim:    rgba(138, 109, 28, 0.08);
  --theme-cyan-border: rgba(138, 109, 28, 0.28);
  --theme-cyan-glow:   rgba(138, 109, 28, 0.20);

  /* Neutral surface tone */
  --theme-blue:        #232323;                 /* neutral dark surface */
  --theme-blue-hover:  #2e2e2e;                 /* hover surface */
  --theme-blue-subtle: rgba(255, 184, 0, 0.07); /* faint gold fill (alerts / pills) */

  /* Glossy dark buttons — dashboard qcard / cat-tab / lotto pill */
  --theme-navy-rgb:          255, 184, 0;       /* shadow tint follows gold */
  --theme-btn-blue-top:      #333333;           /* button gradient — top */
  --theme-btn-blue-bot:      #191919;           /* button gradient — bottom */
  --theme-btn-blue-top-h:    #3d3d3d;           /* hover — top */
  --theme-btn-blue-bot-h:    #222222;           /* hover — bottom */
  --theme-btn-blue-border:   rgba(255, 184, 0, 0.40);
  --theme-btn-blue-grad:       linear-gradient(180deg, var(--theme-btn-blue-top) 0%,   var(--theme-btn-blue-bot) 100%);
  --theme-btn-blue-grad-hover: linear-gradient(180deg, var(--theme-btn-blue-top-h) 0%, var(--theme-btn-blue-bot-h) 100%);
  --theme-pill-blue-top:     #d4920c;           /* lotto pill gradient — top */
  --theme-pill-blue-bot:     #7a5306;           /* lotto pill gradient — bottom */
  --theme-pill-blue-rgb:     212, 146, 12;      /* lotto pill shadow tint */

  /* Active-tab accent — dark gold panel (white text stays readable) */
  --theme-tab-cream-top:     #2f2410;
  --theme-tab-cream-bot:     #1c1608;
  --theme-tab-cream-border:  #ffb800;
  --theme-tab-cream-rgb:     255, 184, 0;       /* active-tab shadow tint */
  --theme-tab-cream-grad:    linear-gradient(180deg, var(--theme-tab-cream-top) 0%, var(--theme-tab-cream-bot) 100%);

  /* Status — semantic tokens (danger / success / warning / info) */
  --theme-red:         #ff4d21;                 /* danger / hot */
  --theme-red-rgb:     255, 77, 33;
  --theme-red-subtle:  rgba(255, 77, 33, 0.12);
  --theme-green:       #18c964;                 /* success */
  --theme-green-rgb:   24, 201, 100;
  --theme-green-subtle: rgba(24, 201, 100, 0.12);
  --theme-amber:       #ffb800;                 /* warning / highlight (follows primary) */
  --theme-amber-rgb:   255, 184, 0;
  --theme-amber-subtle: rgba(255, 184, 0, 0.12);
  --theme-info:        #4da3ff;
  --theme-info-rgb:    77, 163, 255;

  /* Text — light on dark */
  --theme-text-primary:   #ffffff;
  --theme-text-secondary: #aaaaaa;
  --theme-text-muted:     rgba(255, 255, 255, 0.40);
  --theme-text-white:     #ffffff;              /* text on colored buttons */
  --theme-text-on-gold:   #1a1200;              /* dark text on gold CTAs */

  /* Borders */
  --theme-border-subtle: rgba(255, 255, 255, 0.08);
  --theme-border-mid:    rgba(255, 255, 255, 0.14);

  /* UI tokens */
  --theme-radius:     14px;
  --theme-radius-sm:  8px;
  --theme-radius-lg:  20px;
  --theme-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  --theme-font:       'Kanit', 'Sarabun', sans-serif;
}

html {
  scroll-behavior: auto;
  font-family: 'Kanit', sans-serif;
}

/* ── BODY ── */
body {
  background: linear-gradient(180deg, #0a0a0a 0%, #0d0d0d 40%, #0d0d0d 100%);
  background-attachment: fixed;
  color: var(--theme-text-primary);
  font-family: var(--theme-font);
}

/* ── AMBIENT GOLD GLOW OVERLAY ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% 0%,   rgba(255, 184, 0, 0.07) 0%, transparent 70%),
    radial-gradient(ellipse 45% 35% at 85% 85%,  rgba(138, 109, 28, 0.06) 0%, transparent 60%),
    radial-gradient(ellipse 40% 30% at 8% 100%,  rgba(255, 184, 0, 0.03) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}

/* ── GLOBAL CARD STYLE ── */
.theme-card {
  background: var(--theme-bg-card);
  border: 1px solid var(--theme-border-subtle);
  border-radius: var(--theme-radius);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
  transition: var(--theme-transition);
}
.theme-card:hover {
  border-color: var(--theme-gold-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 24px var(--theme-gold-glow);
}

/* ── GOLD DIVIDER ── */
.theme-divider-gold {
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--theme-gold-border) 30%, var(--theme-gold-bright) 50%, var(--theme-gold-border) 70%, transparent 100%);
  border: none;
  margin: 0;
}

/* ── BUTTONS ── */
.theme-btn-gold {
  background: linear-gradient(135deg, #d4920c 0%, #ffc928 50%, #d4920c 100%);
  color: var(--theme-text-on-gold);
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
  transition: var(--theme-transition);
  box-shadow: 0 4px 18px var(--theme-gold-glow), 0 1px 0 rgba(255, 255, 255, 0.25) inset;
  letter-spacing: 0.03em;
}
.theme-btn-gold:hover {
  filter: brightness(1.08);
  box-shadow: 0 6px 28px var(--theme-gold-glow), 0 0 16px var(--theme-gold-glow);
}

.theme-btn-cyan {
  background: linear-gradient(135deg, #5c4a13, #8a6d1c);
  color: #ffffff;
  border: none;
  padding: 8px 22px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: var(--theme-transition);
  box-shadow: 0 4px 18px var(--theme-cyan-glow);
}
.theme-btn-cyan:hover {
  box-shadow: 0 6px 26px var(--theme-cyan-glow);
  filter: brightness(1.08);
}

.theme-btn-outline {
  background: rgba(255, 255, 255, 0.04);
  color: var(--theme-text-secondary);
  border: 1px solid var(--theme-border-mid);
  padding: 7px 18px;
  border-radius: 50px;
  font-family: var(--theme-font);
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--theme-transition);
}
.theme-btn-outline:hover {
  border-color: var(--theme-gold-border);
  color: var(--theme-gold);
  background: var(--theme-gold-dim);
}

/* ── BADGE ── */
.theme-badge-hot {
  background: var(--theme-red);
  color: #fff;
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.theme-badge-new {
  background: linear-gradient(135deg, #d4920c, #ffc928);
  color: var(--theme-text-on-gold);
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 7px;
  border-radius: 4px;
  letter-spacing: 0.04em;
}
.theme-badge-live {
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  color: var(--theme-gold);
  font-size: 0.62rem;
  font-weight: 800;
  padding: 3px 9px;
  border-radius: 50px;
  border: 1px solid var(--theme-gold-border);
  letter-spacing: 0.05em;
}

/* ── SPINNER ── */
.theme-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255, 184, 0, 0.15);
  border-top-color: var(--theme-gold-bright);
  border-radius: 50%;
  animation: theme-spin 0.85s linear infinite;
  flex-shrink: 0;
}
@keyframes theme-spin { to { transform: rotate(360deg); } }

/* ── SCROLLBAR ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.04); }
::-webkit-scrollbar-thumb { background: rgba(255, 184, 0, 0.35); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--theme-gold-bright); }

/* ── UTILITY ── */
.text-gold     { color: var(--theme-gold); }
.text-cyan     { color: var(--theme-cyan-bright); }
.text-dim      { color: var(--theme-text-secondary); }
.text-muted    { color: var(--theme-text-muted); }
.bg-card       { background: var(--theme-bg-card); }
.border-gold   { border-color: var(--theme-gold-border) !important; }
.border-subtle { border-color: var(--theme-border-subtle) !important; }
.glow-gold     { box-shadow: 0 0 18px var(--theme-gold-glow); }
.glow-cyan     { box-shadow: 0 0 16px var(--theme-cyan-glow); }

/* ── TEXT ELEMENT DEFAULTS — light text on dark theme ── */
p   { color: var(--theme-text-secondary); }
li  { color: var(--theme-text-secondary); }
h1, h2, h3, h4, h5, h6 { color: var(--theme-text-primary); }
a:not(.btn):not([class*="text-"]):not([class*="nav-"]):not([class*="cn-"]):not([class*="sp-"]):hover {
  text-decoration: none;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}