/* =========================================================
   MTV HLS Player — front-end styles
   ========================================================= */

/* ----------------------------------------------------------
   Wrapper
   ---------------------------------------------------------- */
.mtv-player-wrapper {
	position: relative;
	width: 100%;
	background: #000;
	border-radius: 10px;
	overflow: hidden;
	--mtv-accent: #e31c2a;
	/* rgb split for box-shadow alpha trick in older browsers */
	--mtv-accent-rgb: 227, 28, 42;
}

/* ----------------------------------------------------------
   Quality dock — pill strip that floats top-right
   ---------------------------------------------------------- */
.mtv-quality-dock {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 30;
	display: flex;
	align-items: center;
	gap: 3px;
	padding: 5px 6px;
	background: rgba(0, 0, 0, 0.52);
	-webkit-backdrop-filter: blur(14px) saturate(1.6);
	        backdrop-filter: blur(14px) saturate(1.6);
	border: 1px solid rgba(255, 255, 255, 0.11);
	border-radius: 999px;
	transition: opacity 0.25s ease;
	/* prevent the dock from interfering with video clicks */
	pointer-events: auto;
}

/* Fade dock when controls are hidden (Video.js adds vjs-user-inactive) */
.mtv-player-wrapper .video-js.vjs-user-inactive.vjs-playing + .mtv-quality-dock,
.mtv-player-wrapper:has(.video-js.vjs-user-inactive.vjs-playing) .mtv-quality-dock {
	opacity: 0;
}

/* Reveal dock on hover over the whole wrapper */
.mtv-player-wrapper:hover .mtv-quality-dock {
	opacity: 1 !important;
}

/* ----------------------------------------------------------
   Quality buttons
   ---------------------------------------------------------- */
.mtv-quality-btn {
	-webkit-appearance: none;
	appearance: none;
	background: transparent;
	border: none;
	border-radius: 999px;
	color: rgba(255, 255, 255, 0.58);
	cursor: pointer;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', sans-serif;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.65px;
	line-height: 1;
	padding: 5px 12px;
	text-transform: uppercase;
	transition: color 0.15s, background 0.15s, box-shadow 0.15s;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
}

.mtv-quality-btn:hover {
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
}

.mtv-quality-btn:focus-visible {
	outline: 2px solid var(--mtv-accent);
	outline-offset: 2px;
}

.mtv-quality-btn.active {
	background: var(--mtv-accent);
	color: #fff;
	box-shadow:
		0 0 0 1px var(--mtv-accent),
		0 2px 14px rgba(var(--mtv-accent-rgb), 0.45);
}

/* ----------------------------------------------------------
   Switching overlay — subtle pulse while loading new stream
   ---------------------------------------------------------- */
.mtv-player--switching::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 20;
	background: rgba(0, 0, 0, 0.38);
	animation: mtv-fade-in 0.2s ease forwards;
	pointer-events: none;
}

.mtv-player--switching::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40px;
	height: 40px;
	margin: -20px 0 0 -20px;
	z-index: 21;
	border: 3px solid rgba(255, 255, 255, 0.2);
	border-top-color: #fff;
	border-radius: 50%;
	animation: mtv-spin 0.75s linear infinite;
	pointer-events: none;
}

@keyframes mtv-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes mtv-spin {
	to { transform: rotate(360deg); }
}

/* ----------------------------------------------------------
   Audio-only mode (e.g. Radio stream)
   Keeps the poster visible and maintains player height on mobile.
   ---------------------------------------------------------- */
.mtv-player-wrapper.mtv-audio-only .video-js {
	/* Force 16:9 container so the player doesn't collapse on mobile */
	min-height: 0;
	padding-top: 56.25%;
	height: 0;
}

/* Poster overlay — covers the black video area.
   Priority: audio poster → video poster → gradient fallback. */
.mtv-player-wrapper.mtv-audio-only::after {
	content: '';
	position: absolute;
	inset: 0;
	/* bottom gap for the control bar (~42 px) */
	bottom: 42px;
	background-image: var(--mtv-poster-audio,
		var(--mtv-poster-video,
			linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%)));
	background-size: cover;
	background-position: center;
	border-radius: 10px 10px 0 0;
	z-index: 2;
	pointer-events: none;
}

/* ----------------------------------------------------------
   Video.js skin tweaks
   ---------------------------------------------------------- */
.mtv-player-wrapper .video-js {
	width: 100%;
	border-radius: 10px;
	font-family: inherit;
}

/* Control bar */
.mtv-player-wrapper .vjs-control-bar {
	border-radius: 0 0 10px 10px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.75) 60%);
	height: 42px;
}

/* Progress / seek bar accent */
.mtv-player-wrapper .video-js .vjs-play-progress,
.mtv-player-wrapper .video-js .vjs-volume-level {
	background: var(--mtv-accent);
}

.mtv-player-wrapper .video-js .vjs-play-progress::before {
	color: var(--mtv-accent);
}

/* Big play button — outlined symbol only, no background shape. */
.mtv-player-wrapper .video-js .vjs-big-play-button {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	width: 88px;
	height: 88px;
	/* perfectly centred via margin offset */
	top: 50%;
	left: 50%;
	margin-top: -44px;
	margin-left: -44px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.mtv-player-wrapper .video-js:hover .vjs-big-play-button,
.mtv-player-wrapper .video-js .vjs-big-play-button:hover,
.mtv-player-wrapper .video-js .vjs-big-play-button:focus {
	background: transparent;
	box-shadow: none;
	transform: scale(1.15);
	opacity: 0.9;
}

/* The play triangle icon — white fill, black outline via text-shadow */
.mtv-player-wrapper .video-js .vjs-big-play-button .vjs-icon-placeholder::before {
	font-size: 88px;
	line-height: 88px;
	color: #fff;
	text-shadow:
		-2px -2px 0 rgba(0, 0, 0, 0.8),
		 2px -2px 0 rgba(0, 0, 0, 0.8),
		-2px  2px 0 rgba(0, 0, 0, 0.8),
		 2px  2px 0 rgba(0, 0, 0, 0.8),
		 0   -2px 0 rgba(0, 0, 0, 0.8),
		 0    2px 0 rgba(0, 0, 0, 0.8),
		-2px  0   0 rgba(0, 0, 0, 0.8),
		 2px  0   0 rgba(0, 0, 0, 0.8);
}

/* Loading spinner colour */
.mtv-player-wrapper .video-js .vjs-loading-spinner {
	border-color: var(--mtv-accent);
}

.mtv-player-wrapper .video-js .vjs-loading-spinner::before,
.mtv-player-wrapper .video-js .vjs-loading-spinner::after {
	border-top-color: var(--mtv-accent);
}

/* ----------------------------------------------------------
   Sound hint (shown when browser forces muted autoplay)
   ---------------------------------------------------------- */
.mtv-sound-hint {
	position: absolute;
	bottom: 54px; /* sit just above the control bar */
	left: 50%;
	transform: translateX(-50%);
	z-index: 40;
	background: rgba(0, 0, 0, 0.65);
	-webkit-backdrop-filter: blur(10px);
	        backdrop-filter: blur(10px);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 999px;
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	font-size: 12px;
	font-weight: 500;
	padding: 7px 16px;
	white-space: nowrap;
	pointer-events: none; /* don't block clicks — the whole page unmutes */
	animation: mtv-fade-in 0.4s ease;
}

/* ----------------------------------------------------------
   Responsive
   ---------------------------------------------------------- */
@media (max-width: 480px) {
	.mtv-quality-dock {
		top: 8px;
		right: 8px;
		gap: 2px;
		padding: 4px 5px;
	}
	.mtv-quality-btn {
		font-size: 9.5px;
		padding: 4px 9px;
		letter-spacing: 0.4px;
	}
}

/* ----------------------------------------------------------
   Admin notice (shown when no streams configured)
   ---------------------------------------------------------- */
.mtv-player-notice {
	background: #fff3cd;
	border: 1px solid #ffc107;
	border-radius: 4px;
	color: #856404;
	font-size: 14px;
	padding: 12px 16px;
	margin: 8px 0;
}