/* ===========================
   ORDER DETAILS STYLES
   =========================== */

/* Main Container */
.order-details-wrapper {
  width: 100%;
  max-width: 100%;
  padding: 0 var(--Space-5, 20px);
}

.order-details-content {
  width: 100%;
  max-width: 100%;
}

/* Order ID Header */
.order-details-order-id-wrapper {
}

.order-details-order-id {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Title-Page-Size-Small, 28px);
}

/* ===========================
   PRODUCT ITEMS SECTION
   =========================== */

.order-details-products {
  width: 100%;
}

.order-details-product-item {
}

.order-details-product-item.last-child {
}

/* Product Image Styling */
.order-details-product-image img {
}

.order-details-product-image {
}

.order-details-product-metadata {
}

/* Product Name */
.order-details-product-metadata span:first-child {
  color: #231f20;
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-style: normal;
  font-weight: var(--Body-Font-Weight-Strong, 600);
  line-height: 140%; /* 28px */
  letter-spacing: 0.2px;
}

/* Product Details */
.order-product-color,
.order-product-material,
.order-product-size {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Medium, 18px);
}

/* Product Price */
.order-details-product-price span {
  text-align: right;
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-style: normal;
  font-weight: var(--Body-Font-Weight-Regular, 400);
  line-height: 140%; /* 28px */
  letter-spacing: 0.2px;
}

/* Product Quantity */
.order-details-product-quantity-wrapper {
}

.order-details-product-quantity {
  color: var(--On-background-Brand-Default, #231f20);
  text-align: center;
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Heading-Size-Medium, 20px);
  font-style: normal;
  font-weight: var(--Heading-Font-Weight, 700);
  line-height: 140%; /* 33.6px */
}

/* Product Total Amount */
.order-details-product-total-amount-money span {
  text-align: right;
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Large, 20px);
  font-style: normal;
  font-weight: var(--Body-Font-Weight-Strong, 600);
  line-height: 140%; /* 28px */
  letter-spacing: 0.2px;
  color: var(--Background-Brand-Primary, #520f09);
}

/* ===========================
   ORDER STATUS & DATES
   =========================== */

.order-details-status-wrapper b,
.order-details-created-at b,
.order-details-approved-at b {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Medium, 18px);
}

.status-text,
.date-time-string {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Body-Size-Medium, 18px);
}

.order-details-status-wrapper,
.order-details-created-at,
.order-details-approved-at {
  margin-bottom: var(--Space-2-5, 10px);
}

/* Status Colors */
.status-text[status="approved"] {
}

.status-text[status="pending"] {
}

.status-text[status="cancelled"] {
}

/* ===========================
   ORDER SUMMARY SECTION
   =========================== */

.order-details-summary {
  width: 100%;
  max-width: 100%;
  margin-top: var(--Space-4, 16px);
}

.order-details-delivery-fee,
.order-details-total-money {
  margin-bottom: var(--Space-2, 8px);
}

.order-details-delivery-fee span,
.order-details-total-money span {
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-size: var(--Heading-Size-Medium, 24px);
  font-weight: 700;
}

/* Print Button */
.order-details-print-button {
  display: flex;
  padding: var(--spacers-3, 12px) var(--space-spacer-1-rem, 16px);
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex: 1 0 0;
  background: var(--Background-Brand-Primary, #520f09);
  color: var(--On-background-Brand-Primary, #fefdf9);
  text-align: center;
  font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  font-style: normal;
  font-weight: var(--Body-Font-Weight-Strong, 600);
  line-height: 140%; /* 25.2px */
  letter-spacing: -0.72px;
  text-transform: uppercase;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: all 0.2s ease;
}

.order-details-print-button:hover {
  background: var(--Background-Brand-Primary-Hover, #63160f);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(82, 15, 9, 0.25);
}

.order-details-print-button:active {
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(82, 15, 9, 0.3);
}

.order-details-print-button:focus {
  outline: 2px solid var(--Background-Brand-Primary, #520f09);
  outline-offset: 2px;
}

/* ===========================
   PRINT STYLES
   =========================== */

#orderContent {
  display: none;
}

@media print {
  #orderContent {
    font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  }

  #orderContent h4 {
    font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  }

  #orderContent table {
  }

  #orderContent table td {
    font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  }

  #orderContent table thead td {
    font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  }

  #orderContent div {
    font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  }

  #orderContent b {
    font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  }

  #orderContent a {
    font-family: var(--Type-Font-Serif, "Plus Jakarta Sans");
  }
}

/* ===========================
   RESPONSIVE DESIGN - TABLET
   =========================== */

@media (min-width: 576px) and (max-width: 991px) {
  .order-details-order-id {
    font-size: var(--Title-Page-Size-Medium, 32px);
  }

  .order-details-product-quantity {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .order-details-product-metadata span:first-child {
    font-size: var(--Body-Size-Large, 18px);
  }

  .order-product-color,
  .order-product-material,
  .order-product-size {
    font-size: var(--Body-Size-Medium, 16px);
  }

  .order-details-product-price span,
  .order-details-product-total-amount-money span {
    font-size: var(--Body-Size-Medium, 18px);
  }

  .order-details-status-wrapper b,
  .order-details-created-at b,
  .order-details-approved-at b {
    font-size: var(--Body-Size-Small, 16px);
  }

  .status-text,
  .date-time-string {
    font-size: var(--Body-Size-Small, 16px);
  }

  .order-details-delivery-fee span,
  .order-details-total-money span {
    font-size: var(--Heading-Size-Medium, 20px);
    font-weight: 700;
  }
}

/* ===========================
   RESPONSIVE DESIGN - MOBILE
   =========================== */

@media (max-width: 575px) {
  .order-details-order-id {
    font-size: var(--Title-Page-Size-Small, 24px);
  }

  .order-details-product-metadata span:first-child {
    font-size: var(--Body-Size-Large, 18px);
  }

  .order-product-color,
  .order-product-material,
  .order-product-size {
    font-size: var(--Body-Size-Small, 16px);
  }

  .order-details-product-price span,
  .order-details-product-total-amount-money span {
    font-size: var(--Body-Size-Medium, 18px);
    text-align: left;
  }

  .order-details-product-quantity {
    font-size: var(--Body-Size-Small, 16px);
  }

  .order-details-product-quantity-wrapper {
    justify-content: flex-start;
  }

  .order-details-product-quantity {
    text-align: left;
  }

  .order-details-status-wrapper b,
  .order-details-created-at b,
  .order-details-approved-at b {
    font-size: var(--Body-Size-Small, 16px);
  }

  .status-text,
  .date-time-string {
    font-size: var(--Body-Size-Small, 16px);
  }

  .order-details-delivery-fee span,
  .order-details-total-money span {
    font-size: var(--Body-Size-Medium, 18px);
    font-weight: 700;
  }
}