/**
 * Dark Theme for Refineder Ecommerce
 * A magical, cinematic dark experience.
 */

html[data-theme="dark"] {
    color-scheme: dark;
    
    /* Core Colors - Deep Space Palette */
    --background: #04060b;
    --foreground: #e2e8f0;
    
    --color-main-primary: #0a0f1d;
    --color-text-primary: #f1f5f9;
    
    /* Magical Gradients */
    --color-main-gradient: linear-gradient(135deg, #7c5e28 0%, #b8974d 50%, #7c5e28 100%);
    
    /* Component Colors */
    --card: #0d1321;
    --card-foreground: #f8fafc;
    --muted-card-foreground: #94a3b8;
    
    --primary: #f1f5f9;
    --primary-foreground: #020617;
    
    --secondary: #1e293b;
    --secondary-foreground: #cbd5e1;
    
    --muted: #0f172a;
    --muted-foreground: #64748b;
    
    --border: #1e293b;
    --muted-border: #1e293b;
    
    --accent: #1e293b;
    --accent-foreground: #f1f5f9;
    
    --input: #0f172a;
    --ring: #334155;

    /* Brand Accent Colors */
    --color-emerold-1: #134e4a;
    --color-emerold-3: #2dd4bf;
    --color-gold-1: #713f12;
}

/* Global Dark Styles */
html[data-theme="dark"] body {
    background-color: var(--background);
    background-image: 
        radial-gradient(circle at 0% 0%, rgba(30, 58, 138, 0.15) 0%, transparent 40%),
        radial-gradient(circle at 100% 100%, rgba(20, 184, 166, 0.1) 0%, transparent 40%);
    color: var(--foreground);
}

/* Fix for hardcoded white backgrounds and light sections */
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-card,
html[data-theme="dark"] .bg-background,
html[data-theme="dark"] .bg-foreground,
html[data-theme="dark"] [class*="bg-white/"],
html[data-theme="dark"] [class*="bg-[#eee]"],
html[data-theme="dark"] [class*="bg-[#f"],
html[data-theme="dark"] [class*="bg-[#e"],
html[data-theme="dark"] section.bg-white,
html[data-theme="dark"] div.bg-white,
html[data-theme="dark"] article.bg-white,
html[data-theme="dark"] section.bg-foreground,
html[data-theme="dark"] div.bg-foreground {
    background-color: #0d1321 !important;
    color: var(--foreground) !important;
    border-color: #1e293b !important;
}

/* Fix for light sections that might be using other classes */
html[data-theme="dark"] .forest__sec,
html[data-theme="dark"] .collection__section {
    background-color: #0d1321 !important;
}

/* Product and Blog Boxes */
html[data-theme="dark"] article.bg-white,
html[data-theme="dark"] .bg-white.flex-col,
html[data-theme="dark"] [style*="box-shadow: 0 0 5px hsl(0, 0%, 80%)"],
html[data-theme="dark"] section.bg-white.grow,
html[data-theme="dark"] .product-list article,
html[data-theme="dark"] .porjects__slider article {
    background-color: #111a2e !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4) !important;
    border: 1px solid #1e293b !important;
}

/* Fav Icons and Tags/Badges over Product Boxes */
html[data-theme="dark"] .absolute.top-5.right-5, 
html[data-theme="dark"] .absolute.top-2.right-2,
html[data-theme="dark"] .fav-icon,
html[data-theme="dark"] .product-badge,
html[data-theme="dark"] .tag-badge {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
    border: none !important;
    border-radius: 9999px !important; /* Force circle shape */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
}

/* Hover Enhancements - No more full white */
html[data-theme="dark"] .hover\:bg-border:hover,
html[data-theme="dark"] .hover\:bg-white:hover,
html[data-theme="dark"] .hover\:bg-gray-100:hover,
html[data-theme="dark"] .porjects__slider article:hover,
html[data-theme="dark"] .product-list article:hover a:hover,
html[data-theme="dark"] .fav-icon:hover,
html[data-theme="dark"] .absolute.top-5.right-5:hover {
    background-color: #2dd4bf !important; /* Teal background on hover */
    color: #042f2e !important; /* Dark text/icon on hover for contrast */
}

html[data-theme="dark"] .fav-icon:hover i,
html[data-theme="dark"] .absolute.top-5.right-5:hover i,
html[data-theme="dark"] .product-list article:hover .fav-icon i {
    color: #042f2e !important; /* Dark icon on teal hover */
}

html[data-theme="dark"] .absolute.top-5.right-5 i,
html[data-theme="dark"] .fav-icon i {
    color: #2dd4bf !important;
}

/* Hero Icons and Floating Badges */
html[data-theme="dark"] .hero-icon__mountains,
html[data-theme="dark"] .hero-icon__route,
html[data-theme="dark"] .hero-icon__camp,
html[data-theme="dark"] .hero-icon__viewport,
html[data-theme="dark"] .about-icon__route {
    background-color: rgba(30, 41, 59, 0.7) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .hero-icon__mountains p,
html[data-theme="dark"] .hero-icon__route p,
html[data-theme="dark"] .hero-icon__camp p,
html[data-theme="dark"] .hero-icon__viewport p {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .bg-white\/50.backdrop-blur-xs {
    background-color: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(8px);
}

/* Navbar Dark Mode - Transparent at start, Glass on scroll */
html[data-theme="dark"] #navbar {
    background-color: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid transparent !important;
    transition: all 0.4s ease;
}

html[data-theme="dark"] #navbar.nav-scrolled {
    background-color: rgba(4, 6, 11, 0.75) !important;
    backdrop-filter: blur(15px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(15px) saturate(180%) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding-top: 0.8rem !important;
    padding-bottom: 0.8rem !important;
}

html[data-theme="dark"] #navMobile {
    background-color: transparent !important;
    border-left: 1px solid transparent !important;
}

@media (max-width: 767px) {
    html[data-theme="dark"] #navMobile {
        background-color: #0d1321 !important;
        border-left: 1px solid #1e293b !important;
    }
}

html[data-theme="dark"] #navMobile,
html[data-theme="dark"] #navList,
html[data-theme="dark"] .nav-wrapper,
html[data-theme="dark"] #navbar .flex.md\:bg-\[\#CCE4E1\] {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #navList {
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #navMobile a,
html[data-theme="dark"] #navList a {
    color: #e2e8f0 !important;
}

html[data-theme="dark"] #navMobile a:hover,
html[data-theme="dark"] #navList a:hover {
    color: #2dd4bf !important;
}

html[data-theme="dark"] #navMobile a.active,
html[data-theme="dark"] #navList a.active {
    background-color: #2dd4bf !important;
    color: #042f2e !important;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.3);
}

/* Input Boxes and Form Elements */
html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] [class*="bg-[#EDEDED]"],
html[data-theme="dark"] #searchInput {
    background-color: #0f172a !important;
    background: #0f172a !important; /* Force background */
    color: #f1f5f9 !important;
    border: 1px solid #334155 !important;
    border-radius: 9999px; /* Maintain rounded style */
    box-shadow: none !important; /* Remove any strange shadows */
    outline: none !important;
}

/* Search Specific Fixes */
html[data-theme="dark"] #searchBox {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

html[data-theme="dark"] #searchInput input {
    background: transparent !important;
    background-color: transparent !important;
    color: #f1f5f9 !important;
    border: none !important; /* Remove inner border */
    box-shadow: none !important;
}

html[data-theme="dark"] #searchIcon {
    background-color: #2dd4bf !important;
    color: #042f2e !important;
    box-shadow: 0 0 15px rgba(45, 212, 191, 0.3);
}

/* Newsletter / Community Section Fixes */
html[data-theme="dark"] .container__sec.bg-color-gold-1 {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border: 1px solid #334155;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .container__sec.bg-color-gold-1 h2 {
    color: #2dd4bf !important;
}

html[data-theme="dark"] .container__sec.bg-color-gold-1 .bg-card {
    background-color: #2dd4bf !important;
    color: #042f2e !important;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.3);
}

html[data-theme="dark"] .container__sec.bg-color-gold-1 .bg-card:hover {
    background-color: #14b8a6 !important;
    transform: translateY(-2px);
}

/* Footer Newsletter Fixes */
html[data-theme="dark"] footer [style*="background-color: hsl(0, 0%, 95%)"] {
    background-color: #0f172a !important;
    border: 1px solid #334155 !important;
    box-shadow: none !important;
    outline: none !important;
}

html[data-theme="dark"] footer input {
    background-color: transparent !important;
    background: transparent !important;
    color: #f1f5f9 !important;
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}

html[data-theme="dark"] footer button.bg-white,
html[data-theme="dark"] footer button,
html[data-theme="dark"] footer .flex.items-center.flex-wrap.gap-4 button {
    background-color: #2dd4bf !important;
    background: #2dd4bf !important; /* Force teal background */
    color: #042f2e !important;
    font-weight: bold !important;
    border: none !important;
    box-shadow: 0 4px 15px rgba(45, 212, 191, 0.4) !important;
    display: block !important;
    min-width: 120px !important;
    padding: 12px 24px !important;
}

html[data-theme="dark"] footer button.bg-white:hover {
    background-color: #14b8a6 !important;
    transform: translateY(-2px);
}

html[data-theme="dark"] footer [style*="background-color: hsl(0, 0%, 90%)"] {
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Cart Icon Dark */
html[data-theme="dark"] #cartIconItem a {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4) !important;
}

html[data-theme="dark"] #cartIconItem a i {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] #cartNumberOfItems {
    background-color: #2dd4bf !important;
    color: #042f2e !important;
    font-weight: bold;
}

/* Menu Icon for Mobile */
html[data-theme="dark"] #menuIcon i {
    color: #f1f5f9 !important;
}

/* Typography Fixes */
html[data-theme="dark"] .text-black,
html[data-theme="dark"] .text-foreground,
html[data-theme="dark"] .text-color-text-primary,
html[data-theme="dark"] .text-color-main-primary,
html[data-theme="dark"] h1, 
html[data-theme="dark"] h2, 
html[data-theme="dark"] h3, 
html[data-theme="dark"] h4, 
html[data-theme="dark"] h5, 
html[data-theme="dark"] h6 {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .text-white {
    color: #f1f5f9 !important;
}

html[data-theme="dark"] p,
html[data-theme="dark"] span:not(.ml-audio-btn-text):not(.ml-audio-hint) {
    color: #cbd5e1;
}

html[data-theme="dark"] .text-gray-400,
html[data-theme="dark"] .text-gray-500,
html[data-theme="dark"] .text-gray-600,
html[data-theme="dark"] .text-muted-foreground {
    color: #94a3b8 !important;
}

/* Buttons and Interactive Elements */
html[data-theme="dark"] .rounded-full.bg-white {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
}

html[data-theme="dark"] .rounded-full.bg-white.text-color-main-primary {
    color: #2dd4bf !important;
}

/* Footer Dark */
html[data-theme="dark"] footer {
    background-color: #02040a !important;
    border-top: 1px solid #1e293b;
}

/* Magic Tree Dark Overrides */
html[data-theme="dark"] .ml-locale-leaf a {
    background: linear-gradient(140deg, #0f172a, #1e293b);
    border-color: #334155;
    color: #f1f5f9;
}

html[data-theme="dark"] .ml-locale-leaf.is-current a {
    background: linear-gradient(140deg, #1e293b, #334155);
    border-color: #475569;
}

/* Hero Section Map Pin Fixes */
html[data-theme="dark"] .absolute.flex.items-center.gap-2.bottom-5.right-20 div.bg-\[\#AAD2CE\],
html[data-theme="dark"] .absolute.flex.items-center.gap-2.bottom-5.right-20 .hidden.rounded-full.bg-\[\#AAD2CE\] {
    background-color: #1e293b !important;
    background: #1e293b !important;
    border: none !important; /* Remove border */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    color: #f1f5f9 !important;
}

html[data-theme="dark"] .absolute.flex.items-center.gap-2.bottom-5.right-20 {
    background: transparent !important;
    border: none !important;
}

html[data-theme="dark"] .absolute.flex.items-center.gap-2.bottom-5.right-20 svg {
    color: #2dd4bf !important;
}

html[data-theme="dark"] .absolute.flex.items-center.gap-2.bottom-5.right-20 small.text-gray-700 {
    color: #94a3b8 !important;
}

html[data-theme="dark"] .bg-gray-100,
html[data-theme="dark"] .bg-gray-200,
html[data-theme="dark"] .bg-gray-300,
html[data-theme="dark"] .bg-muted-border,
html[data-theme="dark"] .border-gray-200,
html[data-theme="dark"] .border-gray-300,
html[data-theme="dark"] .border-muted-border,
html[data-theme="dark"] [class*="bg-[#CCE4E1]"] {
    background-color: #1e293b !important;
    border-color: #334155 !important;
}

html[data-theme="dark"] .bg-gray-200.text-color-main-primary,
html[data-theme="dark"] .bg-gray-200 p,
html[data-theme="dark"] .bg-gray-200 span,
html[data-theme="dark"] [class*="bg-[#CCE4E1]"] p,
html[data-theme="dark"] [class*="bg-[#CCE4E1]"] span {
    color: #f1f5f9 !important;
}

/* Contact Page Specific Fixes */
html[data-theme="dark"] .contact-grid article.bg-secondary-foreground {
    background-color: #111a2e !important;
    border: 1px solid #1e293b;
}

html[data-theme="dark"] .contact-grid .bg-white.rounded-full {
    background-color: #2d3a5a !important;
}

html[data-theme="dark"] .contact-grid .bg-white.rounded-full i {
    color: #2dd4bf !important;
}

html[data-theme="dark"] .shadow-lg,
html[data-theme="dark"] .shadow-md {
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}