/**
 * MediaShield Player Styles
 *
 * Tokens are scoped to .ms-protected-player so the frontend overlay shares the
 * same spacing / font-size / radius / color vocabulary as the admin SPA (see
 * src/admin/admin.css :root block) — required by wp-plugin-development
 * Part 7.6.1 (BLOCK gate F9, same-family rule).
 */

/* Protected player container */
.ms-protected-player {
	/* Spacing scale */
	--ms-space-1: 4px;
	--ms-space-2: 8px;
	--ms-space-3: 12px;
	--ms-space-4: 16px;
	--ms-space-5: 20px;
	--ms-space-6: 24px;
	--ms-space-8: 32px;

	/* Typography scale (subset — frontend overlay only needs label sizes) */
	--ms-font-size-xs: 0.625rem;
	--ms-font-size-sm: 0.75rem;
	--ms-font-size-base: 0.875rem;
	--ms-font-size-md: 1rem;
	--ms-font-size-lg: 1.125rem;

	/* Radius */
	--ms-radius-sm: 3px;
	--ms-radius-md: 6px;
	--ms-radius-lg: 12px;

	/* Surfaces — semi-transparent overlay panels are intentional design
	 * primitives here, not arbitrary colours. */
	--ms-overlay-surface: rgba(0, 0, 0, 0.6);
	--ms-overlay-surface-strong: rgba(0, 0, 0, 0.85);
	--ms-overlay-surface-soft: rgba(0, 0, 0, 0.5);
	--ms-overlay-text: rgba(255, 255, 255, 0.6);

	/* Accent — bridges to the active theme's primary colour (theme.json),
	 * falling back to the WP admin blue so buttons/links/focus match the site. */
	--ms-accent: var(--wp--preset--color--primary, var(--ms-accent));
	--ms-accent-hover: #135e96; /* hex fallback before color-mix() */
	--ms-accent-hover: color-mix(in srgb, var(--ms-accent) 82%, #000);

	/* Fixed control colours — player chrome sits on dark video, so white text
	 * and the letterbox black are intentional constants, not theme-driven. */
	--ms-on-overlay: #ffffff;
	--ms-on-overlay-muted: #aaaaaa;
	--ms-player-bg: #000000;
	--ms-danger: #d63638;

	/* Minimum touch target for primary controls (Rule 13). */
	--ms-tap-min: 40px;

	position: relative;
	overflow: hidden;
	background: var(--ms-player-bg);
	line-height: 0;
}

/* Player target — JS adapters create player inside this div */
.ms-player-target {
	position: relative;
	width: 100%;
	z-index: 1;
	aspect-ratio: 16 / 9;
	background: var(--ms-player-bg);
}

.ms-player-target iframe,
.ms-player-target video {
	width: 100%;
	height: 100%;
	display: block;
	border: none;
}

/* Legacy .ms-player-inner for backward compat */
.ms-player-inner {
	position: relative;
	width: 100%;
	z-index: 1;
}

.ms-player-inner iframe,
.ms-player-inner video {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	display: block;
}

/* Watermark canvas overlay */
.ms-watermark-canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 10;
	pointer-events: none;
}

/* Protection overlay (click-through but blocks dev tools inspection) */
.ms-protection-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
	pointer-events: none;
}

/* Generic error overlay — concurrent-stream limit, access denied, etc. */
.ms-error-overlay {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--ms-overlay-surface-strong);
}

.ms-error-message {
	text-align: center;
	color: var(--ms-on-overlay);
	line-height: 1.6;
	padding: var(--ms-space-8);
	max-width: 32rem;
}

.ms-error-message p {
	font-size: var(--ms-font-size-lg);
	margin: 0;
}

/* Login overlay */
.ms-login-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.85);
}

.ms-login-message {
	text-align: center;
	color: var(--ms-on-overlay);
	line-height: 1.6;
	padding: 2rem;
}

.ms-login-message p {
	font-size: 1.125rem;
	margin: 0 0 1rem;
}

.ms-login-button {
	display: inline-block;
	padding: 0.75rem 2rem;
	background: var(--ms-accent);
	color: #fff !important;
	text-decoration: none;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 600;
	transition: background 0.2s;
}

.ms-login-button:hover {
	background: var(--ms-accent-hover);
}

/* Resume toast */
.ms-resume-toast {
	position: absolute;
	bottom: 60px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 25;
	background: rgba(0, 0, 0, 0.9);
	color: var(--ms-on-overlay);
	padding: 0.75rem 1.25rem;
	border-radius: 8px;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
	line-height: 1.4;
	white-space: nowrap;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.ms-resume-toast span {
	color: var(--ms-on-overlay);
}

.ms-resume-yes,
.ms-resume-no {
	border: none;
	padding: 0.375rem 0.75rem;
	border-radius: 4px;
	cursor: pointer;
	font-size: 0.8125rem;
	font-weight: 600;
}

.ms-resume-yes {
	background: var(--ms-accent);
	color: var(--ms-on-overlay);
}

.ms-resume-yes:hover {
	background: var(--ms-accent-hover);
}

.ms-resume-no {
	background: transparent;
	color: var(--ms-on-overlay-muted);
	text-decoration: underline;
}

.ms-resume-no:hover {
	color: var(--ms-on-overlay);
}

/* Protected by MediaShield badge — moved to top-left so it doesn't sit on
 * top of the native <video> controls bar on self-hosted players (the bottom
 * row is reserved for play/seek/volume/fullscreen). */
.ms-badge {
	position: absolute;
	top: var(--ms-space-3);
	left: var(--ms-space-3);
	z-index: 15;
	background: var(--ms-overlay-surface-soft);
	color: var(--ms-overlay-text);
	font-size: var(--ms-font-size-xs);
	padding: var(--ms-space-1) var(--ms-space-2);
	border-radius: var(--ms-radius-sm);
	pointer-events: none;
	line-height: 1.4;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Custom fullscreen button (keeps watermark visible in fullscreen) */
.ms-fullscreen-btn {
	position: absolute;
	bottom: 10px;
	right: 10px;
	z-index: 15;
	background: var(--ms-overlay-surface);
	border: none;
	color: var(--ms-on-overlay);
	width: var(--ms-tap-min);
	height: var(--ms-tap-min);
	border-radius: var(--ms-radius-sm);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s;
}

.ms-fullscreen-btn:hover {
	background: rgba(0, 0, 0, 0.8);
}

/* Base Lucide icon — sizing comes from the SVG width/height attributes. */
.ms-icon {
	display: inline-block;
	vertical-align: middle;
	flex-shrink: 0;
}

.ms-fullscreen-btn .ms-icon {
	display: block;
}

.ms-playlist-item-thumb-placeholder {
	opacity: 0.5;
}

/* Fullscreen mode — container fills viewport, watermark stays on top */
.ms-protected-player:fullscreen {
	width: 100vw;
	height: 100vh;
	background: var(--ms-player-bg);
}

.ms-protected-player:fullscreen .ms-player-target {
	width: 100%;
	height: 100%;
	aspect-ratio: unset;
}

.ms-protected-player:fullscreen .ms-player-target iframe,
.ms-protected-player:fullscreen .ms-player-target video {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.ms-protected-player:fullscreen .ms-watermark-canvas {
	width: 100%;
	height: 100%;
}

.ms-protected-player:fullscreen .ms-fullscreen-btn {
	bottom: 20px;
	right: 20px;
}

/* Speed control (native video only) — sits in the top-right corner so it
 * doesn't collide with the native browser controls bar (play/seek/volume/
 * fullscreen) running along the bottom edge. */
.ms-speed-control {
	position: absolute;
	top: var(--ms-space-3);
	right: var(--ms-space-3);
	z-index: 15;
}

.ms-speed-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--ms-tap-min);
	background: var(--ms-overlay-surface);
	color: var(--ms-on-overlay);
	border: none;
	padding: 4px 12px;
	border-radius: var(--ms-radius-sm);
	cursor: pointer;
	font-size: 12px;
	font-weight: 600;
}

.ms-speed-btn:hover {
	background: rgba(0, 0, 0, 0.8);
}

.ms-speed-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	background: rgba(0, 0, 0, 0.9);
	border-radius: 6px;
	padding: 4px 0;
	margin-top: 4px;
}

.ms-speed-control.is-open .ms-speed-menu {
	display: block;
}

.ms-speed-option {
	display: block;
	width: 100%;
	background: none;
	border: none;
	color: var(--ms-on-overlay);
	padding: 6px 16px;
	font-size: 13px;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
}

.ms-speed-option:hover {
	background: rgba(255, 255, 255, 0.1);
}

.ms-speed-option.is-active {
	color: var(--ms-accent);
	font-weight: 600;
}

/* Sticky / floating player */
.ms-sticky-player {
	position: fixed;
	bottom: 20px;
	right: 20px;
	width: 320px;
	z-index: 99999;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
	border-radius: 8px;
	/* Corner-rounding lives on the media child so the player can clip the video
	   to rounded corners while still letting the close button sit on top. */
	overflow: visible;
	transition: all 0.3s ease;
}

.ms-sticky-player .ms-player-target {
	aspect-ratio: 16 / 9;
	border-radius: 8px;
	overflow: hidden;
}

.ms-sticky-close {
	position: absolute;
	/* Positioned just INSIDE the top-right corner (positive offsets) rather than
	   floating outside with negative offsets. The old top/right:-10px combined
	   with the player's right:10px on mobile pushed the button to (or past) the
	   viewport edge, clipping it. Inside-the-corner positioning is fully
	   visible at every breakpoint. RTL-safe via inset-inline-end. */
	top: var(--ms-space-2, 8px);
	inset-inline-end: var(--ms-space-2, 8px);
	z-index: 100000;
	background: var(--ms-danger);
	color: var(--ms-on-overlay);
	border: 2px solid var(--ms-on-overlay);
	border-radius: 50%;
	/* min-width:0 + padding:0 stop theme <button> styles from widening it into
	   an oval; box-sizing keeps the 2px border inside the circle. Compact 28px
	   default keeps the close affordance visually subtle against the 320-wide
	   sticky player; touch devices below get bumped to the 40px WCAG 2.5.5
	   tap-target minimum so it stays comfortable for thumbs. */
	box-sizing: border-box;
	min-width: 0;
	width: 28px;
	height: 28px;
	padding: 0;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* Touch / coarse-pointer devices: restore the 40px tap-target minimum so
   thumb taps land comfortably (WCAG 2.5.5). Pointer-feature query is
   widely supported and falls back gracefully where unsupported. */
@media (pointer: coarse) {
	.ms-sticky-close {
		width: var(--ms-tap-min);
		height: var(--ms-tap-min);
		font-size: 16px;
	}
}

/* End screen overlay */
.ms-endscreen {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 20;
	background: rgba(0, 0, 0, 0.9);
	display: flex;
	align-items: center;
	justify-content: center;
}

.ms-endscreen__content {
	text-align: center;
	color: var(--ms-on-overlay);
	padding: 2rem;
}

.ms-endscreen__content p {
	font-size: 1.25rem;
	margin: 0 0 1.5rem;
	line-height: 1.4;
}

.ms-endscreen__cta {
	display: inline-block;
	padding: 0.75rem 2rem;
	background: var(--ms-accent);
	color: var(--ms-on-overlay);
	text-decoration: none;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
}

.ms-endscreen__cta:hover {
	background: var(--ms-accent-hover);
	color: var(--ms-on-overlay);
}

.ms-endscreen__replay {
	display: block;
	margin: 1rem auto 0;
	background: none;
	border: none;
	color: var(--ms-on-overlay-muted);
	cursor: pointer;
	font-size: 0.875rem;
	text-decoration: underline;
}

.ms-endscreen__replay:hover {
	color: var(--ms-on-overlay);
}

/* Keyboard focus ring */
.ms-protected-player:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 2px;
}

.ms-protected-player:focus:not(:focus-visible) {
	outline: none;
}

/* Keyboard focus ring for every interactive player control (Rule 14). */
.ms-fullscreen-btn:focus-visible,
.ms-speed-btn:focus-visible,
.ms-speed-option:focus-visible,
.ms-sticky-close:focus-visible,
.ms-login-button:focus-visible,
.ms-playlist-item:focus-visible,
.ms-resume-yes:focus-visible,
.ms-resume-no:focus-visible,
.ms-endscreen__replay:focus-visible {
	outline: 2px solid var(--ms-accent);
	outline-offset: 2px;
}

/* Responsive adjustments */
@media (max-width: 640px) {
	.ms-resume-toast {
		font-size: 0.75rem;
		padding: 0.5rem 1rem;
		bottom: 40px;
	}

	.ms-login-message p {
		font-size: 1rem;
	}

	.ms-badge {
		font-size: 0.5625rem;
	}

	.ms-sticky-player {
		width: 200px;
		bottom: 10px;
		right: 10px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.ms-sticky-player {
		transition: none;
	}
}

/* DevTools detected overlay */
.ms-devtools-overlay {
	position: fixed;
	inset: 0;
	z-index: 99999;
	background: rgba(15, 23, 42, 0.94);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
}

.ms-devtools-overlay__inner {
	max-width: 480px;
	background: #fff;
	color: #0f172a;
	padding: 2rem 2.25rem;
	border-radius: 12px;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
	text-align: center;
}

.ms-devtools-overlay__inner h3 {
	margin: 0 0 0.75rem;
	font-size: 1.25rem;
	font-weight: 600;
	color: #0f172a;
}

.ms-devtools-overlay__inner p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: #475569;
}

@media (prefers-reduced-motion: reduce) {
	.ms-devtools-overlay {
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}
}

/*
 * Editor-only placeholder shown when a playlist is empty or unavailable.
 * Uses currentColor so it adapts to any theme (incl. dark) without raw colors.
 */
.ms-playlist-notice {
	margin: 0;
	padding: 16px 20px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	opacity: 0.6;
	font-size: 0.875rem;
	text-align: center;
}

/* ──────────────────────────────────────────────────────────────────────────
   In-video ad overlay (pre / mid / post-roll) — ad-breaks.js
   ────────────────────────────────────────────────────────────────────────── */
.ms-ad-overlay {
	position: absolute;
	inset: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	background: #000;
}
.ms-ad-overlay__label {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 2;
	background: rgba( 0, 0, 0, 0.7 );
	color: #fff;
	font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 5px 8px;
	border-radius: 4px;
}
.ms-ad-overlay__body {
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.ms-ad-overlay__body a {
	display: block;
	width: 100%;
	height: 100%;
}
.ms-ad-overlay__body video,
.ms-ad-overlay__video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
}
.ms-ad-overlay__bar {
	position: absolute;
	right: 12px;
	bottom: 12px;
	z-index: 2;
}
.ms-ad-overlay__skip {
	background: rgba( 0, 0, 0, 0.75 );
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.4 );
	border-radius: 6px;
	padding: 8px 14px;
	font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	cursor: pointer;
}
.ms-ad-overlay__skip:disabled {
	opacity: 0.6;
	cursor: default;
}

/* ── Ad-break timeline ──────────────────────────────────────────────
   Slim ruler under the player marking every ad position (pre-roll,
   mid-rolls, post-roll) with a live playhead. Colours are neutral /
   conventional (amber ad markers, YouTube-style) so the strip suits any
   site theme. */
.ms-ad-timeline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-block-start: 8px;
	padding-inline: 2px;
	font: 600 11px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.ms-ad-timeline__caption {
	flex: 0 0 auto;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 10px;
	color: var( --ms-muted, #6b7280 );
}
.ms-ad-timeline__track {
	position: relative;
	flex: 1 1 auto;
	height: 6px;
	border-radius: 999px;
	background: rgba( 120, 130, 150, 0.25 );
	overflow: visible;
}
.ms-ad-timeline__progress {
	position: absolute;
	inset-block: 0;
	inset-inline-start: 0;
	width: 0;
	border-radius: 999px;
	background: rgba( 120, 130, 150, 0.7 );
	transition: width 0.4s linear;
}
.ms-ad-timeline__marker {
	position: absolute;
	top: 50%;
	width: 4px;
	height: 14px;
	margin-inline-start: -2px;
	transform: translateY( -50% );
	border-radius: 2px;
	background: #f5c518; /* amber ad marker */
	box-shadow: 0 0 0 1px rgba( 0, 0, 0, 0.25 );
	cursor: help;
}
.ms-ad-timeline__marker--pre {
	border-radius: 2px 2px 0 0;
}
.ms-ad-timeline__marker.is-played {
	background: rgba( 245, 197, 24, 0.45 );
}
/* Tooltip label on hover/focus — shows the sponsor + timecode. */
.ms-ad-timeline__marker::after {
	content: attr( data-label );
	position: absolute;
	bottom: 20px;
	inset-inline-start: 50%;
	transform: translateX( -50% );
	white-space: nowrap;
	background: rgba( 17, 24, 39, 0.95 );
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 5px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.15s ease;
}
.ms-ad-timeline__marker:hover::after {
	opacity: 1;
}
@media ( max-width: 480px ) {
	.ms-ad-timeline__caption {
		display: none;
	}
}