/*==========================================================================
Theme Configuration CSS
This file centralizes the primary color so it acts like an .env file.
You only need to change the --primary-color variable here to update 
the entire website's color scheme.
==========================================================================*/

:root {
    /* Set your main centralized brand color here (Currently: Yellow #FCA028) */
    --primary-color: #FCA028;

    /* Override all template variations to map back to the single primary color */
    --primary-color-1: var(--primary-color) !important;
    --primary-color-2: var(--primary-color) !important;
    --primary-color-3: var(--primary-color) !important;
}


/* Fix header icon sizes to be identical and slightly bigger */
.header__two-topbar-social ul li a i,
.top__bar-right-social ul li a i,
.header__area-menubar-right-box-sidebar-popup-social ul li a i {
    font-size: 18px !important;
}
.header__two-topbar-social ul li,
.top__bar-right-social ul li,
.header__area-menubar-right-box-sidebar-popup-social ul li {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 32px !important;
    height: 32px !important;
}
.header__two-topbar-social ul li a,
.top__bar-right-social ul li a,
.header__area-menubar-right-box-sidebar-popup-social ul li a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* Reduce spacing between navbar items */
.header__area-menubar-center-menu ul li a {
    padding-left: 15px !important;
    padding-right: 15px !important;
}

/* Section 2: Fix Hero Slider Arrows overlap on mobile */
@media (max-width: 767px) {
    .banner__two-arrow-prev, .banner__two-arrow-next {
        top: 85% !important;
        transform: translateY(0) !important;
    }
}


/* Dynamic Product Detail UI Enhancements */
.dynamic-product-card {
    background: var(--bs-white);
    padding: 50px;
    border-radius: 20px;
    box-shadow: 0px 10px 50px rgba(0,0,0,0.05);
}

.dark-mode .dynamic-product-card {
    background: #111; /* Dark mode background */
    box-shadow: 0px 10px 50px rgba(0,0,0,0.5);
}

.dynamic-meta-box {
    background: #f8f9fa;
    padding: 20px;
    border-radius: 8px;
    border-left: 4px solid var(--primary-color);
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.dark-mode .dynamic-meta-box {
    background: #222;
}

/* Hide search button on mobile navbar */
@media (max-width: 991px) {
    .header__area-menubar-right-box-search,
    .header__area-menubar-right-search {
        display: none !important;
    }
}