/* =========================================================
 * HDR-UNIFY 20261102e: 手机站全站顶部导航栏统一美化 + 透明/滚动切换
 * v20261102e: 消除 CSS 竞态 —— 默认永远透明，绿色只靠 JS 触发
 *
 * 有 .hero-banner 的内容页:  默认透明 → 滚动>80px 变绿色
 * 没有 hero-banner 的页面:  JS 检测后立即加 .scrolled → 实色绿色
 * 首页 home-header:         保留搜索条形式，永远实色
 * ========================================================= */

/* --- 基础重置：先把 header 打回同一起跑线 --- */
.header {
  height: 50px !important;
  top: 0 !important;
  padding: 0 12px !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 auto !important;
  max-width: 640px !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 5100 !important;
  position: fixed !important;
  letter-spacing: normal !important;
  /* v20261102e: 默认永远透明！不做任何条件覆盖，完全交给 JS 控制 */
  background: transparent !important;
  box-shadow: none !important;
  /* 颜色过渡动画 */
  transition: background .35s ease, box-shadow .35s ease, color .3s ease !important;
}

/* --- 黑渐变遮罩（透明状态下让白色图标/文字在任何图片上都清楚）--- */
.header::before {
  content: '' !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  max-width: 640px !important;
  margin: 0 auto !important;
  background: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0) 100%) !important;
  z-index: -1 !important;
  pointer-events: none !important;
  transition: opacity .35s ease !important;
  opacity: 1 !important;
}

/* --- 滚动后 / 无 hero-banner 页面 JS 主动触发 → 变绿色 --- */
.header.scrolled {
  background: #00766c !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12) !important;
}
.header.scrolled::before {
  opacity: 0 !important;
  background: transparent !important;
}
/* body 级别的 scrolled class 兜底（和上面 header.scrolled 效果一样） */
body.scrolled .header {
  background: #00766c !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12) !important;
}
body.scrolled .header::before {
  opacity: 0 !important;
  background: transparent !important;
}

/* --- iPhone 刘海屏安全区 --- */
@supports (padding-top: env(safe-area-inset-top)) {
  .header {
    padding-top: env(safe-area-inset-top) !important;
    height: calc(50px + env(safe-area-inset-top)) !important;
  }
  .header-spacer {
    height: calc(50px + env(safe-area-inset-top)) !important;
  }
  .header::before {
    top: 0 !important;
  }
}

/* --- 三栏容器 --- */
.header-left,
.header-right {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  z-index: 20 !important;
  position: relative !important;
}
.header-right {
  justify-content: flex-end !important;
}

/* --- 图标按钮统一：圆形半透明白色背景 --- */
.header-icon,
.header-icon-btn,
.header-right-btn,
.hdr-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 2px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,0.2) !important;
  color: #fff !important;
  cursor: pointer !important;
  transition: background .2s, transform .12s, box-shadow .2s !important;
  box-sizing: border-box !important;
  position: relative !important;
  padding: 0 !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.3) !important;
}
.header.scrolled .header-icon,
.header.scrolled .header-icon-btn,
.header.scrolled .hdr-icon,
body.scrolled .header .header-icon,
body.scrolled .header .header-icon-btn {
  background: rgba(255,255,255,0.2) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15) !important;
}
.header-icon:active,
.header-icon-btn:active,
.header-right-btn:active,
.hdr-icon:active {
  background: rgba(255,255,255,0.45) !important;
  transform: scale(0.92) !important;
  opacity: 1 !important;
}
.header-icon:hover,
.header-icon-btn:hover,
.header-right-btn:hover,
.hdr-icon:hover {
  background: rgba(255,255,255,0.3) !important;
}
.header-icon svg,
.header-icon-btn svg,
.header-right-btn svg,
.hdr-icon svg {
  width: 22px !important;
  height: 22px !important;
  fill: currentColor !important;
  display: block !important;
}

/* --- 标题：真居中 --- */
.header-title {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  -webkit-transform: translate(-50%, -50%) !important;
  font-size: 17px !important;
  color: #fff !important;
  font-weight: 600 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  text-align: center !important;
  max-width: 60% !important;
  z-index: 10 !important;
  pointer-events: none !important;
  text-shadow: 0 1px 4px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35) !important;
  letter-spacing: 0.3px !important;
  transition: text-shadow .3s ease !important;
}
.header.scrolled .header-title,
body.scrolled .header .header-title {
  text-shadow: none !important;
}
@supports (padding-top: env(safe-area-inset-top)) {
  .header-title {
    top: calc(50% + env(safe-area-inset-top) / 2) !important;
  }
}

/* --- 首页特殊处理：home-header 永远实色 --- */
.header.home-header {
  display: flex !important;
  padding: 0 12px !important;
  background: #00766c !important;
  box-shadow: 0 1px 6px rgba(0,0,0,0.12) !important;
  transition: none !important;
}
.header.home-header::before {
  display: none !important;
}
.header.home-header .header-title,
.header.home-header .header-right,
.header.home-header .header-left {
  display: none !important;
}

/* --- 清理原始页面写死的 width spacer --- */
.header > div[style*="width: 42px"],
.header > div[style*="width:42px"] {
  display: none !important;
}