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

/* Left/right edge-anchored popups use a fixed width plus a single-side
   offset (--po-side), with nothing bounding the other side - on a narrow
   screen the fixed width can easily be wider than the viewport itself,
   pushing the popup off the opposite edge. Capping width to the viewport
   minus the offset on both sides (mirroring the gap the anchored side
   already has) keeps it fully on screen without needing a separate mobile
   width setting. */
@media only screen and (max-width: 767px){
	.po-popup.po-pos-left .po-popup-inner,
	.po-popup.po-pos-right .po-popup-inner{
		max-width: calc(100% - (var(--po-side, 0px) * 2));
	}
}

.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;
}