/**
 * 优惠券领取页移动端修复样式
 * 这个文件的目的是覆盖所有其他样式，确保修复生效
 * 放在所有其他CSS文件之后加载
 */

/* 移动端适配 */
@media (max-width: 768px) {
  /* 优惠券列表覆盖层样式 */
  .coupon-list-overlay {
    align-items: flex-start !important;
    padding-top: 20px !important;
    padding-bottom: 80px !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    z-index: 20000 !important; /* 确保在最上层 */
  }
  
  /* 优惠券列表容器样式 */
  .coupon-list-container.mobile {
    width: 95% !important;
    max-width: 100% !important;
    margin-top: 10px !important;
    max-height: 90vh !important;
    display: flex !important;
    flex-direction: column !important;
  }
  
  /* 优惠券列表内容区域样式 */
  .coupon-list-content {
    padding: 12px !important;
    max-height: calc(90vh - 120px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    flex: 1 !important;
  }
  
  /* 优惠券卡片样式 */
  .coupon-card {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    margin-bottom: 10px !important;
  }
  
  /* 优惠券左侧区域样式 */
  .coupon-card-left {
    min-width: 70px !important;
    width: 25% !important;
  }
  
  /* 优惠券右侧区域样式 */
  .coupon-card-right {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
  }
  
  /* 优惠券信息样式 */
  .coupon-info {
    margin-bottom: 10px !important;
  }
  
  /* 优惠券名称样式 */
  .coupon-name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
  }
  
  /* 优惠券有效期样式 */
  .coupon-validity {
    font-size: 12px !important;
    margin-bottom: 5px !important;
  }
  
  /* 优惠券代码样式 */
  .coupon-code {
    font-size: 12px !important;
    padding: 3px 6px !important;
  }
  
  /* 领取按钮样式 */
  .claim-btn {
    padding: 8px 0 !important;
    font-size: 13px !important;
    width: 100% !important;
  }
  
  /* 关闭按钮样式 */
  .mobile-header-close-btn {
    font-size: 16px !important;
    padding: 5px 10px !important;
    background: none !important;
    border: none !important;
    color: white !important;
    cursor: pointer !important;
  }
  
  /* 超小屏幕设备适配 */
  @media (max-width: 360px) {
    .coupon-list-container.mobile {
      width: 98% !important;
      margin-top: 5px !important;
    }
    
    .coupon-list-content {
      padding: 10px !important;
    }
    
    .coupon-card-left {
      min-width: 60px !important;
    }
    
    .coupon-value {
      font-size: 18px !important;
    }
    
    .coupon-name {
      font-size: 13px !important;
    }
    
    .coupon-validity,
    .coupon-code {
      font-size: 11px !important;
    }
  }
}