/* Modulo preventivo Webell · elenco in pagina e pulsante trigger.
   Questo foglio serve i widget che vivono DENTRO Elementor: i colori
   passano da variabili, così il builder può stilizzarli senza toccare
   il file. Il drawer non passa da qui: ha `drawer.css`, che è blindato
   contro gli stili globali proprio perché sta fuori dal builder. */

.wq{
	--wq-hair:rgba(45,74,62,.16);
	--wq-accent:#2D4A3E;
	display:flex;flex-direction:column;gap:18px;width:100%;color:var(--wq-ink,#2D4A3E);
}
.wq--avviso{padding:16px;border:1px solid var(--wq-hair);font-size:13px;}

.wq__testa{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--wq-hair);}
.wq__titolo{margin:0;font-size:20px;line-height:1.2;}
.wq__conta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:12px;letter-spacing:.08em;opacity:.6;}

.wq__corpo{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;}
.wq__vuoto{margin:0;padding:28px 0;font-size:14px;line-height:1.6;opacity:.68;}

.wq__lista{list-style:none;margin:0;padding:0;}
.wq__riga{display:flex;align-items:flex-start;gap:14px;padding:14px 0;border-bottom:1px solid var(--wq-hair);transition:opacity .18s ease,transform .18s ease;}
.wq__riga.is-uscita{opacity:0;transform:translateX(-12px);}
.wq__img{flex:0 0 auto;width:60px;}
.wq__img img{display:block;width:100%;height:auto;}
.wq__dati{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:5px;}
.wq__nome{font-size:15px;line-height:1.25;text-decoration:none;color:inherit;}
.wq__nome:hover{text-decoration:underline;}
.wq__meta{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.05em;text-transform:uppercase;opacity:.6;}

.wq__qta{display:inline-flex;align-items:stretch;margin-top:3px;border:1px solid var(--wq-hair);width:max-content;}
.wq__qta-btn{width:32px;min-height:32px;padding:0;background:transparent;border:0;color:inherit;font-size:15px;line-height:1;cursor:pointer;}
.wq__qta-btn:hover:not([disabled]){background:rgba(45,74,62,.06);}
.wq__qta-btn[disabled]{opacity:.35;cursor:default;}
.wq__qta-btn:focus-visible{outline:1px solid var(--wq-accent);outline-offset:-1px;}
.wq__qta-input{width:44px;padding:0 4px;text-align:center;background:transparent;border:0;border-left:1px solid var(--wq-hair);border-right:1px solid var(--wq-hair);color:inherit;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:13px;-moz-appearance:textfield;}
.wq__qta-input::-webkit-outer-spin-button,.wq__qta-input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.wq__qta-input:focus-visible{outline:1px solid var(--wq-accent);outline-offset:-1px;}

.wq__azioni{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;}
.wq__qta-nota{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.5;}
.wq__rimuovi{flex:0 0 auto;height:30px;padding:0;background:transparent;border:0;color:inherit;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:10px;letter-spacing:.09em;text-transform:uppercase;opacity:.45;cursor:pointer;transition:opacity .2s ease;}
.wq__rimuovi:hover,.wq__rimuovi:focus-visible{opacity:1;text-decoration:underline;text-underline-offset:3px;}
.wq__rimuovi:focus-visible{outline:1px solid var(--wq-accent);outline-offset:3px;}

.wq__pie{flex:0 0 auto;display:flex;flex-direction:column;gap:10px;padding-top:14px;border-top:1px solid var(--wq-hair);}
.wq__prog{display:flex;flex-direction:column;gap:7px;margin-bottom:4px;}
.wq__prog-barra{position:relative;height:2px;background:rgba(45,74,62,.12);}
.wq__prog-barra i{position:absolute;left:0;top:0;height:2px;background:var(--wq-accent);transition:width .4s ease;}
.wq__prog-testo{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.05em;opacity:.7;}
.wq__prog.is-completo .wq__prog-testo{opacity:1;}

.wq__cta{display:inline-flex;align-items:center;justify-content:center;height:52px;padding:0 22px;font-size:14px;text-align:center;text-decoration:none;border:1px solid var(--wq-accent);cursor:pointer;background:transparent;color:inherit;}
.wq__cta--pri{background:var(--wq-accent);color:#fff;}
.wq__cta--pri:hover{opacity:.9;}
.wq__cta--sec{background:transparent;}
.wq__cta:focus-visible{outline:2px solid var(--wq-accent);outline-offset:2px;}

/* L'avviso di rimozione lo crea il JavaScript nello slot e lo toglie allo
   scadere: qui non c'e' niente da nascondere, e quindi niente che possa
   ricomparire per sbaglio. */
.wq__annulla-slot:empty{display:none;}
.wq__annulla{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:6px;padding:10px 12px;border:1px solid var(--wq-hair);font-size:13px;}
.wq__annulla-testo{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.7;}
.wq__annulla-azione{flex:0 0 auto;background:transparent;border:0;padding:0;color:inherit;font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.08em;text-transform:uppercase;text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.wq__annulla-azione:focus-visible{outline:1px solid var(--wq-accent);outline-offset:3px;}

/* ---- pulsante trigger ------------------------------------------------
   Il widget non e' un'etichetta cliccabile ma la CTA dell'header, e sta a
   fianco di pulsanti Elementor veri.

   Tre regole di impianto.

   1. Due livelli, non uno. Il primo livello sono i token (`--wqt-bg`,
      `--wqt-fg`, `--wqt-bordo`): li scrivono i controlli del builder.
      Il secondo sono le proprieta', che leggono solo token. L'inversione
      allo scroll non tocca le proprieta': rimappa i token sui valori
      `--wqt-inv-*`. Cosi' varianti, hover e figli continuano a funzionare
      senza una riga in piu' per ogni combinazione di stato.

   2. `!important` su colore, sfondo e bordo. L'header di Italfood impone
      il colore ai propri link, e vince: il testo del pulsante finiva dello
      stesso colore del suo fondo, invisibile in entrambi gli stati. Il
      `!important` sta sulla proprieta', mai sul valore, che resta una
      variabile: i controlli del builder continuano a comandare, perche'
      riscrivono il token e non la proprieta'.

   3. Specificita' triplicata: il kit di Elementor scrive
      `.elementor-kit-N a` a (0,2,0), una classe sola perderebbe.
   --------------------------------------------------------------------- */

.wqt{
	/* Colori: stato in cima alla pagina. */
	--wqt-bg:#2D4A3E;
	--wqt-fg:#F5F2EC;
	--wqt-bordo:#2D4A3E;

	--wqt-bg-hover:#F5F2EC;
	--wqt-fg-hover:#2D4A3E;
	--wqt-bordo-hover:#2D4A3E;

	/* Colori: stato dopo lo scroll. */
	--wqt-inv-bg:#F5F2EC;
	--wqt-inv-fg:#2D4A3E;
	--wqt-inv-bordo:#F5F2EC;

	--wqt-inv-bg-hover:rgba(0,0,0,0);
	--wqt-inv-fg-hover:#F5F2EC;
	--wqt-inv-bordo-hover:#F5F2EC;

	/* Misure. I valori di partenza sono quelli del pulsante Elementor
	   dell'header, misurati sul rendering: 132x42, spazio laterale 17,
	   testo 16. */
	--wqt-alt:42px;
	--wqt-pad:17px;
	--wqt-gap:6px;
	--wqt-bordo-w:1px;
	--wqt-icona:18px;
	--wqt-testo:16px;
	--wqt-badge:19px;

	/* Colore corrente del primo piano. Non e' un token da configurare: e'
	   quello che i figli leggono per sapere di che colore sono adesso.
	   Deriva da `--wqt-fg`, quindi segue da solo sia l'inversione allo
	   scroll (che rimappa `--wqt-fg`) sia l'hover (che riassegna questa
	   riga). Le proprieta' custom si ereditano: l'icona lo riceve senza
	   che nessuna regola debba nominarla stato per stato. */
	--wqt-c-fg:var(--wqt-fg);
}

/* ---- rimappatura allo scroll ----
   Quattro classi piu' un antenato: (0,5,0). Deve stare sopra ai controlli
   del builder, che scrivono i token a (0,3,0) e arrivano dopo nel sorgente.
   `.webell-header--scuro` e' l'aggancio manuale, per header che cambiano
   fondo senza passare dallo sticky di Elementor. */
.elementor-sticky--effects .wqt--auto.wqt--auto.wqt.wqt,
.webell-header--scuro .wqt--auto.wqt--auto.wqt.wqt{
	--wqt-bg:var(--wqt-inv-bg);
	--wqt-fg:var(--wqt-inv-fg);
	--wqt-bordo:var(--wqt-inv-bordo);
	--wqt-bg-hover:var(--wqt-inv-bg-hover);
	--wqt-fg-hover:var(--wqt-inv-fg-hover);
	--wqt-bordo-hover:var(--wqt-inv-bordo-hover);
}

/* ---- proprieta' ---- */
.wqt.wqt.wqt{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:var(--wqt-gap);
	box-sizing:border-box;
	min-height:var(--wqt-alt);
	padding:0 var(--wqt-pad);
	background-color:var(--wqt-bg) !important;
	background-image:none !important;
	color:var(--wqt-c-fg) !important;
	border:var(--wqt-bordo-w) solid var(--wqt-bordo);
	border-color:var(--wqt-bordo) !important;
	border-radius:0;
	box-shadow:none;
	line-height:1;
	text-decoration:none;
	cursor:pointer;
	transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}

.wqt.wqt.wqt:hover,
.wqt.wqt.wqt:focus-visible{
	--wqt-c-fg:var(--wqt-fg-hover);
	background-color:var(--wqt-bg-hover) !important;
	color:var(--wqt-c-fg) !important;
	border-color:var(--wqt-bordo-hover) !important;
	text-decoration:none;
}

.wqt.wqt.wqt:focus-visible{outline:2px solid currentColor;outline-offset:3px;}

.wqt.wqt.wqt.is-nascosto{display:none;}

/* Larghezza piena: serve nel menu mobile, dove la CTA e' una riga. */
.wqt--largo.wqt.wqt{display:flex;width:100%;}

/* Contorno: stesso ingombro, fondo vuoto. Il testo prende il colore che
   nella variante piena sarebbe il fondo, e l'inversione lo segue da sola
   perche' legge lo stesso token. */
.wqt--contorno.wqt.wqt{
	--wqt-c-fg:var(--wqt-bg);
	background-color:rgba(0,0,0,0) !important;
	color:var(--wqt-c-fg) !important;
	border-color:var(--wqt-bg) !important;
}
.wqt--contorno.wqt.wqt:hover,
.wqt--contorno.wqt.wqt:focus-visible{
	--wqt-c-fg:var(--wqt-fg);
	background-color:var(--wqt-bg) !important;
	color:var(--wqt-c-fg) !important;
	border-color:var(--wqt-bg) !important;
}

/* Minimale: il comportamento precedente alla 2.8.3, per chi lo usa dentro
   una riga di link e non come CTA. */
.wqt--minimale.wqt.wqt{
	min-height:0;
	padding:0;
	background-color:rgba(0,0,0,0) !important;
	border-color:rgba(0,0,0,0) !important;
	border-width:0;
}
.wqt--minimale.wqt.wqt:hover,
.wqt--minimale.wqt.wqt:focus-visible{
	/* Senza fondo, l'hover non ha un colore alternativo da usare: cambierebbe
	   solo il testo, e su un header scuro finirebbe fuori posto. Qui varia
	   l'opacita', non il colore. */
	--wqt-c-fg:var(--wqt-fg);
	background-color:rgba(0,0,0,0) !important;
	opacity:.75;
}

/* ---- parti interne ----
   I figli leggono `--wqt-c-fg`, non `currentColor` e non `inherit`.

   La differenza conta: l'header di Italfood impone i propri colori anche
   alle icone, e sia `currentColor` sia `inherit` passano da una proprieta'
   (`color`) che quelle regole possono ancora vincere. Il risultato era
   un'icona del colore del proprio fondo, invisibile, mentre il testo
   accanto era gia' corretto. Una proprieta' custom non ha questo problema:
   nessuna regola dell'header la nomina, e `stroke` e `fill` la leggono
   direttamente senza passare da `color`. */
.wqt__icona.wqt__icona.wqt__icona{
	flex:0 0 auto;
	width:var(--wqt-icona);
	height:var(--wqt-icona);
	color:var(--wqt-c-fg) !important;
	fill:none !important;
	stroke:var(--wqt-c-fg) !important;
	stroke-width:1.4;
	stroke-linecap:round;
	stroke-linejoin:round;
}
.wqt__icona.wqt__icona.wqt__icona circle{
	fill:var(--wqt-c-fg) !important;
	stroke:none !important;
}

.wqt__testo.wqt__testo.wqt__testo{
	font-size:var(--wqt-testo);
	line-height:1;
	color:var(--wqt-c-fg) !important;
}

/* Stesso principio del badge sul trigger Elementor (drawer.css §10):
   nessun colore proprio, prende quello del pulsante. */
.wqt__badge.wqt__badge.wqt__badge{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	flex:0 0 auto;
	box-sizing:border-box;
	min-width:var(--wqt-badge);
	height:var(--wqt-badge);
	margin:0;
	padding:0 5px;
	background-color:rgba(0,0,0,0) !important;
	border:1px solid var(--wqt-c-fg) !important;
	border-radius:0;
	box-shadow:none;
	font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
	font-size:10px;
	font-weight:500;
	line-height:1;
	letter-spacing:.04em;
	color:var(--wqt-c-fg) !important;
	pointer-events:none;
}
.wqt__badge.wqt__badge.wqt__badge[hidden]{display:none;}

@media (prefers-reduced-motion: reduce){
	.wq__riga,.wq__prog-barra i,.wqt.wqt.wqt{transition:none;}
}