/* WOALY Order Details Styles */
.woaly-order-details {
  width: 100%;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Hide default order summary paragraph */
.woocommerce-MyAccount-content > p:first-of-type {
	display: none;
}

/* Header */
.woaly-order-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.order-header-content {
	display: flex;
  justify-content: space-between;
	align-items: center;
	gap: 16px;
}

.back-button {
  width: 44;
  height: 44;
  gap: 10px;
  opacity: 1;
  border-radius: 30px;
  padding: 12px;
}

.back-arrow {
  width: 20px;
  height: 20px;
}

.back-button:hover {
	background: #e5e7eb;
}

/* Order Status Styling - Uses styles from orders-list.css */
.order-details-title {
  font-family: Rethink Sans;
  font-weight: 600;
  font-size: 24px;
  line-height: 17px;
	color: #3A4151;
	margin: 0;
}

/* Product List Header */
.woaly-products-list-header {
  display: flex;
  align-items: center;
  font-family: Rethink Sans;
  font-weight: 600;
  font-size: 14px;
  line-height: 26px;
  color: #888888;
  margin: 40px 0 0 0;
  gap: 16px;
}

.header-space {
  width: 70px;
  height: 34px;
}

.header-details {
  flex: 1;
}

.header-price {
  flex: 1;
  text-align: end;
}

/* Product List */
.woaly-products-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
	margin: 28px 0 30px 0;
}

.woaly-product-item {
	display: flex;
	align-items: center;
	gap: 16px;
	background: white;
	border-radius: 8px;
}

.product-image {
	display: flex;
	align-items: center;
	justify-content: center;
  position: relative;
	flex-shrink: 0;
	width: 70px;
	height: 70px;
  overflow: visible;
}

.product-image img {
  border-radius: 10px;
  overflow: hidden;
  background: #EAEFF0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
  border-radius: 10px;
	width: 100%;
	height: 100%;
	background: #f3f4f6;
	color: #9ca3af;
	font-size: 24px;
}

.product-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
	flex: 1;
	min-width: 0;
  margin-bottom: 0;
  padding-bottom: 0;
}

.product-brand {
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 14px;
  line-height: 10px;
	color: #5D5D5D;
	text-transform: capitalize;
}

.product-name {
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 16px;
  line-height: 11px;
	color: #3A4151;
}

.product-quantity {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -10px;
  right: -10px;
  width: 30px;
  height: 30px;
  background: #fff;
  border: 1.5px solid #F2F4F8;
  border-radius: 85px;
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 12px;
  line-height: 100%;
  text-align: center;
	color: #242638;
}

.product-note {
	font-size: 14px;
	color: #6b7280;
	font-style: italic;
}

.product-price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: Rethink Sans;
  font-weight: 600;
  font-size: 14px;
  line-height: 26px;
  text-align: right;
	flex-shrink: 0;
	color: #5D5D5D;
}

/* Order Summary */
.woaly-order-summary {
  margin: 0 0 8px 0;
}

.summary-title {
	font-size: 18px;
	font-weight: 600;
	color: #111827;
	margin-bottom: 16px;
}

.summary-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0;
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 14px;
  line-height: 26px;
  color: #5D5D5D;
}

.summary-row:last-child {
	border-bottom: none;
}

.summary-row.cart_subtotal {
  border-top: 1px solid #EBEBEB;
}

.summary-row.shipping {
  border-bottom: 1px solid #EBEBEB;
}

.summary-row.order_total {
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 16px;
  line-height: 26px;
	color: #3A4151;
  padding: 22px 0;
}

.summary-label {
	color: #374151;
}

.summary-value {
  font-family: Rethink Sans;
  font-weight: 600;
  font-size: 14px;
  line-height: 15.43px;
	color: #5D5D5D;
}

.order_total .summary-value {
  font-family: Rethink Sans;
  font-weight: 600;
  font-size: 16px;
  line-height: 15.43px;
  color: #3A4151;
}

.order_total .summary-value small {
  font-size: 16px;
}

.order-note {
	margin-top: 16px;
	padding-top: 16px;
	border-top: 1px solid #e5e7eb;
}

.order-note strong {
	color: #374151;
}

.order-note p {
	margin: 8px 0 0 0;
	color: #6b7280;
	line-height: 1.5;
}

/* Shipping Info */
.woaly-shipping-info {
  padding: 16px 0;
}

.shipping-title {
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 16px;
  line-height: 11px;
	color: #3A4151;
	margin-bottom: 16px;
}

.shipping-address {
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 14px;
	color: #5D5D5D;
}

/* Action Buttons */
.woaly-order-actions {
	margin: 20px 0 0 0;
}

.woaly-action-button {
	display: inline-block;
	background: #242638;
	color: white;
	text-decoration: none;
	padding: 16px 52px;
	border-radius: 100px;
	text-align: center;
	transition: background-color 0.2s;
	margin-right: 12px;
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 14px;
  line-height: 15.43px;
}

.woaly-action-button.cancel {
  background: white;
  border: 1px solid #242638;
  color: #242638;
}

.woaly-action-button:hover {
	background: #1f2937;
	color: white;
}

.order-again {
  margin: 20px 0 0 0;
}

.order-again .button {
  display: inline-block;
  background: #242638;
  color: white;
  text-decoration: none;
  padding: 16px 52px;
  border-radius: 100px;
  text-align: center;
  transition: background-color 0.2s;
  margin-right: 12px;
  font-family: Rethink Sans;
  font-weight: 500;
  font-size: 14px;
  line-height: 15.43px;
}

/* Back to Orders */
.woaly-back-to-orders {
	text-align: start;
	margin-top: 20px;
}

.back-to-orders-btn {
}

.back-to-orders-btn:hover {
	background: #374151;
	color: white;
}

/* Mobile Responsive */
@media (max-width: 768px) {
	.woaly-order-details {
		padding: 0 16px;
	}

	.woaly-product-item {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.product-image {
		width: 100%;
		height: 120px;
		align-self: center;
		max-width: 120px;
	}

	.product-details {
		text-align: center;
		width: 100%;
	}

	.product-price {
		text-align: center;
		width: 100%;
		font-size: 20px;
	}

	.order-details-title {
		font-size: 20px;
	}

	.back-to-orders-btn {
		width: 100%;
		margin-top: 16px;
	}
}