/* index.light.css
   Light mode overlay for homepage ONLY.
   Load AFTER index.css.
*/

html[data-theme="light"] {
  /* Core palette */
  --page-bg: #F5F7FB;          /* soft cool gray */
  --surface: #FFFFFF;          /* cards */
  --surface-2: #F1F4FA;        /* subtle panels */
  --text: #111827;             /* near-black */
  --text-2: #4B5563;           /* secondary */
  --muted: #6B7280;            /* muted */
  --border: rgba(17, 24, 39, 0.10);
  --border-strong: rgba(17, 24, 39, 0.16);

  /* Brand accents (BonusRiver-ish but premium) */
  --brand: #0AA6D6;            /* deeper cyan */
  --brand-2: #1E78FF;          /* subtle blue support */

  /* Replace your heavy shadows with soft ones */
  --shadow-soft: 0 12px 30px rgba(17, 24, 39, 0.10);
  --shadow-soft-2: 0 8px 22px rgba(17, 24, 39, 0.08);

  /* Replace gradients so components stop looking "dark-mode" */
  --dark-gradient: linear-gradient(180deg, var(--page-bg), var(--page-bg));
  --card-gradient: linear-gradient(180deg, var(--surface), var(--surface));
  --primary-gradient: linear-gradient(135deg, var(--brand) 0%, #078DB8 50%, #056F95 100%);
  --gold-gradient: linear-gradient(135deg, #0AA6D6 0%, #0CC0F0 100%);

  /* Text tokens */
  --text-primary: var(--text);
  --text-secondary: var(--text-2);
  --text-muted: var(--muted);

  /* Borders + shadows tokens */
  --border-color: var(--border);
  --border-light: var(--border-strong);

  /* Tone down glow shadows */
  --shadow-cyan: 0 14px 34px rgba(10, 166, 214, 0.22);
  --shadow-card: var(--shadow-soft-2);
  --shadow-dark: var(--shadow-soft);
}

/* Page base */
html[data-theme="light"] body {
  background: var(--page-bg) !important;
  color: var(--text) !important;
}

/* Sections spacing + general readability */
html[data-theme="light"] .section {
  padding: 72px 0;
}

html[data-theme="light"] .section-header p,
html[data-theme="light"] .section-description,
html[data-theme="light"] .hero-description,
html[data-theme="light"] .description-text {
  color: var(--text-2) !important;
}

/* HERO */
html[data-theme="light"] .hero {
  background: radial-gradient(900px 500px at 50% 10%, rgba(10,166,214,0.14), transparent 55%);
}

html[data-theme="light"] .hero-banner-img {
  background: linear-gradient(180deg, #FFFFFF, #F6F8FD) !important;
  box-shadow: var(--shadow-soft) !important;
}

/* Make the hero title still pop but not neon */
html[data-theme="light"] .hero-title,
html[data-theme="light"] .section-header h2 {
  background: linear-gradient(135deg, #0AA6D6 0%, #056F95 60%, #034B66 100%) !important;
  -webkit-text-fill-color: transparent;
}

/* SEARCH BAR */
html[data-theme="light"] .search-container {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft-2) !important;
}

html[data-theme="light"] .search-input {
  color: var(--text) !important;
}

html[data-theme="light"] .search-input::placeholder {
  color: rgba(17,24,39,0.45) !important;
}

html[data-theme="light"] .search-btn {
  background: linear-gradient(135deg, #0AA6D6, #056F95) !important;
}

/* TABS */
html[data-theme="light"] .tab-btn {
  background: var(--surface) !important;
  color: var(--text-2) !important;
  border: 1px solid var(--border) !important;
  box-shadow: none !important;
}

html[data-theme="light"] .tab-btn.active,
html[data-theme="light"] .tab-btn:hover {
  background: rgba(10,166,214,0.12) !important;
  border-color: rgba(10,166,214,0.35) !important;
  color: #055A78 !important;
}

/* CASINO CARDS — this is the big upgrade */
html[data-theme="light"] .casino-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft-2) !important;
}

html[data-theme="light"] .casino-card:hover {
  transform: translateY(-10px) !important;
  border-color: rgba(10,166,214,0.35) !important;
  box-shadow: var(--shadow-cyan) !important;
}

html[data-theme="light"] .casino-name {
  color: #055A78 !important;
}

html[data-theme="light"] .rating-value {
  color: var(--text-2) !important;
}

/* Stat tiles inside casino card */
html[data-theme="light"] .stat-item {
  background: #F3F6FC !important;
  border: 1px solid rgba(17,24,39,0.08) !important;
}

html[data-theme="light"] .casino-card:hover .stat-item {
  background: rgba(10,166,214,0.08) !important;
  border-color: rgba(10,166,214,0.18) !important;
}

html[data-theme="light"] .stat-label {
  color: rgba(17,24,39,0.60) !important;
}

html[data-theme="light"] .stat-value {
  color: var(--text) !important;
}

/* Logo tile: make it crisp on light mode */
html[data-theme="light"] .casino-logo {
  border: 1px solid rgba(17,24,39,0.10) !important;
  background: #FFFFFF !important;
  box-shadow: 0 10px 20px rgba(17,24,39,0.10) !important;
}

/* CTA button: rich gold, not neon */
html[data-theme="light"] .claim-bonus-btn {
  background: #055A78 !important;
  color: #fff !important;
  box-shadow: none !important;
}

html[data-theme="light"] .claim-bonus-btn:hover {
  background: #0AA6D6 !important;
  box-shadow: 0 6px 16px rgba(10, 166, 214, 0.3) !important;
}

/* Loading + error visuals (make readable on light) */
html[data-theme="light"] .loading {
  color: var(--text-2) !important;
}

html[data-theme="light"] .error-message {
  background: rgba(220, 38, 38, 0.06) !important;
  border-color: rgba(220, 38, 38, 0.35) !important;
}

/* Footer stays dark for now unless you want the full "authority portal" style */

/* =========================
   LIGHT MODE PATCH #1 (UPDATED)
   Dark BLUE premium header
   ========================= */

html[data-theme="light"] .header {
  background: linear-gradient(
    180deg,
    rgba(10, 32, 45, 0.94) 0%,
    rgba(8, 24, 34, 0.97) 100%
  ) !important;

  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(18px);
}

html[data-theme="light"] .header.scrolled {
  background: linear-gradient(
    180deg,
    rgba(8, 24, 34, 0.97) 0%,
    rgba(6, 18, 26, 0.99) 100%
  ) !important;

  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35) !important;
}

/* Nav links readable */
html[data-theme="light"] .nav-link {
  color: rgba(255, 255, 255, 0.72) !important;
}

html[data-theme="light"] .nav-link:hover,
html[data-theme="light"] .nav-link.active {
  color: #ffffff !important;
}

/* Underline accent */
html[data-theme="light"] .nav-link::before {
  background: linear-gradient(90deg, #0AA6D6, #056F95) !important;
}

/* Header buttons */
html[data-theme="light"] .login-btn {
  background: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
}

html[data-theme="light"] .signup-btn {
  background: linear-gradient(135deg, #0AA6D6 0%, #056F95 100%) !important;
  box-shadow: 0 14px 34px rgba(10, 166, 214, 0.30) !important;
}

/* =========================
   LIGHT MODE PATCH #2
   Fix gradient text rendering (no big blocks)
   ========================= */

html[data-theme="light"] .hero-title,
html[data-theme="light"] .section-header h2 {
  background: linear-gradient(135deg, #0AA6D6 0%, #056F95 60%, #034B66 100%) !important;

  /* force background to clip ONLY to text */
  -webkit-background-clip: text !important;
  background-clip: text !important;

  /* force text transparent so the background shows through */
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;

  /* prevent background painting like a block */
  background-repeat: no-repeat !important;
}

/* If your hero title is acting weirdly wide, this keeps it tight */
html[data-theme="light"] .hero-title {
  display: inline-block !important;
}

/* =========================
   LIGHT MODE PATCH #3
   Footer – dark & premium
   ========================= */

html[data-theme="light"] footer,
html[data-theme="light"] .footer {
  background: linear-gradient(
    180deg,
    rgba(18, 28, 36, 0.96) 0%,
    rgba(14, 22, 28, 0.98) 100%
  ) !important;

  color: rgba(255, 255, 255, 0.78) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.10) !important;
}

/* Footer links */
html[data-theme="light"] footer a,
html[data-theme="light"] .footer a {
  color: rgba(255, 255, 255, 0.70) !important;
}

html[data-theme="light"] footer a:hover,
html[data-theme="light"] .footer a:hover {
  color: #0AA6D6 !important;
}

/* Footer headings */
html[data-theme="light"] footer h3,
html[data-theme="light"] footer h4 {
  color: #ffffff !important;
}

/* =========================
   NEXT STEP
   Hero CTA polish (premium)
   ========================= */

html[data-theme="light"] .compare-btn {
  background: linear-gradient(135deg, #0AA6D6 0%, #056F95 100%) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  box-shadow: 0 14px 34px rgba(10, 166, 214, 0.30) !important;
}

html[data-theme="light"] .compare-btn:hover {
  transform: translateY(-3px) scale(1.04) !important;
  box-shadow: 0 18px 44px rgba(10, 166, 214, 0.40) !important;
}

/* =========================
   NEXT STEP
   Slots section – light mode alignment
   ========================= */

html[data-theme="light"] .slot-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft-2) !important;
}

html[data-theme="light"] .slot-content,
html[data-theme="light"] .video-info,
html[data-theme="light"] .post-card {
  background: transparent !important;
}

html[data-theme="light"] .slot-name {
  background: linear-gradient(135deg, #0AA6D6 0%, #056F95 80%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

html[data-theme="light"] .slot-provider {
  color: #055A78 !important;
}

html[data-theme="light"] .slot-image {
  filter: none !important;
}

html[data-theme="light"] .slot-overlay {
  background: linear-gradient(135deg, rgba(10,166,214,0.14) 0%, rgba(17,24,39,0.00) 60%) !important;
  backdrop-filter: blur(6px) !important;
}

html[data-theme="light"] .go-to-casino-btn {
  background: #055A78 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(5, 90, 120, 0.18) !important;
}

html[data-theme="light"] .casino-description .description-text {
  color: #374151 !important; /* darker than before, still soft */
}

/* ── Light mode: Homepage new sections ──────────────── */
html[data-theme="light"] .hp-prov-card,
html[data-theme="light"] .hp-lic-card,
html[data-theme="light"] .hp-blog-card {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-soft-2) !important;
}

html[data-theme="light"] .hp-prov-card:hover,
html[data-theme="light"] .hp-lic-card:hover,
html[data-theme="light"] .hp-blog-card:hover {
  border-color: rgba(10,166,214,0.35) !important;
  box-shadow: var(--shadow-cyan) !important;
}

html[data-theme="light"] .hp-prov-name,
html[data-theme="light"] .hp-lic-name,
html[data-theme="light"] .hp-blog-title {
  color: #111827 !important;
}

html[data-theme="light"] .hp-prov-meta,
html[data-theme="light"] .hp-lic-meta,
html[data-theme="light"] .hp-blog-meta {
  color: #4B5563 !important;
}

html[data-theme="light"] .hp-prov-logo,
html[data-theme="light"] .hp-lic-logo {
  background: #fff !important;
  border-color: rgba(17,24,39,0.10) !important;
}

html[data-theme="light"] .hp-prov-score {
  background: rgba(10,166,214,0.10) !important;
  color: #055A78 !important;
}

html[data-theme="light"] .hp-blog-cat {
  background: rgba(10,166,214,0.10) !important;
  color: #055A78 !important;
}