/* ============================================
   ASTROESSENTIAL - DARK THEME (DEFAULT)
   Cosmic Dark Mode - Original Theme
   ============================================ */

/* Dark Theme Root Variables */
:root {
    /* Primary Background Colors - Cosmic Dark */
    --color-bg-primary-dark: #0b0715; /* Cosmic */
    --color-bg-secondary-dark: #151028; /* Nebula */
    --color-bg-tertiary-dark: #1d1435; /* Deeper Nebula */
    --color-bg-elevated-dark: #221842; /* Elevated cards */

    /* Astrological Accent Colors - Dark Mode */
    --color-gold-dark: #f6d47d; /* Original gold */
    --color-gold-darker: #d4a855; /* Darker gold */
    --color-gold-glow: rgba(246, 212, 125, 0.2);

    /* Text Colors - Light on Dark */
    --color-text-primary-dark: #e8d9ff; /* Aura */
    --color-text-secondary-dark: rgba(232, 217, 255, 0.8);
    --color-text-tertiary-dark: rgba(232, 217, 255, 0.6);
    --color-text-muted-dark: rgba(232, 217, 255, 0.4);

    /* Border Colors - Dark Mode */
    --color-border-light-dark: rgba(255, 255, 255, 0.1);
    --color-border-medium-dark: rgba(255, 255, 255, 0.2);
    --color-border-dark-dark: rgba(255, 255, 255, 0.3);

    /* Shadow Colors - Dark Mode */
    --shadow-dark-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-dark-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
    --shadow-dark-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
    --shadow-dark-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6);
    --shadow-gold-dark: 0 10px 30px -10px rgba(246, 212, 125, 0.4);
}

/* ============================================
   DEFAULT BODY (DARK THEME)
   ============================================ */
body {
    background-color: var(--color-bg-primary-dark);
    color: var(--color-text-primary-dark);
}

/* Default color scheme */
:root {
    color-scheme: dark;
}

/* ============================================
   STARFIELD BACKGROUND - Dark Theme
   ============================================ */
.bg-starfield {
    background-image: radial-gradient(
            1200px 600px at 10% 10%,
            rgba(255, 255, 255, 0.03),
            transparent 60%
        ),
        radial-gradient(
            1000px 500px at 80% 20%,
            rgba(246, 212, 125, 0.02),
            transparent 60%
        );
}

/* ============================================
   ZODIAC WHEEL - Dark Theme
   ============================================ */
.zodiac-wheel {
    opacity: 0.12;
}

/* ============================================
   NOTE: All other dark theme styles are 
   defined directly in Tailwind classes
   ============================================ */

/* ============================================
   PASSWORD TOGGLE ICON - Dark Theme
   ============================================ */
.password-toggle-btn {
    color: rgba(232, 217, 255, 0.6);
}

.password-toggle-btn:hover {
    color: rgba(232, 217, 255, 1);
}

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

.locale-modal-container {
    background: linear-gradient(
        to bottom right,
        var(--color-bg-secondary-dark),
        var(--color-bg-tertiary-dark)
    );
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.locale-modal-header {
    background: linear-gradient(
        to right,
        rgba(246, 212, 125, 0.2),
        rgba(255, 255, 255, 0.1)
    );
    border-color: rgba(255, 255, 255, 0.1);
}

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

.locale-modal-header p {
    color: rgba(255, 255, 255, 0.7);
}

.locale-modal-content label {
    color: rgba(255, 255, 255, 0.9);
}

.locale-option-inner,
.currency-option-inner {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.locale-option input:checked + .locale-option-inner,
.currency-option input:checked + .currency-option-inner {
    background-color: rgba(246, 212, 125, 0.1);
    border-color: var(--color-gold-dark);
    box-shadow: 0 0 20px rgba(246, 212, 125, 0.2);
}

.locale-option:hover .locale-option-inner,
.currency-option:hover .currency-option-inner {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(246, 212, 125, 0.5);
}

.locale-option-inner .font-semibold,
.currency-option-inner .font-semibold {
    color: #ffffff;
}

.locale-option-inner .text-xs,
.currency-option-inner .text-xs {
    color: rgba(255, 255, 255, 0.6);
}

.locale-modal-footer {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
}

.locale-modal-btn-primary {
    background: linear-gradient(
        to right,
        var(--color-gold-dark),
        rgba(246, 212, 125, 0.8)
    );
    color: var(--color-bg-primary-dark);
    box-shadow: 0 0 20px rgba(246, 212, 125, 0.3);
}

.locale-modal-btn-primary:hover {
    background: linear-gradient(
        to right,
        var(--color-gold-darker),
        var(--color-gold-dark)
    );
    box-shadow: 0 0 30px rgba(246, 212, 125, 0.5);
    transform: scale(1.05);
}

.locale-modal-btn-secondary {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
}

.locale-modal-btn-secondary:hover {
    background-color: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.3);
}

/* Order Filter Tabs - Dark Theme */
.order-filter {
    background-color: rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
}

.order-filter:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

.order-filter.active {
    background-color: rgba(184, 145, 79, 0.2);
    color: #f6d47d;
}

/* ============================================
   DROPDOWN MENU ITEMS - Dark Theme
   ============================================ */
.dropdown-menu-item {
    color: rgba(232, 217, 255, 0.9);
    background-color: transparent;
}

.dropdown-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-gold-dark);
}

.dropdown-menu-item-danger {
    color: #ef4444;
    background-color: transparent;
}

.dropdown-menu-item-danger:hover {
    background-color: rgba(239, 68, 68, 0.2);
    color: #fca5a5;
}

.language-dropdown-item,
.currency-dropdown-item {
    color: rgba(232, 217, 255, 0.9);
    background-color: transparent;
}

.language-dropdown-item:hover,
.currency-dropdown-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--color-gold-dark);
}

/* ============================================
   MEGA MENU ITEMS - Dark Theme
   ============================================ */
.mega-menu-item {
    color: rgba(232, 217, 255, 0.8);
}

.mega-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.mega-menu-item-card {
    background-color: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.1);
    color: rgba(232, 217, 255, 0.8);
}

.mega-menu-item-card:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(246, 212, 125, 0.3);
    color: #ffffff;
}

/* ============================================
   DROPDOWN CONTAINERS - Dark Theme
   ============================================ */
.dropdown-container {
    background: linear-gradient(
        to bottom,
        #221842 0%,
        #0f0a1f 100%
    );
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.dropdown-header {
    background: linear-gradient(
        to right,
        rgba(246, 212, 125, 0.15) 0%,
        rgba(140, 111, 168, 0.15) 100%
    );
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-header .user-name {
    color: #ffffff;
}

.dropdown-header .user-email {
    color: rgba(232, 217, 255, 0.7);
}

.dropdown-section-label {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

.dropdown-section {
    border-color: rgba(255, 255, 255, 0.1);
}

/* ============================================
   PRODUCT TABS - Dark Theme
   ============================================ */

/* Tab Buttons */
.product-tab-btn {
    color: rgba(232, 217, 255, 0.6);
    border-bottom: 2px solid transparent;
}

.product-tab-btn:hover {
    color: rgba(232, 217, 255, 0.9);
}

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

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

/* Tab Content */
.product-tab-content {
    color: rgba(232, 217, 255, 0.9);
}

/* Description Section Border */
.product-description-section {
    border-right-color: rgba(255, 255, 255, 0.1);
}

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

/* Spec Rows */
.spec-row {
    background: rgba(255, 255, 255, 0.03);
}

.spec-row:hover {
    background: rgba(255, 255, 255, 0.06);
}

.spec-label {
    color: rgba(232, 217, 255, 0.7);
}

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

/* Divider */
.spec-divider {
    border-top-color: rgba(255, 255, 255, 0.1);
}

/* Empty State */
.specs-empty-state {
    color: rgba(232, 217, 255, 0.5);
}