/* Timer Pro themed video player controls (assets/js/tp-player.js): the browser's own bar is replaced
   by a Cremarc one - Track Black bar over the picture, Electric Blue progress, Volt Yellow focus
   and handle, square buttons, Plex Mono time. It fades while the video plays. ----- */
.vlp-box video { display: block; max-width: 100%; cursor: pointer; }
.vlp-box.is-full video { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.vlp-box { position: relative; display: flex; max-width: 100%; max-height: 100%; background: #000; overflow: hidden; }
.vlp-box.is-full { width: 100vw; height: 100vh; max-height: none; align-items: center; justify-content: center; }
.vlp-box video::cue { background: rgba(10, 10, 10, .82); color: #F7F7F2; font-family: Archivo, 'Segoe UI', sans-serif; font-size: 20px; line-height: 1.4; }
@media (max-width: 600px) { .vlp-box video::cue { font-size: 15px; } }

.vlp-big { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; display: grid; place-items: center;
	border: 0; background: var(--tp-yellow); color: var(--tp-black); cursor: pointer; opacity: 0; transform: scale(.9); pointer-events: none;
	transition: opacity .2s ease, transform .2s ease; }
.vlp-big svg { width: 34px; height: 34px; }
.vlp.is-paused .vlp-big { opacity: 1; transform: none; pointer-events: auto; }
.vlp-big:hover, .vlp-big:focus-visible { background: var(--tp-white); }
.vlp.is-loading::after { content: ''; position: absolute; left: 50%; top: 50%; width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--tp-yellow); animation: tpPlayerPulse 1s ease-in-out infinite; pointer-events: none; }

.vlp-bar { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 10px; color: var(--tp-white);
	background: linear-gradient(to top, rgba(10, 10, 10, .92) 0%, rgba(10, 10, 10, .65) 60%, rgba(10, 10, 10, 0) 100%);
	transition: opacity .25s ease, transform .25s ease; }
.vlp.is-idle .vlp-bar { opacity: 0; transform: translateY(8px); pointer-events: none; }
.vlp.is-idle, .vlp.is-idle .vl-video { cursor: none; }

/* Seek bar: track, what is loaded, what is played, the square handle, and a time tip on hover. */
.vlp-seek { position: relative; height: 18px; margin: 0 2px 6px; cursor: pointer; touch-action: none; outline: none; }
.vlp-seek::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; background: rgba(247, 247, 242, .25); transition: height .15s ease, top .15s ease; }
.vlp-buf, .vlp-fill { position: absolute; left: 0; top: 7px; height: 4px; width: 0; transition: height .15s ease, top .15s ease; }
.vlp-buf { background: rgba(247, 247, 242, .45); }
.vlp-fill { background: var(--tp-blue); }
.vlp-knob { position: absolute; top: 3px; width: 12px; height: 12px; margin-left: -6px; background: var(--tp-yellow); transform: scale(0); transition: transform .15s ease; }
.vlp-seek:hover::before, .vlp-seek:hover .vlp-buf, .vlp-seek:hover .vlp-fill, .vlp.is-seeking .vlp-seek::before, .vlp.is-seeking .vlp-buf, .vlp.is-seeking .vlp-fill { top: 6px; height: 6px; }
.vlp-seek:hover .vlp-knob, .vlp-seek:focus-visible .vlp-knob, .vlp.is-seeking .vlp-knob { transform: scale(1); }
.vlp-seek:focus-visible::before { outline: 2px solid var(--tp-yellow); outline-offset: 3px; }
.vlp-tip { position: absolute; bottom: 22px; transform: translateX(-50%); padding: 3px 6px; background: var(--tp-black); color: var(--tp-white); border: 1px solid var(--tp-yellow);
	font-family: var(--tp-mono); font-size: .75rem; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.vlp-seek:hover .vlp-tip { opacity: 1; }

.vlp-row { display: flex; align-items: center; gap: 4px; }
.vlp-gap { flex: 1; }
.vlp-btn { display: inline-grid; place-items: center; min-width: 38px; height: 38px; padding: 0 6px; border: 0; background: transparent; color: var(--tp-white); cursor: pointer;
	font-family: var(--tp-mono); font-size: .8125rem; transition: background-color .15s ease, color .15s ease; }
.vlp-btn svg { width: 22px; height: 22px; }
.vlp-btn:hover, .vlp-btn:focus-visible, .vlp-btn.is-on, .vlp-btn[aria-expanded="true"] { background: var(--tp-yellow); color: var(--tp-black); }
.vlp-btn:focus-visible, .vlp-big:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 1px; }
.vlp-time { margin: 0 8px; font-family: var(--tp-mono); font-size: .8125rem; letter-spacing: .02em; white-space: nowrap; color: var(--tp-white); }
.vlp-dur { color: rgba(247, 247, 242, .7); }

/* Volume: a thin square slider, blue up to the level, yellow handle. */
.vlp-vol { -webkit-appearance: none; appearance: none; width: 78px; height: 18px; margin: 0 8px 0 2px; background: transparent; cursor: pointer; --v: 100%; }
.vlp-vol::-webkit-slider-runnable-track { height: 4px; background: linear-gradient(to right, var(--tp-blue) var(--v), rgba(247, 247, 242, .3) var(--v)); }
.vlp-vol::-moz-range-track { height: 4px; background: rgba(247, 247, 242, .3); }
.vlp-vol::-moz-range-progress { height: 4px; background: var(--tp-blue); }
.vlp-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; margin-top: -4px; border: 0; border-radius: 0; background: var(--tp-yellow); }
.vlp-vol::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 0; background: var(--tp-yellow); }
.vlp-vol:focus-visible { outline: 3px solid var(--tp-focus); outline-offset: 2px; }

.vlp-speedwrap { position: relative; }
.vlp-menu { position: absolute; right: 0; bottom: 44px; min-width: 92px; padding: 4px 0; background: var(--tp-black); border: 1px solid var(--tp-yellow); }
.vlp-opt { display: block; width: 100%; padding: 7px 14px; border: 0; background: transparent; color: var(--tp-white); text-align: left; font-family: var(--tp-mono); font-size: .8125rem; cursor: pointer; }
.vlp-opt:hover, .vlp-opt:focus-visible { background: var(--tp-yellow); color: var(--tp-black); outline: none; }
.vlp-opt.is-on { color: var(--tp-yellow); }
.vlp-opt.is-on:hover, .vlp-opt.is-on:focus-visible { color: var(--tp-black); }

@media (max-width: 600px) {
	.vlp-bar { padding: 22px 6px 6px; }
	.vlp-vol, .vlp-back, .vlp-fwd { display: none; }
	.vlp-btn { min-width: 34px; height: 34px; }
	.vlp-time { margin: 0 4px; font-size: .75rem; }
	.vlp-big { width: 62px; height: 62px; margin: -31px 0 0 -31px; }
}
@media (prefers-reduced-motion: reduce) {
	.vlp-bar, .vlp-big, .vlp-knob, .vlp-seek::before, .vlp-buf, .vlp-fill { transition: none; }
	.vlp.is-loading::after { animation: none; }
}
.vlp-skip { font-family: var(--tp-mono); font-size: .8125rem; letter-spacing: .02em; }
.vlp-skip { font-family: var(--tp-mono); font-size: .8125rem; letter-spacing: .02em; }
@keyframes tpPlayerPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .3; transform: scale(.7); } }