/* =========================================================================
 * Soha Stream Player — frontend styles
 * Everything themeable is a CSS variable set by Elementor on {{WRAPPER}} .ssp
 * ========================================================================= */

.ssp {
	/* palette */
	--ssp-primary: #168BFF;
	--ssp-primary-soft: rgba(22, 139, 255, .28);
	--ssp-player-bg: #05070A;
	--ssp-control-color: #FFFFFF;
	--ssp-control-muted: rgba(255, 255, 255, .62);
	--ssp-control-hover-bg: rgba(255, 255, 255, .12);
	--ssp-buffer-color: rgba(255, 255, 255, .34);
	--ssp-progress-color: var(--ssp-primary);
	--ssp-rail-color: rgba(255, 255, 255, .18);
	--ssp-loader-color: var(--ssp-primary);
	--ssp-overlay: rgba(3, 6, 12, .35);
	--ssp-vignette: .45;
	--ssp-scrim-color: rgba(0, 0, 0, .86);
	--ssp-surface: rgba(12, 16, 24, .82);
	--ssp-surface-border: rgba(255, 255, 255, .10);

	/* geometry */
	--ssp-radius: 18px;
	--ssp-radius-sm: 12px;
	--ssp-control-height: 38px;
	--ssp-icon-size: 19px;
	--ssp-timeline-height: 4px;
	--ssp-timeline-hover: 7px;
	--ssp-thumb-size: 13px;
	--ssp-play-size: 86px;
	--ssp-play-icon: 34%;
	--ssp-play-bg: rgba(10, 14, 22, .42);
	--ssp-play-bg-hover: color-mix(in srgb, var(--ssp-primary) 55%, var(--ssp-play-bg));
	--ssp-play-border: rgba(255, 255, 255, .22);
	--ssp-play-border-width: 1px;
	--ssp-play-scale-hover: 1.07;
	--ssp-play-scale-active: .93;
	--ssp-blur: 14px;
	--ssp-menu-blur: 18px;
	--ssp-menu-width: 208px;
	--ssp-loader-size: 26px;
	--ssp-loader-speed: 1000ms;
	--ssp-duration-offset: 12px;
	--ssp-gap: 6px;
	--ssp-pad-x: 14px;
	--ssp-ratio: 16 / 9;

	/* cover filters */
	--ssp-cover-scale: 1;
	--ssp-cover-scale-hover: 1.03;
	--ssp-cover-blur: 0px;
	--ssp-cover-brightness: 1;
	--ssp-cover-contrast: 1;
	--ssp-cover-saturate: 1;

	/* motion */
	--ssp-ease: cubic-bezier(.22, .72, .28, 1);
	--ssp-ease-spring: cubic-bezier(.34, 1.56, .48, 1);
	--ssp-dur: 420ms;
	--ssp-dur-fast: 180ms;

	position: relative;
	width: 100%;
	aspect-ratio: var(--ssp-ratio);
	background: var(--ssp-player-bg);
	border-radius: var(--ssp-radius);
	overflow: hidden;
	color: var(--ssp-control-color);
	isolation: isolate;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
}

.ssp *,
.ssp *::before,
.ssp *::after { box-sizing: border-box; }

/* ---------- wrapper + atmosphere light ---------- */
.ssp-wrap {
	--ssp-amb-spread: 80px;
	--ssp-amb-blur: 52px;
	--ssp-amb-opacity: .65;
	--ssp-amb-saturate: 1.9;
	position: relative;
	isolation: isolate;
	/* No extra space is reserved: the glow is absolutely positioned and clipped
	   by nothing, so the widget's box stays exactly the size of the player. */
}
.ssp-wrap .ssp { position: relative; z-index: 1; }
.ssp__ambient {
	position: absolute;
	inset: calc(var(--ssp-amb-spread) * -1);
	z-index: 0;
	width: auto;
	height: auto;
	display: block;
	opacity: 0;
	pointer-events: none;
	/* Fades out towards the edges instead of ending on a hard rectangle. */
	-webkit-mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
	mask-image: radial-gradient(closest-side, #000 45%, transparent 100%);
	filter: blur(var(--ssp-amb-blur)) saturate(var(--ssp-amb-saturate));
	transform: translateZ(0);
	transition: opacity 700ms var(--ssp-ease, ease);
}
.ssp-wrap.is-ambient-lit .ssp__ambient { opacity: var(--ssp-amb-opacity); }
.ssp-wrap[data-ambient="off"] .ssp__ambient { display: none; }
@media (prefers-reduced-motion: reduce) {
	.ssp-wrap.is-ambient-lit .ssp__ambient { transition: none; }
}

.ssp[data-focus="on"]:focus-visible {
	box-shadow: 0 0 0 3px var(--ssp-primary-soft), 0 0 0 1px var(--ssp-primary);
}
.ssp:fullscreen { border-radius: 0; aspect-ratio: auto; width: 100%; height: 100%; }
.ssp:-webkit-full-screen { border-radius: 0; width: 100%; height: 100%; }

.ssp-placeholder {
	padding: 40px 20px;
	text-align: center;
	border: 1px dashed rgba(127, 127, 127, .5);
	border-radius: 12px;
	color: #7d8590;
	font-size: 13px;
}

/* ---------- media surface ---------- */
.ssp__surface {
	position: absolute;
	inset: 0;
	/* Letterbox bars take the player colour instead of a hard black rectangle,
	   and the layer is clipped + promoted so no seam shows on rounded corners. */
	background: var(--ssp-player-bg);
	border-radius: inherit;
	overflow: hidden;
	transform: translateZ(0);
}
.ssp__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: var(--ssp-video-fit, contain);
	object-position: var(--ssp-video-position, center);
	background: transparent;
	border-radius: inherit;
	opacity: 0;
	transition: opacity var(--ssp-dur) var(--ssp-ease);
}
.ssp[data-engine="html5"][data-state="playing"] .ssp__video,
.ssp[data-engine="html5"][data-state="paused"] .ssp__video,
.ssp[data-engine="html5"][data-state="buffering"] .ssp__video,
.ssp[data-engine="html5"][data-state="ended"] .ssp__video { opacity: 1; }

.ssp__embed { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; opacity: 0; transition: opacity var(--ssp-dur) var(--ssp-ease); }
.ssp__embed iframe { display: block; width: 100%; height: 100%; border: 0; }
.ssp[data-engine="embed"][data-state="playing"] .ssp__embed,
.ssp[data-engine="embed"][data-state="paused"] .ssp__embed,
.ssp[data-engine="embed"][data-state="buffering"] .ssp__embed,
.ssp[data-engine="embed"][data-state="ended"] .ssp__embed { opacity: 1; }

/* ---------- cover ---------- */
.ssp__cover {
	position: absolute;
	inset: 0;
	z-index: 4;
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: opacity var(--ssp-dur) var(--ssp-ease),
	            transform var(--ssp-dur) var(--ssp-ease),
	            filter var(--ssp-dur) var(--ssp-ease);
}
.ssp__cover-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(var(--ssp-cover-scale));
	filter: blur(var(--ssp-cover-blur)) brightness(var(--ssp-cover-brightness))
	        contrast(var(--ssp-cover-contrast)) saturate(var(--ssp-cover-saturate));
	transition: transform 900ms var(--ssp-ease);
}
.ssp__cover:hover .ssp__cover-img { transform: scale(var(--ssp-cover-scale-hover)); }
.ssp__cover-overlay {
	position: absolute;
	inset: 0;
	background-color: var(--ssp-overlay);
	background-image: radial-gradient(120% 90% at 50% 45%, transparent 30%, rgba(0, 0, 0, var(--ssp-vignette)) 100%);
	transition: background-color var(--ssp-dur) var(--ssp-ease);
}
.ssp:not([data-state="cover"]) .ssp__cover {
	opacity: 0;
	transform: scale(1.045);
	filter: blur(2px);
	pointer-events: none;
}
.ssp[data-state="initializing"] .ssp__cover-overlay { background-color: rgba(2, 4, 8, .72); }

.ssp__cover-top {
	position: absolute;
	top: 0;
	inset-inline: 0;
	z-index: 2;
	padding: 16px 18px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, .55), transparent);
}
.ssp__title {
	font-size: 15px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: -.01em;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .6);
}
.ssp[data-title="off"] .ssp__cover-top { display: none; }
/* Keep a long title clear of the share button that sits in the same corner. */
.ssp[data-share-cover="on"] .ssp__cover-top { padding-inline-end: calc(var(--ssp-share-size) + 30px); }

/* ---------- share ---------- */
.ssp {
	--ssp-share-size: 40px;
}
.ssp__share {
	position: absolute;
	z-index: 3;
	top: 12px;
	inset-inline-end: 12px;
	display: grid;
	place-items: center;
	width: var(--ssp-share-size);
	height: var(--ssp-share-size);
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 50%;
	background: rgba(8, 11, 18, .5);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	transition: transform 260ms var(--ssp-ease-spring), background-color var(--ssp-dur-fast) var(--ssp-ease),
	            border-color var(--ssp-dur-fast) var(--ssp-ease);
}
.ssp__share svg { width: 46%; height: 46%; fill: currentColor; margin-inline-end: 4%; }
.ssp__share:hover {
	transform: scale(1.08);
	background: color-mix(in srgb, var(--ssp-primary) 60%, rgba(8, 11, 18, .5));
	border-color: color-mix(in srgb, var(--ssp-primary) 70%, #fff);
}
.ssp__share:active { transform: scale(.92); }
.ssp[data-focus="on"] .ssp__share:focus-visible { outline: 2px solid var(--ssp-primary); outline-offset: 3px; }
.ssp[data-size="sm"] { --ssp-share-size: 34px; }

.ssp__toast {
	position: absolute;
	z-index: 10;
	/* Bottom centre, above the control bar: never collides with the title row
	   or the share button, and stays visible in fullscreen. */
	bottom: calc(var(--ssp-control-height) + 30px);
	left: 50%;
	max-width: calc(100% - 32px);
	padding: 8px 14px;
	border: 1px solid var(--ssp-surface-border);
	border-radius: 999px;
	background: var(--ssp-surface);
	color: var(--ssp-control-color);
	font-size: 12.5px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: 0;
	transform: translate(-50%, 8px);
	pointer-events: none;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	transition: opacity 200ms var(--ssp-ease), transform 260ms var(--ssp-ease-spring);
}
.ssp__toast.is-on { opacity: 1; transform: translate(-50%, 0); }
/* Copy failed: the link is shown so it can be selected by hand. */
.ssp__toast.is-sticky {
	border-radius: 12px;
	white-space: normal;
	text-align: center;
	pointer-events: auto;
	user-select: text;
	-webkit-user-select: text;
}
.ssp__toast-link {
	display: block;
	margin-top: 4px;
	direction: ltr;
	font-family: ui-monospace, "Cascadia Code", monospace;
	font-size: 11.5px;
	font-weight: 500;
	word-break: break-all;
	user-select: all;
	-webkit-user-select: all;
}

/* ---------- duration badge ---------- */
.ssp__duration {
	position: absolute;
	z-index: 2;
	inset-block-end: var(--ssp-duration-offset);
	inset-inline-end: var(--ssp-duration-offset);
	direction: ltr;
	padding: 4px 8px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 7px;
	background-color: rgba(8, 11, 18, .72);
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.ssp[data-badge="top-end"] .ssp__duration { inset-block: var(--ssp-duration-offset) auto; }
.ssp[data-badge="top-start"] .ssp__duration { inset-block: var(--ssp-duration-offset) auto; inset-inline: var(--ssp-duration-offset) auto; }
.ssp[data-badge="bottom-start"] .ssp__duration { inset-inline: var(--ssp-duration-offset) auto; }
.ssp[data-duration="off"] .ssp__duration { display: none; }

/* ---------- play button ---------- */
.ssp__play {
	position: relative;
	z-index: 3;
	display: grid;
	place-items: center;
	width: var(--ssp-play-size);
	height: var(--ssp-play-size);
	padding: 0;
	border: var(--ssp-play-border-width) solid var(--ssp-play-border);
	border-radius: 50%;
	background: var(--ssp-play-bg);
	color: #fff;
	cursor: pointer;
	box-shadow: 0 10px 40px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .16);
	backdrop-filter: blur(var(--ssp-blur)) saturate(1.15);
	-webkit-backdrop-filter: blur(var(--ssp-blur)) saturate(1.15);
	transition: transform 320ms var(--ssp-ease-spring),
	            background-color var(--ssp-dur-fast) var(--ssp-ease),
	            box-shadow var(--ssp-dur-fast) var(--ssp-ease),
	            opacity var(--ssp-dur-fast) var(--ssp-ease);
}
.ssp[data-idle-pulse="on"] .ssp__play { animation: ssp-idle 3.6s var(--ssp-ease) infinite; }

/* A slow conic halo that only spins while the pointer is on the button — it is
   a pseudo-element, so it costs one composited layer and no extra markup. */
.ssp__play::before {
	content: "";
	position: absolute;
	inset: calc(var(--ssp-play-border-width) * -3);
	border-radius: inherit;
	background: conic-gradient(from 0deg,
		transparent 0deg,
		color-mix(in srgb, var(--ssp-primary) 85%, #fff) 70deg,
		transparent 150deg,
		color-mix(in srgb, var(--ssp-primary) 60%, #fff) 250deg,
		transparent 330deg);
	opacity: 0;
	pointer-events: none;
	transition: opacity 280ms var(--ssp-ease);
	-webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
	mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
}
.ssp__play:hover::before {
	opacity: 1;
	animation: ssp-halo 2.6s linear infinite;
}
@keyframes ssp-halo { to { transform: rotate(1turn); } }

/* The glyph leans forward a touch on hover, then settles on release. */
.ssp__play:hover .ssp__play-icon,
.ssp__play:hover svg { transform: translateX(4%) scale(1.06); }
.ssp__play:active .ssp__play-icon,
.ssp__play:active svg { transform: translateX(0) scale(.9); }
.ssp__play-icon,
.ssp__play svg {
	position: relative;
	z-index: 1;
	width: var(--ssp-play-icon);
	height: var(--ssp-play-icon);
	fill: currentColor;
	margin-inline-start: 6%;
	font-size: calc(var(--ssp-play-size) * .34);
	transition: transform 320ms var(--ssp-ease-spring);
}
.ssp__play:hover {
	transform: scale(var(--ssp-play-scale-hover));
	background: var(--ssp-play-bg-hover);
	box-shadow: 0 14px 52px var(--ssp-primary-soft);
}
.ssp__play:active { transform: scale(var(--ssp-play-scale-active)); }
.ssp[data-focus="on"] .ssp__play:focus-visible { outline: 2px solid var(--ssp-primary); outline-offset: 4px; }
.ssp__play-ring {
	position: absolute;
	inset: -2px;
	border: 2px solid var(--ssp-primary);
	border-radius: inherit;
	opacity: 0;
	pointer-events: none;
}
.ssp[data-ripple="on"] .ssp__play.is-rippling .ssp__play-ring { animation: ssp-ripple 620ms var(--ssp-ease) forwards; }
.ssp[data-ripple="on"] .ssp__play.is-rippling::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid var(--ssp-primary);
	pointer-events: none;
	animation: ssp-ripple 900ms 120ms var(--ssp-ease) forwards;
}
.ssp__play.is-launching { transform: scale(1.18); opacity: 0; }

@keyframes ssp-idle {
	0%, 100% { box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 0 0 var(--ssp-primary-soft), inset 0 1px 0 rgba(255, 255, 255, .16); }
	55%      { box-shadow: 0 10px 40px rgba(0, 0, 0, .45), 0 0 0 14px transparent, inset 0 1px 0 rgba(255, 255, 255, .16); }
}
@keyframes ssp-ripple {
	from { opacity: .8; transform: scale(1); }
	to   { opacity: 0; transform: scale(1.75); }
}

/* ---------- loader ---------- */
.ssp__loader {
	position: absolute;
	inset: 0;
	z-index: 6;
	margin: auto;
	display: none;
	align-items: flex-end;
	justify-content: center;
	gap: 5px;
	width: calc(var(--ssp-loader-size) * 1.8);
	height: var(--ssp-loader-size);
	pointer-events: none;
}
.ssp[data-state="initializing"] .ssp__loader,
.ssp[data-state="loading"] .ssp__loader,
.ssp[data-state="buffering"] .ssp__loader { display: flex; }
.ssp__loader-bar {
	width: calc(var(--ssp-loader-size) * .16);
	height: 100%;
	border-radius: 3px;
	background: linear-gradient(to top, var(--ssp-loader-color), color-mix(in srgb, var(--ssp-loader-color) 40%, #fff));
	box-shadow: 0 0 14px var(--ssp-primary-soft);
	transform-origin: bottom;
	animation: ssp-wave var(--ssp-loader-speed) var(--ssp-ease) infinite;
}
.ssp__loader-bar:nth-child(2) { animation-delay: calc(var(--ssp-loader-speed) * .14); }
.ssp__loader-bar:nth-child(3) { animation-delay: calc(var(--ssp-loader-speed) * .28); }
@keyframes ssp-wave {
	0%, 100% { transform: scaleY(.28); opacity: .55; }
	50%      { transform: scaleY(1); opacity: 1; }
}

/* ---------- tap feedback + gesture hints ---------- */
.ssp__pulse {
	position: absolute;
	inset: 0;
	z-index: 5;
	margin: auto;
	display: grid;
	place-items: center;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	background: rgba(8, 11, 18, .55);
	opacity: 0;
	transform: scale(.8);
	pointer-events: none;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.ssp__pulse::after {
	content: "";
	width: 26px;
	height: 26px;
	background: #fff;
	-webkit-mask: var(--ssp-pulse-icon) center / contain no-repeat;
	mask: var(--ssp-pulse-icon) center / contain no-repeat;
}
.ssp__pulse.is-on { animation: ssp-pulse 560ms var(--ssp-ease) forwards; }
@keyframes ssp-pulse {
	0%   { opacity: .95; transform: scale(.82); }
	100% { opacity: 0; transform: scale(1.25); }
}

.ssp__seek-hint {
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: 5;
	width: 32%;
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 4px;
	direction: ltr;
	color: #fff;
	opacity: 0;
	pointer-events: none;
	background: radial-gradient(60% 60% at 50% 50%, rgba(255, 255, 255, .16), transparent 70%);
}
.ssp__seek-hint svg { width: 30px; height: 30px; fill: currentColor; }
.ssp__seek-hint b { font-size: 13px; font-weight: 700; }
.ssp__seek-hint--back { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; }
.ssp__seek-hint--fwd { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; }
.ssp__seek-hint.is-on { animation: ssp-hint 620ms var(--ssp-ease) forwards; }
@keyframes ssp-hint {
	0%   { opacity: 0; }
	25%  { opacity: 1; }
	100% { opacity: 0; }
}

/* ---------- error ---------- */
.ssp__error {
	position: absolute;
	inset: 0;
	z-index: 8;
	display: grid;
	place-items: center;
	padding: 20px;
	text-align: center;
	background: rgba(4, 6, 11, .86);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}
.ssp__error[hidden] { display: none; }
.ssp__error-box { max-width: 340px; }
.ssp__error svg { width: 38px; height: 38px; fill: #FF6B81; margin-bottom: 10px; }
.ssp__error p { margin: 0 0 14px; font-size: 14px; line-height: 1.8; color: rgba(255, 255, 255, .86); }
.ssp__retry {
	padding: 8px 18px;
	border: 1px solid var(--ssp-primary);
	border-radius: 9px;
	background: color-mix(in srgb, var(--ssp-primary) 26%, transparent);
	color: #fff;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--ssp-dur-fast) var(--ssp-ease);
}
.ssp__retry:hover { background: var(--ssp-primary); }

/* ---------- controls ---------- */
.ssp__controls {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: 7;
	/* Media-player convention: transport controls stay left-to-right even on an
	   RTL page, so play/volume/time sit on the left and fullscreen on the right. */
	direction: ltr;
	padding: 0 var(--ssp-pad-x) 8px;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity var(--ssp-dur-fast) var(--ssp-ease), transform var(--ssp-dur-fast) var(--ssp-ease);
}
.ssp.is-controls-visible .ssp__controls { opacity: 1; transform: none; pointer-events: auto; }
.ssp[data-controls="off"] .ssp__controls { display: none; }
.ssp[data-state="cover"] .ssp__controls,
.ssp[data-state="idle"] .ssp__controls,
.ssp[data-state="initializing"] .ssp__controls { display: none; }
.ssp.is-idle { cursor: none; }

.ssp__scrim {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	z-index: -1;
	height: 190%;
	background: linear-gradient(to top, var(--ssp-scrim-color) 0%,
	            color-mix(in srgb, var(--ssp-scrim-color) 60%, transparent) 38%, transparent 100%);
	pointer-events: none;
}

/* timeline — media logic stays LTR even inside an RTL page */
.ssp__timeline {
	position: relative;
	direction: ltr;
	padding: 10px 0 6px;
	cursor: pointer;
	touch-action: none;
	outline: none;
}
.ssp__track {
	position: relative;
	height: var(--ssp-timeline-height);
	border-radius: 99px;
	background: var(--ssp-rail-color);
	transition: height var(--ssp-dur-fast) var(--ssp-ease);
}
.ssp__timeline:hover .ssp__track,
.ssp__timeline.is-scrubbing .ssp__track,
.ssp__timeline:focus-visible .ssp__track { height: var(--ssp-timeline-hover); }
.ssp__track-buffer,
.ssp__track-play {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
	border-radius: 99px;
}
.ssp__track-buffer { background: var(--ssp-buffer-color); transition: width 260ms linear; }
.ssp__track-play {
	background: var(--ssp-progress-color);
	box-shadow: 0 0 12px var(--ssp-primary-soft);
	transition: width 90ms linear;
}
.ssp__track-thumb {
	position: absolute;
	top: 50%;
	left: 0;
	width: var(--ssp-thumb-size);
	height: var(--ssp-thumb-size);
	border-radius: 50%;
	background: var(--ssp-progress-color);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .5);
	transform: translate(-50%, -50%) scale(0);
	transition: transform 160ms var(--ssp-ease-spring);
}
.ssp__timeline:hover .ssp__track-thumb,
.ssp__timeline.is-scrubbing .ssp__track-thumb,
.ssp__timeline:focus-visible .ssp__track-thumb { transform: translate(-50%, -50%) scale(1); }
.ssp__tooltip {
	position: absolute;
	bottom: calc(100% - 2px);
	left: 0;
	padding: 3px 7px;
	border: 1px solid rgba(255, 255, 255, .10);
	border-radius: 6px;
	background: rgba(6, 9, 15, .92);
	color: #fff;
	font-size: 11.5px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	opacity: 0;
	transform: translateX(-50%) translateY(-2px);
	pointer-events: none;
	transition: opacity 140ms var(--ssp-ease);
}
.ssp__timeline:hover .ssp__tooltip,
.ssp__timeline.is-scrubbing .ssp__tooltip { opacity: 1; }

/* bar */
.ssp__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ssp__group { display: flex; align-items: center; gap: var(--ssp-gap); min-width: 0; }
.ssp__btn {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: var(--ssp-control-height);
	height: var(--ssp-control-height);
	padding: 0;
	border: 0;
	border-radius: 10px;
	background: transparent;
	color: var(--ssp-control-color);
	cursor: pointer;
	transition: background-color 160ms var(--ssp-ease), transform 160ms var(--ssp-ease-spring), opacity 160ms;
}
.ssp__btn svg { width: var(--ssp-icon-size); height: var(--ssp-icon-size); fill: currentColor; }
.ssp__btn:hover { background: var(--ssp-control-hover-bg); transform: scale(1.06); }
.ssp__btn:active { transform: scale(.92); }
.ssp[data-focus="on"] .ssp__btn:focus-visible { outline: 2px solid var(--ssp-primary); outline-offset: -2px; }
.ssp__btn[disabled] { opacity: .35; pointer-events: none; }
.ssp__btn[hidden] { display: none; }

.ssp__btn--play .i-pause,
.ssp.is-playing .ssp__btn--play .i-play { display: none; }
.ssp.is-playing .ssp__btn--play .i-pause { display: block; }
.ssp__btn--mute .i-mute,
.ssp.is-muted .ssp__btn--mute .i-vol { display: none; }
.ssp.is-muted .ssp__btn--mute .i-mute { display: block; }
.ssp__btn--fs .i-fsx,
.ssp.is-fullscreen .ssp__btn--fs .i-fs { display: none; }
.ssp.is-fullscreen .ssp__btn--fs .i-fsx { display: block; }

/* volume */
.ssp__volume { display: flex; align-items: center; }
.ssp__vol-slider {
	position: relative;
	direction: ltr;
	width: 0;
	height: 4px;
	border-radius: 99px;
	background: var(--ssp-rail-color);
	opacity: 0;
	cursor: pointer;
	outline: none;
	touch-action: none;
	transition: width 240ms var(--ssp-ease), margin 240ms var(--ssp-ease), opacity 200ms;
}
.ssp__volume:hover .ssp__vol-slider,
.ssp__volume:focus-within .ssp__vol-slider,
.ssp__vol-slider.is-scrubbing { width: 68px; margin-inline: 2px 8px; opacity: 1; }
.ssp__vol-fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 100%;
	border-radius: 99px;
	background: var(--ssp-control-color);
}
.ssp__vol-thumb {
	position: absolute;
	top: 50%;
	left: 100%;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 6px rgba(0, 0, 0, .5);
	transform: translate(-50%, -50%);
}

/* time */
.ssp__time {
	padding-inline: 4px;
	color: var(--ssp-control-color);
	font-size: 12.5px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ssp__time i { margin: 0 4px; color: var(--ssp-control-muted); font-style: normal; }

.ssp__badge {
	direction: ltr;
	padding: 2px 6px;
	border: 1px solid var(--ssp-surface-border);
	border-radius: 5px;
	background: rgba(255, 255, 255, .10);
	color: var(--ssp-control-color);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .06em;
}
.ssp__badge[hidden] { display: none; }

/* ---------- settings menu ---------- */
.ssp__menu {
	position: absolute;
	z-index: 9;
	bottom: calc(var(--ssp-control-height) + 22px);
	/* Physical, not logical: the bar is LTR now, so the popover must open under
	   the settings icon on the right even when the menu's own text is RTL. */
	right: var(--ssp-pad-x);
	left: auto;
	min-width: var(--ssp-menu-width);
	/* the containing block is the (short) controls layer, so a % max-height
	   would collapse the menu — cap it in absolute units instead */
	max-height: min(260px, 46vh);
	overflow: hidden auto;
	padding: 6px;
	border: 1px solid var(--ssp-surface-border);
	border-radius: var(--ssp-radius-sm);
	background: var(--ssp-surface);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
	backdrop-filter: blur(var(--ssp-menu-blur)) saturate(1.3);
	-webkit-backdrop-filter: blur(var(--ssp-menu-blur)) saturate(1.3);
	transform-origin: bottom right;
	animation: ssp-menu-in 200ms var(--ssp-ease);
	scrollbar-width: thin;
}
/* The bar is LTR, but the menu's own text follows the page language. */
[dir="rtl"] .ssp__menu { direction: rtl; }
[dir="rtl"] .ssp__menu-back { text-align: right; }
.ssp__menu[hidden] { display: none; }
.ssp__menu.is-closing { animation: ssp-menu-out 150ms var(--ssp-ease) forwards; }
@keyframes ssp-menu-in {
	from { opacity: 0; transform: scale(.94) translateY(6px); }
	to   { opacity: 1; transform: none; }
}
@keyframes ssp-menu-out {
	to { opacity: 0; transform: scale(.96) translateY(4px); }
}

.ssp__menu-row,
.ssp__menu-back,
.ssp__menu-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	padding: 9px 10px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--ssp-control-color);
	font: inherit;
	font-size: 13px;
	text-align: start;
	cursor: pointer;
	transition: background-color 140ms var(--ssp-ease);
}
.ssp__menu-row[hidden] { display: none; }
.ssp__menu-row:hover,
.ssp__menu-back:hover,
.ssp__menu-item:hover { background: var(--ssp-control-hover-bg); }
.ssp__menu-row em { color: var(--ssp-control-muted); font-size: 12px; font-style: normal; direction: ltr; }
.ssp__menu-back {
	margin-bottom: 4px;
	border-bottom: 1px solid var(--ssp-surface-border);
	border-radius: 8px 8px 0 0;
	font-weight: 600;
}
.ssp__menu-item span { flex: 0 0 auto; }
.ssp__menu-item small { margin-inline-start: auto; padding-inline: 10px; color: var(--ssp-control-muted); font-size: 11px; }
.ssp__menu-item.is-active { color: var(--ssp-primary); font-weight: 600; }
.ssp__menu-item.is-active::after { content: "\2713"; font-size: 12px; }
.ssp__menu-pane[hidden] { display: none; }

/* ---------- compact layout (driven by ResizeObserver, not the viewport) ---------- */
.ssp[data-size="sm"] {
	--ssp-play-size: 58px;
	--ssp-control-height: 34px;
	--ssp-icon-size: 17px;
	--ssp-pad-x: 10px;
	--ssp-gap: 2px;
}
.ssp[data-size="sm"] .ssp__time { font-size: 11.5px; }
.ssp[data-size="sm"] .ssp__btn--pip,
.ssp[data-size="sm"] .ssp__badge,
.ssp[data-size="sm"] .ssp__vol-slider { display: none; }
.ssp[data-size="sm"] .ssp__menu { left: var(--ssp-pad-x); right: var(--ssp-pad-x); min-width: 0; max-height: min(190px, 40vh); }
.ssp[data-size="sm"] .ssp__title { font-size: 13px; }
.ssp[data-size="sm"] .ssp__seek-hint svg { width: 24px; height: 24px; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.ssp[data-reduced="on"],
	.ssp[data-reduced="on"] * {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .06s !important;
	}
	.ssp[data-reduced="on"] .ssp__cover-img { transition: none; }
}