/**
 * VBS Matrix - 全站菜单与导航优化样式表 (Master Menu Stylesheet)
 * 适用插件：Max Mega Menu & FiboSearch 集成优化
 * 优化目的：合并原 7 个散落在 head 的内联 style 标签，实现全站静态缓存与极致 SEO 源码净化
 */

/* ==========================================================================
   1. 购物车与搜索图标对齐微调 (Fix Both Icons Alignment)
   ========================================================================== */

/* 桌面端显示下三角箭头，移动端显示+/-号 */
.mega-indicator:after {
    content: "▾" !important;
    font-size: 25px !important;
    color: #ccc !important;
    /* 浅灰色箭头 */
    visibility: visible !important;
    vertical-align: middle !important;
    line-height: 0 !important;
    margin-top: -5px !important;
    display: inline-block !important;
}

@media(max-width:768px) {
    .mega-indicator:after {
        content: "+" !important;
        float: right !important;
    }

    .mega-toggle-on > .mega-menu-link > .mega-indicator:after {
        content: "-" !important;
    }
}

/* 基础样式 - 所有图标共享的样式 */
.mega-menu-link[href="#search"],
.mega-custom-icon.mega-menu-link {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* 1. 搜索图标容器调整 */
li.mega-menu-item > a.dashicons-search.mega-menu-link,
li.mega-menu-item > a[href="#search"].mega-menu-link {
    top: -2px !important;
    /* 垂直位置调整 */
    transform: scale(1) !important;
    /* 缩放比例 */
}

/* 搜索图标菜单项整体调整 */
li.mega-menu-item > a.dashicons-search.mega-menu-link,
li.mega-menu-item > a[href="#search"].mega-menu-link {
    margin-left: 16px !important;
    /* 使用margin替代left，确保点击区域正确 */
}

/* 2. 会员图标调整 */
#mega-menu-item-54581 > a.mega-custom-icon {
    top: -2px !important;
    /* 垂直位置调整 */
    transform: scale(1) !important;
    /* 缩放比例 */
}

/* 会员图标菜单项整体调整 */
#mega-menu-item-54581 {
    margin-left: 0px !important;
    /* 使用margin替代left，确保点击区域正确 */
}

/* 3. 购物车图标调整 */
#mega-menu-item-54680 > a.mega-custom-icon {
    top: -2px !important;
    /* 垂直位置调整 */
    transform: scale(1) !important;
    /* 缩放比例 */
}

/* 购物车图标菜单项整体调整 */
#mega-menu-item-54680 {
    margin-left: -10px !important;
    /* 使用margin替代left，确保点击区域正确 */
}

/* PC端购物车计数图标样式 */
.mega-cart-count {
    position: absolute !important;
    top: 3px !important;
    /* 调整垂直位置 */
    right: 6px !important;
    /* 调整水平位置 */
    background: #000000 !important;
    /* 背景颜色 - 黑色 */
    color: #fff !important;
    /* 文字颜色 */
    font-size: 10px !important;
    /* 字体大小 */
    font-weight: bold !important;
    width: 18px !important;
    /* 固定宽度 */
    height: 18px !important;
    /* 固定高度 - 与宽度相同确保是正圆形 */
    line-height: 16px !important;
    /* 行高与高度相同 */
    text-align: center !important;
    border-radius: 50% !important;
    /* 圆角程度 - 50%为圆形 */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 99 !important;
    border: 1px solid #fff !important;
    /* 白色边框 */
    padding: 0 !important;
    /* 移除内边距 */
    box-sizing: border-box !important;
    /* 确保边框不会增加实际尺寸 */
}

/* 移动端购物车计数图标样式 */
@media screen and (max-width: 768px) {
    .mega-cart-count {
        top: 5px !important;
        /* 移动端调整垂直位置 */
        right: 6px !important;
        /* 移动端调整水平位置 */
        width: 16px !important;
        /* 移动端稍微小一点的尺寸 */
        height: 16px !important;
        /* 移动端稍微小一点的尺寸 */
        font-size: 9px !important;
        /* 移动端更小的字体 */
    }
}

/* ==========================================================================
   2. 遮挡与自带旧组件隐藏 (Prevent Dropdown Obstruction & Hide Native Menu)
   ========================================================================== */

/* 仅在桌面端调整下拉菜单的定位，防止遮挡LOGO */
@media(min-width:769px) {
    .mega-sub-menu {
        margin-top: 10px !important;
    }
}

/* 增加二级菜单顶部边距 */
.inside-header.grid-container,
.main-navigation,
#site-navigation,
.header-widget {
    display: none !important;
    /* 彻底埋葬主题自带的旧菜单和旧页眉组件 */
}

/* ==========================================================================
   3. 移动端汉堡菜单平移预定位 (Mobile Hamburger Position)
   ========================================================================== */
.mega-toggle-animated-box {
    transform: translateX(15px) translateY(10px) !important;
    /* 向右平移 15px，向下平移 10px */
}

/* ==========================================================================
   4. 恢复 Max Mega Menu 默认移动端样式 (Restore Megamenu Defaults)
   ========================================================================== */
@media only screen and (max-width: 768px) {
    /* 移除任何可能覆盖默认对齐方式的自定义样式 */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item a.mega-menu-link {
        text-align: left;
        justify-content: flex-start;
    }

    /* 恢复二级菜单左对齐 */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        text-align: left;
    }

    /* 移除任何可能干扰指示器位置的样式 */
    #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children > a.mega-menu-link > span.mega-indicator {
        float: right;
    }
}

/* ==========================================================================
   5. 模块化菜单层级与圆头像切断修复 (VBS Menu Ultimate Fix - LEGO 版)
   ========================================================================== */

/* 1. 全站层级提权（确保菜单在积木页面之上） */
#vbs-header-wrapper,
#top-mega-menu {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}

/* 2. 消除内部挤压：移除 WordPress 自动插入的 <br> 标签影响，确保图片居中 */
.menu-item-image br {
    display: none !important;
}

.menu-item-image a {
    display: flex !important;
    align-items: center;
    justify-content: center;
    height: 100% !important;
    width: 100% !important;
}

/* 3. 稳固圆形头像：恢复用户原版 70x70 比例 */
.menu-item-image {
    width: 70px !important;
    height: 70px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    position: relative !important;
    background: #fff;
    margin: 0 auto 8px auto !important;
}

.menu-item-image img {
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* 4. 精准破壁：只针对菜单组件内部解除裁剪限制，绝不动外部积木布局 */
.mega-sub-menu,
.mega-menu-row,
.mega-menu-column,
.mega-menu-item.widget_custom_html,
.textwidget.custom-html-widget,
.mega-menu-item-content {
    overflow: visible !important;
    height: auto !important;
    /* 允许容器被内容自然撑开 */
}

/* 5. 居中对齐排版定制 */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
    width: 1200px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
}

.mega-menu-item-content {
    display: flex !important;
    flex-direction: row !important;
    /* 恢复横向排列：文字在图片右侧 */
    align-items: center !important;
    gap: 10px;
    text-align: left !important;
}

.menu-item-title {
    line-height: 1.4;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* 文字左对齐 */
    text-align: left;
    margin: 0 !important;
    padding: 0 !important;
}

.title-cn {
    display: block;
    font-size: 14px;
    color: #000;
    font-weight: 500;
    transition: all 0.35s ease;
}

.title-en {
    display: block;
    font-size: 10px;
    color: #888;
    font-weight: 400;
    transition: all 0.45s ease;
}

.menu-item-image:hover img {
    transform: scale(1.1);
}

/* 7. 隐藏桌面端意外出现的黑块（关闭按钮） */
@media screen and (min-width: 769px) {
    button.mega-close {
        display: none !important;
    }
}

/* ==========================================================================
   6. 移动端菜单美化 (Mobile Menu Beautify - 白色清爽风格)
   ========================================================================== */
@media only screen and (max-width: 768px) {
    /* 1. 菜单容器：纯白背景 + 阴影 */
    #mega-menu-wrap-primary #mega-menu-primary {
        background-color: #ffffff !important;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
        padding-top: 10px !important;
        border-top: 1px solid #f0f0f0 !important;
    }

    /* 2. 顶级菜单项：深色文字 + 底部细线 */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link {
        color: #333333 !important;
        background-color: transparent !important;
        border-bottom: 1px solid #f5f5f5 !important;
        padding: 16px 20px !important;
        /* 增加点击区域 */
        font-size: 15px !important;
        font-weight: 500 !important;
        height: auto !important;
        /* 防止高度被锁死 */
        line-height: 1.5 !important;
    }

    /* 3. 选中/激活/悬停状态：极浅灰背景 + 黑色文字 */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus {
        background-color: #fafafa !important;
        color: #000000 !important;
        font-weight: 600 !important;
    }

    /* 4. 修复“联系我们”等特殊按钮的背景问题 */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-align-bottom-left > a.mega-menu-link {
        background-color: transparent !important;
        /* 强制去黑底 */
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-align-bottom-left.mega-current-menu-item > a.mega-menu-link {
        background-color: #fafafa !important;
        /* 选中时才显色 */
    }

    /* 5. 二级菜单：微缩进 + 柔和背景 */
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
        background-color: #fcfcfc !important;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
        padding-left: 35px !important;
        color: #666666 !important;
        border-bottom: 1px solid #f9f9f9 !important;
        font-size: 14px !important;
    }

    /* 6. 箭头指示器颜色 */
    .mega-indicator:after {
        color: #aaaaaa !important;
    }
}

/* ==========================================================================
   7. 移动端布局防溢出修复 (Mobile Layout Fixes)
   ========================================================================== */
@media only screen and (max-width: 768px) {
    /* 强制修复侧边购物车插件导致的3050px宽度溢出 */
    .vi-wcaio-sidebar-cart-footer-pd-wrap {
        max-width: 100vw !important;
        width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        display: none !important;
        /* 暂时隐藏该溢出元素，因为它通常是看不见的或者是错误的布局 */
    }
}