/*
 * =========================================================
 * HC_ECO_MOBILE_BOTTOM_NAV_STYLE_V1
 * =========================================================
 */

.eco-mobile-bottom-nav{
    display:none;
}


@media(max-width:768px){

    /*
     * 手机版已经有底部主导航，
     * 因此顶部第三排业务导航不再重复展示。
     */
    .eco-global-header
    .eco-gh-nav{
        display:none !important;
    }

    /*
     * 搜索框成为顶部最后一行。
     */
    .eco-global-header
    .eco-gh-center{
        gap:0 !important;
    }


    /*
     * 防止正文最后内容被底部导航遮住。
     */
    


    .eco-mobile-bottom-nav{

        position:fixed;

        left:0;
        right:0;
        bottom:0;

        z-index:9000;

        width:100%;

        height:
            calc(
                58px
                +
                env(safe-area-inset-bottom)
            );

        padding:
            4px
            max(4px,env(safe-area-inset-right))
            env(safe-area-inset-bottom)
            max(4px,env(safe-area-inset-left));

        display:grid;

        grid-template-columns:
            repeat(
                6,
                minmax(0,1fr)
            );

        align-items:stretch;

        background:
            rgba(
                255,
                255,
                255,
                .97
            );

        border-top:
            1px solid #e5e7eb;

        box-shadow:
            0 -4px 18px
            rgba(15,23,42,.08);

        box-sizing:border-box;

        -webkit-backdrop-filter:
            blur(12px);

        backdrop-filter:
            blur(12px);
    }


    .eco-mobile-bottom-nav > a{

        min-width:0;

        display:flex;

        flex-direction:column;

        align-items:center;
        justify-content:center;

        gap:2px;

        color:#64748b;

        text-decoration:none;

        font-size:10px;
        line-height:1.1;

        font-weight:600;

        border-radius:10px;

        -webkit-tap-highlight-color:
            transparent;
    }


    .eco-mobile-bottom-nav
    .eco-mbn-icon{

        display:flex;

        align-items:center;
        justify-content:center;

        width:24px;
        height:24px;

        font-size:20px;
        line-height:1;

        color:#64748b;
    }


    .eco-mobile-bottom-nav
    .eco-mbn-ai{

        font-size:24px;
    }


    .eco-mobile-bottom-nav
    > a.is-active{

        color:#2f8f35;

        font-weight:800;
    }


    .eco-mobile-bottom-nav
    > a.is-active
    .eco-mbn-icon{

        color:#2f8f35;
    }


    .eco-mobile-bottom-nav
    > a:active{

        background:#f1f7ef;
    }
}


@media(max-width:360px){

    .eco-mobile-bottom-nav > a{

        font-size:9.5px;
    }


    .eco-mobile-bottom-nav
    .eco-mbn-icon{

        width:24px;
        height:24px;

        font-size:20px;
    }
}


/*
 * HC_MOBILE_NAV_VECTOR_ICON
 * 统一手机底部导航专业线性图标
 */

.eco-mobile-bottom-nav .eco-mbn-icon{
    width:24px;
    height:24px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:0;
}

.eco-mobile-bottom-nav .eco-mbn-icon svg{
    width:22px;
    height:22px;

    display:block;

    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
}

.eco-mobile-bottom-nav .eco-mbn-ai svg{
    width:23px;
    height:23px;
}



/* ==========================================================
   HC MOBILE NAV FIRST PAINT FIX V1
   底栏保持 fixed
   使用正常流 spacer 预留底部空间
   不再运行时修改 body padding
   ========================================================== */

.eco-mobile-bottom-nav-spacer{
    display:none;
}

@media (max-width:768px){

    .eco-mobile-bottom-nav-spacer{
        display:block;

        width:100%;

        height:
            calc(
                62px
                +
                env(safe-area-inset-bottom)
            );

        flex:0 0 auto;

        pointer-events:none;
    }

}