/**
 * AS3SD HTML renderer — wrapper + custom overlays for Video.js v10 (@videojs/html).
 * Default skin styles ship inside the bundled video.js shadow DOM.
 *
 * Theme accent: --as3sd-primary-color (PHP inline on .as3sd-player-wrap).
 */

.as3sd-player-wrap.as3sd-html-v10 {
	position: relative;
	max-width: 100%;
	background: transparent;
	border-radius: var( --as3sd-player-border-radius, 16px );
	overflow: hidden;
	box-shadow: 0 16px 48px rgba( 0, 0, 0, 0.35 );
	border: 1px solid rgba( 255, 255, 255, 0.08 );
}

/*
 * Settings height: narrow viewports use 16:9 from width (not desktop px), capped by setting + viewport.
 * Wide viewports keep fixed px height so layout does not jump when playback starts.
 */
.as3sd-player-wrap.as3sd-player-max-height {
	width: 100%;
	box-sizing: border-box;
	height: auto;
	aspect-ratio: 16 / 9;
	max-height: min( var( --as3sd-player-max-height ), 90vh, 90dvh );
}

@media (min-width: 783px) {
	.as3sd-player-wrap.as3sd-player-max-height {
		height: var( --as3sd-player-max-height );
		aspect-ratio: unset;
		max-height: min( var( --as3sd-player-max-height ), 90vh, 90dvh );
	}
}

/* Short landscape (e.g. phone sideways): width clears 783px but fixed px height looks wrong. */
@media (orientation: landscape) and (max-height: 33rem) {
	.as3sd-player-wrap.as3sd-player-max-height {
		height: auto;
		aspect-ratio: 16 / 9;
		max-height: min( var( --as3sd-player-max-height ), 90vh, 90dvh );
	}
}

.as3sd-html-v10 video-player {
	display: block;
	border-radius: inherit;
	overflow: hidden;
	height: 100%;
}

.as3sd-html-v10 video-skin.as3sd-v10-html-player {
	width: 100%;
	display: block;
	min-height: 120px;
	border-radius: inherit;
	--media-border-radius: var( --as3sd-player-border-radius, 16px );
	height: 100%;
}

.as3sd-player-wrap.as3sd-player-max-height.as3sd-html-v10 video-skin.as3sd-v10-html-player {
	min-height: 0;
}

/* Match React accent: PHP sets --as3sd-primary-color on .as3sd-player-wrap */
.as3sd-html-v10 video-skin.media-default-skin--video.as3sd-v10-html-player {
	--media-color-primary: var( --as3sd-primary-color, oklch( 100% 0 0 ) );
}

/* Skin option hints (v10 tokens) */
.as3sd-html-v10 .as3sd-skin-dark.media-default-skin--video {
	--media-surface-background-color: oklch( 0% 0 0 / 0.72 );
}

.as3sd-html-v10 .as3sd-skin-minimal.media-default-skin--video {
	--media-surface-background-color: oklch( 100% 0 0 / 0.06 );
}

.as3sd-speed-menu {
	position: absolute;
	left: 0;
	bottom: 5rem;
	right: auto;
	top: auto;
	background: rgba( 18, 20, 28, 0.94 );
	backdrop-filter: blur( 16px ) saturate( 1.4 );
	-webkit-backdrop-filter: blur( 16px ) saturate( 1.4 );
	color: #fff;
	padding: 8px;
	border-radius: 12px;
	border: 1px solid rgba( 255, 255, 255, 0.12 );
	box-shadow: 0 10px 28px rgba( 0, 0, 0, 0.35 );
	display: none;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 6px;
	min-width: 5.75rem;
	max-width: min( 9rem, calc( 100% - 20px ) );
	max-height: min( 50vh, 16rem );
	overflow-x: hidden;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior: contain;
	z-index: 26;
}

/* Allow the speed popover to extend past the rounded player frame while open */
.as3sd-player-wrap.as3sd-html-v10.as3sd-speed-menu-open {
	overflow: visible;
	z-index: 100;
}

.as3sd-speed-menu.is-open {
	display: flex;
}

.as3sd-speed-pill {
	background: transparent;
	color: #fff;
	border: 1px solid rgba( 255, 255, 255, 0.16 );
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 12px;
	cursor: pointer;
	transition: background 0.15s ease-out, border-color 0.15s ease-out;
	width: 100%;
	box-sizing: border-box;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.as3sd-speed-pill:hover {
	background: rgba( 255, 255, 255, 0.1 );
}

.as3sd-speed-pill.is-active {
	background: rgba( 255, 255, 255, 0.2 );
	border-color: rgba( 255, 255, 255, 0.35 );
}

.as3sd-speed-overlay {
	position: absolute;
	top: 12px;
	right: 12px;
	background: rgba( 0, 0, 0, 0.65 );
	backdrop-filter: blur( 8px );
	color: #fff;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 13px;
	letter-spacing: 0.02em;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 24;
}

.as3sd-speed-overlay.is-visible {
	opacity: 1;
}

.as3sd-loop-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	background: rgba( 255, 196, 0, 0.28 );
	border-left: 2px solid #ffc400;
	border-right: 2px solid #ffc400;
	border-radius: 4px;
	pointer-events: none;
	box-sizing: border-box;
}

/* Multi-player shortcode / Elementor grid */
.as3sd-players-grid {
	display: grid;
	grid-template-columns: repeat( var( --as3sd-player-columns, 1 ), minmax( 0, 1fr ) );
	gap: 1.25rem;
	width: 100%;
	align-items: start;
}

.as3sd-players-grid .as3sd-player-wrap {
	min-width: 0;
}

/* Responsive columns: phone → 1 col, tablet → max 2, desktop → shortcode count */
@media (max-width: 782px) {
	.as3sd-players-grid {
		grid-template-columns: minmax( 0, 1fr ) !important;
	}
}

@media (min-width: 783px) and (max-width: 1024px) {
	.as3sd-players-grid {
		grid-template-columns: repeat(
			min( 2, var( --as3sd-player-columns, 1 ) ),
			minmax( 0, 1fr )
		) !important;
	}
}