/* =========================================================================
   MOBILE BOTTOM BAR — Navigazione app-like per smartphone
   Visibile solo sotto 992px (breakpoint lg di Bootstrap 5).

   2026-05-22 — ridisegnata "flottante": barra staccata dai bordi, angoli
   molto arrotondati, effetto vetro (liquid glass) con blur + traslucenza.
   La voce attiva e' evidenziata da una capsula tinta di verde brand.
   ========================================================================= */

.mobile-bottom-bar {
	display: none;
}

/* Quanto spazio si mangia la barra flottante in fondo allo schermo: la sua
   altezza (62px) piu' lo stacco dal bordo (10px), piu' la safe-area dei
   telefoni col notch. Serve a chi deve stare SOPRA la barra e non sapere a
   memoria questi numeri (oggi: il bottone "LA STORIA" nell'hero della home).
   30/07/2026: prima quel bottone aveva un suo 82px scritto a mano, sotto i
   768px, mentre la barra compare sotto i 992: nella fascia in mezzo i due
   numeri non si parlavano. Vale 0 dove la barra non c'e'. */
:root {
	--mobile-bar-space: 0px;
}

@media (max-width: 991.98px) {
	:root {
		--mobile-bar-space: calc(72px + env(safe-area-inset-bottom, 0px));
	}

	.mobile-bottom-bar {
		display: flex;
		position: fixed;
		left: 12px;
		right: 12px;
		bottom: calc(10px + env(safe-area-inset-bottom, 0px));
		z-index: 1055;
		height: 62px;
		padding: 6px;
		gap: 4px;
		box-sizing: border-box;
		justify-content: space-around;
		align-items: stretch;
		/* Pill pieno — stile barra flottante iOS (Liquid Glass) */
		border-radius: 999px;
		/* Liquid glass: traslucenza + blur + boost di saturazione */
		background: rgba(255, 255, 255, 0.72);
		-webkit-backdrop-filter: blur(20px) saturate(180%);
		backdrop-filter: blur(20px) saturate(180%);
		border: 1px solid rgba(255, 255, 255, 0.55);
		box-shadow: 0 10px 30px rgba(20, 40, 25, 0.20),
		            0 2px 6px rgba(0, 0, 0, 0.06);
	}

	/* Fallback: se il browser non fa il blur, barra (quasi) opaca */
	@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
		.mobile-bottom-bar {
			background: rgba(255, 255, 255, 0.98);
		}
	}

	/* Singola voce */
	.bottom-bar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 4px;
		flex: 1;
		border-radius: 999px;
		text-decoration: none;
		color: #7c827c;
		/* 30/07/2026: da 0.62rem a 0.7rem, una tacca piu' grande (cliente). */
		font-size: 0.7rem;
		font-weight: 600;
		letter-spacing: 0.01em;
		transition: color 0.25s ease, background-color 0.25s ease;
		position: relative;
		-webkit-tap-highlight-color: transparent;
	}

	/* 30/07/2026: l'insieme icona+scritta sembrava spinto in alto dentro la
	   capsula. I due riquadri erano centrati alla perfezione, ma la scritta si
	   portava dietro l'interlinea (riquadro da 15px per un testo da 10) e sotto
	   restava aria vuota che sopra non c'era. Con line-height 1 il riquadro
	   aderisce alle lettere e il centraggio torna a valere su quello che si
	   vede, non su spazio invisibile. Il padding-top recupera il mezzo pixel
	   che manca perche' le icone non riempiono tutto il loro quadrato in alto. */
	.bottom-bar-item span {
		line-height: 1;
	}

	.bottom-bar-item i {
		font-size: 1.15rem;
		line-height: 1;
		padding-top: 1px;
	}

	/* Voce attiva: capsula verde brand */
	.bottom-bar-item.active {
		color: var(--primary-color, #1e4d2b);
		background-color: rgba(30, 77, 43, 0.12);
	}

	/* Feedback al tocco */
	.bottom-bar-item:active {
		background-color: rgba(30, 77, 43, 0.08);
	}

	/* Badge carrello / messaggi */
	.bottom-bar-badge {
		position: absolute;
		top: 5px;
		right: calc(50% - 20px);
		background-color: var(--secondary-color, #E5A835);
		color: #fff;
		font-size: 0.58rem;
		font-weight: 700;
		min-width: 16px;
		height: 16px;
		/* La cifra si centra con flex, non con line-height: 16px. Il line-height
		   distribuisce lo spazio secondo le metriche del font, e con Outfit la
		   cifra restava alta nel pallino. Stesso inganno dell'icona + testo qui
		   sotto: lo spazio sopra e sotto il glifo non e' mai simmetrico. */
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
		border-radius: 99px;
		padding: 0 4px;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
	}

	/* Spazio in fondo al body: barra (62) + stacco sopra/sotto + safe-area */
	body.store-body,
	body.site-body,
	body.store-login-page {
		padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px));
	}

	/* Full width sotto LG: niente margini laterali sprecati */
	body.store-body .container,
	body.site-body .container {
		max-width: 100%;
	}

	/* Toast container sopra la bottom bar flottante */
	.toast-container.position-fixed.bottom-0 {
		bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
	}
}

/* Utenti che chiedono meno trasparenze: barra opaca, niente blur */
@media (max-width: 991.98px) and (prefers-reduced-transparency: reduce) {
	.mobile-bottom-bar {
		background: rgba(255, 255, 255, 0.98);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}