/* 订单详情页 */
#order-detail-page {
  .content-box {
    background: #f5f7fa;
    min-height: calc(100vh - 2rem);
    padding-top: .2rem;
  }

  // 订单头部卡片
  .order-header-card {
    background: #fff;
    border-radius: .12rem;
    padding: .24rem;
    margin-bottom: .2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.04);

    .header-left {
      .status-tag {
        display: inline-block;
        background: linear-gradient(to right, #00d4aa, #00e6b8);
        color: #fff;
        padding: .04rem .12rem;
        border-radius: .16rem;
        font-size: .12rem;
        margin-bottom: .12rem;
      }

      .order-id {
        font-size: .28rem;
        font-weight: bold;
        color: #00d4aa;
        margin: 0 0 .08rem 0;
      }

      .create-time {
        font-size: .13rem;
        color: #999;
        margin: 0;

        i {
          margin-right: .04rem;
          color: #00d4aa;
        }
      }
    }

    .header-right {
      display: flex;
      gap: .12rem;

      .badge-item {
        padding: .08rem .16rem;
        border-radius: .2rem;
        font-size: .13rem;
        font-weight: 500;
      }

      .status-badge {
        background: #fff3e0;
        color: #ff9800;
        border: .01rem solid #ffe0b2;
      }

      .region-badge {
        background: #e3f2fd;
        color: #2196f3;
        border: .01rem solid #bbdefb;
      }
    }
  }

  // 主要内容区
  .main-content {
    margin-bottom: .2rem;

    // 第一行（基础信息 + 财务指标）
    .top-row {
      margin-bottom: .2rem;
    }
  }

  // 信息卡片
  .info-card {
    background: #fff;
    border-radius: .12rem;
    margin-bottom: .2rem;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.04);
    overflow: hidden;

    .card-title {
      padding: .16rem .2rem;
      border-bottom: .01rem solid #f0f0f0;
      font-size: .16rem;
      font-weight: 600;
      color: #333;
      display: flex;
      align-items: center;

      i {
        margin-right: .08rem;
        color: #00d4aa;
        font-size: .18rem;
      }

      .product-count {
        margin-left: auto;
        font-size: .12rem;
        color: #999;
        font-weight: normal;
      }
    }

    .card-body {
      padding: .2rem;
    }
  }

  // 基础信息
  .base-info {
    flex: 1;
    min-height: 2.8rem;
    display: flex;
    flex-direction: column;

    .card-body {
      flex: 1;
      display: flex;
      flex-direction: column;
    }

    .info-item {
      margin-bottom: .16rem;

      label {
        display: block;
        font-size: .12rem;
        color: #999;
        margin-bottom: .06rem;
      }

      p {
        font-size: .15rem;
        color: #333;
        margin: 0;
        font-weight: 600;

        i {
          margin-right: .04rem;
          color: #00d4aa;
        }
      }

      .sub-text {
        font-size: .11rem;
        color: #00d4aa;
        margin-top: .04rem;
        display: block;
      }
    }

    .address-item {
      margin-top: auto;
      padding: .12rem;
      background: #f9f9f9;
      border-radius: .08rem;

      label {
        display: flex;
        align-items: center;
        font-size: .13rem;
        color: #666;
        margin-bottom: .08rem;
        font-weight: 500;

        i {
          margin-right: .04rem;
          color: #00d4aa;
          font-size: .14rem;
        }
      }

      p {
        font-size: .14rem;
        color: #333;
        margin: 0;
        line-height: 1.6;
        padding-left: .2rem;
      }
    }
  }

  // 产品清单区域（单独一行，占满整行）
  .product-section-full {
    background: #fff;
    border-radius: .12rem;
    padding: .2rem;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.04);

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: .16rem;

      .section-title {
        font-size: .18rem;
        font-weight: 600;
        color: #333;
        display: flex;
        align-items: center;

        i {
          margin-right: .08rem;
          color: #00d4aa;
          font-size: .2rem;
        }
      }

      .product-count {
        font-size: .13rem;
        color: #999;
      }
    }
  }
  .product-list {
    .product-card {
      background: #f9f9f9;
      border-radius: .12rem;
      padding: .16rem;
      margin-bottom: .16rem;
      display: flex;
      transition: all 0.3s ease;

      &:hover {
        box-shadow: 0 .04rem .12rem rgba(0, 0, 0, 0.08);
        transform: translateY(-.02rem);
      }

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

      .product-image-wrapper {
        width: 1.4rem;
        height: 1.4rem;
        margin-right: .16rem;
        flex-shrink: 0;
        border-radius: .08rem;
        overflow: hidden;

        img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
      }

      .product-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .product-top {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          margin-bottom: .12rem;

          .product-name-section {
            flex: 1;
            margin-right: .16rem;

            .product-name {
              font-size: .16rem;
              font-weight: 600;
              color: #333;
              margin: 0 0 .06rem 0;
            }

            .sku-code {
              font-size: .11rem;
              color: #999;
              background: #f5f5f5;
              padding: .02rem .06rem;
              border-radius: .02rem;
              margin-right: .06rem;
            }
          }

          .product-price-section {
            text-align: right;

            .price-label {
              display: block;
              font-size: .11rem;
              color: #999;
              margin-bottom: .02rem;
            }

            .price-value {
              font-size: .2rem;
              font-weight: bold;
              color: #00d4aa;
            }
          }
        }

        .product-bottom {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: .1rem;

          .product-tags-row {
            .tag {
              display: inline-block;
              background: #e8f5e9;
              color: #4caf50;
              padding: .03rem .08rem;
              border-radius: .12rem;
              font-size: .11rem;
              margin-right: .08rem;
            }
          }

          .product-quantity {
            text-align: right;

            .qty-label {
              display: block;
              font-size: .11rem;
              color: #999;
              margin-bottom: .02rem;
            }

            .qty-value {
              font-size: .18rem;
              font-weight: bold;
              color: #00d4aa;

              .unit {
                font-size: .12rem;
                color: #999;
                font-weight: normal;
              }
            }
          }
        }
      }
    }
  }

  // 财务指标卡片
  .financial-card {
    background: linear-gradient(135deg, #00d4aa 0%, #00e6b8 100%);
    border-radius: .12rem;
    box-shadow: 0 .04rem .16rem rgba(0, 212, 170, 0.3);
    min-height: 2.8rem;
    display: flex;
    flex-direction: column;

    .card-title {
      padding: .16rem .2rem;
      color: #fff;
      font-size: .16rem;
      font-weight: 600;
      display: flex;
      align-items: center;

      i {
        margin-right: .08rem;
        font-size: .18rem;
      }
    }

    .card-body {
      padding: .16rem .2rem .2rem;
      flex: 1;
      display: flex;
      flex-direction: column;

      .financial-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .12rem 0;
        border-bottom: .01rem solid rgba(255, 255, 255, 0.2);
        color: #fff;

        &:last-of-type {
          border-bottom: none;
        }

        .label {
          font-size: .14rem;
          opacity: 0.9;
        }

        .value {
          font-size: .16rem;
          font-weight: 600;

          &.green-text {
            color: #a5d6a7;
          }

          &.orange-text {
            color: #ffcc80;
          }
        }
      }

      .divider {
        height: .01rem;
        background: rgba(255, 255, 255, 0.3);
        margin: .16rem 0;
      }

      .total-amount {
        margin-top: auto;
        text-align: left;
        padding-top: .08rem;

        .amount-label {
          font-size: .13rem;
          color: rgba(255, 255, 255, 0.8);
          margin-bottom: .08rem;
        }

        .amount-value {
          .currency {
            font-size: .2rem;
            color: #fff;
            font-weight: 600;
            margin-right: .04rem;
          }

          .number {
            font-size: .36rem;
            font-weight: bold;
            color: #fff;
          }

          .unit {
            font-size: .14rem;
            color: rgba(255, 255, 255, 0.8);
            margin-left: .04rem;
          }
        }
      }
    }
  }

  // 底部操作栏
  .bottom-actions {
    background: #fff;
    border-radius: .12rem;
    padding: .32rem .24rem;
    margin-top: .2rem;
    box-shadow: 0 .02rem .08rem rgba(0, 0, 0, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: center;

    .action-items {
      display: flex;
      gap: .6rem;

      .action-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        min-width: 1.8rem;

        .icon-circle {
          width: .56rem;
          height: .56rem;
          border-radius: 50%;
          background: rgba(0, 212, 170, 0.1);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-bottom: .12rem;

          i {
            font-size: .24rem;
            color: #00d4aa;
          }
        }

        .action-text {
          .title {
            font-size: .14rem;
            font-weight: 600;
            color: #333;
            margin-bottom: .06rem;
          }

          .desc {
            font-size: .11rem;
            color: #999;
            line-height: 1.5;
          }
        }
      }
    }

    .btn-order {
      background: linear-gradient(to right, #00d4aa, #00e6b8);
      color: #fff;
      border: none;
      padding: .14rem .32rem;
      border-radius: .24rem;
      font-size: .16rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.3s ease;
      box-shadow: 0 .02rem .08rem rgba(0, 212, 170, 0.3);
      white-space: nowrap;

      i {
        margin-right: .08rem;
      }

      &:hover {
        background: linear-gradient(to right, #00c49a, #00d6a8);
        box-shadow: 0 .03rem .12rem rgba(0, 212, 170, 0.4);
        transform: translateY(-.01rem);
      }

      &:active {
        transform: translateY(0);
      }
    }
  }
}