/* ===== AFANLY Website - Dark Mode Styles ===== */
/* Author: AFANLY Team */
/* Description: Modern, soft slate dark theme with comfortable contrast and lighter tones */

/* ===== Dark Mode Theme Variables (Softer & Lighter Slate) ===== */
.dark-mode {
    /* Background Colors - Softer Slate */
    --bg-color: #1e2638;
    --bg-secondary: #273248;
    --bg-tertiary: #323f59;
    
    /* Text Colors - Balanced & Readable */
    --text-color: #f1f5f9;
    --text-secondary: #cbd5e1;
    --text-muted: #94a3b8;
    
    /* Border & Shadow */
    --border-color: #3b4b6b;
    --card-bg: #273248;
    --card-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    --card-shadow-hover: 0 12px 28px rgba(0, 0, 0, 0.35);
    --overlay-bg: rgba(18, 24, 38, 0.85);
}

/* ===== Dark Mode Toggle Icon Switching ===== */
.dark-mode .icon-sun {
    display: none;
}

.dark-mode .icon-moon {
    display: block;
}

/* ===== Header & Navigation in Dark Mode ===== */
.dark-mode #header {
    border-bottom-color: #3b4b6b;
}

.dark-mode #header.scrolled {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35);
}

.dark-mode .dark-mode-toggle {
    background-color: #323f59;
    border-color: #3b4b6b;
    color: #f1f5f9;
}

.dark-mode .dark-mode-toggle:hover {
    background-color: #3b82f6;
    border-color: #60a5fa;
    color: #ffffff;
}

.dark-mode .mobile-menu-toggle {
    background-color: #323f59;
    border-color: #3b4b6b;
}

/* ===== Hero & Header Banners in Dark Mode ===== */
.dark-mode .hero,
.dark-mode .shop-header {
    background: linear-gradient(135deg, #253350 0%, #31446b 100%);
}

.dark-mode .hero-buttons .btn-primary {
    background-color: #ffffff;
    color: #1e2638;
    border: 2px solid #ffffff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.dark-mode .hero-buttons .btn-primary:hover:not(:disabled) {
    background-color: #e2e8f0;
    color: #0f172a;
    border-color: #e2e8f0;
}

.dark-mode .hero-buttons .btn-secondary {
    background-color: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    border: 2px solid #ffffff;
    backdrop-filter: blur(4px);
}

.dark-mode .hero-buttons .btn-secondary:hover {
    background-color: #ffffff;
    color: #1e2638;
    border-color: #ffffff;
}

/* ===== Button High-Contrast Styling in Dark Mode ===== */
.dark-mode .btn-primary {
    background-color: #3b82f6;
    border-color: #60a5fa;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(59, 130, 246, 0.35);
}

.dark-mode .btn-primary:hover:not(:disabled) {
    background-color: #2563eb;
    border-color: #93c5fd;
    box-shadow: 0 6px 20px rgba(59, 130, 246, 0.45);
}

.dark-mode .btn-secondary {
    background-color: #273248;
    color: #93c5fd;
    border-color: #4b5e82;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dark-mode .btn-secondary:hover {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #60a5fa;
}

.dark-mode .btn-whatsapp {
    background-color: #16a34a;
    border-color: #4ade80;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(22, 163, 74, 0.35);
}

.dark-mode .btn-whatsapp:hover {
    background-color: #15803d;
    border-color: #86efac;
}

.dark-mode .btn-email {
    background-color: #ea4335;
    border-color: #f87171;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(234, 67, 53, 0.35);
}

.dark-mode .btn-email:hover {
    background-color: #c5341f;
    border-color: #fca5a5;
}

/* ===== Component Refinements in Dark Mode ===== */
.dark-mode .service-icon,
.dark-mode .contact-icon {
    background-color: rgba(96, 165, 250, 0.15);
}

.dark-mode .form-group input,
.dark-mode .form-group textarea,
.dark-mode .form-group select,
.dark-mode .search-box input,
.dark-mode .filter-box select {
    background-color: #1e2638;
    border-color: #3b4b6b;
    color: #f1f5f9;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group textarea:focus,
.dark-mode .form-group select:focus,
.dark-mode .search-box input:focus,
.dark-mode .filter-box select:focus {
    background-color: #273248;
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

.dark-mode .search-box button {
    background-color: #3b82f6;
    border: 1.5px solid #60a5fa;
    border-left: none;
    color: #ffffff;
}

.dark-mode .search-box button:hover {
    background-color: #2563eb;
}

.dark-mode .product-card:hover {
    border-color: #60a5fa;
}

.dark-mode .product-price,
.dark-mode .modal-price {
    color: #93c5fd;
}

.dark-mode .modal-content {
    background-color: #273248;
    border-color: #3b4b6b;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}

.dark-mode .modal-close {
    background-color: #323f59;
    border-color: #3b4b6b;
    color: #cbd5e1;
}

.dark-mode .modal-close:hover {
    background-color: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #f87171;
}

.dark-mode .thumbnail {
    background-color: #323f59;
}

/* Contact Method Modal Buttons in Dark Mode */
.dark-mode .contact-method-btn {
    background-color: #323f59;
    border-color: #3b4b6b;
}

.dark-mode .contact-method-btn.whatsapp-btn {
    background-color: rgba(34, 197, 94, 0.12);
    border-color: #22c55e;
}

.dark-mode .contact-method-btn.whatsapp-btn:hover {
    background-color: rgba(34, 197, 94, 0.22);
    border-color: #4ade80;
}

.dark-mode .contact-method-btn.email-btn {
    background-color: rgba(239, 68, 68, 0.12);
    border-color: #ef4444;
}

.dark-mode .contact-method-btn.email-btn:hover {
    background-color: rgba(239, 68, 68, 0.22);
    border-color: #f87171;
}

.dark-mode .contact-method-btn .method-icon {
    background-color: #273248;
}

/* Scroll To Top Button in Dark Mode */
.dark-mode .scroll-top-btn {
    background-color: #273248;
    color: #93c5fd;
    border: 1.5px solid #3b4b6b;
}

.dark-mode .scroll-top-btn:hover {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #60a5fa;
}

/* Notifications in Dark Mode */
.dark-mode .notification-panel {
    background-color: #273248;
    border-color: #3b4b6b;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.45);
}

.dark-mode .notification-header,
.dark-mode .notification-footer {
    background-color: #1e2638;
    border-color: #3b4b6b;
}

.dark-mode .notification-item {
    border-color: #3b4b6b;
}

.dark-mode .notification-item:hover {
    background-color: #323f59;
}

.dark-mode .notification-item.unread {
    background-color: rgba(59, 130, 246, 0.1);
}

.dark-mode .notification-actions .btn-primary-small {
    background-color: #3b82f6;
    color: #ffffff;
    border: 1px solid #60a5fa;
}

.dark-mode .notification-actions .btn-dismiss {
    background-color: #323f59;
    color: #cbd5e1;
    border: 1px solid #3b4b6b;
}

.dark-mode .notification-actions .btn-dismiss:hover {
    background-color: #3b4b6b;
    color: #ffffff;
}

.dark-mode .mark-all-read {
    color: #93c5fd;
}