/* ============================================
   ASTROESSENTIAL - LIGHT THEME
   Celestial Light Mode - Astrological Inspired
   ============================================ */

/* Light Theme Root Variables - IMPROVED FOR EYE COMFORT & REDUCED CONTRAST */
.light {
    /* Primary Background Colors - Softer, gentler on eyes */
    --color-bg-primary: #faf9f7; /* Very soft warm off-white (reduced contrast) */
    --color-bg-secondary: #f3f1ee; /* Gentle warm gray */
    --color-bg-tertiary: #ebe8e5; /* Light warm gray */
    --color-bg-elevated: #ffffff; /* Pure white for cards */

    /* Astrological Accent Colors - VISIBLE BUT SOFT */
    --color-gold-light: #b8914f; /* Medium gold - primary accent (visible but not harsh) */
    --color-gold-lighter: #d4a960; /* Lighter gold - hover states */
    --color-gold-soft: #f0e6d8; /* Very light gold background */
    --color-gold-dark: #9a7840; /* Darker gold - active states */

    /* Text Colors - REDUCED CONTRAST for eye comfort */
    --color-text-primary: #2d2a27; /* Dark gray-brown (softer than pure black) */
    --color-text-secondary: #524e4a; /* Medium-dark gray */
    --color-text-tertiary: #706c67; /* Medium gray */
    --color-text-muted: #8d8984; /* Light gray - LIGHTER than before */
    --color-text-light: #a8a39f; /* Very light gray for subtle text */

    /* Mystical Purple Accents for Light Mode - SOFT & VISIBLE */
    --color-purple-soft: #e8e0f2; /* Very soft lavender background */
    --color-purple-light: #b39ac8; /* Medium purple - hover */
    --color-purple-medium: #8c6fa8; /* Purple - primary */
    --color-purple-dark: #6d5585; /* Dark purple - active */
    --color-purple-text: #5a4570; /* Deep purple for text */

    /* Border Colors - Subtle but visible */
    --color-border-light: #e5e1dc; /* Very subtle border */
    --color-border-medium: #d4cfca; /* Medium subtle border */
    --color-border-dark: #bfbab5; /* Darker but not harsh border */

    /* Shadow Colors - Softer shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
    --shadow-gold: 0 10px 30px -10px rgba(184, 145, 79, 0.25);

    /* Success, Warning, Error Colors for Light Mode - SOFTER */
    --color-success: #2d7a3f;
    --color-success-bg: #e8f5ec;
    --color-warning: #b87333;
    --color-warning-bg: #fef7ed;
    --color-error: #c73030;
    --color-error-bg: #fdeeed;
    --color-info: #2563a8;
    --color-info-bg: #e8f0f8;
}

/* ============================================
   BODY & HTML - Light Theme
   ============================================ */
.light body {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

.light {
    color-scheme: light;
}

/* ============================================
   HEADER & NAVIGATION - Light Theme - IMPROVED CONTRAST
   ============================================ */
.light header {
    background: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.98),
        rgba(250, 249, 247, 0.95)
    );
    border-bottom: 1px solid var(--color-border-light); /* Subtle border */
    backdrop-filter: blur(12px);
    box-shadow: var(--shadow-sm);
}

.light header a,
.light header button {
    color: var(--color-text-primary);
    font-weight: 500;
}

.light header a:hover,
.light header button:hover {
    color: var(--color-gold-light); /* Medium gold - visible but not harsh */
}

/* Active page link in header - GOLD for visibility */
.light header a.active,
.light header a[aria-current="page"],
.light header .nav-link.active {
    color: var(--color-gold-dark) !important;
    font-weight: 600;
    position: relative;
}

.light header a.active::after,
.light header a[aria-current="page"]::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-gold-light);
}

/* Search Bar - Light - Better contrast but softer */
.light header input[type="search"],
.light header input[type="text"] {
    background-color: #ffffff; /* Pure white */
    border: 1px solid var(--color-border-light); /* Thinner, softer border */
    color: var(--color-text-primary);
    font-weight: 400; /* Normal weight */
}

.light header input[type="search"]::placeholder,
.light header input[type="text"]::placeholder {
    color: var(--color-text-muted);
    font-weight: 400;
}

.light header input[type="search"]:focus,
.light header input[type="text"]:focus {
    background-color: #ffffff;
    border-color: var(--color-gold-light); /* Medium gold */
    box-shadow: 0 0 0 3px rgba(184, 145, 79, 0.12); /* Softer glow */
}

/* ============================================
   PAGE BACKGROUNDS - Light Theme
   ============================================ */

/* Main content area - override dark theme */
.light main {
    background-color: var(--color-bg-primary);
    color: var(--color-text-primary);
}

/* All sections - light background - NO forced backgrounds */
.light section {
    color: var(--color-text-primary);
}

/* Sections with bg-nebula - subtle gradient, no harsh backgrounds */
.light section.bg-nebula\/50,
.light section[class*="bg-nebula"] {
    background: linear-gradient(
        135deg,
        rgba(235, 232, 228, 0.5) 0%,
        rgba(207, 192, 221, 0.3) 100%
    ) !important;
    box-shadow: none !important;
}

/* Override dark starfield - IMPORTANT */
.light .bg-starfield,
.light div.bg-starfield,
.light .bg-cosmic.bg-starfield {
    background-color: var(--color-bg-primary) !important;
    background-image: none !important;
}

/* Override bg-cosmic wrapper divs */
.light .bg-cosmic,
.light div.bg-cosmic,
.light .min-h-screen.bg-cosmic,
.light [class*="from-cosmic"],
.light [class*="to-cosmic"],
.light [class*="via-cosmic"] {
    background-color: transparent !important;
    background-image: none !important;
}

/* Container backgrounds */
.light .container,
.light .mx-auto {
    color: var(--color-text-primary);
}

/* Override any remaining dark backgrounds */
.light [class*="bg-cosmic"],
.light [class*="bg-deep"],
.light .bg-gray-900,
.light .bg-gray-800 {
    background-color: var(--color-bg-primary) !important;
    color: var(--color-text-primary) !important;
}

/* Nebula backgrounds - very subtle, transparent */
.light .bg-nebula,
.light .bg-nebula\/60,
.light .bg-nebula\/50,
.light .bg-nebula\/30,
.light .bg-nebula\/20,
.light [class*="bg-nebula"]:not(section) {
    background: linear-gradient(
        135deg,
        rgba(235, 232, 228, 0.5) 0%,
        rgba(207, 192, 221, 0.4) 100%
    ) !important;
    background-image: linear-gradient(
        135deg,
        rgba(235, 232, 228, 0.5) 0%,
        rgba(207, 192, 221, 0.4) 100%
    ) !important;
}

/* Product image placeholders - nebula backgrounds - softer */
.light div[class*="aspect-"][class*="bg-nebula"] {
    background: linear-gradient(
        135deg,
        var(--color-bg-tertiary) 0%,
        #cfc0dd 100%
    ) !important;
}

/* Product listing pages */
.light .products-grid,
.light .category-page,
.light .brand-page {
    background-color: var(--color-bg-primary);
}

/* Footer - light theme */
.light footer {
    background-color: var(--color-bg-tertiary);
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
}

/* ============================================
   BUTTONS - Light Theme
   ============================================ */

/* Primary Button - Gold - VISIBLE BUT COMFORTABLE */
.light button.bg-gold\/90,
.light a.bg-gold\/90,
.light .btn-primary {
    background-color: var(--color-gold-light); /* Medium gold - visible */
    color: #ffffff; /* White text for good contrast */
    border: 1px solid var(--color-gold-dark);
    font-weight: 600;
}

.light button.bg-gold\/90:hover,
.light a.bg-gold\/90:hover,
.light .btn-primary:hover {
    background-color: var(--color-gold-lighter); /* Lighter on hover */
    border-color: var(--color-gold-light);
    transform: translateY(-1px);
    box-shadow: var(--shadow-gold);
}

.light button.bg-gold\/90:active,
.light a.bg-gold\/90:active,
.light .btn-primary:active {
    background-color: var(--color-gold-dark);
    transform: translateY(0);
}

/* Secondary Buttons */
.light button.bg-white\/10,
.light a.bg-white\/10 {
    background-color: var(--color-bg-elevated); /* Pure white */
    color: var(--color-text-primary);
    border: 1px solid var(--color-border-light);
}

.light button.bg-white\/10:hover,
.light a.bg-white\/10:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-medium);
}

/* ============================================
   CARDS & SECTIONS - Light Theme - SOFTER BACKGROUNDS
   ============================================ */

/* Product Cards */
.light .group.rounded-2xl {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light); /* Thinner border */
    box-shadow: var(--shadow-sm);
}

.light .group.rounded-2xl:hover {
    box-shadow: var(--shadow-md); /* Softer shadow */
    border-color: var(--color-border-medium); /* Medium border on hover */
    background-color: #ffffff;
    transform: translateY(-1px); /* Subtle lift effect */
    transition: all 0.3s ease;
}

/* Sections with bg-nebula - subtle, no box */
.light section.bg-nebula\/50 {
    background: transparent !important;
    border-color: var(--color-border-light);
}

.light .bg-nebula\/50:not(section) {
    background: linear-gradient(
        135deg,
        rgba(243, 241, 238, 0.5) 0%,
        rgba(232, 224, 242, 0.3) 100%
    );
    border-color: var(--color-border-light);
}

/* Cards with bg-white/5 - make them visible but not too bright */
.light .bg-white\/5 {
    background-color: var(--color-bg-elevated);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--color-border-light);
}

.light .bg-white\/10 {
    background-color: var(--color-bg-elevated); /* Pure white instead of gray */
    border: 1px solid var(--color-border-light);
}

.light .bg-white\/5:hover,
.light .hover\:bg-white\/10:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-medium);
}

/* ============================================
   TEXT COLORS - Light Theme - COMFORTABLE CONTRAST
   ============================================ */
.light .text-white,
.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6 {
    color: var(--color-text-primary);
    font-weight: 600; /* Slightly bolder for better readability */
}

.light p,
.light .text-base,
.light .text-sm,
.light .text-lg {
    color: var(--color-text-secondary); /* Medium darkness for body text */
}

.light .text-aura,
.light .text-aura\/90,
.light .text-aura\/80 {
    color: var(--color-text-secondary); /* Medium secondary text */
}

.light .text-aura\/70,
.light .text-aura\/60 {
    color: var(--color-text-tertiary); /* Medium gray for tertiary */
}

.light .text-aura\/50 {
    color: var(--color-text-muted); /* Lighter muted text */
}

.light .text-aura\/40,
.light .text-aura\/30 {
    color: var(--color-text-light); /* Very light text */
}

/* Small text - readable but not harsh */
.light .text-xs,
.light .text-sm {
    color: var(--color-text-secondary); /* Medium darkness */
    font-weight: 400; /* Normal weight */
}

.light .text-gold {
    color: var(--color-gold-light); /* Medium gold - visible and comfortable */
    font-weight: 600;
}

.light .text-gold:hover {
    color: var(--color-gold-lighter);
}

/* Ensure all small labels and captions are readable */
.light .caption,
.light .label,
.light .text-muted {
    color: var(--color-text-tertiary);
    font-weight: 400; /* Normal weight */
}

/* ============================================
   BORDERS - Light Theme
   ============================================ */
.light .border-white\/10 {
    border-color: var(--color-border-light);
}

.light .border-white\/20 {
    border-color: var(--color-border-medium);
}

.light .border-white\/30 {
    border-color: var(--color-border-dark);
}

/* ============================================
   FORMS & INPUTS - Light Theme - COMFORTABLE CONTRAST
   ============================================ */
.light input,
.light textarea,
.light select {
    background-color: #ffffff; /* Pure white for inputs */
    border: 1px solid var(--color-border-light); /* Thinner, softer border */
    color: var(--color-text-primary);
    font-weight: 400; /* Normal text weight */
}

.light input::placeholder,
.light textarea::placeholder {
    color: var(--color-text-muted); /* Readable placeholder */
    font-weight: 400;
}

.light input:focus,
.light textarea:focus,
.light select:focus {
    border-color: var(--color-gold-light); /* Medium gold */
    box-shadow: 0 0 0 3px rgba(184, 145, 79, 0.12); /* Softer glow */
    background-color: #ffffff;
    outline: none;
}

.light input[type="checkbox"],
.light input[type="radio"] {
    border-color: var(--color-border-medium);
    border-width: 1.5px; /* Normal border */
}

/* Select dropdown and options - Light Theme */
.light select {
    background-color: #ffffff !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-medium) !important;
}

.light select option {
    background-color: #ffffff !important;
    color: var(--color-text-primary) !important;
    padding: 8px 12px;
}

.light select option:hover,
.light select option:focus,
.light select option:checked {
    background-color: var(--color-gold-soft) !important;
    color: var(--color-gold-dark) !important;
}

/* Sort select specific styling */
.light #sort-select,
.light .sort-dropdown {
    background-color: #ffffff !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-medium) !important;
    transition: all 0.2s ease;
}

.light .sort-dropdown:hover {
    background-color: var(--color-bg-secondary) !important;
    border-color: var(--color-gold-light) !important;
}

.light .sort-dropdown:focus {
    border-color: var(--color-gold-light) !important;
    box-shadow: 0 0 0 3px rgba(184, 145, 79, 0.15) !important;
    outline: none !important;
}

.light #sort-select option,
.light .sort-dropdown option {
    background-color: #ffffff !important;
    color: var(--color-text-primary) !important;
}

.light .sort-dropdown option:hover,
.light .sort-dropdown option:checked {
    background-color: var(--color-gold-soft) !important;
    color: var(--color-gold-dark) !important;
}

/* Custom dropdown arrow for light theme */
.light .sort-dropdown {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%239a7840' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}

/* Range sliders - comprehensive styling for light theme */
.light input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: none !important;
    outline: none;
    width: 100%;
    height: 6px;
    margin: 10px 0;
}

/* Webkit (Chrome, Safari, Edge) slider thumb */
.light input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-gold-dark);
    border: 2px solid #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.light input[type="range"]::-webkit-slider-thumb:hover {
    background: var(--color-gold-light);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Webkit slider track */
.light input[type="range"]::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    background: var(--color-border-medium);
    border-radius: 3px;
    border: none;
}

/* Firefox slider thumb */
.light input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-gold-dark);
    border: 2px solid #ffffff;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.light input[type="range"]::-moz-range-thumb:hover {
    background: var(--color-gold-light);
    transform: scale(1.1);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
}

/* Firefox slider track */
.light input[type="range"]::-moz-range-track {
    width: 100%;
    height: 6px;
    background: var(--color-border-medium);
    border-radius: 3px;
    border: none;
}

/* Focus states */
.light input[type="range"]:focus {
    outline: none;
}

.light input[type="range"]:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 3px rgba(184, 145, 79, 0.2);
}

.light input[type="range"]:focus::-moz-range-thumb {
    box-shadow: 0 0 0 3px rgba(184, 145, 79, 0.2);
}

.light input[type="checkbox"]:checked,
.light input[type="radio"]:checked {
    background-color: var(--color-gold-light); /* Medium gold */
    border-color: var(--color-gold-light);
}

/* Labels should be readable */
.light label {
    color: var(--color-text-secondary);
    font-weight: 500; /* Medium weight */
}

/* ============================================
   BADGES & LABELS - Light Theme
   ============================================ */
.light .badge,
.light span.bg-gold\/20,
.light .bg-gold\/20 {
    background-color: var(--color-gold-soft);
    color: var(--color-text-primary);
    border: 1px solid var(--color-gold-lighter);
}

.light .bg-red-500,
.light .bg-red-500\/20 {
    background-color: var(--color-error-bg);
    color: var(--color-error);
}

.light .bg-green-500 {
    background-color: var(--color-success-bg);
    color: var(--color-success);
}

.light .bg-orange-500 {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
}

/* ============================================
   HERO SECTION - Light Theme
   ============================================ */
.light .bg-starfield {
    background-image: radial-gradient(
            1200px 600px at 10% 10%,
            rgba(184, 145, 79, 0.25),
            /* Much darker gold - more visible */ transparent 60%
        ),
        radial-gradient(
            1000px 500px at 80% 20%,
            rgba(140, 111, 168, 0.28),
            /* Much darker purple - more visible */ transparent 60%
        );
}

.light .zodiac-wheel {
    opacity: 0.25; /* Much more visible */
    filter: brightness(0.5) contrast(1.2); /* Darker and more contrast */
}

.light .zodiac-wheel svg {
    stroke: var(--color-purple-medium); /* Darker purple */
    stroke-width: 2; /* Thicker lines */
}

/* Hero animated gradient text - MAKE MUCH MORE VISIBLE WITH DARKER COLORS */
.light .gradient-text,
.light [class*="gradient-text"],
.light .animate-gradient {
    background: linear-gradient(
        90deg,
        var(--color-gold-dark) 0%,
        /* #9a7840 - dark gold */ var(--color-purple-dark) 50%,
        /* #6d5585 - dark purple */ var(--color-gold-dark) 100%
            /* #9a7840 - dark gold */
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-size: 200% auto !important;
    font-weight: 600 !important; /* Make text bolder for better visibility */
}

/* Hero subtitle and other text */
.light .hero-subtitle,
.light .hero-description {
    color: var(--color-text-secondary) !important;
}

/* ============================================
   FOOTER - Light Theme
   ============================================ */
.light footer {
    background: linear-gradient(
        to top,
        var(--color-bg-secondary) 0%,
        var(--color-bg-primary) 100%
    );
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
}

.light footer a {
    color: var(--color-text-secondary);
    transition: color 0.2s ease;
}

.light footer a:hover {
    color: var(--color-gold-light) !important;
    text-decoration: underline;
}

.light footer h3,
.light footer h4 {
    color: var(--color-text-primary);
}

/* ============================================
   DROPDOWNS & MODALS - Light Theme
   ============================================ */
.light .dropdown-menu,
.light .modal {
    background-color: var(--color-bg-elevated) !important;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xl);
    color: var(--color-text-primary) !important;
}

/* Note: Specific dropdown item styles are defined in the 
   "DROPDOWN MENU ITEMS - Light Theme" section below */

/* ============================================
   TABLES - Light Theme
   ============================================ */
.light table {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
}

.light th {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-border-medium);
}

.light td {
    border-bottom: 1px solid var(--color-border-light);
    color: var(--color-text-secondary);
}

.light tr:hover {
    background-color: var(--color-bg-secondary);
}

/* ============================================
   ALERTS & NOTIFICATIONS - Light Theme
   ============================================ */
.light .alert-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border-color: var(--color-success);
}

.light .alert-error {
    background-color: var(--color-error-bg);
    color: var(--color-error);
    border-color: var(--color-error);
}

.light .alert-warning {
    background-color: var(--color-warning-bg);
    color: var(--color-warning);
    border-color: var(--color-warning);
}

.light .alert-info {
    background-color: var(--color-info-bg);
    color: var(--color-info);
    border-color: var(--color-info);
}

/* ============================================
   PRICE DISPLAY - Light Theme
   ============================================ */
.light .price-container {
    background: linear-gradient(
        135deg,
        var(--color-gold-soft) 0%,
        var(--color-purple-soft) 100%
    );
    border: 1px solid var(--color-gold-lighter);
}

.light .price-original {
    color: var(--color-text-tertiary);
}

.light .price-sale {
    color: var(--color-gold-dark) !important; /* Darker, more visible gold */
    font-weight: 700;
}

/* Main product price - make more visible */
.light .text-gold,
.light [class*="text-gold"] {
    color: #8a6830 !important; /* Even darker gold for better visibility */
}

/* Product detail page large prices - EVEN DARKER */
.light .text-5xl.text-gold,
.light .text-4xl.text-gold,
.light .text-3xl.text-gold,
.light .text-2xl.text-gold,
.light .text-xl.text-gold,
.light [class*="text-5xl"][class*="text-gold"],
.light [class*="text-4xl"][class*="text-gold"],
.light [class*="text-3xl"][class*="text-gold"],
.light [class*="text-2xl"][class*="text-gold"],
.light [class*="text-xl"][class*="text-gold"] {
    color: #7a5820 !important; /* Very dark gold for large text - maximum visibility */
    font-weight: 700;
}

/* FIX GRADIENT PRICES - Override light yellow gradient with darker colors */
.light .text-5xl[class*="bg-gradient"],
.light .text-4xl[class*="bg-gradient"],
.light .text-3xl[class*="bg-gradient"],
.light .text-2xl[class*="bg-gradient"],
.light [class*="text-5xl"][class*="bg-gradient"],
.light [class*="text-4xl"][class*="bg-gradient"],
.light [class*="text-3xl"][class*="bg-gradient"],
.light [class*="text-2xl"][class*="bg-gradient"] {
    background: linear-gradient(
        to right,
        #7a5820,
        /* Dark brown-gold */ #8a6830 /* Medium brown-gold */
    ) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.light .savings-badge {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid var(--color-success);
}

/* ============================================
   RATING STARS - Light Theme
   ============================================ */
.light .star-filled {
    color: var(--color-gold-light);
}

.light .star-empty {
    color: var(--color-border-medium);
}

/* ============================================
   BREADCRUMBS - Light Theme
   ============================================ */
.light .breadcrumb {
    color: var(--color-text-tertiary);
}

.light .breadcrumb a {
    color: var(--color-text-secondary);
}

.light .breadcrumb a:hover {
    color: var(--color-gold-light);
}

/* Active breadcrumb - make it stand out */
.light .breadcrumb .active,
.light .breadcrumb [aria-current="page"],
.light .breadcrumb li:last-child {
    color: var(--color-gold-dark) !important;
    font-weight: 600;
}

/* ============================================
   PAGINATION - Light Theme
   ============================================ */
.light .pagination button,
.light .pagination a {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-medium);
    color: var(--color-text-primary);
}

.light .pagination button:hover,
.light .pagination a:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-gold-light);
}

.light .pagination .active {
    background-color: var(--color-gold-light);
    border-color: var(--color-gold-light);
    color: var(--color-text-primary);
}

/* ============================================
   CART & CHECKOUT - Light Theme
   ============================================ */
.light .cart-item {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
}

.light .cart-item:hover {
    box-shadow: var(--shadow-md);
}

.light .cart-summary {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-lg);
}

/* Checkout Progress Stepper - Light Theme */
.light .bg-white\/20 {
    background-color: var(
        --color-border-dark
    ) !important; /* Darker gray for visibility */
}

/* Checkout stepper lines - make visible */
.light .h-0\.5.bg-white\/20,
.light .h-px.bg-white\/20 {
    background-color: var(--color-border-dark) !important;
    height: 2px !important; /* Slightly thicker */
}

/* Inactive step circles - light theme */
.light .rounded-full.bg-white\/20 {
    background-color: var(--color-bg-tertiary) !important;
    border: 2px solid var(--color-border-dark) !important;
}

/* Inactive step text */
.light .text-aura\/60 {
    color: var(--color-text-tertiary) !important;
}

/* ============================================
   PRODUCT IMAGES - Light Theme
   ============================================ */
.light .product-image-container {
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border-light);
}

.light .product-image-thumbnail {
    border: 2px solid var(--color-border-light);
}

.light .product-image-thumbnail.active,
.light .product-image-thumbnail:hover {
    border-color: var(--color-gold-light);
}

/* ============================================
   FILTERS & SIDEBAR - Light Theme
   ============================================ */
.light .filter-section {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
}

.light .filter-title {
    color: var(--color-text-primary);
    border-bottom: 1px solid var(--color-border-light);
}

.light .filter-option:hover {
    background-color: var(--color-bg-secondary);
}

/* ============================================
   REVIEWS - Light Theme
   ============================================ */
.light .review-card {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
}

.light .review-author {
    color: var(--color-text-primary);
}

.light .review-text {
    color: var(--color-text-secondary);
}

.light .review-date {
    color: var(--color-text-muted);
}

/* ============================================
   SCROLLBAR - Light Theme
   ============================================ */
.light ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

.light ::-webkit-scrollbar-track {
    background: var(--color-bg-secondary);
}

.light ::-webkit-scrollbar-thumb {
    background: var(--color-border-dark);
    border-radius: 6px;
    border: 2px solid var(--color-bg-secondary);
}

.light ::-webkit-scrollbar-thumb:hover {
    background: var(--color-gold-light);
}

/* ============================================
   LOADING STATES - Light Theme
   ============================================ */
.light .skeleton {
    background: linear-gradient(
        90deg,
        var(--color-bg-secondary) 25%,
        var(--color-bg-tertiary) 50%,
        var(--color-bg-secondary) 75%
    );
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* ============================================
   MOBILE MENU - Light Theme
   ============================================ */
.light #mobileMenu {
    background-color: var(--color-bg-elevated);
    border-left: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-xl);
}

.light #mobileMenu a,
.light #mobileMenu button {
    color: var(--color-text-primary);
}

.light #mobileMenu a:hover,
.light #mobileMenu button:hover {
    background-color: var(--color-bg-secondary);
}

/* ============================================
   SEARCH RESULTS - Light Theme
   ============================================ */
.light .search-result-item {
    background-color: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border-light);
}

.light .search-result-item:hover {
    background-color: var(--color-bg-secondary);
}

/* ============================================
   UTILITIES - Light Theme
   ============================================ */
.light .divider {
    border-color: var(--color-border-light);
}

.light .shadow-glow {
    box-shadow: var(--shadow-gold);
}

.light .text-gradient {
    background: linear-gradient(
        135deg,
        var(--color-gold-light),
        var(--color-purple-medium)
    );
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   SPECIFIC COMPONENT OVERRIDES - Light Theme
   ============================================ */

/* Cosmic gradient sections - make transparent in light mode */
.light section.bg-gradient-to-b {
    background: transparent !important;
    background-image: none !important;
}

/* Remove ugly backgrounds from section headers */
.light section header,
.light section > div > header {
    background: transparent !important;
    box-shadow: none !important;
}

/* Trust indicators on homepage */
.light #trust .rounded-2xl {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
}

/* Featured products section */
.light #featured .group {
    background-color: var(--color-bg-elevated);
    border: 1px solid var(--color-border-light);
}

/* View toggle buttons (grid/list view) */
.light button[id*="view-btn"] svg,
.light button[id*="-view"] svg {
    stroke: var(--color-text-primary) !important;
}

.light button[id*="view-btn"].active svg,
.light button[id*="-view"].active svg {
    stroke: var(--color-gold-dark) !important;
}

/* Newsletter section */
.light .newsletter-section {
    background: linear-gradient(
        135deg,
        var(--color-purple-soft) 0%,
        var(--color-gold-soft) 100%
    );
}

/* ============================================
   DARK MODE SHOULD NOT AFFECT THESE
   ============================================ */

/* Ensure dark mode styles don't leak into light theme */
.light .dark\:bg-gray-800,
.light .dark\:bg-gray-900,
.light .dark\:text-white {
    /* Light theme overrides */
    background-color: var(--color-bg-elevated) !important;
    color: var(--color-text-primary) !important;
}

/* ============================================
   FIX WHITE TEXT VISIBILITY IN LIGHT MODE
   ============================================ */

/* Override all white text colors in light mode */
.light .text-white,
.light .text-white\/90,
.light .text-white\/80,
.light .text-white\/70 {
    color: var(--color-text-primary) !important;
}

/* Fix headings that might be white */
.light h1.text-white,
.light h2.text-white,
.light h3.text-white,
.light h4.text-white,
.light h5.text-white,
.light h6.text-white {
    color: var(--color-text-primary) !important;
}

/* Fix spans and divs with white text */
.light span.text-white,
.light div.text-white,
.light p.text-white {
    color: var(--color-text-primary) !important;
}

/* Fix hover states that might use white text */
.light .hover\:text-white:hover,
.light .group-hover\:text-white:hover {
    color: var(--color-text-primary) !important;
}

/* ============================================
   FIX ACCENT COLOR VISIBILITY ON LIGHT BACKGROUNDS
   ============================================ */

/* Ensure gold text is always visible */
.light .text-gold,
.light .text-gold\/90,
.light .text-gold\/80 {
    color: var(
        --color-gold-dark
    ) !important; /* Use darker gold for better visibility */
    text-shadow: none; /* Remove any shadow that might make it worse */
}

/* Buttons with text-gold should be even darker and more specific */
.light button.text-gold,
.light a.text-gold,
.light button[class*="text-gold"] {
    color: #7a5820 !important; /* Very dark brown-gold for maximum visibility */
    font-weight: 600 !important;
}

.light button.text-gold:hover,
.light a.text-gold:hover {
    color: #6a4810 !important; /* Even darker on hover */
}

/* Fix purple accent colors */
.light .text-purple-400,
.light .text-purple-300,
.light .text-purple-200 {
    color: var(--color-purple-medium) !important;
}

/* Fix any light colored backgrounds that might be too white */
.light .bg-white\/90,
.light .bg-white\/95 {
    background-color: var(--color-bg-elevated) !important;
}

/* ============================================
   FIX BUTTON TEXT VISIBILITY
   ============================================ */

/* Buttons with white backgrounds need dark text */
.light button.bg-white,
.light a.bg-white,
.light .btn-white {
    background-color: #ffffff !important;
    color: var(--color-text-primary) !important;
    border: 1px solid var(--color-border-light);
}

/* Buttons with gold backgrounds need white text - BUT NOT NAVIGATION */
.light
    button[class*="bg-gold"]:not([class*="nav"]):not([class*="menu"]):not(
        .text-cosmic
    ):not([class*="buy-now"]):not([class*="variant-option"])
    :not([id*="apply-coupon-btn"])
        :not([class*="cart-btn-svg"]) ,
.light
    a[class*="bg-gold"]:not([class*="nav"]):not([class*="menu"]):not(nav a):not(
        header a
    ):not(.text-cosmic) {
    color: #ffffff !important; /* Ensure white text on gold buttons */
}

/* Buttons with gold background AND text-cosmic class should have dark text */
.light button[class*="bg-gold"].text-cosmic,
.light a[class*="bg-gold"].text-cosmic {
    color: var(--color-text-primary) !important; /* Dark text for light theme */
}

/* Text-cosmic class in light theme should be dark */
.light .text-cosmic {
    color: var(--color-text-primary) !important;
}

/* ============================================
   BUY NOW / PRIMARY BORDER-GOLD BUTTON OVERRIDE
   ============================================
   The global rule forcing white text for any element with "bg-gold" was
   unintentionally overriding buttons that are border-gold/text-gold (Buy Now)
   which are NOT background-gold buttons. Add a more specific selector that
   targets the common Buy Now style used across product pages: buttons that
   have a border-gold and text-gold combination or explicit "buy-now" class.
   This selector has higher specificity so it wins over the broad bg-gold rule.
*/
.light button.border-gold.text-gold,
.light button.border-gold.text-gold:hover,
.light button.buy-now,
.light button.buy-now:hover,
.light .product-actions button.border-gold.text-gold {
    color: var(
        --color-text-primary
    ) !important; /* Force dark text for Buy Now */
    background: transparent !important; /* keep existing appearance */
}

/* Also cover anchor variants that may be used for call-to-actions */
.light a.border-gold.text-gold,
.light a.buy-now {
    color: var(--color-text-primary) !important;
}

/* ============================================
   RANGE INPUT / PRICE SLIDER - Light Theme
   ============================================
   Provide a dedicated style for range inputs used in product filters to
   remove black outlines, increase track thickness and ensure thumbs do not
   overlap when two-range implementations are used. Keep selectors scoped to
   .light so dark theme is unaffected.
*/
.light .filters input[type="range"],
.light input[type="range"].price-range {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 12px;
    margin: 12px 0;
    background: transparent;
}

.light input[type="range"]::-webkit-slider-runnable-track {
    height: 8px;
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary),
        var(--color-bg-elevated)
    );
    border-radius: 999px;
    border: 1px solid var(--color-border-medium);
}

.light input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    margin-top: -6px; /* center the thumb on the track */
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-gold-light);
    border: 2px solid var(--color-gold-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    z-index: 3;
}

.light input[type="range"]::-moz-range-track {
    height: 8px;
    background: linear-gradient(
        90deg,
        var(--color-bg-tertiary),
        var(--color-bg-elevated)
    );
    border-radius: 999px;
    border: 1px solid var(--color-border-medium);
}

.light input[type="range"]::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--color-gold-light);
    border: 2px solid var(--color-gold-dark);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
}

/* When two thumbs overlap (double-range), increase z-index on active thumb */
.light input[type="range"]:active::-webkit-slider-thumb {
    z-index: 4;
}

/* Provide an explicit filled portion color if JS paints it; keep subtle */
.light .range-filled {
    background: linear-gradient(
        90deg,
        var(--color-gold-light),
        var(--color-gold-dark)
    );
    height: 8px;
    border-radius: 999px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
}

/* Navigation items should use gold for active state even with bg-gold class */
.light header a[class*="bg-gold"],
.light nav a[class*="bg-gold"],
.light [class*="nav"] a[class*="bg-gold"] {
    color: var(--color-gold-dark) !important;
    font-weight: 600;
}

/* ============================================
   FIX LINK VISIBILITY
   ============================================ */

/* Links should be clearly visible */
.light a:not([class*="bg-"]):not([class*="button"]):not([class*="btn"]) {
    color: var(--color-text-primary);
}

.light a:not([class*="bg-"]):not([class*="button"]):not([class*="btn"]):hover {
    color: var(--color-gold-light);
}

/* ============================================
   FIX TRANSPARENT BACKGROUNDS
   ============================================ */

/* Elements with very light opacity backgrounds */
.light .bg-white\/5,
.light .bg-white\/3,
.light .bg-white\/2 {
    background-color: rgba(255, 255, 255, 0.7) !important; /* More opaque */
    border: 1px solid var(--color-border-light);
}

/* ============================================
   FIX SPECIFIC ICON VISIBILITY ISSUES ONLY
   ============================================ */

/* Only fix icons that are specifically marked as needing light mode adjustment */
.light .icon-light-mode svg {
    stroke: var(--color-text-primary);
}

/* Keep button and link icons using their parent color */
.light button svg,
.light a svg {
    stroke: currentColor;
    fill: none;
}

/* ============================================
   FIX BADGE AND TAG VISIBILITY
   ============================================ */

/* Sale badges should be clearly visible */
.light .badge-sale,
.light .badge[class*="red"],
.light .bg-red-500\/20,
.light .bg-red-500 {
    background-color: #dc2626 !important; /* Solid red background */
    color: #ffffff !important; /* White text for contrast */
    border: none !important;
    font-weight: 600;
}

/* Red gradient backgrounds (for sale badges) */
.light .bg-gradient-to-r.from-red-500 {
    background: #dc2626 !important;
    color: #ffffff !important;
}

/* Stock status badges */
.light .badge[class*="green"] {
    background-color: var(--color-success-bg) !important;
    color: var(--color-success) !important;
    border: 1px solid var(--color-success);
}

.light .badge[class*="orange"] {
    background-color: var(--color-warning-bg) !important;
    color: var(--color-warning) !important;
    border: 1px solid var(--color-warning);
}

/* ============================================
   FIX NAVBAR AND MENU TEXT
   ============================================ */

/* Ensure navigation text is always visible
.light nav a:not([class*="text-red"]),
.light nav button:not([class*="text-red"]),
.light nav span:not([class*="text-red"]):not([class*="breadcrumb-nav"]) {
    color: var(--color-text-primary) !important;
} */

/* Red text elements should stay red (like logout) */
.light .text-red-400,
.light .text-red-500,
.light .text-red-300,
.light button.text-red-400,
.light button.text-red-500 {
    color: var(--color-error) !important;
}

.light .text-red-400:hover,
.light .text-red-300:hover,
.light button.text-red-400:hover {
    color: #b02020 !important; /* Darker red on hover */
}

.light nav a:hover:not([class*="text-red"]),
.light nav button:hover:not([class*="text-red"]) {
    color: var(--color-gold-light) !important;
}

/* ============================================
   DROPDOWN MENU ITEMS - Light Theme
   ============================================ */
.light .dropdown-menu-item {
    color: var(--color-text-primary);
    background-color: transparent;
}

.light .dropdown-menu-item:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-gold-dark);
}

.light .dropdown-menu-item-danger {
    color: var(--color-error);
    background-color: transparent;
}

.light .dropdown-menu-item-danger:hover {
    background-color: rgba(199, 48, 48, 0.1);
    color: #b02020;
}

.light .language-dropdown-item,
.light .currency-dropdown-item {
    color: var(--color-text-primary);
    background-color: transparent;
}

.light .language-dropdown-item:hover,
.light .currency-dropdown-item:hover {
    background-color: var(--color-bg-secondary);
    color: var(--color-gold-dark);
}

/* ============================================
   MEGA MENU ITEMS - Light Theme
   ============================================ */
.light .mega-menu-item {
    color: var(--color-text-secondary);
}

.light .mega-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--color-gold-dark);
}

.light .mega-menu-item-card {
    background-color: rgba(255, 255, 255, 0.5);
    border-color: var(--color-border-light);
    color: var(--color-text-secondary);
}

.light .mega-menu-item-card:hover {
    background-color: rgba(0, 0, 0, 0.05);
    border-color: var(--color-gold-light);
    color: var(--color-gold-dark);
}

/* ============================================
   DROPDOWN CONTAINERS - Light Theme
   ============================================ */
.light .dropdown-container {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #f0ede8 100%
    );
    border: 1px solid var(--color-border-medium);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
}

.light .dropdown-header {
    background: linear-gradient(
        to right,
        rgba(184, 145, 79, 0.2) 0%,
        rgba(140, 111, 168, 0.2) 100%
    );
    border-bottom: 1px solid var(--color-border-medium);
}

.light .dropdown-header .user-name {
    color: var(--color-text-primary);
}

.light .dropdown-header .user-email {
    color: var(--color-text-tertiary);
}

.light .dropdown-section-label {
    color: var(--color-text-secondary);
    font-weight: 600;
}

.light .dropdown-section {
    border-color: var(--color-border-light);
}

/* ============================================
   FIX SEARCH BAR VISIBILITY
   ============================================ */

/* Search results should be clearly visible */
.light .search-results {
    background-color: #ffffff !important;
    border: 1px solid var(--color-border-light);
    box-shadow: var(--shadow-lg);
}

.light .search-result-item {
    color: var(--color-text-primary) !important;
    border-bottom: 1px solid var(--color-border-light);
}

.light .search-result-item:hover {
    background-color: var(--color-bg-secondary) !important;
}

/* Search input text should be dark */
.light input[type="search"],
.light input.search {
    color: var(--color-text-primary) !important;
}

/* ============================================
   FINAL TARGETED FIXES - SPECIFIC ELEMENTS ONLY
   ============================================ */

/* Fix specific white text elements that become invisible */
.light .text-white.price,
.light .text-white.title,
.light .text-white.heading,
.light .text-white.label {
    color: var(--color-text-primary) !important;
}

/* Fix specific product price displays */
.light .product-price.text-white,
.light .price-tag.text-white {
    color: var(--color-text-primary) !important;
}

/* Ensure proper contrast for interactive elements */
.light button,
.light a[class*="btn"],
.light .button {
    transition: all 0.2s ease;
}

/* Ensure readable line-through text */
.light .line-through {
    color: var(--color-text-muted) !important;
    opacity: 0.7;
}

/* ============================================
   ORDER STATUS INDICATOR LINE - Light Theme
   ============================================ */

/* Background line for order status */
.light .bg-white\/20 {
    background-color: var(--color-border-dark) !important;
}

/* Order status inactive circles */
.light .border-white\/30 {
    border-color: var(--color-border-dark) !important;
    background-color: var(--color-bg-tertiary) !important;
}

/* Order status inactive text */
.light .text-aura\/60 {
    color: var(--color-text-tertiary) !important;
}

/* ============================================
   FORM ERROR MESSAGES - Light Theme
   ============================================ */

/* All form error texts should be red */
.light .text-red-500,
.light .text-red-600,
.light .text-red-400,
.light [class*="text-red"] {
    color: var(--color-error) !important;
}

.light .error-message,
.light .invalid-feedback,
.light .field-error {
    color: var(--color-error) !important;
}

/* ============================================
   PRODUCT CARD SAVE BADGE - Light Theme
   ============================================ */

/* Save XX% badge with red background needs white text - BUT NOT BUTTONS */
.light .bg-red-500 .badge,
.light .bg-red-500 span:not(button span):not(a span),
.light .badge[class*="bg-red"] span,
.light .badge.bg-red-500 {
    color: #ffffff !important;
}

/* ============================================
   WISHLIST ICON - Light Theme
   ============================================ */

/* Wishlist icon should be visible */
.light .text-white svg[class*="heart"],
.light button.text-white svg[class*="heart"] {
    stroke: var(--color-text-primary) !important;
}

/* Wishlist icon in product cards */
.light .wishlist-btn svg,
.light button[onclick*="wishlist"] svg,
.light button[onclick*="Wishlist"] svg {
    stroke: var(--color-text-primary) !important;
    fill: none !important;
}

/* Filled/active wishlist icon should be filled with red */
.light .wishlist-btn.active svg,
.light .wishlist-btn[data-in-wishlist="true"] svg,
.light button[onclick*="wishlist"].active svg,
.light button[onclick*="Wishlist"].active svg {
    stroke: var(--color-error) !important;
    fill: var(--color-error) !important;
}

/* Cart icon should remain currentColor (gold in product cards) */
.light button[onclick*="addToCart"] svg,
.light button[onclick*="cart"] svg:not([class*="heart"]) {
    stroke: currentColor !important;
}

/* ============================================
   BUY NOW BUTTON - Light Theme
   ============================================ */

/* Buy now button with gold background needs proper text color */
.light button.bg-gold,
.light a.bg-gold,
.light .bg-gold.text-white {
    color: var(--color-text-primary) !important;
    font-weight: 600;
}

/* But not for regular buttons - keep white text */
.light button.bg-gold:not(.buy-now):not([class*="nav"]),
.light a.bg-gold:not(.buy-now):not([class*="nav"]):not([class*="cart-dropdown-checkout-btn"]) {
    color: #ffffff !important;
}

/* ============================================
   ICON BORDERS - Light Theme
   ============================================ */

/* Remove inconsistent black borders on icons */
.light .border-black {
    border-color: var(--color-border-medium) !important;
}

/* Service icons should have consistent borders */
.light .service-icon,
.light [class*="feature-icon"] {
    border-color: var(--color-border-medium) !important;
}

/* ============================================
   LOGOUT ICON - Light Theme  
   ============================================ */

/* Logout icon with red background should have white icon */
.light .bg-red-500 svg,
.light .bg-red-500\/20 svg,
.light [class*="bg-red"] svg {
    stroke: var(--color-error) !important;
}

/* If it has both red bg and red icon, make icon white for contrast */
.light .bg-red-500.text-red svg,
.light .bg-red-500\/20.text-red svg {
    stroke: #ffffff !important;
}

/* ============================================
   FORM VALIDATION - Light Theme
   ============================================ */

/* Invalid inputs should have red border */
.light input:invalid,
.light select:invalid,
.light textarea:invalid {
    border-color: var(--color-error) !important;
}

/* Hide browser's default validation tooltip */
.light input:invalid:not(:placeholder-shown),
.light select:invalid,
.light textarea:invalid {
    box-shadow: none;
}

/* Custom validation message styling */
.light input:invalid ~ .validation-message,
.light select:invalid ~ .validation-message {
    color: var(--color-error) !important;
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
}

/* ============================================
   PRICE RANGE FILTER - Light Theme Only
   Complete redesign for proper visibility
   ============================================ */

/* Price Range Display Box */
.light .price-range-display {
    background-color: #ffffff !important;
    border: 1px solid var(--color-border-medium) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.light .price-range-display span {
    color: var(--color-text-primary) !important;
}

.light .price-range-display .text-gold,
.light .price-range-display .text-gold span {
    color: var(--color-gold-dark) !important;
    font-weight: 600 !important;
}

/* Slider Track Container */
.light .price-range-slider-track {
    background: linear-gradient(to right, 
        var(--color-border-light), 
        var(--color-border-medium)
    ) !important;
    border: 1px solid var(--color-border-dark) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05) !important;
    height: 8px !important;
    display: flex;
    align-items: center;
}

/* Range Highlight Bar */
.light .price-range-highlight {
    background: linear-gradient(to right, 
        var(--color-gold-light), 
        var(--color-gold-dark)
    ) !important;
    box-shadow: 0 1px 3px rgba(184, 145, 79, 0.3) !important;
    height: 8px !important;
}

/* Range Input Sliders - Clean slate for light theme */
.light #minPriceSlider,
.light #maxPriceSlider {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    outline: none !important;
    width: 100% !important;
    height: 8px !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 10;
}

/* Webkit Slider Track */
.light #minPriceSlider::-webkit-slider-runnable-track,
.light #maxPriceSlider::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 8px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Webkit Slider Thumb */
.light #minPriceSlider::-webkit-slider-thumb,
.light #maxPriceSlider::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--color-gold-light) !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 0 1px var(--color-gold-dark), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    margin-top: -5px !important;
    position: relative !important;
}

.light #minPriceSlider::-webkit-slider-thumb:hover,
.light #maxPriceSlider::-webkit-slider-thumb:hover {
    background: var(--color-gold-dark) !important;
    box-shadow: 0 0 0 1px var(--color-gold-dark), 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

.light #minPriceSlider::-webkit-slider-thumb:active,
.light #maxPriceSlider::-webkit-slider-thumb:active {
    background: var(--color-gold-dark) !important;
    box-shadow: 0 0 0 2px var(--color-gold-dark), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Firefox Slider Track */
.light #minPriceSlider::-moz-range-track,
.light #maxPriceSlider::-moz-range-track {
    width: 100% !important;
    height: 8px !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Firefox Slider Thumb */
.light #minPriceSlider::-moz-range-thumb,
.light #maxPriceSlider::-moz-range-thumb {
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: var(--color-gold-light) !important;
    border: 3px solid #ffffff !important;
    box-shadow: 0 0 0 1px var(--color-gold-dark), 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    cursor: pointer !important;
    margin-top: 0 !important;
}

.light #minPriceSlider::-moz-range-thumb:hover,
.light #maxPriceSlider::-moz-range-thumb:hover {
    background: var(--color-gold-dark) !important;
    box-shadow: 0 0 0 1px var(--color-gold-dark), 0 3px 8px rgba(0, 0, 0, 0.2) !important;
}

.light #minPriceSlider::-moz-range-thumb:active,
.light #maxPriceSlider::-moz-range-thumb:active {
    background: var(--color-gold-dark) !important;
    box-shadow: 0 0 0 2px var(--color-gold-dark), 0 1px 3px rgba(0, 0, 0, 0.15) !important;
}

/* Price Input Fields */
.light .price-input-field {
    background-color: #ffffff !important;
    border: 1px solid var(--color-border-medium) !important;
    color: var(--color-text-primary) !important;
}

.light .price-input-field:focus {
    border-color: var(--color-gold-light) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(184, 145, 79, 0.15) !important;
}

.light .price-input-field::placeholder {
    color: var(--color-text-muted) !important;
    opacity: 0.6;
}

/* Dollar Sign Symbol */
.light .price-input-symbol {
    color: var(--color-text-secondary) !important;
}

/* Input Labels */
.light .price-input-label {
    color: var(--color-text-secondary) !important;
    font-weight: 500;
}

/* Apply Filter Button */
.light .price-apply-button {
    background-color: var(--color-gold-light) !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(184, 145, 79, 0.2) !important;
}

.light .price-apply-button:hover {
    background-color: var(--color-gold-dark) !important;
    box-shadow: 0 4px 8px rgba(184, 145, 79, 0.3) !important;
}

.light .price-apply-button:active {
    background-color: var(--color-gold-dark) !important;
    box-shadow: 0 1px 2px rgba(184, 145, 79, 0.2) !important;
    transform: translateY(1px);
}

/* Quick Select Divider */
.light .price-quick-select-divider {
    border-color: var(--color-border-light) !important;
}

/* Quick Select Label */
.light .price-quick-select-label {
    color: var(--color-text-secondary) !important;
    font-weight: 500;
}

/* Quick Select Buttons */
.light .price-quick-select-btn {
    background-color: #ffffff !important;
    border: 1px solid var(--color-border-medium) !important;
    color: var(--color-text-primary) !important;
    font-weight: 500;
    transition: all 0.2s ease;
}

.light .price-quick-select-btn:hover {
    background-color: var(--color-gold-soft) !important;
    border-color: var(--color-gold-light) !important;
    color: var(--color-gold-dark) !important;
    box-shadow: 0 2px 4px rgba(184, 145, 79, 0.1) !important;
}

/* ============================================
   PASSWORD TOGGLE ICON - Light Theme
   ============================================ */
.light .password-toggle-btn {
    color: var(--color-text-tertiary);
}

.light .password-toggle-btn:hover {
    color: var(--color-gold-light);
}

/* ============================================
   LOCALE PREFERENCE MODAL - Light Theme
   ============================================ */
.light .locale-modal-overlay {
    background-color: rgba(0, 0, 0, 0.7);
}

.light .locale-modal-container {
    background: linear-gradient(
        to bottom right,
        var(--color-bg-elevated),
        var(--color-bg-secondary)
    );
    border: 1px solid var(--color-border-medium);
}

.light .locale-modal-header {
    background: linear-gradient(
        to right,
        rgba(184, 145, 79, 0.15),
        rgba(184, 145, 79, 0.05)
    );
    border-color: var(--color-border-light);
}

.light .locale-modal-header h2 {
    color: var(--color-gold-dark);
}

.light .locale-modal-header p {
    color: var(--color-text-secondary);
}

.light .locale-modal-content label {
    color: var(--color-text-primary);
}

.light .locale-option-inner,
.light .currency-option-inner {
    background-color: var(--color-bg-elevated);
    border-color: var(--color-border-medium);
}

.light .locale-option input:checked + .locale-option-inner,
.light .currency-option input:checked + .currency-option-inner {
    background-color: var(--color-gold-soft);
    border-color: var(--color-gold-light);
    box-shadow: 0 4px 6px rgba(184, 145, 79, 0.15);
}

.light .locale-option:hover .locale-option-inner,
.light .currency-option:hover .currency-option-inner {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-gold-lighter);
}

.light .locale-option-inner .font-semibold,
.light .currency-option-inner .font-semibold {
    color: var(--color-text-primary);
}

.light .locale-option-inner .text-xs,
.light .currency-option-inner .text-xs {
    color: var(--color-text-tertiary);
}

.light .locale-modal-footer {
    background-color: var(--color-bg-secondary);
    border-color: var(--color-border-light);
}

.light .locale-modal-btn-primary {
    background: linear-gradient(
        to right,
        var(--color-gold-light),
        var(--color-gold-lighter)
    );
    color: #ffffff;
    box-shadow: 0 4px 6px rgba(184, 145, 79, 0.2);
}

.light .locale-modal-btn-primary:hover {
    background: linear-gradient(
        to right,
        var(--color-gold-dark),
        var(--color-gold-light)
    );
    box-shadow: 0 6px 12px rgba(184, 145, 79, 0.3);
    transform: scale(1.02);
}

.light .locale-modal-btn-secondary {
    background-color: var(--color-bg-elevated);
    color: var(--color-text-primary);
    border-color: var(--color-border-medium);
}

.light .locale-modal-btn-secondary:hover {
    background-color: var(--color-bg-tertiary);
    border-color: var(--color-gold-light);
}

/* Order Filter Tabs - Light Theme */
.light .order-filter {
    background-color: var(--color-bg-tertiary);
    color: var(--color-text-primary);
}

.light .order-filter:hover {
    background-color: var(--color-bg-quaternary);
}

.light .order-filter.active {
    background-color: rgba(184, 145, 79, 0.2);
    color: var(--color-gold-light);
}

/* ============================================
   PRODUCT TABS - Light Theme
   ============================================ */

/* Tab Buttons */
.light .product-tab-btn {
    color: var(--color-text-secondary);
    border-bottom: 2px solid transparent;
}

.light .product-tab-btn:hover {
    color: var(--color-text-primary);
}

.light .product-tab-btn.active {
    color: var(--color-gold-dark);
}

.light .product-tab-btn.active::after {
    background: var(--color-gold-light);
}

/* Tab Content */
.light .product-tab-content {
    color: var(--color-text-primary);
}

/* Description Section Border */
.light .product-description-section {
    border-right-color: var(--color-border-light);
}

/* Specs Section Title */
.light .product-specs-section h3 {
    color: var(--color-gold-dark);
    border-bottom-color: var(--color-border-light);
}

/* Spec Rows */
.light .spec-row {
    background: var(--color-bg-secondary);
}

.light .spec-row:hover {
    background: var(--color-bg-tertiary);
}

.light .spec-label {
    color: var(--color-text-secondary);
}

.light .spec-value {
    color: var(--color-text-primary);
}

/* Divider */
.light .spec-divider {
    border-top-color: var(--color-border-light);
}

/* Empty State */
.light .specs-empty-state {
    color: var(--color-text-muted);
}