/* ============================================
   汾酒防伪 - 首页专属样式
   ============================================ */

/* 让body为flex列布局，使footer-tip靠底 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* 页面水印背景 - 伪元素覆盖在内容之上 */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/bg-watermark.jpg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: fixed;
  z-index: 1;
  pointer-events: none;
  opacity: 0.4;
}

/* 确保所有内容在背景图之上（排除底部导航栏） */
body > *:not(.tabbar) {
  position: relative;
  z-index: 2;
}

/* ============================================
   A. 顶部红色横幅区域
   ============================================ */
.home-banner {
  background: linear-gradient(180deg, #B01018 0%, var(--color-primary-red) 40%, #D42028 100%);
  padding: 0.267rem 0.4rem 0.213rem;
  position: relative;
  overflow: hidden;
}

/* 顶部：品牌名 + 右侧文字 */
.banner-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.16rem;
}

.banner-left {
  flex-shrink: 0;
}

.brand-name {
  font-size: 0.64rem; /* 24px */
  font-weight: 700;
  color: #F5D78E;
  letter-spacing: 0.053rem; /* 2px */
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.brand-slogan {
  font-size: 0.293rem; /* 11px */
  color: rgba(255, 255, 255, 0.85);
  margin-top: 0.08rem;
  letter-spacing: 0.027rem;
}

.banner-right-text {
  text-align: right;
  flex-shrink: 0;
}

.scan-text {
  font-size: 0.427rem; /* 16px */
  font-weight: 700;
  color: var(--color-white);
  line-height: 1.4;
}

.reward-text {
  font-size: 0.427rem; /* 16px */
  font-weight: 700;
  color: #FFD700;
  line-height: 1.4;
}

.reward-tag {
  display: inline-block;
  font-size: 0.267rem; /* 10px */
  color: #FFD700;
  border: 1px solid rgba(255, 215, 0, 0.6);
  border-radius: 0.08rem;
  padding: 0.027rem 0.133rem;
  margin-top: 0.08rem;
  background: rgba(255, 215, 0, 0.1);
}

/* 中部：酒瓶 + 二维码 */
.banner-middle {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 0.16rem;
}

/* 酒瓶占位 */
.bottle-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 3.2rem; /* 120px */
  flex-shrink: 0;
}

.bottle-cap {
  width: 0.48rem; /* 18px */
  height: 0.213rem; /* 8px */
  background: #D4A84B;
  border-radius: 0.053rem 0.053rem 0 0;
}

.bottle-neck {
  width: 0.373rem; /* 14px */
  height: 0.48rem; /* 18px */
  background: linear-gradient(180deg, #E8E8E8 0%, #FFFFFF 100%);
  border-radius: 0.027rem;
}

.bottle-body {
  width: 1.867rem; /* 70px */
  height: 1.6rem; /* 60px */
  background: linear-gradient(180deg, #FFFFFF 0%, #F0F4F8 50%, #E0E8F0 100%);
  border-radius: 0.16rem 0.16rem 0.107rem 0.107rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 1px solid rgba(200, 210, 220, 0.5);
}

.bottle-body::before {
  content: '';
  position: absolute;
  top: 0.267rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.2rem;
  height: 0.053rem;
  background: linear-gradient(90deg, transparent, #4A7FBF, transparent);
}

.bottle-body::after {
  content: '';
  position: absolute;
  bottom: 0.267rem;
  left: 50%;
  transform: translateX(-50%);
  width: 1.2rem;
  height: 0.053rem;
  background: linear-gradient(90deg, transparent, #4A7FBF, transparent);
}

.bottle-label {
  font-size: 0.293rem; /* 11px */
  color: #2B5B9E;
  font-weight: 700;
  letter-spacing: 0.053rem;
  writing-mode: vertical-rl;
  text-orientation: upright;
}

.bottle-base {
  width: 2.133rem; /* 80px */
  height: 0.16rem; /* 6px */
  background: linear-gradient(180deg, #C8B896 0%, #A89070 100%);
  border-radius: 0 0 0.053rem 0.053rem;
  margin-top: -1px;
}

/* 二维码区域 */
.qrcode-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.qrcode-placeholder {
  width: 1.467rem; /* 55px */
  height: 1.467rem;
  background: var(--color-white);
  border-radius: 0.08rem;
  padding: 0.133rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.qr-grid {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 1px;
}

.qr-cell {
  background: #F5F5F5;
  border-radius: 1px;
}

.qr-cell.dark {
  background: #333;
}

.qrcode-tip {
  font-size: 0.24rem; /* 9px */
  color: rgba(255, 255, 255, 0.8);
  margin-top: 0.107rem;
  text-align: center;
  white-space: nowrap;
}

/* ============================================
   轮播图
   ============================================ */
.carousel {
  width: auto;
  overflow: hidden;
  position: relative;
  margin: 0.2rem 0.32rem;
  border-radius: 0.2rem;
}
.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
}
.carousel-track img {
  width: 100%;
  min-width: 100%;
  height: 4.133rem;
  object-fit: cover;
  flex-shrink: 0;
  display: block;
}
.carousel-dots {
  display: none;
}

/* ============================================
   B. 调查问卷横幅
   ============================================ */
.survey-banner {
  display: block;
  width: 100%;
  padding: 0 0.32rem;
  margin: 0;
  box-sizing: border-box;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.survey-banner:active {
  opacity: 0.9;
}

.survey-banner img {
  width: 100%;
  height: auto;
  border-radius: 0.2rem;
  display: block;
}

/* ============================================
   C. 功能入口区域
   ============================================ */
.func-card {
  background: transparent;
  border: none;
  box-shadow: none;
  border-radius: 0;
  margin: 0 0.32rem 0.213rem;
  padding: 0.16rem 0.267rem 0.32rem;
}

.func-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.4rem 0;
  padding: 0.16rem 0;
}

.func-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  min-height: 1.173rem;
}

.func-item:active .func-icon {
  opacity: 0.8;
  transform: scale(0.95);
}

.func-icon {
  width: 1.5rem; /* 56px */
  height: 1.5rem;
  border-radius: 0.32rem; /* 12px - 圆角方形 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.16rem;
  transition: all 0.15s ease;
}

.func-icon span {
  font-size: 0.56rem; /* 21px */
  color: var(--color-white);
  line-height: 1;
}

.func-icon-orange {
  background: linear-gradient(135deg, #FFA557 0%, var(--icon-orange) 100%);
}

.func-icon-blue {
  background: linear-gradient(135deg, #5BA3E8 0%, var(--icon-blue) 100%);
}

.func-icon-coral {
  background: linear-gradient(135deg, #FF8585 0%, var(--icon-coral) 100%);
}

.func-icon-green {
  background: linear-gradient(135deg, #66C26A 0%, var(--icon-green) 100%);
}

.func-icon-purple {
  background: linear-gradient(135deg, #B070C8 0%, var(--icon-purple) 100%);
}

/* 图片图标样式 */
.func-icon-img {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.32rem;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

/* 包含图片的图标容器去掉背景和内部span样式 */
.func-icon:has(.func-icon-img) {
  background: none;
}

.func-label {
  font-size: 0.32rem; /* 12px */
  color: var(--color-text);
  text-align: center;
  line-height: 1.3;
}

/* ============================================
   D. 底部提示文字
   ============================================ */
.footer-tip {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.32rem 0.533rem 0.4rem;
  text-align: center;
  margin-top: auto;
}

.tip-quote-left,
.tip-quote-right {
  font-size: 0.48rem; /* 18px */
  color: var(--color-primary-red);
  font-weight: 700;
  line-height: 1.2;
  flex-shrink: 0;
}

.tip-quote-left {
  margin-right: 0.053rem;
}

.tip-quote-right {
  margin-left: 0.053rem;
}

.tip-text {
  font-size: 0.32rem; /* 12px */
  color: #333;
  line-height: 1.6;
}