/**
 * OSAMA ARFA ERP — Product Variation UI (v3.27.0)
 *
 * Independent UI layer, storefront-only. Targets ONLY the standard
 * WooCommerce variation markup — confirmed directly against
 * WooCommerce core source (templates/single-product/add-to-cart/
 * variable.php + wc_dropdown_variation_attribute_options()):
 *   <table class="variations"><tr><td class="value"><select ...>
 * No WooCommerce core file, no theme (WoodMart) file, and no override
 * template were touched to build this — CSS + JS only, loaded as a
 * separate, independent layer.
 *
 * ── Phase 1: the native <select> itself, redesigned ──────────────────
 * Always active — works even if JavaScript is disabled or Phase 2's
 * swatch script fails to run for any reason, so the page never
 * regresses to the original barely-visible dropdown.
 *
 * ── Phase 2: swatch buttons ───────────────────────────────────────────
 * Built by ui-product.js. The buttons here are pure UI — every actual
 * selection is still made on the real, unmodified <select> (WooCommerce
 * owns it completely); these classes only style the swatch layer that
 * sits visually in front of it.
 */

/* ============================================================
   Brand tokens — reuses the ELMASRIA STORE accent already
   established in the invoice/print templates, so this matches
   the rest of the brand rather than inventing a new palette.
   ============================================================ */
:root {
	--est-ui-accent: #e2571d;
	--est-ui-accent-dark: #b5410c;
	--est-ui-border: #d8dbe0;
	--est-ui-border-hover: #e2571d;
	--est-ui-text: #1d2129;
	--est-ui-muted: #8a8f98;
	--est-ui-bg-disabled: #f3f4f6;
}

/* ============================================================
   Phase 1 — redesigned native <select>
   ============================================================ */
.variations select {
	display: block;
	width: 100%;
	max-width: 320px;
	padding: 12px 16px;
	font-size: 15px;
	font-weight: 500;
	color: var(--est-ui-text);
	background-color: #fff;
	border: 2px solid var(--est-ui-border);
	border-radius: 8px;
	box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
	transition: border-color .15s ease, box-shadow .15s ease;
	appearance: auto;
	cursor: pointer;
}

.variations select:hover {
	border-color: var(--est-ui-border-hover);
}

.variations select:focus {
	outline: none;
	border-color: var(--est-ui-accent);
	box-shadow: 0 0 0 3px rgba(226, 87, 29, .15);
}

.variations select:disabled {
	background-color: var(--est-ui-bg-disabled);
	color: var(--est-ui-muted);
	cursor: not-allowed;
}

.variations th.label {
	font-weight: 700;
	font-size: 14px;
	padding-bottom: 8px;
	color: var(--est-ui-text);
}

/* ============================================================
   Phase 2 — swatch buttons (built by ui-product.js)
   The original <select> is kept in the DOM, fully functional,
   and visually hidden with this class specifically — never
   display:none, so no library relying on layout/visibility
   checks against it is affected.
   ============================================================ */
.est-ui-select-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.est-ui-swatches {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.est-ui-swatch {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	height: 44px;
	padding: 0 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--est-ui-text);
	background: #fff;
	border: 2px solid var(--est-ui-border);
	border-radius: 8px;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease, transform .1s ease, box-shadow .15s ease;
	user-select: none;
}

.est-ui-swatch:hover:not(:disabled) {
	border-color: var(--est-ui-accent);
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(16, 24, 40, .08);
}

.est-ui-swatch:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(226, 87, 29, .25);
}

.est-ui-swatch.is-selected {
	background: var(--est-ui-accent);
	border-color: var(--est-ui-accent);
	color: #fff;
	box-shadow: 0 2px 8px rgba(226, 87, 29, .25);
}

.est-ui-swatch.is-selected:hover {
	background: var(--est-ui-accent-dark);
	border-color: var(--est-ui-accent-dark);
}

.est-ui-swatch:disabled,
.est-ui-swatch.is-unavailable {
	background: var(--est-ui-bg-disabled);
	border-color: var(--est-ui-border);
	color: var(--est-ui-muted);
	cursor: not-allowed;
	text-decoration: line-through;
	opacity: .6;
	transform: none;
	box-shadow: none;
}

/* When Phase 2 is active, hide WooCommerce's default "Clear" text link
   styling clash and give it a bit more breathing room under the swatches. */
.est-ui-swatches-wrap + .reset_variations,
.est-ui-swatches-wrap ~ a.reset_variations {
	display: inline-block;
	margin-top: 6px;
	font-size: 13px;
	color: var(--est-ui-muted);
}