/**
 * WooCommerce component fallbacks.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * functions.php disables every WooCommerce stylesheet:
 *
 *     add_filter( 'woocommerce_enqueue_styles', '__return_empty_array' );
 *
 * That is the right call for layout — woocommerce.css is built for a light,
 * generic theme and fights this design. But a handful of WooCommerce
 * components are not layout, they are *functional UI*, and they had no
 * styling left at all:
 *
 *   1. p.stars      — the star widget you click to rate a product. Its
 *                     markup is injected by WooCommerce's single-product.js
 *                     and its glyphs come from an icon font declared inside
 *                     woocommerce.css. With that file gone the widget was
 *                     rendered as five bare "1 2 3 4 5" links, which is why
 *                     the rating control looked broken.
 *   2. .star-rating — the read-only star display in the review list.
 *   3. Notices      — .woocommerce-error / -message / -info. An invisible
 *                     checkout error is a silently lost sale.
 *
 * The stars are rebuilt with the Unicode star character instead of
 * WooCommerce's icon font, so nothing external has to load.
 *
 * These rules are intentionally plain CSS, not Tailwind: the theme ships
 * only a compiled bundle (no Vite/Tailwind source), so new utility classes
 * cannot be generated.
 */

:root {
	--samaneh-star-on: var( --samaneh-brand-yellow, #ffd700 );
	--samaneh-star-off: rgba( 255, 255, 255, 0.24 );
	--samaneh-wc-surface: #141414;
	--samaneh-wc-border: rgba( 255, 255, 255, 0.12 );
	--samaneh-wc-text: #d1d5db;
}

/* ── Read-only rating display ─────────────────────────────────────── */

.star-rating {
	position: relative;
	display: inline-block;
	width: 5.2em;
	height: 1.1em;
	overflow: hidden;
	font-size: 1em;
	line-height: 1.1;
	font-family: inherit;
	vertical-align: middle;
}

.star-rating::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	color: var( --samaneh-star-off );
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* WooCommerce sets an inline percentage width on this span. Pushing the
   text out with padding-top on a zero-height box hides the "4 out of 5"
   label while the ::before stars stay visible — same technique
   woocommerce.css uses. */
.star-rating span {
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	padding-top: 1.6em;
	overflow: hidden;
}

.star-rating span::before {
	content: "\2605\2605\2605\2605\2605";
	position: absolute;
	top: 0;
	left: 0;
	color: var( --samaneh-star-on );
	letter-spacing: 0.04em;
	white-space: nowrap;
}

/* ── Interactive rating selector (review form) ────────────────────── */

p.stars {
	display: inline-block;
	margin: 0 0 0.5em;
	line-height: 1;
}

p.stars a {
	position: relative;
	display: inline-block;
	width: 1.6em;
	height: 1.6em;
	margin: 0;
	text-indent: -999em;
	text-decoration: none;
	border: 0;
	box-shadow: none;
	outline: 0;
}

p.stars a::before {
	content: "\2605";
	position: absolute;
	top: 0;
	left: 0;
	width: 1.6em;
	height: 1.6em;
	line-height: 1.6;
	text-indent: 0;
	text-align: center;
	font-size: 1.05em;
	color: var( --samaneh-star-off );
	transition: color 0.12s ease, transform 0.12s ease;
}

/* Hover: light up everything from the left up to the hovered star. */
p.stars:hover a::before {
	color: var( --samaneh-star-on );
}

p.stars a:hover ~ a::before {
	color: var( --samaneh-star-off );
}

p.stars a:hover::before {
	transform: scale( 1.12 );
}

/* Chosen state, set by WooCommerce's single-product.js. */
p.stars.selected a:not( .active )::before {
	color: var( --samaneh-star-on );
}

p.stars.selected a.active::before {
	color: var( --samaneh-star-on );
}

p.stars.selected a.active ~ a::before {
	color: var( --samaneh-star-off );
}

p.stars a:focus-visible::before {
	outline: 2px solid var( --samaneh-star-on );
	outline-offset: 2px;
}

/* The <select id="rating"> is hidden by WooCommerce's JS. If JS fails the
   select stays visible and usable, which is the correct fallback — so it
   is deliberately given readable styling rather than being hidden here. */
.comment-form-rating select#rating {
	background: var( --samaneh-wc-surface );
	color: #fff;
	border: 1px solid var( --samaneh-wc-border );
	border-radius: 6px;
	padding: 0.5em 0.75em;
}

.comment-form-rating label {
	display: block;
	margin-bottom: 0.35em;
	font-weight: 600;
	color: #fff;
}

/* ── Notices ──────────────────────────────────────────────────────── */

.woocommerce-message,
.woocommerce-error,
.woocommerce-info,
.woocommerce-noreviews,
.wc-block-components-notice-banner {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0.9rem 1.1rem;
	border-radius: 8px;
	border-left: 4px solid;
	background: var( --samaneh-wc-surface );
	color: var( --samaneh-wc-text );
	font-size: 0.9rem;
	line-height: 1.6;
}

.woocommerce-message {
	border-left-color: #00a32a;
}

.woocommerce-error {
	border-left-color: #d63638;
	color: #ffb4b6;
}

.woocommerce-info,
.woocommerce-noreviews {
	border-left-color: var( --samaneh-star-on );
}

.woocommerce-error li,
.woocommerce-message li,
.woocommerce-info li {
	list-style: none;
	margin: 0 0 0.35rem;
}

.woocommerce-error li:last-child,
.woocommerce-message li:last-child,
.woocommerce-info li:last-child {
	margin-bottom: 0;
}

.woocommerce-message a,
.woocommerce-error a,
.woocommerce-info a {
	color: var( --samaneh-star-on );
	text-decoration: underline;
}

/* ── Field validation + password strength ─────────────────────────── */

.woocommerce-password-strength {
	margin-top: 0.4rem;
	padding: 0.35rem 0.6rem;
	border-radius: 6px;
	font-size: 0.78rem;
	font-weight: 600;
	text-align: center;
}

.woocommerce-password-strength.strong {
	background: rgba( 0, 163, 42, 0.15 );
	color: #4ade80;
}

.woocommerce-password-strength.good {
	background: rgba( 255, 215, 0, 0.15 );
	color: var( --samaneh-star-on );
}

.woocommerce-password-strength.short,
.woocommerce-password-strength.bad {
	background: rgba( 214, 54, 56, 0.15 );
	color: #ffb4b6;
}

.woocommerce-password-hint {
	display: block;
	margin-top: 0.4rem;
	font-size: 0.78rem;
	color: #9ca3af;
}

.woocommerce-invalid input.input-text,
.woocommerce-invalid select {
	border-color: #d63638 !important;
}

.woocommerce-validated input.input-text,
.woocommerce-validated select {
	border-color: #00a32a !important;
}

.required {
	color: #d63638;
	text-decoration: none;
}

/* ── Accessibility helpers WooCommerce/WordPress markup relies on ─── */

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect( 0, 0, 0, 0 );
	white-space: nowrap;
	border: 0;
}

/* Keyboard skip link — visible only while focused. */
.samaneh-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75rem 1.25rem;
	background: var( --samaneh-star-on );
	color: #000;
	font-weight: 700;
	border-radius: 0 0 8px 0;
	text-decoration: none;
}

.samaneh-skip-link:focus {
	left: 0;
}