.wakoo-popup { position: fixed; inset: 0; z-index: 99999; display: none; }
.wakoo-popup.is-open { display: block; }
html.wakoo-popup-lock { overflow: hidden; }

.wakoo-popup__overlay {
	position: absolute; inset: 0;
	background: rgba( 10, 12, 24, 0.6 );
	animation: wakoo-popup-fade 0.25s ease;
}

.wakoo-popup__box {
	position: absolute;
	width: calc( 100% - 32px );
	max-height: 90vh;
	overflow: auto;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 30px 80px rgba( 0, 0, 0, 0.35 );
}

/* positions */
.wakoo-popup--pos-center .wakoo-popup__box { top: 50%; left: 50%; transform: translate( -50%, -50% ); }
.wakoo-popup--pos-top .wakoo-popup__box { top: 24px; left: 50%; transform: translateX( -50% ); }
.wakoo-popup--pos-bottom .wakoo-popup__box { bottom: 24px; left: 50%; transform: translateX( -50% ); }
.wakoo-popup--pos-top-left .wakoo-popup__box { top: 24px; left: 24px; }
.wakoo-popup--pos-top-right .wakoo-popup__box { top: 24px; right: 24px; }
.wakoo-popup--pos-bottom-left .wakoo-popup__box { bottom: 24px; left: 24px; }
.wakoo-popup--pos-bottom-right .wakoo-popup__box { bottom: 24px; right: 24px; }

.wakoo-popup__close {
	position: absolute; top: 8px; right: 10px;
	width: 34px; height: 34px;
	border: 0; border-radius: 50%;
	background: rgba( 0, 0, 0, 0.06 );
	color: #333; font-size: 22px; line-height: 1;
	cursor: pointer; z-index: 2;
}
.wakoo-popup__close:hover { background: rgba( 0, 0, 0, 0.12 ); }
.wakoo-popup__content { padding: 0; }

/* entrance animations */
.wakoo-popup.is-open .wakoo-popup__box { animation: wakoo-popup-anim 0.3s cubic-bezier( 0.2, 0.8, 0.2, 1 ); }
.wakoo-popup--anim-fade.is-open .wakoo-popup__box { animation-name: wakoo-popup-fade; }
.wakoo-popup--anim-zoom.wakoo-popup--pos-center.is-open .wakoo-popup__box { animation-name: wakoo-popup-zoom-c; }
.wakoo-popup--anim-zoom.is-open .wakoo-popup__box { animation-name: wakoo-popup-zoom; }
.wakoo-popup--anim-slide-up.is-open .wakoo-popup__box { animation-name: wakoo-popup-up; }
.wakoo-popup--anim-slide-down.is-open .wakoo-popup__box { animation-name: wakoo-popup-down; }

@keyframes wakoo-popup-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wakoo-popup-zoom-c { from { opacity: 0; transform: translate( -50%, -50% ) scale( 0.9 ); } to { opacity: 1; transform: translate( -50%, -50% ) scale( 1 ); } }
@keyframes wakoo-popup-zoom { from { opacity: 0; transform: scale( 0.9 ); } to { opacity: 1; transform: scale( 1 ); } }
@keyframes wakoo-popup-up { from { opacity: 0; transform: translateY( 40px ); } to { opacity: 1; transform: translateY( 0 ); } }
@keyframes wakoo-popup-anim { from { opacity: 0; } to { opacity: 1; } }

@media ( max-width: 480px ) {
	.wakoo-popup__box { width: calc( 100% - 20px ); }
}