/* ============================================================================
   HEADER DROPDOWN MENU - MATCH HEADER BACKGROUND COLOR
   Critical Fix: Force dropdown menus to inherit header's blue background
   Applies to: Language switcher, Browse by Category, Specialties dropdowns
   ============================================================================ */

/* Force dropdown menus to match header color (both LTR and RTL) */
.navigation__extra .ps-dropdown-menu,
.ps-dropdown-menu {
    background-color: var(--color-1st) !important;
    background: var(--color-1st) !important;
}

/* White text on blue background */
.navigation__extra .ps-dropdown-menu li a,
.ps-dropdown-menu li a {
    color: #ffffff !important;
}

/* Hover effect - lighter blue */
.navigation__extra .ps-dropdown-menu li a:hover,
.ps-dropdown-menu li a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: #ffffff !important;
}

/* Language dropdown - ensure flags are visible */
.navigation__extra .ps-dropdown.language .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
}

.navigation__extra .ps-dropdown.language .ps-dropdown-menu img {
    /* Ensure flag icons remain visible on blue background */
    opacity: 1;
}

/* Browse by Category and Specialties dropdowns */
.navigation .ps-dropdown-menu,
.header .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
}

.navigation .ps-dropdown-menu a,
.header .ps-dropdown-menu a {
    color: #ffffff !important;
}

.navigation .ps-dropdown-menu a:hover,
.header .ps-dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

/* RTL Specific - ensure proper alignment */
body[dir="rtl"] .ps-dropdown-menu,
body[dir="rtl"] .navigation__extra .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
    text-align: right !important;
}

body[dir="rtl"] .ps-dropdown-menu li a,
body[dir="rtl"] .navigation__extra .ps-dropdown-menu li a {
    color: #ffffff !important;
}