/* =============================================================================
   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ă.
   ========================================================================== */
.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;
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	gap: clamp(1.5rem, 1rem + 2.2222vw, 3rem);                 /* 24 → 48 */
	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 button.inco-rev__add:hover,
.inco-rev button.inco-rev__add:focus,
.inco-rev button.inco-rev__add:active {
	margin-block-start: 12px;
	padding: 13px 24px;
	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;
	inline-size: auto;
	block-size: auto;
	cursor: pointer;
	transition: background-color .25s ease;
}
.inco-rev button.inco-rev__add        { background-color: var(--rev-accent); }
.inco-rev button.inco-rev__add:hover  { background-color: var(--darker-cyan, #044F70); }

/* --------------------------------------------------------------- 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 */
.inco-rev__stars { position: relative; display: inline-block; 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; }

/* ------------------------------------------------------------- formular/gate */
.inco-rev__gate { padding: var(--rev-gap); border: 1px solid var(--rev-line); border-radius: 12px; background: var(--light-cyan, #EAF9FF); }
.inco-rev__gate-title { margin: 0 0 4px; font-weight: 600; }
.inco-rev__gate-text  { margin: 0; color: var(--rev-muted); }
.inco-rev__form { padding-block-start: var(--rev-gap); border-block-start: 1px solid var(--rev-line); }
.inco-rev__form .comment-form-inco-title label { display: block; margin-block-end: 4px; font-weight: 500; }
.inco-rev__form .comment-form-inco-title input,
.inco-rev__form textarea {
	inline-size: 100%; padding: 10px 12px;
	border: 1px solid var(--rev-line); border-radius: 8px; font: inherit;
}

@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; }
}

/* ------------------------------------------------------------- î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; }

/* ---------------------------------------------------------- fără recenzii */
/*
 * „0,0 din 5" pe un produs nerecenzat e o minciună în defavoarea lui.
 * Aici spunem doar că nu există recenzii — și invităm la prima.
 */
.inco-rev__none {
	margin: 0;
	font-size: clamp(1.125rem, 1.0833rem + 0.1852vw, 1.25rem);   /* 18 → 20 */
	font-weight: 600;
	line-height: 1.2;
	color: var(--rev-ink);
}
.inco-rev__none-hint { margin: 4px 0 0; color: var(--rev-muted); }
.inco-rev.is-empty .inco-rev__summary { grid-template-columns: minmax(0, 1fr); }