/*
 * hpg-theme-dark.css
 * ------------------
 * Dark theme-specific styles for Hairtivity
 * Applied when body[data-hpg-theme="dark"]
 */

/* ReSharper disable CssBrowserCompatibility */

/* Gallery background */
body[data-hpg-theme="dark"] .hpg-gallery { background: var(--hpg-bg-dark); }

/* Filter panel inputs - subtle dark background for better contrast */

body[data-hpg-theme="dark"] .hpg-filter-panel input[type="text"],
body[data-hpg-theme="dark"] .hpg-filter-panel input[type="email"],
body[data-hpg-theme="dark"] .hpg-filter-panel input[type="tel"],
body[data-hpg-theme="dark"] .hpg-filter-panel input[type="number"],
body[data-hpg-theme="dark"] .hpg-filter-panel input[type="search"],
body[data-hpg-theme="dark"] .hpg-filter-panel textarea,
body[data-hpg-theme="dark"] .hpg-filter-panel select {
    background: var(--hpg-input-bg-dark);
    border-color: var(--hpg-input-border-dark);
    color: var(--hpg-text-light);
}

/* Cart form panel inputs */

body[data-hpg-theme="dark"] .hpg-cart-form-panel input[type="text"],
body[data-hpg-theme="dark"] .hpg-cart-form-panel input[type="email"],
body[data-hpg-theme="dark"] .hpg-cart-form-panel input[type="tel"],
body[data-hpg-theme="dark"] .hpg-cart-form-panel input[type="number"],
body[data-hpg-theme="dark"] .hpg-cart-form-panel textarea {
    background: var(--hpg-input-bg-dark);
    border-color: var(--hpg-input-border-dark);
    color: var(--hpg-text-light);
}

/* Generic hpg-input class for dark theme */

body[data-hpg-theme="dark"] .hpg-input {
    background: var(--hpg-input-bg-dark);
    border-color: var(--hpg-input-border-dark);
    color: var(--hpg-text-light);
}

body[data-hpg-theme="dark"] .hpg-input::placeholder { color: var(--hpg-input-placeholder-dark); }

/* Radio button styling for dark theme */

body[data-hpg-theme="dark"] .hpg-radio {
    background: var(--hpg-input-bg-dark) !important;
    border-color: var(--hpg-input-border-dark) !important;
}

/* Filter secondary button for dark theme */

body[data-hpg-theme="dark"] .hpg-filter-actions .hpg-btn-secondary {
    background-color: var(--hpg-secondary-gray-dark);
    border-color: var(--hpg-secondary-gray-border-dark);
    color: var(--hpg-white);
}

/* Cart panel text readability */

body[data-hpg-theme="dark"] .hpg-cart-panel { color: var(--hpg-text-light) !important; }

body[data-hpg-theme="dark"] .hpg-cart-panel li span,
body[data-hpg-theme="dark"] .hpg-cart-summary,
body[data-hpg-theme="dark"] .hpg-cart-panel b { color: var(--hpg-text-light) !important; }

/* Modal styling for dark theme */

body[data-hpg-theme="dark"] .hpg-modal {
    background: var(--hpg-card-bg-dark);
    color: var(--hpg-card-text-dark);
}

/* Toast styling for dark theme */

body[data-hpg-theme="dark"] .hpg-toast-success { border-left-color: var(--hpg-alert-success-accent-dark); }

body[data-hpg-theme="dark"] .hpg-toast-error { border-left-color: var(--hpg-alert-error-accent-dark); }

/* Autofill override for dark theme */

body[data-hpg-theme="dark"] .hpg-input:-webkit-autofill,
body[data-hpg-theme="dark"] .hpg-input:-webkit-autofill:hover,
body[data-hpg-theme="dark"] .hpg-input:-webkit-autofill:focus,
body[data-hpg-theme="dark"] .hpg-input:-webkit-autofill:active,
body[data-hpg-theme="dark"] input.hpg-input:-webkit-autofill,
body[data-hpg-theme="dark"] input.hpg-input:-webkit-autofill:hover,
body[data-hpg-theme="dark"] input.hpg-input:-webkit-autofill:focus,
body[data-hpg-theme="dark"] input.hpg-input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px var(--hpg-input-bg-dark) inset !important;
    -webkit-text-fill-color: var(--hpg-white) !important;
    background-color: var(--hpg-input-bg-dark) !important;
    border-color: var(--hpg-input-border-dark) !important;
    color: var(--hpg-white) !important;
}

/* Home page hero background */

body[data-hpg-theme="dark"] .hpg-home-hero {
    background: linear-gradient(135deg, var(--hpg-overlay-bg-dark-50, rgba(0, 0, 0, 0.5)) 0, var(--hpg-overlay-primary-15, rgba(88, 35, 118, 0.15)) 100%);
    /* Fallback solid color if variables are missing or gradients aren't supported */
    background-color: var(--hpg-overlay-bg-dark-50, rgba(0, 0, 0, 0.5));
}

/* About page address block */

body[data-hpg-theme="dark"] .hpg-about address { background: var(--hpg-overlay-primary-05); }

/* ========================================
 * Product Card dark mode styling
 * Darker background to make images pop
 * ======================================== */

body[data-hpg-theme="dark"] .hpg-product-card {
    background: var(--hpg-card-bg-dark);
    box-shadow: 0 2px 20px 0 var(--hpg-shadow-lg);
    color: var(--hpg-card-text-dark);
}

body[data-hpg-theme="dark"] .hpg-product-card:hover,
body[data-hpg-theme="dark"] .hpg-product-card:focus { 
    background: var(--hpg-card-bg-dark-elevated);
    box-shadow: 0 4px 28px 0 var(--hpg-shadow-xl); 
}

body[data-hpg-theme="dark"] .hpg-product-card img { 
    background: transparent;
}

body[data-hpg-theme="dark"] .hpg-product-title { 
    color: var(--hpg-card-text-dark); 
}

body[data-hpg-theme="dark"] .hpg-product-brand {
    color: var(--hpg-primary-dark);
    font-weight: 700;
}

body[data-hpg-theme="dark"] .hpg-product-price { 
    color: var(--hpg-accent-dark); 
}

/* Compact product card styling */

body[data-hpg-theme="dark"] .hpg-product-card-compact {
    background: var(--hpg-card-bg-dark);
    color: var(--hpg-card-text-dark);
}

body[data-hpg-theme="dark"] .hpg-product-card-compact-img {
    background: transparent;
}

/* ========================================
 * Product Detail Page dark mode styling
 * Darker card background with adjusted text
 * ======================================== */

body[data-hpg-theme="dark"] .hpg-popup-details {
    background: var(--hpg-card-bg-dark);
    color: var(--hpg-card-text-dark);
}

body[data-hpg-theme="dark"] .hpg-popup-details h2 {
    color: var(--hpg-card-text-dark);
}

body[data-hpg-theme="dark"] .hpg-popup-details #popup-desc {
    color: var(--hpg-card-text-muted-dark);
}

body[data-hpg-theme="dark"] .hpg-popup-package-size,
body[data-hpg-theme="dark"] .hpg-popup-qty { 
    color: var(--hpg-card-text-dark); 
}

body[data-hpg-theme="dark"] .hpg-popup-brand,
body[data-hpg-theme="dark"] .hpg-popup-from-price,
body[data-hpg-theme="dark"] .hpg-popup-packages-title { 
    color: var(--hpg-primary-dark); 
}

body[data-hpg-theme="dark"] .hpg-popup-package-price { 
    color: var(--hpg-accent-dark); 
}

body[data-hpg-theme="dark"] .hpg-product-main-image {
    background: transparent;
}

body[data-hpg-theme="dark"] .hpg-popup-package-img {
    background: transparent;
}

/* ========================================
 * Product Links Panel dark mode styling
 * ======================================== */

body[data-hpg-theme="dark"] .hpg-product-links {
    background: var(--hpg-card-bg-dark);
    color: var(--hpg-card-text-dark);
}

body[data-hpg-theme="dark"] .hpg-product-links-title {
    color: var(--hpg-primary-dark);
}

body[data-hpg-theme="dark"] .hpg-product-links-message {
    color: var(--hpg-card-text-muted-dark);
}

body[data-hpg-theme="dark"] .hpg-product-links-current {
    color: var(--hpg-accent-dark);
}

body[data-hpg-theme="dark"] .hpg-product-link-card {
    background: var(--hpg-card-bg-dark-elevated);
    color: var(--hpg-card-text-dark);
}

body[data-hpg-theme="dark"] .hpg-product-link-card:hover,
body[data-hpg-theme="dark"] .hpg-product-link-card:focus {
    background: var(--hpg-card-bg-dark-subtle);
}

body[data-hpg-theme="dark"] .hpg-product-link-img { 
    background: transparent; 
}

body[data-hpg-theme="dark"] .hpg-product-link-name {
    color: var(--hpg-card-text-dark);
}

body[data-hpg-theme="dark"] .hpg-product-link-brand {
    color: var(--hpg-primary-dark);
}

body[data-hpg-theme="dark"] .hpg-product-link-price {
    color: var(--hpg-accent-dark);
}

/* ========================================
 * Carousel Modal dark mode styling
 * ======================================== */

body[data-hpg-theme="dark"] .hpg-carousel-content {
    background: var(--hpg-card-bg-dark);
}

body[data-hpg-theme="dark"] .hpg-carousel-image {
    background: transparent;
    box-shadow: none;
}