/* ============================================================
   ReignBet – VN Top Betting Theme 2026/27
   Color system preferred by users of top "trang cá cược bóng đá"
   (BK8 / M88 / W88 / 8xBet / Fun88 style)
   ============================================================
   ROLE MAP
   --------
   Deep bg        #070B14   page canvas
   Card           #0F1623   content blocks
   Elevated       #161E2E   inputs, thead, secondary surfaces
   Text primary   #F1F5F9   headings, strong body
   Text secondary #94A3B8   nav default, captions
   Text muted     #64748B   meta, timestamps
   Gold accent    #F5B800   CTA, bonus numbers, VIP, stars
   Sky            #38BDF8   links, active nav, tools
   Success green  #22C55E   trust, wins, payouts, checkmarks
   Danger         #F87171   warnings, scam alerts
   ============================================================ */

:root {
  --bg-deep: #070B14;
  --bg-card: rgba(255, 255, 255, 0.04);
  --bg-card-solid: #0F1623;
  --bg-elevated: #161E2E;
  --border-subtle: rgba(255, 255, 255, 0.07);
  --border-soft: rgba(148, 163, 184, 0.18);
  --text-primary: #F1F5F9;
  --text-secondary: #94A3B8;
  --text-muted: #64748B;
  --accent: #F5B800;
  --accent-hover: #E5A500;
  --accent-soft: rgba(245, 184, 0, 0.14);
  --sky: #38BDF8;
  --sky-soft: rgba(56, 189, 248, 0.12);
  --success: #22C55E;
  --success-soft: rgba(34, 197, 94, 0.14);
  --danger: #F87171;
  --danger-soft: rgba(248, 113, 113, 0.1);
  --radius: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;
}

/* ---------- Base ---------- */
body {
  background: var(--bg-deep) !important;
  color: var(--text-primary) !important;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
}

/* ---------- Header ---------- */
header,
.site-header {
  background: rgba(7, 11, 20, 0.94) !important;
  border-color: var(--border-subtle) !important;
  backdrop-filter: blur(12px);
}

/* ---------- Cards ---------- */
.card-light,
.card-light-featured,
.bg-white {
  background: var(--bg-card-solid) !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-primary);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}

.card-light-featured {
  background: linear-gradient(145deg, #161E2E 0%, #0F1623 100%) !important;
  border: 1px solid rgba(245, 184, 0, 0.28) !important;
  box-shadow: 0 0 0 1px rgba(245, 184, 0, 0.1), 0 8px 32px rgba(0, 0, 0, 0.38);
}

/* ---------- Text hierarchy ---------- */
h1, h2, h3, h4,
.font-black,
.font-extrabold {
  color: #F1F5F9 !important;
}

.text-slate-900,
.text-slate-800,
.text-slate-700 {
  color: var(--text-primary) !important;
}

.text-slate-600,
.text-slate-500 {
  color: var(--text-secondary) !important;
}

.text-slate-400,
.text-slate-300 {
  color: var(--text-muted) !important;
}

.text-white {
  color: #FFFFFF !important;
}

/* ---------- Borders ---------- */
.border-slate-100,
.border-slate-200,
.border-slate-300,
.border {
  border-color: var(--border-subtle) !important;
}

/* ---------- Muted / elevated surfaces ---------- */
.bg-slate-50,
.bg-slate-50\/50,
.bg-slate-50\/80,
.bg-slate-100 {
  background: var(--bg-elevated) !important;
  border-color: var(--border-subtle) !important;
}

/* ---------- GOLD – primary CTA / bonus / VIP ---------- */
.gold-btn {
  background: linear-gradient(135deg, #F5B800 0%, #E5A500 100%) !important;
  color: #070B14 !important;
  font-weight: 800 !important;
  border: none !important;
  box-shadow: 0 2px 14px rgba(245, 184, 0, 0.32) !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.gold-btn:hover {
  background: linear-gradient(135deg, #FFD54F 0%, #F5B800 100%) !important;
  box-shadow: 0 4px 18px rgba(245, 184, 0, 0.42) !important;
  transform: translateY(-1px);
}

.bg-amber-50,
.bg-amber-100 {
  background: var(--accent-soft) !important;
  color: var(--accent) !important;
  border-color: rgba(245, 184, 0, 0.28) !important;
}

.bg-amber-500,
.bg-amber-600 {
  background: linear-gradient(135deg, #F5B800 0%, #E5A500 100%) !important;
  color: #070B14 !important;
  border: none !important;
}

.bg-amber-500:hover,
.hover\:bg-amber-600:hover {
  background: linear-gradient(135deg, #FFD54F 0%, #F5B800 100%) !important;
}

.text-amber-400,
.text-amber-500,
.text-amber-600,
.text-amber-700,
.text-amber-800 {
  color: var(--accent) !important;
}

.from-amber-500 {
  --tw-gradient-from: #F5B800 !important;
}

.to-yellow-500 {
  --tw-gradient-to: #FFD54F !important;
}

/* ---------- SKY – links / active / tools ---------- */
.bg-sky-50,
.bg-sky-100 {
  background: var(--sky-soft) !important;
  color: var(--sky) !important;
  border-color: rgba(56, 189, 248, 0.2) !important;
}

.bg-sky-600,
.bg-sky-700 {
  background: #0284C7 !important;
  color: #FFFFFF !important;
}

.text-sky-500,
.text-sky-600,
.text-sky-700,
.text-sky-800 {
  color: var(--sky) !important;
}

.border-sky-100,
.border-sky-200 {
  border-color: rgba(56, 189, 248, 0.25) !important;
}

a:hover {
  color: var(--sky);
}

/* Filter pills */
.filter-btn.active,
.filter-btn.bg-sky-600 {
  background: rgba(56, 189, 248, 0.22) !important;
  color: var(--sky) !important;
  border-color: rgba(56, 189, 248, 0.4) !important;
}

/* ---------- SUCCESS / GREEN – trust / wins / payouts ---------- */
.bg-emerald-50,
.bg-emerald-100 {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: rgba(34, 197, 94, 0.25) !important;
}

.text-emerald-500,
.text-emerald-600,
.text-emerald-700,
.text-emerald-800 {
  color: var(--success) !important;
}

.border-emerald-200 {
  border-color: rgba(34, 197, 94, 0.3) !important;
}

/* ---------- DANGER / RED – warnings ---------- */
.bg-red-50,
.bg-red-100 {
  background: var(--danger-soft) !important;
  border-color: rgba(248, 113, 113, 0.25) !important;
}

.text-red-500,
.text-red-600,
.text-red-700,
.text-red-800 {
  color: #FCA5A5 !important;
}

/* ---------- Tables ---------- */
table thead {
  background: var(--bg-elevated) !important;
  color: var(--text-secondary) !important;
}

table tbody tr:hover {
  background: rgba(255, 255, 255, 0.03) !important;
}

/* ---------- Forms ---------- */
input,
select,
textarea {
  background: var(--bg-elevated) !important;
  border-color: var(--border-soft) !important;
  color: var(--text-primary) !important;
}

input::placeholder {
  color: var(--text-muted) !important;
}

/* ---------- Mobile drawer ---------- */
#mobile-drawer {
  background: var(--bg-card-solid) !important;
  border-color: var(--border-subtle) !important;
}

/* ---------- Sticky promo ---------- */
#sticky-promo {
  background: #0F1623 !important;
  border: 1px solid var(--border-subtle) !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
}

/* ---------- Authority badge ---------- */
.badge-authority {
  background: rgba(148, 163, 184, 0.1);
  color: #94A3B8;
  border: 1px solid rgba(148, 163, 184, 0.2);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 6px;
}

/* ---------- Shadows ---------- */
.shadow-sm,
.shadow-md {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22) !important;
}

/* ---------- Footer ---------- */
footer {
  background: #05080F !important;
  border-color: var(--border-subtle) !important;
  color: var(--text-muted) !important;
}

/* ---------- Hardcoded header bg overrides ---------- */
[class*="bg-[#0B0F19]"] {
  background-color: rgba(7, 11, 20, 0.95) !important;
}

/* ---------- Hero panel (was ugly white island) ---------- */
.hero-panel {
  background: linear-gradient(160deg, #121A2B 0%, #0C1220 50%, #0A101C 100%) !important;
  border-color: rgba(56, 189, 248, 0.15) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.hero-title-gradient {
  background: linear-gradient(90deg, #38BDF8 0%, #F5B800 50%, #22C55E 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

/* Kill leftover light gradient utilities on dark theme */
.from-sky-50\/80,
.from-sky-50,
.via-white,
.to-slate-50 {
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: transparent !important;
}

/* Soft badge text on dark soft backgrounds */
.bg-sky-100.text-sky-800,
.bg-emerald-100.text-emerald-800,
.bg-amber-100.text-amber-800 {
  color: inherit;
}
.bg-sky-100 { color: #7DD3FC !important; }
.bg-emerald-100 { color: #6EE7B7 !important; }
.bg-amber-100 { color: #FCD34D !important; }

/* ---------- Blog cards ---------- */
.blog-card {
  background: var(--bg-card-solid) !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
}
.blog-card:hover {
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
  transform: translateY(-2px);
}
.prose-blog h2 {
  color: #F1F5F9 !important;
}
.prose-blog strong {
  color: #E2E8F0;
}
.prose-blog a {
  color: var(--sky);
}
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}