/* Dark Mode Overrides */
.dark body {
    background-color: #0f172a;
    color: #f8fafc;
}

.dark .glass-effect {
    background: rgba(15, 23, 42, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .neomorph {
    background: #1e293b;
    box-shadow:
        8px 8px 16px rgba(0, 0, 0, 0.4),
        -8px -8px 16px rgba(255, 255, 255, 0.05),
        inset 0 1px 2px rgba(255, 255, 255, 0.05);
}

.dark .neomorph-inset {
    background: #1e293b;
    box-shadow:
        inset 4px 4px 8px rgba(0, 0, 0, 0.4),
        inset -4px -4px 8px rgba(255, 255, 255, 0.05);
}

.dark .gradient-light {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
}

.dark .gradient-card {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
}

.dark .text-slate-900 {
    color: #f1f5f9 !important;
}

.dark .text-slate-600 {
    color: #94a3b8 !important;
}

.dark .text-slate-700 {
    color: #cbd5e1 !important;
}

.dark .bg-white {
    background-color: #1e293b !important;
}

.dark .bg-slate-100 {
    background-color: #1e293b !important;
}

.dark .bg-slate-50 {
    background-color: #0f172a !important;
}

.dark #navbar {
    background-color: rgba(15, 23, 42, 0.9);
}

.dark .shadow-3d {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
}

.dark .border-slate-200 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .bg-blue-50 {
    background-color: rgba(59, 130, 246, 0.1) !important;
}

.dark .text-blue-900 {
    color: #bfdbfe !important;
}

.dark .bg-green-50 {
    background-color: rgba(34, 197, 94, 0.1) !important;
}

.dark .text-green-900 {
    color: #bbf7d0 !important;
}

.dark .bg-red-50 {
    background-color: rgba(239, 68, 68, 0.1) !important;
}

.dark .text-red-900 {
    color: #fecaca !important;
}

.dark input,
.dark select,
.dark textarea {
    background-color: #1e293b !important;
    color: #f8fafc !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark #mobile-menu {
    background-color: #1e293b !important;
}

.dark .modal-content {
    background-color: #1e293b !important;
    color: #f8fafc !important;
}

/* Ensure product images are clear and not shaded */
.dark .product-image-container {
    background-color: #ffffff !important;
}

.dark .product-image-container img {
    filter: none !important;
    mix-blend-mode: normal !important;
}

/* Home Page specific overrides */
.dark .mesh-gradient {
    background:
        radial-gradient(at 0% 0%, rgba(239, 68, 68, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 0%, rgba(59, 130, 246, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(34, 197, 94, 0.15) 0px, transparent 50%),
        radial-gradient(at 0% 100%, rgba(168, 85, 247, 0.15) 0px, transparent 50%),
        linear-gradient(180deg, #0f172a 0%, #1e293b 100%) !important;
}

.dark .bg-white\/80 {
    background-color: rgba(30, 41, 59, 0.8) !important;
}

.dark .from-red-200\/40 {
    --tw-gradient-from: rgba(239, 68, 68, 0.2) !important;
}

.dark .to-blue-200\/40 {
    --tw-gradient-to: rgba(59, 130, 246, 0.2) !important;
}

.dark .bg-slate-100 {
    background-color: #1e293b !important;
}

.dark .border-red-200 {
    border-color: rgba(239, 68, 68, 0.3) !important;
}

.dark .border-white {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* Fix for why choose us section icons */
.dark .bg-red-100 {
    background-color: rgba(239, 68, 68, 0.2) !important;
}

.dark .bg-blue-100 {
    background-color: rgba(59, 130, 246, 0.2) !important;
}

.dark .bg-green-100 {
    background-color: rgba(34, 197, 94, 0.2) !important;
}

.dark .bg-yellow-100 {
    background-color: rgba(234, 179, 8, 0.2) !important;
}

/* SVG and Hero Visual refinement */
.dark svg ellipse[fill="#cbd5e1"] {
    fill: #000000 !important;
    opacity: 0.6 !important;
}

.dark svg circle[fill="#f1f5f9"] {
    fill: #1e293b !important;
    stroke: #334155 !important;
}

.dark .perspective-1000 [class*="bg-gradient-to-br from-red-200/40"] {
    background-image: radial-gradient(circle, rgba(239, 68, 68, 0.1) 0%, transparent 70%) !important;
}

/* Ensure secondary buttons are visible */
.dark .btn-3d.bg-white {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .btn-3d.bg-slate-900 {
    background: #f8fafc !important;
    color: #0f172a !important;
}

.dark .border-slate-300,
.dark .border-slate-100 {
    border-color: rgba(255, 255, 255, 0.05) !important;
}

/* Global Transition */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}