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

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

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

	opacity: 0;
	visibility: hidden;
	pointer-events: none;

	transition: opacity 0.3s ease, visibility 0.3s ease;

	z-index: 9999;
}

.po-popup.active{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

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

.po-popup-overlay{
	position: absolute;
	inset: 0;
	background: var(--po-overlay, rgba(0,0,0,0.5));
	z-index: 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);

	opacity: 0;

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

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

/* ============================================= */
/* ================= POSITION =================== */
/* ============================================= */

.po-popup.v-middle{
	align-items: center;
}

.po-popup.v-bottom{
	align-items: flex-end;
}

.po-popup.h-center{
	justify-content: center;
}

.po-popup.h-left{
	justify-content: flex-start;
}

.po-popup.h-right{
	justify-content: flex-end;
}

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

/* offsets */
.po-popup.v-top{ align-items:flex-start; }
.po-popup.v-bottom{ align-items:flex-end; }

.po-popup.h-left{ justify-content:flex-start; }
.po-popup.h-right{ justify-content:flex-end; }

.po-popup-inner{
	top: var(--po-top, auto);
	bottom: var(--po-bottom, auto);
	left: var(--po-left, auto);
	right: var(--po-right, auto);
}



/* ============================================= */
/* =============== 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 */
.po-slide .po-popup-inner{
	opacity: 0;
}

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

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