/* Etminan — cart, checkout, payment page. */
.etminan-hidden-field { display: none !important; }

/* Cart ---------------------------------------------------------------- */

/* Measured: "جمع کل سبد خرید" is an <h2> rendering at 15px directly under a
   41.6px <h1>. Blocksy's bundled woocommerce.min.css carries
   `.ct-woocommerce-cart-form .cart_totals h2 { font-size: 15px }` (two
   classes, specificity 0,2,1) and `.cross-sells h2 { font-size: 20px }`
   (0,1,1). Repeating the same class chain with a leading `body` adds an
   element to each without adding a class, so both win on specificity
   (0,2,2 and 0,1,2) independent of stylesheet load order. */
body .ct-woocommerce-cart-form .cart_totals h2,
body .cross-sells h2 {
	font-size: var(--etminan-ui-lg);
	margin-bottom: 0.75rem;
}

/* Cart thumbnails kept the baked-in grey backdrop: the archive's blend rule
   is scoped to `ul.products li.product img` and never reached them. */
.woocommerce-cart-form__cart-item .product-thumbnail img,
.woocommerce-mini-cart-item img {
	background: var(--etminan-surface);
	object-fit: contain;
	border: 1px solid var(--etminan-line);
	border-radius: var(--etminan-radius);
}

/* Measured: Blocksy's bundled woocommerce.min.css carries
   `[class*=ct-woocommerce] .shop_table [class*=product-thumbnail] img {
   border-radius: 2px }` — three class-level selectors, specificity 0,3,1,
   beating the rule above (0,2,1). The 6px token silently never painted.
   Repeat two more real classes from the same row so this wins on
   specificity rather than relying on stylesheet load order. */
.woocommerce-cart-form__cart-item.cart_item .product-thumbnail img.wp-post-image {
	border-radius: var(--etminan-radius);
}

/* Remove-item was an unlabelled ~18px icon. */
.woocommerce-cart-form .product-remove a.remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: var(--etminan-tap);
	min-height: var(--etminan-tap);
	border-radius: var(--etminan-radius);
	color: var(--etminan-ink-soft);
	text-decoration: none;
}

.woocommerce-cart-form .product-remove a.remove:hover {
	background: var(--etminan-accent-wash);
	color: var(--etminan-danger);
}

/* Checkout ------------------------------------------------------------ */

.woocommerce-billing-fields h3,
.woocommerce-additional-fields h3,
#order_review_heading {
	font-size: var(--etminan-ui-lg);
	margin-bottom: 1rem;
}

/* The order-notes textarea rendered at 170px while every field that decides
   whether the order can be delivered rendered at 40px. */
#order_comments {
	min-height: 88px;
	max-height: 140px;
}

body #place_order {
	width: 100%;
	font-size: 1.05rem;
	padding: 0.85em 1.5em;
}

/* Blocksy's bundled woocommerce.min.css sets `.form-row .required` (two
   classes, specificity 0,2,0) to pure red — measured 3.86:1 on white,
   below the 4.5:1 floor. That beats style.css's `body .required` (one
   class + one element, 0,1,1). Add the element back on the form-row-
   scoped selector so ours wins on specificity regardless of load order. */
body .form-row .required {
	color: var(--etminan-danger);
}

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

.etminan-payment-instructions,
.etminan-receipt-form {
	background: var(--etminan-surface);
	border: 1px solid var(--etminan-line);
	border-radius: var(--etminan-radius-lg);
	padding: var(--etminan-space);
	margin: 1.5rem 0;
}

/* The card number is the one thing this whole business runs on: a buyer
   retyping 16 digits into a banking app. It gets the boldness budget. */
.etminan-cardnum {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1rem;
	background: var(--etminan-accent-wash);
	border: 1px solid var(--etminan-accent);
	border-radius: var(--etminan-radius-lg);
	padding: 1rem 1.25rem;
	margin-bottom: 1.25rem;
}

.etminan-cardnum__label {
	flex: 1 0 100%;
	font-size: var(--etminan-ui-sm);
	color: var(--etminan-accent-deep);
	font-weight: 600;
}

/* ASCII and LTR on purpose: this is an identifier the buyer copies into
   another app, not a quantity they read. Same rule as the SKU. */
.etminan-cardnum__value {
	direction: ltr;
	unicode-bidi: isolate;
	font-size: clamp(1.35rem, 5vw, 1.75rem);
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.08em;
	color: var(--etminan-ink);
	margin: 0;
}

.etminan-copy {
	min-height: var(--etminan-tap);
	white-space: nowrap;
}

.etminan-copy[data-state="done"] {
	background: var(--etminan-accent-deep);
}

/* The amount is the second number the buyer retypes. */
.etminan-payment-table td.etminan-amount {
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--etminan-ink);
}

.etminan-payment-table {
	width: 100%;
	border-collapse: collapse;
}

.etminan-payment-table th,
.etminan-payment-table td {
	padding: 0.7rem 0;
	border-bottom: 1px solid var(--etminan-line);
	text-align: right;
}

.etminan-payment-table td {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.etminan-deadline {
	margin-top: 1rem;
	color: var(--etminan-warn-ink);
	background: var(--etminan-warn-bg);
	border-inline-start: 3px solid var(--etminan-warn-ink);
	padding: 0.9rem 1rem;
	border-radius: var(--etminan-radius);
	font-size: 0.95rem;
}

.etminan-deadline strong { font-weight: 700; }

/* The single most important interaction in the system — a phone photo of a
   bank transfer — was a raw <input type=file>: English "Choose File / No file
   chosen", LTR, inside an RTL Persian page. The real input stays in the DOM
   (it carries the `required` and the accept list); it is visually replaced. */
.etminan-file {
	display: block;
	margin-bottom: 1.25rem;
}

.etminan-file input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.etminan-file__button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 96px;
	padding: 1rem;
	border: 2px dashed var(--etminan-line-strong);
	border-radius: var(--etminan-radius-lg);
	background: var(--etminan-surface-sunk);
	color: var(--etminan-accent-deep);
	font-weight: 600;
	font-size: 1rem;
	cursor: pointer;
	text-align: center;
	transition: border-color 0.15s ease, background 0.15s ease;
}

.etminan-file__button:hover,
.etminan-file input[type="file"]:focus-visible + .etminan-file__button {
	border-color: var(--etminan-accent);
	background: var(--etminan-accent-wash);
}

.etminan-file[data-has-file="true"] .etminan-file__button {
	border-style: solid;
	border-color: var(--etminan-accent);
	background: var(--etminan-accent-wash);
}

.etminan-file__name {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--etminan-ui-sm);
	color: var(--etminan-ink-soft);
	word-break: break-all;
}

.etminan-receipt-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-weight: 600;
}

.etminan-receipt-form input[type="text"] {
	width: 100%;
	direction: ltr;
	text-align: left;
}

.etminan-receipt-form button[type="submit"] {
	width: 100%;
	font-size: 1.05rem;
}

@media (min-width: 690px) {
	.etminan-receipt-form button[type="submit"] { width: auto; min-width: 220px; }
}

.etminan-payment-instructions__title,
.etminan-receipt-form__title {
	font-size: var(--etminan-ui-lg);
	margin: 0 0 1rem;
}

.etminan-file__hint {
	display: block;
	margin-top: 0.5rem;
	font-size: var(--etminan-ui-sm);
	color: var(--etminan-ink-soft);
}

/* WooCommerce notices below 480px — measured on the order-received notice,
   the screen where a buyer checks that their payment registered. Blocksy's
   bundled woocommerce.min.css carries one `:is(.woocommerce-info,
   .woocommerce-error,.woocommerce-message,.woocommerce-thankyou-order-received)`
   selector split across two media queries: at >=480px it reserves the
   icon's room with logical `padding-inline-start: 55px`, which is correct.
   Below 480px it switches to a physical `padding: 15px 15px 15px 46px`
   while still placing the icon with logical `inset-inline-start: 18px`.
   In this RTL document inset-inline-start resolves to the *right* edge,
   so the icon paints 18-33px from the right while the 46px of reserved
   space sits on the left — under the notice's first word. Only the
   mobile breakpoint is broken.

   Tried the logical fix first (`padding-inline-start`/`-end`) at higher
   specificity than Blocksy's `:is(...)` (0,1,0) — measured it still lost:
   Chrome resolves a physical/logical conflict on the same edge by its own
   rule, not plain specificity comparison. This document is RTL-only (see
   CLAUDE.md), so the physical swap below is equivalent and unambiguous:
   `padding-right` takes the 46px the icon needs, `padding-left` gets the
   15px of real content padding. `body` raises specificity above Blocksy's
   selector without depending on stylesheet load order. */
@media (max-width: 479.98px) {
	body .woocommerce-info,
	body .woocommerce-error,
	body .woocommerce-message,
	body .woocommerce-thankyou-order-received {
		padding-left: 15px;
		padding-right: 46px;
	}
}