/* ============================================================
   THANI ORUVAN MATHS — DARK THEME OVERRIDE
   Targets exact Tailwind class names found in index-BEVEWqMr.js
   Load AFTER index-B9pAjwjY.css in index.html
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');

/* ── 1. BASE ────────────────────────────────────────────────── */
html, body, #root {
  background-color: #08080f !important;
  color: #f1f5f9 !important;
}
body { font-family: 'Outfit', 'Poppins', sans-serif !important; }

/* ── 2. TAILWIND UTILITY CLASS RESETS ───────────────────────── */

.bg-white                { background-color: #111120 !important; }
.bg-gray-50              { background-color: #0d0d1a !important; }
.bg-gray-100             { background-color: #16162a !important; }
.bg-gray-200             { background-color: #1e1e30 !important; }
.bg-\[\#ffffff\]         { background-color: #111120 !important; }
.bg-\[\#eef5f4\]         { background-color: #0d0d1a !important; }
.bg-yellow-50            { background-color: rgba(245,158,11,0.08) !important; }
.bg-blue-50              { background-color: rgba(59,130,246,0.08)  !important; }

/* Hero gradient from-blue-50 */
.from-blue-50   { --tw-gradient-from: #0b0c18 !important; }
.via-indigo-50  { --tw-gradient-via:  #0c0d1e !important; }
.to-purple-50   { --tw-gradient-to:   #0d0b1a !important; }
.to-indigo-100  { --tw-gradient-to:   #0c0d1e !important; }

/* Text */
.text-gray-900  { color: #f1f5f9 !important; }
.text-gray-800  { color: #f1f5f9 !important; }
.text-gray-700  { color: #cbd5e1 !important; }
.text-gray-600  { color: #94a3b8 !important; }
.text-gray-500  { color: #64748b !important; }
.text-gray-400  { color: #475569 !important; }
.text-black     { color: #f1f5f9 !important; }
.text-\[\#1f2a44\] { color: #f1f5f9 !important; }

/* Borders */
.border           { border-color: rgba(255,255,255,0.08) !important; }
.border-t         { border-color: rgba(255,255,255,0.08) !important; }
.border-b         { border-color: rgba(255,255,255,0.08) !important; }
.border-gray-200  { border-color: rgba(255,255,255,0.07) !important; }
.border-gray-300  { border-color: rgba(255,255,255,0.09) !important; }
.border-gray-700  { border-color: rgba(255,255,255,0.10) !important; }
.border-yellow-200{ border-color: rgba(245,158,11,0.20)  !important; }
.border-blue-200  { border-color: rgba(59,130,246,0.20)  !important; }
.border-black\/10 { border-color: rgba(255,255,255,0.06) !important; }

/* Hover */
.hover\:bg-gray-100:hover { background-color: rgba(255,255,255,0.05) !important; }
.hover\:bg-gray-200:hover { background-color: rgba(255,255,255,0.08) !important; }
.hover\:bg-red-50:hover   { background-color: rgba(239,68,68,0.08)   !important; }

/* Shadows */
.shadow    { box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important; }
.shadow-lg { box-shadow: 0 8px 30px rgba(0,0,0,0.55) !important; }
.shadow-xl { box-shadow: 0 12px 40px rgba(0,0,0,0.6) !important; }
.shadow-2xl{ box-shadow: 0 24px 60px rgba(0,0,0,0.7) !important; }
.shadow-\[0_10px_20px_rgba\(0\,0\,0\,0\.25\)\] {
  box-shadow: 0 10px 40px rgba(0,0,0,0.7) !important;
}

/* ── 3. STICKY NAVBAR ───────────────────────────────────────── */
nav.sticky,
header.sticky,
.sticky.top-0.z-50 {
  background-color: rgba(8,8,15,0.93) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
}

/* Brand text inside nav */
.font-semibold.text-lg.text-blue-600 {
  color: #f59e0b !important;
}

/* Avatar dropdown menu */
.absolute.right-0.mt-3.w-56 {
  background-color: #16162a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 20px 50px rgba(0,0,0,0.7) !important;
}

/* ── 4. LOGIN / AUTH MODAL ──────────────────────────────────── */
/* Modal card */
.relative.bg-white.rounded-2xl.w-full.max-w-md {
  background: #13132a !important;
  border: 1px solid rgba(255,255,255,0.09) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.04),
    0 40px 90px rgba(0,0,0,0.85),
    0 0 80px rgba(59,130,246,0.07) !important;
}

/* Modal backdrop overlay */
.absolute.inset-0.bg-black\/60 {
  background: rgba(0,0,0,0.75) !important;
}

/* Title + subtitle */
.text-center.text-2xl.font-bold.text-gray-800 {
  color: #f1f5f9 !important;
  font-family: 'Outfit', sans-serif !important;
}
.text-center.text-sm.text-gray-500 {
  color: #64748b !important;
}

/* Labels */
.block.text-sm.font-medium.text-gray-700 {
  color: #94a3b8 !important;
}

/* Input fields */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"] {
  background-color: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #f1f5f9 !important;
}
input:focus {
  background-color: rgba(255,255,255,0.06) !important;
  border-color: rgba(59,130,246,0.50) !important;
  box-shadow: 0 0 0 3px rgba(59,130,246,0.12) !important;
  outline: none !important;
}
input::placeholder { color: #2d3748 !important; }

/* TOS row */
.flex.items-start.gap-3.mt-5.p-3.bg-gray-50 {
  background-color: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  border-radius: 10px !important;
}

/* Login button → gold */
.w-full.mt-6.bg-blue-600 {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #060608 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(245,158,11,0.30) !important;
  border: none !important;
  font-family: 'Outfit', sans-serif !important;
}
.w-full.mt-6.bg-blue-600:hover {
  box-shadow: 0 6px 28px rgba(245,158,11,0.45) !important;
}

/* Switch mode */
.text-center.mt-6.text-sm.text-gray-600 { color: #64748b !important; }
.text-blue-600.font-semibold { color: #60a5fa !important; }

/* ── 5. HERO SECTION ────────────────────────────────────────── */
/* the "from-blue-50 via-indigo-50 to-purple-50" container */
[class*="from-blue-50"] {
  background: linear-gradient(135deg, #08080f, #0d0e1f, #0e0c1a) !important;
  position: relative !important;
}
[class*="from-blue-50"]::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(59,130,246,0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 85% 80%, rgba(245,158,11,0.06) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
[class*="from-blue-50"] > * { position: relative; z-index: 1; }

/* ── 6. COURSE CARDS ────────────────────────────────────────── */
/* desktop card */
.bg-white.rounded-2xl.shadow-lg,
.bg-white.rounded-2xl.shadow-xl,
.bg-white.rounded-2xl.shadow-2xl {
  background-color: #111120 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}
.bg-white.rounded-2xl.shadow-lg:hover,
.bg-white.rounded-2xl.shadow-xl:hover {
  border-color: rgba(245,158,11,0.18) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,0.7) !important;
}

/* mobile card body */
.bg-white.py-4.px-4 { background-color: #111120 !important; }

/* card text */
.text-xl.font-semibold.text-gray-900 { color: #f1f5f9 !important; }

/* image placeholder */
.bg-gray-100.overflow-hidden,
.aspect-video.bg-gray-100,
.aspect-\[16\/9\].bg-gray-100 { background-color: #1a1a2e !important; }

/* ── 7. CATEGORY SECTIONS ───────────────────────────────────── */
.bg-white.py-8,
.bg-white.py-10,
.bg-white.py-12,
.bg-white.py-14,
.bg-white.py-16 { background-color: #08080f !important; }

/* category icon card */
.bg-white.rounded-2xl.shadow-xl.cursor-pointer {
  background-color: #111120 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}
.h-40.w-full.bg-gray-100,
.h-40.flex.items-center.justify-center.bg-gray-50 {
  background-color: #0d0d1a !important;
}

/* ── 8. MOBILE / DESKTOP EXAM PAGES ────────────────────────── */
.min-h-screen.bg-\[\#ffffff\],
.min-h-screen.bg-white { background-color: #08080f !important; }

/* inner mobile card */
.w-full.max-w-\[380px\].bg-\[\#ffffff\] {
  background-color: #111120 !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,0.65) !important;
}

/* back buttons */
.mb-8.px-5.py-2.bg-white {
  background-color: #16162a !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  color: #cbd5e1 !important;
}

/* ── 9. MY COURSES PAGE ─────────────────────────────────────── */
.min-h-screen.bg-gradient-to-br {
  background: #08080f !important;
}

/* Hero banner */
.bg-gradient-to-r.from-blue-600.via-blue-700.to-indigo-700.rounded-3xl {
  background: linear-gradient(135deg, #0f172a, #1e1b4b) !important;
  border: 1px solid rgba(99,102,241,0.18) !important;
}

/* Paid course cards */
.bg-white.rounded-2xl.p-5,
.bg-white.rounded-2xl.p-4 {
  background-color: #111120 !important;
  border: 1px solid rgba(255,255,255,0.07) !important;
}

/* ── 10. CTA / BUY BUTTONS ──────────────────────────────────── */

/* "Go To Course" (green) + "Renew Course" (orange) → gold */
.block.w-full.bg-gradient-to-r.from-green-600.to-emerald-600,
.w-full.bg-green-600,
.w-full.bg-orange-500 {
  background: linear-gradient(135deg, #f59e0b, #d97706) !important;
  background-image: linear-gradient(135deg, #f59e0b, #d97706) !important;
  color: #060608 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(245,158,11,0.30) !important;
}

/* ── BUY NOW BUTTON → #2596be ─────────────────────────────────
   Exact class: w-full bg-gradient-to-r from-blue-600 to-indigo-600
   Used on /new-courses/:slug page for purchasing                */
.w-full.bg-gradient-to-r.from-blue-600.to-indigo-600 {
  background: #2596be !important;
  background-image: none !important;
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(37,150,190,0.40) !important;
}
.w-full.bg-gradient-to-r.from-blue-600.to-indigo-600:hover,
.w-full.bg-gradient-to-r.from-blue-600.to-indigo-600.hover\:from-blue-700 {
  background: #1d7fa3 !important;
  background-image: none !important;
  box-shadow: 0 6px 28px rgba(37,150,190,0.55) !important;
}
/* Also the py-3 variant used in some modals */
.w-full.bg-gradient-to-r.from-blue-600.to-indigo-600.hover\:from-blue-700.hover\:to-indigo-700 {
  background: #2596be !important;
  background-image: none !important;
  color: #ffffff !important;
}

/* ── 11. ALERT / INFO BOXES ─────────────────────────────────── */
.bg-yellow-50.border.border-yellow-200 {
  background-color: rgba(245,158,11,0.07) !important;
  border-color: rgba(245,158,11,0.20) !important;
}
.bg-blue-50.rounded-lg.border.border-blue-200 {
  background-color: rgba(59,130,246,0.07) !important;
  border-color: rgba(59,130,246,0.20) !important;
}
.bg-white.bg-opacity-20 {
  background-color: rgba(255,255,255,0.08) !important;
}

/* ── 12. LOADING STATES ─────────────────────────────────────── */
.min-h-screen.flex.items-center.justify-center.bg-gray-50,
.min-h-screen.flex.items-center.justify-center {
  background-color: #08080f !important;
}
.min-h-screen.bg-gray-50 { background-color: #08080f !important; }
.min-h-screen.bg-gradient-to-br.from-blue-50 { background: #08080f !important; }

/* ── 13. FOOTER (already dark — polish) ─────────────────────── */
.from-gray-900.via-gray-800.to-gray-900 {
  background: linear-gradient(135deg, #040407, #08080f, #040407) !important;
  border-top: 1px solid rgba(255,255,255,0.07) !important;
}
.border-t.border-gray-700 { border-color: rgba(255,255,255,0.08) !important; }

/* ── 14. font-lightbold (app-specific) ──────────────────────── */
.font-lightbold {
  font-family: 'Outfit', sans-serif !important;
  color: #f1f5f9 !important;
}

/* ── 15. SCROLLBAR ──────────────────────────────────────────── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #0a0a14; }
::-webkit-scrollbar-thumb { background: #1e293b; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #334155; }

/* ── 16. TEXT SELECTION ─────────────────────────────────────── */
::selection { background: rgba(245,158,11,0.25); color: #f1f5f9; }
/* ══════════════════════════════════════════════════════════════
   LIGHT MODE — fix invisible text
   ══════════════════════════════════════════════════════════════ */

/* text-black & lightbold visible in light mode */
html[data-theme="light"] .text-black,
html[data-theme="light"] .font-lightbold,
html[data-theme="light"] .text-\[\#1f2a44\],
html[data-theme="light"] .text-gray-800,
html[data-theme="light"] .text-gray-900 { color: #0f172a !important; }
html[data-theme="light"] .text-gray-700 { color: #334155 !important; }
html[data-theme="light"] .text-gray-600 { color: #475569 !important; }
html[data-theme="light"] .text-gray-500 { color: #64748b !important; }
html[data-theme="light"] .text-gray-400 { color: #94a3b8 !important; }

/* backgrounds */
html[data-theme="light"] body,
html[data-theme="light"] #root             { background-color: #f8fafc !important; color: #0f172a !important; }
html[data-theme="light"] .bg-white         { background-color: #ffffff !important; }
html[data-theme="light"] .bg-gray-50       { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-gray-100      { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-\[\#ffffff\]  { background-color: #ffffff !important; }
html[data-theme="light"] .min-h-screen.bg-\[\#ffffff\] { background-color: #f8fafc !important; }
html[data-theme="light"] .hidden.md\:block.min-h-screen.bg-\[\#ffffff\] { background-color: #f8fafc !important; }
html[data-theme="light"] .md\:hidden.min-h-screen.bg-\[\#ffffff\] { background-color: #f8fafc !important; }
html[data-theme="light"] .w-full.max-w-\[380px\].bg-\[\#ffffff\] { background-color: #ffffff !important; box-shadow: 0 8px 30px rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .bg-white.py-8,
html[data-theme="light"] .bg-white.py-10,
html[data-theme="light"] .bg-white.py-12,
html[data-theme="light"] .bg-white.py-14,
html[data-theme="light"] .bg-white.py-16   { background-color: #f8fafc !important; }
html[data-theme="light"] .bg-white.py-4.px-4 { background-color: #ffffff !important; }
html[data-theme="light"] .bg-white.rounded-2xl.shadow-lg,
html[data-theme="light"] .bg-white.rounded-2xl.shadow-xl { background-color: #ffffff !important; border: 1px solid rgba(0,0,0,0.07) !important; }
html[data-theme="light"] .bg-white.rounded-2xl.p-5,
html[data-theme="light"] .bg-white.rounded-2xl.p-4 { background-color: #ffffff !important; border: 1px solid rgba(0,0,0,0.07) !important; }
html[data-theme="light"] .bg-white.rounded-2xl.shadow-xl.cursor-pointer { background-color: #ffffff !important; border: 1px solid rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .h-40.w-full.bg-gray-100,
html[data-theme="light"] .h-40.flex.items-center.justify-content.bg-gray-50 { background-color: #f1f5f9 !important; }
html[data-theme="light"] .bg-white.px-6.py-4.rounded-2xl { background-color: #ffffff !important; color: #0f172a !important; }
html[data-theme="light"] .mb-8.px-5.py-2.bg-white { background-color: #ffffff !important; border: 1px solid rgba(0,0,0,0.1) !important; color: #374151 !important; }

/* page heading text in exam/subcategory pages */
html[data-theme="light"] .text-3xl.text-center.mb-10,
html[data-theme="light"] .text-center.text-3xl.font-lightbold,
html[data-theme="light"] .text-2xl.font-lightbold.text-center,
html[data-theme="light"] .text-3xl.font-lightbold.text-center { color: #0f172a !important; }

/* navbar */
html[data-theme="light"] .sticky.top-0.z-50,
html[data-theme="light"] nav.sticky { background-color: rgba(248,250,252,0.95) !important; border-bottom: 1px solid rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .font-semibold.text-lg.text-blue-600 { color: #2563eb !important; }
html[data-theme="light"] .absolute.right-0.mt-3.w-56 { background-color: #ffffff !important; border: 1px solid rgba(0,0,0,0.08) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .md\:hidden.border-t { background-color: #ffffff !important; }
html[data-theme="light"] #tm-theme-btn { background: rgba(0,0,0,0.05) !important; border-color: rgba(0,0,0,0.12) !important; color: #0f172a !important; }

/* login modal */
html[data-theme="light"] .relative.bg-white.rounded-2xl.w-full.max-w-md { background: #ffffff !important; border: 1px solid rgba(0,0,0,0.1) !important; box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important; }
html[data-theme="light"] .text-center.text-2xl.font-bold.text-gray-800 { color: #0f172a !important; }
html[data-theme="light"] .block.text-sm.font-medium.text-gray-700 { color: #374151 !important; }
html[data-theme="light"] input[type="text"],
html[data-theme="light"] input[type="email"],
html[data-theme="light"] input[type="password"],
html[data-theme="light"] input[type="tel"],
html[data-theme="light"] input[type="number"] { background-color: #f8fafc !important; border-color: #e2e8f0 !important; color: #0f172a !important; }
html[data-theme="light"] input::placeholder { color: #9ca3af !important; }

/* hero section light */
html[data-theme="light"] [class*="from-blue-50"] { background: linear-gradient(135deg,#f0f9ff,#eff6ff,#f5f3ff) !important; }
html[data-theme="light"] [class*="from-blue-50"]::before { display: none; }

/* my courses light */
html[data-theme="light"] .min-h-screen.bg-gradient-to-br { background: #f0f9ff !important; }

/* borders */
html[data-theme="light"] .border     { border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .border-t   { border-color: rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .border-b   { border-color: rgba(0,0,0,0.08) !important; }

/* shadows */
html[data-theme="light"] .shadow    { box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important; }
html[data-theme="light"] .shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,0.10) !important; }
html[data-theme="light"] .shadow-xl { box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important; }
html[data-theme="light"] .shadow-2xl{ box-shadow: 0 12px 40px rgba(0,0,0,0.15) !important; }

/* hover states in light mode */
html[data-theme="light"] .hover\:bg-gray-100:hover { background-color: #f1f5f9 !important; }
html[data-theme="light"] .hover\:bg-gray-200:hover { background-color: #e2e8f0 !important; }
html[data-theme="light"] .hover\:bg-red-50:hover   { background-color: #fef2f2 !important; }

/* scrollbar in light */
html[data-theme="light"] ::-webkit-scrollbar-track { background: #f1f5f9; }
html[data-theme="light"] ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
html[data-theme="light"] ::selection { background: rgba(37,150,190,0.25); color: #0f172a; }

/* ══════════════════════════════════════════════════════════════
   MOBILE LIGHT MODE — fix black text on black container
   The mobile card uses bg-white (overridden to #111120 globally)
   These rules ensure it's white in light mode
   ══════════════════════════════════════════════════════════════ */

/* Mobile course card wrapper */
html[data-theme="light"] .md\:hidden.relative.bg-white.rounded-2xl {
  background-color: #ffffff !important;
  border-color: rgba(0,0,0,0.08) !important;
}

/* Mobile card text area */
html[data-theme="light"] .bg-white.py-4.px-4 {
  background-color: #ffffff !important;
}

/* All bg-white elements in light mode — force white */
html[data-theme="light"] [class*="bg-white"] {
  background-color: #ffffff !important;
}

/* Mobile card titles */
html[data-theme="light"] .text-center.text-\[16px\].font-semibold.text-black,
html[data-theme="light"] .text-center.text-\[18px\].font-lightbold.text-black,
html[data-theme="light"] .font-lightbold.text-xl.text-black,
html[data-theme="light"] .text-2xl.font-lightbold.text-center.mb-10.text-black {
  color: #0f172a !important;
}

/* Image placeholder bg in light mode */
html[data-theme="light"] .bg-gray-100,
html[data-theme="light"] .bg-gray-50 {
  background-color: #f1f5f9 !important;
}
html[data-theme="light"] .bg-gray-200 { background-color: #e2e8f0 !important; }

/* Mobile exam/category inner card */
html[data-theme="light"] .w-full.max-w-\[380px\] {
  background-color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important;
}

/* Section heading pages */
html[data-theme="light"] .max-w-7xl.mx-auto.px-6.py-10,
html[data-theme="light"] .max-w-7xl.mx-auto.px-4 {
  color: #0f172a !important;
}
html[data-theme="light"] h1, html[data-theme="light"] h2, html[data-theme="light"] h3 {
  color: #0f172a !important;
}