.xbvideo {
	position: relative;
	width: 100%;
	overflow: hidden;
	background: #000;
}

/* Altezza automatica: tutta la larghezza, proporzioni 16:9 */
.xbvideo--auto {
	aspect-ratio: 16 / 9;
}

.xbvideo--full {
	height: 100vh;
	height: 100svh;
}

.xbvideo--custom {
	height: var(--xbvideo-height, 70vh);
}

.xbvideo__frame {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* L'iframe viene dimensionato via JS per coprire l'area e ritagliare le scritte di YouTube */
.xbvideo__frame iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100%;
	height: 100%;
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

.xbvideo__poster {
	position: absolute;
	inset: 0;
	z-index: 2;
	background-color: #000;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	transition: opacity .6s ease;
	pointer-events: none;
}

.xbvideo.is-playing .xbvideo__poster {
	opacity: 0;
}

/* Loader del primo caricamento: anello che gira attorno a un simbolo "play" */
.xbvideo__loader {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: radial-gradient(circle at center, rgba(0, 0, 0, .35) 0, rgba(0, 0, 0, 0) 60%);
	transition: opacity .5s ease, visibility .5s;
	pointer-events: none;
}

.xbvideo.is-loaded .xbvideo__loader {
	opacity: 0;
	visibility: hidden;
}

.xbvideo__spinner {
	position: absolute;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, .25);
	border-top-color: #fff;
	animation: xbvideo-spin 1s linear infinite;
}

.xbvideo__play {
	width: 0;
	height: 0;
	margin-left: 5px;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
	animation: xbvideo-pulse 1.6s ease-in-out infinite;
}

@keyframes xbvideo-spin {
	to { transform: rotate(360deg); }
}

@keyframes xbvideo-pulse {
	0%, 100% { opacity: .55; transform: scale(.9); }
	50% { opacity: 1; transform: scale(1); }
}

@media (max-width: 768px) {
	.xbvideo__spinner { width: 52px; height: 52px; }
	.xbvideo__play { border-width: 9px 0 9px 15px; margin-left: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	.xbvideo__spinner { animation-duration: 3s; }
	.xbvideo__play { animation: none; opacity: 1; }
}