/**
 * Cart & Checkout Styles — رداء Premium
 */

.cart-page .site-main,
.checkout-page .site-main {
	padding-block: var(--space-8);
}

/* === Page Title === */

.cart-page .page-title,
.checkout-page .page-title {
	font-family: var(--font-primary);
	font-size: var(--text-3xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
	margin-block-end: var(--space-8);
	text-align: center;
}

/* === Cart Table === */

.shop_table {
	width: 100%;
	border-collapse: collapse;
}

.shop_table th {
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	color: var(--color-gray-500);
	padding: var(--space-4);
	border-block-end: 2px solid var(--color-gray-200);
	text-align: start;
}

.shop_table td {
	padding: var(--space-4);
	border-block-end: 1px solid var(--color-gray-100);
	vertical-align: middle;
}

.shop_table .product-thumbnail img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

.shop_table .product-name a {
	font-weight: var(--font-medium);
	color: var(--color-text);
}

.shop_table .product-name a:hover {
	color: var(--color-accent);
}

.shop_table .product-name .variation {
	display: block;
	font-size: var(--text-sm);
	color: var(--color-text-muted);
	margin-block-start: var(--space-1);
}

.shop_table .product-quantity .qty {
	width: 64px;
	text-align: center;
	padding: var(--space-2);
	border-radius: var(--radius-lg);
	font-weight: var(--font-bold);
}

.shop_table .remove-item {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	font-size: var(--text-lg);
	color: var(--color-text-muted);
	background: none;
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-full);
	cursor: pointer;
	transition: all var(--transition-fast);
}

.shop_table .remove-item:hover {
	background: var(--color-error);
	border-color: var(--color-error);
	color: var(--color-white);
}

/* === Cart Totals === */

.cart_totals {
	max-width: 420px;
	margin-inline-start: auto;
	padding: var(--space-8);
	background: var(--color-gray-50);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-gray-100);
}

.cart_totals h2 {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
	margin-block-end: var(--space-6);
}

.cart_totals .shop_table {
	margin-block-end: var(--space-6);
}

.cart_totals .shop_table th {
	font-size: var(--text-sm);
	text-transform: none;
	letter-spacing: normal;
	font-weight: var(--font-medium);
}

.cart_totals .order-total .amount {
	font-size: var(--text-xl);
	font-weight: var(--font-extrabold);
	color: var(--color-accent);
}

.cart_totals .checkout-button {
	width: 100%;
	padding: var(--space-4) !important;
	font-size: var(--text-base) !important;
	border-radius: var(--radius-xl) !important;
}

/* === Empty Cart === */

.cart-empty {
	text-align: center;
	padding: var(--space-16) var(--space-8);
	background: var(--color-gray-50);
	border-radius: var(--radius-2xl);
}

.cart-empty::before {
	content: '';
	display: block;
	width: 80px;
	height: 80px;
	margin-inline: auto;
	margin-block-end: var(--space-6);
	background-color: var(--color-gray-400);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6V4c0-2.21-1.79-4-4-4S8 1.79 8 4v2H3v13c0 2.76 2.24 5 5 5h8c2.76 0 5-2.24 5-5V6h-5zm-4-4c1.1 0 2 .9 2 2v2h-4V4c0-1.1.9-2 2-2zM5 8h14v11c0 1.65-1.35 3-3 3H8c-1.65 0-3-1.35-3-3V8z'/%3E%3C/svg%3E") no-repeat center;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M16 6V4c0-2.21-1.79-4-4-4S8 1.79 8 4v2H3v13c0 2.76 2.24 5 5 5h8c2.76 0 5-2.24 5-5V6h-5zm-4-4c1.1 0 2 .9 2 2v2h-4V4c0-1.1.9-2 2-2zM5 8h14v11c0 1.65-1.35 3-3 3H8c-1.65 0-3-1.35-3-3V8z'/%3E%3C/svg%3E") no-repeat center;
}

.cart-empty p {
	font-size: var(--text-lg);
	color: var(--color-text-muted);
}

.return-to-shop {
	text-align: center;
	margin-block-start: var(--space-6);
}

/* === Checkout Layout === */

.checkout-layout {
	display: grid;
	grid-template-columns: 1fr 420px;
	gap: var(--space-10);
	align-items: start;
}

/* === Billing Fields === */

.billing-fields h3 {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
	margin-block-end: var(--space-6);
}

.form-row {
	margin-block-end: var(--space-5);
}

.form-row label {
	display: block;
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	margin-block-end: var(--space-2);
	color: var(--color-gray-700);
}

.form-row .required {
	color: var(--color-accent);
}

.form-row-wide {
	width: 100%;
}

.form-row-first,
.form-row-last {
	width: calc(50% - var(--space-3));
	display: inline-block;
}

.form-row-first { float: right; }
.form-row-last { float: left; }

/* === Order Review === */

.checkout-review-order {
	padding: var(--space-8);
	background: var(--color-gray-50);
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-gray-100);
	position: sticky;
	inset-block-start: calc(70px + var(--space-4));
}

.checkout-review-order h3 {
	font-size: var(--text-xl);
	font-weight: var(--font-bold);
	color: var(--color-primary);
	margin-block-end: var(--space-6);
}

.checkout-review-table {
	width: 100%;
	margin-block-end: var(--space-6);
}

.checkout-review-table th,
.checkout-review-table td {
	padding: var(--space-3) var(--space-2);
	border-block-end: 1px solid var(--color-gray-200);
	font-size: var(--text-sm);
}

.checkout-review-table thead th {
	font-weight: var(--font-bold);
	color: var(--color-gray-500);
	font-size: var(--text-xs);
}

.checkout-review-table small {
	display: block;
	color: var(--color-text-muted);
	font-size: var(--text-xs);
}

.checkout-review-table tfoot .order-total td {
	font-size: var(--text-xl);
	font-weight: var(--font-extrabold);
	color: var(--color-accent);
}

/* === Payment Methods === */

.payment-methods-box {
	margin-block-start: var(--space-6);
	padding: var(--space-5);
	background: var(--color-white);
	border: 1px solid var(--color-gray-200);
	border-radius: var(--radius-lg);
}

.payment-methods-box h4 {
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	margin-block-end: var(--space-3);
	color: var(--color-primary);
}

.payment-method-item {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-2) 0;
	font-size: var(--text-sm);
	color: var(--color-text);
	border-block-end: 1px solid var(--color-gray-100);
}

.payment-method-item:last-child {
	border-block-end: none;
}

/* === WhatsApp Order Button === */

#place-order-whatsapp {
	border-radius: var(--radius-xl) !important;
	font-size: var(--text-base) !important;
	font-weight: var(--font-bold) !important;
}

/* === Responsive === */

@media (max-width: 768px) {
	.shop_table thead { display: none; }

	.shop_table tr {
		display: grid;
		grid-template-columns: auto 1fr;
		gap: var(--space-2);
		padding: var(--space-4);
		border-block-end: 1px solid var(--color-gray-200);
	}

	.shop_table .product-thumbnail { grid-row: 1 / 3; }
	.cart_totals { max-width: 100%; margin-inline-start: 0; }

	.checkout-layout { grid-template-columns: 1fr; }

	.form-row-first,
	.form-row-last {
		width: 100%;
		float: none;
	}

	.checkout-review-order { position: static; }
}