/* ---------------------------------------------------------------------------
   Checkout, styled to the Subat design.

   WooCommerce ships its own look — purple buttons, grey panels, system fonts —
   which lands on the page as an obviously third-party screen in the middle of an
   otherwise bespoke site, at the exact moment a visitor is deciding to pay $295.

   Everything below reuses the design tokens already defined in style.css and
   webflow.css (--brand--*, --_layout---spacing--*, --_sizes---border-radius--*),
   so the checkout inherits any future change to the palette instead of pinning
   its own copy of the colours.

   Targets the CLASSIC checkout, which is what the Checkout page renders.
   --------------------------------------------------------------------------- */

.woocommerce-checkout .site-main,
.woocommerce-cart .site-main,
.woocommerce-order-received .site-main {
	background-color: var(--neutral--white);
}

/* --- The card ------------------------------------------------------------ */

.woocommerce-checkout form.checkout,
.woocommerce-cart .woocommerce,
.woocommerce-order-received .woocommerce {
	max-width: var(--_sizes---container--large, 79.375rem);
	margin-inline: auto;
	padding: var(--_layout---spacing--xlarge, 4rem) var(--_layout---spacing--medium, 2rem);
	background-color: var(--brand--snow-white, #f1f0eb);
	border-radius: var(--_sizes---border-radius--large, 1rem);
}

@media screen and (max-width: 767px) {
	.woocommerce-checkout form.checkout,
	.woocommerce-cart .woocommerce,
	.woocommerce-order-received .woocommerce {
		padding: var(--_layout---spacing--medium, 2rem) var(--_layout---spacing--xsmall, 1.25rem);
		border-radius: var(--_sizes---border-radius--medium, .5rem);
	}
}

/* --- Customer details column --------------------------------------------- */

/* WooCommerce wraps billing and "additional information" in a two-column
   col2-set. The second column is now empty — the notes field is disabled in
   inc/woocommerce.php — but the template still prints the div and WooCommerce's
   own stylesheet still floats both halves at 48%, which leaves the billing
   fields squeezed into one half of the card with dead space beside them.
   Collapse the set to a single centred column instead. */

.woocommerce-checkout #customer_details.col2-set {
	display: block;
}

.woocommerce-checkout #customer_details .col-1 {
	float: none;
	width: 100%;
	max-width: 48rem;
	margin-inline: auto;
}

.woocommerce-checkout #customer_details .col-2 {
	display: none;
}

/* --- Headings ------------------------------------------------------------ */

.woocommerce-checkout h3,
.woocommerce-checkout .woocommerce-billing-fields h3,
.woocommerce-checkout #order_review_heading {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h3--h3-font-size, 1.5rem);
	font-weight: var(--font-weight--xbold, 800);
	color: var(--brand--brown, #1e1e1e);
	margin-bottom: var(--_layout---spacing--small, 1.5rem);
}

/* --- Fields -------------------------------------------------------------- */

.woocommerce-checkout .form-row {
	padding: 0;
	margin-bottom: var(--_layout---spacing--xsmall, 1.25rem);
}

.woocommerce-checkout .form-row label {
	display: block;
	font-family: var(--font-family--body);
	font-size: var(--_typography---font-size--small, 1rem);
	font-weight: var(--font-weight--medium, 500);
	color: var(--brand--brown, #1e1e1e);
	margin-bottom: var(--_layout---spacing--xtiny, .5rem);
}

/* The asterisk is noise when almost everything is required. */
.woocommerce-checkout .form-row label .required {
	color: var(--brand--red-inferno, #be8208);
	text-decoration: none;
	border: 0;
}

.woocommerce-checkout .input-text,
.woocommerce-checkout input[type='text'],
.woocommerce-checkout input[type='email'],
.woocommerce-checkout input[type='tel'],
.woocommerce-checkout textarea {
	width: 100%;
	padding: var(--_layout---spacing--tiny, .75rem) var(--_layout---spacing--xxsmall, 1rem);
	font-family: var(--font-family--body);
	font-size: var(--_typography---font-size--small, 1rem);
	color: var(--brand--brown, #1e1e1e);
	background-color: var(--neutral--white, #fff);
	border: 1px solid transparent;
	border-radius: var(--_sizes---border-radius--medium, .5rem);
	transition: border-color .2s ease;
}

.woocommerce-checkout .input-text::placeholder {
	color: #9a9a9a;
}

.woocommerce-checkout .input-text:focus {
	outline: none;
	border-color: var(--brand--red-inferno, #be8208);
}

/* The dial-code dropdown. Matched to the inputs beside it, but the browser's
   own arrow is left alone — a CSS replacement would have to be re-positioned
   for RTL and gains nothing. */
.woocommerce-checkout select {
	width: 100%;
	padding: var(--_layout---spacing--tiny, .75rem) var(--_layout---spacing--xxsmall, 1rem);
	font-family: var(--font-family--body);
	font-size: var(--_typography---font-size--small, 1rem);
	line-height: var(--_typography---body--body-line-height, 1.5);
	color: var(--brand--brown, #1e1e1e);
	background-color: var(--neutral--white, #fff);
	border: 1px solid transparent;
	border-radius: var(--_sizes---border-radius--medium, .5rem);
	/* Without this a select ignores its padding and sits a few pixels shorter
	   than the number field on the same line. */
	height: auto;
}

.woocommerce-checkout select:focus {
	outline: none;
	border-color: var(--brand--red-inferno, #be8208);
}

/* The number is Latin digits and is read left-to-right, so the pair is laid
   out left-to-right too: the dial code first, on the left, then the number.
   Typing runs straight on from one control to the next. */
.woocommerce-checkout #billing_phone {
	direction: ltr;
	text-align: left;
}

/* Code and number share a line on desktop; WooCommerce's small-screen
   stylesheet already stacks them below 768px, code above number.

   The floats are set by hand because form-row-first floats right on an RTL
   page — which would put the dial code after the number instead of in front
   of it. */
@media screen and (min-width: 769px) {
	.woocommerce-checkout #billing_phone_cc_field {
		float: left;
		width: 38%;
	}

	.woocommerce-checkout #billing_phone_field {
		float: right;
		clear: none;
		width: 59%;
	}

	/* Both halves float, so without this the wrapper has no height of its own
	   and the terms checkbox rides up over them. */
	.woocommerce-checkout .woocommerce-billing-fields__field-wrapper::after {
		content: "";
		display: table;
		clear: both;
	}
}

/* --- Order summary ------------------------------------------------------- */

.woocommerce-checkout .shop_table,
.woocommerce-cart .shop_table {
	width: 100%;
	background-color: var(--neutral--white, #fff);
	border: 0;
	border-radius: var(--_sizes---border-radius--medium, .5rem);
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-family: var(--font-family--body);
}

.woocommerce-checkout .shop_table th,
.woocommerce-checkout .shop_table td {
	padding: var(--_layout---spacing--tiny, .75rem) var(--_layout---spacing--xxsmall, 1rem);
	border-bottom: 1px solid #e6e4dd;
	color: var(--brand--brown, #1e1e1e);
}

.woocommerce-checkout .shop_table tr:last-child td,
.woocommerce-checkout .shop_table tr:last-child th {
	border-bottom: 0;
}

.woocommerce-checkout .shop_table .order-total th,
.woocommerce-checkout .shop_table .order-total td {
	font-weight: var(--font-weight--bold, 700);
	font-size: var(--_typography---font-size--regular, 1.125rem);
}

.woocommerce-checkout .shop_table .amount,
.woocommerce-checkout .order-total .amount {
	color: var(--brand--red-inferno, #be8208);
	/* Prices mix Latin digits with Arabic text; tabular figures stop the total
	   shifting as the amount changes. */
	font-variant-numeric: tabular-nums;
}

/* --- Payment ------------------------------------------------------------- */

.woocommerce-checkout #payment,
.woocommerce-checkout .woocommerce-checkout-payment {
	background-color: var(--neutral--white, #fff) !important;
	border-radius: var(--_sizes---border-radius--medium, .5rem);
	padding: var(--_layout---spacing--xxsmall, 1rem);
}

.woocommerce-checkout #payment ul.payment_methods {
	border-bottom: 0;
	padding: 0;
	margin: 0;
}

.woocommerce-checkout #payment ul.payment_methods li {
	list-style: none;
	margin-bottom: var(--_layout---spacing--xtiny, .5rem);
}

.woocommerce-checkout #payment ul.payment_methods label {
	font-family: var(--font-family--body);
	font-weight: var(--font-weight--bold, 700);
	color: var(--brand--brown, #1e1e1e);
}

.woocommerce-checkout #payment div.payment_box {
	background-color: var(--brand--snow-white, #f1f0eb) !important;
	color: var(--brand--brown, #1e1e1e);
	border-radius: var(--_sizes---border-radius--small, .25rem);
	font-size: var(--_typography---font-size--small, 1rem);
}

/* WooCommerce draws a little arrow on the payment box with a ::after triangle
   that keeps its own colour; match it or it shows as a grey notch. */
.woocommerce-checkout #payment div.payment_box::before {
	border-bottom-color: var(--brand--snow-white, #f1f0eb) !important;
}

/* --- Buttons ------------------------------------------------------------- */

.woocommerce-checkout #place_order,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	background-color: var(--brand--red-inferno, #be8208) !important;
	color: var(--neutral--white, #fff) !important;
	font-family: var(--font-family--body);
	font-size: var(--_typography---font-size--regular, 1.125rem);
	font-weight: var(--font-weight--bold, 700);
	line-height: var(--_typography---body--body-line-height, 1.5);
	padding: var(--_layout---spacing--tiny, .75rem) var(--_layout---spacing--medium, 2rem);
	border: 0;
	border-radius: var(--_sizes---border-radius--medium, .5rem);
	transition: opacity .2s ease;
}

.woocommerce-checkout #place_order:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
	background-color: var(--brand--red-inferno, #be8208) !important;
	opacity: .8;
}

/* --- Notices ------------------------------------------------------------- */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--brand--red-inferno, #be8208);
	background-color: var(--neutral--white, #fff);
	font-family: var(--font-family--body);
	color: var(--brand--brown, #1e1e1e);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--brand--red-inferno, #be8208);
}

.woocommerce-error {
	border-top-color: #b3261e;
	font-family: var(--font-family--body);
}

/* --- Order received ------------------------------------------------------ */

/* The confirmation line. WooCommerce styles success notices as a grey bar with
   a tick; here it is the page's headline, so the chrome comes off. */
.woocommerce-order .woocommerce-thankyou-order-received {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h2--h2-font-size, 2rem);
	font-weight: var(--font-weight--xbold, 800);
	line-height: 1.3;
	color: var(--brand--brown, #1e1e1e);
	text-align: center;
	margin: 0 0 var(--_layout---spacing--medium, 2rem);
	padding: 0;
	background: none;
	border: 0;
}

.woocommerce-order .woocommerce-thankyou-order-received::before {
	content: none;
}

/* WooCommerce's overview list prints inline in checkout/thankyou.php with no
   filter around it. Its five values are reprinted, relabelled and reordered by
   subat_thankyou_details() in inc/woocommerce.php, so the original is hidden
   rather than removed. */
.woocommerce-order ul.woocommerce-order-overview {
	display: none;
}

/* --- Receipt sections ---------------------------------------------------- */

.subat-receipt {
	max-width: 40rem;
	margin: 0 auto var(--_layout---spacing--small, 1.5rem);
	padding: var(--_layout---spacing--xsmall, 1.25rem) var(--_layout---spacing--xxsmall, 1rem);
	background-color: var(--neutral--white, #fff);
	border-radius: var(--_sizes---border-radius--medium, .5rem);
}

.subat-receipt__title {
	font-family: var(--font-family--heading);
	font-size: var(--_typography---h3--h3-font-size, 1.5rem);
	font-weight: var(--font-weight--xbold, 800);
	color: var(--brand--brown, #1e1e1e);
	margin: 0 0 var(--_layout---spacing--xtiny, .5rem);
}

.subat-receipt__list {
	margin: 0;
	font-family: var(--font-family--body);
	font-size: var(--_typography---font-size--small, 1rem);
}

.subat-receipt__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: var(--_layout---spacing--xtiny, .5rem);
	padding: var(--_layout---spacing--tiny, .75rem) 0;
	border-bottom: 1px solid #e6e4dd;
}

.subat-receipt__row:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.subat-receipt__row dt {
	color: #6b6b6b;
	font-weight: var(--font-weight--medium, 500);
}

.subat-receipt__row dd {
	margin: 0;
	font-weight: var(--font-weight--bold, 700);
	color: var(--brand--brown, #1e1e1e);
	text-align: start;
	/* Values mix Arabic (programme, payment method) with Latin (email, phone,
	   price); let each one take its own direction instead of inheriting RTL. */
	unicode-bidi: plaintext;
}

.subat-receipt__row dd .amount,
.subat-receipt__row dd .woocommerce-Price-amount {
	color: var(--brand--red-inferno, #be8208);
	font-variant-numeric: tabular-nums;
}

.subat-receipt__note {
	max-width: 40rem;
	margin: var(--_layout---spacing--small, 1.5rem) auto 0;
	font-family: var(--font-family--body);
	font-size: var(--_typography---font-size--regular, 1.125rem);
	line-height: var(--_typography---body--body-line-height, 1.5);
	color: var(--brand--brown, #1e1e1e);
	text-align: center;
}