/* =========================================================================
   Libreria dello Studente — Messaggi WooCommerce (add-to-cart, info, errori)
   Allineati ai margini del contenuto (max-width 1628px come Header/Footer),
   bottone "Visualizza carrello" come i pulsanti del sito. Responsive.
   Caricato da inc/single-product.php sulle pagine WooCommerce.
   ========================================================================= */

/* Contenitore: stessi margini laterali di header/footer */
.woocommerce-notices-wrapper {
	max-width: 1628px;
	margin: 16px auto 0;
	padding: 0;
	box-sizing: border-box;
}
.woocommerce-notices-wrapper:empty {
	margin: 0;
	padding: 0;
}

/* Box messaggio */
.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	display: flex !important;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin: 0;
	padding: 16px 24px;
	border: none !important;
	border-radius: 12px;
	background: #DEF39B;
	color: #012F2B;
	font-family: Archivo, sans-serif;
	font-size: 16px;
	line-height: 1.4;
	list-style: none;
}
.woocommerce-info {
	background: #ECEBE4;
}
.woocommerce-error {
	background: #FCE4E2;
	color: #B3241C;
}

/* Icona (checkmark WooCommerce) resa inline invece che assoluta */
.woocommerce-message::before,
.woocommerce-info::before,
.woocommerce-error::before {
	position: static !important;
	margin: 0 !important;
	top: auto !important;
	left: auto !important;
	color: #012F2B;
	font-size: 20px;
	line-height: 1;
}
.woocommerce-error::before {
	color: #B3241C;
}

/* Testo che occupa lo spazio, spingendo il bottone a destra */
.woocommerce-message,
.woocommerce-info {
	justify-content: flex-start;
}

/*
 * IL PULSANTE VA SEMPRE PER ULTIMO, E `order` NON E' UN VEZZO.
 *
 * WooCommerce compone questi avvisi in due modi opposti, e non c'e' modo di prevederlo:
 *
 *   orders.php                 «Nessun ordine.» + <a class="wc-forward button">   testo, poi pulsante
 *   VerificationController.php <a class="button wc-forward"> + «Conferma...»       pulsante, poi testo
 *
 * Il contenitore e' un flex e il pulsante ha `margin-left: auto`. Quando il pulsante e' l'ULTIMO
 * elemento quel margine fa quello che ci si aspetta: mangia lo spazio libero e lo manda a destra.
 * Ma quando e' il PRIMO, lo spazio libero viene assorbito **prima di lui**, e a destra finiscono
 * pulsante *e* testo insieme — lasciando un buco dopo l'icona. E' il difetto visto sulla pagina
 * «Ordini» il 2026-08-19: la prima delle due righe sembrava allineata a destra.
 *
 * `order: 1` lo porta in coda qualunque sia l'ordine nel sorgente. Il testo nudo di questi avvisi
 * e' un nodo di testo, che in un contenitore flex diventa un elemento anonimo con `order: 0`:
 * non lo si puo' selezionare, ma sta comunque **prima** di chi ha `order: 1`. Cosi' le due righe
 * si impaginano uguali senza dipendere da come WooCommerce ha scritto il messaggio.
 */
.woocommerce-message .button.wc-forward,
.woocommerce-info .button.wc-forward {
	order: 1;
	margin-left: auto;
	background: #FF3B32 !important;
	color: #F7F5F1 !important;
	border: none !important;
	border-radius: 100px !important;
	padding: 11px 26px !important;
	font-family: Archivo, sans-serif !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	text-transform: none !important;
	transition: background .25s, color .25s;
}
.woocommerce-message .button.wc-forward:hover,
.woocommerce-info .button.wc-forward:hover {
	background: #012F2B !important;
	color: #DEF39B !important;
}

/* -------------------------------------------------------------------------
   MOBILE
   ------------------------------------------------------------------------- */
@media (max-width: 767px) {
	.woocommerce-notices-wrapper {
		padding: 0 16px;
		margin-top: 12px;
	}
	.woocommerce-message,
	.woocommerce-info,
	.woocommerce-error {
		align-items: flex-start;
		gap: 10px;
		padding: 14px 16px;
		font-size: 15px;
	}
	/* A capo e a tutta larghezza. `order: 1` continua a valere: resta l'ultimo, sotto al testo. */
	.woocommerce-message .button.wc-forward,
	.woocommerce-info .button.wc-forward {
		margin-left: 0;
		width: 100%;
		text-align: center;
		margin-top: 10px;
	}
}