/* ============================================================
   LAZISNU - Dark Mode Styles
   ============================================================ */

body.dark-mode {
    --bg-white: var(--gray-900);
    --bg-light: var(--gray-800);
    --bg-gray: var(--gray-700);
    --text-dark: var(--gray-50);
    --text-body: var(--gray-300);
    --text-light: var(--gray-400);
    --border-color: var(--gray-700);
    --glass-bg: rgba(31, 41, 55, 0.3);
    --glass-border: rgba(255, 255, 255, 0.05);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* Dark mode specific global */
body.dark-mode {
    background-color: var(--bg-white);
    color: var(--text-body);
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
    color: var(--text-dark);
}

body.dark-mode p {
    color: var(--text-body);
}

/* Preloader */
body.dark-mode #preloader {
    background: var(--gray-900);
}

body.dark-mode .loader-circle {
    border-color: var(--gray-700);
    border-top-color: var(--primary);
}

/* Navbar */
body.dark-mode .navbar.scrolled {
    background: rgba(17, 24, 39, 0.95);
    backdrop-filter: blur(20px);
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);
}

body.dark-mode .navbar.scrolled .navbar-brand-text {
    color: var(--white);
}

body.dark-mode .navbar.scrolled .nav-link {
    color: var(--gray-300);
}

body.dark-mode .navbar.scrolled .nav-link:hover,
body.dark-mode .navbar.scrolled .nav-link.active {
    color: var(--primary);
    background: rgba(16, 185, 129, 0.1);
}

body.dark-mode .navbar.scrolled .dark-mode-toggle {
    color: var(--gray-300);
}

body.dark-mode .navbar.scrolled .navbar-actions {
    border-left-color: var(--gray-700);
}

body.dark-mode .navbar.scrolled .toggle-bar {
    background: var(--white);
}

body.dark-mode .navbar-menu.active {
    background: var(--gray-900);
}

body.dark-mode .nav-link {
    color: var(--gray-300);
}

body.dark-mode .dropdown-menu {
    background: var(--gray-800);
    border-color: var(--gray-700);
}

body.dark-mode .dropdown-menu .dropdown-link {
    color: var(--gray-300);
}

body.dark-mode .dropdown-menu .dropdown-link:hover {
    background: rgba(16, 185, 129, 0.1);
    color: var(--primary);
}

body.dark-mode .navbar-actions {
    border-top-color: var(--gray-700);
}

/* Hero */
body.dark-mode .hero {
    background: var(--gray-900);
}

/* Sections */
body.dark-mode .section {
    background: var(--bg-white);
}

body.dark-mode .zakat-services,
body.dark-mode .testimonials,
body.dark-mode .calculator {
    background: var(--bg-light);
}

body.dark-mode .donation {
    background: linear-gradient(135deg, var(--emerald-900), #022c22);
}

body.dark-mode .programs,
body.dark-mode .articles,
body.dark-mode .contact {
    background: var(--bg-white);
}

/* Cards */
body.dark-mode .glass-card {
    background: var(--glass-bg);
    border-color: var(--glass-border);
}

body.dark-mode .service-card,
body.dark-mode .program-card,
body.dark-mode .article-card,
body.dark-mode .testimonial-card,
body.dark-mode .contact-card {
    background: var(--bg-light);
    border-color: var(--gray-700);
}

body.dark-mode .service-card:hover,
body.dark-mode .program-card:hover,
body.dark-mode .article-card:hover {
    border-color: rgba(16, 185, 129, 0.3);
}

/* Calculator */
body.dark-mode .calculator-wrapper {
    background: var(--bg-light);
}

body.dark-mode .calculator-tabs {
    background: var(--gray-800);
}

body.dark-mode .calc-tab {
    color: var(--gray-300);
}

body.dark-mode .calc-tab:hover {
    color: var(--primary);
}

body.dark-mode .calc-result {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.2);
}

/* Forms */
body.dark-mode .form-control {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--text-dark);
}

body.dark-mode .form-control:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.15);
}

body.dark-mode .nominal-btn {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--text-body);
}

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

body.dark-mode .payment-option {
    border-color: var(--gray-700);
}

body.dark-mode .payment-option:has(input:checked) {
    border-color: var(--primary);
    background: rgba(16, 185, 129, 0.1);
}

body.dark-mode .bank-item {
    background: var(--gray-800);
}

body.dark-mode .bank-name {
    color: var(--text-dark);
}

/* Contact Form */
body.dark-mode .contact-form-wrapper .glass-card {
    background: var(--bg-light);
    border-color: var(--gray-700);
}

/* About */
body.dark-mode .about-feature {
    background: transparent;
}

body.dark-mode .feature-icon {
    background: rgba(16, 185, 129, 0.15);
}

/* Footer */
body.dark-mode .footer {
    background: var(--gray-900);
}

body.dark-mode .footer-links ul li a {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .footer-links ul li a:hover {
    color: var(--primary);
}

body.dark-mode .footer-contact ul li {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .footer-contact ul li a {
    color: rgba(255, 255, 255, 0.6);
}

body.dark-mode .footer-contact ul li a:hover {
    color: var(--primary);
}

/* Testimonials */
body.dark-mode .testimonial-text {
    color: var(--text-body);
}

body.dark-mode .testimonial-btn {
    background: var(--gray-800);
    border-color: var(--gray-700);
    color: var(--text-dark);
}

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

/* 404 */
body.dark-mode .error-page {
    background: var(--gray-900);
}

/* Scrollbar */
body.dark-mode ::-webkit-scrollbar-track {
    background: var(--gray-800);
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: var(--gray-600);
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: var(--gray-500);
}

/* Article */
body.dark-mode .article-body h3 a {
    color: var(--text-dark);
}

body.dark-mode .article-body h3 a:hover {
    color: var(--primary);
}

body.dark-mode .article-category {
    background: rgba(16, 185, 129, 0.2);
}

/* Maps */
body.dark-mode .maps {
    background: var(--bg-light);
}