/*
 * 首页专用样式（index/index）
 * 目标：
 * - 避免“滚动订单”覆盖“立即购买”按钮导致无法点击（层级 + pointer-events + 取消固定高度）
 * - 仅保留本页实际使用到的样式，避免全局/组件库样式污染与兼容性问题
 */

:root {
  --page-bg: #0f0e14;
  --text: #ffffff;
  --text-muted: rgba(255, 255, 255, 0.75);
  --hairline: rgba(255, 255, 255, 0.3);
  --shadow: 0 0 1.6vw 0.8vw rgba(0, 0, 0, 0.1);
  /* 所有区块之间统一间距（列表→购买、购买→订单、订单→评分） */
  --section-gap: 7vw;
  /* 滚动订单 → 综合评分：单独更紧凑的间距 */
  --marquee-bottom-gap: 4vw;
  /* 订单滚动每行高度（和 JS 的 32px 兜底对齐） */
  --marquee-line-height: 32px;
  /* 立即购买按钮：位置与文字色 */
  --buy-btn-text: #3a1d0d;
  /*
   * 顶部 bg1 背景升级为 1284*1284 后，需要整体下移内容
   * （会员卡列表/立即购买/下方订单滚动与评论区都会随文档流整体下移）
   */
  --home-links-top-padding: 46vw;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  background: #fff;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Segoe UI, Arial, Roboto,
    "PingFang SC", "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 0;
  padding: 0;
}

.app {
  margin: 0 auto;
  color: #2c3e50;
}

.page {
  min-height: 100vh;
}

.page-links {
  background: var(--page-bg);
  color: var(--text);
}

/* 右侧浮动按钮组 */
.floating-group {
  position: fixed;
  right: 5.333vw;
  bottom: 40vw;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.floating-group__item {
  width: 12.8vw;
  height: 12.8vw;
  border-radius: 999px;
  overflow: hidden;
  box-shadow: var(--shadow);
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 3.2vw;
}

.floating-group__item .svg-icon {
  width: 8vw;
  height: 8vw;
}

.floating-group .feedback {
  color: #8e4116;
  font-size: 3.2vw;
  text-align: center;
  line-height: 1.2;
}

/* 顶部背景区：不要写死高度，避免不同浏览器导致按钮溢出被下面的滚动层盖住 */
.page-links .links-wrapper {
  width: 100vw;
  /* 默认背景（后台配置会在 HTML 上用 background-image 覆盖） */
  background-image: url(/assets/img/g8/bg1.jpg);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% auto;
  /* bg1 由 750*693 变为 1284*1284 后，至少保证一屏宽的正方形背景高度 */
  min-height: 100vw;
}

.page-links.page-book .links-wrapper {
  background-image: url(/assets/img/g9/bg1.jpg);
}

.page-links.page-q1 .links-wrapper {
  background-image: url(/assets/img/g10/bg31.jpg);
}

/* 购买项按钮组 */
.btn-group.btn-links {
  /* 恢复原版视觉：内容整体下移并留出底部空间 */
  padding: var(--home-links-top-padding) 10.667vw 5.333vw;
  display: block;
}

/* 兼容旧版 WebView：避免 flex gap */
.btn-group.btn-links > .van-badge__wrapper,
.btn-group.btn-links > .van-button {
  display: block;
}

.btn-group.btn-links > .van-badge__wrapper:not(:last-child),
.btn-group.btn-links > .van-button:not(:last-child) {
  margin-bottom: 4vw;
}

/* 保留模板中的 van-* 类名，但只实现本页实际用到的最小样式 */
.van-badge__wrapper {
  position: relative;
  display: block;
}

.van-badge {
  position: absolute;
  top: 0;
  right: 0;
  transform: translate(50%, -50%);
  background: #ee0a24;
  color: #fff;
  font-weight: 700;
  font-size: 3.2vw;
  line-height: 1.2;
  padding: 0 0.8vw;
  border-radius: 999px;
  white-space: nowrap;
}

.van-button {
  width: 100%;
  display: block;
  text-align: left;
  /* 避免某些 WebView 的原生 button 渲染导致圆角看起来不均匀 */
  -webkit-appearance: none;
  appearance: none;
  border-radius: 12px;
  background: #3a3233;
  border: 0.267vw solid #98857d;
  box-shadow: var(--shadow);
  padding: 2.667vw 3.2vw;
  min-height: 12vw;
  cursor: pointer;
  user-select: none;
}

.van-button__content {
  display: block;
}

.van-button__text {
  display: flex;
  width: 100%;
  align-items: center;
  flex-wrap: nowrap;
  color: #fff;
  font-size: 3.733vw;
}

.btn-links .cate {
  flex: 4;
  font-weight: 700;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-links .price {
  flex: 1;
  font-weight: 700;
  text-align: center;
  position: relative;
  padding-left: 1.6vw;
  white-space: nowrap;
}

.btn-links .price::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 0.2vw;
  height: 70%;
  background: rgba(255, 255, 255, 0.35);
}

.van-button.active {
  color: #3a1d0d;
  background: linear-gradient(0deg, #f6d7c2, #f6d7c2, #ffc39c 0%, #ffe2d0);
  border-color: transparent;
}

.van-button.active .van-button__text {
  color: #3a1d0d;
}

.van-button.active .price::before {
  background: #3a1d0d;
}

/* 立即购买按钮：确保始终在可点层级最上面 */
@keyframes scale-animate {
  0% {
    transform: scale3d(1.06, 1.06, 1.06);
  }
  50% {
    transform: scale3d(0.9, 0.9, 0.9);
  }
  100% {
    transform: scale3d(1.06, 1.06, 1.06);
  }
}

.page-links .btn-submit {
  position: relative;
  z-index: 20;
  height: 13.333vw;
  line-height: 13.333vw;
  font-size: 5.333vw;
  font-weight: 700;
  /* 与其它区块保持一致的间距 */
  margin: var(--section-gap) auto 0;
  text-align: center;
  color: var(--buy-btn-text);
  background: url(/assets/img/g8/btn.png) no-repeat center;
  background-size: auto 100%;
  cursor: pointer;
  user-select: none;
  animation: scale-animate 1.8s ease-in-out infinite;
}

/* 滚动订单：即使发生重叠也不拦截点击（关键修复点之一） */
.marquee-container {
  position: relative;
  z-index: 5;
  pointer-events: none;
  /* 默认显示 3 行（避免第 3 行被裁掉） */
  height: calc(var(--marquee-line-height) * 3);
  overflow: hidden;
  padding: 0 4.267vw;
  /* 上下间距：上边保持与按钮一致，下边更紧凑贴近评分区块 */
  margin: var(--section-gap) auto var(--marquee-bottom-gap);
}

.marquee-content {
  position: absolute;
  top: 0;
  width: 100%;
  will-change: transform;
}

.marquee-item {
  font-size: 3.2vw;
  height: var(--marquee-line-height);
  line-height: var(--marquee-line-height);
  text-align: left;
  color: #bbb;
  /* JS 里也以 32px 作为兜底高度 */
  min-height: 32px;
}

/* 评论区 */
.page-links .links-comments {
  width: 100%;
  min-height: 222.667vw;
  margin-top: 0;
  background: url(/assets/img/g8/bg2.jpg) no-repeat center bottom;
  background-size: 100% auto;
  position: relative;
  padding: 4vw 3.2vw 3.2vw;
}

.page-links.page-book .links-comments {
  background-image: url(/assets/img/g9/bg2.jpg);
}

.page-links.page-q1 .links-comments {
  background-image: url(/assets/img/g10/bg32.jpg);
}

.comments-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4vw;
}

.rating-info {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.rating-title,
.satisfaction {
  font-size: 3.733vw;
  font-weight: 700;
  color: #fff;
}

.rating-stars,
.comment-stars {
  display: flex;
  align-items: center;
}

.star {
  font-size: 3.2vw;
  line-height: 1;
  color: #ffd700;
}

.rating-title {
  margin-right: 2.667vw;
}

.rating-stars .star,
.comment-stars .star {
  margin-right: 0.533vw;
}

.rating-stars .star:last-child,
.comment-stars .star:last-child {
  margin-right: 0;
}

.comments-divider {
  height: 1px;
  background: var(--hairline);
  margin: 4vw 0 6.4vw;
}

.comments-list {
  display: block;
}

.comment-item {
  display: flex;
  padding: 3.2vw 0 0;
}

.comment-item + .comment-item {
  margin-top: 1.6vw;
}

.comment-avatar {
  width: 10.667vw;
  height: 10.667vw;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-align: center;
  margin-right: 3.2vw;
}

.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4.8vw;
  color: #fff;
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.comment-content {
  flex: 1;
  display: block;
}

.comment-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.comment-username {
  font-size: 3.733vw;
  font-weight: 700;
  color: #fff;
  margin-right: 2.667vw;
}

.comment-date {
  font-size: 3.2vw;
  color: rgba(255, 255, 255, 0.7);
  margin-left: auto;
}

.comment-text {
  margin-top: 2.133vw;
  font-size: 3.733vw;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.9);
  word-break: break-word;
}