/* ============================================================
 * m-footer.css — 手机端底部固定导航条（单独样式文件）
 * 参考站：bjm.yzf.com.cn 底部 tabbar（首页/看案例/算报价/一键电话咨询）
 * 原则：
 *   1. 全部包在 @media (max-width:768px) 内 —— 只作用于手机端；
 *   2. 类名带 .mzht- 前缀，不与现有样式冲突；
 *   3. 高度按参考站 1.54667rem(×37.5) ≈ 58px。
 * 部署路径：/pub/css/m-footer.css
 * 图标：/pub/img/tab-home.png(tab-home-active.png)
 *      /pub/img/tab-case.png(tab-case-active.png)
 *      /pub/img/tab-offer.png(tab-offer-active.png)
 *      /pub/img/tab-phone.png（橙色"一键电话咨询"按钮图）
 * ============================================================ */

/* ===== PC 端（>768px）默认隐藏手机端新增元素 =====
 * 新增的导航条/弹窗 HTML 全站都有，若不加这条，电脑端会以"裸 HTML"冒出来。
 * 手机端由下方 @media 内的 display:flex 覆盖本条（同优先级、靠后生效）。 */
.mzht-bar, .mzh-quote-mask { display: none; }

@media (max-width: 768px) {

/* 页面底部留出导航条高度，防止内容被遮挡（含 iPhone 安全区） */
.mzh-page {
    padding-bottom: calc(58px + constant(safe-area-inset-bottom));
    padding-bottom: calc(58px + env(safe-area-inset-bottom));
}

/* ===== 导航条本体：固定底部，白底，无边框 ===== */
.mzht-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 58px;
    z-index: 9999;
    background: #fff;
    border: none;
    display: flex;
    align-items: stretch;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    box-sizing: content-box;
}

/* 普通选项（首页/看案例/算报价）：图标在上文字在下 */
.mzht-bar .mzht-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 12px;                /* 首页/看案例/算报价 字号加大一号 */
    color: #93979E;                 /* 未选中灰 */
    text-decoration: none;
    gap: 2px;
}
.mzht-bar .mzht-item img { width: 22px; height: 22px; display: block; }
.mzht-bar .mzht-item.mzht-active { color: #E0380F; }  /* 选中红 */

/* 第 4 项"一键电话咨询"：宽按钮，图片占 85% 宽 */
.mzht-bar .mzht-phone { flex: 2.8; justify-content: center; }
.mzht-bar .mzht-phone img {
    width: 85%;
    height: auto;
    display: block;
    margin: 0 auto;
}

/* 手机端：隐藏原底部悬浮"获取报价"表单(.consult-section)，改用"算报价"弹窗 */
.consult-section { display: none; }

/* ===== 首页底部"算报价"弹窗（由底部导航"算报价"触发，仅手机端） ===== */
.mzh-quote-mask {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.mzh-quote-pop {
    position: relative;
    width: 100%;
    max-width: 340px;
    background: #fff;
    border-radius: 12px;
    padding: 24px 18px 20px;
    box-sizing: border-box;
}
.mzh-quote-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    color: #999;
    cursor: pointer;
    line-height: 1;
}
.mzh-quote-tit {
    margin: 0 0 4px;
    font-size: 18px;
    text-align: center;
    color: #222;
    font-weight: 700;
}
.mzh-quote-sub {
    margin: 0 0 16px;
    font-size: 12px;
    text-align: center;
    color: #999;
}
.mzh-quote-form input {
    width: 100%;
    height: 44px;
    margin-bottom: 12px;
    padding: 0 12px;
    border: 1px solid #e5e5e5;
    border-radius: 6px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
}
.mzh-quote-form input:focus { border-color: #E0380F; }
.mzh-quote-form button {
    width: 100%;
    height: 46px;
    border: none;
    border-radius: 6px;
    background: linear-gradient(90deg, #FF7A1A, #E0380F);
    color: #fff;
    font-size: 16px;
    font-weight: 700;
}

} /* @media (max-width:768px) 结束 */