/**
 * Dark Mode Styles
 * Comprehensive dark theme support
 */

/* Dark Mode Variables */
:root {
    --dark-bg-primary: #0f172a;
    --dark-bg-secondary: #1e293b;
    --dark-bg-tertiary: #334155;
    --dark-text-primary: #f1f5f9;
    --dark-text-secondary: #cbd5e1;
    --dark-text-muted: #94a3b8;
    --dark-border: #334155;
    --dark-shadow: rgba(0, 0, 0, 0.5);
}

/* Dark Mode Toggle */
.dark-mode-toggle {
    position: relative;
    width: 60px;
    height: 32px;
    background: #cbd5e1;
    border-radius: 16px;
    cursor: pointer;
    transition: background 0.3s;
    border: 2px solid transparent;
}

.dark-mode-toggle:hover {
    background: #94a3b8;
}

.dark-mode-toggle:focus {
    outline: none;
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.dark-mode-toggle .toggle-slider {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 24px;
    height: 24px;
    background: white;
    border-radius: 50%;
    transition: transform 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dark-mode-toggle.dark .toggle-slider {
    transform: translateX(28px);
    background: #fbbf24;
}

.dark-mode-toggle .toggle-icon {
    font-size: 12px;
    color: #475569;
    transition: color 0.3s;
}

.dark-mode-toggle.dark .toggle-icon {
    color: #f59e0b;
}

/* Dark Mode Body Styles */
body.dark-mode {
    background-color: var(--dark-bg-primary);
    color: var(--dark-text-primary);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Dark Mode Navigation */
body.dark-mode nav {
    background-color: var(--dark-bg-secondary) !important;
    border-bottom: 1px solid var(--dark-border);
}

body.dark-mode nav a,
body.dark-mode nav button {
    color: var(--dark-text-primary) !important;
}

body.dark-mode nav a:hover,
body.dark-mode nav button:hover {
    color: var(--primary-color, #60a5fa) !important;
}

body.dark-mode #mobile-menu {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border);
}

/* Dark Mode Sections */
body.dark-mode section {
    background-color: var(--dark-bg-primary) !important;
    color: var(--dark-text-primary);
}

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

body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-100 {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .text-gray-800,
body.dark-mode .text-gray-900 {
    color: var(--dark-text-primary) !important;
}

body.dark-mode .text-gray-600,
body.dark-mode .text-gray-700 {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .text-gray-500,
body.dark-mode .text-gray-400 {
    color: var(--dark-text-muted) !important;
}

/* Dark Mode Cards */
body.dark-mode .bg-white.rounded-xl,
body.dark-mode .bg-white.rounded-2xl,
body.dark-mode .bg-white.rounded-lg {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .border-gray-200,
body.dark-mode .border-gray-300 {
    border-color: var(--dark-border) !important;
}

/* Dark Mode Buttons */
body.dark-mode button.bg-white {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode button.bg-white:hover {
    background-color: var(--dark-bg-secondary) !important;
}

/* Dark Mode Inputs */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background-color: var(--dark-bg-tertiary) !important;
    border-color: var(--dark-border) !important;
    color: var(--dark-text-primary) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: var(--dark-text-muted) !important;
}

body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--primary-color, #60a5fa) !important;
}

/* Dark Mode Shadows */
body.dark-mode .shadow-md,
body.dark-mode .shadow-lg,
body.dark-mode .shadow-xl,
body.dark-mode .shadow-2xl {
    box-shadow: 0 4px 6px -1px var(--dark-shadow), 0 2px 4px -1px var(--dark-shadow) !important;
}

/* Dark Mode Footer */
body.dark-mode footer {
    background-color: var(--dark-bg-secondary) !important;
    border-top: 1px solid var(--dark-border);
}

body.dark-mode footer .text-gray-400 {
    color: var(--dark-text-muted) !important;
}

body.dark-mode footer a {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode footer a:hover {
    color: var(--primary-color, #60a5fa) !important;
}

/* Dark Mode Product Cards */
body.dark-mode .product-card {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

body.dark-mode .product-card:hover {
    box-shadow: 0 20px 25px -5px var(--dark-shadow), 0 10px 10px -5px var(--dark-shadow) !important;
}

/* Dark Mode Blog Cards */
body.dark-mode .blog-card {
    background-color: var(--dark-bg-secondary) !important;
}

/* Dark Mode USP Cards */
body.dark-mode .usp-card {
    background-color: var(--dark-bg-secondary) !important;
    border-color: var(--dark-border) !important;
}

/* Dark Mode Gallery Items */
body.dark-mode .gallery-item {
    background-color: var(--dark-bg-secondary) !important;
}

/* Dark Mode FAQ Items */
body.dark-mode .bg-gray-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Dark Mode Contact Form */
body.dark-mode .bg-white.rounded-3xl {
    background-color: var(--dark-bg-secondary) !important;
}

body.dark-mode .bg-gradient-to-br.from-white.to-gray-50 {
    background: linear-gradient(to bottom right, var(--dark-bg-secondary), var(--dark-bg-tertiary)) !important;
}

/* Dark Mode Loading Overlay */
body.dark-mode .loading-overlay {
    background: rgba(15, 23, 42, 0.95) !important;
}

body.dark-mode .loading-text {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .spinner {
    border-color: var(--dark-bg-tertiary);
    border-top-color: var(--primary-color, #60a5fa);
}

/* Dark Mode Error/Success Messages */
body.dark-mode .error-message {
    background-color: #7f1d1d !important;
    border-color: #991b1b !important;
    color: #fca5a5 !important;
}

body.dark-mode .success-message {
    background-color: #14532d !important;
    border-color: #166534 !important;
    color: #86efac !important;
}

/* Dark Mode Toast */
body.dark-mode .toast {
    background-color: var(--dark-bg-secondary) !important;
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Dark Mode Back to Top Button */
body.dark-mode #back-to-top {
    background-color: var(--dark-bg-secondary) !important;
    border: 1px solid var(--dark-border);
}

body.dark-mode #back-to-top:hover {
    background-color: var(--dark-bg-tertiary) !important;
}

/* Dark Mode Lightbox */
body.dark-mode #lightbox {
    background: rgba(0, 0, 0, 0.95) !important;
}

/* Dark Mode Tabs */
body.dark-mode .tab-button {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode .tab-button.active {
    color: var(--primary-color, #60a5fa) !important;
    border-color: var(--primary-color, #60a5fa) !important;
}

body.dark-mode .tab-button:hover {
    color: var(--dark-text-primary) !important;
    border-color: var(--dark-border) !important;
}

/* Dark Mode Breadcrumb */
body.dark-mode nav[aria-label="Breadcrumb"] {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode nav[aria-label="Breadcrumb"] a {
    color: var(--dark-text-secondary) !important;
}

body.dark-mode nav[aria-label="Breadcrumb"] a:hover {
    color: var(--primary-color, #60a5fa) !important;
}

/* Smooth Transitions - Exclude images and specific elements */
*:not(img):not(svg):not(path):not(circle):not(rect):not(line):not(polygon) {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Preserve image colors in dark mode */
body.dark-mode img {
    opacity: 0.95;
}

body.dark-mode img:hover {
    opacity: 1;
}

/* Dark Mode Code/Pre blocks */
body.dark-mode code,
body.dark-mode pre {
    background-color: var(--dark-bg-tertiary) !important;
    color: var(--dark-text-primary) !important;
}

/* Dark Mode Links */
body.dark-mode a:not(.bg-primary):not(.bg-blue-600) {
    color: var(--dark-text-primary);
}

body.dark-mode a:hover:not(.bg-primary):not(.bg-blue-600) {
    color: var(--primary-color, #60a5fa);
}

/* Dark Mode Gradients */
body.dark-mode .bg-gradient-to-br.from-gray-50 {
    background: linear-gradient(to bottom right, var(--dark-bg-secondary), var(--dark-bg-tertiary)) !important;
}

body.dark-mode .bg-gradient-to-br.from-gray-50.via-white {
    background: linear-gradient(to bottom right, var(--dark-bg-secondary), var(--dark-bg-tertiary), var(--dark-bg-secondary)) !important;
}

/* Dark Mode Hero Section */
body.dark-mode .bg-primary {
    background: linear-gradient(to right, var(--primary-color, #3b82f6), var(--secondary-color, #2563eb)) !important;
}

/* Dark Mode Contact Info Cards */
body.dark-mode .bg-blue-50,
body.dark-mode .bg-green-50,
body.dark-mode .bg-purple-50 {
    background-color: var(--dark-bg-tertiary) !important;
}

body.dark-mode .border-blue-300,
body.dark-mode .border-green-300,
body.dark-mode .border-purple-300 {
    border-color: var(--dark-border) !important;
}

/* Dark Mode Map Container */
body.dark-mode iframe {
    filter: brightness(0.9) contrast(1.1);
}

/* Dark Mode Prose Content */
body.dark-mode .prose {
    color: var(--dark-text-primary);
}

body.dark-mode .prose h1,
body.dark-mode .prose h2,
body.dark-mode .prose h3 {
    color: var(--dark-text-primary);
}

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

/* Dark Mode Table */
body.dark-mode table {
    background-color: var(--dark-bg-secondary);
    color: var(--dark-text-primary);
}

body.dark-mode table th {
    background-color: var(--dark-bg-tertiary);
    color: var(--dark-text-primary);
}

body.dark-mode table td {
    border-color: var(--dark-border);
}

body.dark-mode table tr:hover {
    background-color: var(--dark-bg-tertiary);
}