/* =====================================================
 * PIXELATED ORANGE — INLINE POPUPS
 * =====================================================
 * Handles the shell built dynamically by JS.
 * All positioning, animation and sizing is driven
 * by CSS custom properties set inline by the JS.
 * ===================================================== */


/* =====================================================
 * SHELL — full-screen fixed overlay container
 * ===================================================== */

.po-inline-popup {
	position: fixed;
	inset: 0;
	z-index: 9999;
	pointer-events: none;
}

.po-inline-popup.active {
	pointer-events: auto;
}


/* =====================================================
 * OVERLAY
 * ===================================================== */

.po-inline-overlay {
	position: absolute;
	inset: 0;
	background: var(--po-il-overlay, rgba(0, 0, 0, 0.5));
	opacity: 0;
	transition: opacity var(--po-il-speed, 300ms) ease;
}

.po-inline-popup.active .po-inline-overlay {
	opacity: 1;
}


/* =====================================================
 * INNER — the visible box
 * ===================================================== */

.po-inline-inner {
	position: absolute;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;

	width: var(--po-il-width, 600px);
	max-width: 100%;

	background: var(--po-il-bg, #fff);
	padding: var(--po-il-padding, 20px);
	border-radius: var(--po-il-radius, 0px);
	border: var(--po-il-border-width, 0px) solid var(--po-il-border-color, transparent);

	transition: transform var(--po-il-speed, 300ms) ease;
}

.po-inline-close {
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
	line-height: 1;
	padding: 0;
	z-index: 1;
}

.po-inline-content {
	/* Content injected here */
}

/* Images default to inline, which leaves a few px gap underneath from the
 * line box - block removes that without needing to touch the wrapping div
 * markup (that div and its style="" come from the page content itself). */
.po-inline-content img {
	display: block;
}


/* =====================================================
 * POSITION — LEFT PANEL
 * =====================================================
 * Fixed to left edge, full height minus top/bottom offsets.
 * side = distance from the left edge.
 * ===================================================== */

.po-inline-popup.po-il-left .po-inline-inner {
	left: var(--po-il-side, 0px);
	top: var(--po-il-top, 0px);
	bottom: var(--po-il-bottom, 0px);
	height: auto; /* height driven by top/bottom */
	max-height: none;
	/* The base .po-inline-inner rule above caps max-width at a flat 100%,
	   but this variant also sits var(--po-il-side) in from the left edge -
	   a fixed width box at exactly 100% of the viewport plus that left
	   offset runs past the right edge of the screen. Subtracting twice the
	   side offset keeps the box (plus its matching gap on the far side)
	   fully on screen. */
	max-width: calc(100% - (var(--po-il-side, 0px) * 2));
}

/* If a fixed height is set, cap it — top/bottom still control position */
.po-inline-popup.po-il-left .po-inline-inner.has-height {
	max-height: var(--po-il-height);
}


/* =====================================================
 * POSITION — RIGHT PANEL
 * ===================================================== */

.po-inline-popup.po-il-right .po-inline-inner {
	right: var(--po-il-side, 0px);
	top: var(--po-il-top, 0px);
	bottom: var(--po-il-bottom, 0px);
	height: auto;
	max-height: none;
	/* Same fix as the left variant above - see that comment. */
	max-width: calc(100% - (var(--po-il-side, 0px) * 2));
}

/* If a fixed height is set, cap it — top/bottom still control position */
.po-inline-popup.po-il-right .po-inline-inner.has-height {
	max-height: var(--po-il-height);
}


/* =====================================================
 * POSITION — BOTTOM BAR
 * =====================================================
 * Pinned to bottom, spans width minus left/right offsets.
 * edge = distance from the bottom edge.
 * ===================================================== */

.po-inline-popup.po-il-bottom .po-inline-inner {
	bottom: var(--po-il-edge, 0px);
	left: var(--po-il-left, 0px);
	right: var(--po-il-right, 0px);
	width: auto; /* width driven by left/right */
	max-width: none;
}

/* If a fixed height is set */
.po-inline-popup.po-il-bottom .po-inline-inner.has-height {
	max-height: var(--po-il-height);
}


/* =====================================================
 * POSITION — TOP BAR
 * ===================================================== */

.po-inline-popup.po-il-top .po-inline-inner {
	top: var(--po-il-edge, 0px);
	left: var(--po-il-left, 0px);
	right: var(--po-il-right, 0px);
	width: auto;
	max-width: none;
}

.po-inline-popup.po-il-top .po-inline-inner.has-height {
	max-height: var(--po-il-height);
}


/* =====================================================
 * POSITION — CENTER MODAL
 * =====================================================
 * Centered via top 50% / left 50% + translate.
 * Width controlled by --po-il-width.
 * ===================================================== */

.po-inline-popup.po-il-center .po-inline-inner {
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: 90vh;
}

.po-inline-popup.po-il-center .po-inline-inner.has-height {
	height: var(--po-il-height);
}



/* =====================================================
 * FULL HEIGHT — theme setting "set full height"
 * =====================================================
 * Images in the popup scale down to fit 80vh instead of
 * making the popup scroll. Width follows the image's own
 * ratio (no stretching or cropping) and the image is
 * centred in the box. Beats Owl's
 * `.owl-carousel .owl-item img { width: 100% }` on
 * specificity, so no !important needed.
 * ===================================================== */

.po-inline-popup.po-il-full-height .po-inline-content img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 80vh;
	margin-inline: auto;
}

/* No scrollbar in full-height mode. Carousels (Owl) measure their
 * width before the slides are laid side by side, while every slide is
 * still stacked and the box briefly overflows - a visible scrollbar at
 * that moment makes every slide 15px narrower than the popup. Content
 * that genuinely overflows can still be scrolled. */
.po-inline-popup.po-il-full-height .po-inline-inner {
	scrollbar-width: none;
}

.po-inline-popup.po-il-full-height .po-inline-inner::-webkit-scrollbar {
	display: none;
}

/* An image's own wrapper hugs the scaled image, so rounded /
 * overflow-hidden wrappers still clip its corners. */
.po-inline-popup.po-il-full-height .po-inline-content div:has(> img:only-child) {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}


/* =====================================================
 * ANIMATION — FADE
 * ===================================================== */

.po-inline-popup.po-il-anim-fade .po-inline-inner {
	opacity: 0;
	transition: opacity var(--po-il-speed, 300ms) ease;
}

.po-inline-popup.po-il-anim-fade.active .po-inline-inner {
	opacity: 1;
}


/* =====================================================
 * ANIMATION — SLIDE
 * Direction of slide depends on position.
 * ===================================================== */

/* Left panel slides in from the left */
.po-inline-popup.po-il-left.po-il-anim-slide .po-inline-inner {
	transform: translateX(calc(-100% - var(--po-il-side, 0px)));
}

.po-inline-popup.po-il-left.po-il-anim-slide.active .po-inline-inner {
	transform: translateX(0);
}

/* Right panel slides in from the right */
.po-inline-popup.po-il-right.po-il-anim-slide .po-inline-inner {
	transform: translateX(calc(100% + var(--po-il-side, 0px)));
}

.po-inline-popup.po-il-right.po-il-anim-slide.active .po-inline-inner {
	transform: translateX(0);
}

/* Bottom bar slides up from bottom */
.po-inline-popup.po-il-bottom.po-il-anim-slide .po-inline-inner {
	transform: translateY(calc(100% + var(--po-il-edge, 0px)));
}

.po-inline-popup.po-il-bottom.po-il-anim-slide.active .po-inline-inner {
	transform: translateY(0);
}

/* Top bar slides down from top */
.po-inline-popup.po-il-top.po-il-anim-slide .po-inline-inner {
	transform: translateY(calc(-100% - var(--po-il-edge, 0px)));
}

.po-inline-popup.po-il-top.po-il-anim-slide.active .po-inline-inner {
	transform: translateY(0);
}

/* Center — slide up from slightly below */
.po-inline-popup.po-il-center.po-il-anim-slide .po-inline-inner {
	transform: translate(-50%, calc(-50% + 40px));
}

.po-inline-popup.po-il-center.po-il-anim-slide.active .po-inline-inner {
	transform: translate(-50%, -50%);
}


/* =====================================================
 * SCROLL LOCK
 * ===================================================== */

body.po-inline-no-scroll {
	overflow: hidden;
}