.vaa-wrap {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	overflow: hidden;
	background: #000;
	line-height: 0;
}

.vaa-wrap .vaa-video {
	display: block;
	width: 100%;
	height: 100%;
}

.vaa-wrap.vaa-ratio-auto .vaa-video {
	height: auto;
}

/* Pulsante audio */
.vaa-toggle {
	position: absolute;
	z-index: 3;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 44px;
	height: 44px;
	padding: 0 11px;
	margin: 0;
	border: 0;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: #fff;
	font: 500 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	cursor: pointer;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background .2s ease, transform .2s ease;
}

.vaa-toggle:hover { background: rgba(0, 0, 0, .75); transform: scale(1.05); }
.vaa-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.vaa-pos-bottom-right .vaa-toggle { right: 16px; bottom: 16px; }
.vaa-pos-bottom-left  .vaa-toggle { left: 16px;  bottom: 16px; }
.vaa-pos-top-right    .vaa-toggle { right: 16px; top: 16px; }
.vaa-pos-top-left     .vaa-toggle { left: 16px;  top: 16px; }

.vaa-ico { width: 22px; height: 22px; flex: 0 0 22px; }
.vaa-ico-sound { display: none; }
.vaa-toggle[aria-pressed="true"] .vaa-ico-muted { display: none; }
.vaa-toggle[aria-pressed="true"] .vaa-ico-sound { display: block; }

.vaa-label { display: none; white-space: nowrap; }
.vaa-toggle.vaa-has-label .vaa-label { display: inline; padding-right: 4px; }

/* Pulsante play di riserva (se il browser blocca l'autoplay) */
.vaa-play {
	position: absolute;
	z-index: 2;
	top: 50%;
	left: 50%;
	width: 72px;
	height: 72px;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .6);
	color: #fff;
	cursor: pointer;
	transform: translate(-50%, -50%);
	display: flex;
	align-items: center;
	justify-content: center;
}
.vaa-play[hidden] { display: none; }
.vaa-play svg { width: 34px; height: 34px; margin-left: 4px; }

@media (max-width: 600px) {
	.vaa-pos-bottom-right .vaa-toggle { right: 10px; bottom: 10px; }
	.vaa-pos-bottom-left  .vaa-toggle { left: 10px;  bottom: 10px; }
	.vaa-pos-top-right    .vaa-toggle { right: 10px; top: 10px; }
	.vaa-pos-top-left     .vaa-toggle { left: 10px;  top: 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.vaa-toggle { transition: none; }
}