/* ─────────────────────────────────────────────────────────────
 * Single-product reviews — editorial-receipt redesign
 * RTL-first via CSS logical properties.
 * ─────────────────────────────────────────────────────────── */

/* ─── 0. PDP summary rating row (block: woocommerce/product-rating)
 *
 * The block renders a star strip + a "(N customer reviews)" link sitting
 * between the brand masthead and the price block. Out of the box on this
 * theme the inner star span renders as a row of solid-black ★ glyphs from
 * WC's icon font (no tint, hard-against-white) and the review link inherits
 * the body's --wp--preset--font-size--large (~1.375rem) on top of the
 * rating container's own scale, so the "(1 من مراجعات العملاء)" link blows
 * up to heading-size and pushes the whole row onto two lines.
 *
 * Fix: paint the stars ourselves with two stacked SVG-background tracks
 * (one ghost, one warm-orange fill clipped by the inner span's inline
 * width:N% — the percentage WC sets to express the rating). Hides the
 * inline "Rated N of 5" sentence via text-indent; the role="img" +
 * aria-label on the container keep the SR experience intact. */
.wc-block-components-product-rating {
	--asi-rev-warm: var(--wp--preset--color--warm-orange, #F59E0B);
	--asi-rev-text: var(--wp--preset--color--contrast, #0F172A);
	/* Two SVG sprites — 5 stars wide, painted in fill-current so we can
	   recolor via background image data-URL. Same path as the receipt stars
	   below to keep the brand glyph consistent across surfaces. */
	--asi-rev-stars-empty: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='%23cbd5e1'><path d='M12 2.2 L14.6 8.9 L21.8 9.4 L16.2 14 L18 21 L12 17.2 L6 21 L7.8 14 L2.2 9.4 L9.4 8.9 Z'/><path d='M36 2.2 L38.6 8.9 L45.8 9.4 L40.2 14 L42 21 L36 17.2 L30 21 L31.8 14 L26.2 9.4 L33.4 8.9 Z'/><path d='M60 2.2 L62.6 8.9 L69.8 9.4 L64.2 14 L66 21 L60 17.2 L54 21 L55.8 14 L50.2 9.4 L57.4 8.9 Z'/><path d='M84 2.2 L86.6 8.9 L93.8 9.4 L88.2 14 L90 21 L84 17.2 L78 21 L79.8 14 L74.2 9.4 L81.4 8.9 Z'/><path d='M108 2.2 L110.6 8.9 L117.8 9.4 L112.2 14 L114 21 L108 17.2 L102 21 L103.8 14 L98.2 9.4 L105.4 8.9 Z'/></svg>");
	--asi-rev-stars-fill: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' fill='%23F59E0B'><path d='M12 2.2 L14.6 8.9 L21.8 9.4 L16.2 14 L18 21 L12 17.2 L6 21 L7.8 14 L2.2 9.4 L9.4 8.9 Z'/><path d='M36 2.2 L38.6 8.9 L45.8 9.4 L40.2 14 L42 21 L36 17.2 L30 21 L31.8 14 L26.2 9.4 L33.4 8.9 Z'/><path d='M60 2.2 L62.6 8.9 L69.8 9.4 L64.2 14 L66 21 L60 17.2 L54 21 L55.8 14 L50.2 9.4 L57.4 8.9 Z'/><path d='M84 2.2 L86.6 8.9 L93.8 9.4 L88.2 14 L90 21 L84 17.2 L78 21 L79.8 14 L74.2 9.4 L81.4 8.9 Z'/><path d='M108 2.2 L110.6 8.9 L117.8 9.4 L112.2 14 L114 21 L108 17.2 L102 21 L103.8 14 L98.2 9.4 L105.4 8.9 Z'/></svg>");

	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 0.9375rem;
	line-height: 1;
	margin-block-end: 0.5rem;
}
.wc-block-components-product-rating .wc-block-components-product-rating__container {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}

/* Override WC's defaults via plenty of selector mass (.foo .foo beats
   .foo) — packages-style-rtl.css ships rules that paint these stars with
   font-family:WooCommerce + content:"SSSSS" via the icon font. */
.wc-block-components-product-rating .wc-block-components-product-rating__stars {
	position: relative;
	display: inline-block;
	inline-size: 6em;
	block-size: 1.2em;
	margin: 0;
	overflow: hidden;
	text-indent: -9999px; /* hide the WC-emitted "Rated N of 5" alt text */
	white-space: nowrap;
	background-image: var(--asi-rev-stars-empty);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 6em 1.2em;
	color: transparent;
	font-family: inherit !important;
}
.wc-block-components-product-rating .wc-block-components-product-rating__stars::before {
	content: none !important;
}
/* The inner span carries inline `width: N%` set by WC to express the rating
   percentage. We anchor it to the start, give it the same 6em-wide fill
   background, and let its width clip it. background-size matches the parent
   so stars stay at their full width instead of being squished. */
.wc-block-components-product-rating .wc-block-components-product-rating__stars > span {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	block-size: 100%;
	max-inline-size: 100%;
	padding: 0;
	overflow: hidden;
	color: transparent;
	background-image: var(--asi-rev-stars-fill);
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 6em 1.2em;
}
.wc-block-components-product-rating .wc-block-components-product-rating__stars > span::before {
	content: none !important;
}
/* In RTL the document's inset-inline-start would anchor the fill at the
   visual-right, but the background image draws stars from left → right.
   Force the rating track to LTR so width:60% always fills the leading 3
   stars regardless of document direction. */
[dir="rtl"] .wc-block-components-product-rating .wc-block-components-product-rating__stars,
[dir="rtl"] .wc-block-components-product-rating .wc-block-components-product-rating__stars > span {
	direction: ltr;
}

.wc-block-components-product-rating__reviews_count,
.wc-block-components-product-rating .woocommerce-review-link {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
}
.wc-block-components-product-rating .woocommerce-review-link {
	color: var(--wp--preset--color--accent-1, #0155B7);
	text-decoration: none;
	border-block-end: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1, #0155B7) 30%, transparent);
	padding-block-end: 1px;
	transition: color 180ms cubic-bezier(0.16, 1, 0.3, 1), border-color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.wc-block-components-product-rating .woocommerce-review-link:hover {
	color: var(--wp--preset--color--contrast, #0F172A);
	border-block-end-color: currentColor;
}
:lang(ar) .wc-block-components-product-rating__reviews_count,
:lang(ar) .wc-block-components-product-rating .woocommerce-review-link {
	font-size: 0.9375rem; /* Tajawal reads ~1pt smaller than Poppins at the same nominal size */
}


.asi-reviews {
	--asi-rev-text: var(--wp--preset--color--contrast, #0F172A);
	--asi-rev-muted: var(--wp--preset--color--accent-4, #64748B);
	--asi-rev-blue: var(--wp--preset--color--accent-1, #0155B7);
	--asi-rev-warm: var(--wp--preset--color--warm-orange, #F59E0B);
	--asi-rev-surface: var(--wp--preset--color--accent-3, #F8FAFC);
	--asi-rev-border: color-mix(in srgb, var(--asi-rev-text) 9%, transparent);
	--asi-rev-hair: color-mix(in srgb, var(--asi-rev-text) 6%, transparent);
	--asi-rev-input-bg: #fff;
	/* 5-point star — used as a CSS mask on .stars a, so rendering doesn't depend
	   on WC's icon font or platform Unicode glyphs. */
	--asi-rev-star-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2 L14.6 8.9 L21.8 9.4 L16.2 14 L18 21 L12 17.2 L6 21 L7.8 14 L2.2 9.4 L9.4 8.9 Z'/></svg>");

	max-inline-size: 920px;
	margin-inline: auto;
	padding-block: 0.5rem;
	color: var(--asi-rev-text);
}

/* Suppress WC defaults we replace */
.asi-reviews .woocommerce-Reviews-title,
.asi-reviews .woocommerce-noreviews { display: none; }

/* ─── 1. Header strip ─── */
.asi-reviews__header {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem clamp(1.5rem, 3vw, 2.25rem);
	padding-block-end: clamp(1.25rem, 3vw, 1.75rem);
	margin-block-end: clamp(1.25rem, 3vw, 1.75rem);
	border-block-end: 1px solid var(--asi-rev-hair);
}

.asi-reviews__score {
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.375rem;
	flex-shrink: 0;
	padding-inline-end: clamp(1.25rem, 2.5vw, 1.75rem);
	border-inline-end: 1px solid var(--asi-rev-hair);
}

.asi-reviews__score-number {
	font-size: clamp(2rem, 3.5vw, 2.5rem);
	font-weight: 600;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--asi-rev-text);
	font-variant-numeric: tabular-nums;
}
.asi-reviews__score-number,
.asi-reviews__score-stars {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
}
/* The number + stars sit side-by-side on a single row; .score-stars is the
   second child of .score, so we just need them inline. */
.asi-reviews__score > .asi-reviews__score-stars {
	align-self: center;
	margin-inline-start: -0.25rem;
}

/* Restructure: number AND stars on row 1 inline, count below them as a
   muted byline. Override the default block stacking. */
.asi-reviews__score {
	flex-direction: row;
	align-items: center;
	flex-wrap: wrap;
	row-gap: 0.25rem;
	column-gap: 0.625rem;
}
.asi-reviews__score-count {
	flex-basis: 100%;
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--asi-rev-muted);
	letter-spacing: 0.01em;
}

.asi-reviews--empty .asi-reviews__score-number {
	color: color-mix(in srgb, var(--asi-rev-text) 22%, transparent);
}
.asi-reviews--empty .asi-rev-stars__fill { opacity: 0; }
.asi-reviews--empty .asi-rev-stars__base { color: color-mix(in srgb, var(--asi-rev-text) 14%, transparent); }

.asi-reviews__intro {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--asi-rev-muted);
	flex: 1 1 auto;
	min-inline-size: 0;
	/* Tagline reads as a single line on desktop — no max-inline-size cap,
	   so it expands across the remaining header width instead of wrapping
	   to two lines under the heading. On narrow viewports the header's
	   flex-wrap drops the intro to its own row and it wraps naturally. */
	text-wrap: pretty;
}
.asi-reviews__intro strong {
	display: block;
	color: var(--asi-rev-text);
	font-size: 1.0625rem;
	font-weight: 600;
	margin-block-end: 0.25rem;
	letter-spacing: -0.005em;
}

@media (max-width: 640px) {
	.asi-reviews__header { gap: 1rem 1.25rem; }
	.asi-reviews__score {
		padding-inline-end: 0;
		border-inline-end: none;
		padding-block-end: 1rem;
		border-block-end: 1px solid var(--asi-rev-hair);
		inline-size: 100%;
	}
	.asi-reviews__intro { max-inline-size: none; flex-basis: 100%; }
}

/* ─── 2. Stars (avg + per-review) — composed via stacked spans ─── */
.asi-rev-stars {
	position: relative;
	display: inline-block;
	font-size: var(--asi-rev-size, 18px);
	line-height: 1;
	letter-spacing: 0.06em;
	font-family: Arial, sans-serif; /* glyph consistency */
	user-select: none;
}
.asi-rev-stars__base {
	color: color-mix(in srgb, var(--asi-rev-text) 14%, transparent);
}
.asi-rev-stars__fill {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 0;
	inline-size: var(--asi-rev-fill, 0%);
	overflow: hidden;
	white-space: nowrap;
	color: var(--asi-rev-warm);
}
[dir="rtl"] .asi-rev-stars__fill {
	/* mirror so partial fills start from the visual-leading side */
	transform: scaleX(-1);
	transform-origin: center;
}
[dir="rtl"] .asi-rev-stars__base {
	transform: scaleX(-1);
	transform-origin: center;
}

/* ─── 3. Review list ─── */
.asi-reviews__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0;
}

.asi-reviews__item {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.375rem 1.125rem;
	padding-block: clamp(1.125rem, 2.5vw, 1.5rem);
	border-block-end: 1px solid var(--asi-rev-hair);
	list-style: none;
}
.asi-reviews__item:last-child { border-block-end: none; }
.asi-reviews__item .children { display: none; } /* WC threading off by default; safety */

.asi-reviews__avatar {
	grid-row: 1 / span 2;
	inline-size: 38px;
	block-size: 38px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--asi-rev-blue) 10%, transparent);
	color: var(--asi-rev-blue);
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.asi-reviews__item-body { min-inline-size: 0; }

.asi-reviews__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.875rem;
	margin-block-end: 0.5rem;
}
.asi-reviews__author {
	font-weight: 600;
	color: var(--asi-rev-text);
	font-size: 0.9375rem;
}
.asi-reviews__rating { display: inline-flex; align-items: center; }
.asi-reviews__date {
	font-size: 0.8125rem;
	color: var(--asi-rev-muted);
	margin-inline-start: auto; /* pushes date to the inline-end */
}
.asi-reviews__verified {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-2, #72B94A);
	background: color-mix(in srgb, var(--wp--preset--color--accent-2, #72B94A) 10%, transparent);
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
}

.asi-reviews__body {
	color: var(--asi-rev-text);
	font-size: 0.9375rem;
	line-height: 1.65;
}
.asi-reviews__body > * { margin-block: 0.25rem; }
.asi-reviews__body p:first-child { margin-block-start: 0; }
.asi-reviews__body p:last-child { margin-block-end: 0; }

.asi-reviews__pending {
	font-size: 0.8125rem;
	color: var(--asi-rev-muted);
	margin-block-start: 0.5rem;
}

/* Pagination */
.asi-reviews__pagination {
	margin-block-start: 1.5rem;
	font-size: 0.875rem;
}
.asi-reviews__pagination ul { list-style: none; display: inline-flex; gap: 0.375rem; padding: 0; }
.asi-reviews__pagination a,
.asi-reviews__pagination span {
	display: inline-grid;
	place-items: center;
	min-inline-size: 2.25rem;
	block-size: 2.25rem;
	padding-inline: 0.625rem;
	border-radius: 8px;
	color: var(--asi-rev-text);
	text-decoration: none;
	border: 1px solid var(--asi-rev-hair);
}
.asi-reviews__pagination .current {
	background: var(--asi-rev-blue);
	color: #fff;
	border-color: var(--asi-rev-blue);
}

/* ─── 4. Form card ─── */
.asi-reviews__form-card {
	background: var(--asi-rev-surface);
	border-radius: 20px;
	padding: clamp(1.5rem, 4vw, 2.25rem);
	margin-block-start: clamp(2rem, 5vw, 3rem);
	container-type: inline-size;
}

.asi-reviews__form-heading {
	font-size: clamp(1.125rem, 2.5vw, 1.375rem);
	font-weight: 600;
	letter-spacing: -0.01em;
	margin: 0 0 0.375rem;
	color: var(--asi-rev-text);
}
.asi-reviews__form-sub {
	font-size: 0.9375rem;
	color: var(--asi-rev-muted);
	line-height: 1.55;
	margin: 0 0 clamp(1.5rem, 4vw, 2rem);
	/* No max-inline-size cap — let the subtitle ride the full form-card
	   width on desktop so it reads as one line. Narrow viewports still
	   wrap because the form-card itself shrinks. */
	text-wrap: pretty;
}

.asi-reviews__form-card .comment-respond,
.asi-reviews__form-card #respond { background: transparent; padding: 0; margin: 0; }

/* The required asterisk — soft brand-blue */
.asi-reviews__form-card .required {
	color: var(--asi-rev-blue);
	font-weight: 600;
	margin-inline-start: 0.125rem;
}

/* Rating row */
.asi-reviews__rating-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.625rem 1rem;
	margin-block-end: clamp(1.25rem, 3vw, 1.75rem);
}
.asi-reviews__rating-row > label {
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--asi-rev-text);
	margin: 0;
	flex-shrink: 0;
}

/* Hide the legacy select (WC will hide it via JS too, but belt+braces) */
.asi-reviews__rating-row select#rating {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* WC-rendered star input — restyle as SVG-mask buttons so the glyph is crisp
   regardless of whether WC's icon font or any Unicode fallback loaded. */
.asi-reviews__form-card .stars {
	margin: 0;
	padding: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	line-height: 0;
}
.asi-reviews__form-card .stars span {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
}
.asi-reviews__form-card .stars a {
	inline-size: 2.25rem;
	block-size: 2.25rem;
	display: inline-block;
	text-indent: -9999px;
	overflow: hidden;
	text-decoration: none;
	cursor: pointer;
	background-color: color-mix(in srgb, var(--asi-rev-warm) 30%, transparent);
	-webkit-mask-image: var(--asi-rev-star-mask);
	        mask-image: var(--asi-rev-star-mask);
	-webkit-mask-repeat: no-repeat;
	        mask-repeat: no-repeat;
	-webkit-mask-position: center;
	        mask-position: center;
	-webkit-mask-size: 82%;
	        mask-size: 82%;
	transition: background-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
				transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Defeat any legacy ::before star glyph from older CSS layers */
.asi-reviews__form-card .stars a::before,
.asi-reviews__form-card .stars a::after { content: none !important; }

/* Hover preview — fill all stars from start up to and including the hovered one */
.asi-reviews__form-card .stars:hover a {
	background-color: var(--asi-rev-warm);
}
.asi-reviews__form-card .stars a:hover ~ a {
	background-color: color-mix(in srgb, var(--asi-rev-warm) 30%, transparent);
}
.asi-reviews__form-card .stars a:hover {
	transform: scale(1.08);
}

/* WC marks ONLY the chosen star with .active, with .selected on the container.
   :has() lets us fill from start up to and including the chosen star. */
.asi-reviews__form-card .stars:has(a.active) a {
	background-color: var(--asi-rev-warm);
}
.asi-reviews__form-card .stars:has(a.active) a.active ~ a {
	background-color: color-mix(in srgb, var(--asi-rev-warm) 30%, transparent);
}
/* Hovering re-takes priority over the persisted .active state */
.asi-reviews__form-card .stars:has(a.active):hover a {
	background-color: var(--asi-rev-warm);
}
.asi-reviews__form-card .stars:has(a.active):hover a:hover ~ a {
	background-color: color-mix(in srgb, var(--asi-rev-warm) 30%, transparent);
}

.asi-reviews__form-card .stars a:focus-visible {
	outline: 2px solid var(--asi-rev-blue);
	outline-offset: 4px;
}

.asi-reviews__rating-label {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--asi-rev-muted);
	min-inline-size: 7ch;
	transition: color var(--asi-transition, 200ms);
}
.asi-reviews__rating-label[data-state="set"] {
	color: var(--asi-rev-warm);
	font-weight: 600;
}
.asi-reviews__rating-label[data-state="hover"] {
	color: var(--asi-rev-text);
	font-weight: 600;
}

/* Textarea */
.asi-reviews__textarea-row {
	position: relative;
	margin: 0 0 clamp(1.25rem, 3vw, 1.5rem);
}
.asi-reviews__textarea-row > label {
	display: block;
	font-weight: 600;
	font-size: 0.875rem;
	color: var(--asi-rev-text);
	margin-block-end: 0.5rem;
}
.asi-reviews__form-card textarea#comment {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	box-sizing: border-box;
	min-block-size: 140px;
	/* Extra bottom padding leaves clearance for the counter pill (inline-start)
	   and the browser resize handle (inline-end) at the same row height. */
	padding: 0.875rem 1rem 2.25rem;
	border-radius: 12px;
	border: 1px solid var(--asi-rev-border);
	background: var(--asi-rev-input-bg);
	font: inherit;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--asi-rev-text);
	resize: vertical;
	transition: border-color var(--asi-transition, 200ms), box-shadow var(--asi-transition, 200ms);
	box-shadow: none;
}
.asi-reviews__form-card textarea#comment::placeholder {
	color: color-mix(in srgb, var(--asi-rev-text) 40%, transparent);
}
.asi-reviews__form-card textarea#comment:focus {
	border-color: var(--asi-rev-blue);
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--asi-rev-blue) 12%, transparent);
}

/* Counter — pinned to the textarea's inline-START so it never clashes with
   the browser's resize handle, which lives at the inline-END corner (WebKit
   mirrors it to bottom-left under RTL). Do NOT set `direction: ltr` here:
   that would make `inset-inline-start` resolve to the LTR-start (visual left)
   for THIS element regardless of document direction — landing the counter
   right on top of the RTL-mirrored resize handle. unicode-bidi: isolate
   keeps the digits from being reordered by surrounding Arabic context. */
.asi-reviews__counter {
	position: absolute;
	inset-block-end: 0.5rem;
	inset-inline-start: 0.75rem;
	font-size: 0.75rem;
	color: var(--asi-rev-muted);
	font-variant-numeric: tabular-nums;
	pointer-events: none;
	background: var(--asi-rev-input-bg);
	padding: 0.125rem 0.5rem;
	border-radius: 999px;
	unicode-bidi: isolate;
	box-shadow: 0 0 0 4px var(--asi-rev-input-bg); /* mask the textarea border behind it */
}
.asi-reviews__counter--near { color: var(--asi-rev-warm); }
.asi-reviews__counter--over { color: #DC2626; }

/* Name + email row.
   minmax(0, 1fr) forces strict 50/50 columns — plain `1fr 1fr` has an implicit
   min-width: auto that lets <input size="30"> push one column wider than the
   other, which is what produced the overlapping fields in the bug screenshot. */
.asi-reviews__form-fields {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 1rem;
	margin-block-end: clamp(1.25rem, 3vw, 1.5rem);
}
@container (max-width: 480px) {
	.asi-reviews__form-fields { grid-template-columns: minmax(0, 1fr); }
}
.asi-reviews__form-card .comment-form-author,
.asi-reviews__form-card .comment-form-email {
	margin: 0;
	min-inline-size: 0; /* let the grid cell shrink below content width */
}
.asi-reviews__form-card .comment-form-author label,
.asi-reviews__form-card .comment-form-email label {
	display: block;
	font-weight: 600;
	font-size: 0.8125rem;
	color: var(--asi-rev-text);
	margin-block-end: 0.375rem;
}
.asi-reviews__form-card input[type="text"],
.asi-reviews__form-card input[type="email"] {
	display: block;
	inline-size: 100%;
	max-inline-size: 100%;
	box-sizing: border-box;
	padding: 0.75rem 0.9375rem;
	border-radius: 10px;
	border: 1px solid var(--asi-rev-border);
	background: var(--asi-rev-input-bg);
	font: inherit;
	font-size: 0.9375rem;
	color: var(--asi-rev-text);
	transition: border-color var(--asi-transition, 200ms), box-shadow var(--asi-transition, 200ms);
	box-shadow: none;
}
.asi-reviews__form-card input[type="text"]:focus,
.asi-reviews__form-card input[type="email"]:focus {
	border-color: var(--asi-rev-blue);
	outline: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--asi-rev-blue) 12%, transparent);
}

/* Cookies-consent — WP injects this automatically; override its enormous default
   typography (some block themes inherit from .wp-block-* heading scales). */
.asi-reviews__form-card .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0 0 clamp(1rem, 2.5vw, 1.25rem);
	padding: 0;
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--asi-rev-muted);
}
.asi-reviews__form-card .comment-form-cookies-consent input[type="checkbox"] {
	inline-size: 1rem;
	block-size: 1rem;
	margin: 0.2rem 0 0;
	flex-shrink: 0;
	accent-color: var(--asi-rev-blue);
	cursor: pointer;
}
.asi-reviews__form-card .comment-form-cookies-consent label {
	font-size: 0.8125rem;
	font-weight: 400;
	line-height: 1.55;
	color: var(--asi-rev-muted);
	margin: 0;
	padding: 0;
	cursor: pointer;
	flex: 1 1 auto;
	min-inline-size: 0;
	text-wrap: pretty;
	letter-spacing: 0;
}

/* Submit row + button */
.asi-reviews__form-card .form-submit {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	gap: 0.875rem;
	margin: 0;
	padding-block-start: 0.5rem;
	border-block-start: 1px solid var(--asi-rev-hair);
	padding-block-start: clamp(1.25rem, 3vw, 1.5rem);
}

.asi-reviews__submit {
	appearance: none;
	border: none;
	background: var(--asi-rev-blue);
	color: #fff;
	font: inherit;
	font-weight: 600;
	font-size: 0.9375rem;
	padding: 0.75rem 1.5rem;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	letter-spacing: 0.005em;
	transition: background-color var(--asi-transition, 200ms), transform var(--asi-transition, 200ms), box-shadow var(--asi-transition, 200ms);
	box-shadow:
		var(--asi-shadow-sm, 0 1px 2px rgba(15,23,42,0.05)),
		inset 0 32px 24px rgba(255,255,255,0.05),
		inset 0 2px 1px rgba(255,255,255,0.25),
		inset 0 -2px 1px rgba(0,0,0,0.2);
}
.asi-reviews__submit:hover {
	background: color-mix(in srgb, var(--asi-rev-blue) 92%, black);
	transform: translateY(-1px);
	box-shadow:
		var(--asi-shadow-md, 0 4px 12px rgba(15,23,42,0.08)),
		inset 0 32px 24px rgba(255,255,255,0.05),
		inset 0 2px 1px rgba(255,255,255,0.25),
		inset 0 -2px 1px rgba(0,0,0,0.2);
}
.asi-reviews__submit:active { transform: translateY(0); }
.asi-reviews__submit:focus-visible {
	outline: 2px solid var(--asi-rev-blue);
	outline-offset: 3px;
}

.asi-reviews__submit-arrow {
	transition: transform var(--asi-transition, 200ms);
}
[dir="rtl"] .asi-reviews__submit-arrow { transform: scaleX(-1); }
.asi-reviews__submit:hover .asi-reviews__submit-arrow { transform: translateX(2px); }
[dir="rtl"] .asi-reviews__submit:hover .asi-reviews__submit-arrow { transform: scaleX(-1) translateX(-2px); }

/* Must-log-in & verification notice */
.asi-reviews__must-log-in,
.asi-reviews__verification {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	background: color-mix(in srgb, var(--asi-rev-blue) 6%, white);
	border: 1px solid color-mix(in srgb, var(--asi-rev-blue) 14%, transparent);
	border-radius: 14px;
	padding: 0.875rem 1.125rem;
	color: var(--asi-rev-text);
	font-size: 0.9375rem;
	margin-block-start: 1.5rem;
}
.asi-reviews__verification svg { color: var(--asi-rev-blue); flex-shrink: 0; }
.asi-reviews__must-log-in a { color: var(--asi-rev-blue); font-weight: 600; }

/* Tajawal ascender breathing room for Arabic */
:lang(ar) .asi-reviews__form-heading,
:lang(ar) .asi-reviews__intro strong,
:lang(ar) .asi-reviews__score-number { padding-block-start: 0.1em; }
/* Arabic label headings inside the form-card pick up Tajawal — give them
   a touch of vertical breathing room so descenders don't crowd the inputs. */
:lang(ar) .asi-reviews__rating-row > label,
:lang(ar) .asi-reviews__textarea-row > label,
:lang(ar) .asi-reviews__form-card .comment-form-author label,
:lang(ar) .asi-reviews__form-card .comment-form-email label { padding-block-start: 0.06em; }
:lang(ar) .asi-reviews__form-card .comment-form-cookies-consent label { line-height: 1.7; }

/* Required-asterisk spacing — small visual fix in RTL */
[dir="rtl"] .asi-reviews__form-card .required { margin-inline-start: 0.25rem; }

/* Entrance — restrained */
@media (prefers-reduced-motion: no-preference) {
	.asi-reviews__item {
		animation: asi-rev-fade 480ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	}
	.asi-reviews__item:nth-child(2) { animation-delay: 60ms; }
	.asi-reviews__item:nth-child(3) { animation-delay: 120ms; }
	.asi-reviews__item:nth-child(n+4) { animation-delay: 180ms; }

	.asi-reviews__form-card {
		animation: asi-rev-fade 600ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
		animation-delay: 200ms;
	}
}
@keyframes asi-rev-fade {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Override leftover legacy rules from custom.css so the new structure
   doesn't inherit the previous oversized headings. */
body.single-product .asi-reviews #review_form #respond .comment-form-rating label {
	font-weight: 600;
	font-size: 0.9375rem;
}
body.single-product .asi-reviews #review_form #respond textarea {
	border-radius: 12px;
	border: 1px solid var(--asi-rev-border);
}