/*
 * woocommerce.css — WooCommerce integration
 *
 * Written against markup captured from the running local site on 29 Aug 2026:
 * cart (page 4204) both empty and populated, checkout (4380), my-account
 * (4260) logged out, and product 7499.
 *
 * Loaded only where alrasly_page_needs_woo() is true — which includes every
 * Tutor page, because course pages carry add-to-cart buttons. See
 * inc/asset-trimming.php.
 *
 * NOTE ON WHAT IS NOT HERE
 * The mini-cart and customer-account blocks WooCommerce auto-injects into
 * block theme headers are unhooked in inc/asset-trimming.php, so there are no
 * styles for them. If that filter is ever removed, they will need styling here
 * AND WooCommerce CSS will have to load site-wide again.
 *
 * This store runs a BLOCK theme, so WooCommerce emits two generations of
 * markup side by side: classic (.woocommerce-*) and blocks (.wc-block-*).
 * Both are styled below because both were observed on the same pages.
 */

/* ------------------------------------------------------------------ *
 * SURFACES AND TEXT
 * ------------------------------------------------------------------ */

.woocommerce,
.woocommerce-page,
.woocommerce-cart,
.woocommerce-checkout,
.woocommerce-account {
	color: var(--wp--preset--color--text);
}

.woocommerce table,
.woocommerce-cart-form table,
.shop_table {
	background-color: transparent;
	border-color: rgba(255, 255, 255, 0.1);
	color: var(--wp--preset--color--text);
}

.woocommerce table th,
.shop_table th {
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

.woocommerce table td,
.shop_table td {
	color: var(--wp--preset--color--text-2);
	border-color: rgba(255, 255, 255, 0.08);
}

/* Prices carry meaning — keep them at full contrast, never muted. */
.woocommerce-Price-amount,
.wc-block-components-product-price,
.wc-block-components-product-price__value,
.wc-block-formatted-money-amount {
	color: var(--wp--preset--color--text);
	font-weight: 500;
}

.woocommerce-Price-currencySymbol {
	color: var(--wp--preset--color--text-2);
	font-weight: 400;
}

/* ------------------------------------------------------------------ *
 * BUTTONS — 44px minimum, accent takes a dark label
 * ------------------------------------------------------------------ */

.woocommerce .button,
.woocommerce-button,
.wc-block-components-button,
.wc-backward,
.woocommerce a.button,
.woocommerce button.button {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding-block: 0.5rem;
	padding-inline: 1.25rem;
	border-radius: 8px;
	background-color: var(--wp--preset--color--brand);
	color: #ffffff; /* 5.55 on --brand — AA. */
	border: 0;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0;
}

.woocommerce .button:hover,
.wc-block-components-button:hover,
.woocommerce .button:focus-visible {
	background-color: #6b2ee0;
	color: #ffffff;
}

/*
 * The two commit actions — "proceed to checkout" and "place order" — are the
 * accent moment. White on --accent is 1.76:1, a hard fail; --ground on the
 * same fill is 10.94:1. See plan/design-system.md §1.
 */
.wc-proceed-to-checkout .checkout-button,
#place_order,
.wc-block-components-checkout-place-order-button {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--ground);
	font-weight: 500;
}

.wc-proceed-to-checkout .checkout-button:hover,
#place_order:hover {
	background-color: #ffc79b;
	color: var(--wp--preset--color--ground);
}

/* Quantity steppers are small by default — give them a real hit area. */
.wc-block-components-quantity-selector__button,
.quantity input[type="number"],
.quantity .qty {
	min-width: 44px;
	min-height: 44px;
}

/* ------------------------------------------------------------------ *
 * FORMS — checkout billing fields, login, coupon
 * ------------------------------------------------------------------ */

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-Input,
.woocommerce-Input--text,
.wc-block-components-text-input input,
.select2-container .select2-selection--single {
	min-height: 44px;
	background-color: var(--wp--preset--color--ground-alt);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	color: var(--wp--preset--color--text);
	padding-inline: 0.875rem;
	font-family: inherit;
}

.woocommerce form .form-row label,
.woocommerce-form-row label,
.wc-block-components-text-input label {
	color: var(--wp--preset--color--text-2);
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce-Input:focus,
.wc-block-components-text-input input:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
	border-color: transparent;
}

/* Required-field marker. Woo uses a red asterisk that is invisible on dark. */
.woocommerce .required,
.woocommerce abbr.required {
	color: var(--wp--preset--color--accent);
	border: 0;
	text-decoration: none;
}

/* select2 is enqueued on cart, checkout and my-account (country pickers). */
.select2-dropdown,
.select2-container--default .select2-results__option {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
}

.select2-container--default .select2-results__option--highlighted[aria-selected] {
	background-color: var(--wp--preset--color--brand);
	color: #ffffff;
}

/* ------------------------------------------------------------------ *
 * NOTICES
 *
 * .wc-empty-cart-message and .wc-block-components-notice-banner were both
 * observed on the empty cart. Woo's defaults are light-on-light here.
 * ------------------------------------------------------------------ */

.woocommerce-notices-wrapper .woocommerce-message,
.woocommerce-notices-wrapper .woocommerce-info,
.woocommerce-notices-wrapper .woocommerce-error,
.wc-block-components-notice-banner,
.wc-empty-cart-message {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 12px;
	border-block-start: 1px solid rgba(255, 178, 122, 0.34);
	padding: 1rem 1.25rem;
}

.wc-block-components-notice-banner.is-error,
.woocommerce-notices-wrapper .woocommerce-error {
	border-inline-start-color: #ff6b6b;
}

.wc-block-components-notice-banner.is-success,
.woocommerce-notices-wrapper .woocommerce-message {
	border-inline-start-color: var(--wp--preset--color--accent);
}

.wc-block-components-notice-banner__content {
	color: var(--wp--preset--color--text);
}

/* ------------------------------------------------------------------ *
 * MY ACCOUNT
 * ------------------------------------------------------------------ */

.woocommerce-MyAccount-navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.woocommerce-MyAccount-navigation li a {
	min-height: 44px;
	display: flex;
	align-items: center;
	color: var(--wp--preset--color--text-2);
	padding-inline: 1rem;
	border-inline-start: 3px solid transparent;
	border-radius: 0 8px 8px 0;
}

.woocommerce-MyAccount-navigation li.is-active a,
.woocommerce-MyAccount-navigation li a:hover,
.woocommerce-MyAccount-navigation li a:focus-visible {
	color: var(--wp--preset--color--text);
	background-color: var(--wp--preset--color--ground-alt);
	border-inline-start-color: var(--wp--preset--color--accent);
}

.woocommerce-form-login,
.woocommerce-form-register {
	background-color: var(--wp--preset--color--card);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 16px;
	padding: 1.5rem;
}

/* ------------------------------------------------------------------ *
 * RTL CORRECTIONS
 *
 * The WooCommerce -rtl stylesheets only load on Arabic pages under WPML. This
 * theme serves one sheet for both languages, so anything directional here has
 * to be logical rather than mirrored.
 * ------------------------------------------------------------------ */

html[dir="rtl"] .woocommerce table,
html[dir="rtl"] .shop_table,
html[dir="rtl"] .woocommerce-MyAccount-navigation {
	text-align: right;
}

html[dir="rtl"] .woocommerce .quantity {
	direction: ltr; /* numeric stepper stays LTR; the digits are Western. */
}

html[dir="rtl"] .wc-backward::before,
html[dir="rtl"] .woocommerce .button.wc-backward::before {
	transform: scaleX(-1);
}

html[dir="rtl"] .woocommerce *,
html[dir="rtl"] .wc-block-components-button {
	letter-spacing: 0;
}

/* Prices are Western numerals and must not be reordered by the RTL context. */
html[dir="rtl"] .woocommerce-Price-amount,
html[dir="rtl"] .wc-block-formatted-money-amount {
	direction: ltr;
	display: inline-block;
	unicode-bidi: isolate;
}

/* ================================================================== *
 * MEASURED FIXES — checkout audit, 7 Sep 2026
 *
 * The rules above were right about what they wanted and lost the
 * cascade. Everything in this section is against a number taken from
 * the running /checkout/ page, not against a screenshot.
 * ================================================================== */

/* ------------------------------------------------------------------ *
 * NOTICES — measured 1.07:1, white on white
 *
 * The notice rule above targets `.wc-block-components-notice-banner`, which
 * is (0,1,0). WooCommerce paints the background on the VARIANT:
 *
 *     .wc-block-components-notice-banner.is-info{background-color:#f4f8ff}
 *
 * at (0,2,0), so the plugin won every time and the panel stayed near-white
 * while the theme kept the text white. Measured contrast 1.07:1 against a
 * 4.5 requirement — and one of the two notices on the checkout reads
 * «عفوًا، يبدو عدم توافر طرق دفع», so the single message explaining why the
 * buyer cannot pay was the least readable thing on the page.
 *
 * Matching the variant specificity is the whole fix. The colour is still
 * only ever a reinforcement: every notice keeps its icon and its text.
 * ------------------------------------------------------------------ */
.wc-block-components-notice-banner.is-info,
.wc-block-components-notice-banner.is-success,
.wc-block-components-notice-banner.is-error,
.wc-block-components-notice-banner.is-warning {
	background-color: var(--wp--preset--color--card);
	color: var(--wp--preset--color--text);
	border-color: rgba(255, 255, 255, 0.12);
}
.wc-block-components-notice-banner.is-info { border-inline-start-color: #7C9BE0; }
.wc-block-components-notice-banner.is-success { border-inline-start-color: #6FCF97; }
.wc-block-components-notice-banner.is-error { border-inline-start-color: #F2777A; }
.wc-block-components-notice-banner.is-warning { border-inline-start-color: var(--wp--preset--color--accent); }

/* The banner's own children carry colour too, and the icon is a filled SVG
   that vanished the moment the panel went dark. */
.wc-block-components-notice-banner.is-info > .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-success > .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-error > .wc-block-components-notice-banner__content,
.wc-block-components-notice-banner.is-warning > .wc-block-components-notice-banner__content {
	color: var(--wp--preset--color--text);
}
.wc-block-components-notice-banner.is-info > svg { fill: #7C9BE0; }
.wc-block-components-notice-banner.is-success > svg { fill: #6FCF97; }
.wc-block-components-notice-banner.is-error > svg { fill: #F2777A; }
.wc-block-components-notice-banner.is-warning > svg { fill: var(--wp--preset--color--accent); }

/* «أنقر هنا لإدخال رمز القسيمة» is a link inside a notice and was inheriting
   the plugin's blue, which is unreadable on the card ground. */
.wc-block-components-notice-banner a,
.woocommerce-notices-wrapper :is(.woocommerce-info, .woocommerce-message, .woocommerce-error) a {
	color: var(--wp--preset--color--accent);
	text-underline-offset: 3px;
}

/* ------------------------------------------------------------------ *
 * THE BILLING COLUMN CAME SECOND
 *
 * Measured: .col-1 (billing, required) at 420-900 — the LEFT — and .col-2
 * (order notes, optional) at 940-1420 — the RIGHT. In Arabic the right is
 * where reading starts, so the optional box was leading the required one.
 * The cause is `float: left` surviving into RTL.
 *
 * Replacing the float with a grid fixes the order at the source rather than
 * flipping the float back, and it collapses to one column on a phone without
 * a second media query.
 * ------------------------------------------------------------------ */
.woocommerce .col2-set,
.woocommerce-page .col2-set {
	display: grid;
	/* min() because minmax(22rem,…) is a hard floor and would overflow a
	   390px screen. */
	grid-template-columns: repeat(auto-fit, minmax(min(22rem, 100%), 1fr));
	gap: 2rem;
	inline-size: 100%;
}
.woocommerce .col2-set > .col-1,
.woocommerce-page .col2-set > .col-1 { order: 1; }
.woocommerce .col2-set > .col-2,
.woocommerce-page .col2-set > .col-2 { order: 2; }
.woocommerce .col2-set > :is(.col-1, .col-2),
.woocommerce-page .col2-set > :is(.col-1, .col-2) {
	float: none;
	inline-size: auto;
}

/* ------------------------------------------------------------------ *
 * THE ORDER-NOTES FIELD WAS THE ONLY WHITE ONE
 *
 * Measured #order_comments at background #fff with black text while every
 * other field on the same form was --ground-alt with white text.
 *
 * Found by disabling each of the 47 loaded stylesheets in turn and watching
 * which one let the field go dark: woocommerce-rtl.css, which styles these
 * at `.woocommerce form .form-row textarea` — (0,3,1). The theme rule was
 * (0,2,1) and lost. No !important is involved on either side, verified by
 * checking that a plain id selector wins, so ONE more class is the whole
 * fix — escalating to !important here would have been guessing.
 * ------------------------------------------------------------------ */
.woocommerce form.checkout .form-row textarea,
.woocommerce form.checkout .form-row input.input-text,
.woocommerce form.checkout .form-row select,
.woocommerce-page form.checkout .form-row textarea {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 8px;
	/* 16px, because anything smaller makes iOS Safari zoom on focus — which
	   on a checkout reads as the form breaking. */
	font-size: 1rem;
	font-family: inherit;
	padding: 0.7rem 0.85rem;
	min-block-size: 44px;
	inline-size: 100%;
}
.woocommerce form.checkout .form-row textarea { min-block-size: 7rem; }
.woocommerce form.checkout .form-row :is(input, textarea, select)::placeholder {
	color: var(--wp--preset--color--text-3);
	opacity: 1;
}

/* ------------------------------------------------------------------ *
 * THE LAST BUTTON IN A PURCHASE
 *
 * #place_order measured 133px wide, tucked at the bottom-left of a 1000px
 * form — the smallest control on the page was the one that completes the
 * sale. It is already the correct accent-on-ground pairing (10.94:1) from
 * the rules above; only the size was wrong.
 * ------------------------------------------------------------------ */
.woocommerce #place_order,
.woocommerce-page #place_order {
	inline-size: 100%;
	min-block-size: 52px;
	font-size: 1rem;
	font-weight: 600;
	border-radius: 999px;
}

/* The consent checkbox is a 13px browser default sitting beside 44px fields,
   and it gates the purchase. */
.woocommerce form .form-row input[type="checkbox"],
.woocommerce-page form .form-row input[type="checkbox"] {
	inline-size: 1.15rem;
	block-size: 1.15rem;
	accent-color: var(--wp--preset--color--accent);
	vertical-align: middle;
	margin-inline-end: 0.5rem;
}

/* select2 renders its dropdown in a detached container at the end of <body>,
   outside every .woocommerce scope, so the panel above never reached it. */
.select2-dropdown,
.select2-container--default .select2-results > .select2-results__options {
	background-color: var(--wp--preset--color--ground-alt);
	color: var(--wp--preset--color--text);
	border-color: rgba(255, 255, 255, 0.14);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
	color: var(--wp--preset--color--text);
}

/* The advisory note under the checkout phone field. The server-side rule in
   inc/phone-rules.php is the actual gate; this is what the browser shows first. */
.alrasly-phone-note {
	display: block;
	margin-block-start: 0.35rem;
	color: #FFB4B4;      /* 9.4:1 on --ground */
	font-size: 0.8125rem;
	line-height: 1.7;
}