/*!
 * Buro Staal Video Player — frontend stylesheet.
 * All colors, sizes, timings are CSS custom properties (--bsvp-*).
 * Layout keys and states are data-attributes on the .bsvp root or classes
 * added by the JS core.
 */

.bsvp {
	/* stage & container */
	--bsvp-aspect: 16 / 9;
	--bsvp-stage-bg: #000000;
	--bsvp-stage-radius: 0;
	--bsvp-stage-inset: 0;
	--bsvp-container-bg: transparent;
	--bsvp-container-padding: 0;
	--bsvp-container-radius: 0;
	--bsvp-container-border: none;
	--bsvp-container-shadow: none;
	--bsvp-container-max-width: none;

	/* base colors */
	--bsvp-color-accent: #0091d5;
	--bsvp-color-fg: #ffffff;
	--bsvp-color-focus: #ffd166;

	/* bar & buttons */
	/* Defaults to `none` so the bar has no background out of the box — set
	 * a value to opt back in (e.g. a gradient for legibility over bright
	 * video, or a solid color combined with data-bsvp-bar-style="solid"). */
	--bsvp-bar-bg: none;
	/* When --bsvp-bar-bg is a gradient/image, the bar paints only this fixed
	 * height at the bottom (or top for data-bsvp-bar="top"). Bar padding
	 * grows the box but not the shadow area. Ignored when --bsvp-bar-bg is
	 * `none` because there is nothing to paint. */
	--bsvp-bar-shadow-height: 96px;
	--bsvp-bar-fg: var(--bsvp-color-fg);
	/* Per-side bar padding. --bsvp-bar-padding (shorthand) is left unset so
	 * the per-side tokens are the authoritative source; if a user or preset
	 * sets the shorthand it will override all four per-side values. */
	--bsvp-bar-padding-top: 0.5rem;
	--bsvp-bar-padding-right: 0.75rem;
	--bsvp-bar-padding-bottom: 0.5rem;
	--bsvp-bar-padding-left: 0.75rem;
	--bsvp-bar-radius: 0;
	--bsvp-bar-inset: 0;
	--bsvp-bar-gap: 0.25rem;
	--bsvp-topbar-bg: none;
	--bsvp-control-fg: var(--bsvp-bar-fg);
	--bsvp-control-bg: transparent;
	--bsvp-control-hover-fg: var(--bsvp-color-accent);
	--bsvp-control-hover-bg: rgba(255,255,255,0.1);
	--bsvp-control-active-fg: var(--bsvp-color-accent);
	--bsvp-control-disabled-opacity: 0.4;
	--bsvp-control-radius: 0.25rem;
	/* Per-side control padding — see --bsvp-bar-padding-* for the pattern. */
	--bsvp-control-padding-top: 0;
	--bsvp-control-padding-right: 0.5rem;
	--bsvp-control-padding-bottom: 0;
	--bsvp-control-padding-left: 0.5rem;
	--bsvp-control-size-sm: 2.25rem;
	--bsvp-control-size-md: 2.75rem;
	--bsvp-control-size-lg: 3.25rem;
	--bsvp-icon-size-sm: 1rem;
	--bsvp-icon-size-md: 1.25rem;
	--bsvp-icon-size-lg: 1.5rem;

	/* big play */
	--bsvp-bigplay-bg: var(--bsvp-color-accent);
	--bsvp-bigplay-fg: #ffffff;
	--bsvp-bigplay-size: 4.5rem;
	--bsvp-bigplay-radius: 50%;
	--bsvp-bigplay-shadow: 0 8px 24px rgba(0,0,0,0.3);
	--bsvp-bigplay-hover-scale: 1.06;

	/* progress & sliders */
	--bsvp-progress-track: rgba(255,255,255,0.25);
	--bsvp-progress-buffer: rgba(255,255,255,0.45);
	--bsvp-progress-played: var(--bsvp-color-accent);
	--bsvp-progress-height: 4px;
	--bsvp-progress-height-hover: 6px;
	--bsvp-progress-radius: 999px;
	--bsvp-progress-thumb-size: 12px;
	--bsvp-progress-thumb-bg: var(--bsvp-color-accent);
	--bsvp-chapter-marker: rgba(255,255,255,0.8);
	--bsvp-slider-track: var(--bsvp-progress-track);
	--bsvp-slider-fill: var(--bsvp-color-fg);
	--bsvp-slider-width: 5rem;

	/* poster overlay & slot inset */
	--bsvp-poster-overlay: rgba(0,0,0,0.35);
	--bsvp-poster-gradient: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,0) 50%);
	--bsvp-slot-inset: 0.75rem;

	/* tooltip / menu / badge */
	--bsvp-tooltip-bg: rgba(0,0,0,0.85);
	--bsvp-tooltip-fg: #ffffff;
	--bsvp-menu-bg: rgba(0,0,0,0.9);
	--bsvp-menu-fg: #ffffff;
	--bsvp-menu-active-bg: rgba(255,255,255,0.12);
	--bsvp-menu-radius: 0.5rem;
	--bsvp-badge-bg: rgba(0,0,0,0.7);
	--bsvp-badge-fg: #ffffff;

	/* captions */
	--bsvp-caption-bg: rgba(0,0,0,0.8);
	--bsvp-caption-fg: #ffffff;
	--bsvp-caption-font-size: clamp(0.875rem, 2.2vw, 1.5rem);
	--bsvp-caption-offset: 3.5rem;

	/* status */
	--bsvp-consent-bg: #00203f;
	--bsvp-consent-fg: #ffffff;
	--bsvp-consent-radius: 0.75rem;
	--bsvp-consent-button-bg: var(--bsvp-color-accent);
	--bsvp-consent-button-fg: #ffffff;
	--bsvp-error-bg: rgba(26,26,26,0.9);
	--bsvp-error-fg: #ffffff;
	--bsvp-spinner-color: var(--bsvp-color-fg);
	--bsvp-spinner-size: 3rem;

	/* typography, motion, stacking */
	--bsvp-font-family: inherit;
	--bsvp-font-size: 0.875rem;
	--bsvp-font-weight: 500;
	--bsvp-time-font-variant: tabular-nums;
	--bsvp-title-font-size: 1rem;
	--bsvp-transition: 160ms ease;
	--bsvp-z-index: 9999;

	position: relative;
	display: block;
	margin: 0;
	background: var(--bsvp-container-bg);
	padding: var(--bsvp-container-padding);
	border-radius:
		var(--bsvp-container-radius-tl, var(--bsvp-container-radius))
		var(--bsvp-container-radius-tr, var(--bsvp-container-radius))
		var(--bsvp-container-radius-br, var(--bsvp-container-radius))
		var(--bsvp-container-radius-bl, var(--bsvp-container-radius));
	box-shadow: var(--bsvp-container-shadow);
	max-width: var(--bsvp-container-max-width);
	overflow: hidden;
	color: var(--bsvp-bar-fg);
	font-family: var(--bsvp-font-family);
	font-size: var(--bsvp-font-size);
	font-weight: var(--bsvp-font-weight);
	line-height: 1.3;
}

.bsvp,
.bsvp * {
	box-sizing: border-box;
}

.bsvp__stage {
	position: relative;
	overflow: hidden;
	background: var(--bsvp-stage-bg);
	border-radius:
		var(--bsvp-stage-radius-tl, var(--bsvp-stage-radius))
		var(--bsvp-stage-radius-tr, var(--bsvp-stage-radius))
		var(--bsvp-stage-radius-br, var(--bsvp-stage-radius))
		var(--bsvp-stage-radius-bl, var(--bsvp-stage-radius));
	aspect-ratio: var(--bsvp-aspect);
	margin: var(--bsvp-stage-inset);
}

.bsvp__media,
.bsvp__media iframe,
.bsvp__media > div,
.bsvp__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bsvp__video {
	object-fit: cover;
	background: #000;
}
/* Per-block fit override for local video. Iframes get container-query math
 * further down because object-fit doesn't apply to iframes. */
.bsvp[data-bsvp-fit="cover"] .bsvp__video { object-fit: cover; }
.bsvp[data-bsvp-fit="contain"] .bsvp__video { object-fit: contain; background: #000; }

/* Cover-fit for embed (YouTube/Vimeo) iframes.
 *
 * Iframes ignore object-fit, so we oversize the iframe so its inner video (which
 * is object-fit: contain inside the iframe) fills the container's smaller
 * dimension edge-to-edge and overflows the larger — same visual result as a
 * covered <img>.
 *
 * Container-query units let us reference the stage's actual box size without
 * JS. --bsvp-video-aspect is inlined by Render.php as a decimal ("1.7778" for
 * 16:9). Fallback keeps the math sensible when the token isn't set. */
.bsvp[data-bsvp-fit="cover"] .bsvp__stage { container-type: size; }

/* Enable inline-size container queries on blocks that opted into either
 * the narrow-preset swap or per-block narrow overrides. Only these blocks
 * pay the container context cost. The @container rules for narrow presets
 * live in generated CSS (Ui::regenerate_css); per-block overrides are
 * further down in this file. */
.bsvp[data-bsvp-preset-small],
.bsvp[data-bsvp-narrow] { container-type: inline-size; }

/* Per-block narrow overrides — react to the block's OWN width, not the
 * viewport. --bsvp-aspect-narrow / data-bsvp-fit-narrow are set inline by
 * Render.php only when the block has a narrow override. Missing tokens
 * cleanly fall through to the wide value via var()'s fallback arg. */
@container (max-width: 640px) {
	.bsvp[data-bsvp-narrow] .bsvp__stage {
		aspect-ratio: var(--bsvp-aspect-narrow, var(--bsvp-aspect));
		/* max-height caps the stage so tall aspect ratios (e.g. 9:16 on a
		 * ~600px-wide sidebar → ~1067px tall by default) don't blow the
		 * layout out. Browsers reconcile aspect-ratio + max-height by
		 * shrinking both dimensions proportionally, so the video keeps
		 * its aspect while fitting. Falls back to `none` when the token
		 * isn't set (i.e. non-narrow blocks and narrow blocks that
		 * didn't opt into a cap). */
		max-height: var(--bsvp-max-height-narrow, none);
	}
	.bsvp[data-bsvp-narrow][data-bsvp-fit-narrow="cover"] .bsvp__video { object-fit: cover; }
	.bsvp[data-bsvp-narrow][data-bsvp-fit-narrow="contain"] .bsvp__video { object-fit: contain; background: #000; }
	/* Cover-fit iframe math for narrow — same trick as the wide selector
	 * further up in this file. --bsvp-video-aspect stays sensible because
	 * it's inlined once and used in both wide and narrow contexts. */
	.bsvp[data-bsvp-narrow][data-bsvp-fit-narrow="cover"] .bsvp__stage { container-type: size; }
	.bsvp[data-bsvp-narrow][data-bsvp-fit-narrow="cover"] .bsvp__media iframe {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: max(100cqw, calc(100cqh * var(--bsvp-video-aspect, 1.7778)));
		height: max(100cqh, calc(100cqw / var(--bsvp-video-aspect, 1.7778)));
		max-width: none;
	}
}
.bsvp[data-bsvp-fit="cover"] .bsvp__media iframe {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: max(100cqw, calc(100cqh * var(--bsvp-video-aspect, 1.7778)));
	height: max(100cqh, calc(100cqw / var(--bsvp-video-aspect, 1.7778)));
	max-width: none;
}

.bsvp__poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity var(--bsvp-transition), filter var(--bsvp-transition);
	pointer-events: none;
}

.bsvp__poster--empty {
	background: var(--bsvp-stage-bg);
}

.bsvp--playing .bsvp__poster,
.bsvp--waiting .bsvp__poster {
	opacity: 0;
}

.bsvp__bigplay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: var(--bsvp-bigplay-size);
	height: var(--bsvp-bigplay-size);
	border-radius: var(--bsvp-bigplay-radius);
	border: 0;
	background: var(--bsvp-bigplay-bg);
	color: var(--bsvp-bigplay-fg);
	cursor: pointer;
	box-shadow: var(--bsvp-bigplay-shadow);
	transition: transform var(--bsvp-transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}

.bsvp__bigplay:hover {
	transform: translate(-50%, -50%) scale(var(--bsvp-bigplay-hover-scale));
}

.bsvp__bigplay svg {
	width: 45%;
	height: 45%;
	margin-left: 4%;
}

/* Bar & slots */
.bsvp__bar {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	gap: var(--bsvp-bar-gap);
	/* --bsvp-bar-padding shorthand wins if a user sets it (legacy); otherwise
	 * the four per-side tokens compose the padding value. */
	padding: var(--bsvp-bar-padding, var(--bsvp-bar-padding-top) var(--bsvp-bar-padding-right) var(--bsvp-bar-padding-bottom) var(--bsvp-bar-padding-left));
	/* Anchor the gradient at the bottom edge with a fixed height — bar padding
	 * grows the bar box but the visible shadow area stays put. Overridden by
	 * data-bsvp-bar-style="solid" / "pill" / "none" below. */
	background: var(--bsvp-bar-bg) bottom / 100% var(--bsvp-bar-shadow-height) no-repeat;
	color: var(--bsvp-bar-fg);
	transition: opacity var(--bsvp-transition);
	z-index: 3;
}

.bsvp[data-bsvp-bar="top"] .bsvp__bar {
	top: 0;
	bottom: auto;
	background: var(--bsvp-topbar-bg) top / 100% var(--bsvp-bar-shadow-height) no-repeat;
}
.bsvp[data-bsvp-bar="below"] .bsvp__bar,
.bsvp[data-bsvp-bar="above"] .bsvp__bar {
	position: static;
	background: var(--bsvp-bar-bg);
}
.bsvp[data-bsvp-bar-style="pill"] .bsvp__bar {
	inset: auto var(--bsvp-bar-inset) var(--bsvp-bar-inset) var(--bsvp-bar-inset);
	border-radius: var(--bsvp-bar-radius, 999px);
	width: auto;
	max-width: calc(100% - (var(--bsvp-bar-inset) * 2));
	margin: 0 auto;
}
.bsvp[data-bsvp-bar-style="solid"] .bsvp__bar { background: var(--bsvp-bar-bg); }
.bsvp[data-bsvp-bar-style="none"] .bsvp__bar { background: transparent; }

.bsvp--controls-hidden .bsvp__bar { opacity: 0; visibility: hidden; }

.bsvp__slot {
	display: inline-flex;
	align-items: center;
	gap: var(--bsvp-bar-gap);
}
.bsvp__slot--bar-center { flex: 1; min-width: 0; }
.bsvp__slot--bar-end { flex: 0 0 auto; margin-left: auto; }
.bsvp__slot--bar-start { flex: 0 0 auto; }

/* Bar alignment overrides. When set to anything but 'start' we stop the
 * center-slot from stretching so the natural width of the contents drives
 * layout. */
.bsvp[data-bsvp-bar-align="center"] .bsvp__bar { justify-content: center; }
.bsvp[data-bsvp-bar-align="center"] .bsvp__slot--bar-center,
.bsvp[data-bsvp-bar-align="end"] .bsvp__slot--bar-center,
.bsvp[data-bsvp-bar-align="space-between"] .bsvp__slot--bar-center {
	flex: 0 0 auto;
	min-width: 0;
}
.bsvp[data-bsvp-bar-align="end"] .bsvp__bar { justify-content: flex-end; }
.bsvp[data-bsvp-bar-align="end"] .bsvp__slot--bar-end { margin-left: 0; }
.bsvp[data-bsvp-bar-align="space-between"] .bsvp__bar { justify-content: space-between; }
.bsvp[data-bsvp-bar-align="space-between"] .bsvp__slot--bar-end { margin-left: 0; }

.bsvp__slot--stage-top-start,
.bsvp__slot--stage-top-end,
.bsvp__slot--stage-center,
.bsvp__slot--stage-bottom-start,
.bsvp__slot--stage-bottom-end {
	position: absolute;
	inset: var(--bsvp-slot-inset);
	pointer-events: none;
}
.bsvp__slot--stage-center {
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.bsvp__slot--stage-top-start { inset: var(--bsvp-slot-inset) auto auto var(--bsvp-slot-inset); }
.bsvp__slot--stage-top-end { inset: var(--bsvp-slot-inset) var(--bsvp-slot-inset) auto auto; }
.bsvp__slot--stage-bottom-start { inset: auto auto var(--bsvp-slot-inset) var(--bsvp-slot-inset); }
.bsvp__slot--stage-bottom-end { inset: auto var(--bsvp-slot-inset) var(--bsvp-slot-inset) auto; }

.bsvp__slot > .bsvp__ctrl { pointer-events: auto; }

/* Controls (buttons) */
.bsvp__ctrl {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--bsvp-control-fg);
	background: var(--bsvp-control-bg);
	border: 0;
	border-radius: var(--bsvp-control-radius);
	min-width: var(--bsvp-control-size-md);
	height: var(--bsvp-control-size-md);
	padding: var(--bsvp-control-padding, var(--bsvp-control-padding-top) var(--bsvp-control-padding-right) var(--bsvp-control-padding-bottom) var(--bsvp-control-padding-left));
	cursor: pointer;
	font: inherit;
	transition: background var(--bsvp-transition), color var(--bsvp-transition);
}

/* Inner button used by composite controls (volume, speed, captions, chapters) */
.bsvp__ctrl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: inherit;
	background: transparent;
	border: 0;
	border-radius: var(--bsvp-control-radius);
	min-width: var(--bsvp-control-size-md);
	height: var(--bsvp-control-size-md);
	padding: var(--bsvp-control-padding, var(--bsvp-control-padding-top) var(--bsvp-control-padding-right) var(--bsvp-control-padding-bottom) var(--bsvp-control-padding-left));
	cursor: pointer;
	font: inherit;
	transition: background var(--bsvp-transition), color var(--bsvp-transition);
}
.bsvp__ctrl-btn:hover,
.bsvp__ctrl-btn:focus-visible {
	color: var(--bsvp-control-hover-fg);
	background: var(--bsvp-control-hover-bg);
}
/* Kill any theme-added mouse-focus outline. The visible ring only shows
 * on keyboard focus (:focus-visible below), matching a11y best practice. */
.bsvp__ctrl:focus,
.bsvp__ctrl-btn:focus,
.bsvp__bigplay:focus,
.bsvp__consent-btn:focus,
.bsvp__progress-slider:focus,
.bsvp__volume-slider:focus,
.bsvp__menu-item:focus {
	outline: none;
	box-shadow: none;
}
.bsvp__ctrl-btn:focus-visible {
	outline: 2px solid var(--bsvp-color-focus);
	outline-offset: 1px;
}

.bsvp__ctrl:hover,
.bsvp__ctrl:focus-visible {
	color: var(--bsvp-control-hover-fg);
	background: var(--bsvp-control-hover-bg);
}

/* Fully disable hover-styling on both wrapper and inner buttons. Focus-ring
 * stays for keyboard accessibility. */
.bsvp[data-bsvp-no-hover] .bsvp__ctrl:hover,
.bsvp[data-bsvp-no-hover] .bsvp__ctrl-btn:hover {
	color: var(--bsvp-control-fg);
	background: var(--bsvp-control-bg);
}
.bsvp[data-bsvp-no-hover] .bsvp__bigplay:hover {
	transform: translate(-50%, -50%);
}
.bsvp__ctrl:focus-visible {
	outline: 2px solid var(--bsvp-color-focus);
	outline-offset: 1px;
}

.bsvp__ctrl--time {
	font-variant-numeric: var(--bsvp-time-font-variant);
	font-weight: var(--bsvp-font-weight);
	padding: var(--bsvp-control-padding, var(--bsvp-control-padding-top) var(--bsvp-control-padding-right) var(--bsvp-control-padding-bottom) var(--bsvp-control-padding-left));
	cursor: default;
}

.bsvp__ctrl--spacer { flex: 1; background: transparent; cursor: default; min-width: 0; }

.bsvp__ctrl--title {
	margin: 0;
	font-size: var(--bsvp-title-font-size);
	color: #fff;
	text-shadow: 0 1px 2px rgba(0,0,0,0.75);
	pointer-events: none;
	background: transparent;
	max-width: 100%;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.bsvp__icon {
	width: var(--bsvp-icon-size-md);
	height: var(--bsvp-icon-size-md);
	display: inline-block;
	flex: 0 0 auto;
	color: inherit;
	line-height: 0;
}
.bsvp__icon svg {
	width: 100%;
	height: 100%;
	display: block;
}
/* Monochrome icons (default): force everything to currentColor so it inherits
 * from the button. Preserved icons keep their own palette — no rewrite. */
.bsvp[data-bsvp-icons-color="currentColor"] .bsvp__icon svg,
.bsvp[data-bsvp-icons-color="currentColor"] .bsvp__icon svg * {
	fill: currentColor;
}
.bsvp[data-bsvp-icons-color="currentColor"] .bsvp__icon svg [fill="none"] {
	fill: none;
	stroke: currentColor;
}
/* Original-palette icons: let the SVG paint itself. */
.bsvp[data-bsvp-icons-color="original"] .bsvp__icon svg {
	fill: initial;
}

/* Progress */
.bsvp__ctrl--progress {
	flex: 1;
	position: relative;
	height: var(--bsvp-control-size-md);
	padding: var(--bsvp-control-padding, var(--bsvp-control-padding-top) var(--bsvp-control-padding-right) var(--bsvp-control-padding-bottom) var(--bsvp-control-padding-left));
	background: transparent;
	cursor: pointer;
	min-width: 0;
}
.bsvp__progress-outer {
	position: relative;
	width: 100%;
	height: var(--bsvp-progress-height);
}
.bsvp__progress-outer--edge {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
}
.bsvp__progress-slider {
	position: absolute;
	inset: 0;
	z-index: 2;
}
.bsvp__progress-slider:focus-visible {
	outline: 2px solid var(--bsvp-color-focus);
	outline-offset: 2px;
}
.bsvp__progress-track {
	position: absolute;
	left: 0; right: 0;
	top: 50%;
	transform: translateY(-50%);
	height: var(--bsvp-progress-height);
	background: var(--bsvp-progress-track);
	border-radius: var(--bsvp-progress-radius);
	overflow: hidden;
}
.bsvp__ctrl--progress:hover .bsvp__progress-track,
.bsvp__ctrl--progress:focus-within .bsvp__progress-track {
	height: var(--bsvp-progress-height-hover);
}
.bsvp__progress-buffer {
	position: absolute;
	inset: 0;
	background: var(--bsvp-progress-buffer);
	transform-origin: left;
	width: 0;
}
.bsvp__progress-played {
	position: absolute;
	inset: 0;
	background: var(--bsvp-progress-played);
	width: 0;
}
.bsvp__progress-thumb {
	position: absolute;
	top: 50%;
	width: var(--bsvp-progress-thumb-size);
	height: var(--bsvp-progress-thumb-size);
	background: var(--bsvp-progress-thumb-bg);
	border-radius: 50%;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: opacity var(--bsvp-transition);
	pointer-events: none;
}
.bsvp__ctrl--progress:hover .bsvp__progress-thumb,
.bsvp__ctrl--progress:focus-within .bsvp__progress-thumb {
	opacity: 1;
}

/* Volume */
.bsvp__ctrl--volume { position: relative; gap: 0; }
.bsvp__volume-slider {
	appearance: none;
	-webkit-appearance: none;
	background: var(--bsvp-slider-track);
	height: 4px;
	width: var(--bsvp-slider-width);
	margin: 0 0.5rem;
	border-radius: 999px;
}
.bsvp__volume-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	background: var(--bsvp-slider-fill);
	border-radius: 50%;
	border: 0;
}
.bsvp__volume-slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: var(--bsvp-slider-fill);
	border-radius: 50%;
	border: 0;
}
.bsvp__ctrl--slider-on-hover .bsvp__volume-slider {
	width: 0;
	opacity: 0;
	transition: width var(--bsvp-transition), opacity var(--bsvp-transition);
}
.bsvp__ctrl--slider-on-hover:hover .bsvp__volume-slider,
.bsvp__ctrl--slider-on-hover:focus-within .bsvp__volume-slider {
	width: var(--bsvp-slider-width);
	opacity: 1;
}

/* Menus (speed, captions, chapters) */
.bsvp__menu {
	position: absolute;
	bottom: calc(100% + 4px);
	right: 0;
	min-width: 8rem;
	background: var(--bsvp-menu-bg);
	color: var(--bsvp-menu-fg);
	border-radius: var(--bsvp-menu-radius);
	padding: 0.25rem;
	display: flex;
	flex-direction: column;
	z-index: 5;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.bsvp__menu-item {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background: transparent;
	color: inherit;
	border: 0;
	padding: 0.4rem 0.6rem;
	border-radius: 0.35rem;
	font: inherit;
	cursor: pointer;
	text-align: left;
}
.bsvp__menu-item[aria-checked="true"]::before {
	content: '\2713';
	color: var(--bsvp-color-accent);
	margin-right: 0.25rem;
}
.bsvp__menu-item:hover,
.bsvp__menu-item:focus-visible {
	background: var(--bsvp-menu-active-bg);
	outline: none;
}
.bsvp__ctrl--speed,
.bsvp__ctrl--captions,
.bsvp__ctrl--chapters {
	position: relative;
}

/* Standalone mute toggle: subtle emphasis while the player is in the
 * unmuted-autoplay fallback state so visitors notice they can turn sound on. */
.bsvp--autoplay-muted .bsvp__ctrl--mute {
	background: var(--bsvp-color-accent);
	color: var(--bsvp-bigplay-fg, #fff);
	animation: bsvp-mute-nudge 1.4s ease-in-out 2;
}
@keyframes bsvp-mute-nudge {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}
@media (prefers-reduced-motion: reduce) {
	.bsvp--autoplay-muted .bsvp__ctrl--mute { animation: none; }
}

/* External link (button on the bar) */
.bsvp__ctrl--external {
	color: var(--bsvp-bar-fg);
	text-decoration: none;
	padding: 0 0.75rem;
}

/* Status: consent placeholder */
.bsvp__consent {
	position: absolute;
	inset: 0;
	background: var(--bsvp-consent-bg);
	color: var(--bsvp-consent-fg);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	z-index: 5;
}
.bsvp__consent--card .bsvp__consent-body,
.bsvp__consent--card .bsvp__consent-buttons {
	max-width: 40ch;
	margin: 0 auto;
	text-align: center;
}
.bsvp__consent--minimal { align-items: flex-end; justify-content: center; }
.bsvp__consent--bar { align-items: flex-end; padding: 0; }
.bsvp__consent--bar .bsvp__consent-body,
.bsvp__consent--bar .bsvp__consent-buttons {
	background: rgba(0,0,0,0.75);
	padding: 1rem;
	width: 100%;
	text-align: center;
}
.bsvp__consent-body { max-width: 40ch; }
.bsvp__consent-buttons {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-top: 0.75rem;
	justify-content: center;
}
.bsvp__consent-btn {
	color: var(--bsvp-consent-fg);
	background: var(--bsvp-consent-button-bg);
	border: 1px solid var(--bsvp-consent-button-bg);
	border-radius: 999px;
	padding: 0.55rem 1rem;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}
.bsvp__consent-btn--prefs,
.bsvp__consent-btn--external,
.bsvp__consent-btn--oneoff {
	background: transparent;
	color: var(--bsvp-consent-fg);
	border-color: currentColor;
}
.bsvp__consent-btn:focus-visible {
	outline: 2px solid var(--bsvp-color-focus);
	outline-offset: 2px;
}

/* Status: spinner */
.bsvp__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	color: var(--bsvp-spinner-color);
	opacity: 0;
	pointer-events: none;
	z-index: 4;
}
.bsvp__spinner .bsvp__icon {
	width: var(--bsvp-spinner-size);
	height: var(--bsvp-spinner-size);
	animation: bsvp-spin 1s linear infinite;
}
@keyframes bsvp-spin { to { transform: rotate(360deg); } }
.bsvp--waiting .bsvp__spinner,
.bsvp--loading .bsvp__spinner { opacity: 1; }

/* Status: error */
.bsvp__error {
	position: absolute;
	inset: 0;
	background: var(--bsvp-error-bg);
	color: var(--bsvp-error-fg);
	display: none;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 1.5rem;
	z-index: 6;
}
.bsvp--error .bsvp__error { display: flex; }
.bsvp__error-inner { max-width: 40ch; }
.bsvp__error a { color: currentColor; text-underline-offset: 2px; }

/* fake-fullscreen fallback */
.bsvp--fake-fullscreen {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100dvh;
	z-index: var(--bsvp-z-index);
	background: #000;
	max-width: none;
}

/* poster overlay */
.bsvp:not(.bsvp--playing):not(.bsvp--consent-required):not(.bsvp--error) .bsvp__stage::before {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--bsvp-poster-overlay);
	z-index: 1;
}

/* Compact hides certain controls when the player is narrow */
.bsvp--compact .bsvp__ctrl--time,
.bsvp--compact .bsvp__ctrl--speed,
.bsvp--compact .bsvp__ctrl--chapters {
	display: none;
}

/* Reduced motion: kill transitions on hover animations */
@media (prefers-reduced-motion: reduce) {
	.bsvp, .bsvp * { transition: none !important; animation: none !important; }
}

/* Forced colors: keep buttons visible */
@media (forced-colors: active) {
	.bsvp__ctrl { border: 1px solid CanvasText; }
}

/* Editor notice fallback (empty local video) */
.bsvp-notice {
	padding: 1rem;
	background: #fff8e1;
	border-left: 4px solid #f0b100;
	font-size: 0.875rem;
}