/* 0.9.107: the main video player (VidoRev's Plyr on a single video page) looks like Netflix's:
   a full-width progress bar on its own row above the buttons, thin (4px) and thicker (8px) on hover, gold played part,
   grey buffered part, a dot that shows on hover / drag, black gradient under the controls. Scoped to .single-player-video-wrapper,
   so the trailer lightbox and other players are left alone. Which buttons exist is a setting (Settings > TVC Player). */
.single-player-video-wrapper .plyr {
	--plyr-color-main: #d4af5a;
	--plyr-video-progress-buffered-background: rgba(255, 255, 255, .38);
	--plyr-video-range-track-background: rgba(255, 255, 255, .16);
	--plyr-range-thumb-height: 16px;
	--plyr-range-track-height: 4px;
	--plyr-tooltip-background: rgba(0, 0, 0, .85);
	--plyr-tooltip-color: #fff;
}
.single-player-video-wrapper .plyr--video .plyr__controls {
	flex-wrap: wrap;
	padding: 36px 14px 10px;
	background: linear-gradient(to top, rgba(0, 0, 0, .92) 0%, rgba(0, 0, 0, .55) 55%, rgba(0, 0, 0, 0) 100%);
	row-gap: 0;
}
/* the progress bar: its own full-width row above the buttons */
.single-player-video-wrapper .plyr__controls .plyr__progress__container {
	order: -1;
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 4px;
	min-width: 0;
}
.single-player-video-wrapper .plyr__controls .plyr__progress {
	order: -1;
	flex: 0 0 100%;
	width: 100%;
	margin: 0 0 4px;
	padding: 0;
	min-width: 0;
}
.single-player-video-wrapper .plyr__progress input[type=range] {
	height: 24px; /* touch area; the track itself is drawn thin */
	margin: 0;
	cursor: pointer;
}
.single-player-video-wrapper .plyr__progress__buffer {
	transition: height .15s ease;
}
.single-player-video-wrapper .plyr__progress input[type=range]::-webkit-slider-runnable-track {
	transition: height .15s ease;
}
.single-player-video-wrapper .plyr__progress input[type=range]::-moz-range-track {
	transition: height .15s ease;
}
.single-player-video-wrapper .plyr__progress input[type=range]::-webkit-slider-thumb {
	transform: scale(0);
	transition: transform .15s ease;
	background: #d4af5a;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .35);
}
.single-player-video-wrapper .plyr__progress input[type=range]::-moz-range-thumb {
	transform: scale(0);
	transition: transform .15s ease;
	background: #d4af5a;
}
.single-player-video-wrapper .plyr__progress:hover,
.single-player-video-wrapper .plyr__progress:focus-within,
.single-player-video-wrapper .plyr--touch .plyr__progress {
	--plyr-range-track-height: 8px;
}
.single-player-video-wrapper .plyr__progress:hover input[type=range]::-webkit-slider-thumb,
.single-player-video-wrapper .plyr__progress input[type=range]:active::-webkit-slider-thumb,
.single-player-video-wrapper .plyr__progress input[type=range]:focus-visible::-webkit-slider-thumb {
	transform: scale(1);
}
.single-player-video-wrapper .plyr__progress:hover input[type=range]::-moz-range-thumb,
.single-player-video-wrapper .plyr__progress input[type=range]:active::-moz-range-thumb {
	transform: scale(1);
}
/* time on the right, next to CC and full screen */
.single-player-video-wrapper .plyr__controls .plyr__time {
	margin-left: auto;
	font-variant-numeric: tabular-nums;
}
.single-player-video-wrapper .plyr__controls .plyr__time + .plyr__time {
	margin-left: 0;
}
@media (max-width: 600px) {
	.single-player-video-wrapper .plyr--video .plyr__controls {
		padding: 28px 8px 6px;
	}
	.single-player-video-wrapper .plyr__progress input[type=range] {
		height: 28px;
	}
}
/* 0.9.109: keep the progress bar inside the player on both sides (Plyr shifts it right by half a thumb),
   and, outside full screen, move CC / full screen left so they clear the channel logo burned into the
   bottom-right corner of the channel's own films (it sits about 2–8% in from the right edge). */
.single-player-video-wrapper .plyr__controls .plyr__progress {
	left: 0;
	margin-right: 0;
}
.single-player-video-wrapper .plyr__progress input[type=range],
.single-player-video-wrapper .plyr__progress .plyr__progress__buffer {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}
.single-player-video-wrapper .plyr:not(.plyr--fullscreen-active) .plyr__controls [data-plyr="fullscreen"] {
	margin-right: 9%;
}