/* ============================================================
   ATTIVA_HEADER_CARRELLO_2_RIGHE - header carrello 2 righe + badge pill
   Caricato condizionalmente da includes/head.inc.php in base a flag PHP.
   Disattivare: $ATTIVA_HEADER_CARRELLO_2_RIGHE = 0 in php/config.inc.php
   ============================================================ */

/* ---- Disabilita transition globale `a` su elementi del chip carrello
       per evitare fade al cambio breakpoint 1200px ---- */
.header-cart > a,
.header-cart > a .cart-icon,
.header-cart > a .cart-icon img,
.header-cart > a .cart-icon span,
.header-cart > a .total-header-cart-preview {
	transition: none !important;
}

/* ---- Badge pill (tutte risoluzioni): da cerchio fisso a pill auto-espansa ---- */
.cart-icon span {
	width: auto;
	min-width: 20px;
	height: 20px;
	padding: 0 5px;
	line-height: 20px;
	border-radius: 10px;
	box-sizing: border-box;
	font-size: 10px;
	font-weight: 600;
	letter-spacing: -0.2px;
}

/* ---- Breakpoint stretto (<1200px): mantiene proporzioni di responsive.css:668 ---- */
@media (max-width: 1199px) {
	.cart-icon span {
		min-width: 18px;
		height: 18px;
		padding: 0 4px;
		line-height: 18px;
		border-radius: 9px;
		right: 0;
	}
}

/* ---- Mobile (<992px): chip inline [icona + totale euro] altezza ~32px allineata ai bottoni adiacenti (.submit-btn-2 36x32) ---- */
@media (max-width: 991px) {
	/* Parent flex: align-items center risolve baseline misalignment fra <a> (chip) e <button> */
	.mm_icon {
		display: flex;
		align-items: center;
		gap: 4px;
	}
	/* <a> deve crescere all'altezza del chip (32px) altrimenti chip deborda fuori dal box di <a> */
	.mm_icon > a {
		display: inline-flex;
		align-items: center;
	}

	/* Chip: <a> con totale euro (preferito) oppure, fallback, con numero prodotti.
	   Il chip è tutto l'<a> perche' .total-header-cart-preview e' sibling di .cart-icon. */
	.mm_icon > a:has(.total-header-cart-preview),
	.mm_icon > a:has(.cart-icon span) {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		background-color: #fff;
		border: 1px solid #cacaca;
		border-radius: 6px;
		height: 32px;
		padding: 0 10px;
		line-height: 1;
		box-sizing: border-box;
	}
	.mm_icon > a:has(.total-header-cart-preview) .cart-icon,
	.mm_icon > a:has(.cart-icon span) .cart-icon {
		display: flex;
		align-items: center;
		padding: 0;
		margin: 0;
	}
	.mm_icon > a .cart-icon img {
		width: 20px;
		height: auto;
		padding: 0;
	}

	/* Caso preferito: c'e' il totale euro -> mostra totale, nascondi numero prodotti */
	.mm_icon > a:has(.total-header-cart-preview) .cart-icon span {
		display: none;
	}
	.mm_icon > a:has(.total-header-cart-preview) .total-header-cart-preview {
		display: inline-flex !important;
		align-items: center;
		padding: 0;
		margin: 0;
		line-height: 1;
		font-size: 14px;
		font-weight: 700;
		color: #eb3e32;
		white-space: nowrap;
	}
	/* Nascondi il chevron (i.fa-angle-down) accanto al totale nel chip */
	.mm_icon > a:has(.total-header-cart-preview) .total-header-cart-preview i {
		display: none;
	}

	/* Fallback (carrello con prodotti ma totale non disponibile, es. non loggato):
	   mostra il numero prodotti come testo nel chip */
	.mm_icon > a:not(:has(.total-header-cart-preview)) .cart-icon span {
		position: static;
		top: auto;
		right: auto;
		width: auto;
		min-width: 0;
		height: auto;
		padding: 0;
		background-color: transparent;
		border: none;
		border-radius: 0;
		line-height: 1;
		font-size: 14px;
		font-weight: 700;
		color: #eb3e32;
		letter-spacing: 0;
	}
}

/* ---- Desktop >=1200px: chip unico su 2 righe (riga1 bianca icona+numero, riga2 rossa totale) ---- */
@media (min-width: 1200px) {

	/* Carrello PIENO: tutto l'<a> diventa un chip rosso a 2 righe verticali
	   - riga 1 bianca: icona originale + numero rosso
	   - riga 2 rossa:  totale euro bianco */
	.header-cart > a:has(.total-header-cart-preview) {
		display: inline-flex;
		flex-direction: column;
		align-items: stretch;
		background-color: #eb3e32;
		border: 1px solid #cacaca;
		border-radius: 6px;
		overflow: hidden;
		line-height: 1;
		padding: 0;
		text-decoration: none;
		min-width: 90px;
	}
	.header-cart > a:has(.total-header-cart-preview) .cart-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #fff;
		padding: 4px 10px;
		margin: 0;
		gap: 6px;
	}
	.header-cart > a:has(.total-header-cart-preview) .cart-icon img {
		width: 16px;
		height: auto;
		padding: 0;
	}
	.header-cart > a:has(.total-header-cart-preview) .cart-icon span {
		position: static;
		top: auto;
		right: auto;
		width: auto;
		min-width: 0;
		height: auto;
		padding: 0;
		background-color: transparent;
		border-radius: 0;
		border: none;
		line-height: 1;
		font-size: 12px;
		font-weight: 700;
		color: #eb3e32;
		letter-spacing: 0;
	}
	.header-cart > a:has(.total-header-cart-preview) .total-header-cart-preview {
		display: flex !important;
		align-items: center;
		justify-content: center;
		padding: 4px 10px;
		font-size: 13px;
		font-weight: 700;
		color: #fff;
		white-space: nowrap;
		font-variant-numeric: tabular-nums;
		background-color: transparent;
	}

	/* Carrello VUOTO o senza prezzo: fallback icona piana, niente chip */
	.header-cart > a:not(:has(.total-header-cart-preview)) .cart-icon {
		display: block;
		padding-right: 0;
	}
}