/**
 * Funzioni sito: layout boxed, back-to-top, preloader, cookie banner, 404.
 * Tutto su design token (--bpc-*), gestibile dal Pannello Tema.
 */

/* --- Layout boxed --- */
body.bpc-boxed {
	background: var(--bpc-boxed-bg, #e6e6e6);
}
body.bpc-boxed .bpc-site-header,
body.bpc-boxed #bpc-main,
body.bpc-boxed .bpc-site-footer,
body.bpc-boxed main {
	max-width: var(--bpc-container-max, 1280px);
	margin-left: auto;
	margin-right: auto;
	background: var(--bpc-background, #fff);
}

/* --- Back to top --- */
.bpc-back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 900;
	width: 3rem;
	height: 3rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: none;
	border-radius: var(--bpc-radius-lg, 0.5rem);
	background: var(--bpc-primary, #63001b);
	color: var(--bpc-on-primary, #fff);
	cursor: pointer;
	opacity: 0;
	transform: translateY(10px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
}
.bpc-back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.bpc-back-to-top:hover {
	filter: brightness(1.1);
}

/* --- Preloader --- */
.bpc-preloader {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bpc-background, #f9f9f9);
	transition: opacity 0.4s ease, visibility 0.4s ease;
}
.bpc-preloader.is-hidden {
	opacity: 0;
	visibility: hidden;
}
.bpc-preloader__spinner {
	width: 44px;
	height: 44px;
	border: 4px solid var(--bpc-outline-variant, #e0bfc0);
	border-top-color: var(--bpc-primary, #63001b);
	border-radius: 50%;
	animation: bpc-spin 0.8s linear infinite;
}
@keyframes bpc-spin {
	to { transform: rotate(360deg); }
}

/* --- Cookie banner --- */
.bpc-cookie {
	position: fixed;
	left: 1rem;
	right: 1rem;
	bottom: 1rem;
	z-index: 950;
	background: var(--bpc-surface-container-lowest, #fff);
	color: var(--bpc-on-surface, #1a1c1c);
	border: 1px solid var(--bpc-outline-variant, #e0bfc0);
	border-radius: var(--bpc-radius-lg, 0.5rem);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.bpc-cookie__inner {
	max-width: var(--bpc-container-max, 1280px);
	margin: 0 auto;
	padding: 1rem 1.25rem;
	display: flex;
	align-items: center;
	gap: 1.25rem;
	flex-wrap: wrap;
	justify-content: space-between;
}
.bpc-cookie__text {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
	flex: 1 1 320px;
}
.bpc-cookie__text a {
	color: var(--bpc-primary, #63001b);
	text-decoration: underline;
}
.bpc-cookie__accept {
	border: none;
	background: var(--bpc-primary, #63001b);
	color: var(--bpc-on-primary, #fff);
	padding: 0.65rem 1.5rem;
	border-radius: var(--bpc-radius-lg, 0.5rem);
	font-weight: 700;
	cursor: pointer;
}
.bpc-cookie__accept:hover {
	filter: brightness(1.1);
}

/* --- Pagina 404 --- */
.bpc-404__inner {
	text-align: center;
	padding: 5rem 1.5rem;
	max-width: 640px;
}
.bpc-404__code {
	font-family: var(--bpc-font-headline, inherit);
	font-size: clamp(4rem, 15vw, 8rem);
	font-weight: 800;
	line-height: 1;
	color: var(--bpc-primary, #63001b);
	margin: 0;
	opacity: 0.9;
}
.bpc-404__title {
	margin: 0.5rem 0 1rem;
}
.bpc-404__text {
	color: var(--bpc-on-surface-variant, #584142);
	font-size: 1.1rem;
	margin: 0 0 2rem;
}
.bpc-404__search {
	display: flex;
	gap: 0.5rem;
	justify-content: center;
	margin: 0 auto 2rem;
	max-width: 420px;
}
.bpc-404__search input {
	flex: 1;
	padding: 0.7rem 1rem;
	border: 1px solid var(--bpc-outline-variant, #e0bfc0);
	border-radius: var(--bpc-radius-lg, 0.5rem);
}
.bpc-404__search button,
.bpc-404__btn {
	cursor: pointer;
}

/* ==========================================================================
 * Modalita' risparmio energetico ("Eco Mode")
 *
 * Overlay scuro a schermo intero mostrato dopo un periodo di inattivita'.
 * Colori pilotati da variabili inline (--bpc-eco-bg, --bpc-eco-accent) impostate
 * dal pannello. Riduce i consumi (pixel scuri su OLED) e comunica sostenibilita'.
 * ========================================================================== */
.bpc-eco {
	position: fixed;
	inset: 0;
	z-index: 100000; /* sopra a tutto, incluso il preloader (99999). */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 2rem 1.5rem;
	text-align: center;
	color: #eaf6ee;
	background:
		radial-gradient(120% 90% at 50% 42%, color-mix(in srgb, var(--bpc-eco-accent, #4ade80) 12%, transparent) 0%, transparent 60%),
		var(--bpc-eco-bg, #0a0f0c);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.7s ease, visibility 0.7s ease;
	cursor: pointer;
}
.bpc-eco.is-active {
	opacity: 1;
	visibility: visible;
}
/* Fallback per browser senza color-mix: un velo accento leggero. */
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
	.bpc-eco {
		background:
			radial-gradient(120% 90% at 50% 42%, rgba(74, 222, 128, 0.12) 0%, transparent 60%),
			var(--bpc-eco-bg, #0a0f0c);
	}
}

.bpc-eco__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	max-width: 560px;
	transform: translateY(12px);
	transition: transform 0.9s ease;
}
.bpc-eco.is-active .bpc-eco__inner {
	transform: translateY(0);
}

.bpc-eco__logo {
	margin-bottom: 0.5rem;
}
.bpc-eco__logo img {
	width: auto;
	max-width: 210px;
	height: auto;
	max-height: 56px;
	/* Rende monocromatico bianco qualsiasi logo, per la schermata scura. */
	filter: brightness(0) invert(1);
	opacity: 0.92;
}

/* Icona lampadina con bagliore pulsante */
.bpc-eco__icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 118px;
	height: 118px;
	color: var(--bpc-eco-accent, #4ade80);
}
.bpc-eco__icon svg {
	position: relative;
	z-index: 1;
	filter: drop-shadow(0 0 14px color-mix(in srgb, var(--bpc-eco-accent, #4ade80) 65%, transparent));
}
.bpc-eco__glow {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle, var(--bpc-eco-accent, #4ade80) 0%, transparent 68%);
	opacity: 0.28;
	animation: bpc-eco-glow 3.4s ease-in-out infinite;
}
@keyframes bpc-eco-glow {
	0%, 100% { opacity: 0.18; transform: scale(0.9); }
	50% { opacity: 0.42; transform: scale(1.12); }
}

.bpc-eco__title {
	margin: 0;
	font-family: var(--bpc-font-headline, inherit);
	font-size: clamp(1.4rem, 4vw, 1.9rem);
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #fff;
}
.bpc-eco__message {
	margin: 0;
	font-size: clamp(0.98rem, 2.4vw, 1.1rem);
	line-height: 1.6;
	color: color-mix(in srgb, var(--bpc-eco-accent, #4ade80) 30%, #dfeee5);
	max-width: 46ch;
}

.bpc-eco__timer {
	display: inline-flex;
	flex-direction: column;
	gap: 0.15rem;
	margin: 0.5rem 0 0;
}
.bpc-eco__timer-label {
	font-family: var(--bpc-font-label, inherit);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: rgba(234, 246, 238, 0.55);
}
.bpc-eco__timer-value {
	font-family: var(--bpc-font-headline, inherit);
	font-size: 1.6rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--bpc-eco-accent, #4ade80);
}

.bpc-eco__resume {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	margin: 1rem 0 0;
	font-size: 0.9rem;
	color: rgba(234, 246, 238, 0.7);
}
.bpc-eco__pulse {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--bpc-eco-accent, #4ade80);
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--bpc-eco-accent, #4ade80) 70%, transparent);
	animation: bpc-eco-pulse 2s ease-out infinite;
}
@keyframes bpc-eco-pulse {
	0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--bpc-eco-accent, #4ade80) 60%, transparent); }
	70% { box-shadow: 0 0 0 12px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}

/* Mentre la modalita' e' attiva, mette in pausa le animazioni CSS della pagina
 * sottostante (risparmio reale), lasciando attive quelle dell'overlay. */
html.bpc-eco-on body * { animation-play-state: paused !important; }
html.bpc-eco-on .bpc-eco,
html.bpc-eco-on .bpc-eco * { animation-play-state: running !important; }

/* Rispetta "riduci movimento": niente bagliori/pulsazioni animate. */
@media (prefers-reduced-motion: reduce) {
	.bpc-eco,
	.bpc-eco__inner { transition: opacity 0.3s ease, visibility 0.3s ease; }
	.bpc-eco__inner { transform: none; }
	.bpc-eco__glow,
	.bpc-eco__pulse { animation: none; }
}

/* Overlay consenso mappa (GDPR: nessun tile esterno prima del click) */
.bpc-map-consent {
	position: absolute;
	inset: 0;
	z-index: 500;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	min-height: 320px;
	background: var(--bpc-surface-container-low, #f4f3f3);
	border-radius: inherit;
}
.bpc-map-consent__inner {
	max-width: 380px;
	text-align: center;
}
.bpc-map-consent__icon {
	font-size: 44px;
	color: var(--bpc-primary, #63001b);
}
.bpc-map-consent__text {
	margin: 0.5rem 0 1rem;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--bpc-on-surface-variant, #584142);
}