/* =========================================================
 * dh.css — 底部导航专用样式
 * 作用范围：index.html / daquan.html / collect.html / group.html
 * 默认：三大页（首页 / 洋酒 / 收藏）共用一套
 * 特例：group.html / daquan.html 通过 body.page-group / body.page-wine 做单独覆盖
 * =======================================================*/

:root{
  /* 默认（首页 / 洋酒 / 收藏）底栏参数 */
  --tabbar-height: 65px;
  --tabbar-icon-size: 29px;
  --tabbar-font-size: 12px;
  --tabbar-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* 底栏纯白 */
  --tabbar-bg: #ffffff;

  /* 文字颜色 & 选中颜色 */
  --tabbar-text-color: #666666;
  --tabbar-active-color: #FFA500;

  /* ⭐ 图标垂直偏移量（只移动 img，自由微调） */
  --tabbar-icon-offset-y: 6px;

  /* ⭐ 整块 nav-item 的偏移（现在不再用来调字体，保持 0） */
  --tabbar-content-offset-y: 0px;

  /* ⭐ 新增：只移动“文字”往下的偏移量 */
  --tabbar-text-offset-y: 4px;
}

/* 为底栏腾出空间，避免内容被遮住（全局） */
body{
  padding-bottom: calc(var(--tabbar-height) + 12px + var(--tabbar-safe-bottom)) !important;
}

/* =========================================================
 * 导航容器 .footer — 默认样式（首页 / 洋酒 / 收藏）
 * =======================================================*/
.footer{
  position: fixed !important;
  left: 0;
  right: 0;
  bottom: 0 !important;
  height: var(--tabbar-height) !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: space-around !important;
  align-items: center !important;

  padding: 4px 0 calc(4px + var(--tabbar-safe-bottom)) !important;
  margin: 0 !important;

  background: var(--tabbar-bg) !important;
  z-index: 999 !important;

  box-shadow: none !important;
  border-top: none !important;
}

/* 兜底：防止其它 css 给 footer 设奇怪的布局 */
.footer *{
  box-sizing: border-box;
}

/* =========================================================
 * 导航项 .nav-item（首页 / 洋酒 / 收藏 默认样式）
 * =======================================================*/
.footer .nav-item{
  flex: 1 1 0 !important;
  min-width: 0 !important;

  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 0 !important;
  margin: 0 !important;

  /* ⭐ 整块偏移已归零，不影响图标/文字的单独调节 */
  transform: translateY(var(--tabbar-content-offset-y));

  text-align: center;
  text-decoration: none;
  color: var(--tabbar-text-color) !important;

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

/* 图标：统一尺寸 + ⭐ 支持上下微调（目前是 3px） */
.footer .nav-item img{
  width: var(--tabbar-icon-size) !important;
  height: var(--tabbar-icon-size) !important;
  display: block;
  margin-bottom: 2px !important;
  object-fit: contain;

  /* 只移动图标 */
  transform: translateY(var(--tabbar-icon-offset-y));
}

/* 文字：单行、省略号 + ⭐ 单独往下挪一点 */
.footer .nav-item span{
  display: block;
  font-size: var(--tabbar-font-size) !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  /* 只移动文字 */
  transform: translateY(var(--tabbar-text-offset-y));
}

/* 选中状态：颜色高亮 */
.footer .nav-item.active{
  color: var(--tabbar-active-color) !important;
}

/* 选中状态图标提亮一点 */
.footer .nav-item.active img{
  filter: brightness(1.1);
}

/* 鼠标悬停（PC）保持和 active 一致颜色 */
.footer a:hover{
  color: var(--tabbar-active-color) !important;
}

/* =========================================================
 * 兼容旧样式：把 base.css 中一些可能影响 footer 的属性干掉
 * =======================================================*/
.footer a{
  padding: 0 !important;
  margin: 0 !important;
}

/* ✅ 不再重置 transform，避免覆盖我们用来调节位置的 translateY */
.footer a,
.footer span{
  /* transform: none !important;  —— 已废弃，保留注释方便以后查问题 */
}

/* =========================================================
 * 简单移动端优化（默认导航）
 * =======================================================*/
@media (max-width: 360px){
  :root{
    --tabbar-icon-size: 24px;
    --tabbar-font-size: 11px;
    --tabbar-height: 52px;
  }
}

/* Android 设备（如果有 html.is-android） */
html.is-android{
  --tabbar-icon-size: 24px;
  --tabbar-font-size: 11px;
}

/* =========================================================
 * ===== 群组页面专用覆盖：body.page-group 生效 =====
 * =======================================================*/

body.page-group{
  --group-tabbar-height: 65px;            /* 群组底栏高度（可调） */
  --group-tabbar-bg: #ffffff;             /* 群组底栏背景色：白色 */
  --group-tabbar-text-color: #333333;     /* 群组未选中文字颜色：深灰 */
  --group-tabbar-active-color: #FFA500;   /* 群组选中高亮颜色 */

  --group-tabbar-icon-size: 29px;         /* 群组图标大小 */
  --group-tabbar-font-size: 12px;         /* 群组文字大小 */

  /* ⭐ 群组页面单独控制图标/文字偏移（可以以后细调） */
  --tabbar-icon-offset-y: 6px;            /* 图标微微下移 */
  --tabbar-text-offset-y: 4px;            /* 文字微微下移 */
  --tabbar-content-offset-y: 0px;         /* 整块不挪动 */
}

/* 群组页面：重新计算底部预留高度 */
body.page-group{
  padding-bottom: calc(var(--group-tabbar-height) + 12px + var(--tabbar-safe-bottom)) !important;
}

/* 群组页面：footer 容器使用群组专用变量 */
body.page-group .footer{
  height: var(--group-tabbar-height) !important;
  background: var(--group-tabbar-bg) !important;
}

/* 群组页面：导航项颜色 / 尺寸 */
body.page-group .footer .nav-item{
  color: var(--group-tabbar-text-color) !important;
}

body.page-group .footer .nav-item.active{
  color: var(--group-tabbar-active-color) !important;
}

body.page-group .footer .nav-item img{
  width: var(--group-tabbar-icon-size) !important;
  height: var(--group-tabbar-icon-size) !important;
}

body.page-group .footer .nav-item span{
  font-size: var(--group-tabbar-font-size) !important;
}

/* =========================================================
 * ===== 洋酒页面专用覆盖：body.page-wine 生效 =====
 * =======================================================*/

body.page-wine{
  --wine-tabbar-height: 65px;            /* 洋酒底栏高度 */
  --wine-tabbar-bg: #ffffff;             /* 洋酒底栏背景色 */
  --wine-tabbar-text-color: #666666;     /* 洋酒未选中文字颜色 */
  --wine-tabbar-active-color: #FFA500;   /* 洋酒选中高亮颜色 */

  --wine-tabbar-icon-size: 29px;         /* 洋酒图标大小 */
  --wine-tabbar-font-size: 12px;         /* 洋酒文字大小 */

  /* ⭐ 洋酒页面单独控制图标/文字偏移 */
  --tabbar-icon-offset-y: 6px;
  --tabbar-text-offset-y: 4px;
  --tabbar-content-offset-y: 0px;
}

/* 洋酒页面：重新计算底部预留高度 */
body.page-wine{
  padding-bottom: calc(var(--wine-tabbar-height) + 12px + var(--tabbar-safe-bottom)) !important;
}

/* 洋酒页面：footer 容器使用洋酒专用变量 */
body.page-wine .footer{
  height: var(--wine-tabbar-height) !important;
  background: var(--wine-tabbar-bg) !important;
}

/* 洋酒页面：导航项颜色 / 尺寸 */
body.page-wine .footer .nav-item{
  color: var(--wine-tabbar-text-color) !important;
}

body.page-wine .footer .nav-item.active{
  color: var(--wine-tabbar-active-color) !important;
}

body.page-wine .footer .nav-item img{
  width: var(--wine-tabbar-icon-size) !important;
  height: var(--wine-tabbar-icon-size) !important;
}

body.page-wine .footer .nav-item span{
  font-size: var(--wine-tabbar-font-size) !important;
}