/* =========================================================
   DARK MODE
   File: darkmode.css
========================================================= */

html.dark-mode,
body.dark-mode {
    --bg: #000000;
    --surface: #0e1420;
    --surface-light: #151e2e;
    --text: #f4f6f8;
    --text-light: #aeb8c7;
    --border: #202b3a;
    --navy: #000000;
    --navy-light: #121824;
    --shadow: 0 12px 35px rgba(0, 0, 0, .6);
    background: #000000 !important;
    background-color: #000000 !important;
    color: var(--text);
}

body.dark-mode .header {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
}

body.dark-mode .navbar {
    background: rgba(15, 23, 36, 0.92);
    border-color: rgba(41, 53, 69, 0.85);
    box-shadow: 0 12px 35px -5px rgba(0, 0, 0, 0.5), 0 2px 8px rgba(0, 0, 0, 0.3);
}

body.dark-mode .header.scrolled .navbar {
    background: rgba(15, 23, 36, 0.98);
    border-bottom: 1px solid #202b3a;
    border-top: none;
    border-left: none;
    border-right: none;
    border-radius: 0;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.6);
}

body.dark-mode .logo,
body.dark-mode .logo-text {
    color: #fff;
}

body.dark-mode .nav-links>li>a {
    color: #b7c0ce;
}

body.dark-mode .nav-links>li>a:hover {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .nav-links>li>a.active {
    color: #60a5fa;
    background: rgba(37, 99, 235, 0.18);
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.25);
}

body.dark-mode .nav-links>li>a.active::after {
    background: linear-gradient(90deg, #60a5fa, #93c5fd);
    box-shadow: 0 1px 6px rgba(96, 165, 250, 0.6);
}

body.dark-mode button.dropdown-trigger {
    color: #b7c0ce;
}

body.dark-mode button.dropdown-trigger:hover,
body.dark-mode button.dropdown-trigger:focus {
    color: #fff;
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode button.dropdown-trigger.active,
body.dark-mode .nav-dropdown.open button.dropdown-trigger,
body.dark-mode .nav-dropdown.open .dropdown-trigger {
    color: #60a5fa !important;
    background: rgba(37, 99, 235, 0.18) !important;
    box-shadow: inset 0 0 0 1px rgba(96, 165, 250, 0.25);
}

body.dark-mode .nav-dropdown.open button.dropdown-trigger i,
body.dark-mode .nav-dropdown.open .dropdown-trigger i {
    color: #60a5fa !important;
}


body.dark-mode .dropdown-menu {
    background: rgba(21, 30, 43, 0.98);
    border-color: #293545;
    box-shadow: 0 18px 45px rgba(0, 0, 0, .45);
}

body.dark-mode .dropdown-menu::before {
    background: #151e2b;
    border-color: #293545;
}

body.dark-mode .dropdown-menu a {
    color: #cbd5e1;
}

body.dark-mode .dropdown-menu a i {
    background: rgba(37, 99, 235, 0.18);
    color: #60a5fa;
}

body.dark-mode .dropdown-menu a:hover,
body.dark-mode .dropdown-menu a.active {
    background: rgba(37, 99, 235, .2);
    color: #60a5fa;
}

body.dark-mode .dropdown-menu a:hover i,
body.dark-mode .dropdown-menu a.active i {
    background: var(--primary);
    color: #fff;
}

body.dark-mode .icon-btn,
body.dark-mode .login-btn {
    background: #151e2b;
    border-color: #344052;
    color: #fff;
}

body.dark-mode .icon-btn:hover {
    background: var(--primary);
    border-color: var(--primary);
}

body.dark-mode .login-btn:hover {
    color: #fff;
    border-color: var(--primary);
}

body.dark-mode .mobile-menu {
    background: rgba(15, 23, 36, 0.98);
    border-color: #273243;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.6);
}

body.dark-mode .header.scrolled .mobile-menu {
    border-radius: 0;
    border-left: none;
    border-right: none;
}

body.dark-mode .mobile-menu > a,
body.dark-mode .mobile-dropdown-btn {
    color: #e2e8f0 !important;
    border-color: #273243 !important;
    background: transparent !important;
    transition: all 0.2s ease;
}

body.dark-mode .mobile-dropdown-btn i {
    color: #94a3b8;
    transition: transform 0.2s ease, color 0.2s ease;
}

body.dark-mode .mobile-menu > a:hover,
body.dark-mode .mobile-menu > a:focus,
body.dark-mode .mobile-menu > a:active {
    background: rgba(37, 99, 235, 0.16) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.3) !important;
}

body.dark-mode .mobile-menu > a.active {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #60a5fa !important;
    font-weight: 800 !important;
    border-left: 3px solid #60a5fa !important;
    padding-left: 12px;
}

body.dark-mode .mobile-dropdown-btn:hover,
body.dark-mode .mobile-dropdown-btn:focus,
body.dark-mode .mobile-dropdown-btn:focus-visible,
body.dark-mode .mobile-dropdown-btn:active,
body.dark-mode .mobile-dropdown.open .mobile-dropdown-btn {
    background: rgba(37, 99, 235, 0.16) !important;
    color: #60a5fa !important;
    border-color: rgba(96, 165, 250, 0.25) !important;
}

body.dark-mode .mobile-dropdown-btn.active {
    color: #60a5fa !important;
    font-weight: 800 !important;
}

body.dark-mode .mobile-dropdown-btn:hover i,
body.dark-mode .mobile-dropdown-btn:focus i,
body.dark-mode .mobile-dropdown-btn:active i,
body.dark-mode .mobile-dropdown.open .mobile-dropdown-btn i,
body.dark-mode .mobile-dropdown-btn.active i {
    color: #60a5fa !important;
}

body.dark-mode .mobile-submenu {
    background: rgba(15, 23, 42, 0.55) !important;
    border-radius: 10px;
    margin: 4px 0 8px 0;
    padding: 6px 8px 6px 12px !important;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body.dark-mode .mobile-submenu a {
    color: #cbd5e1 !important;
    background: transparent !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
}

body.dark-mode .mobile-submenu a i {
    color: #60a5fa !important;
}

body.dark-mode .mobile-submenu a:hover,
body.dark-mode .mobile-submenu a:focus,
body.dark-mode .mobile-submenu a:active {
    background: rgba(37, 99, 235, 0.24) !important;
    color: #93c5fa !important;
}

body.dark-mode .mobile-submenu a.active {
    background: rgba(37, 99, 235, 0.28) !important;
    color: #60a5fa !important;
    font-weight: 800 !important;
    border-left: 3px solid #60a5fa !important;
    padding-left: 12px !important;
}



body.dark-mode .mobile-toggles {
    border-color: #273243;
}

body.dark-mode .mobile-toggles .icon-btn {
    background: #151e2b;
    border-color: #344052;
    color: #cbd5e1;
}

body.dark-mode .stats-section {
    background: #000000;
}

body.dark-mode .stat-card,
body.dark-mode .package-card,
body.dark-mode .service-card,
body.dark-mode .vehicle-card,
body.dark-mode .process-card,
body.dark-mode .testimonial-card {
    background: var(--surface);
    border-color: var(--border);
}

body.dark-mode .service-card h3 {
    color: #fff;
}

body.dark-mode .service-link {
    color: #60a5fa;
}

body.dark-mode .package-card.featured {
    border-color: var(--primary);
}

body.dark-mode .package-btn {
    border-color: #344052;
}

body.dark-mode .package-btn:hover {
    border-color: var(--primary);
}

body.dark-mode .vehicle-card:hover .vehicle-features span {
    background: rgba(37, 99, 235, .2);
    color: #93c5fd;
}

body.dark-mode .package-card:hover {
    box-shadow: 0 26px 52px rgba(0, 0, 0, .45), 0 0 0 1px rgba(96, 165, 250, .3);
}

body.dark-mode .service-card:hover {
    box-shadow: 0 24px 50px rgba(0, 0, 0, .4);
}

body.dark-mode .services-section,
body.dark-mode .vehicles-section,
body.dark-mode .process-section {
    background: #000000;
}

body.dark-mode .mobile-actions {
    border-top-color: #273243;
}

body.dark-mode .mobile-login {
    background: #151e2b;
    border-color: #344052 !important;
    color: #fff !important;
}

body.dark-mode .vehicle-badge {
    background: #151e2b;
    color: var(--primary);
}

body.dark-mode .cta-section {
    background: #000000;
}

body.dark-mode .footer {
    background: #0d1420;
    border-top-color: var(--border);
}

body.dark-mode .footer-bottom {
    background: #080d14;
    border-top-color: var(--border);
}

body.dark-mode .footer-column h3 {
    color: #fff;
}

body.dark-mode .social-links a {
    background: #151e2b;
    border-color: var(--border);
    color: #cbd3de;
}

body,
.header,
.stats-section,
.stat-card,
.package-card,
.vehicle-card,
.process-card,
.testimonial-card,
.package-btn,
.mobile-menu,
.dropdown-menu,
.icon-btn,
.login-btn {
    transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

body.dark-mode .care-content h2,
body.dark-mode .pr-trans-content h2 {
    color: #f8fafc;
}
body.dark-mode .care-content > p,
body.dark-mode .pr-trans-content > p {
    color: #94a3b8;
}

/* =========================================================
   ALL PAGES — BLACK BACKGROUND IN DARK MODE (EXCEPT NAVBAR & FOOTER)
========================================================= */
body.dark-mode,
html.dark-mode,
body.dark-mode main,
body.dark-mode section:not(.hero):not(.hero2),
body.dark-mode .section:not(.hero):not(.hero2),
body.dark-mode .stats-section,
body.dark-mode .services-section,
body.dark-mode .vehicles-section,
body.dark-mode .process-section,
body.dark-mode .packages-section,
body.dark-mode .packages2-section,
body.dark-mode .testimonials-section,
body.dark-mode .cta-section,
body.dark-mode .benefits-section,
body.dark-mode .levels-section,
body.dark-mode .areas-section,
body.dark-mode .docs-section,
body.dark-mode .faq-section,
body.dark-mode .faq2-section,
body.dark-mode .about-hero,
body.dark-mode .story-section,
body.dark-mode .mvv-section,
body.dark-mode .timeline-section,
body.dark-mode .team-section,
body.dark-mode .cert-section,
body.dark-mode .svc-hero,
body.dark-mode .catalog-section,
body.dark-mode .curriculum-section,
body.dark-mode .flow-section,
body.dark-mode .compare-section,
body.dark-mode .cta-banner,
body.dark-mode .fleet-hero,
body.dark-mode .fleet-grid-section,
body.dark-mode .safety-section,
body.dark-mode .fleet-faq-section,
body.dark-mode .gear-section,
body.dark-mode .care-section,
body.dark-mode .pricing-hero,
body.dark-mode .pricing-cards-section,
body.dark-mode .comparison-section,
body.dark-mode .calculator-section,
body.dark-mode .guarantee-section,
body.dark-mode .pr-trans-section,
body.dark-mode .contact-hero,
body.dark-mode .contact-main-section,
body.dark-mode .map-section,
body.dark-mode .ct-connect,
body.dark-mode .ct-sla,
body.dark-mode .minimal-page-wrapper,
body.dark-mode .minimal-page-body,
body.dark-mode .error-hero,
body.dark-mode .coming-soon-wrapper,
body.dark-mode.auth-body,
html.dark-mode body.auth-body,
body.dark-mode .auth-page,
body.dark-mode.dash-body,
body.dark-mode .dash-stage,
body.dark-mode .dash-main,
body.dark-mode .dash-panel {
    background: #000000 !important;
    background-color: #000000 !important;
}

/* Cinematic Hero Banner Preserved in Dark Mode */
body.dark-mode .hero {
    background: #000000 !important;
}

body.dark-mode .hero::before {
    background:
        linear-gradient(200deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .70) 50%, rgba(37, 99, 235, .32) 100%),
        url("../images/driving-hero.jpg") center center / cover no-repeat !important;
}

body.dark-mode .hero-content {
    background: transparent !important;
}

body.dark-mode .hero-overlay {
    background: radial-gradient(circle at center, rgba(37, 99, 235, 0.14) 0%, rgba(0, 0, 0, 0.6) 100%) !important;
}

body.dark-mode .hero2 {
    background: #000000 !important;
}

body.dark-mode .hero2::after {
    background: linear-gradient(200deg, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .80) 45%, rgba(37, 99, 235, .35) 100%) !important;
}

/* Minimal pages glow over pure black */
body.dark-mode .minimal-page-wrapper,
body.dark-mode .coming-soon-wrapper {
    background: radial-gradient(circle at 50% 20%, rgba(37, 99, 235, .10) 0%, transparent 65%), #000000 !important;
}

/* Preserved Navbar Styling (NOT black) */
body.dark-mode .header {
    background: transparent !important;
}
body.dark-mode .navbar {
    background: rgba(15, 23, 36, 0.92) !important;
}
body.dark-mode .header.scrolled .navbar {
    background: rgba(15, 23, 36, 0.98) !important;
}
body.dark-mode .dropdown-menu {
    background: rgba(21, 30, 43, 0.98) !important;
}
body.dark-mode .mobile-menu {
    background: rgba(15, 23, 36, 0.98) !important;
}
body.dark-mode .dash-topbar {
    background: rgba(16, 23, 34, .88) !important;
}
body.dark-mode .dash-sidebar {
    background: #101722 !important;
}

/* Preserved Footer Styling (NOT black) */
body.dark-mode .footer {
    background: #0d1420 !important;
}
body.dark-mode .footer-bottom {
    background: #080d14 !important;
}