/* Codice sconto applicato "come Shopify" — pacchetto preso da etapharma.com (26/09/2026).
   Nella riga del coupon dei totali (tr.cart-discount) l'etichetta diventa un cartellino:
   icona + CODICE + valore (−10% / −€5,00) + "×" (il link originale .woocommerce-remove-coupon).
   Quando il codice viene accettato: spunta che diventa cartellino + lampo; sconto e totale "contano" (JS).
   Colori: cambiare solo le 3 variabili qui sotto (colore principale del sito, tono scuro per il testo,
   stesso colore principale in R, G, B per le trasparenze).
   Dimavis: dal 27/09/2026 il verde è #2d8185 ovunque (prima #34b59c nel tema e #2d8185 nel checkout Focused; i due
   blocchi qui sotto sono rimasti per il layout Default). Pesi 400/700 (Lato è caricato solo in questi due pesi). */
html body .etp-coupon-chip,
html body tr.cart-discount,
html body .etp-applying {
	--cc-accent: #2d8185;
	--cc-accent-dark: #256b6e;
	--cc-accent-rgb: 45, 129, 133;
}
html body.dmv-focused .etp-coupon-chip,
html body.dmv-focused tr.cart-discount,
html body.dmv-focused .etp-applying {
	--cc-accent: #2d8185;
	--cc-accent-dark: #256b6e;
	--cc-accent-rgb: 45, 129, 133;
}

html body tr.cart-discount th {
	vertical-align: middle;
}
html body tr.cart-discount td {
	color: var(--cc-accent);
	font-weight: 700;
	vertical-align: middle;
	white-space: nowrap;
}
html body .etp-coupon-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	max-width: 100%;
	padding: 4px 4px 4px 8px;
	border-radius: 8px;
	background: rgba(var(--cc-accent-rgb), .12);
	color: var(--cc-accent-dark);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .3px;
	line-height: 20px;
	vertical-align: middle;
}
html body .etp-coupon-chip .etp-cc-code {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
html body .etp-coupon-chip .etp-cc-ic {
	position: relative;
	flex: 0 0 16px;
	width: 16px;
	height: 16px;
}
html body .etp-coupon-chip .etp-cc-ic svg {
	position: absolute;
	inset: 0;
	width: 16px;
	height: 16px;
}
html body .etp-coupon-chip .etp-cc-check {
	opacity: 0;
}

/* Valore del coupon (−10% / −€5,00), dal filtro PHP woocommerce_cart_totals_coupon_label. */
html body .etp-coupon-chip .etp-cc-pct {
	padding: 0 6px;
	border-radius: 5px;
	background: var(--cc-accent);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 18px;
	white-space: nowrap;
}

/* "×": è il link di rimozione di WooCommerce spostato nel cartellino. Il testo "[Rimuovi]" resta per gli
   screen reader ma a font-size 0; letter-spacing 0 obbligatorio, altrimenti eredita .3px e sposta la X. */
html body .etp-coupon-chip a.woocommerce-remove-coupon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 20px;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	color: var(--cc-accent-dark);
	font-size: 0;
	letter-spacing: 0;
	text-decoration: none;
	cursor: pointer;
}
html body .etp-coupon-chip a.woocommerce-remove-coupon::before {
	content: "";
	width: 10px;
	height: 10px;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M1 1l8 8M9 1L1 9' stroke='%23000' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .etp-coupon-chip a.woocommerce-remove-coupon:hover {
	background: rgba(var(--cc-accent-rgb), .2);
}
html body .etp-coupon-chip a.woocommerce-remove-coupon:focus-visible {
	outline: 2px solid var(--cc-accent);
	outline-offset: 1px;
}
html body .etp-coupon-chip.etp-cc-removing {
	opacity: .5;
	pointer-events: none;
}

/* Animazione solo quando il codice è appena stato accettato (classe .etp-cc-new dal JS). */
@keyframes etpCcIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes etpCcFlash { from { background: rgba(var(--cc-accent-rgb), .38); } to { background: rgba(var(--cc-accent-rgb), .12); } }
@keyframes etpCcCheck { 0% { opacity: 0; transform: scale(0); } 30% { opacity: 1; transform: scale(1.2); } 70% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } }
@keyframes etpCcTag { 0%, 65% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } }
html body .etp-coupon-chip.etp-cc-new {
	animation: etpCcIn .25s ease-out, etpCcFlash .9s ease-out;
}
html body .etp-coupon-chip.etp-cc-new .etp-cc-check {
	animation: etpCcCheck 1s ease-out forwards;
}
html body .etp-coupon-chip.etp-cc-new .etp-cc-tag {
	animation: etpCcTag 1s ease-out forwards;
}
@media (prefers-reduced-motion: reduce) {
	html body .etp-coupon-chip.etp-cc-new,
	html body .etp-coupon-chip.etp-cc-new .etp-cc-check,
	html body .etp-coupon-chip.etp-cc-new .etp-cc-tag {
		animation: none;
	}
}

/* Rotellina sul pulsante "Applica" durante la verifica del codice (classe .etp-applying dal JS).
   Funziona anche su <input type="button"> (CheckoutWC), che non ha ::after: SVG animato come sfondo e testo
   trasparente. La rotellina è bianca: pensata per pulsanti scuri; su pulsanti chiari cambiare stroke='%23ffffff'. */
html body .etp-applying {
	color: transparent !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23ffffff' stroke-opacity='.35' stroke-width='2.2'/%3E%3Cpath d='M10 2a8 8 0 0 1 8 8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 10 10' to='360 10 10' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: center !important;
	background-size: 20px 20px !important;
	transition: none !important;
	pointer-events: none;
}

/* Dimavis: pulsante "Applica codice promozionale" chiaro del carrello (Flatsome .is-form, fondo #f9f9f9):
   rotellina grigia invece che bianca. */
html body button.is-form.etp-applying {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='8' fill='none' stroke='%23666666' stroke-opacity='.3' stroke-width='2.2'/%3E%3Cpath d='M10 2a8 8 0 0 1 8 8' fill='none' stroke='%23666666' stroke-width='2.2' stroke-linecap='round'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 10 10' to='360 10 10' dur='.7s' repeatCount='indefinite'/%3E%3C/path%3E%3C/svg%3E") !important;
}
/* Dimavis, layout Focused: il nostro "Applica" (.dmv-sconto-applica) durante la verifica è a opacità .6 (classe
   .dmv-carica del checkout): con la rotellina resta pieno. Su mobile i codici applicati sono nell'elenco sotto
   "Aggiungi sconto" (.dmv-sconto-attivo), dove il JS mette lo stesso cartellino. */
html body .dmv-sconto.dmv-carica .dmv-sconto-applica.etp-applying {
	opacity: 1;
}
html body .dmv-sconto-attivo .etp-coupon-chip {
	margin: 0 0 12px;
}