/* ==========================================================================
   Auto Video Widget
   ========================================================================== */

/* ── Wrapper ─────────────────────────────────────────────────────────────── */

.loria-auto-video-wrapper {
	position: relative;
	width: 100%;
	overflow: hidden;
	display: block;
}

/* 16:9 aspect-ratio spacer — used when no height has been set by Elementor */
.loria-auto-video-wrapper::after {
	content: '';
	display: block;
	padding-top: 56.25%;
}

/* ── Poster ──────────────────────────────────────────────────────────────── */

.loria-auto-video-poster {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 1;
	transition: opacity var(--av-fade, 600ms) ease;
}

/* ── Video ───────────────────────────────────────────────────────────────── */

.loria-auto-video-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	z-index: 3;
	opacity: 0;
	transition: opacity var(--av-fade, 600ms) ease;
}

/* ── Overlays ────────────────────────────────────────────────────────────── */
/*
 * Two independent overlay divs sit above their respective media layer.
 * The background-color (including alpha) is set inline by PHP via the
 * overlay_image_color/opacity and overlay_video_color/opacity controls.
 * The CSS `opacity` property (0 or 1) crossfades them in sync with the
 * poster-to-video swap driven by the .loria-auto-video-playing class.
 */

.loria-auto-video-overlay {
	position: absolute;
	inset: 0;
	pointer-events: none;
	transition: opacity var(--av-fade, 600ms) ease;
}

/* Image overlay: visible when poster is showing (not playing) */
.loria-auto-video-overlay-poster {
	z-index: 2;
	opacity: 1;
}

/* Video overlay: visible when video is playing */
.loria-auto-video-overlay-video {
	z-index: 4;
	opacity: 0;
}

/*
 * .loria-auto-video-started is added on first play and NEVER removed.
 * This keeps the video frame (and video overlay) visible even when paused —
 * the viewer sees the frozen frame, not the poster jumping back in.
 *
 * .loria-auto-video-playing is still toggled on every play/pause; it drives only the icon swap.
 */
.loria-auto-video-wrapper.loria-auto-video-started .loria-auto-video-poster         { opacity: 0; }
.loria-auto-video-wrapper.loria-auto-video-started .loria-auto-video-video          { opacity: 1; }
.loria-auto-video-wrapper.loria-auto-video-started .loria-auto-video-overlay-poster { opacity: 0; }
.loria-auto-video-wrapper.loria-auto-video-started .loria-auto-video-overlay-video  { opacity: 1; }

/* ── Content outer ───────────────────────────────────────────────────────── */
/*
 * Full-cover flex row. The single child (.loria-auto-video-content-inner) stretches to
 * the wrapper's full height (align-items: stretch default), so the
 * play/pause button can anchor to the absolute bottom independently of
 * where the title/button block is vertically aligned.
 */

.loria-auto-video-content-outer {
	position: absolute;
	inset: 0;
	z-index: 5;
	display: flex;
	/* align-items: stretch is flex default — gives .loria-auto-video-content-inner full height */
}

/* ── Content inner ───────────────────────────────────────────────────────── */
/*
 * The shared "content width" box.
 * max-width and padding are set by Elementor controls.
 * Horizontal position is controlled via data-h-align on the wrapper.
 * Vertical position of the text group is controlled via data-v-align.
 * position:relative makes it the containing block for .loria-auto-video-playpause.
 */

.loria-auto-video-content-inner {
	position: relative;
	width: 100%;
	/* max-width injected by Elementor control (default 700px) */
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	/* padding injected by Elementor control (default 40 40 60 40 px) */
}

/* Horizontal position — physical margin approach (direction-agnostic) */
.loria-auto-video-wrapper[data-h-align="right"]  .loria-auto-video-content-inner { margin-left: auto;  margin-right: 0; }
.loria-auto-video-wrapper[data-h-align="center"] .loria-auto-video-content-inner { margin-left: auto;  margin-right: auto; }
.loria-auto-video-wrapper[data-h-align="left"]   .loria-auto-video-content-inner { margin-left: 0;     margin-right: auto; }

/* Vertical position of the text group (only flow child) */
.loria-auto-video-wrapper[data-v-align="top"]    .loria-auto-video-content-inner { justify-content: flex-start; }
.loria-auto-video-wrapper[data-v-align="center"] .loria-auto-video-content-inner { justify-content: center; }
.loria-auto-video-wrapper[data-v-align="bottom"] .loria-auto-video-content-inner { justify-content: flex-end; }

/* ── Text group ──────────────────────────────────────────────────────────── */

.loria-auto-video-text-group {
	/* Normal flex child — position driven by justify-content on parent */
}

/* ── Title ───────────────────────────────────────────────────────────────── */

.loria-auto-video-title {
	margin: 0 0 16px;
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.25;
}

/* ── Button ──────────────────────────────────────────────────────────────── */

.loria-auto-video-button {
	display: inline-block;
	padding: 12px 28px;
	font-size: 0.95rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 2px;
	background-color: #fff;
	color: #222;
	border: 2px solid #fff;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	box-sizing: border-box;
}

.loria-auto-video-button:hover,
.loria-auto-video-button:focus {
	background-color: transparent;
	color: #fff;
	outline: none;
}

/* ── Play / Pause button ─────────────────────────────────────────────────── */
/*
 * Absolutely positioned within .loria-auto-video-content-inner (which spans full height),
 * so it is ALWAYS pinned to the bottom regardless of the text group's
 * justify-content / vertical-position setting.
 *
 * bottom value is injected by the pp_bottom_offset Elementor control (default 24px).
 * Horizontal position is set by data-position via inset-inline-* (logical
 * properties so start/end respect the page's writing direction automatically).
 */

.loria-auto-video-playpause {
	position: absolute;
	/* bottom: 24px — default set by Elementor selector control */
	bottom: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: #fff;
	line-height: 0;
	transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.loria-auto-video-playpause:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}

/*
 * Horizontal anchoring — physical left/right only (no logical properties)
 * so the mobile left:24px override applies cleanly with no conflicts.
 * For this RTL site: "start" = visual right, "end" = visual left.
 */
.loria-auto-video-playpause[data-position="start"]  { right: 0; left: auto; }
.loria-auto-video-playpause[data-position="center"] { left: 50%; right: auto; transform: translateX(-50%); }
.loria-auto-video-playpause[data-position="end"]    { left: 0; right: auto; }

/* Circle background variant */
.loria-auto-video-playpause.has-circle {
	border-radius: 50%;
	border: 2px solid #fff;
}

/* ── Icon sizing and display ─────────────────────────────────────────────── */

.loria-auto-video-icon-play,
.loria-auto-video-icon-pause {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;  /* overridden by pp_icon_size Elementor control */
	height: 24px;
	flex-shrink: 0;
}

.loria-auto-video-icon-play svg,
.loria-auto-video-icon-pause svg,
.loria-auto-video-icon-play i,
.loria-auto-video-icon-pause i {
	display: block;
	width: 100%;
	height: 100%;
}

/* Show play icon by default; pause icon hidden */
.loria-auto-video-icon-pause {
	display: none;
}

/* Icon swap — still driven by .loria-auto-video-playing (toggled on every play/pause) */
.loria-auto-video-wrapper.loria-auto-video-playing .loria-auto-video-icon-play  { display: none; }
.loria-auto-video-wrapper.loria-auto-video-playing .loria-auto-video-icon-pause { display: flex; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

/* Mobile poster: hidden by default; desktop poster hidden when mobile variant exists */
.loria-auto-video-poster-mobile  { display: none; }
.loria-auto-video-poster-desktop { display: block; }

@media (max-width: 767px) {
	.loria-auto-video-poster-desktop { display: none; }

	/* Enforce cover on mobile — overrides any global img { height: auto } */
	.loria-auto-video-poster-mobile {
		display: block;
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
		object-position: center !important;
	}

	.loria-auto-video-title {
		font-size: 1.4rem;
	}

	.loria-auto-video-button {
		font-size: 0.875rem;
		padding: 10px 20px;
	}

	/* Pin play/pause 24px from the physical left edge on mobile,
	   regardless of the data-position setting. No logical props involved. */
	.loria-auto-video-playpause[data-position="start"],
	.loria-auto-video-playpause[data-position="center"],
	.loria-auto-video-playpause[data-position="end"] {
		left: 24px;
		right: auto;
		transform: none;
	}
}