/* =============================================================================
 * PROBAR - IL REGALO DI BENVENUTO NELLA PAGINA CARRELLO
 * -----------------------------------------------------------------------------
 * Il riquadro sta nella colonna dei totali, subito sotto la tabella e sopra la
 * barra della spedizione gratuita. Nella stessa colonna ci sono gia' due cose
 * dorate (la barra e il pulsante d'ordine), quindi il regalo NON puo' essere
 * un terzo blocco d'oro: sarebbe rumore, e ruberebbe l'occhio al pulsante che
 * porta i soldi.
 *
 * Si distingue per FORMA, non per colore: e' l'unico elemento della colonna con
 * un bordo, cioe' l'unico che si legge come una scheda staccata dal fondo. Il
 * poco oro che ha sta dove serve a capire (l'occhiello, il numero, il bordo del
 * pulsante), e il pulsante e' col bordo, non pieno: nella grammatica del sito
 * la pillola piena e' l'azione principale, e qui l'azione principale e' un'altra.
 *
 * Il markup lo stampa `inc/abm-regalo-benvenuto.php`.
 * ========================================================================== */

.abm-rb {
	position: relative;
	margin: 0 0 18px;
	padding: 17px 18px 15px;
	border: 1px solid rgba( 255, 206, 83, 0.34 );
	border-radius: 10px;
	/* Il velo d'oro parte in alto e si spegne a meta': da' profondita' alla
	   scheda senza accendere un secondo blocco pieno. */
	background-color: #141414;
	background-image: linear-gradient( 180deg, rgba( 255, 206, 83, 0.07 ), rgba( 255, 206, 83, 0 ) 62% );
	text-align: left;
}

/* Il nastro in alto a destra: e' una firma, non un'informazione. Sta basso di
   opacita' apposta, perche' chi legge deve incontrare prima le parole. */
.abm-rb-sigillo {
	position: absolute;
	top: 15px;
	right: 16px;
	color: #FFCE53;
	opacity: 0.42;
	line-height: 0;
	pointer-events: none;
}

.abm-rb-occhiello {
	margin: 0 0 7px !important;
	padding-right: 30px;   /* non finisce sotto il nastro */
	color: #FFCE53;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	line-height: 1.4;
	/* Il maiuscoletto spaziato lascia aria dopo l'ultima lettera: si compensa
	   a sinistra, come sulla pillola del regalo misterioso. */
	text-indent: 0.18em;
}

.abm-rb-titolo {
	margin: 0 0 8px !important;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-size: 21px;
	font-weight: 700;
	line-height: 1.25;
	color: #ffffff;
}

/* Quando il regalo e' gia' nel carrello il titolo non promette piu' niente:
   racconta un fatto, e lo dice in oro. */
.abm-rb-titolo--ok {
	color: #FFCE53;
}

.abm-rb-testo {
	margin: 0 0 14px !important;
	font-size: 13px;
	line-height: 1.6;
	color: rgba( 255, 255, 255, 0.78 );
}

.abm-rb-testo strong {
	color: #FFCE53;
	font-weight: 700;
	white-space: nowrap;
}

/* Il prezzo del sito e' sempre IVA esclusa e lo dice ovunque: anche qui, con
   lo stesso tono sottovoce delle altre righe dei totali. */
.abm-rb-iva {
	font-size: 11px;
	color: rgba( 255, 255, 255, 0.5 );
}

/* L'AVVISO CHE COMPARE PRIMA DEL CLIC, quando attivare il regalo farebbe
   perdere la spedizione gratuita (v. il modulo PHP). Non e' un errore e non e'
   rosso: il rosso qui direbbe "hai sbagliato", mentre il cliente non ha ancora
   fatto niente. E' una nota di servizio, quindi filo d'oro a sinistra e un velo
   appena percettibile, come le fasce informative del resto del sito. */
.abm-rb-attenzione {
	margin: 0 0 12px !important;
	padding: 8px 10px;
	border-left: 2px solid rgba( 255, 206, 83, 0.7 );
	border-radius: 0 4px 4px 0;
	background: rgba( 255, 206, 83, 0.09 );
	font-size: 12px;
	line-height: 1.5;
	color: rgba( 255, 255, 255, 0.85 );
}

.abm-rb-attenzione strong {
	color: #FFCE53;
	white-space: nowrap;
}

.abm-rb-form {
	margin: 0 0 10px;
}

/* IL PULSANTE.
   Tutto dichiarato, niente lasciato al tema: Astra veste ogni `button` del
   carrello, e al passaggio del mouse li riempie d'oro senza toccare il colore
   del testo, che vuol dire oro su oro. Sfondo E testo, sempre tutti e due. */
.abm-rb .abm-rb-bottone {
	display: block;
	width: 100%;
	margin: 0;
	padding: 12px 18px !important;
	border: 1px solid #FFCE53 !important;
	border-radius: 999px !important;
	background: transparent !important;
	background-color: transparent !important;
	color: #FFCE53 !important;
	font-family: inherit;
	font-size: 12px !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	line-height: 1.4 !important;
	text-align: center;
	cursor: pointer;
	box-shadow: none !important;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.abm-rb .abm-rb-bottone:hover,
.abm-rb .abm-rb-bottone:focus {
	background: #FFCE53 !important;
	background-color: #FFCE53 !important;
	color: #111111 !important;
	border-color: #FFCE53 !important;
}

/* La tastiera deve vedere dove si trova: il solo cambio di colore non basta a
   chi arriva col tabulatore. */
.abm-rb .abm-rb-bottone:focus-visible {
	outline: 2px solid #FFCE53;
	outline-offset: 3px;
}

/* IL PULSANTE QUIETO: quello che toglie il regalo.
   Deve esserci ed essere facile da premere, ma non deve chiamare. A regalo
   attivo l'azione che conta e' procedere, non ripensarci: se "Disattiva" fosse
   dorato come "Attiva", inviterebbe a disfare quello che si e' appena fatto.
   Grigio quieto, e solo al tocco si accende d'oro, perche' chi ci arriva
   davvero merita di vedere che il pulsante risponde.
   Tre gradini di peso: le dichiarazioni del pulsante d'oro qui sopra sono
   `!important`, e due gradini non basterebbero a scavalcarle. */
.abm-rb .abm-rb-bottone.abm-rb-bottone--quieto {
	border-color: rgba( 255, 255, 255, 0.26 ) !important;
	color: rgba( 255, 255, 255, 0.72 ) !important;
	font-weight: 600 !important;
}

.abm-rb .abm-rb-bottone.abm-rb-bottone--quieto:hover,
.abm-rb .abm-rb-bottone.abm-rb-bottone--quieto:focus {
	background: transparent !important;
	background-color: transparent !important;
	border-color: #FFCE53 !important;
	color: #FFCE53 !important;
}

/* La riga del consenso. Il grigio e' volutamente sottovoce, ma non tanto da
   costringere a strizzare gli occhi: a 0,45 di opacita' su questo fondo il
   contrasto era 4,5 a 1, cioe' il minimo di legge preso per il rotto della
   cuffia. A 0,58 sta a 6 a 1 e si legge senza sforzo, restando comunque piu'
   quieto di tutto il resto del riquadro. */
.abm-rb-nota {
	margin: 0 !important;
	font-size: 11px;
	line-height: 1.55;
	color: rgba( 255, 255, 255, 0.58 );
}

.abm-rb-nota a {
	color: rgba( 255, 255, 255, 0.72 );
	text-decoration: underline;
}

.abm-rb-nota a:hover {
	color: #FFCE53;
}

/* Sul telefono la colonna dei totali diventa larga quanto lo schermo: la
   scheda si stringe un poco, il titolo scende di un punto e il pulsante resta
   alto abbastanza da prendersi col pollice (44 px con il bordo). */
@media ( max-width: 544px ) {
	.abm-rb--carrello {
		padding: 15px 15px 13px;
	}

	.abm-rb--carrello .abm-rb-titolo {
		font-size: 19px;
	}

	/* Scritta sulla variante e non su `.abm-rb`: le regole del cassetto stanno
	   piu' in basso in questo foglio e a parita' di peso vincono le ultime,
	   quindi una regola generica qui verrebbe disattivata li' senza dirlo. E'
	   la trappola gia' incontrata due volte nel progetto. */
	.abm-rb--carrello .abm-rb-bottone {
		padding: 13px 16px !important;
	}
}

/* ==========================================================================
 * IL RIQUADRO DENTRO IL CASSETTO
 * --------------------------------------------------------------------------
 * Stesse parole, stesso markup, vestito piu' stretto. Nel cassetto lo spazio
 * non e' una preferenza: il piede contiene gia' il coupon, cinque righe di
 * conti, il pulsante d'ordine e i pagamenti rapidi, e tutto quello che cresce
 * qui lo toglie all'elenco dei prodotti, che ha un'altezza minima difesa dal
 * foglio principale. Quindi qui si stringe: corpi piu' piccoli, meno aria,
 * nessuna parola in meno.
 *
 * IL RESET DI MODERNCART LO INCONTRA ECCOME, e questa riga era sbagliata fino
 * al 25 agosto 2026. In `shop-ui.css` il tema tiene:
 *
 *     [class*="moderncart"][class*="order-summary"] * {
 *         color: #fff !important; background: transparent !important;
 *         border-color: rgba(255,255,255,.1) !important; }
 *
 * e il contenitore del cassetto, `#moderncart-slide-out`, porta fra le sue
 * classi `moderncart-style1-order-summary-style`. Contiene "moderncart",
 * contiene "order-summary": quel reset vale quindi per **ogni discendente del
 * cassetto**, non solo per il riquadro dei conti. Misurato dal vivo: il
 * riquadro era senza sfondo, senza bordo dorato e con tutte le scritte bianche.
 * Si era salvato solo il pulsante, perche' le sue dichiarazioni erano gia'
 * `!important`.
 *
 * Il rimedio e' quello che questo progetto ha gia' scritto due volte: non basta
 * dichiarare, bisogna **pesare di piu'**. Il reset vale (0,2,0), qui si usano
 * tre gradini, e i colori passano. Vale anche la regola gemella: la nostra
 * anteprima in `strumenti/` non ha ModernCart dentro, quindi sui colori del
 * cassetto non fa fede. Quelli si guardano solo dal vivo.
 * ========================================================================== */

[class*="moderncart"] .abm-rb.abm-rb--cassetto {
	background-color: #141414 !important;
	background-image: linear-gradient( 180deg, rgba( 255, 206, 83, 0.07 ), rgba( 255, 206, 83, 0 ) 62% ) !important;
	border-color: rgba( 255, 206, 83, 0.34 ) !important;
}

[class*="moderncart"] .abm-rb--cassetto .abm-rb-sigillo,
[class*="moderncart"] .abm-rb--cassetto .abm-rb-occhiello,
[class*="moderncart"] .abm-rb--cassetto .abm-rb-titolo--ok,
[class*="moderncart"] .abm-rb--cassetto .abm-rb-testo strong {
	color: #FFCE53 !important;
}

[class*="moderncart"] .abm-rb--cassetto .abm-rb-titolo {
	color: #ffffff !important;
}

[class*="moderncart"] .abm-rb--cassetto .abm-rb-testo {
	color: rgba( 255, 255, 255, 0.78 ) !important;
}

[class*="moderncart"] .abm-rb--cassetto .abm-rb-iva {
	color: rgba( 255, 255, 255, 0.5 ) !important;
}

[class*="moderncart"] .abm-rb--cassetto .abm-rb-nota {
	color: rgba( 255, 255, 255, 0.58 ) !important;
}

[class*="moderncart"] .abm-rb--cassetto .abm-rb-nota a {
	color: rgba( 255, 255, 255, 0.72 ) !important;
}

/* Anche l'avviso deve passare il reset del cassetto: senza queste due righe
   perderebbe il velo e il filo d'oro, e resterebbe una riga bianca qualunque
   proprio dove serve che si noti. */
[class*="moderncart"] .abm-rb--cassetto .abm-rb-attenzione {
	background: rgba( 255, 206, 83, 0.09 ) !important;
	border-left-color: rgba( 255, 206, 83, 0.7 ) !important;
	color: rgba( 255, 255, 255, 0.85 ) !important;
}

[class*="moderncart"] .abm-rb--cassetto .abm-rb-attenzione strong {
	color: #FFCE53 !important;
}

.abm-rb--cassetto .abm-rb-attenzione {
	margin: 0 0 9px !important;
	padding: 7px 9px;
	font-size: 11px;
}

.abm-rb--cassetto {
	margin: 0 0 12px;
	padding: 12px 13px 10px;
	border-radius: 8px;
}

.abm-rb--cassetto .abm-rb-sigillo {
	top: 11px;
	right: 12px;
}

.abm-rb--cassetto .abm-rb-occhiello {
	margin: 0 0 4px !important;
	font-size: 9px;
}

/* Nel cassetto il titolo grande non si stampa affatto (v. il modulo PHP):
   questa regola resta per il giorno in cui uno stato nuovo lo volesse. */
.abm-rb--cassetto .abm-rb-titolo {
	margin: 0 0 6px !important;
	font-size: 16px;
}

.abm-rb--cassetto .abm-rb-testo {
	margin: 0 0 9px !important;
	font-size: 12px;
	line-height: 1.5;
}

.abm-rb--cassetto .abm-rb-form {
	margin: 0 0 6px;
}

/* QUARANTAQUATTRO PIXEL, e non uno di meno. Stringendo il riquadro il pulsante
   era sceso a 37, misurati dal vivo: sotto la soglia che Apple e Google danno
   per un bersaglio da dito, e su un sito dove la maggioranza dei clienti compra
   dal telefono e' il pixel piu' importante di tutti. I sette pixel si sono
   ripresi dal testo, non da qui. */
.abm-rb--cassetto .abm-rb-bottone {
	min-height: 44px;
	padding: 10px 14px !important;
	font-size: 11px !important;
}

/* A corpo 10 e con l'opacita' di prima il rapporto di contrasto sfiorava
   appena il minimo: su un testo che spiega a che cosa si sta acconsentendo,
   "appena appena leggibile" non e' una scelta accettabile. */
.abm-rb--cassetto .abm-rb-nota {
	font-size: 11px;
	line-height: 1.45;
}

/* ==========================================================================
 * LA RIGA COMPATTA: il regalo gia' preso, dentro il cassetto
 * --------------------------------------------------------------------------
 * Un incentivo che ha gia' ottenuto quello che voleva non ha piu' diritto a un
 * riquadro intero. Qui diventa una riga: conferma a sinistra, comando a
 * destra, 44 pixel invece di 101. Il bordo d'oro resta, perche' si deve
 * ancora capire che quella riga e' il regalo e non un totale.
 * ========================================================================== */

.abm-rb--riga {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	margin: 0 0 10px;
	padding: 4px 6px 4px 12px;
	border: 1px solid rgba( 255, 206, 83, 0.34 );
	border-radius: 8px;
	background-color: #141414;
	background-image: none;
}

.abm-rb-riga-testo {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	line-height: 1.35;
	color: rgba( 255, 255, 255, 0.82 );
}

.abm-rb-riga-testo strong {
	color: #FFCE53;
	font-weight: 700;
	white-space: nowrap;
}

.abm-rb-spunta {
	flex: 0 0 auto;
	color: #FFCE53;
}

.abm-rb-form--riga {
	margin: 0 !important;
	flex: 0 0 auto;
}

/* "Togli" e' un comando, non un invito: nessun bordo, nessun riempimento, e
   comunque 44 pixel di bersaglio perche' si preme col dito. */
.abm-rb--riga .abm-rb-bottone.abm-rb-togli {
	display: inline-flex;
	align-items: center;
	width: auto;
	min-height: 44px;
	padding: 0 12px !important;
	border: none !important;
	background: transparent !important;
	background-color: transparent !important;
	color: rgba( 255, 255, 255, 0.6 ) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: 0.06em;
	text-transform: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.abm-rb--riga .abm-rb-bottone.abm-rb-togli:hover,
.abm-rb--riga .abm-rb-bottone.abm-rb-togli:focus {
	background: transparent !important;
	background-color: transparent !important;
	color: #FFCE53 !important;
}

/* Il reset del cassetto spegne anche questa riga, come tutto il resto: tre
   gradini di peso per riprendersi i colori. */
[class*="moderncart"] .abm-rb.abm-rb--riga {
	background-color: #141414 !important;
	border-color: rgba( 255, 206, 83, 0.34 ) !important;
}

[class*="moderncart"] .abm-rb--riga .abm-rb-riga-testo {
	color: rgba( 255, 255, 255, 0.82 ) !important;
}

[class*="moderncart"] .abm-rb--riga .abm-rb-riga-testo strong,
[class*="moderncart"] .abm-rb--riga .abm-rb-spunta {
	color: #FFCE53 !important;
}

/* Schermi bassi (telefono in orizzontale, finestre piccole): qui l'elenco dei
   prodotti e' gia' al minimo, e ogni pixel del piede glielo toglie. */
@media ( max-height: 720px ) {
	.abm-rb--cassetto {
		padding: 11px 12px 9px;
		margin-bottom: 10px;
	}

	.abm-rb--cassetto .abm-rb-titolo {
		font-size: 16px;
	}

	.abm-rb--cassetto .abm-rb-testo {
		margin-bottom: 9px !important;
	}
}

/* L'attesa dopo il clic: il pulsante si spegne un poco e non si lascia
   premere due volte. Il cassetto ci mette un attimo a rifarsi, e in quel
   attimo un pulsante che sembra ancora vivo invita a insistere. */
.abm-rb .abm-rb-bottone--attesa,
.abm-rb .abm-rb-bottone[disabled] {
	opacity: 0.55;
	cursor: default;
	pointer-events: none;
}