/* ------------------------------------------------------------------
 * Rewaa cart / checkout / thank-you.
 *
 * The store runs the CLASSIC (shortcode) checkout, so everything here is
 * WooCommerce core markup. The parent theme already styles some of it
 * (assets/global/css/shop-inner-page.css targets .woocommerce-checkout and
 * .woocommerce-checkout-review-order-table), so these rules are additive and
 * stay at a specificity the parent can still be read against -- nothing here
 * reaches for !important unless a core inline style forces it.
 *
 * Colours and fonts are the Elementor kit's globals, so the checkout matches
 * the rest of the site rather than approximating it:
 *
 *   Primary   #1A365C     Secondary #54595F     Text #7A7A7A
 *   Accent    #61CE70     Headings  Cairo       Body Tajawal
 *
 * DIRECTION: every inline offset is a logical property (inline-start/end,
 * margin-inline, border-inline) so the whole sheet flips with `dir="rtl"`
 * without a second RTL stylesheet. Do not add `left:` / `right:` here.
 * ------------------------------------------------------------------ */

:root {
	--rewaa-primary: #1a365c;
	--rewaa-primary-soft: #eef2f8;
	--rewaa-secondary: #54595f;
	--rewaa-text: #7a7a7a;
	--rewaa-ink: #1c1c1c;
	--rewaa-accent: #61ce70;
	--rewaa-line: #e3e7ee;
	--rewaa-surface: #ffffff;
	--rewaa-canvas: #f7f9fc;
	--rewaa-radius: 10px;
	--rewaa-gap: 24px;
	--rewaa-font-head: "Cairo", "Tajawal", system-ui, sans-serif;
	--rewaa-font-body: "Tajawal", "Cairo", system-ui, sans-serif;
}

/* ------------------------------------------------------------------
 * 1. Shared shell
 * ------------------------------------------------------------------ */

.woocommerce-checkout .woocommerce,
.woocommerce-cart .woocommerce {
	font-family: var(--rewaa-font-body);
	color: var(--rewaa-ink);
}

.woocommerce-checkout h3,
.woocommerce-cart h2,
.woocommerce-checkout #order_review_heading {
	font-family: var(--rewaa-font-head);
	font-weight: 700;
	color: var(--rewaa-primary);
	font-size: 20px;
	line-height: 1.4;
	margin-block-end: 16px;
}

/* ------------------------------------------------------------------
 * 2. Checkout layout -- form beside a sticky summary on desktop.
 *
 *    WooCommerce emits #customer_details and #order_review as siblings
 *    inside form.checkout, so one grid on the form does the whole job and
 *    no template override is needed.
 * ------------------------------------------------------------------ */

@media (min-width: 993px) {
	.woocommerce-checkout form.checkout.woocommerce-checkout {
		display: grid;
		grid-template-columns: minmax(0, 1.45fr) minmax(320px, 0.85fr);
		grid-template-areas:
			"details review-heading"
			"details review";
		column-gap: 40px;
		align-items: start;
	}

	.woocommerce-checkout form.checkout #customer_details {
		grid-area: details;
	}

	.woocommerce-checkout form.checkout #order_review_heading {
		grid-area: review-heading;
	}

	.woocommerce-checkout form.checkout #order_review {
		grid-area: review;
		position: sticky;
		/* Clears the theme's sticky header. */
		top: 110px;
	}

	/* The theme's own two-column split inside #customer_details fights the
	 * grid above at these widths; one column reads better beside a summary. */
	.woocommerce-checkout .col2-set .col-1,
	.woocommerce-checkout .col2-set .col-2 {
		float: none;
		width: 100%;
	}
}

/* ------------------------------------------------------------------
 * 3. Panels
 * ------------------------------------------------------------------ */

.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2,
.woocommerce-checkout #order_review,
.woocommerce-cart .cart_totals {
	background: var(--rewaa-surface);
	border: 1px solid var(--rewaa-line);
	border-radius: var(--rewaa-radius);
	padding: 24px;
	margin-block-end: var(--rewaa-gap);
}

.woocommerce-checkout #order_review {
	background: var(--rewaa-canvas);
}

/* ------------------------------------------------------------------
 * 4. Form fields
 * ------------------------------------------------------------------ */

.woocommerce form .form-row {
	margin-block-end: 18px;
	padding: 0;
}

.woocommerce form .form-row label {
	display: block;
	font-family: var(--rewaa-font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--rewaa-secondary);
	margin-block-end: 6px;
}

.woocommerce form .form-row .required {
	color: #c0392b;
	text-decoration: none;
	margin-inline-start: 3px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
	width: 100%;
	min-height: 48px;
	padding: 12px 14px;
	font-family: var(--rewaa-font-body);
	font-size: 15px;
	color: var(--rewaa-ink);
	background: var(--rewaa-surface);
	border: 1px solid var(--rewaa-line);
	border-radius: 8px;
	box-shadow: none;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.woocommerce form .form-row textarea {
	min-height: 110px;
	line-height: 1.6;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
	outline: none;
	border-color: var(--rewaa-primary);
	box-shadow: 0 0 0 3px rgba(26, 54, 92, 0.12);
}

/* Validation states. WooCommerce toggles these classes from wc-checkout.js,
 * so they are the only signal a shopper gets that a field is wrong. */
.woocommerce form .form-row.woocommerce-invalid input.input-text,
.woocommerce form .form-row.woocommerce-invalid select {
	border-color: #c0392b;
}

.woocommerce form .form-row.woocommerce-validated input.input-text {
	border-color: var(--rewaa-accent);
}

/* select2 (the country/state dropdown) ships its own metrics; align it with
 * the inputs above so the column does not look ragged. */
.woocommerce .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 1.4;
	color: var(--rewaa-ink);
}

.woocommerce .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
	inset-inline-end: 10px;
	inset-inline-start: auto;
}

/* ------------------------------------------------------------------
 * 5. Order summary table
 * ------------------------------------------------------------------ */

.woocommerce-checkout-review-order-table,
.woocommerce-cart .shop_table {
	width: 100%;
	border: 0;
	border-collapse: collapse;
	font-size: 15px;
}

.woocommerce-checkout-review-order-table th,
.woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	border: 0;
	border-block-end: 1px solid var(--rewaa-line);
	text-align: start;
	vertical-align: top;
}

.woocommerce-checkout-review-order-table thead th {
	font-family: var(--rewaa-font-head);
	font-weight: 700;
	color: var(--rewaa-primary);
	text-transform: none;
}

.woocommerce-checkout-review-order-table td.product-total,
.woocommerce-checkout-review-order-table th.product-total,
.woocommerce-checkout-review-order-table tfoot td {
	text-align: end;
	white-space: nowrap;
}

.woocommerce-checkout-review-order-table .product-name {
	color: var(--rewaa-ink);
	line-height: 1.6;
}

/* The variation the shopper actually chose -- since the frame-axis collapse
 * this is one composite colour term, and it is the only thing distinguishing
 * two otherwise identical black frames. It must stay readable. */
.woocommerce-checkout-review-order-table .product-name .variation,
.woocommerce-cart .shop_table .product-name .variation {
	font-size: 13px;
	color: var(--rewaa-text);
	margin-block-start: 4px;
}

.woocommerce-checkout-review-order-table .product-name .variation dt,
.woocommerce-checkout-review-order-table .product-name .variation dd {
	display: inline;
	margin: 0;
	padding: 0;
	float: none;
}

.woocommerce-checkout-review-order-table .product-name .variation dd {
	margin-inline-end: 8px;
}

.woocommerce-checkout-review-order-table tfoot tr.order-total td,
.woocommerce-checkout-review-order-table tfoot tr.order-total th {
	font-family: var(--rewaa-font-head);
	font-size: 18px;
	font-weight: 700;
	color: var(--rewaa-primary);
	border-block-end: 0;
	padding-block-start: 16px;
}

/* ------------------------------------------------------------------
 * 6. Payment box -- cash on delivery is the only method, so it should read
 *    as a confirmed fact rather than as a choice the shopper has to make.
 * ------------------------------------------------------------------ */

.woocommerce-checkout #payment {
	background: transparent;
	border-radius: 0;
	margin-block-start: 8px;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	margin: 0 0 20px;
	border: 0;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li {
	background: var(--rewaa-surface);
	border: 1px solid var(--rewaa-line);
	border-radius: 8px;
	padding: 14px 16px;
	margin-block-end: 10px;
	list-style: none;
}

.woocommerce-checkout #payment ul.payment_methods li label {
	font-family: var(--rewaa-font-head);
	font-weight: 600;
	color: var(--rewaa-ink);
	display: inline;
	margin-inline-start: 6px;
}

.woocommerce-checkout #payment div.payment_box {
	background: var(--rewaa-primary-soft);
	color: var(--rewaa-secondary);
	border-radius: 8px;
	font-size: 14px;
	line-height: 1.7;
	margin-block-start: 12px;
	padding: 12px 14px;
}

/* Core draws a CSS triangle with a physical `left`; it points at the wrong
 * edge in RTL, and it is decoration either way. */
.woocommerce-checkout #payment div.payment_box::before {
	display: none;
}

/* ------------------------------------------------------------------
 * 7. Buttons
 * ------------------------------------------------------------------ */

.woocommerce #payment #place_order,
.woocommerce .wc-proceed-to-checkout a.checkout-button,
.woocommerce-cart .shop_table button[name="update_cart"] {
	font-family: var(--rewaa-font-head);
	font-weight: 700;
	font-size: 16px;
	width: 100%;
	padding: 15px 24px;
	border: 0;
	border-radius: 8px;
	background: var(--rewaa-primary);
	color: #fff;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.05s ease;
}

.woocommerce #payment #place_order:hover,
.woocommerce .wc-proceed-to-checkout a.checkout-button:hover {
	background: #14294a;
	color: #fff;
}

.woocommerce #payment #place_order:active {
	transform: translateY(1px);
}

.woocommerce #payment #place_order:disabled,
.woocommerce #payment #place_order[disabled] {
	background: var(--rewaa-text);
	cursor: not-allowed;
}

/* ------------------------------------------------------------------
 * 8. Notices, coupon and login prompts
 * ------------------------------------------------------------------ */

.woocommerce-checkout .woocommerce-info,
.woocommerce-checkout .woocommerce-message,
.woocommerce-cart .woocommerce-message,
.woocommerce-cart .woocommerce-info {
	background: var(--rewaa-primary-soft);
	border-block-start: 3px solid var(--rewaa-primary);
	border-radius: 8px;
	color: var(--rewaa-secondary);
	font-size: 15px;
	padding: 14px 18px;
	margin-block-end: 20px;
}

.woocommerce .woocommerce-error {
	background: #fdecea;
	border-block-start: 3px solid #c0392b;
	border-radius: 8px;
	color: #7d241b;
	padding: 14px 18px;
}

/* Core positions the notice icon with a physical `left`. */
.woocommerce .woocommerce-info::before,
.woocommerce .woocommerce-message::before,
.woocommerce .woocommerce-error::before {
	inset-inline-start: 1.2em;
	inset-inline-end: auto;
}

.woocommerce .woocommerce-info,
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-error {
	padding-inline-start: 3.2em;
}

.woocommerce form.checkout_coupon {
	border: 1px dashed var(--rewaa-line);
	border-radius: var(--rewaa-radius);
	padding: 20px;
	margin-block-end: 24px;
}

/* ------------------------------------------------------------------
 * 9. Thank-you page
 * ------------------------------------------------------------------ */

.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: var(--rewaa-font-head);
	font-size: 22px;
	font-weight: 700;
	color: var(--rewaa-primary);
	background: var(--rewaa-primary-soft);
	border-radius: var(--rewaa-radius);
	padding: 22px 24px;
	margin-block-end: 24px;
}

.woocommerce-order ul.woocommerce-order-overview {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
	border: 0;
}

.woocommerce-order ul.woocommerce-order-overview li {
	flex: 1 1 160px;
	background: var(--rewaa-surface);
	border: 1px solid var(--rewaa-line);
	border-radius: 8px;
	padding: 14px 16px;
	margin: 0;
	font-size: 13px;
	color: var(--rewaa-text);
	text-transform: none;
	border-inline-end: 1px solid var(--rewaa-line);
}

.woocommerce-order ul.woocommerce-order-overview li strong {
	display: block;
	font-family: var(--rewaa-font-head);
	font-size: 16px;
	color: var(--rewaa-ink);
	margin-block-start: 4px;
}

/* ------------------------------------------------------------------
 * 10. Small screens
 * ------------------------------------------------------------------ */

@media (max-width: 992px) {
	.woocommerce-checkout #customer_details .col-1,
	.woocommerce-checkout #customer_details .col-2,
	.woocommerce-checkout #order_review,
	.woocommerce-cart .cart_totals {
		padding: 18px;
	}

	.woocommerce-checkout h3,
	.woocommerce-checkout #order_review_heading {
		font-size: 18px;
	}

	/* A 16px minimum stops iOS zooming the viewport on focus, which on a
	 * checkout form reads as the page jumping away from the shopper. */
	.woocommerce form .form-row input.input-text,
	.woocommerce form .form-row textarea,
	.woocommerce form .form-row select {
		font-size: 16px;
	}
}