/* ==========================================================================
   Academy Media Player Pro — Front-end player styles
   ========================================================================== */

.ampp-player {
	--ampp-radius: 16px;
	--ampp-bar-bg: rgba(15, 20, 27, 0.68);
	--ampp-bar-border: rgba(255, 255, 255, 0.12);
	--ampp-bar-blur: 18px;
	--ampp-bar-padding: 12px 16px;
	--ampp-bar-gap: 14px;
	--ampp-icon-color: #ffffff;
	--ampp-icon-hover: #7dd3fc;
	--ampp-progress-bg: rgba(255, 255, 255, 0.28);
	--ampp-progress-active: #ffffff;
	--ampp-progress-height: 4px;
	--ampp-font: inherit;
	--ampp-gap: 10px;

	position: relative;
	width: 100%;
	max-width: 100%;
	border-radius: var(--ampp-radius);
	overflow: hidden;
	background: #0b0f14;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
	font-family: var(--ampp-font);
	box-sizing: border-box;
	direction: ltr;
}

.ampp-player *,
.ampp-player *::before,
.ampp-player *::after {
	box-sizing: border-box;
}

/* Hard reset against theme / Elementor Kit global "button" styles.
   Elementor Kits frequently define `.elementor-kit-N button { ... }`
   with a background, padding and border-radius that otherwise leaks
   into our icon buttons. !important guarantees our player always
   renders identically regardless of the active theme or kit.
   NOTE: only the specific leak-prone properties are touched here —
   color/width/height/display are deliberately left alone so our own
   component rules (.ampp-icon-btn, .ampp-center-controls .ampp-btn,
   etc.) keep full control without needing !important themselves. */
.ampp-player button,
.ampp-player button:hover,
.ampp-player button:focus,
.ampp-player button:active {
	box-sizing: border-box !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
	line-height: normal !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	cursor: pointer !important;
	border: none !important;
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ampp-empty-notice {
	padding: 24px;
	background: #fef2f2;
	color: #b91c1c;
	border: 1px dashed #fca5a5;
	border-radius: 8px;
	font-size: 14px;
}

/* ---------------------------------------------------------------------
   VIDEO
   --------------------------------------------------------------------- */

.ampp-video-wrap {
	position: relative;
	width: 100%;
	height: 420px;
	background: #000;
	overflow: hidden;
}

.ampp-video-el {
	width: 100%;
	height: 100%;
	/* Cover is retained for the normal player so existing poster/video
	framing is unchanged. Fullscreen overrides this to contain so the video
	is never cropped by a viewport with a different aspect ratio. */
	object-fit: cover;
	object-position: center center;
	display: block;
	background: #000;
}

.ampp-resume-badge {
	position: absolute;
	top: 16px;
	left: 16px;
	background: rgba(10, 14, 20, 0.7);
	color: #fff;
	padding: 8px 14px;
	border-radius: 999px;
	font-size: 12px;
	backdrop-filter: blur(6px);
	z-index: 5;
}

.ampp-progress-dots {
	position: absolute;
	top: 14px;
	left: 16px;
	display: flex;
	gap: 5px;
	z-index: 6;
}

.ampp-progress-dots span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.35);
}

.ampp-progress-dots span.is-active {
	background: #fff;
}

/* Center play / skip controls */
.ampp-center-controls {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ampp-center-gap, 28px);
	z-index: 20;
	pointer-events: none;
}

.ampp-center-controls .ampp-btn {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	background: var(--ampp-center-btn-bg, rgba(255, 255, 255, 0.18)) !important;
	backdrop-filter: blur(var(--ampp-center-btn-blur, 6px));
	-webkit-backdrop-filter: blur(var(--ampp-center-btn-blur, 6px));
	color: var(--ampp-center-btn-color, var(--ampp-icon-color, #fff));
	transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease;
}

.ampp-center-controls .ampp-btn:hover {
	background: var(--ampp-center-btn-hover-bg, rgba(255, 255, 255, 0.3)) !important;
	transform: scale(1.05);
	color: var(--ampp-center-btn-hover-color, var(--ampp-icon-hover, #7dd3fc));
}

.ampp-center-controls .ampp-btn:active {
	transform: scale(0.96);
}

.ampp-skip-back,
.ampp-skip-fwd {
	width: var(--ampp-skip-size, 52px);
	height: var(--ampp-skip-size, 52px);
}

.ampp-skip-back svg,
.ampp-skip-fwd svg {
	width: var(--ampp-skip-icon-size, 26px);
	height: var(--ampp-skip-icon-size, 26px);
}

.ampp-toggle-play {
	width: var(--ampp-center-play-size, 76px);
	height: var(--ampp-center-play-size, 76px);
}

.ampp-toggle-play svg {
	width: 32px;
	height: 32px;
	margin-left: 3px; /* optical centring for the play triangle */
}

.ampp-player.is-playing .ampp-toggle-play svg {
	margin-left: 0;
}

.ampp-player:not(.is-playing) .ampp-center-controls {
	opacity: 1;
}

.ampp-player.is-playing .ampp-video-wrap:not(:hover) .ampp-center-controls,
.ampp-player.is-playing .ampp-video-wrap:not(:hover) .ampp-bottom-bar {
	opacity: 0;
	pointer-events: none;
}

.ampp-video-wrap,
.ampp-bottom-bar {
	transition: opacity 0.25s ease;
}

/* ---------------------------------------------------------------------
   BOTTOM CONTROL BAR (shared: video + audio)
   --------------------------------------------------------------------- */

.ampp-video-player .ampp-bottom-bar {
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 14px;
	/* Keep the settings dropdown in the same stacking context as the bar,
	 * but above the center playback controls when it opens upward. */
	z-index: 40;
}

.ampp-video-player .ampp-settings-menu {
	z-index: 500 !important;
	direction: ltr !important;
	text-align: left !important;
}

.ampp-video-player .ampp-speed-value {
	direction: ltr !important;
	unicode-bidi: isolate !important;
	white-space: nowrap !important;
	display: inline-block !important;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0 !important;
}

.ampp-bottom-bar {
	display: flex;
	align-items: center;
	gap: var(--ampp-bar-gap, 14px);
	min-height: 54px;
	background: var(--ampp-bar-bg, rgba(15, 20, 27, 0.68));
	background-color: var(--ampp-bar-bg, rgba(15, 20, 27, 0.68));
	backdrop-filter: blur(var(--ampp-bar-blur, 18px));
	-webkit-backdrop-filter: blur(var(--ampp-bar-blur, 18px));
	border: 1px solid var(--ampp-bar-border, rgba(255, 255, 255, 0.12));
	border-radius: 14px;
	padding: var(--ampp-bar-padding, 12px 16px);
	color: #fff;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

.ampp-icon-btn,
.ampp-bottom-bar .ampp-icon-btn,
.ampp-bottom-bar .ampp-icon-btn:hover,
.ampp-bottom-bar .ampp-icon-btn:focus,
.ampp-bottom-bar .ampp-icon-btn:active {
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--ampp-icon-color, #fff);
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	min-width: 32px;
	border-radius: 8px !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	border: 0 !important;
	transition: color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
	box-sizing: border-box;
}

.ampp-bottom-bar .ampp-icon-btn:hover,
.ampp-bottom-bar .ampp-icon-btn:focus-visible {
	color: #fff;
	background: rgba(255, 255, 255, 0.08) !important;
	background-color: rgba(255, 255, 255, 0.08) !important;
}

.ampp-bottom-bar .ampp-icon-btn:active {
	transform: scale(0.94);
	background: rgba(255, 255, 255, 0.12) !important;
	background-color: rgba(255, 255, 255, 0.12) !important;
}

.ampp-icon-btn svg {
	width: 20px;
	height: 20px;
	pointer-events: none;
	display: block;
}

/* Plain play/pause icon on the bottom bar — no circle border, matches
   the reference design exactly (bare icon like the rest of the bar). */
.ampp-toggle-play-sm svg {
	width: 20px;
	height: 20px;
}

.ampp-time {
	font-size: 13px;
	font-variant-numeric: tabular-nums;
	color: rgba(255, 255, 255, 0.9);
	flex-shrink: 0;
	min-width: 34px;
}

/* Progress bar (line style, used by video and by audio when waveform is off) */
.ampp-progress {
	flex: 1 1 auto;
	position: relative;
	height: 20px;
	display: flex;
	align-items: center;
	cursor: pointer;
	min-width: 60px;
}

.ampp-progress-track {
	position: relative;
	width: 100%;
	height: var(--ampp-progress-height, 4px);
	background: var(--ampp-progress-bg, rgba(255, 255, 255, 0.25));
	border-radius: 999px;
	overflow: visible;
}

.ampp-progress-buffered {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: rgba(255, 255, 255, 0.18);
	border-radius: 999px;
}

.ampp-progress-played {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 0%;
	background: var(--ampp-progress-active, #fff);
	border-radius: 999px;
}

.ampp-progress-handle {
	position: absolute;
	top: 50%;
	left: 0%;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--ampp-progress-active, #fff);
	transform: translate(-50%, -50%) scale(1);
	transition: transform 0.15s ease;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15);
}

.ampp-progress:hover .ampp-progress-handle,
.ampp-progress:focus-visible .ampp-progress-handle {
	transform: translate(-50%, -50%) scale(1.15);
}

/* ---------------------------------------------------------------------
   PODCAST WAVEFORM — minimal Figma-style frequency line
   Scoped to audio only so the finalized video player is untouched.
   --------------------------------------------------------------------- */
.ampp-audio-player .ampp-progress {
	height: 28px;
}

.ampp-audio-player .ampp-waveform {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: var(--ampp-waveform-height, 24px);
	overflow: hidden;
	padding: 0;
}

.ampp-audio-player .ampp-waveform::before {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 1px;
	transform: translateY(-50%);
	background: var(--ampp-waveform-baseline, rgba(255, 255, 255, 0.18));
	pointer-events: none;
}

.ampp-audio-player .ampp-bar {
	position: relative;
	z-index: 1;
	flex: 0 0 var(--ampp-waveform-bar-width, 1px);
	width: var(--ampp-waveform-bar-width, 1px);
	min-width: var(--ampp-waveform-bar-width, 1px);
	height: var(--h, 40%);
	max-height: 100%;
	margin: 0;
	background: var(--ampp-waveform-color, #7A7A7A);
	border-radius: 999px;
	opacity: 1;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

.ampp-audio-player .ampp-bar.is-active {
	background: var(--ampp-waveform-active, #1a43bf);
}

/* Volume */
.ampp-volume-wrap {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-shrink: 0;
}

.ampp-volume-slider {
	width: 70px;
	height: 3px;
	appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.25);
	border-radius: 999px;
	outline: none;
	cursor: pointer;
	display: none;
}

.ampp-volume-wrap:hover .ampp-volume-slider,
.ampp-volume-wrap:focus-within .ampp-volume-slider {
	display: block;
}

.ampp-volume-slider::-webkit-slider-thumb {
	appearance: none;
	-webkit-appearance: none;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #fff;
	cursor: pointer;
}

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

/* Settings menu (playback speed / PiP) — modern compact UI */
.ampp-settings-wrap {
	position: relative;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.ampp-settings-menu {
	position: absolute;
	bottom: calc(100% + 12px);
	right: 0;
	width: 188px;
	padding: 8px;
	background: rgba(15, 18, 24, 0.94);
	border: 1px solid rgba(255, 255, 255, 0.10);
	border-radius: 14px;
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	box-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
	z-index: 200;
	overflow: hidden;
	transform-origin: bottom right;
	animation: ampp-speed-menu-in 0.16s ease-out;
}

@keyframes ampp-speed-menu-in {
	from { opacity: 0; transform: translateY(5px) scale(0.98); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}

.ampp-settings-title {
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.48);
	padding: 7px 10px 8px;
}

.ampp-speed-option,
.ampp-pip-option {
	position: relative;
	display: flex !important;
	align-items: center;
	gap: 10px;
	width: 100% !important;
	min-height: 38px;
	box-sizing: border-box !important;
	text-align: left;
	color: rgba(255, 255, 255, 0.86);
	font-size: 13px;
	font-weight: 500;
	padding: 8px 10px !important;
	margin: 2px 0 !important;
	border: 0 !important;
	border-radius: 9px !important;
	background: transparent !important;
	box-shadow: none !important;
	transition: background-color 0.15s ease, color 0.15s ease;
	cursor: pointer;
}

.ampp-speed-option::before {
	content: '';
	width: 5px;
	height: 5px;
	flex: 0 0 5px;
	border-radius: 50%;
	background: transparent;
	transition: background-color 0.15s ease;
}

.ampp-speed-option:hover,
.ampp-speed-option:focus-visible,
.ampp-pip-option:hover,
.ampp-pip-option:focus-visible {
	background: rgba(255, 255, 255, 0.07) !important;
	color: #fff;
	outline: none;
}

.ampp-speed-option.active {
	background: rgba(26, 67, 191, 0.18) !important;
	color: #fff;
}

.ampp-speed-option.active::before {
	background: #1a43bf;
	box-shadow: 0 0 0 3px rgba(26, 67, 191, 0.14);
}

.ampp-speed-value {
	min-width: 42px;
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

.ampp-speed-label {
	font-size: 11px;
	color: rgba(255, 255, 255, 0.46);
}

.ampp-speed-option.active .ampp-speed-label {
	color: rgba(255, 255, 255, 0.68);
}

.ampp-pip-option svg {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
}

.ampp-settings-sep {
	height: 1px;
	background: rgba(255, 255, 255, 0.09);
	margin: 7px 4px;
}

.ampp-download-btn {
	text-decoration: none;
}

.ampp-fullscreen-btn {
	/* Plain icon, no individual chip background — matches the reference bar. */
}

/* ---------------------------------------------------------------------
   FIGMA-STYLE CONTROL BAR HARDENING
   Keep bottom-bar controls as bare icons. Theme / Elementor button styles
   must never introduce black chips, gradients, borders or shadows.
   --------------------------------------------------------------------- */

.ampp-bottom-bar > button,
.ampp-bottom-bar .ampp-volume-btn,
.ampp-bottom-bar .ampp-settings-btn,
.ampp-bottom-bar .ampp-fullscreen-btn,
.ampp-bottom-bar .ampp-download-btn,
.ampp-bottom-bar .ampp-toggle-play-sm {
	appearance: none !important;
	-webkit-appearance: none !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	outline: none;
}

.ampp-bottom-bar .ampp-icon-btn svg {
	fill: none;
	stroke: currentColor;
}

.ampp-bottom-bar .ampp-toggle-play-sm svg {
	width: var(--ampp-bottom-icon-size, 19px) !important;
	height: var(--ampp-bottom-icon-size, 19px) !important;
}

.ampp-bottom-bar .ampp-time {
	line-height: 1;
}


/* ---------------------------------------------------------------------
   FIGMA CONTROL BUTTON OVERRIDE — v1.0.1
   Some Elementor Kits/themes ship high-specificity button rules. The
   player controls must remain transparent icon-only controls regardless
   of those global styles. This rule is intentionally placed late in the
   stylesheet and uses `all` to reset every visual button property before
   restoring only the properties the player needs.
   --------------------------------------------------------------------- */
.ampp-player.ampp-video-player .ampp-bottom-bar button.ampp-icon-btn,
.ampp-player.ampp-audio-player .ampp-bottom-bar button.ampp-icon-btn,
.ampp-player.ampp-video-player .ampp-bottom-bar button.ampp-icon-btn:hover,
.ampp-player.ampp-audio-player .ampp-bottom-bar button.ampp-icon-btn:hover,
.ampp-player.ampp-video-player .ampp-bottom-bar button.ampp-icon-btn:focus,
.ampp-player.ampp-audio-player .ampp-bottom-bar button.ampp-icon-btn:focus,
.ampp-player.ampp-video-player .ampp-bottom-bar button.ampp-icon-btn:active,
.ampp-player.ampp-audio-player .ampp-bottom-bar button.ampp-icon-btn:active {
	all: unset !important;
	box-sizing: border-box !important;
	appearance: none !important;
	-webkit-appearance: none !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--ampp-bottom-btn-size, 32px) !important;
	height: var(--ampp-bottom-btn-size, 32px) !important;
	min-width: var(--ampp-bottom-btn-size, 32px) !important;
	min-height: var(--ampp-bottom-btn-size, 32px) !important;
	flex: 0 0 var(--ampp-bottom-btn-size, 32px) !important;
	padding: 0 !important;
	margin: 0 !important;
	border: 0 !important;
	border-width: 0 !important;
	border-style: none !important;
	border-color: transparent !important;
	border-radius: var(--ampp-bottom-btn-radius, 0) !important;
	background: transparent !important;
	background-color: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	color: var(--ampp-icon-color, #fff) !important;
	text-decoration: none !important;
	outline: none !important;
	cursor: pointer !important;
	line-height: 1 !important;
	font: inherit !important;
	text-align: center !important;
}

.ampp-player .ampp-bottom-bar button.ampp-icon-btn:hover {
	background: var(--ampp-bottom-btn-hover-bg, transparent) !important;
	background-color: var(--ampp-bottom-btn-hover-bg, transparent) !important;
}

.ampp-player .ampp-bottom-bar button.ampp-icon-btn:hover {
	color: var(--ampp-icon-hover, var(--ampp-icon-color, #fff)) !important;
}

.ampp-player .ampp-bottom-bar button.ampp-icon-btn svg {
	width: var(--ampp-bottom-icon-size, 20px) !important;
	height: var(--ampp-bottom-icon-size, 20px) !important;
}

.ampp-player .ampp-bottom-bar button.ampp-icon-btn::before,
.ampp-player .ampp-bottom-bar button.ampp-icon-btn::after {
	content: none !important;
	display: none !important;
}

.ampp-player .ampp-bottom-bar button.ampp-icon-btn svg {
	display: block !important;
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	background-color: transparent !important;
	box-shadow: none !important;
	color: inherit !important;
}

.ampp-player .ampp-bottom-bar button.ampp-icon-btn:hover {
	color: #fff !important;
	transform: none !important;
}

.ampp-player .ampp-bottom-bar button.ampp-icon-btn:focus-visible {
	outline: 2px solid rgba(255, 255, 255, 0.7) !important;
	outline-offset: 2px !important;
}

/* ---------------------------------------------------------------------
   VIDEO CENTER CONTROLS
   Same visual/component model as the finalized podcast center controls.
   All dimensions are CSS variables so Elementor responsive controls can
   override them at desktop/tablet/mobile without !important conflicts.
   --------------------------------------------------------------------- */
.ampp-player.ampp-video-player .ampp-video-wrap {
	position: relative;
}

.ampp-player.ampp-video-player .ampp-center-controls {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--ampp-center-gap, 28px);
	z-index: 20;
	pointer-events: none;
}

.ampp-player.ampp-video-player .ampp-center-controls .ampp-btn {
	position: relative;
	z-index: 21;
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 50% !important;
	background: var(--ampp-center-btn-bg, rgba(255, 255, 255, 0.16)) !important;
	background-color: var(--ampp-center-btn-bg, rgba(255, 255, 255, 0.16)) !important;
	background-image: none;
	box-shadow: none;
	backdrop-filter: blur(var(--ampp-center-btn-blur, 8px));
	-webkit-backdrop-filter: blur(var(--ampp-center-btn-blur, 8px));
	color: var(--ampp-center-btn-color, #fff);
	cursor: pointer;
	touch-action: manipulation;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
	outline: none;
	transition: background-color .2s ease, color .2s ease;
}

.ampp-player.ampp-video-player .ampp-center-controls .ampp-btn:hover {
	background: var(--ampp-center-btn-hover-bg, rgba(255, 255, 255, 0.26));
	background-color: var(--ampp-center-btn-hover-bg, rgba(255, 255, 255, 0.26));
	color: var(--ampp-center-btn-hover-color, #fff);
	border-radius: 50% !important;
	transform: none !important;
}

.ampp-player.ampp-video-player .ampp-center-controls .ampp-btn:focus,
.ampp-player.ampp-video-player .ampp-center-controls .ampp-btn:focus-visible,
.ampp-player.ampp-video-player .ampp-center-controls .ampp-btn:active {
	border-radius: 50% !important;
	transform: none !important;
	outline: none !important;
	box-shadow: none !important;
}

.ampp-player.ampp-video-player .ampp-center-controls .ampp-skip-back,
.ampp-player.ampp-video-player .ampp-center-controls .ampp-skip-fwd {
	width: var(--ampp-skip-width, var(--ampp-skip-size, 52px));
	height: var(--ampp-skip-height, var(--ampp-skip-size, 52px));
	min-width: var(--ampp-skip-width, var(--ampp-skip-size, 52px));
	min-height: var(--ampp-skip-height, var(--ampp-skip-size, 52px));
}

.ampp-player.ampp-video-player .ampp-center-controls .ampp-toggle-play {
	width: var(--ampp-center-play-width, var(--ampp-center-play-size, 76px));
	height: var(--ampp-center-play-height, var(--ampp-center-play-size, 76px));
	min-width: var(--ampp-center-play-width, var(--ampp-center-play-size, 76px));
	min-height: var(--ampp-center-play-height, var(--ampp-center-play-size, 76px));
}

.ampp-player.ampp-video-player .ampp-center-controls .ampp-skip-back svg,
.ampp-player.ampp-video-player .ampp-center-controls .ampp-skip-fwd svg {
	display: block;
	width: var(--ampp-skip-icon-size, 26px);
	height: var(--ampp-skip-icon-size, 26px);
	min-width: var(--ampp-skip-icon-size, 26px);
	min-height: var(--ampp-skip-icon-size, 26px);
	margin: 0;
	padding: 0;
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	fill: none;
	stroke: currentColor;
	pointer-events: none;
}

.ampp-player.ampp-video-player .ampp-center-controls .ampp-toggle-play svg {
	display: block;
	width: var(--ampp-center-play-icon-size, 32px);
	height: var(--ampp-center-play-icon-size, 32px);
	min-width: var(--ampp-center-play-icon-size, 32px);
	min-height: var(--ampp-center-play-icon-size, 32px);
	margin: 0 0 0 3px;
	padding: 0;
	background: transparent;
	background-color: transparent;
	box-shadow: none;
	fill: currentColor;
	stroke: none;
	pointer-events: none;
}

.ampp-player.ampp-video-player.is-playing .ampp-center-controls .ampp-toggle-play svg {
	margin-left: 0;
}

/* ---------------------------------------------------------------------
   META (title / description) — video
   --------------------------------------------------------------------- */

.ampp-video-player .ampp-meta {
	padding: var(--ampp-gap, 14px) 4px 4px;
}

.ampp-video-player .ampp-title {
	font-size: 16px;
	font-weight: 600;
	color: #0b0f14;
	margin: 0 0 4px;
}

.ampp-video-player .ampp-description {
	font-size: 13px;
	color: #5b6472;
	margin: 0;
	line-height: 1.5;
}

/* ---------------------------------------------------------------------
   AUDIO / PODCAST PLAYER
   --------------------------------------------------------------------- */

.ampp-audio-player {
	display: flex;
	flex-direction: column;
	padding: 16px;
	gap: var(--ampp-gap, 12px);
	background: #12161d;
	color: #fff;
}

.ampp-audio-player .ampp-cover {
	width: 100%;
	padding-top: 56%;
	background-size: cover;
	background-position: center;
	border-radius: 10px;
}

.ampp-audio-player .ampp-meta {
	padding: 0 2px;
}

.ampp-audio-player .ampp-title {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 4px;
}

.ampp-audio-player .ampp-description {
	font-size: 13px;
	color: rgba(255, 255, 255, 0.65);
	margin: 0;
	line-height: 1.5;
}

/* Podcast center playback controls. These are intentionally scoped to
   audio so the finalized video controls remain untouched. */
.ampp-audio-player .ampp-audio-center-controls {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 74px;
	gap: var(--ampp-audio-center-gap, 28px);
	align-items: center;
	justify-content: center;
	z-index: 8;
	pointer-events: none;
}

.ampp-audio-player .ampp-audio-center-controls .ampp-btn {
	pointer-events: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50% !important;
	background: var(--ampp-audio-center-bg, rgba(255, 255, 255, 0.16)) !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: var(--ampp-audio-center-color, #fff);
	transition: background-color .2s ease, transform .15s ease, color .2s ease;
}

.ampp-audio-player .ampp-audio-center-controls .ampp-btn:hover {
	background: var(--ampp-audio-center-hover-bg, rgba(255, 255, 255, 0.26)) !important;
	color: var(--ampp-audio-center-hover-color, #fff);
	transform: scale(1.05);
}

.ampp-audio-player .ampp-audio-center-controls .ampp-btn:active {
	transform: scale(.96);
}

.ampp-audio-player .ampp-audio-center-controls .ampp-skip-back,
.ampp-audio-player .ampp-audio-center-controls .ampp-skip-fwd {
	width: var(--ampp-audio-skip-size, 52px);
	height: var(--ampp-audio-skip-size, 52px);
}

.ampp-audio-player .ampp-audio-center-controls .ampp-skip-back svg,
.ampp-audio-player .ampp-audio-center-controls .ampp-skip-fwd svg {
	width: var(--ampp-audio-skip-icon-size, 26px);
	height: var(--ampp-audio-skip-icon-size, 26px);
}

.ampp-audio-player .ampp-audio-center-controls .ampp-toggle-play {
	width: var(--ampp-audio-play-size, 76px);
	height: var(--ampp-audio-play-size, 76px);
}

.ampp-audio-player .ampp-audio-center-controls .ampp-toggle-play svg {
	width: var(--ampp-audio-play-icon-size, 32px);
	height: var(--ampp-audio-play-icon-size, 32px);
	margin-left: 3px;
}

.ampp-audio-player.is-playing .ampp-audio-center-controls .ampp-toggle-play svg {
	margin-left: 0;
}

/* The podcast bottom bar uses the same glass style as the video player
   (white 10% background + blur) for visual consistency across both widgets. */

/* ---------------------------------------------------------------------
   MINI / STICKY CONTINUE-PLAYING BAR (podcast)
   --------------------------------------------------------------------- */

.ampp-mini-bar {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	max-width: 420px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(15, 18, 24, 0.96);
	backdrop-filter: blur(10px);
	border-radius: 12px;
	padding: 10px 14px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
	z-index: 99999;
	color: #fff;
	transform: translateY(120%);
	transition: transform 0.3s ease;
}

.ampp-mini-bar.is-visible {
	transform: translateY(0);
}

.ampp-mini-bar button,
.ampp-mini-bar button:hover,
.ampp-mini-bar button:focus,
.ampp-mini-bar button:active {
	box-sizing: border-box !important;
	font-family: inherit !important;
	cursor: pointer !important;
	border: none !important;
	background: none !important;
	background-color: transparent !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
}

.ampp-mini-bar .ampp-mini-title {
	flex: 1 1 auto;
	font-size: 13px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.ampp-mini-bar .ampp-mini-close {
	color: rgba(255, 255, 255, 0.6);
	font-size: 18px;
	line-height: 1;
}

.ampp-mini-bar .ampp-mini-close:hover {
	color: #fff;
}

/* ---------------------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------------------- */

@media (max-width: 767px) {
	.ampp-video-wrap {
		height: 260px;
	}

	.ampp-video-player .ampp-center-controls {
		--ampp-center-play-size: 62px;
		--ampp-center-play-icon-size: 26px;
		--ampp-skip-size: 42px;
		--ampp-skip-icon-size: 20px;
	}

	.ampp-center-controls {
		gap: 18px;
	}

	.ampp-bottom-bar {
		gap: 8px;
		min-height: 46px;
		padding: 6px 10px;
		flex-wrap: nowrap;
	}

	.ampp-time {
		font-size: 11px;
		min-width: 28px;
	}

	.ampp-volume-wrap {
		display: none;
	}

	.ampp-settings-menu {
		right: -10px;
	}
}

@media (max-width: 480px) {
	.ampp-video-player .ampp-fullscreen-btn {
		display: flex;
	}

	.ampp-bottom-bar .ampp-time.ampp-duration {
		display: none;
	}
}



/* ---------------------------------------------------------------------
   MOBILE / TOUCH CONTROLS
   The player is also used inside Elementor columns whose width can be much
   smaller than the browser viewport. Container queries therefore complement
   the viewport media queries below. On touch devices the center controls and
   bottom bar are hidden while playing and are revealed briefly after a tap.
   --------------------------------------------------------------------- */
.ampp-player {
	container-type: inline-size;
	container-name: ampp-player;
}

.ampp-player.ampp-touch-controls-visible .ampp-center-controls,
.ampp-player.ampp-touch-controls-visible .ampp-bottom-bar {
	opacity: 1 !important;
	pointer-events: auto !important;
}

@media (max-width: 767px) {
	.ampp-player.ampp-video-player .ampp-center-controls,
	.ampp-player.ampp-audio-player .ampp-audio-center-controls {
		--ampp-center-play-size: 56px;
		--ampp-center-play-width: 56px;
		--ampp-center-play-height: 56px;
		--ampp-center-play-icon-size: 24px;
		--ampp-skip-size: 38px;
		--ampp-skip-width: 38px;
		--ampp-skip-height: 38px;
		--ampp-skip-icon-size: 18px;
		gap: 14px;
	}

	.ampp-player .ampp-bottom-bar {
		min-height: 40px;
		padding: 5px 8px;
		gap: 7px;
		border-radius: 11px;
	}

	.ampp-player .ampp-bottom-bar .ampp-icon-btn {
		width: 28px;
		height: 28px;
		min-width: 28px;
		min-height: 28px;
	}

	.ampp-player .ampp-bottom-bar .ampp-icon-btn svg {
		width: 18px;
		height: 18px;
	}

	.ampp-player .ampp-time {
		font-size: 10px;
		min-width: 24px;
	}

	.ampp-player .ampp-video-player .ampp-bottom-bar {
		left: 9px;
		right: 9px;
		bottom: 9px;
	}
}

@container ampp-player (max-width: 767px) {
	.ampp-player.ampp-video-player .ampp-center-controls,
	.ampp-player.ampp-audio-player .ampp-audio-center-controls {
		--ampp-center-play-size: 56px;
		--ampp-center-play-width: 56px;
		--ampp-center-play-height: 56px;
		--ampp-center-play-icon-size: 24px;
		--ampp-skip-size: 38px;
		--ampp-skip-width: 38px;
		--ampp-skip-height: 38px;
		--ampp-skip-icon-size: 18px;
		gap: 14px;
	}

	.ampp-player .ampp-bottom-bar {
		min-height: 40px;
		padding: 5px 8px;
		gap: 7px;
		border-radius: 11px;
	}

	.ampp-player .ampp-bottom-bar .ampp-icon-btn {
		width: 28px;
		height: 28px;
		min-width: 28px;
		min-height: 28px;
	}

	.ampp-player .ampp-bottom-bar .ampp-icon-btn svg {
		width: 18px;
		height: 18px;
	}

	.ampp-player .ampp-time {
		font-size: 10px;
		min-width: 24px;
	}

	.ampp-player.ampp-video-player .ampp-bottom-bar {
		left: 9px;
		right: 9px;
		bottom: 9px;
	}
}

/* ---------------------------------------------------------------------
   FULLSCREEN STATE
   --------------------------------------------------------------------- */

/*
 * Fullscreen is deliberately treated as a viewport stage.
 * The old implementation relied on width/height:100% on the media element.
 * That is fragile on mobile browsers and can leave the video cropped when
 * the fullscreen viewport has a different aspect ratio than the source.
 *
 * The stage owns the viewport; the video is centered inside it with contain.
 * This guarantees that the complete frame remains visible in both portrait
 * and landscape without changing the normal player framing.
 */
.ampp-video-player:fullscreen,
.ampp-video-player:-webkit-full-screen,
.ampp-video-player.ampp-native-fullscreen {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	max-width: none !important;
	height: 100vh !important;
	height: 100dvh !important;
	min-width: 100vw !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	background: #000 !important;
}

.ampp-video-player:fullscreen .ampp-video-wrap,
.ampp-video-player:-webkit-full-screen .ampp-video-wrap,
.ampp-video-player.ampp-native-fullscreen .ampp-video-wrap {
	position: absolute !important;
	inset: 0 !important;
	width: 100vw !important;
	max-width: none !important;
	height: 100vh !important;
	height: 100dvh !important;
	min-width: 100vw !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #000 !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.ampp-video-player:fullscreen .ampp-video-el,
.ampp-video-player:-webkit-full-screen .ampp-video-el,
.ampp-video-player.ampp-native-fullscreen .ampp-video-el {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;	
	object-fit: contain !important;
	object-position: center center !important;
	background: #000 !important;
}

/* Custom fullscreen fallback for mobile/WebKit environments where a custom
 * element cannot reliably enter native fullscreen. */
html.ampp-has-fallback-fullscreen,
body.ampp-has-fallback-fullscreen {
	overflow: hidden !important;
	width: 100% !important;
	height: 100% !important;
}

.ampp-video-player.ampp-fallback-fullscreen {
	position: fixed !important;
	inset: 0 !important;
	width: 100vw !important;
	max-width: none !important;
	height: 100vh !important;
	height: 100dvh !important;
	min-width: 100vw !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	border-radius: 0 !important;
	overflow: hidden !important;
	background: #000 !important;
	z-index: 2147483647 !important;
}

.ampp-video-player.ampp-fallback-fullscreen .ampp-video-wrap {
	position: absolute !important;
	inset: 0 !important;
	width: 100vw !important;
	height: 100vh !important;
	height: 100dvh !important;
	min-width: 100vw !important;
	min-height: 100vh !important;
	min-height: 100dvh !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #000 !important;
	overflow: hidden !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

.ampp-video-player.ampp-fallback-fullscreen .ampp-video-el {
	display: block !important;
	position: relative !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 0 !important;
	min-height: 0 !important;
	max-width: 100% !important;
	max-height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	object-fit: contain !important;
	object-position: center center !important;
	background: #000 !important;
}

.ampp-video-player.ampp-fallback-fullscreen .ampp-bottom-bar {
	bottom: max(14px, env(safe-area-inset-bottom)) !important;
	left: max(14px, env(safe-area-inset-left)) !important;
	right: max(14px, env(safe-area-inset-right)) !important;
	width: auto !important;
}

@media (max-width: 767px) {
	.ampp-video-player:fullscreen .ampp-video-wrap,
	.ampp-video-player:-webkit-full-screen .ampp-video-wrap,
	.ampp-video-player.ampp-native-fullscreen .ampp-video-wrap,
	.ampp-video-player.ampp-fallback-fullscreen .ampp-video-wrap {
		height: 100dvh !important;
	}

	.ampp-video-player:fullscreen .ampp-video-el,
	.ampp-video-player:-webkit-full-screen .ampp-video-el,
	.ampp-video-player.ampp-native-fullscreen .ampp-video-el,
	.ampp-video-player.ampp-fallback-fullscreen .ampp-video-el {
		width: 100% !important;
		height: 100% !important;
		object-fit: contain !important;
	}
}


/* ---------------------------------------------------------------------
   FOCUS ACCESSIBILITY
   --------------------------------------------------------------------- */

.ampp-player button:focus-visible,
.ampp-progress:focus-visible {
	outline: 2px solid #7dd3fc;
	outline-offset: 2px;
}

.ampp-members-lock-screen{
	--ampp-members-lock-radius:16px;
	position:relative;box-sizing:border-box;width:100%;aspect-ratio:16/9;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;padding:32px 24px;border:1px solid rgba(255,255,255,.08);border-radius:var(--ampp-members-lock-radius);background:#111;color:#fff;isolation:isolate;
}
.ampp-members-lock-screen__poster{position:absolute;inset:-14px;background-image:var(--ampp-members-poster);background-size:cover;background-position:center;filter:blur(12px);transform:scale(1.04);z-index:-2}
.ampp-members-lock-screen__overlay{position:absolute;inset:0;background:rgba(0,0,0,.58);z-index:-1}
.ampp-members-lock-screen__content{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;max-width:680px}
.ampp-members-lock-screen__icon{font-size:30px;line-height:1;margin-bottom:14px}
.ampp-members-lock-screen__text{margin:0;line-height:1.9;text-shadow:0 1px 4px rgba(0,0,0,.55)}
.ampp-members-lock-screen__login{display:inline-flex;align-items:center;justify-content:center;margin-top:18px;padding:10px 24px;background:#1a43bf;color:#fff;border-radius:8px;text-decoration:none;transition:opacity .2s ease,transform .2s ease}
.ampp-members-lock-screen__login:hover,.ampp-members-lock-screen__login:focus{color:#fff;opacity:.92;transform:translateY(-1px)}
@media (max-width:600px){.ampp-members-lock-screen{padding:24px 16px}.ampp-members-lock-screen__icon{font-size:26px;margin-bottom:10px}.ampp-members-lock-screen__text{font-size:13px}.ampp-members-lock-screen__login{margin-top:14px;padding:9px 20px}}