/* Header Color Synchronization - Professional Color Scheme */

/* Primary Header Colors */
:root {
    --header-primary: #2c3e50;      /* Dark blue-gray */
    --header-secondary: #34495e;    /* Medium blue-gray */
    --header-accent: #3498db;       /* Clean blue */
    --header-text: #2c3e50;         /* Dark readable text */
    --header-text-light: #7f8c8d;   /* Light gray text */
    --header-bg: #ffffff;           /* Pure white */
    --header-border: #ecf0f1;       /* Very light gray */
}

/* Remove ALL yellow colors and replace with brand colors */
.text-warning, .bg-warning, .border-warning,
.text-yellow, .bg-yellow, .border-yellow,
[class*="yellow"], [class*="warning"] {
    color: var(--header-accent) !important;
    background-color: transparent !important;
    border-color: var(--header-accent) !important;
}

/* Top Bar Styling */
.u-header-topbar {
    background: var(--header-primary) !important;
    border-bottom: 1px solid var(--header-border);
}

.u-header-topbar .u-header-topbar__nav-link {
    color: #ffffff !important;
    font-weight: 500;
}

.u-header-topbar .u-header-topbar__nav-link:hover {
    color: #cbd5e0 !important;
}

.u-header-topbar * {
    color: #ffffff !important;
}

.u-header-topbar a,
.u-header-topbar .text-gray-110,
.hover-on-dark {
    color: #ffffff !important;
}

/* Main Header Section */
.bg-primary-down-lg {
    background: var(--header-bg) !important;
    border-bottom: 2px solid var(--header-border);
}

/* Search Bar */
.form-control {
    border-color: var(--header-accent) !important;
    color: var(--header-text) !important;
}

.btn-primary {
    background: var(--header-accent) !important;
    border-color: var(--header-accent) !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background: var(--header-primary) !important;
    border-color: var(--header-primary) !important;
    color: #ffffff !important;
}

/* Navigation Menu */
.u-header__navbar .navbar-nav .nav-link {
    color: var(--header-text) !important;
    font-weight: 500;
}

.u-header__navbar .navbar-nav .nav-link:hover {
    color: var(--header-accent) !important;
}

/* Categories Menu */
.btn-primary.rounded-top-lg {
    background: var(--header-primary) !important;
    border-color: var(--header-primary) !important;
    color: #ffffff !important;
}

.btn-primary.rounded-top-lg * {
    color: #ffffff !important;
}

.vertical-menu .nav-link {
    color: var(--header-text) !important;
    border-bottom: 1px solid var(--header-border);
    padding: 12px 16px;
}

.vertical-menu .nav-link:hover {
    background: #f7fafc !important;
    color: var(--header-accent) !important;
}

/* Header Icons and Text */
.text-gray-90, .text-gray-110, .text-muted {
    color: var(--header-text) !important;
}

.text-gray-90:hover, .text-gray-110:hover {
    color: var(--header-accent) !important;
}

/* Dark background text visibility */
.u-header [class*="bg-primary"] *,
.u-header [class*="bg-dark"] *,
.u-header .card-header * {
    color: #ffffff !important;
}

/* Light background text visibility */
.u-header [class*="bg-white"] *,
.u-header [class*="bg-light"] *,
.u-header .bg-primary-down-lg * {
    color: var(--header-text) !important;
}

/* Force override any yellow/warning colors */
.u-header .text-warning {
    color: var(--header-accent) !important;
}

/* Cart Badge and Primary Elements */
.bg-primary {
    background: var(--header-accent) !important;
}

.text-primary {
    color: var(--header-accent) !important;
}

.border-primary {
    border-color: var(--header-accent) !important;
}

/* Mobile Menu */
.u-hamburger__inner,
.u-hamburger__inner::before,
.u-hamburger__inner::after {
    background: var(--header-text) !important;
}

/* Sidebar */
.u-sidebar {
    background: var(--header-bg) !important;
}

.u-header-collapse__nav-link {
    color: var(--header-text) !important;
}

.u-header-collapse__nav-link:hover {
    color: var(--header-accent) !important;
}

/* Secondary Navigation */
.text-sale {
    color: var(--header-accent) !important;
    font-weight: 600;
}

/* Responsive Adjustments */
@media (max-width: 1199px) {
    .u-header-topbar {
        padding: 8px 0;
    }
}

@media (max-width: 767px) {
    .bg-primary-down-lg {
        padding: 10px 0;
    }
}