/* ============================================
   PROBACHI DARK LUXURY - Override de Variables
   Este archivo sobrescribe las variables de styles.css
   con la paleta Dark Luxury premium
   ============================================ */

:root {
    /* ============================================
       BACKGROUNDS - Deep Black Theme
       ============================================ */
    --bg-primary: #050505 !important;
    --bg-secondary: #0a0a0a !important;
    --bg-elevated: #0f0f0f !important;
    --bg-hover: #121212 !important;

    /* Mantener compatibilidad con variables antiguas */
    --dark-bg: #050505 !important;
    --dark-card: #0a0a0a !important;
    --dark-elevated: #0f0f0f !important;

    /* ============================================
       ACCENT COLORS - Luxury Palette
       ============================================ */
    --accent-cyan: #00f3ff !important;
    --accent-gold: #ffd700 !important;
    --accent-purple: #8b5cf6 !important;
    --accent-pink: #ec4899 !important;

    /* ============================================
       GRADIENTS - Premium
       ============================================ */
    --gradient-primary: linear-gradient(135deg, #00f3ff 0%, #8b5cf6 100%) !important;
    --gradient-gold: linear-gradient(135deg, #ffd700 0%, #FFB700 100%) !important;
    --gradient-hero: linear-gradient(135deg, #000000 0%, #050505 50%, #0a0a0a 100%) !important;
    --gradient-luxury: linear-gradient(45deg, #00f3ff, #8b5cf6, #ffd700) !important;

    /* ============================================
       GLASSMORPHISM 2.0
       ============================================ */
    --glass-bg: rgba(15, 15, 15, 0.7) !important;
    --glass-border: rgba(255, 255, 255, 0.05) !important;
    --glass-blur: blur(20px) !important;
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;

    /* ============================================
       SHADOWS & GLOW
       ============================================ */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.4) !important;
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5) !important;
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.6) !important;
    --shadow-xl: 0 20px 60px rgba(0, 0, 0, 0.7) !important;

    --glow-cyan: 0 0 20px rgba(0, 243, 255, 0.4) !important;
    --glow-gold: 0 0 20px rgba(255, 215, 0, 0.4) !important;
    --glow-purple: 0 0 20px rgba(139, 92, 246, 0.4) !important;

    /* ============================================
       TRANSITIONS - Smooth
       ============================================ */
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
    --transition-normal: 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;

    /* ============================================
       BORDER RADIUS
       ============================================ */
    --radius-sm: 8px !important;
    --radius-md: 12px !important;
    --radius-lg: 16px !important;
    --radius-xl: 24px !important;
    --radius-full: 9999px !important;
}

/* ============================================
   APLICAR GLASSMORPHISM A COMPONENTES
   ============================================ */

/* Navbar Glassmorphism */
.navbar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-bottom: 1px solid var(--glass-border) !important;
    box-shadow: var(--glass-shadow) !important;
}

/* Product Cards Glassmorphism */
.product-card,
.category-card,
.feature-card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-md) !important;
    transition: all var(--transition-normal) !important;
}

.product-card:hover,
.category-card:hover,
.feature-card:hover {
    background: rgba(20, 20, 20, 0.8) !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: var(--glow-cyan) !important;
    transform: translateY(-5px) !important;
}

/* Modales y Overlays */
.modal,
.search-modal,
.cart-sidebar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
}

/* Botones Premium */
.btn-hero-primary,
.btn-primary {
    background: var(--gradient-primary) !important;
    border: none !important;
    box-shadow: var(--glow-cyan) !important;
    transition: all var(--transition-normal) !important;
}

.btn-hero-primary:hover,
.btn-primary:hover {
    transform: scale(1.05) !important;
    box-shadow: 0 0 30px rgba(0, 243, 255, 0.6) !important;
}

.btn-hero-secondary {
    background: transparent !important;
    border: 2px solid var(--accent-gold) !important;
    color: var(--accent-gold) !important;
    transition: all var(--transition-normal) !important;
}

.btn-hero-secondary:hover {
    background: var(--accent-gold) !important;
    color: #000 !important;
    box-shadow: var(--glow-gold) !important;
}

/* Secciones con Background Mejorado */
.hero,
.products,
.categories,
.features {
    background: var(--bg-primary) !important;
}

/* Cards Elevadas */
.stat-card,
.review-card,
.flash-sale-section {
    background: var(--bg-elevated) !important;
    border: 1px solid var(--glass-border) !important;
    border-radius: var(--radius-lg) !important;
}

/* Footer Glassmorphism */
.footer {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border-top: 1px solid var(--glass-border) !important;
}

/* Inputs con Glassmorphism */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select {
    background: var(--glass-bg) !important;
    border: 1px solid var(--glass-border) !important;
    color: var(--text-primary) !important;
    border-radius: var(--radius-md) !important;
    transition: all var(--transition-fast) !important;
}

input:focus,
textarea:focus,
select:focus {
    outline: none !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: var(--glow-cyan) !important;
}

/* Scrollbar Dark Luxury */
::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

::-webkit-scrollbar-track {
    background: var(--bg-primary);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-cyan), var(--accent-purple));
    border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, var(--accent-purple), var(--accent-gold));
}

/* ============================================
   OVERRIDES ESPECÍFICOS POR PÁGINA
   ============================================ */

/* --- ACCOUNT PAGE OVERRIDES --- */
.account-hero {
    background: var(--bg-primary) !important;
    padding-top: 80px !important;
}

.account-header-card,
.dashboard-sidebar,
.dashboard-content {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    -webkit-backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
    box-shadow: var(--shadow-lg) !important;
}

.user-name,
.section-title,
.sidebar-item {
    font-family: var(--font-heading) !important;
}

.sidebar-item:hover,
.sidebar-item.active {
    background: rgba(0, 243, 255, 0.1) !important;
    /* Neon Cyan hint */
    color: var(--accent-cyan) !important;
    border-color: var(--accent-cyan) !important;
}

.points-number,
.big-points {
    background: linear-gradient(135deg, var(--accent-cyan) 0%, var(--accent-gold) 100%) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* --- CATALOG PAGE OVERRIDES --- */
.catalog-main {
    background: var(--bg-primary) !important;
}

.catalog-sidebar {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
}

.sidebar-header h3 {
    background: var(--gradient-luxury) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.filter-option {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid transparent !important;
}

.filter-option:hover {
    border-color: var(--accent-cyan) !important;
    background: rgba(0, 243, 255, 0.05) !important;
}

.filter-option input[type="checkbox"]:checked {
    background: var(--accent-cyan) !important;
    box-shadow: 0 0 10px var(--accent-cyan) !important;
}

.price-range input {
    background: var(--glass-bg) !important;
    border-color: var(--glass-border) !important;
}

.price-range input:focus {
    border-color: var(--accent-cyan) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3) !important;
}

.apply-price-btn,
.btn-clear-search {
    background: var(--gradient-primary) !important;
    box-shadow: var(--glow-cyan) !important;
}

.pagination-btn.active,
.page-number.active {
    background: var(--accent-cyan) !important;
    color: #000 !important;
    border-color: var(--accent-cyan) !important;
    box-shadow: var(--glow-cyan) !important;
}

/* --- PRODUCT DETAIL OVERRIDES --- */
.product-detail-container {
    background: var(--bg-primary) !important;
}

.product-info-card {
    background: var(--glass-bg) !important;
    backdrop-filter: var(--glass-blur) !important;
    border: 1px solid var(--glass-border) !important;
}