/*
 * ===================================================================
 *  Dynamic Theming Stylesheet
 *  This file uses the CSS variables defined in 'app.blade.php' to apply
 *  the selected persona's color theme across the storefront.
 * ===================================================================
*/

/*
 * ===================================================================
 *  1. General & Reusable Components
 * ===================================================================
 */

/* General link colors */
a {
    color: var(--theme-primary-color);
    text-decoration: none;
}
a:hover {
    color: var(--theme-primary-color);
    filter: brightness(85%);
}

/* Primary themed buttons (solid background) */
.btn-primary-themed {
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
    color: #fff;
    transition: filter 0.2s ease-in-out;
}
.btn-primary-themed:hover {
    color: #fff;
    /* This filter darkens the color slightly on hover, works for any color. */
    filter: brightness(90%);
}

/* Secondary themed buttons (outline) */
.btn-secondary-themed {
    color: var(--theme-primary-color);
    background-color: transparent;
    border-color: var(--theme-primary-color);
    transition: all 0.2s ease-in-out;
}
.btn-secondary-themed:hover {
    background-color: var(--theme-primary-color);
    border-color: var(--theme-primary-color);
    color: #fff;
}

/*
 * ===================================================================
 *  2. Homepage Specific Components
 * ===================================================================
 */

/* Section Headers ("Hot Right Now", "New Arrivals", etc.) */
.section-header .view-all-link {
    color: var(--theme-primary-color) !important;
}

/* Features Bar ("Instant Access", "Secure Downloads") */
.features-bar .feature-item .feature-icon i {
    color: var(--theme-primary-color);
}

/* Product Cards */
.product-card .product-price .current-price {
    color: var(--theme-primary-color);
    font-weight: 600;
}

.product-card .add-to-cart-btn {
    background-color: var(--theme-secondary-color) !important;
    color: #fff !important;
    border: none !important;
    transition: filter 0.2s;
}
.product-card .add-to-cart-btn:hover {
    filter: brightness(90%);
}

.product-card .product-name a:hover {
    color: var(--theme-primary-color);
}

/* Flash Sale Banners */
.flash-sale-section {
    background-color: var(--theme-primary-color);
}
.flash-sale-section .countdown-timer-box {
    border: 1px solid var(--theme-secondary-color);
    background-color: #fff;
}
.flash-sale-section .countdown-timer-box span {
    color: var(--theme-primary-color);
}
.flash-sale-section .flash-sale-content .deal-subtitle {
    color: var(--theme-secondary-color);
}

/*
 * ===================================================================
 *  3. Header & Navigation
 * ===================================================================
 */

/* Main Header Top Bar */
.header-marketplace-top {
    background-color: var(--theme-primary-color);
}

/* Dynamic Navigation Categories Dropdown */
.dynamic-nav .category-menu > li:hover > a {
    color: var(--theme-primary-color);
}

/* Search button in header */
.header-marketplace-middle .search-form .search-button {
    background-color: var(--theme-secondary-color);
}

/* Cart icon badge */
.header-marketplace-actions .action-item .badge {
    background-color: var(--theme-secondary-color);
}