/* Sustain-X Clean Video — see sustainx-clean-video.php. */

/* The box a video sits in (Elementor's wrapper, or ours around a plain
   embed). Its own shape is kept; the frame inside takes the video's. */
.sxcv-box {
	position: relative;
	background: #000;
	overflow: hidden;
}

/* A frame of the video's own shape, centred in the box. */
.sxcv-frame {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	overflow: hidden;
}

/* Twice the frame's height, centred: the video lands exactly in the frame
   and YouTube's bars, drawn against the iframe's edges, are clipped. The
   pointer never reaches YouTube, so its hover chrome never shows. */
.sxcv-frame iframe {
	position: absolute !important;
	left: 0 !important;
	top: -50% !important;
	width: 100% !important;
	height: 200% !important;
	max-width: none !important;
	pointer-events: none !important;
	border: 0 !important;
}

/* Elementor's iframe stays where Elementor put it (moving it would reload
   it and lose autoplay and loop); the script places and clips it inside the
   wrapper, which keeps the size Elementor gave it. */
.sxcv-box.sxcv-inplace iframe {
	position: absolute !important;
	max-width: none !important;
	pointer-events: none !important;
	border: 0 !important;
}

.sxcv-box.sxcv-inplace .sxcv-poster {
	inset: auto;
}

.sxcv-poster {
	position: absolute;
	inset: 0;
	background: #000 center / cover no-repeat;
	transition: opacity .2s;
}

.sxcv-ui {
	position: absolute;
	inset: 0;
	cursor: pointer;
	transition: opacity .2s;
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
	color: #fff;
	-webkit-tap-highlight-color: transparent;
}

.sxcv-ui.is-hidden {
	opacity: 0;
}

.sxcv-play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	border: 0;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	padding: 0;
}

.sxcv-play svg {
	width: 28px;
	height: 28px;
	fill: #0b3bff;
}

.sxcv-bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 18px 12px 8px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .6));
	container-type: inline-size;
}

.sxcv-time {
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.sxcv-track {
	flex: 1;
	height: 16px;
	display: flex;
	align-items: center;
	cursor: pointer;
}

.sxcv-track span {
	display: block;
	height: 3px;
	width: 100%;
	border-radius: 2px;
	background: rgba(255, 255, 255, .3);
	overflow: hidden;
}

.sxcv-track b {
	display: block;
	height: 100%;
	width: 0;
	background: #0b3bff;
}

.sxcv-mute {
	border: 0;
	background: none;
	padding: 0;
	width: 24px;
	height: 24px;
	cursor: pointer;
}

.sxcv-mute svg {
	width: 22px;
	height: 22px;
	fill: #fff;
}

/* Controls shed as the player narrows (a portrait frame is narrow): the
   duration first, keeping elapsed time; the sound button stays. */
@container (max-width: 220px) {
	.sxcv-total {
		display: none;
	}
}

@container (max-width: 150px) {
	.sxcv-time {
		display: none;
	}
}