/* Dark Mode Styles for NeoVolt */

/* Dark Mode Variables */
:root {
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --text-primary: #1f2937;
    --text-secondary: #4b5563;
    --border-color: #e5e7eb;
}

.dark-mode {
    --bg-primary: #1a1a1a;
    --bg-secondary: #2d2d2d;
    --text-primary: #f3f4f6;
    --text-secondary: #d1d5db;
    --border-color: #374151;
}

/* Dark Mode Toggle Button */
.dark-mode-toggle {
    position: relative;
    width: 60px;
    height: 30px;
    background: #e5e7eb;
    border-radius: 50px;
    cursor: pointer;
    transition: background 0.3s ease;
    display: flex;
    align-items: center;
    padding: 0 5px;
}

.dark-mode-toggle.active {
    background: #0066cc;
}

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

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

.dark-mode-toggle i {
    font-size: 12px;
    color: #fbbf24;
}

/* Dark Mode Aplikacja */
.dark-mode {
    background-color: #1a1a1a;
    color: #f3f4f6;
}

.dark-mode body {
    background-color: #1a1a1a;
}

/* Navigation */
.dark-mode nav {
    background-color: #111111 !important;
    border-bottom: 1px solid #374151;
    overflow: visible !important;
}

/* Navigation container - allow overflow for glow effect */
.dark-mode nav .container {
    overflow: visible !important;
}

.dark-mode .nav-link {
    color: #d1d5db !important;
}

.dark-mode .nav-link:hover {
    color: #ffffff !important;
}

/* Backgrounds */
.dark-mode .bg-white {
    background-color: #2d2d2d !important;
}

.dark-mode .bg-light,
.dark-mode .bg-gray-50 {
    background-color: #1f1f1f !important;
}

.dark-mode .bg-gray-100 {
    background-color: #2d2d2d !important;
}

/* Specific background fixes for better contrast */
.dark-mode .bg-blue-50,
.dark-mode .bg-blue-100 {
    background-color: #1e293b !important;
}

.dark-mode .bg-green-50,
.dark-mode .bg-green-100 {
    background-color: #1a2e1a !important;
}

/* Fix for light gradients - make them dark */
.dark-mode [class*="from-blue-50"],
.dark-mode [class*="from-green-50"],
.dark-mode [class*="to-blue-50"],
.dark-mode [class*="to-green-50"] {
    background: linear-gradient(to bottom right, #1e293b, #1a2e1a) !important;
}

/* Specific gradient overrides */
.dark-mode .bg-gradient-to-br.from-blue-50 {
    background: linear-gradient(to bottom right, #1e293b, #1a2e1a) !important;
}

/* Override inline gradient styles in dark mode */
.dark-mode section[class*="from-blue-50"],
.dark-mode section[class*="from-green-50"],
.dark-mode div[class*="from-blue-50"],
.dark-mode div[class*="from-green-50"] {
    background: linear-gradient(135deg, #1e293b 0%, #1a2e1a 100%) !important;
}

/* Force dark gradients for all light color combinations */
.dark-mode .bg-gradient-to-br.from-blue-50.to-green-50,
.dark-mode .bg-gradient-to-br.from-green-50.to-blue-50 {
    background: linear-gradient(135deg, #1e293b 0%, #1a2e1a 100%) !important;
}

/* Ensure text is visible on dark gradients */
.dark-mode [class*="from-blue-50"] *:not([class*="text-white"]):not([class*="text-primary"]):not([class*="text-secondary"]),
.dark-mode [class*="from-green-50"] *:not([class*="text-white"]):not([class*="text-primary"]):not([class*="text-secondary"]) {
    color: #f3f4f6 !important;
}

/* Better approach - dark overlay for light gradient sections */
.dark-mode section.bg-gradient-to-br[class*="from-blue-50"],
.dark-mode section.bg-gradient-to-br[class*="from-green-50"],
.dark-mode section.bg-gradient-to-br[class*="to-blue-50"],
.dark-mode section.bg-gradient-to-br[class*="to-green-50"] {
    position: relative;
    background: #1e293b !important;
}

.dark-mode section.bg-gradient-to-br[class*="from-blue-50"]::before,
.dark-mode section.bg-gradient-to-br[class*="from-green-50"]::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(30, 41, 59, 0.9) 0%, rgba(26, 46, 26, 0.9) 100%);
    pointer-events: none;
    z-index: 1;
}

.dark-mode section.bg-gradient-to-br[class*="from-blue-50"] > *,
.dark-mode section.bg-gradient-to-br[class*="from-green-50"] > * {
    position: relative;
    z-index: 10;
}

/* Same for divs with light gradients */
.dark-mode div.bg-gradient-to-br[class*="from-blue-50"],
.dark-mode div.bg-gradient-to-br[class*="from-green-50"] {
    background: linear-gradient(135deg, #1e293b 0%, #1a2e1a 100%) !important;
}

/* Ensure all text on light gradient backgrounds is visible */
.dark-mode [class*="from-blue-50"] h1,
.dark-mode [class*="from-blue-50"] h2,
.dark-mode [class*="from-blue-50"] h3,
.dark-mode [class*="from-blue-50"] h4,
.dark-mode [class*="from-blue-50"] p,
.dark-mode [class*="from-blue-50"] li,
.dark-mode [class*="from-green-50"] h1,
.dark-mode [class*="from-green-50"] h2,
.dark-mode [class*="from-green-50"] h3,
.dark-mode [class*="from-green-50"] h4,
.dark-mode [class*="from-green-50"] p,
.dark-mode [class*="from-green-50"] li {
    color: #f3f4f6 !important;
}

/* Text */
.dark-mode .text-dark,
.dark-mode .text-gray-900,
.dark-mode h1,
.dark-mode h2,
.dark-mode h3,
.dark-mode h4,
.dark-mode h5,
.dark-mode h6 {
    color: #f3f4f6 !important;
}



.dark-mode .text-gray-700,
.dark-mode .text-gray-600,
.dark-mode p,
.dark-mode li,
.dark-mode span:not(.text-white):not(.text-primary):not(.text-secondary) {
    color: #d1d5db !important;
}

.dark-mode .text-gray-500,
.dark-mode .text-gray-400 {
    color: #9ca3af !important;
}

.dark-mode .text-white {
    color: #ffffff !important;
}

/* Force primary and secondary text colors - must be after span rules */
.dark-mode .text-primary,
.dark-mode span.text-primary,
.dark-mode h1 > .text-primary,
.dark-mode h2 > .text-primary,
.dark-mode h3 > .text-primary,
.dark-mode h1 > span.text-primary,
.dark-mode h2 > span.text-primary,
.dark-mode h3 > span.text-primary {
    color: #0EA5E9 !important;
    opacity: 1 !important;
}

.dark-mode .text-secondary,
.dark-mode span.text-secondary {
    color: #10B981 !important;
    opacity: 1 !important;
}

/* Borders */
.dark-mode .border-gray-200,
.dark-mode .border-gray-300 {
    border-color: #374151 !important;
}

.dark-mode .border-blue-200 {
    border-color: #1e40af !important;
}

.dark-mode .border-green-400 {
    border-color: #10b981 !important;
}

.dark-mode [class*="border-2"] {
    border-width: 2px;
}

/* Cards and boxes */
.dark-mode .shadow-xl,
.dark-mode .shadow-lg,
.dark-mode .shadow-2xl {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.dark-mode .rounded-xl,
.dark-mode .rounded-2xl,
.dark-mode .rounded-lg {
    border: 1px solid #374151;
}

/* Forms */
.dark-mode input,
.dark-mode textarea,
.dark-mode select {
    background-color: #2d2d2d !important;
    color: #f3f4f6 !important;
    border-color: #374151 !important;
}

.dark-mode input::placeholder,
.dark-mode textarea::placeholder {
    color: #6b7280 !important;
}

.dark-mode input:focus,
.dark-mode textarea:focus,
.dark-mode select:focus {
    background-color: #374151 !important;
    border-color: #0066cc !important;
}

/* Footer */
.dark-mode footer {
    background-color: #0a0a0a !important;
    border-top: 1px solid #374151;
}

/* Buttons - preserve primary colors */
.dark-mode .bg-primary,
.dark-mode .bg-secondary,
.dark-mode .bg-green-500,
.dark-mode .bg-blue-600 {
    /* Keep button colors bright */
}

/* Gradient overlays - make darker */
.dark-mode .hero-overlay {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.85) 0%, rgba(10, 20, 40, 0.9) 100%) !important;
}

/* Hero sections - ensure content is above background */
.dark-mode section.pt-32 .container {
    position: relative;
    z-index: 20 !important;
}

.dark-mode section.pt-32 .container * {
    position: relative;
    z-index: 1;
}

/* Stats section */
.dark-mode .stats-card {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%) !important;
}

/* Cookie banner */
.dark-mode #cookie-banner {
    background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
}

/* CTA sections - keep gradients but ensure readability */
.dark-mode .bg-gradient-to-br,
.dark-mode .bg-gradient-to-r,
.dark-mode .bg-gradient-to-l,
.dark-mode .bg-gradient-to-t,
.dark-mode .bg-gradient-to-b {
    /* Keep gradient colors - they are already colorful */
}

/* Tables */
.dark-mode table {
    background-color: #2d2d2d;
}

.dark-mode th {
    background-color: #374151 !important;
    color: #f3f4f6 !important;
}

.dark-mode td {
    border-color: #374151 !important;
    color: #d1d5db !important;
}

/* Mobile menu */
.dark-mode #mobile-menu {
    background-color: #111111 !important;
}

/* FAQ Section */
.dark-mode .faq-question {
    background-color: #2d2d2d !important;
    color: #f3f4f6 !important;
}

.dark-mode .faq-question:hover {
    background-color: #374151 !important;
}

.dark-mode .faq-answer {
    background-color: #1f1f1f !important;
    color: #d1d5db !important;
}

/* Section headings */
.dark-mode section {
    color: #f3f4f6;
}

/* Hero sections with images - DISABLED (causes text overlap issues) */
/* The gradient overlay in HTML is sufficient for dark mode */

/* Stats cards */
.dark-mode .stat-card {
    background-color: #2d2d2d !important;
}

/* Service cards */
.dark-mode .service-card {
    background-color: #2d2d2d !important;
}

/* Pricing cards */
.dark-mode .pricing-card {
    background-color: #2d2d2d !important;
    border-color: #374151 !important;
}

/* Testimonial cards */
.dark-mode .testimonial-card {
    background-color: #2d2d2d !important;
    border-color: #374151 !important;
}

/* Override any remaining white backgrounds */
.dark-mode div[style*="background: white"],
.dark-mode div[style*="background-color: white"],
.dark-mode section[style*="background: white"],
.dark-mode section[style*="background-color: white"] {
    background-color: #2d2d2d !important;
}

/* Ensure readability on all backgrounds */
.dark-mode * {
    border-color: #374151;
}

/* Fix for any inline styles */
.dark-mode [style*="color: #1f2937"],
.dark-mode [style*="color: #111827"],
.dark-mode [style*="color: black"] {
    color: #f3f4f6 !important;
}

/* Smooth transition - only for specific elements to improve performance */
.dark-mode,
.dark-mode nav,
.dark-mode .bg-white,
.dark-mode button,
.dark-mode input,
.dark-mode textarea {
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Images - slight opacity reduction in dark mode */
.dark-mode img {
    opacity: 0.9;
}

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

/* Links in content */
.dark-mode a:not(.bg-primary):not(.bg-secondary):not(.bg-green-500):not(.whatsapp-button) {
    color: #60a5fa;
}

.dark-mode a:not(.bg-primary):not(.bg-secondary):not(.bg-green-500):not(.whatsapp-button):hover {
    color: #93c5fd;
}

/* Code and pre (if any) */
.dark-mode code,
.dark-mode pre {
    background-color: #1f1f1f;
    color: #10b981;
}

/* Scrollbar dark mode */
.dark-mode::-webkit-scrollbar {
    width: 12px;
}

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

.dark-mode::-webkit-scrollbar-thumb {
    background: #374151;
    border-radius: 6px;
}

.dark-mode::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* Additional fixes for white backgrounds */
.dark-mode [class*="bg-blue-"] {
    /* Keep blue backgrounds but ensure text is readable */
}

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

.dark-mode .prose h1,
.dark-mode .prose h2,
.dark-mode .prose h3,
.dark-mode .prose h4 {
    color: #f3f4f6 !important;
}

/* Image containers */
.dark-mode .image-overlay {
    background-color: #2d2d2d !important;
}

/* Contact cards */
.dark-mode .contact-card {
    background-color: #2d2d2d !important;
}

/* Hover states */
.dark-mode .hover\:bg-gray-50:hover {
    background-color: #374151 !important;
}

.dark-mode .hover\:bg-gray-100:hover {
    background-color: #4b5563 !important;
}

/* Ensure all div backgrounds are dark */
.dark-mode div:not([class*="bg-primary"]):not([class*="bg-secondary"]):not([class*="bg-green"]):not([class*="bg-blue"]):not([class*="bg-red"]):not([class*="bg-gradient"]) {
    /* This will be overridden by specific classes but provides a fallback */
}

/* Label colors */
.dark-mode label {
    color: #d1d5db !important;
}

/* Strong text */
.dark-mode strong {
    color: #f3f4f6 !important;
}

/* List items */
.dark-mode ul li,
.dark-mode ol li {
    color: #d1d5db !important;
}

/* Pricing notice section in dark mode */
.dark-mode .pricing-notice {
    background-color: #1e293b !important;
    border-bottom-color: #374151 !important;
}

.dark-mode .notice-icon {
    color: #fbbf24 !important;
}

.dark-mode .notice-heading {
    color: #f3f4f6 !important;
}

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

.dark-mode .notice-text strong {
    color: #fbbf24 !important;
    font-weight: 700;
}

/* Logo container - ensure it's always on top */
nav .flex.items-center:first-child,
nav a[href="index.html"] {
    position: relative;
    z-index: 9999 !important;
}

/* Logo - ensure it's always on top and visible */
nav img[alt*="NeoVolt"] {
    position: relative;
    z-index: 9999 !important;
}

/* Logo - neon glow effect in dark mode (optimized) */
.dark-mode nav img[alt*="NeoVolt"] {
    /* Simplified neon effect for better performance */
    filter: brightness(0) invert(1) brightness(1.2) 
            drop-shadow(0 0 10px rgba(255, 215, 0, 0.8)) 
            drop-shadow(0 0 20px rgba(14, 165, 233, 0.5));
    transition: filter 0.3s ease;
    position: relative;
    z-index: 9999 !important;
    will-change: filter;
}

/* Extra glow on hover */
.dark-mode nav img[alt*="NeoVolt"]:hover {
    filter: brightness(0) invert(1) brightness(1.3) 
            drop-shadow(0 0 15px rgba(255, 215, 0, 1)) 
            drop-shadow(0 0 30px rgba(14, 165, 233, 0.7));
}