/* ============================================================
   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 ──────────────────────────────────── */
.w-full.bg-gradient-to-r.from-blue-600.to-indigo-600,
.w-full.bg-gradient-to-r.from-blue-600.to-indigo-600.hover\:from-blue-700,
.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;
  color: #060608 !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 20px rgba(245,158,11,0.30) !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; }