/* =========================================================================
   Inco Plus Compare — foaia globală.

   Ce e aici: pastila din header și starea „e în comparator" pe butoanele lui
   Inco Plus. Amândouă apar pe orice pagină, deci foaia se încarcă global.
   Tabelul e în `compare.css`, doar pe pagina lui.

   🔴 Toastul NU mai e aici. Mesajele comparatorului se desenează în stiva
   comună a pluginului — `assets/css/notificari.css` din `inco-plus`. Era
   duplicat anume, ca să meargă și fără pluginul de checkout; de la comasarea
   din 9 august pachetele nu se mai pot dezactiva separat, deci motivul
   duplicării dispăruse.

   ⚠️ BLINDAJ DE SPECIFICITATE — clasele dublate din selectoare NU sunt greșeli.

   Tema Hello Elementor se încarcă DUPĂ foile noastre și livrează:

     reset.css : [type=button],[type=submit]        → (0,1,0)
                 [type=button]:hover                → (0,2,0)
     theme.css : .page-content a                    → (0,1,1)  (text-decoration: underline)

   O singură clasă (0,1,0) pierde în fața lor. `.inco-cmp-btn.inco-cmp-btn`
   ajunge la (0,2,0) și (0,2,1) pe stare, deci câștigă fără `!important`.
   Aceeași soluție e documentată pe larg la finalul `base.css` din
   `inco-plus-checkout`; nu o reinventăm, o aplicăm.
   ========================================================================= */

.inco-cmp-pill,
.inco-cmp-btn {
	--inco-cmp-ink: #0A435C;
	--inco-cmp-ink-deep: #013465;
	--inco-cmp-primary: #056E9B;
	--inco-cmp-muted: #53798A;
	--inco-cmp-border: #C4D2D7;
	--inco-cmp-bg: #FAFCFF;
	--inco-cmp-tint: #E8F8FF;
	--inco-cmp-sale: #D73B3B;
	--inco-cmp-grad: linear-gradient(270deg, #013465 0%, #14A5A9 100%);
	--inco-cmp-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* Ascuns vizual, citit de cititoarele de ecran. */
.inco-cmp-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ═══════════════════════════════════════════════ Pastila din header ════ */

.inco-cmp-btn-bar {
	display: flex;
	align-items: center;
}

/*
 * 44×44, cât `.inco-wishlist-counter` al lui Inco Plus și cât pastila de cont.
 * Trei pastile una lângă alta trebuie să pară o serie; sursa de adevăr e
 * implementarea vecină, nu o a doua citire a machetei (care cere 42).
 *
 * Clasa dublată: e un `<a>` care poate ajunge în `div.page-content`, deci
 * `.page-content a` al temei (0,1,1) i-ar fi pus subliniere.
 */
.inco-cmp-pill.inco-cmp-pill {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--inco-cmp-tint);
	color: var(--inco-cmp-ink);
	line-height: 0;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .18s ease, color .18s ease;
}

.inco-cmp-pill.inco-cmp-pill:hover,
.inco-cmp-pill.inco-cmp-pill:focus-visible {
	background: var(--inco-cmp-primary);
	color: #FFFFFF;
	text-decoration: none;
}

.inco-cmp-pill.inco-cmp-pill:focus-visible {
	outline: 2px solid var(--inco-cmp-primary);
	outline-offset: 2px;
}

.inco-cmp-pill__icon {
	display: inline-flex;
}

.inco-cmp-pill__icon svg {
	display: block;
	width: 24px;
	height: 24px;
}

/*
 * Contorul: aceeași casetă ca badge-ul de favorite (16px, sus-dreapta), dar
 * albastru de brand, nu roșu. Roșul de la favorite e semnul „inimă"; pe
 * comparator ar fi citit ca alertă.
 *
 * `border-radius` cu `!important` la ei era o luptă cu tema; aici clasa dublată
 * face același lucru fără să ridice tonul.
 */
.inco-cmp-pill__badge.inco-cmp-pill__badge {
	position: absolute;
	top: 0;
	right: 0;
	box-sizing: border-box;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--inco-cmp-primary);
	color: #FFFFFF;
	font-family: var(--inco-cmp-font);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.inco-cmp-pill__badge.is-empty {
	display: none;
}

/* ═══════════════════════════════ Butoanele „Compară" ale lui Inco Plus ══

   🔑 Nu le redesenăm. Inco Plus le stilizează deja complet:

     .inco-product-card__tools .inco-compare-button        (pastilă pe card)
     .inco-pdp-summary__actions .inco-compare-button--wide (buton lat pe PDP)

   Aici se adaugă DOAR ce le lipsea: starea „produsul e în comparator" și
   starea de așteptare. Culorile stării active sunt albastrul de brand, ca la
   pastila din header — nu roșul pe care îl folosesc ei pentru inimă.

   Selectorul repetă contextul lor (`.inco-product-card__tools`,
   `.inco-pdp-summary__actions`) fiindcă regulile lor de bază sunt scrise cu acel
   context și cântăresc (0,2,0); o clasă simplă a noastră ar fi pierdut.
   ═════════════════════════════════════════════════════════════════════════ */

/*
 * 🔴 Specificitatea e MĂSURATĂ pe regulile lor, nu ghicită.
 *
 * `product-card.css` are:
 *   .inco-product-card__tools .inco-compare-button        → (0,2,0)  display, fundal, culoare
 *   .inco-product-card__tools .inco-compare-button:hover  → (0,3,0)  fundal, culoare
 *
 * `single-product.css` are:
 *   .inco-pdp-summary__actions .inco-compare-button--wide         → (0,2,0)
 *   .inco-pdp__main .inco-pdp-summary__actions ...--wide:hover    → (0,3,0)
 *
 * Starea activă trebuie să bată și hover-ul lor, altfel butonul „uita" că e
 * activ exact în clipa în care omul îl atinge cu mouse-ul. De aceea selectorul
 * de bază e la (0,4,0) și cel cu hover la (0,5,0) — nu din exces, ci pentru că
 * acolo e ștacheta.
 */
/*
 * 🔴 Starea activă e VERDE PLIN, nu tentă albastră. Corectat pe 10 aug 2026.
 *
 * Era `background: var(--inco-cmp-tint)` = **`#E8F8FF`** — exact fundalul de
 * repaus al butonului din card *(`--blue-card-fill-default`)*. Deci butonul
 * arăta identic bifat și nebifat: pe fundal alb părea că nu se întâmplă nimic.
 * Seba: *„când e bifat fundalul se face alb, ceea ce nu e bine, trebuie să se
 * facă verde"*.
 *
 * 🔑 Aceeași formă ca la inimă: **cerc plin, glif alb.** Cardul are deja tiparul
 * — repaus `#E8F8FF` cu glif albastru, hover albastru plin cu glif alb. Starea
 * activă e a treia treaptă, nu o a doua schemă de culori.
 *
 * ⚠️ Pe hover rămâne tot verde. N-am stare de hover peste activ în machetă și
 * n-o inventez → §4m. Ce nu voiam era saltul înapoi pe albastru, care făcea
 * butonul să pară că se dezactivează exact când pui mouse-ul pe el.
 */
/* PASTILA de pe card și de peste imaginea produsului: cerc plin verde, glif alb. */
.inco-product-card__tools.inco-product-card__tools .inco-compare-button.is-active,
.inco-product-card__tools.inco-product-card__tools .inco-compare-button.is-active:hover,
.inco-product-card__tools.inco-product-card__tools .inco-compare-button.is-active:focus,
.inco-product-card__tools.inco-product-card__tools .inco-compare-button.is-active:focus-visible {
	border-color: var(--green, #239278);
	background: var(--green, #239278);
	color: var(--white-bg, #FAFCFF);
}

.inco-product-card__tools.inco-product-card__tools .inco-compare-button.is-active svg {
	color: inherit;
}

/*
 * 🔴 BUTONUL LAT de pe pagina de produs: CONTUR verde, nu umplere.
 *
 * Cerut de Seba pe 14 august: *„aici trb sa fie starea ca la
 * `inco-wishlist-button` doar ca verde in loc de acel rosu"*. Butonul lat de
 * favorite, când produsul e în listă, rămâne alb cu chenarul și textul roșii
 * *(`#DB4F4F`)*; perechea lui trebuie să arate la fel, pe verde.
 *
 * ⚠️ Nu e o răzgândire față de 10 august. Atunci verdele PLIN a fost cerut
 * pentru PASTILĂ, unde nu există text și nici chenar: acolo umplerea e singurul
 * fel în care se vede starea. Butonul lat are și chenar, și etichetă, iar
 * perechea lui de alături e conturată — două forme diferite pentru aceeași
 * stare, una lângă alta, ar fi arătat ca două componente străine.
 *
 * `:focus` e în listă anume: pe telefon rămâne după atingere, iar resetul de
 * stări al paginii de produs face chenarul transparent exact atunci.
 */
.inco-pdp__main .inco-pdp-summary__actions .inco-compare-button.is-active,
.inco-pdp__main .inco-pdp-summary__actions .inco-compare-button.is-active:hover,
.inco-pdp__main .inco-pdp-summary__actions .inco-compare-button.is-active:focus,
.inco-pdp__main .inco-pdp-summary__actions .inco-compare-button.is-active:focus-visible,
.inco-pdp-summary__actions .inco-compare-button.is-active {
	border-color: var(--green, #239278);
	background: var(--pure-white, #fff);
	color: var(--green, #239278);
}

.inco-pdp__main .inco-pdp-summary__actions .inco-compare-button.is-active svg {
	color: inherit;
}

/*
 * Cât ține cererea: butonul se stinge, dar rămâne pe loc.
 *
 * Fără `pointer-events: none` o a doua apăsare rapidă ar fi trimis o comutare în
 * sens invers peste prima, iar răspunsurile ar fi sosit în ordine nedefinită.
 */
.inco-compare-button.is-loading {
	opacity: .55;
	pointer-events: none;
}

/*
 * Lista plină: butoanele produselor care NU sunt încă în listă se sting.
 *
 * ⚠️ Stinse, dar NU `pointer-events: none` — apăsarea trebuie să ajungă la JS,
 * ca să apară toastul care spune de ce nu se poate. Un buton pe care apeși și nu
 * se întâmplă absolut nimic e exact problema pe care pluginul ăsta rezolvă.
 */
.inco-compare-button.is-blocked {
	opacity: .45;
	cursor: not-allowed;
}

/* ══════════════════════════════════════════ Butonul comun al pluginului ══

   Folosit în capul paginii („Golește lista", „Adaugă toate în coș") și în starea
   goală. Definit în foaia globală, nu în `compare.css`: e nevoie de el și în
   toast-uri și în stări care pot apărea în afara paginii de comparator.

   Geometria butonului primar e copiată din `.inco-add-to-cart` al lui Inco Plus,
   la fel ca `.inco-btn--primary` din checkout: `gap: 0`, `padding: 0 1px 0 0`,
   etichetă cu `flex: 1` centrată, pastilă 44×40 rază 7px, glifă #013465 la 24px.
   Motivul e scris pe larg acolo; pe scurt, pe același ecran nu pot exista două
   butoane primare cu geometrii diferite.
   ═════════════════════════════════════════════════════════════════════════ */

.inco-cmp-btn.inco-cmp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	box-sizing: border-box;
	min-height: 42px;
	padding: 12px 16px;
	border: 1px solid transparent;
	border-radius: 8px;
	background-color: transparent;
	font-family: var(--inco-cmp-font);
	font-weight: 500;
	font-size: 16px;
	line-height: 1;
	letter-spacing: -0.01em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
	appearance: none;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}

.inco-cmp-btn.inco-cmp-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px rgba(5, 110, 155, .15);
}

.inco-cmp-btn.inco-cmp-btn[disabled],
.inco-cmp-btn.inco-cmp-btn.is-busy {
	opacity: .55;
	pointer-events: none;
}

.inco-cmp-btn--ghost.inco-cmp-btn--ghost {
	/*
	 * 🔑 Înălțime FIXĂ 42, nu dedusă din padding.
	 *
	 * Cu `9px` sus și jos ieșea 44 — două peste butonul principal, care e 42.
	 * Stau unul lângă altul în aceeași bară, deci diferența se vedea ca o
	 * treaptă. Padding-ul pe verticală iese, înălțimea se declară.
	 */
	block-size: 42px;
	padding: 0 16px;
	background: transparent;
	border-color: var(--inco-cmp-border);
	color: var(--inco-cmp-ink);
}

.inco-cmp-btn--ghost.inco-cmp-btn--ghost:hover,
.inco-cmp-btn--ghost.inco-cmp-btn--ghost:focus-visible {
	background: var(--inco-cmp-tint);
	border-color: var(--inco-cmp-primary);
	color: var(--inco-cmp-ink);
}

.inco-cmp-btn--solid.inco-cmp-btn--solid {
	background: var(--inco-cmp-primary);
	color: var(--inco-cmp-bg);
}

.inco-cmp-btn--solid.inco-cmp-btn--solid:hover,
.inco-cmp-btn--solid.inco-cmp-btn--solid:focus-visible {
	background: #045C82;
	color: var(--inco-cmp-bg);
}

/*
 * `line-height: 1.4`, nu 1: cutia unui text are înălțimea `line-height`, iar cu
 * 1 coada lui „ș" din „Golește" iese din cutie și e retezată de orice
 * `overflow: hidden` de pe traseu.
 */
.inco-cmp-btn__label {
	line-height: 1.4;
}

/* Pe butonul fantomă glifa n-are pastilă: stă lângă text. */
.inco-cmp-btn__glyph {
	display: inline-flex;
	flex: 0 0 auto;
	color: currentColor;
}

.inco-cmp-btn__glyph svg {
	width: 24px;
	height: 24px;
}

/*
 * ⚠️ Clasele sunt dublate și aici: un media query NU adaugă specificitate. După
 * ce `.inco-cmp-btn` a devenit `.inco-cmp-btn.inco-cmp-btn` (0,2,0), un selector
 * simplu scris mai jos nu mai putea anula tranziția — deci preferința de „mai
 * puțină mișcare" ar fi fost ignorată exact pe elementele care se animă.
 */
@media (prefers-reduced-motion: reduce) {
	.inco-cmp-btn.inco-cmp-btn,
	.inco-cmp-pill.inco-cmp-pill {
		transition: none;
	}
}

/*
 * 🔴 `--primary` NU mai există aici. Butonul „Adaugă toate în coș" folosește
 * acum chiar componenta noastră, `.inco-add-to-cart` într-un `.inco-cta`.
 *
 * Regulile de dinainte erau geometria noastră transcrisă de mână — și se
 * depărtase deja de original în cinci puncte: hover pe `filter: brightness(1.08)`
 * în loc de verdele `#0B8669` care intră din opacitate, pastila iconiței pe
 * `#FAFCFF` în loc de alb, `border: 1px solid transparent` care adăuga 2px,
 * eticheta cu `padding-inline-start: 16px` în loc de centrare pe `flex: 1`, și
 * fără `overflow: hidden`, deci colțul pastilei ieșea peste raza de 8px.
 *
 * Comentariul de aici spunea „geometria e copiată din `.inco-add-to-cart`".
 * Era adevărat în ziua în care a fost scris — și exact de asta nu copiem:
 * **două lucruri care trebuie să pară unul se depărtează la prima corectură.**
 */