/* =========================================================
 * 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 !important;
  right: 0 !important;
  top: auto !important;
  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: 99999 !important;

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

  /* 独立合成层，滚动时不再重绘 footer，避免卡顿 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

/* 兜底：防止其它 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;
}

/* =========================================================
 * 苹果设备：导航栏白色背景 + 点击区域与触摸优化（一点即跳）
 * =======================================================*/
html.is-ios .footer {
  background: #ffffff !important;
  background-color: #ffffff !important;
  box-shadow: 0 -6px 24px rgba(0,0,0,0.18) !important;
  border-top: 1px solid rgba(0,0,0,0.15) !important;
}

/* 苹果：底栏每个导航项至少 44px 可点区域，减少误触/要点好几次 */
html.is-ios .footer .nav-item {
  min-height: 44px !important;
  min-width: 44px !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0.08) !important;
  touch-action: manipulation !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

/* =========================================================
 * 确保导航按钮点击响应灵敏（所有设备）
 * =======================================================*/
.footer {
  z-index: 99999 !important;
}

.footer a,
.footer .nav-item {
  pointer-events: auto !important;
  cursor: pointer !important;
  -webkit-tap-highlight-color: rgba(0,0,0,0.1) !important;
  touch-action: manipulation !important;
  user-select: none !important;
  -webkit-user-select: none !important;
}

/* 确保图标和文字不会拦截点击，事件冒泡到 a */
.footer img,
.footer span {
  pointer-events: none !important;
}

/* =========================================================
 * 详情页 iframe 全屏时：彻底隐藏底部导航，避免苹果机导航盖住详情、返回白屏
 * 需要“没有导航按钮”的二级页，由 JS 在进入/离开详情时切换 body.detail-frame-visible
 * =======================================================*/
body.detail-frame-visible #footer,
body.detail-frame-visible .footer {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  z-index: -1 !important;
}