/* ==========================================================================
   手机端网页底部 tab 导航（与小程序 custom-tab-bar 视觉一致）
   只在小屏显示；桌面端保留顶部主导航
   ========================================================================== */

.tb {
  display: none;
}

@media (max-width: 860px) {
  .tb {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 800;
    /* border-box 下 height + padding 是互抢的：iPhone 底部横条区会被算进 54px 里，
       把图标压扁。总高必须把安全区加出来，内容区才是稳定的 54px。 */
    height: calc(54px + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: saturate(180%) blur(8px);
    border-top: 1px solid #edf2ee;
  }

  .tb-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    color: #8a948f;
    -webkit-tap-highlight-color: transparent;
  }

  .tb-item .lb {
    font-size: 10px;
    line-height: 1.4;
    margin-top: 3px;
    letter-spacing: 0.3px;
  }

  .tb-item.on {
    color: #12b76a;
  }

  .tb-item.on .lb {
    font-weight: 600;
  }

  /* 中间凸起：注册 */
  .tb-center {
    justify-content: flex-end;
    padding-bottom: 5px;
  }

  .tb-plus {
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1ed081 0%, #12b76a 55%, #0e8f51 100%);
    box-shadow: 0 6px 14px rgba(18, 183, 106, 0.34);
    position: relative;
  }

  .tb-plus::before,
  .tb-plus::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    background: #fff;
    border-radius: 2px;
  }

  .tb-plus::before {
    width: 16px;
    height: 2px;
    margin: -1px 0 0 -8px;
  }

  .tb-plus::after {
    width: 2px;
    height: 16px;
    margin: -8px 0 0 -1px;
  }

  /* ---------- 纯 CSS 图标 ---------- */
  .tb-ico {
    position: relative;
    width: 20px;
    height: 18px;
  }

  /* 首页 */
  .i-home::before {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -10px;
    top: 0;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 8px solid currentColor;
  }

  .i-home::after {
    content: "";
    position: absolute;
    left: 3px;
    bottom: 0;
    width: 14px;
    height: 9px;
    border: 1.6px solid currentColor;
    border-top: 0;
    border-radius: 0 0 3px 3px;
  }

  /* 服务：2×2 */
  .i-grid::before {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    width: 7px;
    height: 7px;
    background: currentColor;
    border-radius: 2px;
    box-shadow: 10px 0 0 currentColor, 0 10px 0 currentColor, 10px 10px 0 currentColor;
  }

  /* 订单：三条线 */
  .i-list::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 4px;
    width: 16px;
    height: 1.8px;
    border-radius: 1px;
    background: currentColor;
    box-shadow: 0 5px 0 currentColor, 0 10px 0 currentColor;
  }

  /* 我的 */
  .i-user::before {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -4px;
    top: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
  }

  .i-user::after {
    content: "";
    position: absolute;
    left: 50%;
    margin-left: -8px;
    bottom: 0;
    width: 16px;
    height: 8px;
    border: 1.6px solid currentColor;
    border-bottom: 0;
    border-radius: 9px 9px 0 0;
  }

  /* 页面避让：底部留出 tab 高度 */
  body.has-tb {
    padding-bottom: calc(54px + env(safe-area-inset-bottom));
  }

  /* 移动端底部已有「我的/服务」入口，右侧/底部浮动咨询条会压住内容，直接收起。
     电话入口仍在页脚与「我的」页里，不影响联系。 */
  body.has-tb .float-bar {
    display: none;
  }

  body.has-tb .qm-box {
    padding-bottom: calc(18px + env(safe-area-inset-bottom));
  }

  /* 有底部 tab 的页面，移动端页脚只留品牌与备案，避免和 tab 抢屏 */
  body.has-tb .footer-top {
    display: block;
    padding: 24px 0 16px;
    text-align: center;
  }

  body.has-tb .footer-top .footer-col {
    display: none;
  }

  body.has-tb .footer-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  body.has-tb .footer-brand .logo {
    justify-content: center;
  }

  body.has-tb .footer-brand p {
    margin: 10px auto 0;
    max-width: 300px;
    font-size: 12px;
    line-height: 1.7;
  }

  body.has-tb .footer-tel {
    margin-top: 12px;
    justify-content: center;
  }

  body.has-tb .footer-bottom {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 12px 0 4px;
    font-size: 11.5px;
  }

  body.has-tb .footer-links {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* 打印时不出现 */
@media print {
  .tb {
    display: none !important;
  }
}