/* ============================================================
   tabbar.css —— H5 底部导航栏（Tabbar）
   ------------------------------------------------------------
   用法：
     <nav class="tabbar" aria-label="Mobile bottom navigation">
       <a class="tabbar__item is-active" href="./index.html" aria-current="page">
         <svg class="tabbar__icon" …></svg>
         <span class="tabbar__label">Home</span>
       </a>
       …
     </nav>
   说明：
     1. 仅 H5 模式（html[data-mode="h5"]）显示，PC 自动隐藏；
     2. 当前项加 .is-active（多页复用时各页面自行标注）；
     3. 底部安全区已适配（配合 viewport-fit=cover）；
     4. z-index 层级：header(200) / quote-modal(300) / lightbox(9999)，
        tabbar 取 150，保证弹窗打开时覆盖在 tabbar 之上。
   加载顺序：framework.css → common.css → tabbar.css
   ============================================================ */

/* ---------- 局部令牌 ---------- */
:root {
    --tabbar-h: 1.2rem;
    --tabbar-bg: rgba(255, 255, 255, 0.94);
    --tabbar-border: rgba(2, 52, 125, 0.08);
    --tabbar-color: #8a94a6;
    --tabbar-color-active: #2EA7E0;
    --tabbar-icon-size: 0.44rem;
    --tabbar-label-size: 0.32rem;
    --tabbar-z: 150;
}

/* ---------- 默认（PC）隐藏 ---------- */
.tabbar {
    display: none;
}

/* ---------- H5 显示 ---------- */
html[data-mode="h5"] .tabbar {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 100%;
    max-width: var(--max-w-h5, 7.5rem);
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0);
    z-index: var(--tabbar-z);
    display: flex;
    align-items: stretch;
    background: var(--tabbar-bg);
    -webkit-backdrop-filter: blur(0.2rem);
    backdrop-filter: blur(0.2rem);
    border-top: 0.01rem solid var(--tabbar-border);
    box-shadow: 0 -0.06rem 0.24rem rgba(2, 52, 125, 0.06);
}

/* 为页面内容预留底部空间，避免 tabbar 遮挡 footer */
html[data-mode="h5"] body {
    padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0));
}

/* ---------- Tab 项 ---------- */
html[data-mode="h5"] .tabbar__item {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.06rem;
    color: var(--tabbar-color);
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.25s ease, transform 0.15s ease;
}

/* 按压反馈 */
html[data-mode="h5"] .tabbar__item:active {
    transform: scale(0.92);
}

/* 图标 */
html[data-mode="h5"] .tabbar__icon {
    width: var(--tabbar-icon-size);
    height: var(--tabbar-icon-size);
    display: block;
}

/* 图标容器：承载激活态胶囊底衬（伪元素在 svg 上不渲染，故用外层盒子） */
html[data-mode="h5"] .tabbar__icon-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    transition: background 0.25s ease;
}

/* 激活项：胶囊底衬 + 高亮色 */
html[data-mode="h5"] .tabbar__item.is-active {
    color: var(--tabbar-color-active);
}

html[data-mode="h5"] .tabbar__item.is-active .tabbar__icon-box::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: currentColor;
    opacity: 0.1;
}

/* 文字标签 */
html[data-mode="h5"] .tabbar__label {
    font-family: var(--font-base);
    font-size: var(--tabbar-label-size);
    line-height: 1;
    white-space: nowrap;
}