/* Febzor popups: the full-screen wrapper (overlay), the box and the close button. */
.febzor-popup-modal {
	--febzor-popup-duration: 1.2s;
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	background-color: rgba(15, 23, 42, 0.8);
	-webkit-tap-highlight-color: transparent;
}

.febzor-popup-modal[hidden] {
	display: none;
}

.febzor-popup-modal:focus {
	outline: none;
}

/* Overlay hidden: the page stays clickable around the box. */
.febzor-popup-modal.febzor-popup-no-overlay {
	background: transparent;
	pointer-events: none;
}

.febzor-popup-modal.febzor-popup-no-overlay .febzor-popup-box,
.febzor-popup-modal.febzor-popup-no-overlay > .febzor-popup-close {
	pointer-events: auto;
}

.febzor-popup-box {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	width: 640px;
	max-width: 100%;
	max-height: 100vh;
	overflow: auto;
	background-color: #fff;
	box-shadow: 2px 8px 23px 3px rgba(15, 23, 42, 0.2);
}

.febzor-popup-content {
	width: 100%;
	min-width: 0;
}

.febzor-popup-content > .febzor-document {
	width: 100%;
}

/* Two classes: themes style every button (borders, colours, hover backgrounds). */
.febzor-popup-modal .febzor-popup-close {
	position: absolute;
	top: 20px;
	inset-inline-end: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: content-box;
	width: 1em;
	height: 1em;
	margin: 0;
	padding: 4px;
	border: 0;
	border-radius: 4px;
	background: transparent;
	color: #1e293b;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	transition: color 0.2s, background-color 0.2s;
}

.febzor-popup-modal .febzor-popup-close:hover,
.febzor-popup-modal .febzor-popup-close:focus {
	border: 0;
	background: transparent;
	color: #0f172a;
	box-shadow: none;
}

.febzor-popup-close svg {
	display: block;
	width: 1em;
	height: 1em;
}

.febzor-popup-modal .febzor-popup-close:focus-visible {
	outline: 2px solid #2563eb;
	outline-offset: 2px;
}

.febzor-popup-no-close .febzor-popup-close,
.febzor-popup-modal .febzor-popup-close.is-waiting {
	display: none;
}

/* Outside: the button sits on the wrapper, against the screen's corner. */
.febzor-popup-modal > .febzor-popup-close,
.febzor-popup-modal > .febzor-popup-close:hover,
.febzor-popup-modal > .febzor-popup-close:focus {
	position: fixed;
	color: #fff;
}

/* Animations: an entrance class while opening, the exit played backwards while closing. */
.febzor-popup-box.febzor-animated {
	animation-duration: var(--febzor-popup-duration);
}

.febzor-popup-box.is-leaving {
	animation-direction: reverse;
	animation-fill-mode: both;
}

@media (prefers-reduced-motion: reduce) {
	.febzor-popup-box.febzor-animated,
	.febzor-popup-box.is-leaving {
		animation: none !important;
	}
}

body.febzor-popup-lock {
	overflow: hidden;
	max-height: 100vh;
}

/* The ad blocker test element. */
.febzor-popup-bait {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
}

/* The editor's canvas: the popup is open while it's designed. */
.febzor-popup-modal.is-editor {
	position: fixed;
}

.febzor-popup-modal.is-editor .febzor-popup-close {
	cursor: default;
}

.febzor-popup-modal.is-editor .febzor-popup-content {
	min-height: 60px;
}
