/* ============================================= */
/* =============== POPUP WRAPPER ================ */
/* ============================================= */

.po-popup{
	position: fixed;
	inset: 0;

	display: flex;
	align-items: center;
	justify-content: center;

	pointer-events: none;

	z-index: 9999;
}

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

/* ============================================= */
/* ================= OVERLAY ==================== */
/* ============================================= */
/* Fades independently of the inner box, same as the
 * Inline Popup Theme system — the wrapper itself no
 * longer cross-fades, so slide/scale/shake read as
 * their own animation instead of being masked by a
 * second, unconditional opacity transition on top. */

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

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

/* ============================================= */
/* ================= CONTENT ==================== */
/* ============================================= */

.po-popup-inner{
	position: relative;
	z-index: 2;

	width: 90%;
	max-width: var(--po-width, 500px);

	background: var(--po-bg, #fff);
	padding: var(--po-padding, 30px);

	border-radius: var(--po-radius, 10px);
	border: var(--po-border-width, 0) solid var(--po-border-colour, transparent);

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

/* ============================================= */
/* ================= POSITION =================== */
/* ============================================= */
/* "center" (default) keeps the original flex-
 * centred modal behaviour below untouched.
 *
 * left/right/top/bottom are edge-anchored panels,
 * modelled on the Inline Popup Theme system: the
 * inner box is taken out of flex flow and pinned to
 * an edge using independent offset pairs (top+bottom
 * for left/right, left+right for top/bottom) so it
 * can stretch full-height or full-width instead of
 * just floating near a corner.
 * ============================================= */

.po-popup.po-pos-left .po-popup-inner,
.po-popup.po-pos-right .po-popup-inner,
.po-popup.po-pos-top .po-popup-inner,
.po-popup.po-pos-bottom .po-popup-inner{
	position: absolute;
	max-width: none;
}

.po-popup.po-pos-left .po-popup-inner{
	left: var(--po-side, 0px);
	top: var(--po-top, 0px);
	bottom: var(--po-bottom, 0px);
	width: var(--po-width, 500px);
	height: auto;
}

.po-popup.po-pos-right .po-popup-inner{
	right: var(--po-side, 0px);
	top: var(--po-top, 0px);
	bottom: var(--po-bottom, 0px);
	width: var(--po-width, 500px);
	height: auto;
}

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

.po-popup.po-pos-bottom .po-popup-inner{
	bottom: var(--po-edge, 0px);
	left: var(--po-left, 0px);
	right: var(--po-right, 0px);
	width: auto;
}

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

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

/* ============================================= */
/* ================= CLOSE ====================== */
/* ============================================= */

.po-popup-close{
	position: absolute;
	top: 10px;
	right: 10px;
	background: none;
	border: none;
	cursor: pointer;
	font-size: 20px;
}

/* ============================================= */
/* ================= TITLE ====================== */
/* ============================================= */

.po-popup-title{
	margin-bottom: 15px;
}


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

/* ============================================= */
/* =============== ANIMATIONS =================== */
/* ============================================= */

/* SPEED */
.po-popup .po-popup-inner{
	transition-duration: var(--po-speed, 300ms);
}

/* ============================================= */
/* EFFECT LEVELS ================================ */
/* ============================================= */

/* SLIDE EFFECT LEVELS */
.po-slide.po-subtle .po-popup-inner{ transform: translateY(10px); }
.po-slide.po-mild   .po-popup-inner{ transform: translateY(30px); }
.po-slide.po-big    .po-popup-inner{ transform: translateY(60px); }

/* SCALE EFFECT LEVELS */
.po-scale.po-subtle .po-popup-inner{ transform: scale(0.97); }
.po-scale.po-mild   .po-popup-inner{ transform: scale(0.92); }
.po-scale.po-big    .po-popup-inner{ transform: scale(0.85); }

/* ============================================= */
/* ACTIVE STATES ================================ */
/* ============================================= */

/* FADE */
.po-fade .po-popup-inner{
	opacity: 0;
}

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

/* SLIDE — pure transform, no opacity, matching the Inline
   Popup Theme system's slide exactly: it never fades, it's
   only ever invisible because it's positioned off-screen.
   Edge positions (left/right/top/bottom) are already fully
   off-screen at rest via their own transform below, so they
   need nothing else. Center is the one exception — unlike
   Inline, which only builds its element when triggered, a
   campaign popup stays in the DOM at all times, and a small
   centred offset alone wouldn't hide the box while inactive,
   so it keeps its own explicit fade+slide combo. */
.po-slide.active .po-popup-inner{
	transform: translateY(0);
}

.po-popup.po-pos-center.po-slide .po-popup-inner{
	opacity: 0;
}

.po-popup.po-pos-center.po-slide.active .po-popup-inner{
	opacity: 1;
}

/* SLIDE — edge positions slide in from their own edge instead of
   the fixed translateY() above, matching the Inline Popup Theme
   system's direction-aware slide. Distance is the panel's own
   size plus its offset, so it always travels fully on/off screen. */
.po-popup.po-slide.po-pos-left .po-popup-inner{
	transform: translateX(calc(-100% - var(--po-side, 0px)));
}

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

.po-popup.po-slide.po-pos-right .po-popup-inner{
	transform: translateX(calc(100% + var(--po-side, 0px)));
}

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

.po-popup.po-slide.po-pos-top .po-popup-inner{
	transform: translateY(calc(-100% - var(--po-edge, 0px)));
}

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

.po-popup.po-slide.po-pos-bottom .po-popup-inner{
	transform: translateY(calc(100% + var(--po-edge, 0px)));
}

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

/* SCALE */
.po-scale .po-popup-inner{
	opacity: 0;
}

.po-scale.active .po-popup-inner{
	transform: scale(1);
	opacity: 1;
}


/* ============================================= */
/* =============== SHAKE ======================== */
/* ============================================= */

@keyframes po-shake-subtle {
	0% { transform: rotate(0deg); }
	  25% { transform: rotate(3deg); }
	  50% { transform: rotate(0deg); }
	  75% { transform: rotate(-3deg); }
	  100% { transform: rotate(0deg); }
}

@keyframes po-shake-mild {
	0% { transform: rotate(0deg); }
	  25% { transform: rotate(6deg); }
	  50% { transform: rotate(0deg); }
	  75% { transform: rotate(-6deg); }
	  100% { transform: rotate(0deg); }
}

@keyframes po-shake-big {
	0% { transform: rotate(0deg); }
	  25% { transform: rotate(9deg); }
	  50% { transform: rotate(0deg); }
	  75% { transform: rotate(-9deg); }
	  100% { transform: rotate(0deg); }
}



/* SHAKE BASE */
.po-shake .po-popup-inner{
	opacity: 0;
}

/* SHAKE ACTIVE */
.po-shake.active .po-popup-inner{
	opacity: 1;
}

/* EFFECT LEVELS */
.po-shake.po-subtle.active .po-popup-inner{
	animation: po-shake-subtle var(--po-speed, 300ms) ease 2;
}

.po-shake.po-mild.active .po-popup-inner{
	animation: po-shake-mild var(--po-speed, 300ms) ease 2;
}

.po-shake.po-big.active .po-popup-inner{
	animation: po-shake-big var(--po-speed, 300ms) ease 2;
}