/* ════════════════════════════════════════════════════════════
   HOME VIP THEME — home.php specific overrides
   Dark Forest Green #0D2818 system to match index.php
   ════════════════════════════════════════════════════════════ */

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

/* ── Reset & Body ── */
*{font-family:'Inter',sans-serif!important;box-sizing:border-box!important}
h1,h2,h3,h4,h5,.nav-logo span,.vip-nav-cta{font-family:'Poppins',sans-serif!important}
/* Restore Font Awesome icon fonts — * selector above overrides them */
.fa,.fas,.far,.fal,.fad,.fat,.fa-solid,.fa-regular,.fa-light,.fa-duotone,.fa-thin{font-family:"Font Awesome 6 Free"!important}
.fab,.fa-brands{font-family:"Font Awesome 6 Brands"!important}

html,body{
  background:#0D2818!important;
  color:#ffffff!important;
  overflow-x:hidden!important;
}

/* ── Preloader dark ── */
.preloader{
  background:#0D2818!important;
}
.loader{
  border-color:rgba(255,255,255,0.1)!important;
  border-top-color:#74c69d!important;
}

/* ── Kill old light header/body inline background ── */
header[style],
body[style]{
  background-color:transparent!important;
  background:#0D2818!important;
}

/* ── Old inline header → hidden (replaced by VIP navbar) ── */
header:not(.vip-skip){
  background:#081a10!important;
}

/* ── Hero Section Dark ── */
.hero,section.hero{
  background:linear-gradient(145deg,#0D2818 0%,#081a10 55%,#040e07 100%)!important;
  color:#ffffff!important;
  position:relative!important;
  overflow:hidden!important;
  padding-top:80px!important;
}
.hero::before{
  content:''!important;position:absolute!important;inset:0!important;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.018) 1px,transparent 1px)!important;
  background-size:52px 52px!important;pointer-events:none!important;z-index:0!important;
}
.hero::after{
  content:''!important;position:absolute!important;
  top:-20%;left:50%;transform:translateX(-50%)!important;
  width:80%;height:70%!important;
  background:radial-gradient(ellipse,rgba(82,183,136,0.18) 0%,transparent 65%)!important;
  pointer-events:none!important;z-index:0!important;
}
.hero-content{position:relative!important;z-index:2!important;text-align:center!important;max-width:780px!important;margin:0 auto!important;padding:3rem 1.5rem 4rem!important}
.hero-content h1{
  font-family:'Poppins',sans-serif!important;
  font-size:clamp(2rem,5vw,3.2rem)!important;
  font-weight:800!important;
  color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
  line-height:1.2!important;margin-bottom:1rem!important;
  text-shadow:none!important;
}
.hero-content p{
  color:rgba(255,255,255,0.65)!important;
  font-size:clamp(0.95rem,2vw,1.1rem)!important;
  line-height:1.7!important;
  margin-bottom:0.6rem!important;
}
.hero-content p[style*="color:yellow"]{
  color:#f9c74f!important;font-weight:700!important;
  font-size:1rem!important;letter-spacing:0.04em!important;
  margin-bottom:0.5rem!important;
}

/* ── Countdown Timer ── */
.hero-content > div[style*="background: #1a1a5e"],
.hero-content > div[style*="background:#1a1a5e"]{
  background:rgba(255,255,255,0.07)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  border-radius:16px!important;
  backdrop-filter:blur(12px)!important;
  padding:1.4rem 2rem!important;
  box-shadow:0 8px 32px rgba(0,0,0,0.3)!important;
  display:flex!important;justify-content:center!important;align-items:center!important;
  gap:0!important;
}
#days,#hours,#minutes,#seconds{
  font-size:2.8rem!important;font-weight:800!important;
  color:#ffffff!important;font-family:'Poppins',sans-serif!important;
  line-height:1!important;
}

/* ── Hero Buttons ── */
.hero-buttons{display:flex!important;gap:12px!important;justify-content:center!important;flex-wrap:wrap!important;margin-top:1.8rem!important}
.btn{
  padding:0.75rem 2rem!important;border-radius:8px!important;
  font-weight:700!important;font-size:0.9rem!important;
  letter-spacing:0.04em!important;text-decoration:none!important;
  transition:all 0.2s ease!important;display:inline-flex!important;
  align-items:center!important;gap:8px!important;
}
.btn-register,.btn[href*="register"]{
  background:linear-gradient(135deg,#52b788,#74c69d)!important;
  color:#0D2818!important;font-weight:800!important;
  border:none!important;box-shadow:0 4px 18px rgba(82,183,136,0.35)!important;
}
.btn-register:hover,.btn[href*="register"]:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 8px 28px rgba(82,183,136,0.45)!important;
}
.btn-login,.btn[href="#subjects"]{
  background:rgba(255,255,255,0.1)!important;
  color:#ffffff!important;
  border:1px solid rgba(255,255,255,0.2)!important;
}
.btn-login:hover,.btn[href="#subjects"]:hover{
  background:rgba(255,255,255,0.16)!important;
  transform:translateY(-2px)!important;
}

/* ── Quick Access Bar ── */
.quick-access{
  background:#081a10!important;
  border-top:1px solid rgba(255,255,255,0.06)!important;
  border-bottom:1px solid rgba(255,255,255,0.06)!important;
  padding:1rem 2rem!important;
}
.quick-access-container{
  display:flex!important;gap:12px!important;justify-content:center!important;
  flex-wrap:wrap!important;max-width:900px!important;margin:0 auto!important;
}
.quick-btn{
  display:flex!important;align-items:center!important;gap:8px!important;
  padding:10px 20px!important;border-radius:10px!important;
  background:rgba(255,255,255,0.07)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  color:rgba(255,255,255,0.85)!important;
  text-decoration:none!important;font-weight:600!important;font-size:0.88rem!important;
  transition:all 0.2s ease!important;
}
.quick-btn:hover{background:rgba(255,255,255,0.13)!important;color:#ffffff!important;transform:translateY(-1px)!important}

/* ── Subjects Section ── */
.subjects,section.subjects{
  background:#0D2818!important;
  padding:5rem 2rem!important;
}
.subjects .section-title,.section-title{
  text-align:center!important;margin-bottom:3rem!important;background:transparent!important;
}
.section-title h2{
  font-family:'Poppins',sans-serif!important;
  font-size:clamp(1.8rem,3.5vw,2.6rem)!important;
  font-weight:800!important;
  color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;
  margin-bottom:0.6rem!important;
}
.section-title p{
  color:rgba(255,255,255,0.5)!important;
  font-size:1rem!important;max-width:560px!important;margin:0 auto!important;
}

/* ── Subject Cards Grid ── */
.subjects-grid{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr))!important;
  gap:20px!important;
  max-width:1400px!important;margin:0 auto!important;
}
@media(min-width:1024px){.subjects-grid{grid-template-columns:repeat(3,1fr)!important}}
@media(min-width:1400px){.subjects-grid{grid-template-columns:repeat(4,1fr)!important}}
@media(min-width:600px) and (max-width:1023px){.subjects-grid{grid-template-columns:repeat(2,1fr)!important}}
@media(max-width:599px){.subjects-grid{grid-template-columns:1fr!important}}

.subject-card{
  background:rgba(255,255,255,0.06)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  border-radius:14px!important;
  overflow:hidden!important;
  transition:all 0.32s cubic-bezier(0.4,0,0.2,1)!important;
  text-decoration:none!important;
  display:flex!important;flex-direction:column!important;
  backdrop-filter:blur(8px)!important;
}
.subject-card:hover{
  background:rgba(255,255,255,0.1)!important;
  border-color:rgba(255,255,255,0.18)!important;
  transform:translateY(-4px)!important;
  box-shadow:0 16px 40px rgba(0,0,0,0.35)!important;
}

.subject-header{
  padding:1.5rem 1.5rem 0!important;
  display:flex!important;align-items:center!important;
  justify-content:space-between!important;
  background:transparent!important;
}
.subject-icon{
  width:52px!important;height:52px!important;
  background:rgba(255,255,255,0.08)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  border-radius:12px!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  font-size:1.4rem!important;
  color:rgba(255,255,255,0.9)!important;
}
.subject-badge{
  background:rgba(255,255,255,0.1)!important;
  color:rgba(255,255,255,0.8)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  border-radius:100px!important;
  padding:3px 12px!important;
  font-size:0.72rem!important;font-weight:700!important;
  letter-spacing:0.05em!important;
}

.subject-content{
  padding:1.2rem 1.5rem 1.5rem!important;
  flex:1!important;display:flex!important;flex-direction:column!important;
  background:transparent!important;
}
.subject-title{
  font-family:'Poppins',sans-serif!important;
  font-size:1.15rem!important;font-weight:700!important;
  color:#ffffff!important;margin-bottom:0.5rem!important;
}
.subject-title::after{display:none!important}
.subject-description{
  color:rgba(255,255,255,0.55)!important;
  font-size:0.85rem!important;line-height:1.6!important;
  margin-bottom:1rem!important;flex:1!important;
}

/* Mini-cards */
.mini-cards{
  display:flex!important;flex-wrap:wrap!important;gap:6px!important;
  margin-bottom:1rem!important;
}
.mini-card{
  background:rgba(255,255,255,0.07)!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  border-radius:6px!important;
  padding:4px 10px!important;
  font-size:0.73rem!important;color:rgba(255,255,255,0.7)!important;
  display:inline-flex!important;align-items:center!important;gap:4px!important;
}

/* Features list */
.subject-content .features-list{
  list-style:none!important;padding:0!important;margin:0 0 1.2rem!important;
  display:flex!important;flex-direction:column!important;gap:5px!important;
}
.subject-content .features-list li{
  color:rgba(255,255,255,0.6)!important;
  font-size:0.82rem!important;padding-left:16px!important;position:relative!important;
  font-size:0.82rem!important;color:#444!important;
  color:rgba(255,255,255,0.58)!important;
}
.subject-content .features-list li::before{
  content:'→'!important;position:absolute!important;left:0!important;
  color:rgba(255,255,255,0.3)!important;font-size:0.72rem!important;top:1px!important;
}

/* Explore button */
.btn-explore{
  display:inline-flex!important;align-items:center!important;gap:8px!important;
  padding:10px 18px!important;border-radius:8px!important;
  background:rgba(255,255,255,0.1)!important;
  border:1px solid rgba(255,255,255,0.15)!important;
  color:#ffffff!important;font-weight:600!important;font-size:0.85rem!important;
  text-decoration:none!important;margin-top:auto!important;
  transition:all 0.2s ease!important;
}
.btn-explore:hover{
  background:rgba(255,255,255,0.16)!important;
  transform:translateX(3px)!important;
}

/* ── Countdown section (standalone) ── */
.countdown,.countdown-section{
  background:#081a10!important;
  padding:3.5rem 2rem!important;
}
.countdown-item{
  background:rgba(255,255,255,0.07)!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  border-radius:14px!important;
  padding:1.4rem 1rem!important;
}
.countdown-item:hover{background:rgba(255,255,255,0.11)!important}
.countdown-number{
  color:#ffffff!important;
  font-family:'Poppins',sans-serif!important;
  font-weight:800!important;
}
.countdown-label{color:rgba(255,255,255,0.5)!important}

/* ── Premium Popup Dark ── */
.premium-popup-overlay{
  background:rgba(4,14,7,0.8)!important;
  backdrop-filter:blur(6px)!important;
}
.premium-popup{
  background:#0D2818!important;
  border:1px solid rgba(255,255,255,0.12)!important;
  border-radius:16px!important;
  color:#ffffff!important;
}
.premium-popup *{color:inherit!important}
.premium-popup .price-text{color:#f9c74f!important}
.premium-popup .features-list li{color:rgba(255,255,255,0.72)!important}
.premium-popup .features-list li::before{color:rgba(255,255,255,0.3)!important}
.btn-try-premium{
  background:linear-gradient(135deg,#52b788,#74c69d)!important;
  color:#0D2818!important;border-radius:8px!important;
}
.btn-later{
  background:rgba(255,255,255,0.1)!important;
  color:#ffffff!important;border-radius:8px!important;
}
.close-btn{color:rgba(255,255,255,0.6)!important}
.close-btn:hover{color:#ffffff!important}

/* ── Toppers cartoon widget dark ── */
.toppers-cartoon-widget{
  background:#081a10!important;
  border:1px solid rgba(255,255,255,0.1)!important;
  border-radius:14px!important;color:#ffffff!important;
}
.cartoon-link{
  background:rgba(255,255,255,0.1)!important;
  color:#ffffff!important;border-radius:8px!important;
  text-decoration:none!important;padding:6px 14px!important;
  font-size:0.8rem!important;font-weight:600!important;
}
.cartoon-toggle-btn{
  background:rgba(255,255,255,0.08)!important;
  color:#ffffff!important;border:none!important;border-radius:6px!important;
  cursor:pointer!important;
}

/* ── Scroll-to-top dark ── */
.scroll-top-btn{
  background:rgba(82,183,136,0.8)!important;
  color:#0D2818!important;border:none!important;
  border-radius:8px!important;cursor:pointer!important;
}
.scroll-top-btn:hover{background:#52b788!important}

/* ── General sections ── */
section{background:#0D2818!important}
section:nth-child(even){background:#081a10!important}

/* ── Footer (if any) ── */
footer,footer *{background:#040e07!important;color:rgba(255,255,255,0.5)!important}

/* ── Extra typography cleanup ── */
h1,h2,h3,h4{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;background:none!important}
p,li,span,label{color:rgba(255,255,255,0.65)!important}
a{color:rgba(255,255,255,0.85)!important}

/* Fix padding-top for content under fixed navbar */
body > amp-auto-ads + .preloader ~ * {padding-top:0!important}
section.hero{padding-top:80px!important}