/* ===== AFANLY Website - Dark Mode Styles (FIXED VERSION) ===== */
/* Author: AFANLY Team */
/* Description: Dark mode with forced text visibility fixes */
/* Last Updated: 11 November 2025 */

/* ===== Force Light Mode as Default ===== */
/* Prevent FOUC (Flash of Unstyled Content) */
html, body {
    background-color: #ffffff;
    color: #1f2937;
}

/* ===== Dark Mode Variables ===== */
.dark-mode {
    /* Background Colors */
    --bg-color: #111827;
    --bg-secondary: #1f2937;
    --bg-tertiary: #374151;
    
    /* Text Colors */
    --text-color: #f9fafb;
    --text-secondary: #d1d5db;
    --text-muted: #9ca3af;
    
    /* Border & Shadow */
    --border-color: #374151;
    --card-bg: #1f2937;
    --card-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --card-shadow-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3);
    --overlay-bg: rgba(0, 0, 0, 0.7);
}

/* ===== Dark Mode Toggle Button ===== */
.dark-mode-toggle {
    background-color: var(--bg-secondary);
    border: 2px solid var(--border-color);
    border-radius: 50px;
    padding: 0.5rem 1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: var(--transition);
}

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

/* Icon visibility based on mode */
.icon-sun {
    display: inline;
}

.icon-moon {
    display: none;
}

.dark-mode .icon-sun {
    display: none;
}

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

/* ===== EMERGENCY FIX: Force All Section Headers Visible ===== */
/* Using ALTERNATIF method with !important */
.dark-mode .section-header * {
    color: #f1f5f9 !important;
}

.dark-mode .section-header h2 {
    color: #ffffff !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.dark-mode .section-header p {
    color: #e5e7eb !important;
}

/* Force background contrast */
.dark-mode .services {
    background-color: var(--bg-color) !important;
}

.dark-mode .about {
    background-color: var(--bg-secondary) !important;
}

.dark-mode .contact {
    background-color: var(--bg-secondary) !important;
}

/* Ensure divider is visible */
.dark-mode .divider {
    background: linear-gradient(90deg, #3b82f6, #2563eb) !important;
    opacity: 1 !important;
}

/* ===== Dark Mode Specific Overrides ===== */

/* Hero section in dark mode */
.dark-mode .hero {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

/* Service cards in dark mode */
.dark-mode .service-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .service-card:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.dark-mode .service-card h3 {
    color: #ffffff !important;
}

.dark-mode .service-card p {
    color: #d1d5db !important;
}

/* Contact items in dark mode */
.dark-mode .contact-item {
    background-color: var(--card-bg);
}

.dark-mode .contact-item:hover {
    background-color: var(--bg-tertiary);
}

.dark-mode .contact-info h3,
.dark-mode .contact-form-wrapper h3 {
    color: #ffffff !important;
}

.dark-mode .contact-details h4 {
    color: #ffffff !important;
}

.dark-mode .contact-details p,
.dark-mode .contact-details a {
    color: #d1d5db !important;
}

/* Stat items in dark mode */
.dark-mode .stat-item {
    background-color: var(--card-bg);
}

.dark-mode .stat-item:hover {
    background-color: var(--bg-tertiary);
}

.dark-mode .stat-item h4 {
    color: var(--primary-color) !important;
}

.dark-mode .stat-item p {
    color: #d1d5db !important;
}

/* About section */
.dark-mode .about-text h3 {
    color: #3b82f6 !important;
}

.dark-mode .about-text p {
    color: #d1d5db !important;
}

/* Product cards in dark mode */
.dark-mode .product-card {
    background-color: var(--card-bg);
    border-color: var(--border-color);
}

.dark-mode .product-card:hover {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.dark-mode .product-name {
    color: #ffffff !important;
}

.dark-mode .product-description,
.dark-mode .product-category {
    color: #d1d5db !important;
}

.dark-mode .product-price {
    color: #3b82f6 !important;
}

/* Form inputs in dark mode */
.dark-mode .form-group input,
.dark-mode .form-group textarea,
.dark-mode .form-group select {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .form-group input:focus,
.dark-mode .form-group textarea:focus,
.dark-mode .form-group select:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.dark-mode .form-group label {
    color: #ffffff !important;
}

/* Search box in dark mode */
.dark-mode .search-box input {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

.dark-mode .search-box input:focus {
    background-color: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.dark-mode .search-box button {
    background-color: var(--primary-color);
}

.dark-mode .search-box button:hover {
    background-color: var(--secondary-color);
}

/* Filter controls */
.dark-mode .filter-box select {
    background-color: var(--bg-color);
    border-color: var(--border-color);
    color: var(--text-color);
}

/* Modal in dark mode */
.dark-mode .modal {
    background-color: var(--overlay-bg);
}

.dark-mode .modal-content {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
}

.dark-mode .modal-details h2 {
    color: #ffffff !important;
}

.dark-mode .modal-description {
    color: #d1d5db !important;
}

.dark-mode .modal-price {
    color: #3b82f6 !important;
}

/* Thumbnail images in dark mode */
.dark-mode .thumbnail {
    border-color: var(--border-color);
}

.dark-mode .thumbnail.active,
.dark-mode .thumbnail:hover {
    border-color: #3b82f6;
}

/* Footer in dark mode */
.dark-mode .footer {
    background-color: #0f172a;
    border-top-color: var(--border-color);
}

.dark-mode .footer-section h4 {
    color: #ffffff !important;
}

.dark-mode .footer-section p,
.dark-mode .footer-section ul li {
    color: #d1d5db !important;
}

.dark-mode .footer-section a:hover {
    color: #3b82f6 !important;
}

.dark-mode .footer-bottom {
    color: #9ca3af !important;
    border-top-color: var(--border-color);
}

/* Scroll indicator in dark mode */
.dark-mode #header {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

/* Shop header in dark mode */
.dark-mode .shop-header {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

.dark-mode .shop-header h1,
.dark-mode .shop-header p {
    color: #ffffff !important;
}

/* Product image background in dark mode */
.dark-mode .product-image {
    background-color: var(--bg-tertiary);
}

/* Main image background in dark mode */
.dark-mode .main-image {
    background-color: var(--bg-tertiary);
}

/* Stock badges */
.dark-mode .stock-badge.available {
    background-color: #10b981;
    color: #ffffff;
}

.dark-mode .stock-badge.unavailable {
    background-color: #ef4444;
    color: #ffffff;
}

/* ===== Notification System in Dark Mode ===== */
.dark-mode .notification-panel {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dark-mode .notification-header {
    background-color: var(--bg-tertiary);
    border-bottom-color: var(--border-color);
}

.dark-mode .notification-header h3 {
    color: #ffffff !important;
}

.dark-mode .mark-all-read {
    color: #3b82f6 !important;
}

.dark-mode .mark-all-read:hover {
    background-color: rgba(59, 130, 246, 0.1);
}

.dark-mode .notification-item {
    border-bottom-color: var(--border-color);
}

.dark-mode .notification-item:hover {
    background-color: var(--bg-tertiary);
}

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

.dark-mode .notification-title {
    color: #ffffff !important;
}

.dark-mode .notification-message {
    color: #d1d5db !important;
}

.dark-mode .notification-time {
    color: #9ca3af !important;
}

.dark-mode .notification-footer {
    background-color: var(--bg-tertiary);
    border-top-color: var(--border-color);
}

.dark-mode .notification-footer p {
    color: #9ca3af !important;
}

.dark-mode .notification-empty-icon {
    opacity: 0.3;
}

.dark-mode .notification-empty p {
    color: #9ca3af !important;
}

/* Bell button in dark mode */
.dark-mode .bell-button {
    background: linear-gradient(135deg, #2563eb 0%, #1e40af 100%);
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.6);
}

.dark-mode .bell-button:hover {
    box-shadow: 0 6px 25px rgba(37, 99, 235, 0.7);
}

.dark-mode .notification-badge {
    background-color: #ef4444;
}

/* Notification action buttons */
.dark-mode .notification-actions .btn-primary-small {
    background-color: #2563eb;
}

.dark-mode .notification-actions .btn-primary-small:hover {
    background-color: #1e40af;
}

.dark-mode .notification-actions .btn-dismiss {
    background-color: var(--bg-tertiary);
    color: #d1d5db;
}

.dark-mode .notification-actions .btn-dismiss:hover {
    background-color: var(--border-color);
}

/* ===== Universal Text Color Fix ===== */
/* Force all headings to be visible */
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: #ffffff !important;
}

/* Force all paragraphs to be visible */
.dark-mode p {
    color: #d1d5db !important;
}

/* Links */
.dark-mode a {
    color: #d1d5db;
}

.dark-mode a:hover {
    color: #3b82f6;
}

/* Navigation links */
.dark-mode .nav-link {
    color: #f9fafb;
}

.dark-mode .nav-link:hover,
.dark-mode .nav-link.active {
    color: #3b82f6;
}

/* Logo text */
.dark-mode .logo {
    color: #3b82f6;
}

/* ===== Buttons in Dark Mode ===== */
.dark-mode .btn-primary {
    background-color: #2563eb;
    color: #ffffff;
}

.dark-mode .btn-primary:hover {
    background-color: #1e40af;
}

.dark-mode .btn-secondary {
    background-color: transparent;
    border-color: #3b82f6;
    color: #3b82f6;
}

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

/* ===== Form Success/Error Messages ===== */
.dark-mode .form-success {
    background-color: #10b981;
}

.dark-mode .error-message {
    color: #ef4444 !important;
}

/* ===== Map Container ===== */
.dark-mode .map-container h3 {
    color: #ffffff !important;
}

.dark-mode #map iframe {
    filter: invert(90%) hue-rotate(180deg);
}

/* ===== Scroll to Top Button ===== */
.dark-mode .scroll-top-btn {
    background-color: #2563eb;
}

.dark-mode .scroll-top-btn:hover {
    background-color: #1e40af;
}

/* ===== Reset Theme Button ===== */
.dark-mode .reset-theme-btn {
    border-color: var(--border-color);
    color: #d1d5db;
}

.dark-mode .reset-theme-btn:hover {
    background-color: var(--bg-secondary);
    border-color: #3b82f6;
    color: #3b82f6;
}

/* ===== Smooth Transitions ===== */
body,
#header,
.navbar,
.card,
.service-card,
.contact-item,
.product-card,
.modal-content,
.footer,
.section-header h2,
.section-header p {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* ===== Contact Method Modal in Dark Mode ===== */
.dark-mode .contact-method-header h2 {
    color: #ffffff !important;
}

.dark-mode .contact-method-header p {
    color: #d1d5db !important;
}

.dark-mode .contact-method-btn {
    background-color: var(--bg-tertiary);
    border-color: var(--border-color);
}

.dark-mode .contact-method-btn:hover {
    background-color: var(--bg-secondary);
}

.dark-mode .contact-method-btn.whatsapp-btn:hover {
    border-color: #25D366;
    background-color: rgba(37, 211, 102, 0.1);
}

.dark-mode .contact-method-btn.email-btn:hover {
    border-color: #ea4335;
    background-color: rgba(234, 67, 53, 0.1);
}

.dark-mode .method-content h3 {
    color: #ffffff !important;
}

.dark-mode .method-content p {
    color: #d1d5db !important;
}

.dark-mode .whatsapp-btn .method-content h3 {
    color: #25D366 !important;
}

.dark-mode .email-btn .method-content h3 {
    color: #ea4335 !important;
}

/* ===== Modal Close Button in Dark Mode ===== */
.dark-mode .modal-close {
    background: rgba(31, 41, 55, 0.95);
    color: #d1d5db;
}

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

/* Stock badge in dark mode */
.dark-mode .stock-badge.available {
    background-color: rgba(16, 185, 129, 0.9);
}

.dark-mode .stock-badge.unavailable {
    background-color: rgba(239, 68, 68, 0.9);
}

/* Contact method buttons in dark mode */
.dark-mode .contact-method-btn.whatsapp-btn {
    border-color: #25D366;
}

.dark-mode .contact-method-btn.whatsapp-btn:hover {
    background-color: rgba(37, 211, 102, 0.15);
    border-color: #1ea952;
}

.dark-mode .contact-method-btn.email-btn {
    border-color: #ea4335;
}

.dark-mode .contact-method-btn.email-btn:hover {
    background-color: rgba(234, 67, 53, 0.15);
    border-color: #c5341f;
}

/* ===== SHOP PAGE DARK MODE (DEEPER DARK) ===== */

/* Shop header - darker gradient */
.dark-mode .shop-header {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.dark-mode .shop-header h1 {
    color: #ffffff !important;
}

.dark-mode .shop-header p {
    color: #e2e8f0 !important;
}

/* Shop controls - darker background */
.dark-mode .shop-controls {
    background-color: #0f172a;
    border-bottom: 1px solid #1e293b;
}

.dark-mode .controls-wrapper {
    background-color: transparent;
}

/* Search box - darker */
.dark-mode .search-box input {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .search-box input::placeholder {
    color: #64748b;
}

.dark-mode .search-box input:focus {
    background-color: #0f172a;
    border-color: #3b82f6;
}

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

.dark-mode .search-box button:hover {
    background-color: #1e40af;
}

/* Filter boxes - darker */
.dark-mode .filter-box select {
    background-color: #1e293b;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .filter-box select:focus {
    background-color: #0f172a;
    border-color: #3b82f6;
}

/* Products section - darker background */
.dark-mode .products-section {
    background-color: #0f172a;
}

/* Product cards - darker with subtle border */
.dark-mode .product-card {
    background-color: #1e293b;
    border-color: #334155;
}

.dark-mode .product-card:hover {
    background-color: #334155;
    border-color: #3b82f6;
    transform: translateY(-5px);
}

/* Product image background - darker */
.dark-mode .product-image {
    background-color: #0f172a;
}

/* Product info section - darker text */
.dark-mode .product-info {
    background-color: #1e293b;
}

.dark-mode .product-category {
    color: #94a3b8 !important;
}

.dark-mode .product-name {
    color: #f1f5f9 !important;
}

.dark-mode .product-price {
    color: #60a5fa !important;
}

.dark-mode .product-description {
    color: #cbd5e1 !important;
}

/* Stock badges - more vibrant in dark mode */
.dark-mode .stock-badge.available {
    background-color: #10b981;
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.4);
}

.dark-mode .stock-badge.unavailable {
    background-color: #ef4444;
    color: #ffffff;
    box-shadow: 0 2px 12px rgba(239, 68, 68, 0.4);
}

/* Product modal - darker */
.dark-mode .modal {
    background-color: rgba(0, 0, 0, 0.85);
}

.dark-mode .modal-content {
    background-color: #1e293b;
    border: 1px solid #334155;
}

.dark-mode .modal-close {
    background: #0f172a;
    color: #cbd5e1;
}

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

/* Modal gallery - darker */
.dark-mode .main-image {
    background-color: #0f172a;
}

.dark-mode .thumbnail {
    border-color: #334155;
    background-color: #0f172a;
}

.dark-mode .thumbnail.active,
.dark-mode .thumbnail:hover {
    border-color: #3b82f6;
}

/* Modal details - darker text */
.dark-mode .modal-details h2 {
    color: #f1f5f9 !important;
}

.dark-mode .modal-price {
    color: #60a5fa !important;
}

.dark-mode .modal-description {
    color: #cbd5e1 !important;
}

.dark-mode .modal-availability .stock-badge {
    background-color: #10b981;
}

/* Product options - darker */
.dark-mode .product-options,
.dark-mode .modal-product-options {
    background-color: transparent;
}

.dark-mode .option-group label {
    color: #f1f5f9 !important;
}

.dark-mode .option-group select {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .option-group select:focus {
    border-color: #3b82f6;
    background-color: #1e293b;
}

/* Order form modal - darker */
.dark-mode #orderModal .modal-content {
    background-color: #1e293b;
}

.dark-mode .order-product-info {
    background-color: #0f172a;
    color: #cbd5e1;
}

.dark-mode .order-options {
    background-color: #0f172a;
}

.dark-mode .order-options p {
    color: #cbd5e1 !important;
}

.dark-mode .order-form {
    background-color: #1e293b;
}

.dark-mode .form-group input,
.dark-mode .form-group textarea,
.dark-mode .form-group select {
    background-color: #0f172a;
    border-color: #334155;
    color: #f1f5f9;
}

.dark-mode .form-group input::placeholder,
.dark-mode .form-group textarea::placeholder {
    color: #64748b;
}

.dark-mode .form-group input:focus,
.dark-mode .form-group textarea:focus,
.dark-mode .form-group select:focus {
    background-color: #1e293b;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* No products message - darker */
.dark-mode .no-products {
    color: #94a3b8 !important;
}

/* Buttons in shop - enhanced */
.dark-mode .btn-primary {
    background-color: #2563eb;
    color: #ffffff;
}

.dark-mode .btn-primary:hover {
    background-color: #1e40af;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
}

.dark-mode .btn-whatsapp {
    background-color: #25D366;
}

.dark-mode .btn-whatsapp:hover {
    background-color: #1ea952;
    box-shadow: 0 4px 12px rgba(37, 211, 102, 0.4);
}

.dark-mode .btn-email {
    background-color: #ea4335;
}

.dark-mode .btn-email:hover {
    background-color: #c5341f;
    box-shadow: 0 4px 12px rgba(234, 67, 53, 0.4);
}

/* Loading state - darker */
.dark-mode .products-grid p {
    color: #cbd5e1;
}

/* Scroll shadow effect */
.dark-mode .shop-controls {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

/* Enhanced card shadow in dark mode */
.dark-mode .product-card {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
}

.dark-mode .product-card:hover {
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5), 0 10px 10px -5px rgba(0, 0, 0, 0.4);
}

/* Modal shadow enhancement */
.dark-mode .modal-content {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}

/* Divider in modal */
.dark-mode .modal-body::before {
    background-color: #334155;
}

/* Error states */
.dark-mode .form-group input.error,
.dark-mode .form-group textarea.error {
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.05);
}

.dark-mode .error-message {
    color: #fca5a5 !important;
}

/* Success message */
.dark-mode .form-success {
    background-color: #10b981;
    color: #ffffff;
}

/* Grid layout background */
.dark-mode .products-grid {
    background-color: transparent;
}

/* ===== ENHANCED CONTRAST FOR READABILITY ===== */
.dark-mode .shop-header h1,
.dark-mode .shop-header p,
.dark-mode .product-name,
.dark-mode .modal-details h2 {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Price highlight */
.dark-mode .product-price,
.dark-mode .modal-price {
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(96, 165, 250, 0.3);
}

/* ===== Debug Helper (Remove in production) ===== */
/* Uncomment to see all elements borders for debugging */
/*
.dark-mode * {
    outline: 1px solid rgba(255, 0, 0, 0.2) !important;
}
*/

/* ===== End of Dark Mode Styles ===== */