/* Dark mode styles */
    :root {
        --bg-primary: #ffffff;
        --bg-secondary: #f3f4f6;
        --text-primary: #2F3633;
        --text-secondary: #9BB0A5;
        --border-color: #E8EBE4;
        --accent-color: #2C5530;
        --accent-hover: #234726;
        --input-bg: #F5F7F4;
        --dropdown-bg: #ffffff;
        --hover-bg: #F5F7F4;
    }

    [data-theme="dark"] {
        --bg-primary: #1a1a1a;
        --bg-secondary: #2d2d2d;
        --text-primary: #e5e5e5;
        --text-secondary: #a0a0a0;
        --border-color: #404040;
        --accent-color: #4CAF50;
        --accent-hover: #45a049;
        --input-bg: #2d2d2d;
        --dropdown-bg: #2d2d2d;
        --hover-bg: #333333;

        /* Product specific colors */
        --product-title: #FFFFFF;           /* Pure white for product titles */
        --product-description: #E0E0E0;     /* Light gray for descriptions */
        --product-price: #6EE7B7;           /* Mint green for prices */
    }

    body {
        background-color: var(--bg-secondary) !important;
        color: var(--text-primary);
        transition: background-color 0.3s ease, color 0.3s ease;
    }

    .bg-white {
        background-color: var(--bg-primary) !important;
    }

    .bg-\[\#F5F7F4\] {
        background-color: var(--bg-secondary) !important;
    }

    .text-\[\#2F3633\] {
        color: var(--text-primary) !important;
    }

    .text-\[\#9BB0A5\] {
        color: var(--text-secondary) !important;
    }

    .text-\[\#2C5530\] {
        color: var(--accent-color) !important;
    }

    .border-\[\#E8EBE4\] {
        border-color: var(--border-color) !important;
    }

    .hover\:bg-\[\#F5F7F4\]:hover {
        background-color: var(--hover-bg) !important;
    }

    .hover\:text-\[\#2C5530\]:hover {
        color: var(--accent-hover) !important;
    }

    /* Form inputs */
    input, select, textarea {
        background-color: var(--input-bg) !important;
        color: var(--text-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Dropdowns and menus */
    .dropdown-menu, 
    #search-results,
    #mobile-search-results {
        background-color: var(--dropdown-bg) !important;
        border-color: var(--border-color) !important;
    }

    /* Buttons */
    .bg-\[\#2C5530\] {
        background-color: var(--accent-color) !important;
    }

    .hover\:bg-\[\#234226\]:hover {
        background-color: var(--accent-hover) !important;
    }

    /* Dark mode toggle button styles */
    .dark-mode-toggle {
        position: relative;
        width: 56px;
        height: 28px;
        padding: 0;
        border: none;
        background: transparent;
        cursor: pointer;
        border-radius: 50px;
        outline: none;
        transition: all 0.2s ease;
    }

    .dark-mode-toggle.dark {
        background-color: var(--accent-color);
    }

    .toggle-track {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        background-color: #E8EBE4;
        border-radius: 50px;
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
        transition: all 0.2s ease;
        overflow: hidden;
    }

    .dark-mode-toggle.dark .toggle-track {
        background-color: #2C5530;
    }

    .toggle-indicator {
        position: absolute;
        top: 2px;
        left: 2px;
        width: 24px;
        height: 24px;
        background-color: #ffffff;
        border-radius: 50%;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2);
        transform: translateX(0);
        transition: all 0.2s cubic-bezier(0.4, 0.0, 0.2, 1);
    }

    .dark-mode-toggle.dark .toggle-indicator {
        transform: translateX(28px);
        background-color: #1a1a1a;
    }

    /* Toggle icons */
    .toggle-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        transition: all 0.2s ease;
    }

    .toggle-icon.light {
        opacity: 1;
        color: #FFB100;
    }

    .toggle-icon.dark {
        opacity: 0;
        color: #FFE5B4;
    }

    .dark-mode-toggle.dark .toggle-icon.light {
        opacity: 0;
    }

    .dark-mode-toggle.dark .toggle-icon.dark {
        opacity: 1;
    }

    /* Hover effects */
    .dark-mode-toggle:hover .toggle-track {
        background-color: #D1D5DB;
    }

    .dark-mode-toggle.dark:hover .toggle-track {
        background-color: #234726;
    }

    /* Focus styles */
    .dark-mode-toggle:focus-visible {
        outline: 2px solid var(--accent-color);
        outline-offset: 2px;
    }

    /* Active animation */
    .dark-mode-toggle:active .toggle-indicator {
        width: 28px;
    }

    /* Responsive adjustments */
    @media (max-width: 640px) {
        .dark-mode-toggle {
            width: 48px;
            height: 24px;
        }

        .toggle-indicator {
            width: 20px;
            height: 20px;
        }

        .dark-mode-toggle.dark .toggle-indicator {
            transform: translateX(24px);
        }
    }

    /* Optional: Add a subtle scale animation on click */
    .dark-mode-toggle:active {
        transform: scale(0.95);
    }

    /* Optional: Add a subtle glow effect in dark mode */
    .dark-mode-toggle.dark .toggle-track {
        box-shadow: inset 0 2px 4px rgba(0,0,0,0.2),
                    0 0 8px rgba(44, 85, 48, 0.4);
    }

    /* Optional: Improve icon sizes */
    .toggle-icon i {
        font-size: 14px;
    }

    /* Messages and alerts */
    [role="alert"] {
        background-color: var(--bg-primary) !important;
        border-color: var(--border-color) !important;
    }

    /* Product title specific fixes */
    .product-title,
    .product-name,
    h2.text-\[\#2F3633\],
    h3.text-\[\#2F3633\],
    .text-\[\#2F3633\],
    a.text-\[\#2F3633\],
    div.text-\[\#2F3633\],
    span.text-\[\#2F3633\] {
        color: var(--product-title) !important;
    }

    /* Product description */
    .product-description,
    .text-\[\#9BB0A5\] {
        color: var(--product-description) !important;
    }

    /* Product price */
    .product-price,
    .price {
        color: var(--product-price) !important;
        font-weight: 500;
    }

    /* Override any remaining dark blue colors */
    .text-blue-900,
    .text-blue-800,
    .text-gray-800,
    .text-gray-900,
    [class*="text-[#2F"]  {
        color: var(--product-title) !important;
    }