/* =============================================================================
   Recenziile — nod Figma 18358:12512
   -----------------------------------------------------------------------------
   Namespace `.inco-rev*`, distinct de `.inco-pdp*`: recenziile ajung și în alte
   locuri (pagină dedicată, widget), iar atunci n-au `.inco-pdp` deasupra.
   Variabilele se moștenesc de la pagină, cu fallback propriu.

   🔑 Regulile pe `button` și `select` sunt scrise ca `.inco-rev button.x` —
   (0,2,1) — pentru că resetul paginii de produs e `.inco-pdp__main button`
   (0,2,0), iar tema mai adaugă `.woocommerce button` (0,2,0). O singură clasă
   n-ar fi ajuns. Vezi lecția din 31 iulie: se declară TOATE proprietățile
   stării, nu doar cea care se vede în captură.

   🔴 20 august: (0,2,1) NU mai ajunge, și de mult. Resetul din `single-product.css`
   e acum `.inco-pdp__main button:not(.inco-product-card__tools > *)`, iar `:not()`
   ia specificitatea argumentului — deci a urcat la (0,2,1), exact cât regula
   noastră, și fișierul lui se încarcă DUPĂ. Măsurat pe live: butonul „Adaugă
   recenzia ta" ieșea `padding: 0`, fundal transparent, fără rază — adică nu
   arăta deloc a buton. Nimic nu se plângea, fiindcă butonul tot se vedea.
   → 🔑 O regulă care a fost destul de grea odată nu rămâne destul de grea:
     `:not()` adăugat în resetul VECINULUI i-a schimbat greutatea, nu nouă.
   Butoanele și câmpurile își dublează acum clasa — (0,3,1), la fel de mult
   ca un prefix, dar fără să ceară un strămoș care în afara paginii de produs
   nu există.
   ========================================================================== */
.inco-rev {
	--rev-ink:    var(--pdp-ink, #0A435C);
	/* „inputs-palceholder" din Figma. Nu există în kitul Elementor, de aceea e
	   scris direct — `--pdp-muted` e #648696, alt gri, și se vedea diferit. */
	--rev-muted:  #53798A;
	--rev-line:   var(--pdp-border, #C4D2D7);
	--rev-accent: var(--cyan, #056E9B);
	--rev-star:   #F5A623;
	--rev-gap:    clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);   /* 24 → 32 */

	display: flex;
	flex-direction: column;
	gap: var(--rev-gap);
	font-size: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);    /* 14 → 16 */
	color: var(--rev-ink);
}

/* ---------------------------------------------------------------- rezumat */
.inco-rev__summary {
	display: grid;
	/*
	 * 🔑 Coloana din stânga e o LĂȚIME, nu `auto`. Cu `auto` s-ar fi dimensionat
	 * după cel mai lat copil — adică 193px cât butonul cu formularul închis și
	 * 216px cât grila de stele cu el deschis. Barele din dreapta ar fi sărit 22px
	 * lateral exact în clipa în care apeși „Adaugă recenzia ta", iar în machetă
	 * ele nu se mișcă deloc între cele două stări.
	 * Valoarea vine din chiar grila de stele: 3 × 62 + 2 × 16 = 216.
	 */
	--rev-col1: 216px;
	grid-template-columns: minmax(0, var(--rev-col1)) minmax(0, 1fr);
	column-gap: 36px;
	row-gap: 32px;
	align-items: start;
}
.inco-rev__score { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }

/* „4,8" e accent, „din 5" e gri — două culori, deci două elemente. */
.inco-rev__average {
	margin: 0;
	font-size: clamp(1.75rem, 1.5833rem + 0.7407vw, 2.25rem);  /* 28 → 36 */
	line-height: 1;
	font-weight: 600;
}
.inco-rev__average-value { font-weight: 600; color: var(--rev-accent); }
.inco-rev__average-of    { font-weight: 600; color: var(--rev-muted); }

.inco-rev button.inco-rev__add.inco-rev__add,
.inco-rev button.inco-rev__add.inco-rev__add:hover,
.inco-rev button.inco-rev__add.inco-rev__add:focus,
.inco-rev button.inco-rev__add.inco-rev__add:active,
.inco-rev button.inco-rev__submit.inco-rev__submit,
.inco-rev button.inco-rev__submit.inco-rev__submit:hover,
.inco-rev button.inco-rev__submit.inco-rev__submit:focus,
.inco-rev button.inco-rev__submit.inco-rev__submit:active {
	margin-block-start: 12px;
	padding: 13px 24px;
	/* Macheta dă 42 la ambele lățimi. Fontul se micșorează pe telefon, deci
	   înălțimea dedusă din padding + linie ar fi ieșit 40. */
	min-block-size: 42px;
	border: 0;
	border-radius: 8px;
	background-image: none;
	color: var(--white-bg, #FAFCFF);
	font-family: inherit;
	font-size: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);
	font-weight: 500;
	line-height: 1;
	/*
	 * 🔴 AICI NU se declară `inline-size`. Blocul ăsta enumeră toate cele patru
	 * stări ca să nu i le repicteze tema — dar tocmai de aia varianta lui `:hover`
	 * cântărește (0,4,1), mai mult decât orice regulă de lățime scrisă mai jos
	 * pe o singură stare (0,3,1). Cu `inline-size: auto` aici, butonul de trimis
	 * își pierdea lățimea de 100% EXACT sub mouse și se strângea pe text.
	 * → 🔑 O apărare care enumeră stările devine, fără să vrea, un blocaj pentru
	 *   propriile tale reguli de mai jos. Lățimea se declară per buton, o dată,
	 *   fără pseudo-clasă — și atunci se aplică în toate stările.
	 */
	block-size: auto;
	cursor: pointer;
	transition: background-color .25s ease;
}
.inco-rev button.inco-rev__add.inco-rev__add        { inline-size: fit-content; background-color: var(--rev-accent); }
.inco-rev button.inco-rev__add.inco-rev__add:hover  { background-color: var(--darker-cyan, #044F70); }
.inco-rev button.inco-rev__submit.inco-rev__submit       { background-color: var(--rev-accent); }
.inco-rev button.inco-rev__submit.inco-rev__submit:hover { background-color: var(--darker-cyan, #044F70); }

/*
 * ⚠️ Dezactivat, butonul RĂMÂNE pe ecran — așa cere macheta, și tot ea repară
 * bugul de dinainte, unde arăta viu și nu făcea nimic. Culorile sunt măsurate
 * pe machetă. Se declară toate cele patru stări, altfel `:hover` îl reaprinde.
 */
.inco-rev button.inco-rev__add.inco-rev__add[disabled],
.inco-rev button.inco-rev__add.inco-rev__add[disabled]:hover,
.inco-rev button.inco-rev__add.inco-rev__add[disabled]:focus,
.inco-rev button.inco-rev__add.inco-rev__add[disabled]:active {
	background-color: var(--rev-line);
	color: var(--rev-muted);
	cursor: not-allowed;
}

/* --------------------------------------------------------------- histogramă */
.inco-rev__bars { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.inco-rev__bar { display: grid; grid-template-columns: auto auto minmax(0, 1fr) 81px; align-items: center; gap: 6px; }
/*
 * 🔑 Lățime fixă pe cifră, ca în machetă (11px).
 * Fiecare bară e propriul grid, deci coloana `auto` se măsura separat pe fiecare
 * rând — iar „1" e mai îngust decât „5". Rezultatul: stelele ieșeau din linie
 * cu până la 3px. Într-un singur grid comun n-ar fi apărut, dar atunci n-am mai
 * fi putut înlocui histograma dintr-o bucată prin AJAX.
 */
.inco-rev__bar-label { inline-size: 11px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.inco-rev__bar-star { display: inline-flex; color: var(--rev-star); }
.inco-rev__bar-track { block-size: 8px; border-radius: 999px; background: var(--rev-line); overflow: hidden; }
.inco-rev__bar-fill { display: block; block-size: 100%; border-radius: 999px; background: var(--rev-fill, #59B194); }
/*
 * Același verde, tot mai stins de la 5 la 1 — decizia lui Seba.
 * 5 și 4 sunt exact valorile din machetă; 3, 2 și 1 continuă amestecul cu alb
 * pe aceeași pantă. Nu cobor mai jos de `#BBDDD5`: sub asta bara ar deveni
 * mai deschisă decât șina pe care stă și n-ar mai citi nimeni umplerea.
 */
.inco-rev__bar[data-stars="5"] { --rev-fill: #0B8669; }
.inco-rev__bar[data-stars="4"] { --rev-fill: #59B194; }
.inco-rev__bar[data-stars="3"] { --rev-fill: #80C0B1; }
.inco-rev__bar[data-stars="2"] { --rev-fill: #9DCFC3; }
.inco-rev__bar[data-stars="1"] { --rev-fill: #BBDDD5; }
.inco-rev__bar-count { color: var(--rev-ink); text-decoration: underline; white-space: nowrap; line-height: 1.1; }
.inco-rev__bar-count:hover { color: var(--rev-accent); }
.inco-rev__bar.is-active .inco-rev__bar-count { font-weight: 600; color: var(--rev-accent); }

/* --------------------------------------------------------------- controale */
.inco-rev__controls {
	display: flex; flex-wrap: wrap; align-items: center;
	gap: clamp(1rem, 0.5rem + 2.2222vw, 2.5rem);               /* 16 → 40 */
	padding-block: 16px;
	border-block: 1px solid var(--rev-line);
}
.inco-rev__control { display: inline-flex; align-items: center; gap: 16px; color: var(--rev-ink); font-weight: 500; white-space: nowrap; }
/*
 * Săgeata e desenată de noi, nu cea nativă: aceea are alt desen și alt spațiu
 * în fiecare browser, deci nu se putea alinia. Culoarea e scrisă în SVG —
 * `currentColor` nu funcționează într-o imagine de fundal.
 * Spațiul din dreapta e 6 (margine) + 16 (iconiță) + 8 (distanță) = 30px.
 */
.inco-rev .inco-rev__control select,
.inco-rev .inco-rev__control select:hover,
.inco-rev .inco-rev__control select:focus {
	-webkit-appearance: none; appearance: none;
	block-size: 32px; padding: 0 30px 0 8px;
	border: 1px solid var(--rev-line); border-radius: 6px;
	background-color: #fff; color: var(--rev-muted);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2353798A' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 6px center;
	background-size: 16px 16px;
	font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
}
/* Butonul „Aplică" există pentru cazul fără JS. Cu JS, selectoarele trimit singure. */
.inco-pdp.is-js .inco-rev__apply { display: none; }
.inco-rev__apply { padding: 8px 14px; border: 1px solid var(--rev-line); border-radius: 8px; background: #fff; font: inherit; cursor: pointer; }

/* -------------------------------------------------------------------- listă */
/*
 * Prima recenzie stă la 16px sub linia de jos a barei de sortare — exact cât e
 * și paddingul barei, ca linia să pară la mijloc între cele două.
 * Cerință Seba, 4 august.
 */
.inco-rev__list { display: flex; flex-direction: column; gap: var(--rev-gap); margin: 16px 0 0; padding: 0; list-style: none; }
.inco-rev__item {
	display: grid; grid-template-columns: minmax(0, 200px) minmax(0, 1fr);
	gap: clamp(1rem, 0.3333rem + 2.963vw, 3rem);               /* 16 → 48 */
	padding-block: 0 var(--rev-gap);
	border-block-end: 1px solid var(--rev-line);
}
.inco-rev__item:last-child { border-block-end: 0; padding-block-end: 0; }
.inco-rev__who { display: flex; flex-direction: column; gap: 16px; align-items: flex-start; }
.inco-rev__ident { display: flex; flex-direction: column; gap: 8px; }
.inco-rev__who p { margin: 0; }
.inco-rev__author { font-weight: 600; letter-spacing: -.02em; }
.inco-rev__date { color: var(--rev-muted); font-size: 14px; font-weight: 500; letter-spacing: -.02em; }
.inco-rev__verified { display: flex; align-items: center; gap: 4px; color: var(--rev-ink); }
.inco-rev__verified svg { color: var(--green, #0B8669); }
.inco-rev__body { display: flex; flex-direction: column; gap: 16px; }
.inco-rev__title { margin: 0; font-weight: 600; letter-spacing: -.02em; }
.inco-rev__text { color: var(--rev-muted); line-height: 1.4; }
.inco-rev__text p { margin: 0 0 .5em; }
.inco-rev__text p:last-child { margin: 0; }
.inco-rev__empty { margin: 16px 0 0; color: var(--rev-muted); }

/* -------------------------------------------------------------------- stele */
/*
 * 🔴 `fit-content` NU e cosmetică, e chiar corectitudinea umplerii.
 * Umplerea e `inline-size: N%` pe stratul din față, iar procentul se ia din
 * LĂȚIMEA CONTAINERULUI. Cutia trebuie deci să măsoare exact cele cinci glife:
 * atunci 80% cad fix pe a patra stea, prin construcție.
 * În cardul de recenzie containerul e un flex pe coloană, care întinde copiii
 * la toată lățimea — 530px în loc de 88 — deci „80%" acoperea toate cinci și
 * o recenzie de 4 stele se vedea ca 5. În rezumat ieșea bine doar fiindcă
 * părintele lui are din întâmplare `align-items: flex-start`.
 * → 🔑 O componentă a cărei corectitudine depinde de alinierea părintelui e
 *   corectă din noroc. Cutia și-o declară singură.
 */
.inco-rev__stars { position: relative; display: inline-block; inline-size: fit-content; line-height: 1; letter-spacing: .1em; white-space: nowrap; }
.inco-rev__stars-bg { color: var(--rev-line); }
.inco-rev__stars-fg {
	position: absolute; inset-block-start: 0; inset-inline-start: 0;
	inline-size: var(--inco-rev-fill, 0%); overflow: hidden; white-space: nowrap;
	color: var(--rev-star);
}
.inco-rev__stars--big { font-size: 20px; letter-spacing: .05em; }

/* ---------------------------------------------------------------- paginare */
/* Paginarea: 32px de restul secțiunii pe desktop, 24 pe mobil. */
/*
 * Componenta e comuna cu arhiva → src/Pagination.php. Clasele s-au aliniat la
 * conventia ei: `__item` in loc de `.inco-rev__page`, `__nums` / `__arrows` in
 * loc de `-nums` / `-arrows`, plus `__gap` pentru elipsa, care inainte nu exista.
 */
.inco-rev__pages { display: flex; justify-content: center; align-items: center; gap: 16px; margin-block-start: var(--rev-gap); }
.inco-rev__pages__arrows { display: inline-flex; align-items: center; gap: 8px; }
.inco-rev__pages__nums   { display: inline-flex; align-items: center; gap: 16px; }
.inco-rev__pages__item {
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 20px; font-weight: 500; line-height: 1;
	color: var(--rev-muted); text-decoration: none;
}
.inco-rev__pages__item:hover { color: var(--rev-accent); }
.inco-rev__pages__item.is-current { color: var(--rev-accent); font-weight: 500; }
.inco-rev__pages__item.is-disabled { opacity: .4; }
.inco-rev__pages__item svg { display: block; }
.inco-rev__pages__gap { color: var(--rev-muted); font-size: 20px; line-height: 1; }

/* ------------------------------------------------------------ notificare */
/*
 * Pastila chihlimbarie de sub rezumat — nod „Notification" din machetă.
 * Culorile sunt măsurate pe machetă, nu alese: fundal #CE7E14, text #FAFCFF.
 * Nu e un token de proiect, e singurul loc din site cu chihlimbariu.
 */
.inco-rev__notice {
	display: flex;
	align-items: center;
	gap: 8px;
	inline-size: fit-content;
	max-inline-size: 100%;
	margin: 0 auto;
	padding: 6px 16px;
	border-radius: 999px;
	background: #CE7E14;
	color: #FAFCFF;
	font-size: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);   /* 12 → 14 */
	font-weight: 600;
	line-height: 20px;
}
.inco-rev__notice-icon { display: flex; flex: 0 0 auto; }
.inco-rev__notice-icon svg { display: block; }

/* --------------------------------------------------------------- formular */
/*
 * 🔑 Formularul intră în GRILA rezumatului, nu sub ea: în machetă câmpurile
 * încep exact unde încep barele de deasupra. `subgrid` face din asta o
 * proprietate structurală — două seturi de coloane `auto` s-ar potrivi azi și
 * s-ar despărți la primul text mai lung sau la prima traducere.
 */
.inco-rev__form {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: subgrid;
	grid-template-areas:
		"stele campuri"
		"buton campuri";
	grid-template-rows: 1fr auto;
	column-gap: inherit;
	row-gap: 16px;
	margin: 0;
	border: 0;
}
.inco-rev__form[hidden] { display: none; }

.inco-rev__form-stars   { grid-area: stele; min-inline-size: 0; margin: 0; padding: 0; border: 0; }
.inco-rev__form-fields  { grid-area: campuri; min-inline-size: 0; display: flex; flex-direction: column; gap: 24px; }
.inco-rev__form-actions { grid-area: buton; align-self: end; }
/* 🔵 Butonul de TRIMIS umple coloana (216), cel care DESCHIDE formularul se
   strânge pe text (193). Așa e în machetă, şi are sens: primul încheie o
   acțiune începută, al doilea o propune. */
.inco-rev button.inco-rev__submit.inco-rev__submit { inline-size: 100%; }

.inco-rev__form-legend { margin: 0 0 16px; padding: 0; font-size: inherit; font-weight: 400; color: var(--rev-ink); }
.inco-rev__req { color: inherit; }

/* Grupul de stele: 3 pe rând pe desktop, 4 pe telefon — ca în machetă.
   Coloanele sunt declarate, nu lăsate să se împacheteze: la wrap natural,
   numărul de pe rând ar depinde de lățimea traducerii. */
.inco-rev__opts {
	display: grid;
	grid-template-columns: repeat(3, auto);
	justify-content: start;
	column-gap: 16px;
	row-gap: 16px;
}
.inco-rev__opt {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	line-height: 1;
}
.inco-rev__opt-num  { font-weight: 500; color: var(--rev-ink); }
.inco-rev__opt-star { font-size: 16px; line-height: 1; color: var(--rev-star); }

/* Butonul radio, desenat de noi: nativul are alt desen în fiecare browser,
   deci nu se poate alinia cu restul paginii. */
.inco-rev__opt input[type="radio"] {
	position: absolute;
	inline-size: 1px; block-size: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}
.inco-rev__opt-dot {
	inline-size: 22px; block-size: 22px;
	flex: 0 0 auto;
	border: 1px solid var(--rev-line);
	border-radius: 50%;
	background: var(--inco-co-tint, #E8F8FF);
	box-sizing: border-box;
}
.inco-rev__opt input:checked + .inco-rev__opt-dot {
	border-color: var(--rev-accent);
	border-width: 2px;
	background:
		radial-gradient(circle, var(--rev-accent) 0 5px, transparent 5px);
}
.inco-rev__opt input:focus-visible + .inco-rev__opt-dot {
	outline: 2px solid var(--rev-accent);
	outline-offset: 2px;
}

/*
 * Câmpurile: chenar cu eticheta așezată PE el.
 * ⚠️ Eticheta e mereu sus, și în machetă, și aici — chiar când câmpul e gol și
 * arată un exemplu. Deci nu e nevoie de `:placeholder-shown` și nici de JS:
 * e o etichetă statică, nu una flotantă.
 */
.inco-rev__field { position: relative; margin: 0; }
.inco-rev__field > label {
	position: absolute;
	inset-block-start: 0;
	inset-inline-start: 12px;
	transform: translateY(-50%);
	padding-inline: 4px;
	background: var(--inco-co-bg, #FAFCFF);
	font-size: 12px;
	line-height: 1;
	color: var(--rev-muted);
	pointer-events: none;
}
.inco-rev .inco-rev__field.inco-rev__field > input,
.inco-rev .inco-rev__field.inco-rev__field > textarea {
	/* ⚠️ `block`, nu implicitul `inline-block`: altfel sub textarea rămâne golul
	   de descendent al liniei (~6px), iar butonul din coloana stângă, aliniat la
	   baza grilei, ieșea cu atât sub caseta de text. */
	display: block;
	inline-size: 100%;
	box-sizing: border-box;
	padding: 10px 16px;
	border: 1px solid var(--rev-muted);
	border-radius: 8px;
	background: var(--inco-co-bg, #FAFCFF);
	font: inherit;
	color: var(--rev-ink);
}
.inco-rev .inco-rev__field.inco-rev__field > input { block-size: 40px; }
.inco-rev .inco-rev__field.inco-rev__field > textarea { min-block-size: 120px; resize: vertical; }
.inco-rev .inco-rev__field.inco-rev__field > input::placeholder,
.inco-rev .inco-rev__field.inco-rev__field > textarea::placeholder { color: var(--rev-muted); opacity: 1; }
.inco-rev .inco-rev__field.inco-rev__field > input:focus-visible,
.inco-rev .inco-rev__field.inco-rev__field > textarea:focus-visible {
	outline: none;
	border-color: var(--rev-accent);
	box-shadow: var(--inco-co-shadow-focus, 0 0 0 3px rgba(5, 110, 155, 0.15));
}

@media (max-width: 767.98px) {
	.inco-rev__summary { grid-template-columns: minmax(0, 1fr); }
	.inco-rev__item    { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.inco-rev__bar     { grid-template-columns: auto auto minmax(0, 1fr) auto; }
	.inco-rev__controls { flex-direction: column; align-items: stretch; }
	.inco-rev__control { justify-content: space-between; }
	.inco-rev__control select { flex: 0 1 auto; min-inline-size: 0; }

	/* Pe telefon totul e o coloană, iar butonul coboară SUB câmpuri — ca în
	   machetă. Ordinea din DOM e deja asta, deci ariile doar se stivuiesc. */
	.inco-rev__form {
		grid-template-areas: "stele" "campuri" "buton";
		grid-template-rows: auto auto auto;
		row-gap: 24px;
	}
	.inco-rev__opts { grid-template-columns: repeat(4, auto); }

	/* Textul trece pe două rânduri, deci pastila umple lățimea și se centrează. */
	.inco-rev__notice {
		inline-size: 100%;
		padding: 4px 16px;
		text-align: center;
		line-height: 1.35;
	}

	.inco-rev button.inco-rev__add.inco-rev__add,
	.inco-rev button.inco-rev__submit.inco-rev__submit { inline-size: 100%; }
}

/* ------------------------------------------------------------- încărcare */
/* Semn discret că se lucrează, fără să sară înălțimea listei. */
.inco-rev.is-loading .inco-rev__results { opacity: .55; pointer-events: none; transition: opacity .15s ease; }