/* ==========================================================================
 * DAK 全站自动 Tabs
 * 仅在页面含 dak-tabls-item 时由 PHP 加载
 * ========================================================================== */

.custom-dak-tabs .section-bg,
.custom-dak-tabs .section-bg.fill {
    display: none !important;
}

/* ==========================================================================
   导航容器
   ========================================================================== */

.dak-tabs-nav {
    display: flex;
    justify-content: center;
    position: relative;

    max-width: 1200px;
    margin: 0 auto 10px;
    padding: 0;

    flex-wrap: wrap;

    overflow-x: visible;
    overflow-y: visible;

    list-style: none;

    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

.dak-tabs-nav::after {
    display: none;
}

/* ==========================================================================
   Tab 项目 + 1px 下划线

   不再使用绝对定位的 indicator。
   每个 li 本身就有 1px border-bottom：
   默认 #eee，active / hover 时直接变为 #000。

   优点：
   - 永远不会从左侧飘出来
   - 不需要 JS 计算 left / width / top
   - 不会因为 overflow 或 1px 边界被裁掉
   - 多行 Tabs 也能准确跟随当前项目
   ========================================================================== */

.dak-tabs-nav li {
    cursor: pointer;

    position: relative;
    flex: 0 0 auto;

    margin: 0;
    padding: 15px 20px;

    color: #999;

    border: 0;
    border-bottom: 1px solid #eee !important;

    font-size: 14px;
    line-height: 1.4;
    text-align: center;

    box-sizing: border-box;

    transition:
        color .25s ease,
        border-color .25s ease;
}

.dak-tabs-nav li:hover,
.dak-tabs-nav li.active {
    color: #111;
    border-bottom-color: #000 !important;
}

/* 老版本 JS 如果缓存尚未刷新，也强制隐藏旧 indicator */
.dak-tab-indicator {
    display: none !important;
}

/* ==========================================================================
   Panel
   ========================================================================== */

.dak-tab-panel {
    display: none;
}

.dak-tab-panel.active {
    display: block;
}

/* ==========================================================================
   手机端
   ========================================================================== */

@media (max-width: 849px) {

    .dak-tabs-nav {
        flex-wrap: nowrap;
        justify-content: flex-start;

        overflow-x: auto;
        overflow-y: visible;

        padding-bottom: 0;

        scrollbar-width: none;
    }

    .dak-tabs-nav li {
        padding: 10px 20px;
        white-space: nowrap;
    }

    .dak-tabs-nav::-webkit-scrollbar {
        display: none;
    }
}