/*
 * TBook "floating toolbar" skin for Video.js.
 *
 * Reproduces the pleasant modern look: rounded player, big centred translucent
 * play button, and a floating, blurred, rounded control pill at the bottom.
 * Scoped to .video-js so it only affects our players.
 */

.video-js {
	--tb-accent: #f09433;
	--tb-btn: #ffffff;
	--tb-vol: #b8860b;
	--tb-bar-bg: rgba(18, 18, 22, .66);
	border-radius: 14px;
	overflow: hidden;
	background: #000;
	font-family: inherit;
}

/* ---- Big centred play button ---- */
.video-js .vjs-big-play-button {
	width: 76px;
	height: 76px;
	top: 50%;
	left: 50%;
	margin: 0;
	padding: 0;
	transform: translate(-50%, -50%);
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	line-height: 76px;
	transition: background .18s ease, transform .18s ease;
}
.video-js .vjs-big-play-button:hover,
.video-js .vjs-big-play-button:focus {
	background: rgba(255, 255, 255, .34);
	transform: translate(-50%, -50%) scale(1.05);
}
.video-js .vjs-big-play-button .vjs-icon-placeholder::before { line-height: 76px; font-size: 32px; }

/* ---- Floating pill control bar ---- */
.video-js.vjs-controls-enabled .vjs-control-bar {
	left: 10px;
	right: 10px;
	bottom: 10px;
	width: auto;
	height: 44px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--tb-bar-bg, rgba(18, 18, 22, .66));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .38);
}

.video-js .vjs-control-bar .vjs-button { width: 38px; }
.video-js .vjs-control-bar .vjs-button > .vjs-icon-placeholder::before { line-height: 44px; font-size: 16px; }
.video-js .vjs-control-bar .vjs-button:hover { background: rgba(255, 255, 255, .12); border-radius: 8px; }

/* ---- Progress ---- */
.video-js .vjs-progress-control { height: 44px; }
.video-js .vjs-progress-holder { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .3); }
.video-js .vjs-play-progress { background: var(--tb-accent); border-radius: 999px; }
.video-js .vjs-play-progress::before { display: none; }
.video-js .vjs-load-progress { background: rgba(255, 255, 255, .22); border-radius: 999px; }
.video-js .vjs-load-progress div { background: transparent; }
.video-js .vjs-progress-holder .vjs-load-progress,
.video-js .vjs-progress-holder .vjs-load-progress div,
.video-js .vjs-progress-holder .vjs-play-progress { border-radius: 999px; }

/* ---- Time ---- */
.video-js .vjs-time-control { line-height: 44px; font-size: 12px; font-variant-numeric: tabular-nums; }
.video-js .vjs-current-time,
.video-js .vjs-duration,
.video-js .vjs-time-divider { display: block; padding: 0 2px; }

/* ---- Volume ---- */
.video-js .vjs-volume-panel.vjs-control { width: 38px; }
.video-js .vjs-volume-panel .vjs-volume-control.vjs-volume-horizontal { height: 44px; }
.video-js .vjs-volume-bar { height: 4px; border-radius: 999px; margin-top: 20px; }
.video-js .vjs-volume-level { background: var(--tb-vol); border-radius: 999px; }
.video-js .vjs-mute-control .vjs-icon-placeholder::before { font-size: 18px; }

/* ---- Control bar layout: tight, progress gets the space ---- */
.video-js.vjs-controls-enabled .vjs-control-bar { padding: 0 4px; }
.video-js .vjs-control-bar .vjs-button { width: 34px; }
.video-js .vjs-control-bar,
.video-js .vjs-control-bar .vjs-button { color: var(--tb-btn); }
.video-js .vjs-progress-control { flex: 1 1 auto; width: auto; min-width: 60px; }
.video-js .vjs-custom-control-spacer { display: none; }

/* Show only a compact duration; drop the other time readouts. */
.video-js .vjs-current-time,
.video-js .vjs-time-divider,
.video-js .vjs-remaining-time { display: none; }
.video-js .vjs-duration { display: block; padding: 0 4px; font-size: 11px; }
/* Audio player: also show the elapsed time so the counter counts up. */
.video-js.tbook-audio-player .vjs-current-time,
.video-js.tbook-audio-player .vjs-time-divider { display: block !important; padding: 0 2px; font-size: 11px; }
/* Overlay the time readout on the progress bar (bar takes full width). */
.video-js.tbook-audio-player .vjs-progress-control,
.video-js.tbook-video .vjs-progress-control { position: relative !important; }
.video-js.tbook-audio-player .tbook-time-overlay,
.video-js.tbook-video .tbook-time-overlay {
	position: absolute !important;
	left: 0 !important;
	right: 0 !important;
	top: 50% !important;
	transform: translateY(-50%) !important;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	z-index: 3;
	font-size: 11px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
	color: var(--tb-time, #fff);
	text-shadow: 0 1px 3px rgba(0,0,0,.6);
}
.video-js.tbook-audio-player .tbook-time-overlay .vjs-current-time,
.video-js.tbook-audio-player .tbook-time-overlay .vjs-duration,
.video-js.tbook-audio-player .tbook-time-overlay .vjs-time-divider,
.video-js.tbook-video .tbook-time-overlay .vjs-current-time,
.video-js.tbook-video .tbook-time-overlay .vjs-duration,
.video-js.tbook-video .tbook-time-overlay .vjs-time-divider {
	display: block !important;
	position: static !important;
	min-width: 0 !important;
	width: auto !important;
	flex: 0 0 auto !important;
	padding: 0 2px !important;
}

/* ---- Volume: mute button + always-visible inline slider ---- */
.video-js .vjs-volume-panel.vjs-control { width: auto; }
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal .vjs-volume-control,
.video-js .vjs-volume-panel.vjs-volume-panel-horizontal .vjs-volume-control.vjs-volume-horizontal {
	width: 40px !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: static !important;
	display: block !important;
	transition: none;
	margin-left: 4px;
}
.video-js .vjs-volume-panel .vjs-volume-bar { width: 38px; }
/* Never show a second (vertical) volume panel. */
.video-js .vjs-volume-panel.vjs-volume-panel-vertical { display: none !important; }
/* Hide the stray player-level volume panel; the real one is inside the bar. */
.video-js > .vjs-volume-panel { display: none !important; }

/* ---- In-page fullscreen (own exit button; no browser hint) ---- */
.video-js.tbook-fill {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	border-radius: 0 !important;
	aspect-ratio: auto !important;
	display: block !important;
	z-index: 2147483600 !important;
	background: #000;
}
.video-js.tbook-fill video.vjs-tech,
.video-js.tbook-fill .vjs-poster {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	object-fit: contain !important;
}
.tbook-fill-exit {
	position: absolute;
	top: 12px; right: 12px;
	z-index: 10;
	width: 42px; height: 42px;
	border: 0; border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff; font-size: 26px; line-height: 1;
	cursor: pointer;
}
.tbook-fill-exit:hover { background: rgba(255, 255, 255, .28); }

/* ---- Hide title bar / logo ---- */
.video-js .vjs-title-bar,
.video-js .vjs-logo { display: none; }

/* ---- Poster look ---- */
.video-js .vjs-poster { border-radius: 14px; }

/* ---- Audio player (Video.js), same skin, full-width compact bar ---- */
.video-js.tbook-audio-player {
	display: block !important;
	width: 100% !important;
	max-width: 640px !important;
	height: 104px !important;
	margin: 10px auto !important;
}
.video-js.tbook-audio-player .vjs-control-bar { top: auto; bottom: 0; }
.video-js.tbook-audio-player .vjs-big-play-button { display: none !important; }
.video-js.tbook-audio-player .vjs-control-bar {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	position: absolute !important;
	top: auto !important;
	bottom: 0 !important;
	height: 48px !important;
}
.video-js.tbook-audio-player .vjs-fullscreen-control { display: none !important; }
/* Audio player: no black box behind the rounded control bar. */
.video-js.tbook-audio-player { background: transparent !important; }
.video-js.tbook-audio-player .vjs-poster { display: none !important; }
/* Audio player: no drop shadow anywhere (seamless bar). */
.video-js.tbook-audio-player,
.video-js.tbook-audio-player .vjs-control-bar,
.video-js.tbook-audio-player .vjs-volume-panel,
.video-js.tbook-audio-player .vjs-progress-control,
.video-js.tbook-audio-player .vjs-big-play-button {
	box-shadow: none !important;
	-webkit-box-shadow: none !important;
	filter: none !important;
}
.video-js.tbook-audio-player * { box-shadow: none !important; -webkit-box-shadow: none !important; }
.video-js.tbook-audio-player .vjs-control-bar { background-image: none !important; }
/* Video player: match the audio look — no drop shadow; transparent frame. */
.video-js.tbook-video,
.video-js.tbook-video .vjs-control-bar { box-shadow: none !important; -webkit-box-shadow: none !important; }
.video-js.tbook-video { background: transparent !important; display: block !important; }

/* ---- Audio playlist (videojs-playlist + playlist-ui) ---- */
.tbook-audio-playlist { max-width: 640px; margin: 10px auto; }
.tbook-audio-playlist .vjs-playlist {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	background: transparent;
	box-shadow: none;
	font-size: 14px;
}
.tbook-audio-playlist .vjs-playlist-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 10px;
	border-radius: 8px;
	cursor: pointer;
}
.tbook-audio-playlist .vjs-playlist-item:hover { background: rgba(0,0,0,.06); }
.tbook-audio-playlist .vjs-playlist-item.vjs-selected { background: var(--tb-progress, #2271b1); color: #fff; }
.tbook-audio-playlist .vjs-playlist-name { flex: 1; }
.tbook-audio-playlist .vjs-playlist-duration { opacity: .7; font-variant-numeric: tabular-nums; }

/* Playlist UI: clean list matching the skin (override the default dark cards). */
.vjs-playlist {
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 6px 0 0 !important;
}
.vjs-playlist .vjs-playlist-item,
.vjs-playlist .vjs-playlist-item.vjs-selected {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	color: inherit !important;
}
.vjs-playlist .vjs-playlist-item {
	display: flex !important;
	align-items: center;
	padding: 7px 10px !important;
	border-radius: 8px !important;
	margin: 0 0 2px !important;
	cursor: pointer;
}
.vjs-playlist .vjs-playlist-item:hover { background: rgba(0,0,0,.06) !important; }
.vjs-playlist .vjs-playlist-item.vjs-selected { background: var(--tb-accent, #2271b1) !important; color: #fff !important; }
.vjs-playlist .vjs-playlist-name { flex: 1; padding: 0 !important; font-size: 14px; }
.vjs-playlist .vjs-playlist-duration { opacity: .7; }
.vjs-playlist .vjs-playlist-item::before,
.vjs-playlist .vjs-playlist-item::after { content: none !important; }
.vjs-playlist .vjs-playlist-thumbnail { display: none !important; }

/* Our own audio track list (no playlist-ui). */
.tbook-track-list { list-style: none; margin: 6px 0 0; padding: 0; }
.tbook-track { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.tbook-track::before { content: "\25B6"; font-size: 11px; opacity: .55; }
.tbook-track:hover { background: rgba(0,0,0,.06); }
.tbook-track.is-active { background: var(--tb-accent, #2271b1); color: #fff; }
.tbook-track.is-active::before { content: "\275A\275A"; opacity: 1; }

/* Track list: a card matching the player (bar colour/opacity + accent). */
.tbook-audio-playlist .tbook-track-list {
	background: var(--tb-pl-bg, rgba(18,18,22,.66));
	border-radius: 10px;
	padding: 6px;
	margin: 8px 10px 0;
}
.tbook-audio-playlist .tbook-track { color: var(--tb-pl-text, #fff); }
.tbook-audio-playlist .tbook-track:hover { background: rgba(255,255,255,.10); }
.tbook-audio-playlist .tbook-track.is-active { background: var(--tb-pl-active, #2271b1); color: var(--tb-pl-active-text, #fff); }
.tbook-audio-playlist .tbook-track { justify-content: space-between; }
.tbook-audio-playlist .tbook-track-name { flex: 1; }
.tbook-audio-playlist .tbook-track-dur { opacity: .7; font-variant-numeric: tabular-nums; padding-left: 10px; }

/* Audio visualizer: a band above the control bar (audio-only). */
.video-js.tbook-audio-player { position: relative; }
.video-js.tbook-audio-player .tbook-visualizer {
	position: absolute;
	left: 10px;
	right: 10px;
	top: 0;
	width: calc(100% - 20px);
	height: 52px;
	z-index: 1;
	pointer-events: none;
}

/* ---- Video playlist (multiple videos combined in one entry) ---- */
.tbook-video-playlist { max-width: 640px; margin: 10px auto; }
.tbook-video-playlist .tbook-track-list {
	background: var(--tb-pl-bg, rgba(18,18,22,.66));
	border-radius: 10px;
	padding: 6px;
	margin: 8px 10px 0;
}
.tbook-video-playlist .tbook-track { color: var(--tb-pl-text, #fff); justify-content: space-between; }
.tbook-video-playlist .tbook-track:hover { background: rgba(255,255,255,.10); }
.tbook-video-playlist .tbook-track.is-active { background: var(--tb-pl-active, #2271b1); color: var(--tb-pl-active-text, #fff); }
.tbook-video-playlist .tbook-track-name { flex: 1; }
.tbook-video-playlist .tbook-track-dur { opacity: .7; font-variant-numeric: tabular-nums; padding-left: 10px; }

/* Previous / Next track buttons (playlist players). */
.video-js .tbook-prevnext .vjs-icon-placeholder::before { line-height: 44px; font-size: 16px; }
/* Audio player: one icon line-height for every control so the play, prev/next
 * and mute glyphs sit on the same baseline (the play triangle was 2px high). */
.video-js.tbook-audio-player .vjs-control-bar .vjs-button > .vjs-icon-placeholder::before { line-height: 48px; }

/* Keep entry player controls visible; they only auto-hide in fullscreen. */
.video-js.tbook-video:not(.vjs-fullscreen) .vjs-control-bar,
.video-js.tbook-audio-player:not(.vjs-fullscreen) .vjs-control-bar {
	display: flex !important;
	opacity: 1 !important;
	visibility: visible !important;
	pointer-events: auto !important;
	transition: none !important;
}

/* ---- Never let the control bar (or its contents) exceed the player ---- */
.video-js .vjs-control-bar {
	box-sizing: border-box;
	max-width: calc(100% - 20px);
	overflow: visible;
}
/* Let the hover time tooltip show outside the bar/progress. */
.video-js .vjs-progress-control,
.video-js .vjs-progress-holder,
.video-js .vjs-progress-holder .vjs-mouse-display,
.video-js .vjs-progress-control .vjs-time-tooltip { overflow: visible !important; }
.video-js .vjs-progress-control { min-width: 0 !important; }
.video-js .vjs-control-bar .vjs-button,
.video-js .vjs-volume-panel.vjs-control { flex: 0 0 auto; }

/* Narrow players: keep every control but compact it (never hide it). */
.video-js.tbook-video,
.video-js.tbook-audio-player { container-type: inline-size; }
@container (max-width: 420px) {
	.video-js .vjs-control-bar .vjs-button { width: 25px; min-width: 25px; }
	.video-js .vjs-control-bar { padding: 0 2px; }
	.video-js .vjs-control-bar .vjs-button > .vjs-icon-placeholder::before { font-size: 13px; }
	.video-js .vjs-volume-panel.vjs-volume-panel-horizontal .vjs-volume-control { width: 30px !important; margin-left: 2px; }
	.video-js .vjs-volume-panel .vjs-volume-bar { width: 26px; }
	.video-js .vjs-duration { font-size: 10px; padding: 0 2px; }
	.video-js .tbook-time-overlay { font-size: 10px; }
}
/* Lightbox / media-modal video player only: centre the control icons (Video.js
 * offsets them in the modal). Scoped so the entry video/audio players are
 * untouched. */
.tbook-media-player .video-js .vjs-control-bar .vjs-button > .vjs-icon-placeholder {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	width: 100% !important;
	height: 100% !important;
	line-height: 44px !important;
}