.vvm-slider-controls {
	--vvm-slider-controls-gap: 0.75rem;
	--vvm-slider-controls-inset-inline: clamp(0.75rem, 2vw, 1.5rem);
	--vvm-slider-controls-inset-block: clamp(0.75rem, 2vw, 1.5rem);
	--vvm-slider-controls-offset-x: 0px;
	--vvm-slider-controls-offset-y: 0px;
	--vvm-slider-controls-width: calc(
		100% - (var(--vvm-slider-controls-inset-inline) * 2)
	);
	--vvm-slider-controls-center-trim-block-start: 0px;
	--vvm-slider-controls-center-trim-block-end: 0px;
	--vvm-slider-controls-idle-opacity: 0.58;

	position: absolute;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: var(--vvm-slider-controls-gap);
	pointer-events: none;
	opacity: var(--vvm-slider-controls-idle-opacity);
	transition: opacity 0.24s ease;
}

/*
 * Slider surfaces opt into the shared fade behavior so arrows stay visible but
 * only reach full opacity when visitors engage with that carousel region.
 */
.vvm-slider-surface:hover .vvm-slider-controls,
.vvm-slider-surface:focus-within .vvm-slider-controls,
.vvm-slider-controls:hover,
.vvm-slider-controls:focus-within {
	opacity: 1;
}

.vvm-slider-controls--preset-center,
.vvm-slider-controls--media-center {
	top: calc(
		var(--vvm-slider-controls-center-trim-block-start) +
			(
				(
					100% - var(--vvm-slider-controls-center-trim-block-start) -
						var(--vvm-slider-controls-center-trim-block-end)
				) / 2
			)
	);
	left: 0;
	right: 0;
	justify-content: space-between;
	width: min(100%, var(--vvm-slider-controls-width));
	margin-inline: auto;
	padding-inline: var(--vvm-slider-controls-inset-inline);
	transform: translate(
		var(--vvm-slider-controls-offset-x),
		calc(-50% + var(--vvm-slider-controls-offset-y))
	);
}

.vvm-slider-controls--preset-bottom-right,
.vvm-slider-controls--bottom-right {
	right: var(--vvm-slider-controls-inset-inline);
	bottom: var(--vvm-slider-controls-inset-block);
	justify-content: flex-end;
	transform: translate(
		var(--vvm-slider-controls-offset-x),
		var(--vvm-slider-controls-offset-y)
	);
}

.vvm-slider-controls--preset-bottom-center {
	left: 50%;
	bottom: var(--vvm-slider-controls-inset-block);
	justify-content: center;
	transform: translate(
		calc(-50% + var(--vvm-slider-controls-offset-x)),
		var(--vvm-slider-controls-offset-y)
	);
}

.vvm-slider-button {
	--vvm-slider-button-size: clamp(2.8rem, 4vw, 3.5rem);
	--vvm-slider-button-icon-size: clamp(1rem, 1.4vw, 1.25rem);

	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--vvm-slider-button-size);
	height: var(--vvm-slider-button-size);
	padding: 0;
	border: 1px solid rgba(1, 50, 35, 0.14);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.92);
	color: #013223;
	box-shadow:
		0 14px 28px rgba(7, 20, 16, 0.14),
		0 2px 6px rgba(7, 20, 16, 0.08);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition:
		background 0.24s ease,
		border-color 0.24s ease,
		color 0.24s ease,
		box-shadow 0.24s ease,
		opacity 0.24s ease,
		transform 0.24s ease;
	opacity: 1;
	cursor: pointer;
	pointer-events: auto;
}

.vvm-slider-button:hover:not(:disabled),
.vvm-slider-button:focus-visible:not(:disabled) {
	background: #ffffff;
	border-color: rgba(1, 50, 35, 0.22);
	color: #013223;
	box-shadow:
		0 18px 34px rgba(7, 20, 16, 0.18),
		0 4px 10px rgba(7, 20, 16, 0.1);
	transform: scale(1.03);
	opacity: 1;
}

.vvm-slider-button:focus-visible {
	outline: none;
}

.vvm-slider-button:disabled {
	opacity: 0.28;
	cursor: default;
	transform: none;
}

.vvm-slider-button__icon {
	width: var(--vvm-slider-button-icon-size);
	height: var(--vvm-slider-button-icon-size);
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 2.2;
}

.vvm-slider-button--prev .vvm-slider-button__icon {
	transform: rotate(180deg);
}

/*
 * Older block markup still includes the overlay modifier while we migrate each
 * block to the single shared button treatment. Keep the selector as a no-op so
 * existing templates do not lose the shared base styling.
 */
.vvm-slider-button--overlay {
}

.vvm-video-control {
	--vvm-video-control-size: clamp(2.15rem, 3vw, 2.65rem);
	--vvm-video-control-icon-size: clamp(0.78rem, 1.1vw, 0.95rem);

	position: absolute;
	right: clamp(0.85rem, 1.8vw, 1.35rem);
	bottom: clamp(0.85rem, 1.8vw, 1.35rem);
	z-index: 60;
	display: inline-flex;
	width: var(--vvm-video-control-size);
	height: var(--vvm-video-control-size);
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--wp--preset--color--gold, #c4922a);
	border-radius: 999px;
	background: var(--wp--preset--color--white, #ffffff);
	color: var(--wp--preset--color--gold, #c4922a);
	cursor: pointer;
	pointer-events: auto;
	box-shadow: 0 10px 24px rgba(0, 0, 0, 0.16);
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease,
		color 0.2s ease,
		box-shadow 0.2s ease,
		transform 0.2s ease;
}

.vvm-video-control:hover,
.vvm-video-control:focus-visible {
	background: var(--wp--preset--color--white, #ffffff);
	border-color: var(--wp--preset--color--gold, #c4922a);
	color: var(--wp--preset--color--gold, #c4922a);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2);
	transform: translateY(-1px);
}

.vvm-video-control:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold, #c4922a);
	outline-offset: 3px;
}

.vvm-video-control[aria-disabled="true"] {
	cursor: progress;
}

.vvm-video-control__icon {
	display: block;
	width: var(--vvm-video-control-icon-size);
	height: var(--vvm-video-control-icon-size);
	fill: currentColor;
}

.vvm-video-control__icon--pause,
.vvm-video-control[data-vvm-video-control-state="playing"] .vvm-video-control__icon--play {
	display: none;
}

.vvm-video-control[data-vvm-video-control-state="playing"] .vvm-video-control__icon--pause {
	display: block;
}

.vvm-vimeo-shell {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, #28463a 0%, #0d2a22 100%);
	overflow: hidden;
}

.vvm-vimeo-shell__player,
.vvm-vimeo-shell__poster-shell {
	position: absolute;
	inset: 0;
	transition: opacity 0.35s ease;
}

.vvm-vimeo-shell__player {
	opacity: 0;
	pointer-events: none;
}

.vvm-vimeo-shell__poster-shell {
	opacity: 1;
}

.vvm-vimeo-shell[data-vimeo-visible-state="loading"] .vvm-vimeo-shell__player,
.vvm-vimeo-shell[data-vimeo-visible-state="player"] .vvm-vimeo-shell__player {
	opacity: 1;
}

.vvm-vimeo-shell[data-vimeo-visible-state="player"] .vvm-vimeo-shell__poster-shell {
	opacity: 0;
	pointer-events: none;
}

.vvm-vimeo-shell__iframe,
.vvm-vimeo-shell__poster {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.vvm-vimeo-shell__iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	pointer-events: none;
	transform: translate(-50%, -50%);
}

.vvm-vimeo-shell__poster {
	object-fit: cover;
}

@media (max-width: 781px) {
	.vvm-slider-controls {
		--vvm-slider-controls-gap: 0.5rem;
		--vvm-slider-controls-inset-inline: 0.75rem;
		--vvm-slider-controls-inset-block: 0.75rem;
	}

	.vvm-slider-button {
		--vvm-slider-button-size: 2.9rem;
		--vvm-slider-button-icon-size: 1rem;
	}
}