/* ========================================================================
   Toothority Custom Video Player — Muvi
   Ported from the Muvi Dental Videos WordPress plugin (v3.0.0)
   ======================================================================== */

:root {
	--muvi-teal: #19bad1;
	--muvi-magenta: #d721b4;
	--muvi-controls-height: 48px;
	--muvi-icon-size: 22px;
	--muvi-transition: 0.25s ease;
}

/* ─── Player Container ────────────────────────────────────────────── */
.muvi-container {
	position: relative;
	display: block;
	width: 100%;
	max-width: 100%;
	line-height: 0;
	background: #000;
	overflow: hidden;
	border-radius: 12px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.muvi-container video.muvi-player {
	display: block;
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	cursor: pointer;
}

/* Style native cue rendering for captions */
.muvi-container video::cue {
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	font-size: 16px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

/* ─── Control Bar ─────────────────────────────────────────────────── */
.muvi-controls {
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	inset-inline-end: 0;
	height: var(--muvi-controls-height);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 12px;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
	z-index: 10;
	opacity: 1;
	transition: opacity var(--muvi-transition), transform var(--muvi-transition);
	transform: translateY(0);
	user-select: none;
}

.muvi-container--controls-hidden .muvi-controls {
	opacity: 0;
	transform: translateY(100%);
	pointer-events: none;
	visibility: hidden;
}

/* In initial state, controls are behind overlay — hide from keyboard */
.muvi-container--initial .muvi-controls {
	visibility: hidden;
}

.muvi-container--paused .muvi-controls,
.muvi-container--ended .muvi-controls {
	opacity: 1 !important;
	transform: translateY(0) !important;
	pointer-events: auto !important;
	visibility: visible !important;
}

/* ─── Control Buttons (shared) ────────────────────────────────────── */
.muvi-btn {
	appearance: none;
	background: none;
	border: none;
	padding: 6px;
	margin: 0;
	cursor: pointer;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	min-height: 36px;
	border-radius: 4px;
	transition: background 0.15s;
	flex-shrink: 0;
}

.muvi-btn:hover {
	background: rgba(255, 255, 255, 0.15);
}

.muvi-btn:focus-visible {
	outline: 2px solid var(--muvi-teal);
	outline-offset: 2px;
}

.muvi-btn svg {
	width: var(--muvi-icon-size);
	height: var(--muvi-icon-size);
	fill: currentColor;
}

.muvi-captions-btn--active {
	color: var(--muvi-teal);
}

/* ─── Progress Bar ────────────────────────────────────────────────── */
.muvi-progress-group {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

.muvi-progress-bar {
	flex: 1;
	height: 4px;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 2px;
	position: relative;
	cursor: pointer;
	transition: height 0.15s;
}

.muvi-progress-bar:hover,
.muvi-progress-bar--seeking {
	height: 8px;
}

.muvi-progress-buffer {
	position: absolute;
	top: 0;
	/* PHYSICAL ON PURPOSE: scrub track. muvi-player.js derives time from
	   (clientX - rect.left) / rect.width and writes the fill back physically.
	   See the RTL note at the foot of this file. */
	left: 0;
	height: 100%;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
	pointer-events: none;
}

.muvi-progress-played {
	position: absolute;
	top: 0;
	/* PHYSICAL ON PURPOSE: scrub track, as .muvi-progress-buffer. */
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, var(--muvi-teal), var(--muvi-magenta));
	border-radius: 2px;
	pointer-events: none;
}

.muvi-progress-handle {
	position: absolute;
	top: 50%;
	width: 14px;
	height: 14px;
	background: var(--muvi-magenta);
	border: 2px solid #fff;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.15s;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}

.muvi-progress-bar:hover .muvi-progress-handle,
.muvi-progress-bar--seeking .muvi-progress-handle {
	opacity: 1;
}

/* ─── Time Display ────────────────────────────────────────────────── */
.muvi-time-display {
	color: rgba(255, 255, 255, 0.85);
	font-size: 12px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	white-space: nowrap;
	flex-shrink: 0;
	min-width: 80px;
	font-variant-numeric: tabular-nums;
}

/* ─── Volume ──────────────────────────────────────────────────────── */
.muvi-volume-group {
	display: flex;
	align-items: center;
}

.muvi-volume-slider-wrap {
	display: flex;
	align-items: center;
	width: 0;
	overflow: hidden;
	visibility: hidden;
	transition: width 0.2s ease, visibility 0.2s ease;
}

.muvi-volume-group:hover .muvi-volume-slider-wrap,
.muvi-volume-group:focus-within .muvi-volume-slider-wrap {
	width: 80px;
	visibility: visible;
}

.muvi-volume-slider {
	-webkit-appearance: none;
	appearance: none;
	width: 70px;
	height: 4px;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 2px;
	outline: none;
	margin: 0 5px;
}

.muvi-volume-slider:focus-visible {
	outline: none;
	background: var(--muvi-teal);
}

.muvi-volume-slider::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
	cursor: pointer;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}

.muvi-volume-slider::-moz-range-thumb {
	width: 12px;
	height: 12px;
	background: #fff;
	border-radius: 50%;
	cursor: pointer;
	border: none;
}

@media (pointer: coarse) {
	.muvi-volume-slider-wrap {
		display: none !important;
	}
}

/* ─── Kebab Menu ──────────────────────────────────────────────────── */
.muvi-menu-btn {
	min-width: 20px;
	padding: 6px 2px;
}

.muvi-menu-wrap {
	position: relative;
}

.muvi-menu {
	position: absolute;
	bottom: 100%;
	inset-inline-end: 0;
	margin-bottom: 8px;
	background: rgba(20, 20, 20, 0.95);
	border-radius: 6px;
	min-width: 200px;
	padding: 6px 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
	z-index: 30;
}

.muvi-menu--open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transform: translateY(0);
}

.muvi-menu__item {
	display: block;
	width: 100%;
	padding: 8px 16px;
	font-size: 13px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	line-height: 1.4;
	white-space: nowrap;
	border: none;
	background: none;
	text-align: start;
}

.muvi-menu__item--link,
.muvi-menu__item--link:visited {
	color: #fff !important;
	text-decoration: none;
	cursor: pointer;
}

.muvi-menu__item--link:hover {
	background: rgba(255, 255, 255, 0.1);
	color: var(--muvi-teal) !important;
}

.muvi-menu__item--info {
	color: rgba(255, 255, 255, 0.45);
	cursor: default;
	font-size: 11px;
}

/* ─── Custom Context Menu ─────────────────────────────────────────── */
.muvi-context-menu {
	position: absolute;
	background: rgba(20, 20, 20, 0.95);
	border-radius: 6px;
	min-width: 200px;
	padding: 6px 0;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transform: translateY(4px);
	transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
	z-index: 40;
}

.muvi-context-menu--open {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
	transform: translateY(0);
}

/* ─── Overlays ────────────────────────────────────────────────────── */
.muvi-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	z-index: 20;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity var(--muvi-transition), visibility var(--muvi-transition);
}

.muvi-overlay--visible {
	opacity: 1;
	pointer-events: auto;
	visibility: visible;
}

.muvi-overlay:focus-visible {
	outline: none;
}

.muvi-overlay:focus-visible .muvi-overlay__icon {
	outline: 3px solid #fff;
	outline-offset: 4px;
}

.muvi-overlay__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	color: #fff;
}

.muvi-overlay__text {
	color: #fff;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 500;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Initial play overlay */
.muvi-overlay--initial {
	background: rgba(0, 0, 0, 0.35);
}

.muvi-overlay--initial .muvi-overlay__icon {
	width: 80px;
	height: 80px;
	background: rgba(0, 0, 0, 0.5);
	border: 2px solid #fff;
	margin-bottom: 16px;
	transition: transform 0.2s;
}

.muvi-overlay--initial:hover .muvi-overlay__icon {
	transform: scale(1.08);
}

.muvi-overlay--initial .muvi-overlay__icon svg {
	width: 36px;
	height: 36px;
	/* PHYSICAL ON PURPOSE: optical centring for the play triangle.
	   A play button is never mirrored, so its nudge must not mirror. */
	margin-left: -2px;
}

.muvi-overlay--initial .muvi-overlay__text {
	font-size: 15px;
}

/* Paused overlay */
.muvi-overlay--paused {
	background: rgba(0, 0, 0, 0.3);
}

.muvi-overlay--paused .muvi-overlay__icon {
	width: 64px;
	height: 64px;
	background: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.muvi-overlay--paused .muvi-overlay__icon svg {
	width: 28px;
	height: 28px;
	/* PHYSICAL ON PURPOSE: optical centring for the play triangle. */
	margin-left: 2px;
}

/* Ended / replay overlay */
.muvi-overlay--ended {
	background: rgba(0, 0, 0, 0.55);
}

.muvi-overlay--ended .muvi-overlay__icon {
	width: 64px;
	height: 64px;
	background: rgba(0, 0, 0, 0.5);
	border: 2px solid #fff;
	margin-bottom: 12px;
}

.muvi-overlay--ended .muvi-overlay__icon svg {
	width: 28px;
	height: 28px;
}

.muvi-overlay--ended .muvi-overlay__text {
	font-size: 14px;
}

/* Unauthorized overlay */
.muvi-overlay--unauthorized {
	background: rgba(0, 0, 0, 0.55);
	cursor: default;
}

.muvi-overlay--unauthorized .muvi-overlay__icon {
	width: 80px;
	height: 80px;
	background: rgba(245, 166, 35, 0.9);
	border: 2px solid #f5a623;
}

.muvi-overlay--unauthorized .muvi-overlay__icon svg {
	width: 40px;
	height: 40px;
}

/* ─── Fullscreen ──────────────────────────────────────────────────── */
.muvi-container:fullscreen,
.muvi-container:-webkit-full-screen {
	background: #000;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 0;
}

.muvi-container:fullscreen video,
.muvi-container:-webkit-full-screen video {
	max-height: 100vh;
	width: auto;
	max-width: 100%;
}

/* ─── Responsive ──────────────────────────────────────────────────── */

/* Enable container queries on the player */
.muvi-container {
	container-type: inline-size;
}

/* Small players (chatbot widget, narrow columns) */
@container (max-width: 400px) {
	.muvi-menu-wrap {
		display: none;
	}

	.muvi-controls {
		gap: 4px;
		padding: 0 8px;
	}

	.muvi-time-display {
		font-size: 11px;
		min-width: 65px;
	}
}

@media (max-width: 480px) {
	.muvi-controls {
		gap: 4px;
		padding: 0 8px;
	}

	.muvi-time-display {
		font-size: 11px;
		min-width: 65px;
	}
}

/* ─── Reduced Motion ──────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.muvi-controls,
	.muvi-overlay,
	.muvi-progress-bar,
	.muvi-progress-handle,
	.muvi-overlay__icon {
		transition: none;
	}
}


/* ========================================================================
   RIGHT-TO-LEFT (RTL)
   ========================================================================
   The control bar itself is a flex row and mirrors on its own, and the
   settings menu is now anchored with inset-inline-end so it follows the
   gear button across.

   DELIBERATELY LEFT PHYSICAL, and not overridden here:

   .muvi-progress-buffer / .muvi-progress-played  (left: 0 + width: n%)
   .muvi-progress-handle                          (left set inline, in px)
     The scrub bar is driven from muvi-player.js, which converts a pointer
     position to a time with (clientX - rect.left) / rect.width and writes
     the fill back as a physical width and a physical left. Mirroring the
     CSS without mirroring that arithmetic would inverse every seek. The
     player JS is outside this workstream's file ownership, so the whole
     track stays physical and consistent with itself. The 90deg fill
     gradient belongs to the same decision.

   .muvi-overlay__icon svg  (margin-left: -2px / 2px)
     Optical centring for the play triangle. A play button is never
     mirrored, so the nudge that centres it must not mirror either.
   ======================================================================== */

/* Elapsed / total time is a run of digits around a neutral separator, which
   the bidi algorithm would otherwise reorder into "3:15 / 0:42". */
[dir="rtl"] .muvi-time-display {
  direction: ltr;
  unicode-bidi: isolate;
}