/* Hero Video Optimizer - Elementor background video */

/* Il container deve contenere video + controlli */
.hero-video {
	position: relative;
	overflow: hidden;
}

/* Video Elementor o nostro: non deve intercettare click */
.hero-video .elementor-background-video-container,
.hero-video video {
	pointer-events: none;
}

/* Controlli - icona sempre visibile, slider appare al hover */
/* Mobile: bottom-left */
.hero-video-controls {
	position: absolute;
	bottom: 40px;
	left: 40px;
	display: flex;
	align-items: center;
	gap: 14px;
	z-index: 50;
	pointer-events: auto;
}

/* Desktop e tablet: top-left, entro area max 1440px centrata */
@media (min-width: 768px) {
	.hero-video-controls {
		bottom: auto;
		left: max(18px, calc(50% - 610px)); 
		top: 40px;
		right: auto;
	}
}

/* Slider volume: nascosto di default, appare al hover */
.hero-volume {
	width: 130px;
	height: 48px;
	display: flex;
	align-items: center;
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.35s ease, transform 0.35s ease;
	pointer-events: none;
}

.hero-video:hover .hero-volume,
.hero-video:focus-within .hero-volume {
	opacity: 1;
	transform: translateX(0);
	pointer-events: auto;
}

@media (max-width: 767px) {
	.hero-volume {
		display: none;
	}
	/* Touch: rimuove ritardo 300ms e migliora risposta al tap */
	.hero-video-controls {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
	}
	.hero-sound-btn {
		touch-action: manipulation;
		-webkit-tap-highlight-color: transparent;
		min-width: 48px;
		min-height: 48px;
		/* Area touch più generosa: padding invisibile */
		padding: 8px;
		margin: -8px;
	}
}

.hero-sound-btn {
	width: 48px;
	height: 48px;
	border-radius: 999px;
	border: none;
	background: rgba(255, 255, 255, 0.14);
	backdrop-filter: blur(8px);
	color: #fff;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
	outline: none;
}

/* Evita viola/blu da :focus/:focus-visible del browser o tema */
.hero-sound-btn:focus,
.hero-sound-btn:focus-visible,
.hero-sound-btn:active {
	background: rgba(255, 255, 255, 0.24);
	box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3);
}

.hero-sound-btn:hover {
	transform: scale(1.06);
	background: rgba(255, 255, 255, 0.24);
}

.hero-volume input[type="range"] {
	width: 100%;
	appearance: none;
	height: 18px; /* Spazio per centrare thumb 14px sulla track 4px */
	border-radius: 99px;
	background: transparent;
	outline: none;
	margin: 0;
	touch-action: none;
}

.hero-volume input[type="range"]::-webkit-slider-thumb {
	appearance: none;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	margin-top: -5px; /* Centra thumb sulla track: (4-14)/2 */
}

.hero-volume input[type="range"]::-webkit-slider-runnable-track {
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.45);
}

.hero-volume input[type="range"]::-moz-range-thumb {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
	border: none;
}

.hero-volume input[type="range"]::-moz-range-track {
	height: 4px;
	border-radius: 99px;
	background: rgba(255, 255, 255, 0.45);
}

.hero-volume input[type="range"]:focus {
	outline: none;
}

/* Icone mute/unmute: toggle via data-state, no textContent = no flicker */
.hero-sound-icon--muted,
.hero-sound-icon--unmuted {
	display: block;
	pointer-events: none;
}
.hero-sound-icon--unmuted {
	display: none;
}
.hero-sound-btn[data-state="unmuted"] .hero-sound-icon--muted {
	display: none;
}
.hero-sound-btn[data-state="unmuted"] .hero-sound-icon--unmuted {
	display: block;
}
.hero-sound-icon img {
	display: block;
	pointer-events: none;
}