/**
 * Nahnu Video, the Nahnu Player (Plyr + hls.js) wrapper.
 * Enqueued only when a Nahnu Player is on the page, alongside
 * assets/vendor/plyr/plyr.css.
 *
 * Brand colors: the variables below are Plyr's own theming hooks.
 * Nahnu_Video_Render::local_player_inline_css() writes the site's
 * Settings → Player Branding values into them, scoped to
 * .nahnu-local-player, so they never leak into another Plyr instance a
 * theme or other plugin might have on the same page.
 */
.nahnu-local-player {
	--plyr-color-main: var(--nahnu-player-key-color, #4a7c3f);
	--plyr-video-control-color: var(--nahnu-player-control-color, #ffffff);
	--plyr-video-control-color-hover: var(--nahnu-player-control-color-hover, #ffffff);
	--plyr-captions-text-color: var(--nahnu-player-captions-text, #ffffff);
	--plyr-captions-background: var(--nahnu-player-captions-background, rgba(0, 0, 0, 0.8));
	--plyr-video-background: #000;
	--plyr-control-radius: 6px;
	--plyr-menu-radius: 8px;
	background: #000;
	overflow: hidden;
	border-radius: inherit;
}

/* The wrapper already owns the 16:9 box (inline aspect-ratio), so Plyr
   fills it instead of adding its own height. */
.nahnu-local-player .plyr {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: inherit;
}
.nahnu-local-player .plyr__video-wrapper,
.nahnu-local-player video {
	width: 100%;
	height: 100%;
}
.nahnu-local-player video {
	object-fit: contain;
	background: #000;
}

/* Before Plyr has taken over (or without JavaScript), the plain
   <video> with native controls fills the same box. */
.nahnu-local-player > video {
	position: absolute;
	inset: 0;
}

/* A stream that could not be started: keep the poster, show a hint. */
.nahnu-local-player.has-error::after {
	content: attr(data-error-text);
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	padding: 8px 12px;
	background: rgba(0, 0, 0, 0.75);
	color: #fff;
	font-size: 13px;
	text-align: center;
	z-index: 2;
}

/* Label/note badges still sit above the player, same as the iframe. */
.nahnu-local-player .nahnu-video-label,
.nahnu-local-player .nahnu-video-note {
	z-index: 4;
}

/* Hover-preview card that opens the Nahnu Player on click: its play
   button matches Plyr's own big play button (brand key color, same
   icon and size), so a single video and a playlist look the same. */
.nahnu-local-player-card .nahnu-video-hover-play {
	width: auto;
	height: auto;
	padding: 15px;
	border-radius: 100%;
	background: var(--nahnu-player-key-color, #4a7c3f);
	color: var(--nahnu-player-control-color, #fff);
	opacity: 0.9;
	transition: opacity 0.3s ease, transform 0.15s ease;
}
.nahnu-local-player-card .nahnu-video-hover-play svg {
	display: block;
	position: relative;
	left: 2px;
}
.nahnu-video-wrap.nahnu-local-player-card:hover .nahnu-video-hover-play {
	background: var(--nahnu-player-key-color, #4a7c3f);
	opacity: 1;
	transform: translate(-50%, -50%);
}

/* ===== Chromecast ===== */

/* Connected to a Cast device: the button shows in the brand color. */
.nahnu-local-player .nahnu-cast-btn.is-connected {
	color: var(--plyr-color-main);
}

/* While casting: the page shows who's playing and simple remote
   controls; the local video stays paused underneath. */
.nahnu-cast-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 16px;
	background: rgba(0, 0, 0, 0.78);
	color: #fff;
	font-size: 15px;
	text-align: center;
}
.nahnu-cast-overlay-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
}
.nahnu-cast-overlay-label svg {
	width: 22px;
	height: 22px;
	color: var(--plyr-color-main);
}
.nahnu-cast-overlay-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.nahnu-cast-overlay-actions button {
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 13px;
	cursor: pointer;
}
.nahnu-cast-overlay-actions .nahnu-cast-playpause {
	border-color: var(--plyr-color-main);
	background: var(--plyr-color-main);
}
.nahnu-cast-overlay-actions button:hover,
.nahnu-cast-overlay-actions button:focus-visible {
	border-color: #fff;
	outline: none;
}
.nahnu-cast-overlay.is-error {
	inset: auto 0 0 0;
	justify-content: flex-end;
	padding: 10px 14px;
	font-size: 13px;
	background: rgba(120, 20, 20, 0.88);
}

/* ===== Starting after a click (see setStarting() in local-player.js) =====
   The visitor already pressed play, so the player's own big play button
   is hidden and a spinner in the brand color shows until it plays. */
.nahnu-local-player.is-starting .plyr__control--overlaid {
	opacity: 0 !important;
	visibility: hidden !important;
}
.nahnu-local-player.is-starting::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid rgba(255, 255, 255, 0.35);
	border-top-color: var(--nahnu-player-key-color, #4a7c3f);
	border-radius: 50%;
	animation: nahnu-player-spin 0.8s linear infinite;
	z-index: 6;
	pointer-events: none;
}
@keyframes nahnu-player-spin {
	to {
		transform: rotate(360deg);
	}
}
@media (prefers-reduced-motion: reduce) {
	.nahnu-local-player.is-starting::before {
		animation-duration: 2.4s;
	}
}