/* ============================================================================
   DROPDOWN & MEGA MENU FIX - CLEAN VERSION
   Fixes the white box issue on dropdowns by ensuring header color consistency
   ============================================================================ */

/* ═══════════════════════════════════════════════════════════════════════════
   1. HEADER DROPDOWNS - MATCH HEADER BACKGROUND
   ═══════════════════════════════════════════════════════════════════════════ */

/* All dropdown menus in header should inherit header background */
.header .ps-dropdown-menu,
.navigation .ps-dropdown-menu,
.navigation__extra .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
    background: var(--color-1st) !important;
    border: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* White text for readability */
.header .ps-dropdown-menu a,
.navigation .ps-dropdown-menu a,
.navigation__extra .ps-dropdown-menu a {
    color: #ffffff !important;
    padding: 8px 16px !important;
    display: block !important;
}

/* Hover state - subtle lighter effect */
.header .ps-dropdown-menu a:hover,
.navigation .ps-dropdown-menu a:hover,
.navigation__extra .ps-dropdown-menu a:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. LANGUAGE SELECTOR - FLAG VISIBILITY
   NOTE: min-width is controlled by language-switcher-multicolumn-v3.css
   for multi-column layouts (--two-col, --three-col classes)
   ═══════════════════════════════════════════════════════════════════════════ */

.navigation__extra .ps-dropdown.language .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
    /* NOTE: min-width removed - let language-switcher-multicolumn-v3.css handle it */
}

/* Override: Let multi-column layouts control their own width */
.navigation__extra .ps-dropdown.language .ps-dropdown-menu.ps-dropdown-menu--two-col {
    min-width: 500px !important;
}

.navigation__extra .ps-dropdown.language .ps-dropdown-menu.ps-dropdown-menu--three-col {
    min-width: 750px !important;
}

.navigation__extra .ps-dropdown.language .ps-dropdown-menu img {
    opacity: 1 !important;
    vertical-align: middle !important;
    margin-left: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. MEGA MENU POSITIONING (Shop by Department)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Mega menu should have white background with proper content */
.menu--product-categories .menu--dropdown > li.has-mega-menu .mega-menu,
.menu-item-has-children.mega-menu > .sub-menu {
    background-color: #ffffff !important;
}

/* Nested sub-menus within mega menu should also be white */
.mega-menu .sub-menu,
.menu-item-has-children.mega-menu .sub-menu {
    background-color: #ffffff !important;
}

/* Text color for mega menu items should be dark */
.mega-menu a,
.mega-menu .sub-menu a,
.menu-item-has-children.mega-menu .sub-menu a {
    color: #222 !important;
}

/* Hover state for mega menu items */
.mega-menu a:hover,
.mega-menu .sub-menu a:hover,
.menu-item-has-children.mega-menu .sub-menu a:hover {
    color: #0066ff !important;
    background-color: #f5f5f5 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. RTL SUPPORT
   ═══════════════════════════════════════════════════════════════════════════ */

body[dir="rtl"] .header .ps-dropdown-menu,
body[dir="rtl"] .navigation .ps-dropdown-menu,
body[dir="rtl"] .navigation__extra .ps-dropdown-menu {
    background-color: var(--color-1st) !important;
    text-align: right !important;
}

body[dir="rtl"] .navigation__extra .ps-dropdown.language .ps-dropdown-menu img {
    margin-left: 0 !important;
    margin-right: 8px !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. REMOVE WHITE BOX ARTIFACTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ensure no conflicting backgrounds */
.header .ps-dropdown ul,
.navigation .ps-dropdown ul,
.navigation__extra .ps-dropdown ul {
    background: transparent !important;
}

/* Remove any default white backgrounds from list items */
.header .ps-dropdown-menu li,
.navigation .ps-dropdown-menu li,
.navigation__extra .ps-dropdown-menu li {
    background: transparent !important;
}