/**
 * ZSX Homepage Product Menu Styles
 * 主页产品分类菜单样式 - 重构版
 */

/* ========== 主容器 ========== */
.elementor-widget-zsx_homepage_product_menu .zsx-homepage-menu {
    display: flex !important;
    gap: 0 !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    background: #ffffff !important;
    border-radius: 4px !important;
    box-shadow: none !important; /* 移除容器阴影，因为卡片有阴影 */
    overflow: visible !important; /* 允许阴影溢出 */
}

/* ========== 左右布局（侧边栏模式） ========== */
.elementor-widget-zsx_homepage_product_menu.zsx-layout-horizontal .zsx-homepage-menu {
    flex-direction: row !important;
    border: 1px solid #eee; /* 给左右布局加个边框 */
}

/* ========== 上下布局（首页模式 - 默认） ========== */
.elementor-widget-zsx_homepage_product_menu.zsx-layout-vertical .zsx-homepage-menu {
    flex-direction: column !important;
    border: none !important;
}

/* ========== 标签栏区域 ========== */

/* 左右布局的标签栏 */
.zsx-layout-horizontal .zsx-menu-left {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    background-color: #f8f9fa;
    padding: 0;
    border-right: 1px solid #eee;
}

/* ========== 上下布局的标签栏 - Grid 布局重构版 ========== */
.zsx-layout-vertical .zsx-menu-left {
    flex: 0 0 auto;
    display: grid; /* 核心改变：使用 Grid */
    grid-template-columns: repeat(var(--zsx-tabs-desktop, 6), 1fr); /* 动态列数 */
    /* gap 由 Elementor 控件直接控制，这里不需要写，或者作为默认值 */
    /* Elementor 会将 gap: {{SIZE}}{{UNIT}} 应用到 .zsx-menu-left 上 */
    background-color: #fff;
    padding: 20px 0;
    border-bottom: 1px solid #e9ecef;
    margin-bottom: 20px;
    justify-content: start; /* Grid item 内容对齐 */
    width: 100%; /* 确保 Grid 容器占满 */
}

/* ========== 标签项样式 (Tab) ========== */

/* 通用标签样式 */
.zsx-menu-tab {
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    box-sizing: border-box;
    background: transparent;
    border: none;
    outline: none;
    /* Flex 布局用于内部内容居中 */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 左右布局的 Tab */
.zsx-layout-horizontal .zsx-menu-tab {
    flex-direction: row; /* 水平排列图标和文字 */
    gap: 12px;
    padding: 15px 20px;
    border-left: 4px solid transparent;
    width: 100%;
    text-align: left;
    background: transparent !important;
}
.zsx-layout-horizontal .zsx-menu-tab:hover {
    background-color: #f1f1f1 !important;
}
.zsx-layout-horizontal .zsx-menu-tab.active {
    background-color: #ffffff !important;
    border-left-color: #0073b8;
    color: #0073b8;
    font-weight: 600;
}

/* 上下布局的 Tab - Grid Item */
.zsx-layout-vertical .zsx-menu-tab {
    flex-direction: column; /* 垂直排列图标和文字 */
    gap: 8px;
    padding: 10px 15px;
    width: auto; /* Grid Item 自动填充 */
    height: 100%; /* 填满 Grid 单元格高度 */
    min-width: 0; /* 防止溢出 */
    border-bottom: 3px solid transparent;
    background: transparent !important;
    border-top: none;
    border-left: none;
    border-right: none;
    margin: 0;
}
.zsx-layout-vertical .zsx-menu-tab:hover {
    background-color: transparent !important;
}
.zsx-layout-vertical .zsx-menu-tab.active {
    background-color: transparent !important;
}

/* Tab 之间的分割线 (仅 PC) */
@media (min-width: 769px) {
    .zsx-layout-vertical .zsx-menu-tab {
        position: relative; /* 确保伪元素相对于 Tab 定位 */
    }
    
    .zsx-layout-vertical .zsx-menu-tab::after {
        content: '';
        position: absolute;
        right: 0; /* 贴在右侧 */
        top: 20%;
        height: 60%;
        width: 1px;
        background-color: #e0e0e0;
        display: block;
    }
    
    /* 
       核心技巧：移除每行最后一个元素的分割线 
       使用 :nth-child(Rn) 选择器，其中 R 是每行的数量
       由于 CSS 变量无法直接用于 nth-child，我们无法完美做到“自动移除每行最后一个”。
       替代方案：让分割线向右偏移一点，或者放在 gap 里。
       或者：接受最右侧也有分割线（很多大厂设计也是如此）。
       
       如果非常介意，可以使用 :last-child 移除最后一个，但中间行的末尾无法移除。
       鉴于 Elementor 动态性，保留分割线是最稳妥的。
    */
    .zsx-layout-vertical .zsx-menu-tab:last-child::after {
        display: none;
    }
}

/* Tab 底部指示条 */
.zsx-layout-vertical .zsx-menu-tab::before {
    content: '';
    position: absolute;
    bottom: -3px; /* 调整位置，使其与 border-bottom 重合 */
    left: 0;
    width: 100%;
    height: 3px;
    background-color: transparent;
    transition: background-color 0.3s ease;
}
.zsx-layout-vertical .zsx-menu-tab.active::before {
    background-color: #0073b8;
}

.zsx-layout-vertical .zsx-menu-tab:hover span {
    color: #0073b8;
}

/* Tab 图标 */
.zsx-menu-tab img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: transform 0.3s ease;
}
.zsx-menu-tab.active img {
    transform: scale(1.1);
}

/* Tab 文字 */
.zsx-menu-tab span {
    color: #333;
    white-space: nowrap;
    font-weight: 500;
}
.zsx-menu-tab.active span {
    color: #0073b8;
    font-weight: 600;
}


/* ========== 内容区域 ========== */
.zsx-menu-right {
    flex: 1;
    background-color: transparent;
}

.zsx-menu-content {
    padding: 0;
    min-height: 200px;
}

.zsx-menu-tab-content {
    display: none;
    animation: fadeIn 0.3s ease;
}

.zsx-menu-tab-content.active {
    display: block;
}

/* ========== 内容列表 Grid 布局 (核心复刻点) ========== */
.zsx-menu-content-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 默认三列 */
    gap: 20px;
    padding: 0;
    align-items: start; /* 顶部对齐，防止高度拉伸导致空白 */
    align-content: start; /* 内容整体顶部对齐 */
}

/* 卡片容器 */
.zsx-menu-card {
    background: #fff;
    border-radius: 4px; /* 稍微圆角 */
    /* 阴影效果复刻 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.05); 
    padding: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border: 1px solid transparent;
    height: 100%; /* 让卡片在 Grid 单元格内占满高度 */
    min-height: auto; /* 移除最小高度限制 */
}

.zsx-menu-card:hover {
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    transform: translateY(-2px);
    border-color: #eee;
}

/* 卡片主标题区域 (一级菜单) */
.zsx-card-main-link {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    text-decoration: none !important;
    color: #333;
    background: #fff;
    border-radius: 4px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
/* 如果有子菜单，且需要展开效果，可以保留这个类，但设计图看似是平铺 */
.zsx-card-main-link.has-children {
    border-bottom: 1px solid #f5f5f5;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* 箭头图标 */
.zsx-card-main-link i,
.zsx-card-main-link .zsx-arrow {
    color: #999;
    font-size: 14px; /* 调整为更合适的大小 */
    margin-right: 10px;
    transition: margin-left 0.2s ease;
    width: 14px; /* 确保占位 */
    height: 14px; /* 明确高度 */
    text-align: center;
    display: inline-flex; /* 使用 flex 居中 */
    align-items: center;
    justify-content: center;
    font-style: normal;
    font-variant: normal;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    line-height: 1;
}

/* SVG 图标样式适配 */
.zsx-card-main-link .zsx-arrow svg {
    width: 100%;
    height: 100%;
    fill: currentColor; /* 继承父元素颜色 */
    display: block;
}

/* 确保使用 Font Awesome (兼容旧代码) */
.zsx-card-main-link .fa,
.zsx-card-main-link .fas {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

.zsx-menu-card:hover .zsx-card-main-link i,
.zsx-menu-card:hover .zsx-card-main-link .zsx-arrow {
    color: #0073b8;
    /* margin-left: 4px; 简单的动效 */
}

/* 标题文字 */
.zsx-card-title {
    font-weight: 500;
    color: #333;
    flex: 1;
}
.zsx-menu-card:hover .zsx-card-title {
    color: #0073b8;
}

/* 子菜单区域 (二级菜单) */
.zsx-card-sub-links {
    padding: 10px 20px 15px 42px; /* 左侧留白给箭头 */
    background: #fff;
    border-radius: 0 0 4px 4px;
}

.zsx-card-sub-links a {
    display: block;
    padding: 5px 0;
    color: #666;
    text-decoration: none !important;
    transition: color 0.2s ease;
}
.zsx-card-sub-links a:hover {
    color: #0073b8;
    padding-left: 4px; /* 简单的动效 */
}

/* 空状态 */
.zsx-menu-empty {
    text-align: center;
    padding: 40px;
    color: #999;
    background: #f9f9f9;
    border-radius: 4px;
}

/* ========== 动画 ========== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== 响应式设计 ========== */

/* 平板端 (iPad 等) */
@media (max-width: 992px) {
    .zsx-menu-content-list {
        grid-template-columns: repeat(2, 1fr); /* 变为两列 */
    }
    
    .zsx-layout-vertical .zsx-menu-tab {
        padding: 10px;
    }
}

/* 移动端 (手机) */
@media (max-width: 768px) {
    .zsx-menu-content-list {
        grid-template-columns: repeat(2, 1fr); /* 变为两列 */
        gap: 10px; /* 稍微减小间距 */
    }

    /* 左右布局在移动端强制变为上下 */
    .elementor-widget-zsx_homepage_product_menu.zsx-layout-horizontal .zsx-homepage-menu {
        flex-direction: column !important;
        border: none;
    }
    .zsx-layout-horizontal .zsx-menu-left {
        flex-direction: row;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid #eee;
        width: 100%;
        flex: 0 0 auto;
    }
    .zsx-layout-horizontal .zsx-menu-tab {
        width: auto;
        padding: 10px 15px;
        border-left: none;
        border-bottom: 3px solid transparent;
        white-space: nowrap;
    }
    .zsx-layout-horizontal .zsx-menu-tab.active {
        border-bottom-color: #0073b8;
    }

    /* 上下布局优化 - Grid 移动端 */
    .zsx-layout-vertical .zsx-menu-left {
        display: grid;
        grid-template-columns: repeat(var(--zsx-tabs-mobile, 3), 1fr); /* 移动端动态列数 */
        padding: 10px 0;
        /* gap 由 Elementor 控制，或者默认 */
        justify-content: start;
        width: 100%;
        overflow-x: visible;
        flex-wrap: wrap; /* Grid 不使用这个，但保留以防覆盖 */
    }

    .zsx-layout-vertical .zsx-menu-tab {
        width: auto; /* Grid Item 自动填充 */
        flex: 0 0 auto; /* 重置 flex */
        padding: 8px 5px; /* 减小内边距 */
    }
    
    /* .zsx-layout-vertical .zsx-menu-tab img 规则已移除，交由 Elementor 控制 */

    
    .zsx-layout-vertical .zsx-menu-tab span {
        white-space: normal; /* 允许换行，如果文字太长 */
        text-align: center;
        line-height: 1.2;
    }

    /* 隐藏 PC 端的分隔线 */
    .zsx-layout-vertical .zsx-menu-tab::after {
        display: none;
    }

    /* 卡片样式微调 - 移动端紧凑模式 */
    .zsx-card-main-link {
        padding: 8px 10px; /* 减小内边距：上下8px，左右10px */
        min-height: auto; /* 防止被 flex 拉伸 */
    }
    
    .zsx-menu-card {
        padding: 0; /* 确保卡片自身无内边距 */
    }
    
    .zsx-card-title {
        font-weight: 400; /* 减小字重，看起来更清爽 */
    }
    
    .zsx-arrow {
        margin-right: 6px; /* 减小箭头与文字间距 */
    }
}