/* ==============================================================================
   BRAND COLOR ENHANCEMENT LAYER
   Purpose: Enhance visual hierarchy and polish using existing Primary & Secondary
   colors. This file ONLY modifies color, shadow, border-color, and background-color.
   NO layout, spacing, sizing, positioning, or structural changes.
   ============================================================================== */

/* --- 1. SEARCH BAR ENHANCEMENT --- */
.search-submit-btn {
    color: var(--web-primary) !important;
    transition: color 0.2s ease, transform 0.2s ease !important;
}
.search-submit-btn:hover {
    color: var(--web-secondary) !important;
}
.search-input-pill {
    border-color: var(--web-primary-20) !important;
}
.search-input-pill:focus {
    border-color: var(--web-primary) !important;
    box-shadow: 0 0 0 3px var(--web-primary-10), 0 4px 16px var(--web-primary-20) !important;
}

/* --- 2. HEADER INTERACTIVE ELEMENT ACCENTS --- */
/* Toolbar icon hover color - more vibrant */
.toolbar-item-link:hover .toolbar-icon-box i,
.toolbar-item-link:hover .toolbar-label {
    color: var(--web-primary) !important;
}

/* Badge counts - ensure they use primary */
.badge-count,
.navbar-tool .navbar-tool-label {
    background: var(--web-primary) !important;
}

/* Active navigation underlines */
.nav-link-hover:hover,
.nav-link-hover.active {
    color: var(--web-primary) !important;
}
.nav-link-hover::after {
    background-color: var(--web-primary) !important;
}

/* Navbar stuck menu - primary color */
.navbar-stuck-menu {
    background-color: var(--web-primary) !important;
}

/* --- 3. BUTTON ENHANCEMENTS --- */
/* Primary buttons - ensure consistent primary color and a polished hover */
.btn--primary,
.btn-primary,
.btn-modern-primary,
.action-add-to-cart-from-card {
    background-color: var(--web-primary) !important;
    border-color: var(--web-primary) !important;
    box-shadow: 0 4px 14px var(--web-primary-40) !important;
}
.btn--primary:hover,
.btn-primary:hover,
.btn-modern-primary:hover,
.action-add-to-cart-from-card:hover {
    background-color: var(--web-primary) !important;
    border-color: var(--web-primary) !important;
    box-shadow: 0 6px 20px var(--web-primary-50) !important;
    filter: brightness(1.1);
}
.btn--primary:focus,
.btn-primary:focus {
    box-shadow: 0 0 0 3px var(--web-primary-20), 0 4px 14px var(--web-primary-40) !important;
}

/* Outline primary buttons - brand-consistent */
.btn-outline-primary,
.btn-outline-accent {
    color: var(--web-primary) !important;
    border-color: var(--web-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-accent:hover {
    background-color: var(--web-primary) !important;
    border-color: var(--web-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 14px var(--web-primary-40) !important;
}

/* Secondary buttons - ensure secondary color */
.btn-secondary,
.btn--secondary {
    background-color: var(--web-secondary) !important;
    border-color: var(--web-secondary) !important;
}
.btn-secondary:hover,
.btn--secondary:hover {
    box-shadow: 0 4px 14px var(--web-secondary-20) !important;
    filter: brightness(1.1);
}

/* --- 4. PRODUCT CARD SUBTLE ENHANCEMENTS --- */
/* Product card hover - brand-colored border glow */
.modern-card:hover,
.product-card-v2:hover,
.preview-product-card:hover {
    border-color: var(--web-primary-40) !important;
    box-shadow: 0 12px 28px var(--web-primary-20), 0 4px 12px rgba(15, 23, 42, 0.06) !important;
}

/* Product card title hover - primary color */
.product-card-v2:hover .card-title-text,
.preview-product-card:hover .card-title-text,
.product-card-v2:hover .product-title1,
.__best-selling:hover .ptr,
.flash_deal_product:hover .flash-product-title {
    color: var(--web-primary) !important;
}

/* Product card action button overlays */
.action-buttons-overlay .action-btn-circle {
    transition: all 0.2s ease !important;
}
.action-buttons-overlay .action-btn-circle:hover {
    background-color: var(--web-primary) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px var(--web-primary-40) !important;
}

/* Discount badge - keep red gradient but ensure branding */
.for-discount-value {
    background: var(--web-primary) !important;
}

/* Price color enhancement */
.flash_deal_product_details .flash-product-price,
.for-count-value,
.count-value {
    color: var(--web-primary) !important;
}

/* --- 5. CATEGORY & BRAND CIRCLES --- */
.category-circle-item:hover .category-circle-img-wrap,
.brand-circle-item:hover .brand-circle-img-wrap {
    border-color: var(--web-primary) !important;
    box-shadow: 0 12px 28px var(--web-primary-20) !important;
}
.category-circle-item:hover .category-circle-title,
.brand-circle-item:hover .brand-circle-title {
    color: var(--web-primary) !important;
}

/* --- 6. CAROUSEL DOT & ARROW ENHANCEMENT --- */
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    background: var(--web-primary) !important;
}
.owl-theme .owl-nav [class*="owl-"] {
    background-color: var(--web-primary) !important;
    color: #fff !important;
    transition: all 0.2s ease !important;
}
.owl-theme .owl-nav [class*="owl-"]:hover {
    box-shadow: 0 4px 12px var(--web-primary-40) !important;
    filter: brightness(1.1);
}

/* Flash deal countdown borders */
.cz-countdown-days,
.cz-countdown-hours,
.cz-countdown-minutes,
.cz-countdown-seconds {
    border-color: var(--web-primary) !important;
}
.countdown-background {
    background: var(--web-primary) !important;
}
.countdown-card {
    background: var(--web-primary-10) !important;
}
.flash-deal-text {
    color: var(--web-primary) !important;
}

/* --- 7. PAGINATION ENHANCEMENT --- */
.page-item.active .page-link {
    background-color: var(--web-primary) !important;
    border-color: var(--web-primary) !important;
    box-shadow: 0 4px 12px var(--web-primary-40) !important;
}
.page-link:hover {
    color: var(--web-primary) !important;
    background-color: var(--web-primary-10) !important;
    border-color: var(--web-primary-40) !important;
}

/* --- 8. FORM FOCUS STATES --- */
.form-control:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--web-primary) !important;
    box-shadow: 0 0 0 3px var(--web-primary-10) !important;
}

/* Custom checkboxes and radio buttons */
.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--web-primary) !important;
    border-color: var(--web-primary) !important;
}
.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem var(--web-primary-10) !important;
}
[type="radio"]:not(.show):checked + span:after {
    background: var(--web-secondary) !important;
    box-shadow: 0 0 0 0.10em var(--web-secondary) !important;
}

/* --- 9. LINKS & TEXT ACCENTS --- */
a:hover {
    color: var(--web-secondary) !important;
}
.text-accent,
.text-primary,
.text-base,
.web-text-primary,
.active-menu {
    color: var(--web-primary) !important;
}

/* Dropdown hover/active */
.dropdown-item:hover,
.dropdown-item:focus {
    color: var(--web-primary) !important;
    background-color: var(--web-primary-10) !important;
}
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--web-primary) !important;
    color: #fff !important;
}

/* --- 10. NAV TABS ENHANCEMENT --- */
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
    color: var(--web-primary) !important;
    border-bottom-color: var(--web-primary) !important;
}
.nav-tabs .nav-link:hover {
    color: var(--web-primary) !important;
}

/* --- 11. CHECKOUT STEPS --- */
.checkout-steps.steps-light .step-item.active .step-count,
.checkout-steps.steps-light .step-item.active .step-progress {
    background-color: var(--web-primary) !important;
}
.checkout-steps.steps-light .step-item.active.current {
    color: var(--web-primary) !important;
}
.checkout-details-page .nav-tabs .nav-link.active {
    background: var(--web-primary) !important;
    border-color: var(--web-primary) !important;
}
.checkout-details-page .nav-tabs .nav-link {
    background: var(--web-secondary) !important;
    border-color: var(--web-secondary) !important;
}

/* --- 12. SCROLLBAR ENHANCEMENT --- */
::-webkit-scrollbar-thumb:hover {
    background: var(--web-primary-60) !important;
}

/* --- 13. SOCIAL MEDIA HOVER --- */
.social-media:hover {
    color: var(--web-primary) !important;
}

/* --- 14. FOOTER SOCIAL BUTTONS --- */
.footer-social-btn:hover {
    background: var(--web-primary) !important;
    box-shadow: 0 6px 16px var(--web-primary-40) !important;
}

/* --- 15. BACK-TO-TOP BUTTON --- */
.btn-scroll-top {
    background-color: var(--web-primary) !important;
}
.btn-scroll-top:hover {
    background-color: var(--web-primary) !important;
    box-shadow: 0 6px 16px var(--web-primary-40) !important;
}

/* --- 16. FEATURED DEAL SECTION --- */
.featured_deal_left {
    background-color: var(--web-primary) !important;
}
.deal_of_the_day {
    background: var(--web-secondary) !important;
}

/* --- 17. BADGE ENHANCEMENTS --- */
span.badge-accent {
    color: var(--web-primary) !important;
    background-color: var(--web-primary-20) !important;
}
.badge-primary {
    background-color: var(--web-primary) !important;
}

/* --- 18. SELLER/VENDOR CARD ACCENTS --- */
.others-store-card:hover {
    border-color: var(--web-primary-40) !important;
}

/* --- 19. STAR RATING COLOR --- */
.rating {
    --fill: var(--web-primary) !important;
}

/* --- 20. SUBTLE SECTION BACKGROUNDS --- */
.best-selling-image,
.top-rated-image,
.flash-deals-background-image {
    background: var(--web-primary-10) !important;
}
.czi-arrow-left,
.czi-arrow-right {
    color: var(--web-primary) !important;
    background: var(--web-primary-10) !important;
}
.feature-product .czi-arrow-left,
.feature-product .czi-arrow-right {
    color: var(--web-primary) !important;
    background: var(--web-primary-10) !important;
}

/* --- 21. VIEW ALL LINKS --- */
.view-all-text {
    color: var(--web-secondary) !important;
    transition: color 0.2s ease !important;
}
.view-all-text:hover {
    color: var(--web-primary) !important;
}

/* --- 22. VENDOR ROLE CARD SELECTION --- */
input.custom-role-radio:checked + .role-card {
    border-color: var(--web-primary) !important;
    background-color: var(--web-primary-10) !important;
}
input.custom-role-radio:checked + .role-card i,
input.custom-role-radio:checked + .role-card span {
    color: var(--web-primary) !important;
}

/* --- 23. PROFILE SIDEBAR ACTIVE STATE --- */
.widget-title a.active,
.widget-title a:hover {
    color: var(--web-primary) !important;
    border-left-color: var(--web-primary) !important;
}

/* --- 24. LOADING SPINNER / PROGRESS ACCENTS --- */
.spinner-border {
    color: var(--web-primary) !important;
}

/* --- 25. SELECTION HIGHLIGHT --- */
::selection {
    background-color: var(--web-primary-40);
    color: #fff;
}

/* --- 26. CATEGORY DIV HOVER --- */
.category_div:hover {
    border-color: var(--web-primary-40) !important;
    color: var(--web-primary) !important;
}

/* --- 27. WISHLIST / COMPARE INTERACTIVE STATES --- */
.wishlist-icon.active i,
.wishlist-icon:hover i {
    color: var(--web-primary) !important;
}

/* --- 28. MEGA NAV LINK COLORS --- */
.mega-nav .nav-item .nav-link {
    color: var(--web-primary) !important;
}
@media (max-width: 767px) {
    .mega-nav1,
    .mega-nav1 .nav-link {
        color: var(--web-primary) !important;
    }
}

/* --- 29. ACCORDION / COLLAPSE ACTIVE --- */
.accordion .card-header .btn[aria-expanded="true"],
.accordion .card-header .btn:focus {
    color: var(--web-primary) !important;
}

/* --- 30. TABLE HEADER ACCENT LINE --- */
.table thead th {
    border-bottom-color: var(--web-primary-20) !important;
}

/* --- 31. COOKIE CONSENT ACCEPT BUTTON --- */
.cookie-section .cookie-accept {
    background-color: var(--web-primary) !important;
    border-color: var(--web-primary) !important;
}

/* --- 32. TOOLTIP / POPOVER ACCENT --- */
.tooltip-inner {
    background-color: var(--web-primary) !important;
}
.tooltip .arrow::before {
    border-top-color: var(--web-primary) !important;
}