/**
 * H5 Style Override v2.0
 * 样式覆盖和优化补丁
 * 用于在不重新构建的情况下应用设计系统改进
 */

/* ============================================
   全局背景优化
   ============================================ */
.container {
  background: var(--gradient-primary) !important;
}

/* ============================================
   Banner Header 优化
   ============================================ */
.banner-header {
  background: transparent !important;
  color: var(--color-text-white) !important;
  position: relative !important;
  overflow: hidden !important;
}

.banner-header::before {
  content: '' !important;
  position: absolute !important;
  top: -100rpx !important;
  right: -100rpx !important;
  width: 300rpx !important;
  height: 300rpx !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.banner-header::after {
  content: '' !important;
  position: absolute !important;
  bottom: -50rpx !important;
  left: -50rpx !important;
  width: 200rpx !important;
  height: 200rpx !important;
  background: rgba(255, 255, 255, 0.08) !important;
  border-radius: 50% !important;
  pointer-events: none !important;
}

.banner-content {
  position: relative !important;
  z-index: 1 !important;
}

.main-title {
  font-size: var(--font-size-3xl) !important;
  font-weight: var(--font-weight-bold) !important;
  text-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15) !important;
  letter-spacing: 0.05em !important;
}

.sub-title {
  font-size: var(--font-size-base) !important;
  letter-spacing: 0.3em !important;
  font-weight: var(--font-weight-medium) !important;
}

/* 礼物盒子 - 使用属性选择器匹配 Vue scoped 样式 */
.gift-box,
.gift-box[data-v-38519cf5],
.gift-box[data-v-fb0befd8],
.gift-box[data-v-4d54e16b],
[class*="gift-box"] {
  width: 3.75rem !important;
  height: 3.75rem !important;
  background-color: rgba(255, 255, 255, 0.15) !important;
  border-radius: 0.625rem !important;
  -webkit-backdrop-filter: blur(10px) !important;
  backdrop-filter: blur(10px) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
  /* 礼物盒子 SVG 图标 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cdefs%3E%3ClinearGradient id='box' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FFD93D'/%3E%3Cstop offset='100%25' style='stop-color:%23FF9500'/%3E%3C/linearGradient%3E%3ClinearGradient id='lid' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF6B6B'/%3E%3Cstop offset='100%25' style='stop-color:%23EE5A5A'/%3E%3C/linearGradient%3E%3ClinearGradient id='ribbon' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%23FF6B6B'/%3E%3Cstop offset='100%25' style='stop-color:%23EE5A5A'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='10' y='28' width='44' height='30' rx='4' fill='url(%23box)'/%3E%3Crect x='8' y='20' width='48' height='12' rx='3' fill='url(%23lid)'/%3E%3Crect x='28' y='20' width='8' height='38' fill='url(%23ribbon)'/%3E%3Cpath d='M32 8 C24 8 20 14 20 20 L28 20 C28 16 30 12 32 12 C34 12 36 16 36 20 L44 20 C44 14 40 8 32 8' fill='url(%23ribbon)'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 65% !important;
}

.banner-notice {
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(20rpx) !important;
  -webkit-backdrop-filter: blur(20rpx) !important;
  border: 1rpx solid rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
  z-index: 1 !important;
}

.notice-icon {
  background: rgba(255, 255, 255, 0.3) !important;
  border-radius: 50% !important;
}

.notice-text {
  font-size: var(--font-size-sm) !important;
  font-weight: var(--font-weight-medium) !important;
  letter-spacing: 0.02em !important;
}

/* ============================================
   商品卡片优化
   ============================================ */
.product-card {
  background: var(--color-bg-white) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--shadow-md) !important;
  transition: var(--transition-normal) !important;
  overflow: hidden !important;
}

.product-card:active {
  transform: scale(0.98) !important;
  box-shadow: var(--shadow-sm) !important;
}

.product-image {
  border-radius: var(--radius-lg) !important;
}

.product-title {
  font-size: var(--font-size-base) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-primary) !important;
  line-height: var(--line-height-normal) !important;
}

.product-price {
  color: var(--color-danger) !important;
  font-weight: var(--font-weight-bold) !important;
}

.product-original-price {
  color: var(--color-text-tertiary) !important;
  text-decoration: line-through !important;
}

/* 平台标签 */
.platform-tag {
  padding: 4rpx 12rpx !important;
  border-radius: var(--radius-sm) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-medium) !important;
}

.platform-tag.douyin {
  background: var(--color-platform-douyin) !important;
  color: var(--color-text-white) !important;
}

.platform-tag.kuaishou {
  background: var(--color-platform-kuaishou) !important;
  color: var(--color-text-white) !important;
}

/* ============================================
   按钮优化
   ============================================ */
.buy-btn,
.action-btn {
  border-radius: var(--radius-full) !important;
  font-weight: var(--font-weight-semibold) !important;
  transition: var(--transition-normal) !important;
  cursor: pointer !important;
}

.buy-btn:active,
.action-btn:active {
  transform: scale(0.96) !important;
}

/* 主要按钮 */
.btn-primary,
.buy-btn.primary {
  background: var(--gradient-button) !important;
  box-shadow: var(--shadow-danger) !important;
}

/* 成功按钮 */
.btn-success,
.confirm-btn:not(.disabled) {
  background: var(--color-success) !important;
  box-shadow: var(--shadow-success) !important;
}

.confirm-btn:active:not(.disabled) {
  transform: scale(0.97) !important;
}

.confirm-btn.disabled {
  background: var(--color-text-disabled) !important;
  box-shadow: none !important;
}

/* ============================================
   订单列表 Tab 优化
   ============================================ */
.tab-list {
  background: rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(20rpx) !important;
  -webkit-backdrop-filter: blur(20rpx) !important;
  border-radius: var(--radius-full) !important;
  border: 1rpx solid rgba(255, 255, 255, 0.15) !important;
}

.tab-item {
  border-radius: calc(var(--radius-full) - 4rpx) !important;
  transition: var(--transition-normal) !important;
  cursor: pointer !important;
}

.tab-item:active {
  transform: scale(0.97) !important;
}

.tab-item.active {
  background: var(--color-text-white) !important;
  box-shadow: var(--shadow-sm) !important;
}

.tab-text {
  font-weight: var(--font-weight-medium) !important;
}

.tab-item.active .tab-text {
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-bold) !important;
}

/* ============================================
   订单卡片优化
   ============================================ */
.order-card {
  background: var(--color-bg-white) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: var(--shadow-md) !important;
  transition: var(--transition-normal) !important;
}

.order-card:active {
  transform: scale(0.99) !important;
}

/* 订单状态徽章 */
.order-status {
  padding: 6rpx 16rpx !important;
  border-radius: var(--radius-full) !important;
  font-size: var(--font-size-xs) !important;
  font-weight: var(--font-weight-medium) !important;
}

.order-status.pending {
  background: var(--color-warning-light) !important;
  color: var(--color-warning) !important;
}

.order-status.paid,
.order-status.completed {
  background: var(--color-success-light) !important;
  color: var(--color-success) !important;
}

.order-status.failed,
.order-status.cancelled {
  background: var(--color-danger-light) !important;
  color: var(--color-danger) !important;
}

/* ============================================
   弹窗/对话框优化
   ============================================ */
.popup-mask,
.dialog-mask {
  background: var(--color-bg-overlay) !important;
  backdrop-filter: blur(8rpx) !important;
  -webkit-backdrop-filter: blur(8rpx) !important;
}

.popup-content,
.dialog-content {
  background: var(--color-bg-white) !important;
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0 !important;
  box-shadow: 0 -8rpx 40rpx rgba(0, 0, 0, 0.15) !important;
}

.popup-header {
  border-bottom: 1rpx solid var(--color-border-light) !important;
}

.popup-title {
  font-size: var(--font-size-lg) !important;
  font-weight: var(--font-weight-semibold) !important;
  color: var(--color-text-primary) !important;
}

/* ============================================
   表单优化
   ============================================ */
.input-field,
.textarea-field {
  border: 2rpx solid var(--color-border) !important;
  border-radius: var(--radius-xl) !important;
  background: var(--color-bg-light) !important;
  transition: var(--transition-fast) !important;
}

.input-field:focus,
.textarea-field:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 4rpx var(--color-primary-light) !important;
}

/* ============================================
   底部固定区域优化
   ============================================ */
.bottom-section {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: blur(20rpx) !important;
  -webkit-backdrop-filter: blur(20rpx) !important;
  border-top: 1rpx solid rgba(0, 0, 0, 0.05) !important;
}

/* ============================================
   步骤指引优化
   ============================================ */
.step-number {
  background: var(--color-success) !important;
  box-shadow: var(--shadow-success) !important;
  border-radius: var(--radius-full) !important;
  font-weight: var(--font-weight-bold) !important;
}

.step-line {
  background: linear-gradient(to right, var(--color-success), transparent) !important;
}

.copy-button {
  background: linear-gradient(135deg, var(--color-primary), var(--color-danger)) !important;
  border-radius: var(--radius-full) !important;
  box-shadow: 0 8rpx 24rpx rgba(232, 62, 140, 0.35) !important;
  transition: var(--transition-normal) !important;
}

.copy-button:active {
  transform: scale(0.97) !important;
}

/* ============================================
   空状态优化
   ============================================ */
.empty-box {
  padding: var(--spacing-16) var(--spacing-8) !important;
}

.empty-image {
  opacity: 0.8 !important;
}

.empty-text {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: var(--font-size-base) !important;
}

/* ============================================
   加载状态优化
   ============================================ */
.loading-more {
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: var(--font-size-sm) !important;
}

/* ============================================
   动画增强
   ============================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20rpx);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.product-card,
.order-card {
  animation: fadeInUp 0.3s ease-out;
}

/* 减少动画 - 尊重用户偏好 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}