/* Haagala Video Player — shared component (DESIGN-SYSTEM 8ד). RTL, mobile-first.
   Markup: Haagala_Video_Player::render() · behaviour: public/js/video-player.js.
   Hosts (.lp-* / .clp-*) only place the player and may set --hv-max-width on their wrapper — never restyle .hv-* internals. */

:root {
	/* --- Media & Backdrop --- */
	--hv-media-bg:          var(--lp-bg-deep, #0C0C0E);
	--hv-overlay-bg:        var(--lp-video-overlay-bg, rgba(0,0,0,.60));
	--hv-backdrop-start:    var(--lp-bg-surface, #141418);
	--hv-backdrop-end:      var(--lp-bg-deep, #0C0C0E);
	--hv-backdrop-glow:     var(--lp-gold-glow, rgba(200,151,58,.18));

	/* --- Play Button --- */
	--hv-play-size:         72px;
	--hv-play-bg:           var(--lp-video-play-btn-bg, rgba(200,151,58,.92));
	--hv-play-fg:           var(--lp-cta-text, #0C0C0E);
	--hv-play-shadow:       var(--lp-shadow-gold, 0 0 24px rgba(200,151,58,.28), 0 4px 16px rgba(0,0,0,.50));
	--hv-play-shadow-hover: var(--lp-shadow-gold-hover, 0 0 36px rgba(200,151,58,.45), 0 8px 24px rgba(0,0,0,.60));

	/* --- Idle Label --- */
	--hv-label-color:       var(--lp-text-primary, #F0EBE0);
	--hv-label-text-shadow: 0 1px 3px rgba(0,0,0,.60);

	/* --- Frame (cancelled in .hv-player--flush) --- */
	--hv-radius:      var(--lp-radius-lg, 16px);
	--hv-radius-full: var(--lp-radius-full, 9999px);
	--hv-border:      var(--lp-border, rgba(200,151,58,.18));
	--hv-shadow:      var(--lp-shadow-2, 0 4px 16px rgba(0,0,0,.50), 0 8px 32px rgba(0,0,0,.30));

	/* --- Focus --- */
	--hv-focus-ring:   var(--lp-gold-light, #E8B86D);
	--hv-focus-offset: -3px;

	/* --- Error Panel + Retry --- */
	--hv-error-icon:     var(--lp-error, #EF5350);
	--hv-error-title:    var(--lp-text-primary, #F0EBE0);
	--hv-error-body:     var(--lp-text-secondary, #9D9585);
	--hv-retry-border:   var(--lp-border-strong, rgba(200,151,58,.40));
	--hv-retry-fg:       var(--lp-gold-light, #E8B86D);
	--hv-retry-hover-bg: var(--lp-gold-glow, rgba(200,151,58,.18));

	/* --- Loading Spinner --- */
	--hv-spinner-size:  44px;
	--hv-spinner-track: var(--lp-border, rgba(200,151,58,.18));
	--hv-spinner-arc:   var(--lp-gold-light, #E8B86D);

	/* --- Editor-only Badge / Empty Reminder --- */
	--hv-badge-bg:     var(--lp-bg-surface-2, #1C1C22);
	--hv-badge-fg:     var(--lp-text-secondary, #9D9585);
	--hv-badge-border: var(--lp-border, rgba(200,151,58,.18));
	--hv-badge-radius: var(--radius-sm, 4px);

	/* --- Orientation Caps (alias — canonical values live in the host files) --- */
	--hv-cap-portrait:     var(--lp-video-cap-portrait, 400px);
	--hv-cap-square:       var(--lp-video-cap-square, 480px);
	--hv-cap-portrait-4-5: var(--lp-video-cap-portrait-4-5, 480px);
	--hv-height-budget:    var(--lp-video-height-budget, 80svh);

	/* --- Motion --- */
	--hv-motion-fade:  var(--lp-transition, 200ms cubic-bezier(0.4,0,0.2,1));
	--hv-motion-scale: var(--lp-trans-slow, 380ms cubic-bezier(0,0,0.2,1));
}

/* ——— Frame + sizing (8ד.5) ——— */
.hv-player {
	--hv-ratio-w: 16;
	--hv-ratio-h: 9;
	position: relative;
	width: 100%;
	max-width: var(--hv-max-width, 800px);
	margin-inline: auto;
	aspect-ratio: var(--hv-ratio-w) / var(--hv-ratio-h);
	overflow: hidden;
	isolation: isolate;
	background: var(--hv-media-bg);
	border: 1px solid var(--hv-border);
	border-radius: var(--hv-radius);
	box-shadow: var(--hv-shadow);
}

.hv-player[data-orientation="portrait"] {
	--hv-ratio-w: 9;
	--hv-ratio-h: 16;
	max-width: var(--hv-cap-portrait);
}
.hv-player[data-orientation="square"] {
	--hv-ratio-w: 1;
	--hv-ratio-h: 1;
	max-width: var(--hv-cap-square);
}
.hv-player[data-orientation="portrait-4-5"] {
	--hv-ratio-w: 4;
	--hv-ratio-h: 5;
	max-width: var(--hv-cap-portrait-4-5);
}

/* Height budget keeps the whole frame on screen, a phone held sideways included.
   svh only where supported: a var() holding an unsupported unit would invalidate the declaration. */
@supports (height: 1svh) {
	.hv-player {
		max-width: min(var(--hv-max-width, 800px), calc(var(--hv-height-budget) * 16 / 9));
	}
	.hv-player[data-orientation="portrait"] {
		max-width: min(var(--hv-cap-portrait), calc(var(--hv-height-budget) * 9 / 16));
	}
	.hv-player[data-orientation="square"] {
		max-width: min(var(--hv-cap-square), var(--hv-height-budget));
	}
	.hv-player[data-orientation="portrait-4-5"] {
		max-width: min(var(--hv-cap-portrait-4-5), calc(var(--hv-height-budget) * 4 / 5));
	}
}

/* Inside a host card that provides the frame and the width (the funnel card, 8.10a) */
.hv-player.hv-player--flush {
	max-width: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent;
}

/* ——— Layers ——— */
.hv-player__media,
.hv-player__overlay,
.hv-player__error {
	position: absolute;
	inset: 0;
}

.hv-player__media {
	background: var(--hv-media-bg);
}

.hv-player__media iframe,
.hv-player__video {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.hv-player__video {
	object-fit: contain;
	background: var(--hv-media-bg);
}

/* ——— Idle: poster or branded backdrop + Play ——— */
.hv-player__overlay {
	z-index: 2;
	background: var(--hv-overlay-bg);
}

/* No poster: zero network requests, on-brand backdrop */
.hv-player__overlay--no-poster {
	background:
		radial-gradient(circle at 50% 50%, var(--hv-backdrop-glow) 0, transparent 60%),
		linear-gradient(180deg, var(--hv-backdrop-start) 0%, var(--hv-backdrop-end) 100%);
}

.hv-player__poster {
	position: absolute;
	inset: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hv-player:not([data-hv-state="idle"]) .hv-player__overlay {
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

/* The whole idle frame is the button — a large touch target */
.hv-player__play {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin: 0;
	padding: 16px;
	border: 0;
	background: none;
	color: var(--hv-label-color);
	font: inherit;
	cursor: pointer;
}

.hv-player__play:focus-visible {
	outline: 2px solid var(--hv-focus-ring);
	outline-offset: var(--hv-focus-offset);
}

.hv-player__play-circle {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: var(--hv-play-size);
	height: var(--hv-play-size);
	padding-left: 4px; /* physical on purpose: optical centre of a right-pointing triangle, same in RTL (8ד.8) */
	border-radius: var(--hv-radius-full);
	background: var(--hv-play-bg);
	color: var(--hv-play-fg);
	box-shadow: var(--hv-play-shadow);
}

.hv-player__play:hover .hv-player__play-circle {
	box-shadow: var(--hv-play-shadow-hover);
}

.hv-player__label {
	max-width: 100%;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	text-align: center;
	color: var(--hv-label-color);
	text-shadow: var(--hv-label-text-shadow);
}

/* ——— Loading ——— */
.hv-player__spinner {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 3;
	width: var(--hv-spinner-size);
	height: var(--hv-spinner-size);
	margin-top: calc(var(--hv-spinner-size) / -2);
	margin-left: calc(var(--hv-spinner-size) / -2);
	border: 3px solid var(--hv-spinner-track);
	border-top-color: var(--hv-spinner-arc);
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.hv-player[data-hv-state="loading"] .hv-player__spinner {
	opacity: 1;
	visibility: visible;
}

@keyframes hv-spin {
	to { transform: rotate(360deg); }
}

/* ——— Error ——— */
.hv-player__error {
	z-index: 4;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	text-align: center;
	background: linear-gradient(180deg, var(--hv-backdrop-start) 0%, var(--hv-backdrop-end) 100%);
	color: var(--hv-error-body);
}

.hv-player__error[hidden] {
	display: none;
}

.hv-player__error-icon {
	flex-shrink: 0;
	color: var(--hv-error-icon);
}

.hv-player__error-title {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
	color: var(--hv-error-title);
}

.hv-player__error-body {
	max-width: 32ch;
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--hv-error-body);
}

.hv-player__retry {
	min-height: 44px;
	margin-top: 4px;
	padding: 10px 24px;
	border: 1px solid var(--hv-retry-border);
	border-radius: var(--hv-radius-full);
	background: transparent;
	color: var(--hv-retry-fg);
	font: inherit;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
}

.hv-player__retry:hover {
	background: var(--hv-retry-hover-bg);
}

.hv-player__retry:focus-visible {
	outline: 2px solid var(--hv-focus-ring);
	outline-offset: 3px;
}

/* ——— Elementor editor only (8ד.9) ——— */
.hv-player__badge {
	position: absolute;
	top: 12px;
	inset-inline-start: 12px;
	z-index: 5;
	padding: 2px 10px;
	border: 1px solid var(--hv-badge-border);
	border-radius: var(--hv-badge-radius);
	background: var(--hv-badge-bg);
	color: var(--hv-badge-fg);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.6;
	pointer-events: none;
}

.hv-player--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	border-style: dashed;
	background:
		radial-gradient(circle at center, var(--hv-backdrop-glow), transparent 70%),
		linear-gradient(135deg, var(--hv-backdrop-start), var(--hv-backdrop-end));
}

.hv-player__empty-text {
	max-width: 36ch;
	margin: 0;
	padding: 24px;
	font-size: 15px;
	line-height: 1.6;
	text-align: center;
	color: var(--hv-badge-fg);
}

/* ——— Motion (8ד.7) — under reduced motion the spinner stays a static gold arc ——— */
@media (prefers-reduced-motion: no-preference) {
	.hv-player__overlay,
	.hv-player__spinner {
		transition: opacity var(--hv-motion-fade), visibility var(--hv-motion-fade);
	}

	.hv-player[data-hv-state="loading"] .hv-player__spinner {
		animation: hv-spin 900ms linear infinite;
	}

	.hv-player__play-circle {
		transition: transform var(--hv-motion-scale), box-shadow var(--hv-motion-scale);
	}

	.hv-player__play:hover .hv-player__play-circle {
		transform: scale(1.08);
	}

	.hv-player__play:active .hv-player__play-circle {
		transform: scale(0.96);
	}
}