/* ==========================================================================
   1. 基础容器与箭头样式
   ========================================================================== */
.has-ext-mega-menu {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.has-ext-mega-menu > a {
    flex: 1;
}

/* 箭头按钮样式 */
.ext-mega-toggle-btn {
    background: transparent;
    border: none;
    padding: 8px 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    outline: none;
}

.ext-mega-arrow {
    display: inline-block;
    width: 10px;
    height: 6px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0.8;
}

/* 展开状态时箭头翻转 */
.has-ext-mega-menu:hover .ext-mega-arrow,
.has-ext-mega-menu.ext-mega-open .ext-mega-arrow {
    transform: rotate(-180deg);
    opacity: 1;
}

/* ==========================================================================
   2. 桌面端模式 (>= 1025px)：100% 正居中浮动面板
   ========================================================================== */
@media (min-width: 1025px) {
    /* 💡 核心修复 1：在桌面端将 <li> 设为 static，打破局部定位限制 */
    .has-ext-mega-menu.mega-width-container,
    .has-ext-mega-menu.mega-width-full {
        position: static !important;
    }

    /* 确保 Blocksy Header 容器允许全局居中 */
    .ct-header,
    .ct-container,
    .ct-container-max,
    header {
        position: relative;
    }

    /* 💡 核心修复 2：绝对正居中定位 (默认 1400px 宽度) */
    .has-ext-mega-menu .blocksy-ext-mega-panel {
        position: absolute !important;
        top: 100% !important;
        background: #ffffff;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
        border-radius: 0 0 10px 10px;
        padding: 24px;
        z-index: 9999;
        
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        /* 动画过渡 */
        transition: opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                    visibility 0.25s;
    }

    /* 居中容器模式：网页 100% 绝对正居中 */
    .has-ext-mega-menu.mega-width-container .blocksy-ext-mega-panel {
        left: 50% !important;
        right: auto !important;
        width: 92vw !important;
        /* 默认 1400px 宽度保底，若后台设置了值则使用后台的值 */
        max-width: var(--ext-mega-max-width, 1400px) !important;
        transform: translateX(-50%) translateY(12px) !important;
    }

    .has-ext-mega-menu.mega-width-container:hover .blocksy-ext-mega-panel {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto;
    }

    /* 全屏模式：100% 铺满屏幕宽度 */
    .has-ext-mega-menu.mega-width-full .blocksy-ext-mega-panel {
        left: 50% !important;
        right: auto !important;
        width: 100vw !important;
        max-width: 100vw !important;
        transform: translateX(-50%) translateY(12px) !important;
        border-radius: 0;
    }

    .has-ext-mega-menu.mega-width-full:hover .blocksy-ext-mega-panel {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) !important;
        pointer-events: auto;
    }

    /* 消除 Elementor 内部 Section/Container 的底部边距偏移 */
    .blocksy-ext-mega-panel .elementor-section-wrap,
    .blocksy-ext-mega-panel .elementor-element {
        margin-bottom: 0 !important;
    }
}

/* ==========================================================================
   3. 移动端模式 (<= 1024px)：手风琴内部向下展开
   ========================================================================== */
@media (max-width: 1024px) {
    .has-ext-mega-menu {
        position: relative !important;
    }

    .has-ext-mega-menu .blocksy-ext-mega-panel {
        display: none;
        width: 100%;
        flex-basis: 100%;
        background: transparent;
        box-shadow: none;
        padding: 15px 0 5px 0;
        border-radius: 0;
        position: static !important;
        opacity: 1;
        visibility: visible;
        transform: none !important;
    }

    /* 点击展开手风琴 */
    .has-ext-mega-menu.ext-mega-open .blocksy-ext-mega-panel {
        display: block !important;
    }

    /* 移动端 Elementor 容器内无缝适配 */
    .blocksy-ext-mega-panel .elementor-section-wrap,
    .blocksy-ext-mega-panel .elementor-element {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* 将桌面端多列网格在手机端强制转换为单列堆叠 */
    .blocksy-ext-mega-panel .elementor-container {
        flex-direction: column !important;
    }
    
    .blocksy-ext-mega-panel .elementor-column {
        width: 100% !important;
    }
}