// ===== SASS变量定义 =====
// 颜色系统
$color-white: #fff;
$color-primary: #333;
$color-secondary: #666;
$color-placeholder: pink;

// 字体大小
$font-size-xs: 12px;
$font-size-sm: 14px;
$font-size-base: 16px;

// 字体粗细
$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 600;

// 间距系统
$spacing-xs: 8px;
$spacing-sm: 10px;
$spacing-md: 12px;
$spacing-lg: 15px;
$spacing-xl: 16px;
$spacing-xxl: 20px;

// 圆角
$border-radius-sm: 8px;
$border-radius-md: 10px;

// 尺寸
$icon-size-sm: 24px;
$image-size-md: 65px;

// ===== SASS混合器 =====
@mixin flex-center {
  display: flex;
  align-items: center;
}

@mixin flex-between {
  display: flex;
  justify-content: space-between;
}

@mixin text-style($size, $color: $color-primary, $weight: $font-weight-normal) {
  font-size: $size;
  color: $color;
  font-weight: $weight;
}

@mixin card-container {
  background-color: $color-white;
  border-radius: $border-radius-md;
  padding: $spacing-md $spacing-xl $spacing-xxl;
}

// ===== 主要样式 =====
.goods-info {
  @include card-container;

  // 酒店头部信息
  .hotel-header {
    @include flex-center;
    margin-bottom: $spacing-sm;

    .hotel-icon {
      width: $icon-size-sm;
      height: $icon-size-sm;
      margin-right: $spacing-xs;
    }

    .hotel-name {
      @include text-style($font-size-xs, $color-primary, $font-weight-medium);
    }
  }

  // 商品详情区域
  .goods-detail {
    display: flex;
    margin-bottom: $spacing-xxl;

    .goods-image {
      background-color: $color-placeholder;
      width: $image-size-md;
      height: $image-size-md;
      border-radius: $border-radius-sm;
      margin-right: $spacing-lg;
      flex-shrink: 0;
    }

    .goods-description {
      flex: 1;
      min-width: 0; // 防止flex子项溢出

      .goods-title {
        display: block;
        @include text-style($font-size-sm, $color-primary, $font-weight-medium);
        margin-bottom: $spacing-xs;
        line-height: 1.4;
      }

      .in-date,
      .out-date {
        @include text-style($font-size-xs, $color-secondary);
        margin-top: 8px;
      }
    }
  }

  // 包含服务区域
  .included-services {
    margin-top: $spacing-sm;

    .services-title {
      display: block;
      @include text-style($font-size-xs, $color-primary, $font-weight-medium);
      margin-bottom: $spacing-md;
    }

    .service-item {
      @include flex-between;
      align-items: center;
      margin-bottom: $spacing-sm;

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

      .service-name {
        @include text-style($font-size-sm, $color-primary);
        flex: 1;
      }

      .service-quantity {
        @include text-style($font-size-xs, $color-secondary);
        flex-shrink: 0;
        margin-left: $spacing-xs;
      }
    }
  }
}