.gift-card {
  position: relative;
  width: 100%;
  margin-bottom: 16px;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  background: #fff;
  transition: all 0.3s ease;

  &:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  }

  &.disabled {
    opacity: 0.7;
  }

  // 主题色彩
  &.gift-card-gold {
    .gift-card-header {
      background: #ffd700;
    }
    .use-btn {
      background: #ffd700;
      border: none;
      color: #333;
    }
  }

  &.gift-card-silver {
    .gift-card-header {
      background: #c0c0c0;
    }
    .use-btn {
      background: #c0c0c0;
      border: none;
      color: #333;
    }
  }

  &.gift-card-bronze {
    .gift-card-header {
      background: #cd7f32;
    }
    .use-btn {
      background: #cd7f32;
      border: none;
      color: #fff;
    }
  }

  &.gift-card-blue {
    .gift-card-header {
      background: #4a90e2;
    }
    .use-btn {
      background: #4a90e2;
      border: none;
      color: #fff;
    }
  }

  &.gift-card-green {
    .gift-card-header {
      background: #5cb85c;
    }
    .use-btn {
      background: #5cb85c;
      border: none;
      color: #fff;
    }
  }

  &.gift-card-purple {
    .gift-card-header {
      background: #9b59b6;
    }
    .use-btn {
      background: #9b59b6;
      border: none;
      color: #fff;
    }
  }

  .gift-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    color: #fff;
    position: relative;

    .gift-card-logo {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .gift-card-title {
      flex: 1;
      margin-left: 12px;

      .title-text {
        display: block;
        font-weight: 600;
        line-height: 1.3;
        margin-bottom: 2px;
        // 商品名称可能较长，需要处理溢出
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        max-width: 200px;
      }

      .type-text {
        display: block;
        font-size: 14px;
        opacity: 0.9;
      }
    }

    .gift-card-status {
      .nut-tag {
        background: rgba(255, 255, 255, 0.9);
        color: #333;
        border: none;
      }
    }
  }

  .gift-card-body {
    padding: 20px;

    .gift-card-content {
      display: flex;
      align-items: flex-start;
      margin-bottom: 16px;

      .gift-image-container {
        margin-right: 16px;
        flex-shrink: 0;
        position: relative;

        .gift-image {
          position: relative;

          .gift-image-single {
            width: 180px;
            height: 180px;
            border-radius: 12px;
            object-fit: cover;
            background-color: #f5f5f5;
            // 添加加载状态和错误处理
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: 0;
              right: 0;
              bottom: 0;
              background: #f5f5f5;
              border-radius: 12px;
              z-index: -1;
            }
          }
        }

        .gift-image-swiper {
          position: relative;
          width: 80px;
          height: 80px;
          border-radius: 12px;
          overflow: hidden;

          .swiper-container {
            width: 100%;
            height: 100%;

            .swiper-image {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }
        }

        .discount-badge {
          position: absolute;
          top: -4px;
          right: -4px;
          background: #ff4757;
          border-radius: 8px;
          padding: 2px 6px;
          z-index: 2;

          .discount-text {
            font-size: 10px;
            color: #fff;
            font-weight: 600;
          }
        }
      }

      .gift-info {
        flex: 1;

        .goods-basic-info {
          margin-bottom: 12px;

          .brand-category {
            display: flex;
            align-items: center;
            margin-bottom: 8px;

            .brand-text {
              font-weight: 600;
              color: #333;
            }

            .category-text {
              font-size: 12px;
              color: #999;
              margin-left: 4px;
            }
          }

          .price-info {
            display: flex;
            align-items: baseline;
            margin-bottom: 8px;

            .current-price {
              display: flex;
              align-items: baseline;
              margin-right: 12px;

              .price-symbol {
                font-size: 16px;
                color: #ff4757;
                font-weight: 600;
              }

              .price-amount {
                font-size: 24px;
                font-weight: bold;
                color: #ff4757;
              }
            }

            .original-price {
              font-size: 14px;
              color: #999;
              text-decoration: line-through;
            }
          }

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

            .rating-text {
              font-size: 12px;
              color: #333;
              margin-left: 4px;
              margin-right: 8px;
            }

            .review-count {
              font-size: 12px;
              color: #999;
            }
          }
        }

        .goods-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
          margin-bottom: 12px;

          .nut-tag {
            font-size: 11px;
            padding: 2px 6px;
          }
        }

        .gift-description {
          font-size: 14px;
          color: #666;
          line-height: 1.4;
          margin-bottom: 12px;
        }

        .goods-specs {
          margin-bottom: 12px;

          .spec-item {
            display: flex;
            align-items: center;
            margin-bottom: 4px;

            .spec-label {
              font-size: 12px;
              color: #999;
              min-width: 40px;
            }

            .spec-value {
              font-size: 12px;
              color: #333;

              &.in-stock {
                color: #52c41a;
              }

              &.out-stock {
                color: #ff4757;
              }
            }
          }
        }

        .promotion-info {
          background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
          border-radius: 8px;
          padding: 12px;
          margin-bottom: 12px;
          border-left: 3px solid #ff4757;

          .promotion-header {
            display: flex;
            align-items: center;
            margin-bottom: 6px;

            .promotion-icon {
              color: #ff4757;
              margin-right: 6px;
            }

            .promotion-title {
              font-size: 13px;
              font-weight: 600;
              color: #ff4757;
            }
          }

          .promotion-desc {
            font-size: 12px;
            color: #333;
            line-height: 1.4;
            margin-bottom: 4px;
          }

          .promotion-valid {
            font-size: 11px;
            color: #999;
          }
        }

        .gift-code {
          background: #f8f9fa;
          border-radius: 8px;
          padding: 12px;
          border: 1px dashed #ddd;

          .code-label {
            display: block;
            color: #999;
            margin-bottom: 4px;
          }

          .code-value {
            font-weight: 600;
            color: #333;
            font-family: 'Courier New', monospace;
            letter-spacing: 1px;
          }
        }
      }
    }

    .goods-instructions {
      margin-bottom: 16px;

      .instruction-section {
        margin-bottom: 12px;

        &:last-child {
          margin-bottom: 0;
        }

        .section-header {
          display: flex;
          align-items: center;
          margin-bottom: 8px;

          .section-icon {
            color: #4a90e2;
            margin-right: 6px;

            &.warning {
              color: #ff9500;
            }
          }

          .section-title {
            font-size: 13px;
            font-weight: 600;
            color: #333;
          }
        }

        .instruction-list {
          .instruction-item {
            display: block;
            font-size: 12px;
            color: #666;
            line-height: 1.5;
            margin-bottom: 4px;
            padding-left: 8px;

            &.notice {
              color: #ff9500;
            }

            &:last-child {
              margin-bottom: 0;
            }
          }
        }

        .store-list {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;

          .store-tag {
            font-size: 11px;
            padding: 2px 6px;
          }
        }
      }
    }

    .gift-time-info {
      .time-item {
        display: flex;
        align-items: center;
        margin-bottom: 6px;

        .time-text {
          font-size: 12px;
          color: #666;
          margin-left: 6px;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .gift-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px 20px;

    .footer-info {
      .contact-info {
        display: flex;
        align-items: center;

        .contact-text {
          font-size: 12px;
          color: #999;
          margin-left: 4px;
        }
      }
    }

    .footer-actions {
      display: flex;
      gap: 8px;

      .use-btn {
        min-width: 80px;
        font-weight: 600;
        transition: all 0.2s ease;

        &:active {
          transform: scale(0.95);
        }
      }
    }
  }

  .gift-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;

    .overlay-badge {
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 16px;
      font-weight: 600;
    }
  }
}

// 礼品卡基础样式
.gift-card {
  opacity: 1;
  transform: translateY(0);
}

// 使用按钮效果
.use-btn {
  transition: all 0.3s ease;
}

// 响应式设计
@media (max-width: 768px) {
  .gift-card {
    .gift-card-body {
      padding: 16px;

      .gift-card-content {
        .gift-image-container {
          margin-right: 12px;

          .gift-image .gift-image-single,
          .gift-image-swiper {
            width: 70px;
            height: 70px;
          }
        }

        .gift-info {
          .goods-basic-info {
            .price-info {
              .current-price {
                .price-amount {
                  font-size: 20px;
                }
              }
            }
          }

          .goods-tags {
            gap: 4px;
          }

          .promotion-info {
            padding: 10px;
          }
        }
      }

      .goods-instructions {
        .instruction-section {
          .instruction-list {
            .instruction-item {
              font-size: 11px;
            }
          }
        }
      }
    }

    .gift-card-footer {
      padding: 0 16px 16px;

      .footer-actions {
        gap: 6px;
      }
    }
  }
}

// 小屏幕优化
@media (max-width: 480px) {
  .gift-card {
    .gift-card-content {
      flex-direction: column;

      .gift-image-container {
        margin-right: 0;
        margin-bottom: 12px;
        align-self: center;
      }
    }

    .goods-instructions {
      .instruction-section {
        .store-list {
          .store-tag {
            font-size: 10px;
          }
        }
      }
    }
  }
}