/* Dark Mode Styles - Comprehensive Version */

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 55px;
    height: 55px;
    background: linear-gradient(135deg, #f59e0b, #f97316);
    color: white;
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.5);
    z-index: 9998;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode-toggle:hover {
    transform: translateY(-5px) scale(1.1);
    box-shadow: 0 8px 20px rgba(245, 158, 11, 0.7);
}

.dark-mode-toggle:active {
    transform: scale(0.95);
}

@media (max-width: 768px) {
    .dark-mode-toggle {
        width: 50px;
        height: 50px;
        font-size: 20px;
        bottom: 85px;
        right: 15px;
    }
}

/* ============================================
   DARK MODE VARIABLES AND BASE STYLES
   ============================================ */
html.dark-mode {
    --dark: #f9fafb;
    --text: #e5e7eb;
    --light: #1f2937;
    --white: #111827;
    --border: #374151;
    --bg-primary: #0f172a;
    --bg-secondary: #1e293b;
    --bg-tertiary: #374151;
    background: #0f172a;
}

html.dark-mode body {
    background: #0f172a;
    color: #e5e7eb;
}

/* ============================================
   LAYOUT COMPONENTS
   ============================================ */
html.dark-mode .site-main {
    background: #0f172a;
}

html.dark-mode .container {
    color: #e5e7eb;
}

/* Header */
html.dark-mode .site-header {
    background: #1e293b;
    border-bottom: 1px solid #334155;
}

html.dark-mode .header-main {
    background: #1e293b;
}

html.dark-mode .header-top {
    background: #0f172a;
    color: #9ca3af;
}

html.dark-mode .header-top span,
html.dark-mode .header-top a {
    color: #9ca3af;
}

html.dark-mode .header-nav {
    background: linear-gradient(135deg, #1e293b, #334155);
}

html.dark-mode .nav-menu a {
    color: #e5e7eb !important;
}

html.dark-mode .nav-menu a:hover {
    color: #6366f1 !important;
}

html.dark-mode .logo-text {
    color: #f9fafb !important;
}

/* Footer */
html.dark-mode .site-footer {
    background: #0f172a;
    color: #9ca3af;
}

html.dark-mode .footer-main {
    background: #1e293b;
}

html.dark-mode .footer-col h3 {
    color: #f9fafb;
}

html.dark-mode .footer-col p,
html.dark-mode .footer-col a,
html.dark-mode .footer-col li {
    color: #9ca3af;
}

html.dark-mode .footer-col a:hover {
    color: #6366f1;
}

html.dark-mode .footer-bottom {
    background: #0f172a;
    border-top: 1px solid #374151;
}

/* ============================================
   CARDS AND COMPONENTS
   ============================================ */
html.dark-mode .card,
html.dark-mode .product-card,
html.dark-mode .article-card,
html.dark-mode .stat-card {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

html.dark-mode .product-card:hover,
html.dark-mode .article-card:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}

html.dark-mode .product-info,
html.dark-mode .article-info {
    background: #1f2937;
}

html.dark-mode .product-title a,
html.dark-mode .article-title a {
    color: #f3f4f6 !important;
}

html.dark-mode .product-title a:hover,
html.dark-mode .article-title a:hover {
    color: #6366f1 !important;
}

html.dark-mode .product-category {
    background: rgba(99, 102, 241, 0.2);
    color: #818cf8;
}

html.dark-mode .product-price .price-current {
    color: #6366f1;
}

html.dark-mode .product-price .price-original {
    color: #6b7280;
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
html.dark-mode h1,
html.dark-mode h2,
html.dark-mode h3,
html.dark-mode h4,
html.dark-mode h5,
html.dark-mode h6 {
    color: #f3f4f6 !important;
}

html.dark-mode p {
    color: #d1d5db;
}

html.dark-mode a {
    color: #60a5fa;
}

html.dark-mode .section-title {
    color: #f3f4f6 !important;
}

html.dark-mode .section-subtitle {
    color: #9ca3af !important;
}

/* ============================================
   FORMS AND INPUTS
   ============================================ */
html.dark-mode input,
html.dark-mode textarea,
html.dark-mode select {
    background: #374151 !important;
    color: #e5e7eb !important;
    border-color: #4b5563 !important;
}

html.dark-mode input::placeholder,
html.dark-mode textarea::placeholder {
    color: #9ca3af !important;
}

html.dark-mode input:focus,
html.dark-mode textarea:focus,
html.dark-mode select:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

html.dark-mode .search-input {
    background: #374151 !important;
    color: #e5e7eb !important;
}

html.dark-mode .search-bar {
    background: #374151;
    border-color: #4b5563;
}

html.dark-mode label {
    color: #e5e7eb;
}

/* ============================================
   BUTTONS
   ============================================ */
html.dark-mode .btn-outline {
    border-color: #6366f1;
    color: #818cf8;
    background: transparent;
}

html.dark-mode .btn-outline:hover {
    background: #6366f1;
    color: white;
}

html.dark-mode .btn-secondary {
    background: #374151;
    color: #e5e7eb;
}

/* ============================================
   DROPDOWN MENUS
   ============================================ */
html.dark-mode .dropdown-menu {
    background: #1f2937 !important;
    border-color: #374151 !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
}

html.dark-mode .dropdown-menu li a {
    color: #e5e7eb !important;
}

html.dark-mode .dropdown-menu li a:hover {
    background: #374151 !important;
    color: #6366f1 !important;
}

/* ============================================
   MODALS AND POPUPS
   ============================================ */
html.dark-mode .modal-content,
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:#fff"],
html.dark-mode [style*="background-color: white"] {
    background: #1f2937 !important;
    color: #e5e7eb !important;
}

html.dark-mode .newsletter-popup {
    background: #1e293b !important;
    border: 1px solid #334155;
}

html.dark-mode .newsletter-title {
    color: #f9fafb !important;
}

html.dark-mode .newsletter-text {
    color: #cbd5e1 !important;
}

/* ============================================
   TABLES
   ============================================ */
html.dark-mode table {
    color: #e5e7eb;
}

html.dark-mode table th {
    background: #374151;
    color: #f9fafb;
    border-color: #4b5563;
}

html.dark-mode table td {
    border-color: #374151;
    color: #e5e7eb;
}

html.dark-mode table tr:hover {
    background: #374151;
}

html.dark-mode .table-responsive {
    background: #1f2937;
}

/* ============================================
   BREADCRUMBS
   ============================================ */
html.dark-mode .breadcrumb {
    background: #1e293b !important;
}

html.dark-mode .breadcrumb a {
    color: #6366f1 !important;
}

html.dark-mode .breadcrumb span {
    color: #9ca3af !important;
}

/* ============================================
   PAGE-SPECIFIC CONTENT BLOCKS
   ============================================ */
html.dark-mode .reveal,
html.dark-mode [style*="background: white"],
html.dark-mode [style*="background:#fff"] {
    background: #1f2937 !important;
}

html.dark-mode [style*="box-shadow"] {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

/* Product Detail Page */
html.dark-mode .product-detail-wrapper {
    background: #1f2937 !important;
}

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

html.dark-mode .product-specs {
    background: #374151;
}

html.dark-mode .product-features>div {
    background: #1f2937 !important;
    border-color: #374151 !important;
}

/* Checkout Pages */
html.dark-mode .checkout-step {
    background: #1f2937;
}

html.dark-mode .checkout-sidebar {
    background: #1f2937;
}

html.dark-mode .order-summary {
    background: #1f2937;
    border-color: #374151;
}

/* User Dashboard */
html.dark-mode .dashboard-card {
    background: #1f2937;
    border-color: #374151;
}

html.dark-mode .dashboard-sidebar {
    background: #1e293b;
}

html.dark-mode .user-menu a {
    color: #e5e7eb;
}

html.dark-mode .user-menu a:hover {
    background: #374151;
}

/* ============================================
   ALERTS AND NOTIFICATIONS
   ============================================ */
html.dark-mode .alert-info {
    background: rgba(59, 130, 246, 0.2);
    border-color: #3b82f6;
    color: #60a5fa;
}

html.dark-mode .alert-success {
    background: rgba(16, 185, 129, 0.2);
    border-color: #10b981;
    color: #34d399;
}

html.dark-mode .alert-warning {
    background: rgba(245, 158, 11, 0.2);
    border-color: #f59e0b;
    color: #fbbf24;
}

html.dark-mode .alert-danger {
    background: rgba(239, 68, 68, 0.2);
    border-color: #ef4444;
    color: #f87171;
}

/* ============================================
   SPECIAL SECTIONS
   ============================================ */
/* Hero Section */
html.dark-mode .hero-section {
    background: linear-gradient(135deg, #1e293b, #0f172a) !important;
}

/* Stats Section */
html.dark-mode .stats-section {
    background: #1e293b !important;
}

/* Features Section */
html.dark-mode .section-features {
    background: #1e293b !important;
}

html.dark-mode .feature-box {
    background: #1f2937 !important;
}

/* Track Order Section */
html.dark-mode .track-order-section {
    background: linear-gradient(135deg, #1e293b, #374151) !important;
}

/* Cookie Consent */
html.dark-mode #cookieConsent {
    background: linear-gradient(135deg, #0f172a, #1e293b) !important;
}

/* ============================================
   404 PAGE
   ============================================ */
html.dark-mode .container>.reveal {
    background: #1f2937 !important;
}

/* ============================================
   SCROLLBAR
   ============================================ */
html.dark-mode ::-webkit-scrollbar {
    width: 10px;
}

html.dark-mode ::-webkit-scrollbar-track {
    background: #1e293b;
}

html.dark-mode ::-webkit-scrollbar-thumb {
    background: #4b5563;
    border-radius: 5px;
}

html.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #6b7280;
}

/* ============================================
   INLINE STYLES OVERRIDE (for dynamic content)
   ============================================ */
html.dark-mode [style*="color: var(--dark)"],
html.dark-mode [style*="color:var(--dark)"] {
    color: #f3f4f6 !important;
}

html.dark-mode [style*="color: #1f2937"],
html.dark-mode [style*="color:#1f2937"] {
    color: #f3f4f6 !important;
}

html.dark-mode [style*="color: #6b7280"],
html.dark-mode [style*="color:#6b7280"] {
    color: #9ca3af !important;
}

html.dark-mode [style*="background: #f9fafb"],
html.dark-mode [style*="background:#f9fafb"],
html.dark-mode [style*="background: var(--light)"] {
    background: #1e293b !important;
}

html.dark-mode [style*="background: #f3f4f6"],
html.dark-mode [style*="background:#f3f4f6"] {
    background: #374151 !important;
}

html.dark-mode [style*="border-color: #e5e7eb"],
html.dark-mode [style*="border: 2px solid var(--border)"] {
    border-color: #4b5563 !important;
}

/* ============================================
   SMOOTH TRANSITIONS
   ============================================ */
body,
.site-header,
.site-footer,
.site-main,
.card,
.product-card,
.article-card,
.container,
input,
textarea,
select,
button,
a {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* ============================================
   PRICE STYLING
   ============================================ */
html.dark-mode [style*="color: var(--primary)"] {
    color: #818cf8 !important;
}

/* ============================================
   IMAGE PLACEHOLDERS
   ============================================ */
html.dark-mode .product-image {
    background: #374151;
}

html.dark-mode img {
    opacity: 0.95;
}