/* custom.css */
body {
	background: #181818;
	color: #fff;
	font-family: Arial, sans-serif;
	margin: 0;
	padding: 0;
}

#player-root {
	width: 100vw;
	min-height: 95vh;
	background: #00000069;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	padding-top: 1vh;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0;
	width: 100%;
	max-width: 66.66%;
	padding: 0;
	-webkit-transition: width 0.2s;
	-moz-transition: width 0.2s;
	-ms-transition: width 0.2s;
	-o-transition: width 0.2s;
	transition: width 0.2s;
}

.video-js {
	width: 100%;
	aspect-ratio: 16/9;
	max-width: 100%;
	max-height: 80vh;
	border-radius: 7px;
	background: #000000;
	margin-bottom: 14px;
	display: block;
	position: relative !important;
	overflow: visible !important;
	border: none !important;
	outline: none !important;
	box-shadow: none !important;
	font-family: system-ui, "Segoe UI", Arial, sans-serif;
}

.video-js {
	/* Fix aspect-ratio for Safari < 16 */
	aspect-ratio: 16/9;

	@supports not (aspect-ratio: 16/9) {
		height: 56.25vw;
		max-height: 80vh;
	}
}

/* Progress bar floats above controls */
.video-js .vjs-progress-control {
	position: absolute !important;
	left: 0;
	right: 0;
	top: 10px;
	width: 100% !important;
	height: 6px !important;
	z-index: 0;
	background: none !important;
	pointer-events: auto;
}

.video-js .vjs-progress-holder {
	height: 6px !important;
	border-radius: 0;
	background: rgba(255, 255, 255, 0.10);
}

.video-js .vjs-play-progress {
	background: #ff0000 !important;
	height: 6px !important;
	border-radius: 0 0 4px 4px;
}

.video-js .vjs-load-progress {
	background: #fff3 !important;
}

.video-js .vjs-mouse-display,
.video-js .vjs-time-tooltip {
	display: none !important;
}

/* Controls bar with blur, padding, spacing */
.video-js .vjs-control-bar {
	background: linear-gradient(to top, #00000099, #00000000);
}

/* Buttons, icon sizing and centering */
.video-js .vjs-control,
.vjs-theater-toggle-button {
	color: #fff !important;
	opacity: 1;
	font-size: 15px !important;
	display: flex !important;
	background: none !important;
}

.video-js .vjs-control:hover,
.vjs-theater-toggle-button:hover {
	color: #ff0000 !important;
	opacity: 1;
	background: none !important;
}

.vjs-theater-toggle-button svg {
	width: 100%;
	height: 100%;
	display: block;
	margin: auto;
	pointer-events: none;
}

/* Make volume bar horizontal and fix shift */
.video-js .vjs-volume-panel {
	align-items: center;
}

.video-js .vjs-volume-panel .vjs-volume-control {
	margin-left: 4px;
}

.video-js .vjs-volume-panel .vjs-slider-horizontal {
	width: 72px !important;
	margin: 0;
}

/* Make volume bar red */
.video-js .vjs-volume-level {
	background: #ff0000 !important;
	height: 0.2em;
	color: #fff;
}

.video-js .vjs-slider {
	background: #3d3d3d !important;
}

/* --- THEATER MODE --- */
.theater-mode {
	width: 100%;
	max-width: 99vw;
	border-radius: 0;
	box-shadow: none;
	padding-left: 0;
	padding-right: 0;
	margin: 0 auto;
	background: none !important;
}

.theater-mode .video-js {
	border-radius: 0 !important;
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 100%;
	max-height: 92vh;
	margin-left: auto;
	margin-right: auto;
}

/* Push right controls to edge */
.video-js .vjs-spacer {
	flex: 1 1 auto !important;
}

/* Prevent overlap/provide more spacing under bar */
.video-js .vjs-control-bar {
	padding-bottom: 0px;
	min-height: 65px;
}

.video-js .vjs-volume-panel.vjs-hover .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel:active .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel:focus .vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-volume-control:active.vjs-volume-horizontal,
.video-js .vjs-volume-panel.vjs-hover .vjs-mute-control~.vjs-volume-control.vjs-volume-horizontal,
.video-js .vjs-volume-panel .vjs-volume-control.vjs-slider-active.vjs-volume-horizontal {
	width: 6em;
	height: 0.5em;
	margin-right: 0;
	align-items: center;
}

.vjs-theater-toggle-button svg path {
	-webkit-transition: fill 0.15s;
	-moz-transition: fill 0.15s;
	-ms-transition: fill 0.15s;
	-o-transition: fill 0.15s;
	transition: fill 0.15s;
}

.vjs-theater-toggle-button:hover svg path {
	fill: #ff0000 !important;
}

.video-js .vjs-load-progress div {
	background: rgb(255 0 0 / 14%);
}

.video-js .vjs-big-play-button {
	background-color: #ff000069;
	border: transparent !important;
	color: #fff;
}

.video-js .vjs-big-play-button:focus,
.video-js:hover .vjs-big-play-button {
	background-color: #ff0000;
}

.video-js.vjs-user-inactive {
	cursor: none !important;
}

.video-js.vjs-user-inactive * {
	cursor: none;
}

.vjs-control.vjs-button.vjs-theater-toggle-button.vjs-hidden {
    display: none !important;
}

.vjs-settings-menu-button,
.vjs-theater-toggle-button {
	background: none !important;
	box-shadow: none !important;
	border-radius: 50% !important;
}

.vjs-settings-menu-button img,
.vjs-theater-toggle-button img {
	width: 48px;
	height: 48px;
	pointer-events: none;
}

/* For a clean look, prevent menu from overlapping progress bar on small screens */
@media (max-width: 600px) {
	.ytp-quality-menu {
		right: 4px;
		min-width: 100px;
		font-size: 13px;
	}

	.ytp-quality-menu-item {
		padding: 6px 10px;
		font-size: 13px;
	}
}

/* Hide the menu if not on player */
.ytp-quality-menu:not(:focus-within):not(:hover) {
	/* If you want auto-close on blur, you can use display: none in JS or add transitions here */
}

/* Optional: Add slight hover to SVG button backgrounds */
.vjs-settings-menu-button:hover,
.vjs-theater-toggle-button:hover {
	background: #2a2a2a !important;
}

.vjs-settings-menu-button:active,
.vjs-theater-toggle-button:active {
	background: none !important;
}

.preload-webp {
	background-image: url('/showcase/ico/settings.webp'), url('/showcase/ico/theater_mode.webp'), url('/showcase/ico/default_view.webp'), url('/showcase/ico/settings_red.webp'), url('/showcase/ico/theater_mode_red.webp'), url('/showcase/ico/default_view_red.webp');
	width: 0;
	height: 0;
	overflow: hidden;
	position: absolute;
	pointer-events: none;
	opacity: 0;
}

.vjs-stats-overlay {
	background: #191919;
	color: #fff;
	border-radius: 12px;
	box-shadow: 0 2px 16px #000c;
	padding: 16px 18px 14px 18px;
	font-family: 'Consolas', 'Menlo', monospace;
	position: absolute;
	top: 24px;
	right: 24px;
	z-index: 2222;
	min-width: 270px;
	max-width: 98vw;
	width: max-content;
	max-height: 90vh;
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	-webkit-user-select: text;
	-moz-user-select: text;
	-ms-user-select: text;
	user-select: text;
}

@media (max-width: 500px) {
	.vjs-stats-overlay {
		top: 8px;
		right: 8px;
		padding: 10px 8px 10px 8px;
		min-width: 160px;
		font-size: 13px;
		border-radius: 8px;
	}
}

.vjs-stats-overlay-title {
	font-weight: bold;
	color: #ff3a3a;
	font-size: 1.2em;
	margin-bottom: 10px;
	letter-spacing: .5px;
}

.vjs-stats-overlay-close {
	position: absolute;
	right: 10px;
	top: 7px;
	background: none;
	color: #fff;
	border: none;
	font-size: 1.2em;
	cursor: pointer;
}

.vjs-stats-content {
	margin-top: 2px;
}

.vjs-stats-line {
	margin-bottom: 3px;
}

.vjs-stats-label {
	color: #ff0000;
}

.vjs-stats-value {
	color: #fff;
}

/* Modern flex menu with gap between buttons */
.vjs-quality-menu,
.vjs-settings-menu,
.vjs-video-quality-menu,
.vjs-audio-quality-menu {
	border-radius: 1em;
	font-size: 14px;
	animation: menu-pop 0.17s cubic-bezier(.23, 1.21, .48, 1.01);
	font-weight: 600;
	background: rgba(28, 28, 28, .9);
	text-shadow: 0 0 2px rgba(0, 0, 0, .5);
	-webkit-transition: opacity .1s cubic-bezier(0,0,.2,1);
	transition: opacity .1s cubic-bezier(0,0,.2,1);
	-moz-user-select: none;
	-ms-user-select: none;
	-webkit-user-select: none;
	padding: 10px 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

/* Prefix keyframes for Safari/Edge/old Chrome */
@-webkit-keyframes menu-pop {
	from {
		opacity: 0;
		-webkit-transform: scale(.97) translateY(18px);
	}

	to {
		opacity: 1;
		-webkit-transform: scale(1) translateY(0);
	}
}

@keyframes menu-pop {
	from {
		opacity: 0;
		transform: scale(.97) translateY(18px);
	}

	to {
		opacity: 1;
		transform: scale(1) translateY(0);
	}
}

.vjs-quality-menu-item,
.vjs-settings-main-btn {
	transition: background 0.13s, color 0.13s;
	letter-spacing: .01em;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cc-font-btn {
	margin: 10px 0 5px 0;
}

/* "Auto" button: yellow text unless hovered or selected */
.vjs-quality-menu-item.vjs-video-quality-auto,
.vjs-quality-menu-item.vjs-audio-quality-auto {
	color: #fff;
	background: #22222b;
	border-radius: 7px;
}

.vjs-quality-menu-item.vjs-video-quality-auto:hover,
.vjs-quality-menu-item.vjs-audio-quality-auto:hover,
.vjs-quality-menu-item.vjs-video-quality-auto.selected,
.vjs-quality-menu-item.vjs-audio-quality-auto.selected,
.vjs-quality-menu-item.vjs-video-quality-auto:focus-visible,
.vjs-quality-menu-item.vjs-audio-quality-auto:focus-visible {}

/* Back button: gray text unless hovered or selected */
.vjs-quality-menu-item.vjs-quality-back {
	color: #aaaaaa;
	background: #22222b;
	font-weight: 400;
	border-radius: 7px;
}

.vjs-quality-menu-item.vjs-quality-back:hover,
.vjs-quality-menu-item.vjs-quality-back.selected,
.vjs-quality-menu-item.vjs-quality-back:focus-visible {
	color: #fff;
}

/* Selected (active) option is bright red */
.vjs-quality-menu-item.selected,
.vjs-video-quality-option.selected,
.vjs-audio-quality-option.selected {
	background-color: rgba(255, 255, 255, .1);
}

/* Red highlight on hover and focus */
.vjs-quality-menu-item:hover,
.vjs-settings-main-btn:hover,
.vjs-quality-menu-item:focus-visible,
.vjs-settings-main-btn:focus-visible {
	background-color: rgba(255, 255, 255, .1);
}

/* Red focus outline for accessibility */
.vjs-quality-menu-item:focus-visible,
.vjs-settings-main-btn:focus-visible {
	outline: none;
}

/* Disabled/none style */
.vjs-quality-menu-item.vjs-quality-none {
	color: #888;
	cursor: default;
	background: none;
	font-style: italic;
}

.vjs-video-source-btn,
.vjs-audio-source-btn {
	border-radius: 7px;
	display: block;
	width: 100%;
	font-size: 1.05em;
}

.vjs-settings-menu .vjs-settings-main-btn {
}

/* Max height and modern scrollbars */
.vjs-quality-menu {
	max-height: 60vh;
	overflow-y: auto;
}

.vjs-quality-menu::-webkit-scrollbar {
	width: 7px;
	background: #191919;
}

.vjs-quality-menu::-webkit-scrollbar-thumb {
	background: #282828;
	border-radius: 5px;
}

.vjs-quality-menu::-webkit-scrollbar-track {
	background: #191919;
}

/* Responsive: mobile screens and touch devices */
@media (max-width: 800px) {

	.vjs-quality-menu,
	.vjs-settings-menu,
	.vjs-video-quality-menu,
	.vjs-audio-quality-menu {
		min-width: 140px;
		font-size: 14px;
		border-radius: 9px;
		padding: 11px 0;
		gap: 5px;
	}

	.vjs-quality-menu-item,
	.vjs-settings-main-btn {
		padding: 10px 12px;
		border-radius: 5px;
		font-size: 0.98em;
	}
}

@media (hover: none) and (pointer: coarse) {

	.vjs-quality-menu-item,
	.vjs-settings-main-btn {
		padding-top: 16px;
		padding-bottom: 16px;
		font-size: 1.08em;
	}
}

/* Light mode improvement */
@media (prefers-color-scheme: light) {

	.vjs-quality-menu,
	.vjs-settings-menu,
	.vjs-video-quality-menu,
	.vjs-audio-quality-menu {
		background-color: rgba(28, 28, 28, .9);
		backdrop-filter: none;
	}
}

/* Browser-specific scrollbars for Edge, Chrome, Safari (Webkit), Firefox */
.vjs-quality-menu::-webkit-scrollbar {
	width: 7px;
	background: #191919;
}

.vjs-quality-menu::-webkit-scrollbar-thumb {
	background: #282828;
	border-radius: 5px;
}

.video-js .vjs-slider {
	opacity: 0.5
}

.video-js .vjs-slider:hover {
	opacity: 1
}


/*Audio Selector*/
.custom-speed-menu {
	position: absolute;
	z-index: 9999;
	border-radius: 14px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
	display: flex;
	flex-direction: column;
	align-items: center;
	transition: box-shadow 0.2s;
}

.custom-speed-menu:focus-within {
	box-shadow: 0 6px 18px rgba(60, 60, 70, 0.44);
}

.custom-speed-input-wrap {
	margin: 10px 0 5px 0;
	display: inline;
}

.custom-speed-input {
	width: 70px;
	text-align: center;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, .1);
	color: #fff;
	font-size: 1.1em;
	outline: none;
	padding: 5px 0;
	transition: border 0.15s;
	border: 1.5px solid rgba(255, 255, 255, .1) !important;
}

.custom-speed-input:focus {
	border: 1.5px solid rgb(255 255 255 / 20%) !important;
}

.custom-speed-input:focus {
	background: #0d0d0d69;
	color: #fff;
	font-weight: 600 !important;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

input {
	text-align: center;
}

.vjs-current-time-display {
	padding: 0;
	margin: 0em 1em;
	font-size: 15px;
	height: 48px;
	display: flex;
	align-items: center;
}


.video-js *,
.video-js :after,
.video-js :before {
	outline: none;
	border: none;
}

.vjs-control .vjs-icon {
  font-size: 1.5em;
  height: 48px;
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* shared blocks */
.cc-option-block {
	padding: 5px 0px;
	display: flex;
	flex-direction: column;
	text-align: center;
}

.cc-font-size-block{
	display: flex;
	align-items: center;
}

/* color pickers in a row */
.cc-color-row {
	gap: 5px;
	display: flex;
	padding: 10px 5px 5px 5px;
}

.cc-color {
	flex: 1;
}

/* apply button tweaks if wanted */
.cc-apply {
	margin: 0;
}


/* the square that shows the current color */
.cc-color {
	appearance: none;
	height: 3em;
	border-radius: 0.5em;
	background: none;
}

.cc-color:hover {
	opacity: 0.9;
	border: #ffffff00 solid 2px;
}

/* Chrome / Edge */
.cc-color::-webkit-color-swatch-wrapper {
	padding: 0;
}

.cc-color::-webkit-color-swatch {
	border: none;
	border-radius: 4px;
}

/* Firefox */
.cc-color::-moz-color-swatch {
	border: none;
	border-radius: 4px;
}

/* Sliders */
.custom-speed-slider,
.cc-slider {
  -webkit-appearance: none;
  width: 80%;
  height: 0.2em;
  background: linear-gradient(to right, rgba(255, 0, 0, 0.4) 0%, red 0%);
  opacity: 0.7;
}

.custom-speed-slider:hover,
.cc-slider:hover {
  opacity: 1.0;
}

.custom-speed-slider::-webkit-slider-thumb,
.cc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  height: 1em;
  width: 1em;
  border-radius: 50%;
  background: white;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

.custom-speed-slider::-moz-range-thumb,
.cc-slider::-moz-range-thumb {
  height: 1em;
  width: 1em;
  border-radius: 50%;
  background: white;
  cursor: pointer;
}

.custom-speed-slider::-moz-range-track,
.cc-slider::-moz-range-track {
  background: transparent;
  height: 0.2em;
  border-radius: 10px;
}

.custom-speed-slider {
  margin: 5px 0 10px 0;
}

.cc-slider {
  margin: 10px 0 5px 0;
  color: #fff;
}

/* Firefox thumb */
input[type="range"]::-moz-range-thumb,
.custom-speed-slider::-moz-range-thumb,
.cc-slider::-moz-range-thumb {
  border: none;
  outline: none;
  box-shadow: none;
}