/* ============================================================
   KASU DRIVING ACADEMY — Dark Mode Stylesheet
   dark-mode.css
   ============================================================ */

/* Dark mode is activated when body has class 'dark' */

body.dark {
  /* ── Dark Mode Color Overrides ─────────────────────── */
  --clr-bg:           #0B1120;
  --clr-bg-alt:       #0f1829;
  --clr-bg-muted:     #1a2540;
  --clr-card:         #121e35;
  --clr-card-hover:   #172240;
  --clr-border:       rgba(255,255,255,.08);
  --clr-border-light: rgba(255,255,255,.05);

  /* Dark Text Colors */
  --clr-text:       #F1F5F9;
  --clr-text-light: #CBD5E1;
  --clr-muted:      #94A3B8;
  --clr-muted-light:#64748B;

  /* Dark Shadows */
  --shadow-xs: 0 1px 2px rgba(0,0,0,.3);
  --shadow-sm: 0 2px 8px rgba(0,0,0,.4);
  --shadow-md: 0 4px 20px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
  --shadow-xl: 0 16px 48px rgba(0,0,0,.7);
}

/* ── Header ──────────────────────────────────────────── */
body.dark .header {
  background: rgba(11,17,32,.90);
  border-bottom-color: rgba(255,255,255,.06);
}

body.dark .header.scrolled {
  background: rgba(11,17,32,.97);
}

/* ── Logo ────────────────────────────────────────────── */
body.dark .logo-name { color: #F1F5F9; }
body.dark .logo-tagline { color: var(--clr-muted); }

/* ── Navigation ──────────────────────────────────────── */
body.dark .nav__link {
  color: var(--clr-muted);
}

body.dark .nav__link:hover,
body.dark .nav__link.active {
  color: #F1F5F9;
  background: rgba(255,255,255,.06);
}

/* ── Toggle Buttons ──────────────────────────────────── */
body.dark .toggle-btn {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.08);
  color: var(--clr-muted);
}

body.dark .toggle-btn:hover {
  background: rgba(244,180,0,.10);
  border-color: rgba(244,180,0,.25);
  color: var(--clr-primary);
}

/* ── Hamburger ───────────────────────────────────────── */
body.dark .hamburger__line { background: #F1F5F9; }

/* ── Mobile Menu ─────────────────────────────────────── */
body.dark .mobile-menu {
  background: #0f1829;
  border-bottom-color: rgba(255,255,255,.06);
}

body.dark .mobile-nav__link { color: var(--clr-muted); }

body.dark .mobile-nav__link:hover,
body.dark .mobile-nav__link.active {
  background: rgba(255,255,255,.06);
  color: #F1F5F9;
}

body.dark .mobile-menu__controls {
  border-top-color: rgba(255,255,255,.06);
}

/* ── Hero Section ────────────────────────────────────── */
body.dark .hero {
  background: linear-gradient(135deg, #0B1120 0%, #0f1829 50%, #0d1a38 100%);
}

body.dark .hero::before {
  background: radial-gradient(circle, rgba(244,180,0,.05) 0%, transparent 70%);
}

body.dark .hero::after {
  background: radial-gradient(circle, rgba(37,99,235,.06) 0%, transparent 70%);
}

body.dark .hero__heading { color: #F1F5F9; }

body.dark .hero__tag { color: var(--clr-muted); }

body.dark .hero__desc { color: var(--clr-muted); }

/* Dark Hero Badges */
body.dark .hero-badge {
  background: rgba(18,30,53,.95);
  border-color: rgba(255,255,255,.08);
}

body.dark .hero-badge__value { color: #F1F5F9; }

body.dark .hero-badge__icon--green {
  background: rgba(16,185,129,.12);
}

body.dark .hero-badge__icon--blue {
  background: rgba(37,99,235,.12);
}

/* Dark Trust Items */
body.dark .trust-item__text { color: var(--clr-muted); }
body.dark .trust-divider { background: rgba(255,255,255,.10); }

/* Dark Play Button */
body.dark .play-circle {
  background: rgba(18,30,53,.95);
  border-color: rgba(255,255,255,.12);
}

body.dark .hero__play-btn { color: var(--clr-muted); }

/* ── Why Choose Us ───────────────────────────────────── */
body.dark .feature-card {
  background: var(--clr-card);
  border-color: rgba(255,255,255,.07);
}

body.dark .feature-card:hover {
  background: var(--clr-card-hover);
  border-color: transparent;
}

body.dark .feature-card__title { color: #F1F5F9; }
body.dark .feature-card__desc  { color: var(--clr-muted); }
body.dark .feature-card__num   { color: rgba(255,255,255,.20); }

body.dark .feature-card__icon--blue   { background: rgba(37,99,235,.12); }
body.dark .feature-card__icon--green  { background: rgba(16,185,129,.10); }
body.dark .feature-card__icon--purple { background: rgba(124,58,237,.10); }

/* ── Courses ─────────────────────────────────────────── */
body.dark .courses-preview { background: var(--clr-bg); }

/* ── How It Works ────────────────────────────────────── */
body.dark .step-card__num {
  background: var(--clr-card);
  color: var(--clr-primary);
  box-shadow: 0 0 0 6px var(--clr-bg), 0 4px 16px rgba(244,180,0,.20);
}

body.dark .step-card:hover .step-card__num {
  background: var(--clr-primary);
  color: var(--clr-secondary);
}

body.dark .step-card__title { color: #F1F5F9; }
body.dark .step-card__desc  { color: var(--clr-muted); }

/* ── Progress Preview ────────────────────────────────── */
body.dark .progress-preview { background: var(--clr-bg-alt); }

body.dark .dashboard-mockup {
  background: var(--clr-card);
  border-color: rgba(255,255,255,.07);
}

body.dark .db-greeting { color: #F1F5F9; }

body.dark .db-info-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}

body.dark .db-info-value { color: #F1F5F9; }

body.dark .db-feedback {
  background: rgba(37,99,235,.08);
  border-color: rgba(37,99,235,.15);
}

body.dark .db-feedback-text { color: var(--clr-muted); }

/* ── Instructors ─────────────────────────────────────── */
body.dark .instructor-card {
  background: var(--clr-card);
  border-color: rgba(255,255,255,.07);
}

body.dark .instructor-card__name { color: #F1F5F9; }
body.dark .instructor-card__role { color: var(--clr-muted); }
body.dark .instructor-card__rating { color: var(--clr-muted); }

/* ── Testimonials ────────────────────────────────────── */
body.dark .testimonials { background: var(--clr-bg-alt); }

body.dark .testimonial-card {
  background: var(--clr-card);
  border-color: rgba(255,255,255,.07);
}

body.dark .testimonial-card__text { color: var(--clr-muted); }
body.dark .testimonial-card__name { color: #F1F5F9; }
body.dark .testimonial-card__course { color: var(--clr-muted-light); }

body.dark .testimonial-card__footer {
  border-top-color: rgba(255,255,255,.07);
}

/* ── Section Text ────────────────────────────────────── */
body.dark .section-heading { color: #F1F5F9; }
body.dark .section-desc    { color: var(--clr-muted); }
body.dark .section-tag {
  color: #93C5FD;
  background: rgba(37,99,235,.12);
}

/* ── Footer (footer is already dark so minimal changes) ── */
body.dark .footer { background: #060c18; }

/* ── Outline Buttons in Dark ─────────────────────────── */
body.dark .btn-outline {
  color: #F1F5F9;
  border-color: rgba(255,255,255,.15);
}

body.dark .btn-outline:hover {
  border-color: var(--clr-primary);
  color: var(--clr-primary);
  background: rgba(244,180,0,.06);
}

/* ── Smooth theme transition ─────────────────────────── */
body,
.header,
.hero,
.feature-card,
.instructor-card,
.testimonial-card,
.dashboard-mockup,
.mobile-menu,
.nav__link,
.btn,
.section-heading,
.section-desc,
.section-tag {
  transition-property: background-color, border-color, color, box-shadow;
  transition-duration: 0.35s;
  transition-timing-function: ease;
}

/* ── Inner Pages Dark Mode Support ─────────────────────── */
body.dark .page-hero {
 
   background:
        linear-gradient(
            90deg,
            rgba(11, 17, 32, 0.88) 0%,
            rgba(15, 24, 41, 0.72) 50%,
            rgba(13, 26, 56, 0.55) 100%
        ),
        url("../images/hero/road-banner.jpg");

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

body.dark .breadcrumb-current { color: #F1F5F9; }
body.dark .breadcrumb a { color: var(--clr-muted); }
body.dark .breadcrumb a:hover { color: var(--clr-primary); }

body.dark .level-card,
body.dark .learn-item,
body.dark .approach-card,
body.dark .feedback-card,
body.dark .vehicle-card,
body.dark .pricing-card,
body.dark .faq-item,
body.dark .dash-panel,
body.dark .dash-stat-box,
body.dark .license-progress-card,
body.dark .booking-card,
body.dark .auth-card,
body.dark .countdown-box,
body.dark .dash-topbar {
  background: var(--clr-card);
  border-color: rgba(255,255,255,.08);
}

body.dark .level-card__title,
body.dark .learn-item__title,
body.dark .approach-card__title,
body.dark .vehicle-card__title,
body.dark .pricing-card__name,
body.dark .price-val,
body.dark .price-currency,
body.dark .faq-trigger,
body.dark .dash-greeting h1,
body.dark .dash-stat-content h3,
body.dark .license-progress-head h3,
body.dark .dash-panel__head h3,
body.dark .lesson-time-banner,
body.dark .lesson-meta-item strong,
body.dark .auth-card__title,
body.dark .form-label,
body.dark .user-name-sm,
body.dark .milestone-label {
  color: #F1F5F9;
}

body.dark .checklist-text h4,
body.dark .feedback-card__info h4 {
  color: #F1F5F9;
}

body.dark .level-card__suitable,
body.dark .lesson-highlight-box,
body.dark .user-profile-pill,
body.dark .notif-badge-btn,
body.dark .time-slot-btn,
body.dark .skill-pill {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: var(--clr-text-light);
}

body.dark .time-slot-btn:hover {
  background: rgba(255,255,255,.08);
  border-color: var(--clr-primary);
}

body.dark .time-slot-btn.selected {
  background: var(--clr-primary);
  color: var(--clr-secondary);
}

body.dark .form-control {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.1);
  color: #F1F5F9;
}

body.dark .form-control:focus {
  background: rgba(255,255,255,.08);
  border-color: var(--clr-accent);
}

body.dark .table-responsive {
  background: var(--clr-card);
  border-color: rgba(255,255,255,.08);
}

body.dark .compare-table thead th {
  background: rgba(255,255,255,.04);
  color: #F1F5F9;
}

body.dark .compare-table th,
body.dark .compare-table td {
  border-bottom-color: rgba(255,255,255,.06);
  color: var(--clr-text-light);
}

body.dark .compare-table th.col-feature {
  color: #F1F5F9;
}

body.dark .compare-table td.col-popular {
  background: rgba(244,180,0,.08);
  color: #F1F5F9;
}

body.dark .compare-table tbody tr:hover {
  background: rgba(255,255,255,.02);
}

body.dark .milestones-track::before {
  background: rgba(255,255,255,.1);
}

body.dark .milestone-circle {
  background: var(--clr-card);
  border-color: rgba(255,255,255,.15);
  color: var(--clr-muted);
}

body.dark .coming-soon-hero {
  background: linear-gradient(135deg, #0B1120 0%, #0f1829 50%, #0d1a38 100%);
}

body.dark .auth-section {
  background: var(--clr-bg);
}

body.dark .notif-badge-btn svg {
  fill: #F1F5F9;
}

/* ── Home Dropdown - Dark Mode ── */

body.dark .nav__list,
body.dark .nav__list li,
body.dark .nav__dropdown,
body.dark .dropdown-menu {
    list-style: none;
}

body.dark .nav__dropdown::marker,
body.dark .dropdown-menu li::marker {
    display: none;
    content: "";
}

body.dark .dropdown-menu {
    background: #111827;
}

body.dark .dropdown-link {
    color: #fff;
}
body.dark .dropdown-link:hover,
body.dark .dropdown-link.active {
    background: #1f2937;
    color: var(--primary-color);
}