/**
 * Mega Menu Enhancements
 * Additional styles for menu icons and badges
 * Main mega menu styles are handled by theme's default .mega-menu class
 */

/* Menu Icon */
.menu-item-icon {
    margin-right: 6px;
    font-size: 1em;
    display: inline-block;
    vertical-align: middle;
}

/* Menu Badge */
.menu-badge {
    display: inline-block;
    padding: 2px 8px;
    margin-left: 8px;
    font-size: 0.65em;
    font-weight: 600;
    color: #ffffff;
    border-radius: 10px;
    vertical-align: middle;
    line-height: 1.3;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Ensure mega menu wrapper has proper padding */
.mega-menu__wrapper {
    padding-block: 20px;
}

/**
 * Override flex layout for Elementor mega menus
 * The theme's default .mega-menu__wrapper uses display: flex for menu columns
 * But Elementor content needs normal block layout
 */
.mega-menu__wrapper--elementor {
    display: block !important;
    /* Reset flex-related properties */
    flex-direction: initial;
    gap: initial;
}

/* Ensure Elementor content has proper width */
.mega-menu__wrapper--elementor > * {
    width: 100%;
}

/* Responsive adjustments for badges */
@media (max-width: 768px) {
    .menu-badge {
        font-size: 0.6em;
        padding: 1px 6px;
        margin-left: 4px;
    }
}

/**
 * Mega Menu Styles
 * Fix dropdown width to match header width (page-width)
 * 
 * Theme Structure (from Shop_Desktop_Menu_Walker):
 * - .mega-menu: Outer container (full width background)
 * - .mega-menu__container: Color scheme container
 * - .page-width .mega-menu__wrapper: Content wrapper (constrained to page-width)
 */

/* ============================================
   Theme Mega Menu Overrides
   ============================================ */

/* 
 * 超级菜单宽度修复
 * 
 * 原本结构：
 * - .mega-menu: 外层容器（全宽背景）- 保持全宽
 * - .mega-menu__container: 背景色容器  
 * - .page-width.mega-menu__wrapper: 内容容器（已有page-width类）
 * 
 * .page-width 类使用 padding-inline: var(--page-padding) 来限制内容宽度
 * 在大屏幕上 --page-padding 会动态计算使内容宽度等于 --page-width
 * 
 * 但为了确保在所有屏幕尺寸下内容都被限制，添加明确的 max-width
 */

/* 确保内容区域宽度和页眉一致 */
.mega-menu .mega-menu__wrapper.page-width {
    
    margin-inline: auto;
}

/* Menu item with mega menu - use static to allow dropdown to position relative to header */
.has-mega-menu {
    position: static !important;
}

/* Ensure header navigation has proper positioning context */
.header__navigation {
    position: static;
}

.header__menu {
    position: static;
}

/* The header bottom section should be the positioning context */
.header__bottom {
    position: relative;
}

/* ============================================
   Custom Mega Menu Dropdown Styles (if using Shop_Mega_Menu_Walker)
   ============================================ */

/* The mega menu dropdown container */
.mega-menu-dropdown {
    position: absolute;
    left: 50%;
    right: auto;
    top: 100%;
    transform: translateX(-50%);
    max-width: var(--page-width, 1700px);
    width: 100%;
    z-index: 100;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Show dropdown on hover */
.has-mega-menu:hover > .mega-menu-dropdown,
.has-mega-menu.is-active > .mega-menu-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Inner content wrapper */
.mega-menu-dropdown .mega-menu-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 20px;
}

/* Full width mega menu */
.mega-menu-dropdown.mega-menu-full {
    max-width: var(--page-width, 1700px);
    width: 100%;
}

/* Custom width mega menu */
.mega-menu-dropdown.mega-menu-custom {
    width: auto;
}

/* Auto width mega menu - fits content */
.mega-menu-dropdown.mega-menu-auto {
    width: auto;
    max-width: none;
}

.mega-menu-dropdown.mega-menu-auto .mega-menu-content {
    max-width: none;
}


/* ============================================
   Mobile Mega Menu Styles
   手机端超级菜单样式
   ============================================ */

/* 手机端超级菜单容器 */
.menu-drawer__mega-menu {
    background-color: rgb(var(--color-background));
}

/* 手机端超级菜单内容区域 */
.menu-drawer__mega-menu-content {
    padding: 16px;
    overflow-y: auto;
}

/* 手机端超级菜单内容包装器 */
.mega-menu-mobile-wrapper {
    width: 100%;
}

/* 确保 Elementor 内容在手机端正确显示 */
.mega-menu-mobile-wrapper .elementor-section,
.mega-menu-mobile-wrapper .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* 手机端超级菜单中的 Elementor 列布局调整 */
.mega-menu-mobile-wrapper .elementor-row {
    flex-wrap: wrap;
}

.mega-menu-mobile-wrapper .elementor-column {
    width: 100% !important;
    margin-bottom: 16px;
}

/* 手机端超级菜单返回按钮样式 */
.menu-drawer__mega-menu .menu-drawer__item-back-link {
    padding: 16px;
    border-bottom: 1px solid rgb(var(--color-border));
    font-weight: 500;
}

.menu-drawer__mega-menu .menu-drawer__item-back-link span {
    margin-left: 8px;
}

/* 手机端超级菜单项的图标和徽章 */
.menu-drawer__item .menu-item-icon {
    font-size: 1em;
    vertical-align: middle;
}

.menu-drawer__item .menu-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 0.65em;
    font-weight: 600;
    color: #ffffff;
    border-radius: 8px;
    vertical-align: middle;
    line-height: 1.2;
    text-transform: uppercase;
}

/* 有超级菜单的菜单项样式 */
.menu-drawer__item.has-mega-menu > details > summary {
    font-weight: 500;
}

/* 确保超级菜单面板正确定位 */
.menu-drawer__item.has-mega-menu .menu-drawer__submenu {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}


/* ============================================
   二级菜单超级菜单样式
   Second Level Mega Menu Styles
   ============================================ */

/* 二级菜单超级菜单内容区域 */
.menu-drawer__mega-menu-content-child {
    padding: 16px;
    background-color: rgb(var(--color-secondary-background));
    border-radius: 4px;
    margin-top: 8px;
}

/* 二级菜单超级菜单包装器 */
.menu-drawer__mega-menu-content-child .mega-menu-mobile-wrapper {
    width: 100%;
}

/* 确保 Elementor 内容在二级菜单中正确显示 */
.menu-drawer__mega-menu-content-child .elementor-section,
.menu-drawer__mega-menu-content-child .elementor-container {
    width: 100% !important;
    max-width: 100% !important;
}

/* 二级菜单超级菜单中的列布局 */
.menu-drawer__mega-menu-content-child .elementor-row {
    flex-wrap: wrap;
}

.menu-drawer__mega-menu-content-child .elementor-column {
    width: 100% !important;
}

/* 有超级菜单的二级菜单项样式 */
.menu-drawer__item--product_list.has-mega-menu > details > summary {
    font-weight: 500;
}

/* 二级菜单超级菜单展开时的样式 */
.mega-menu-mobile-details-child[open] > .menu-drawer__mega-menu-content-child {
    display: block;
}


/* ============================================
   修复：确保二级菜单面板正确覆盖
   Fix: Ensure submenu panels cover correctly
   ============================================ */

/* 二级菜单面板背景色 */
.menu-drawer__submenu {
    background-color: rgb(var(--color-background));
}

/* 超级菜单面板背景色 */
.menu-drawer__mega-menu {
    background-color: rgb(var(--color-background));
}