/**
 * Back-in-stock alerts — subscription panel (DZ-4).
 *
 * @since 0.12.0
 * @since 0.12.22 Testi scuriti e ingranditi (segnalazione cliente: "non si legge nulla").
 */

/* ------------------------------------------------------------------
   La testata È il comando (0.12.22)

   Il riquadro intero è un <details> e questa è la sua linguetta: titolo,
   introduzione e chevron a destra, tutto cliccabile. Prima era un pulsante
   a pillola sotto l'introduzione, e da lì la segnalazione dell'utente —
   sembrava una seconda azione della scheda prodotto invece del coperchio
   di questo riquadro.

   Griglia e non flex perché il chevron deve stare a destra e centrato su
   DUE righe di testo di altezza variabile, senza contenitori d'appoggio:
   dentro un <summary> non ce ne stanno, il suo modello di contenuto
   ammette solo phrasing content più un'intestazione.
   ------------------------------------------------------------------ */
.esolver-stock-alert__header {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto auto;
	column-gap: 14px;
	align-items: center;
	cursor: pointer;

	/* Via il marker di default: governarlo a metà dà risultati diversi per browser. */
	list-style: none;
}

.esolver-stock-alert__header::-webkit-details-marker {
	display: none;
}

/* Titolo e introduzione sono le due righe della prima colonna: la loro collocazione sta
   con la tipografia, più sotto, per non avere due regole omonime lontane fra loro. */

/* Il conteggio delle varianti sta in coda al titolo (richiesta dell'utente): è una
   proprietà di ciò di cui si parla, non dell'azione. In tono minore perché il titolo
   resti il titolo. */
.esolver-stock-alert__count {
	font-weight: 400;
	font-size: 14px;
	color: var(--esolver-alert-ink-3, #5a6570);
}

/* Quanti avvisi sono già attivi, leggibile a riquadro chiuso: lo scrive il browser dopo
   la pittura delle caselle, e resta nascosto se non c'è nulla da dire. Verde come i
   conteggi dei gruppi — è la stessa informazione, a un'altezza diversa. */
.esolver-stock-alert__header-watching {
	grid-column: 2;
	grid-row: 1 / -1;
	color: #14663a;
	font-size: 13px;
	font-weight: 600;
	white-space: nowrap;
}

.esolver-stock-alert__header-watching[hidden] {
	display: none;
}

/* Chevron disegnato col bordo: nessuna dipendenza da font di icone. */
.esolver-stock-alert__chevron {
	grid-column: 3;
	grid-row: 1 / -1;
	width: 9px;
	height: 9px;
	margin-top: -4px;
	border-right: 2px solid var(--esolver-alert-ink-2, #404a54);
	border-bottom: 2px solid var(--esolver-alert-ink-2, #404a54);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.esolver-stock-alert[open] > .esolver-stock-alert__header .esolver-stock-alert__chevron {
	margin-top: 4px;
	transform: rotate(-135deg);
}

.esolver-stock-alert__header:hover .esolver-stock-alert__title,
.esolver-stock-alert__header:focus-visible .esolver-stock-alert__title {
	text-decoration: underline;
}

.esolver-stock-alert__header:hover .esolver-stock-alert__chevron,
.esolver-stock-alert__header:focus-visible .esolver-stock-alert__chevron {
	border-color: #4a3f95;
}

/* Aperto, la testata smette di essere l'intero riquadro e diventa la sua intestazione:
   serve lo stacco dal contenuto, che da chiuso sarebbe spazio in fondo al nulla. */
.esolver-stock-alert[open] > .esolver-stock-alert__header {
	margin-bottom: 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid #ece5d6;
}

@media (prefers-reduced-motion: reduce) {
	.esolver-stock-alert__chevron {
		transition: none;
	}
}

/* I tre inchiostri del pannello. Il secondario era #67707a a 12.5px su questo fondo
   beige: circa 4.9:1, cioè AA per un pelo — e il cliente ha comunque risposto "non si
   legge nulla" (05/08/2026). Il minimo di legge è la soglia sotto la quale un testo è
   inaccessibile, non quella sopra la quale è leggibile. Da qui in poi i livelli si
   distinguono per dimensione e peso, non per sbiadimento. */
.esolver-stock-alert {
	--esolver-alert-ink: #1f2933;   /* testo e istruzioni */
	--esolver-alert-ink-2: #404a54; /* spiegazioni: ~9:1 su questo fondo */
	--esolver-alert-ink-3: #5a6570; /* conteggi, chevron */

	border: 1px solid #e2e6ea;
	border-left: 4px solid #a8730a;
	border-radius: 6px;
	padding: 14px 18px;
	margin: 18px 0;
	background: #fdfbf6;
}

.esolver-stock-alert__title {
	grid-column: 1;
	grid-row: 1;
	margin: 0 0 4px;
	font-size: 16px;
}

/* Le due righe che restano sempre a video: sono il testo che decide se aprire o no il
   riquadro, quindi non possono essere le più chiare del riquadro.
   È uno <span> e non un <p> perché vive dentro il <summary> — vedi il commento nel
   render — quindi il blocco glielo dà il CSS. */
.esolver-stock-alert__intro {
	grid-column: 1;
	grid-row: 2;
	display: block;
	margin: 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--esolver-alert-ink-2, #404a54);
}

.esolver-stock-alert__items {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 10px;
	/* A t-shirt can have dozens of exhausted variants: keep the panel from swallowing
	   the page, and let the list scroll inside itself. */
	max-height: 220px;
	overflow-y: auto;
}

.esolver-stock-alert__item {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	color: var(--esolver-alert-ink, #1f2933);
	cursor: pointer;
}

.esolver-stock-alert__email-input {
	width: 100%;
	max-width: 320px;
}

/* Il segnaposto resta più chiaro del testo vero — non è contenuto — ma leggibile: il
   default dei browser è troppo pallido su questo fondo, e `opacity` va rimessa a 1
   perché Firefox lo sbiadisce per conto suo. */
.esolver-stock-alert__email-input::placeholder {
	color: #6b7684;
	opacity: 1;
}

.esolver-stock-alert__consent {
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--esolver-alert-ink-2, #404a54);
	margin: 8px 0;
}

.esolver-stock-alert__consent label {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	cursor: pointer;
}

.esolver-stock-alert__feedback {
	margin: 8px 0 0;
	font-size: 13.5px;
	color: var(--esolver-alert-ink, #1f2933);
	min-height: 1em;
}

.esolver-stock-alert__feedback.is-error {
	color: #b3261e;
}

/* La regola `.is-done`, che richiudeva il pannello dopo l'invio, è stata rimossa in
   0.12.10: non esiste più un invio da impedire due volte. Il pannello è la vista di cosa
   si sta monitorando e resta usabile sempre — era proprio quel richiudersi, alla
   granularità del pannello invece che del singolo articolo, a impedire di iscriversi a
   una seconda variante senza ricaricare la pagina (Q-30). */

/* Esito della verifica dell'indirizzo, e stato della sessione ospite. */
.esolver-stock-alert__verified {
	margin: 0 0 10px;
	padding: 8px 10px;
	border-radius: 4px;
	background: #e8f5ec;
	color: #14663a;
	font-size: 13.5px;
}

.esolver-stock-alert__verified.is-error {
	background: #fdecea;
	color: #b3261e;
}

.esolver-stock-alert__session {
	margin: 0 0 10px;
	font-size: 13.5px;
	color: var(--esolver-alert-ink-2, #404a54);
}

/* Account senza un indirizzo utilizzabile (0.13.1): non è una nota, è il motivo per cui
   le caselle qui sotto non funzioneranno. Stesso rosso dell'altro stato d'errore. */
.esolver-stock-alert__session.is-error {
	color: #b3261e;
}

/* ------------------------------------------------------------------
   Passo 1: l'indirizzo (0.12.20)
   Sta sopra l'elenco perché è il primo dei due passi, non un accessorio
   del secondo: era in fondo, e metteva il cliente nella condizione di
   spuntare qualcosa prima di sapere che gli sarebbe stato chiesto altro.
   ------------------------------------------------------------------ */

.esolver-stock-alert__step {
	margin: 0 0 12px;
}

/* L'istruzione del passo: è ciò che va letto per primo dentro la sezione aperta, quindi
   sta al colore del testo principale e non a quello delle note. */
.esolver-stock-alert__step-label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--esolver-alert-ink, #1f2933);
	margin: 0 0 4px;
}

.esolver-stock-alert__email {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin: 0;
}

.esolver-stock-alert__verify {
	flex: 0 0 auto;
	cursor: pointer;
}

.esolver-stock-alert__verify[disabled] {
	opacity: .55;
	cursor: default;
}

/* Questa nota è stata segnalata due volte come illeggibile, e la seconda volta il colore
   era già #404a54 come tutto il resto del livello 2: non veniva ricolorata da nessuno.
   Il punto è che è l'unica cosa del riquadro a essere insieme **non grassetta**, di
   livello 2 e in corpo piccolo — le etichette dei passi sono a 600, il testo del consenso
   sta dentro una <label> che il tema irrobustisce, il titolo è un <h4>. Circondata da
   quelle, spariva per confronto anche essendo a 9:1 di contrasto.
   Smette quindi di essere una postilla: dice cosa succede all'indirizzo email di chi
   legge, che non è un dettaglio, e sta al colore e al corpo del testo principale. */
.esolver-stock-alert__notice {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 1.5;
	/* Il peso, non il colore. Portarla da #404a54 a #1f2933 non si è visto: era già
	   scura, e restava l'unica riga in peso normale in mezzo a etichette a 600 — contro
	   quelle perdeva comunque. A 500 sta nella stessa famiglia di ciò che la circonda. */
	font-weight: 500;
	color: var(--esolver-alert-ink, #1f2933);
}

/* In attesa di verifica: l'elenco resta visibile — è ciò che spiega perché
   valga la pena dare un indirizzo — ma non è ancora il suo turno. */
.esolver-stock-alert__awaiting {
	margin: 4px 0 8px;
	padding: 8px 10px;
	border-radius: 4px;
	background: #fff8e5;
	color: #6a4e00;
	font-size: 13.5px;
}

.esolver-stock-alert.is-awaiting .esolver-stock-alert__item {
	opacity: .55;
	cursor: default;
}

/* ------------------------------------------------------------------
   Gruppi per colore
   ------------------------------------------------------------------ */

.esolver-stock-alert__groups {
	display: flex;
	flex-direction: column;
	gap: 2px;
	/* Trenta colori restano una lista lunga: scorre dentro di sé invece di allungare
	   la pagina. Le taglie di un colore, aperte, sono poche. */
	max-height: 320px;
	overflow-y: auto;
	margin-bottom: 10px;
}

.esolver-stock-alert__group {
	border-bottom: 1px solid #eef1f4;
}

.esolver-stock-alert__group:last-child {
	border-bottom: 0;
}

.esolver-stock-alert__group-toggle {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 7px 4px;
	cursor: pointer;
	color: var(--esolver-alert-ink, #1f2933);
	font-size: 14px;
	list-style: none;
}

.esolver-stock-alert__group-toggle::-webkit-details-marker {
	display: none;
}

.esolver-stock-alert__group-toggle::before {
	content: "▸";
	font-size: 11px;
	color: var(--esolver-alert-ink-3, #5a6570);
	transition: transform .15s ease;
}

.esolver-stock-alert__group[open] > .esolver-stock-alert__group-toggle::before {
	transform: rotate(90deg);
}

.esolver-stock-alert__group-name {
	font-weight: 600;
}

.esolver-stock-alert__group-count {
	font-size: 13px;
	color: var(--esolver-alert-ink-3, #5a6570);
}

/* Il conteggio dei monitor attivi è ciò che permette ai gruppi di restare chiusi:
   senza, per sapere se stai già seguendo il NERO dovresti aprirlo. */
.esolver-stock-alert__group-watching {
	margin-left: auto;
	font-size: 13px;
	font-weight: 600;
	color: #14663a;
}

.esolver-stock-alert__group .esolver-stock-alert__items {
	padding: 2px 0 8px 18px;
	margin-bottom: 0;
	max-height: none;
	overflow: visible;
}

.esolver-stock-alert__group-all {
	align-self: flex-start;
	margin-top: 6px;
	padding: 0;
	background: none;
	border: 0;
	font-size: 13px;
	color: #4a3f95;
	text-decoration: underline;
	cursor: pointer;
}

/* Lo stato arriva un istante dopo l'HTML, come per i prezzi e per i cuori dei
   preferiti: la comparsa è smorzata invece che secca. */
.esolver-stock-alert__check {
	transition: opacity .12s ease;
}

.esolver-stock-alert:not(.is-painted) .esolver-stock-alert__check {
	opacity: .55;
}

.esolver-stock-alert__check:disabled {
	opacity: .4;
	cursor: progress;
}

@media (prefers-reduced-motion: reduce) {
	.esolver-stock-alert__group-toggle::before,
	.esolver-stock-alert__check {
		transition: none;
	}
}