/*!
 * 底部导航栏样式 · 配合 mh-iconfont.js
 * ----------------------------------------------------------------
 * 视觉风格：半透明毛玻璃 + 填充式图标 + 激活态药丸高亮
 * 图标由 mh-iconfont.js 统一替换为 iconfont.cn 风格 SVG。
 */

/* === 1. 背景 === */
.mh-tabbar .mh-tabbar__bg{
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: saturate(200%) blur(30px);
  -webkit-backdrop-filter: saturate(200%) blur(30px);
  border-top: none !important;
  box-shadow: 0 -1px 12px rgba(0, 0, 0, 0.04) !important;
}

/* === 2. 内容区 === */
.mh-tabbar .mh-tabbar__content{
  height: 58px !important;
  padding: 0 .5rem !important;
}

/* === 3. tab 项 === */
.mh-tabbar .mh-tabbar__item{
  flex: 1 1 0% !important;
  gap: 3px !important;
  position: relative;
  z-index: 1;
  border-radius: 14px;
  transition: background-color .18s ease, transform .18s ease;
}
.mh-tabbar .mh-tabbar__item:active{
  background-color: rgba(248, 180, 200, 0.10);
  transform: scale(0.97);
}

/* === 4. 激活态药丸 === */
.mh-tabbar .mh-tabbar__item--active::before{
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 48px;
  height: 32px;
  border-radius: 16px;
  background: rgba(248, 180, 200, 0.15);
  z-index: -1;
}

/* === 5. 图标 & 文字 === */
.mh-tabbar .mh-tabbar__item .mh-icon,
.mh-tabbar .mh-tabbar__label{
  position: relative;
  z-index: 1;
}
/* 关键：约束 SVG 尺寸到容器，防止大 viewBox 图标溢出覆盖标签 */
.mh-icon__inner{
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  line-height: 0;
}
.mh-icon__inner svg{
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: block;
}
.mh-tabbar .mh-tabbar__label{
  font-size: 10px !important;
  letter-spacing: .03em;
}

/* === 6. 中间按钮 === */
.mh-tabbar .mh-tabbar__center-btn{
  gap: 3px !important;
  position: relative;
  z-index: 1;
}
.mh-tabbar .center-btn-inner{
  width: 38px !important;
  height: 38px !important;
  border-radius: 14px !important;
  background: linear-gradient(135deg, #F8B4C8, #E892A8) !important;
  box-shadow: 0 3px 12px rgba(248, 180, 200, 0.35) !important;
  margin-top: 0 !important;
  transition: transform .18s ease, box-shadow .18s ease;
}
.mh-tabbar .center-btn-inner:active{
  transform: scale(0.88);
  box-shadow: 0 1px 6px rgba(248, 180, 200, 0.20) !important;
}
.mh-tabbar .mh-tabbar__label--center{
  font-size: 10px !important;
}