/* Right of Withdrawal for WooCommerce — stili frontend (neutri, whitelabel). */

.row-withdrawal {
	max-width: 640px;
}

.row-withdrawal .row-form__title {
	margin-bottom: 0.25em;
}

.row-withdrawal .row-form__deadline {
	margin-top: 0;
	opacity: 0.8;
}

.row-withdrawal .row-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	margin-bottom: 1em;
}

.row-withdrawal .row-form__row input {
	max-width: 100%;
}

.row-withdrawal .row-items {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5em 0;
}

.row-withdrawal .row-items th,
.row-withdrawal .row-items td {
	padding: 0.6em 0.4em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	text-align: left;
	vertical-align: middle;
}

.row-withdrawal .row-items__qty {
	width: 12em;
	white-space: nowrap;
}

.row-withdrawal .row-items__qty input {
	width: 5em;
}

.row-withdrawal .row-items__max {
	margin-left: 0.5em;
	font-size: 0.85em;
	opacity: 0.7;
}

/* Omaggio: quantita' fissa al posto del campo, e la nota con l'asterisco sotto la tabella. */
.row-withdrawal .row-items__fixed {
	display: inline-block;
	min-width: 5em;
}

.row-withdrawal .row-form__gift-note {
	font-size: 0.9em;
	opacity: 0.85;
}

.row-withdrawal .row-form__legal {
	font-size: 0.9em;
	opacity: 0.85;
}

.row-withdrawal .row-form__disclaimer {
	padding: 0.9em 1.1em;
	margin: 1.25em 0;
	border-left: 4px solid currentColor;
	background: rgba(0, 0, 0, 0.03);
	font-size: 0.92em;
}

/* Non annidate sotto `.row-withdrawal`: le stesse classi servono anche agli entry point
   ancorati all'ordine, che vivono fuori dal contenitore del modulo. */
.row-notice {
	padding: 0.9em 1.1em;
	margin: 0 0 1.25em;
	border-left: 4px solid currentColor;
	background: rgba(0, 0, 0, 0.03);
}

.row-notice--success {
	color: #1b7f3b;
}

.row-notice--error {
	color: #b3261e;
}

.row-notice--info {
	color: #1c5d99;
}

/* Spaziatura del pulsante. L'aspetto resta al tema, che lo stila con la sua classe
   `.button`: imporlo da qui — o peggio inline — sovrascriverebbe temi ben fatti. Il
   pulsante è un link testuale, quindi resta comunque visibile e cliccabile senza CSS. */
.row-withdrawal-button-wrap {
	margin: 1em 0;
}

/* Nel dettaglio ordine il pulsante segue «Ordina di nuovo» di WooCommerce, che e' un `<p>`
   come il nostro: uno sotto l'altro sembrerebbero due cose scollegate. `:has()` stringe la
   regola al solo caso in cui i due siano davvero adiacenti — dove non e' supportato si torna
   ai due blocchi impilati, che restano leggibili e cliccabili. */
.woocommerce-order-details .order-again:has(+ .row-withdrawal-button-wrap),
.woocommerce-order-details .order-again + .row-withdrawal-button-wrap {
	display: inline-block;
	vertical-align: top;
	margin-right: 0.5em;
	/* Allineati in alto vuol dire margini superiori uguali: il nostro `margin: 1em 0` spingeva
	   il pulsante di recesso un em sotto «Ordina di nuovo», che nel tema del primo cliente non
	   ha margine sopra (visto sullo staging, 16/09/2026). Zero a entrambi, cosi' non dipende da
	   cosa decide il tema. Quello sotto resta al tema: in una riga di inline-block vince il
	   margine inferiore piu' alto, e i suoi 30px continuano a separare cio' che segue. */
	margin-top: 0;
}

/* Riepilogo dei recessi gia' registrati, sopra la tabella dell'ordine. Neutro come il resto:
   nessun colore di marca, solo `currentColor`, cosi' non impone niente ai siti clienti. */
.row-withdrawal-summary {
	padding: 0.9em 1.1em;
	margin: 0 0 1.5em;
	border-left: 4px solid currentColor;
	background: rgba(0, 0, 0, 0.03);
	font-size: 0.92em;
}

.row-withdrawal-summary__title {
	margin: 0 0 0.5em;
	font-size: 1em;
}

.row-withdrawal-summary__item + .row-withdrawal-summary__item {
	margin-top: 0.75em;
	padding-top: 0.75em;
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.row-withdrawal-summary__items {
	margin-top: 0.25em;
	opacity: 0.8;
}

/* Honeypot: fuori dallo schermo, non "display:none" (alcuni bot lo rilevano).
   Duplicato dello stile inline dei template, per gli override dal tema che lo perdessero. */
.row-form__hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}