/* =====================================================
 * 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 */
}


/* =====================================================
 * 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;
}

/* 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;
}

/* 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);
}


/* =====================================================
 * 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;
}