/**
 * Cart Variation Edit Styles
 *
 * @package LJE_Tools
 */

/**
 * Highlight the currently selected option when the dropdown is open.
 * Works in Chromium and Firefox; Safari ignores <option> background styling
 * by design. Chromium/Firefox resolve custom properties on <option>; the
 * static fallbacks cover engines that don't (#139).
 */
.lje-cve-product-variation-select option:checked {
	background-color: var(--lj-color-primary, #00a5b2);
	color: var(--lj-color-text-inverse, #fff);
}

/**
 * Inline "Updating…" state while the cart re-renders (#139): muted label
 * with a small spinner, consistent with the theme's loading language.
 */
.lje-cve-loading {
	color: var(--lj-color-text-muted, #6b6b66);
	font-size: 0.875em;
	margin-left: 0.5em;
	white-space: nowrap;
}

.lje-cve-loading::before {
	content: "";
	display: inline-block;
	width: 0.9em;
	height: 0.9em;
	margin-right: 0.35em;
	vertical-align: -0.1em;
	border: 2px solid var(--lj-color-border, #ccc);
	border-top-color: var(--lj-color-primary, #00a5b2);
	border-radius: 50%;
	animation: lje-cve-spin 0.7s linear infinite;
}

@keyframes lje-cve-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.lje-cve-loading::before {
		animation: none;
		border-top-color: var(--lj-color-border, #ccc);
	}
}