/* ============================================================
   会员续费通知横幅
   设计稿：Pixso「2026-9-14木材之家需求单新增会员续费提示」
          frame 8:1493 木材之家首页 / 节点 8:811（容器 50，1920×36）
   位置：  紧贴公共头部（header.njk）下方，整行铺满
   说明：  尺寸/间距/字号/颜色均取自设计稿节点实测值，未做视觉改动
   ============================================================ */

.vip-renewal-banner {
  /* 全站 PC 统一形态（用户裁决 2026-09-21）：fixed 悬浮紧贴菜单栏下沿，含首页。
     理由：横幅需等接口数据才显示，若走文档流会让下方内容突然下移 36px（明显跳动）。
     🔴 z-index 必须低于 .header-wrap 的 100：header-wrap 构成层叠上下文（header.css:11），
     其子树含右上角用户区 hover 下拉（「退出登录」）。横幅与 header 本体（y 0~72）无几何重叠，
     但下拉会延伸到 72px 以下，若层级更高会盖住它导致点不到。99 亦远低于 VIP 弹窗(9999)/mc_tips(99999)。 */
  position: fixed;
  top: 72px;
  left: 0;
  z-index: 99;
  box-sizing: border-box;
  display: none; /* 默认隐藏：数据就绪且命中展示条件后由 JS 加 .is-visible */
  align-items: center;
  width: 100%;
  height: 36px;
  padding: 8px 12px;
  overflow: hidden;
  /* 设计稿背景为横向渐变（左 rgb(255,228,201) → 右 rgb(255,242,225)），
     已从设计稿导出为 1920×36 背景图，避免与文字重复叠加。
     注：导出时设计稿箭头图层（8:807）曾在 x=1238~1269 处残留烧录像素，
     导致「前往续费」后面多出一个箭头。已于 bot-fix-20260920-vip-banner-residual-arrow
     用左右相邻干净列做逐行线性插值清除，背景图现在只含渐变，无任何文字/图标像素。 */
  background: url('/image_v2/home/vip-renewal-banner-bg.png') no-repeat center center;
  background-size: 100% 100%;
  font-family: 'PingFang SC', 'PingFang SC-Regular', 'Microsoft YaHei', Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
  color: #672012; /* 设计稿 fill: rgba(103,32,18,1) */
}

/* 命中展示条件后显示（display 由 none 切回 flex，不改变任何视觉属性） */
.vip-renewal-banner.is-visible {
  display: flex;
}

/* 中部内容组：与关闭按钮同一行，组内居中（对应节点 8:829） */
.vip-renewal-banner__group {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-width: 0;
}

/* 左侧图标：18×18 容器，内含 15.851×17.35 图标（对应节点 8:812 / 8:814） */
.vip-renewal-banner__icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  background: url('/image_v2/home/Group_8_814.svg') no-repeat 1.074px 0.016px;
  background-size: 15.851px 17.35px;
}

/* 提示文案（对应节点 8:804） */
.vip-renewal-banner__text {
  flex: 0 0 auto;
  margin: 0;
  white-space: pre;
}

/* 文案与「前往续费」之间的竖分割线（对应节点 8:810，1×14，透明度 0.3） */
.vip-renewal-banner__divider {
  flex: 0 0 1px;
  width: 1px;
  height: 14px;
  background: url('/image_v2/home/Line_8_810.svg') no-repeat center center;
  background-size: 100% 100%;
}

/* 「前往续费」入口（对应节点 8:809 / 8:806 / 8:807，组内 gap 2） */
.vip-renewal-banner__action {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
  color: #672012;
  text-decoration: none;
}

.vip-renewal-banner__action:hover {
  color: #672012;
  text-decoration: none;
}

.vip-renewal-banner__arrow {
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  background: url('/image_v2/home/svg33.svg') no-repeat center center;
  background-size: 100% 100%;
}

/* 关闭按钮：18×18 容器，内含 10.312×10.312 图标（对应节点 8:822 / 8:824） */
.vip-renewal-banner__close {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
  background: url('/image_v2/home/Group_8_824.svg') no-repeat center center;
  background-size: 10.312px 10.312px;
}