/* Nexa Popups: front end. Also used by the editor canvas so what you see is what you get. */
.nxp {
	--nxp-w: 560px; --nxp-h: 0px; --nxp-bg: #fff; --nxp-radius: 12px;
	--nxp-pad: 32px; --nxp-shadow: 0 20px 60px rgba(0,0,0,.35); --nxp-btn: #111827;
	--nxp-btn-color: #fff; --nxp-close: #6b7280; --nxp-ov: rgba(0,0,0,.6); --nxp-from: none;
	/* Not defaulted on purpose: --nxp-color, --nxp-font, --nxp-fs and the --nxp-h-* heading vars.
	   When unset the popup inherits the site's own (Divi) typography. */
	position: fixed; inset: 0; z-index: 999999;
	display: none; align-items: center; justify-content: center;
	padding: 20px; box-sizing: border-box;
}
.nxp *, .nxp *::before, .nxp *::after { box-sizing: border-box; }
.nxp.is-open { display: flex; }

.nxp[data-pos^="top"] { align-items: flex-start; }
.nxp[data-pos^="bottom"] { align-items: flex-end; }
.nxp[data-pos$="left"] { justify-content: flex-start; }
.nxp[data-pos$="right"] { justify-content: flex-end; }

.nxp__overlay {
	position: absolute; inset: 0; background: var(--nxp-ov);
	opacity: 0; transition: opacity .22s ease;
}
.nxp.is-visible .nxp__overlay { opacity: 1; }
.nxp--no-overlay { pointer-events: none; }
.nxp--no-overlay .nxp__box { pointer-events: auto; }

.nxp__box {
	position: relative; width: min(var(--nxp-w), 100%); min-height: var(--nxp-h);
	max-height: calc(100vh - 40px); max-height: calc(100dvh - 40px); overflow: auto;
	background: var(--nxp-bg);
	font-family: var(--nxp-font, inherit); font-size: var(--nxp-fs, inherit); color: var(--nxp-color, inherit);
	border-radius: var(--nxp-radius); box-shadow: var(--nxp-shadow);
	padding: var(--nxp-pad); outline: none;
	opacity: 0; transform: var(--nxp-from);
	transition: opacity .22s ease, transform .22s ease;
	-webkit-overflow-scrolling: touch;
}
.nxp.is-visible .nxp__box { opacity: 1; transform: none; }

.nxp--anim-slide-up { --nxp-from: translateY(40px); }
.nxp--anim-slide-down { --nxp-from: translateY(-40px); }
.nxp--anim-zoom { --nxp-from: scale(.92); }
.nxp--anim-none .nxp__box, .nxp--anim-none .nxp__overlay { transition: none; }

.nxp__close {
	position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; padding: 0;
	display: flex; align-items: center; justify-content: center;
	background: transparent; border: 0; border-radius: 50%; cursor: pointer;
	color: var(--nxp-close); line-height: 1; z-index: 2;
}
.nxp__close:hover { background: rgba(0,0,0,.07); }
.nxp__close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.nxp--no-close .nxp__close { display: none; }

/* Form controls and buttons never pick their own font. */
.nxp button, .nxp input, .nxp select, .nxp textarea { font-family: inherit; }

/* Layout only. Fonts, sizes and colours come from the site (Divi) in "site" mode. */
.nxp__content > :first-child { margin-top: 0; }
.nxp__content > :last-child { margin-bottom: 0; }
.nxp__content h1, .nxp__content h2, .nxp__content h3, .nxp__content h4 { margin: 0 0 .6em; font-weight: 700; }
.nxp__content p { margin: 0 0 1em; }
.nxp__content img, .nxp__content video, .nxp__content iframe { max-width: 100%; height: auto; border-radius: 6px; }

/* Custom typography mode only. */
.nxp--type-custom:not(.nxp--h-custom) .nxp__content h1, .nxp--type-custom:not(.nxp--h-custom) .nxp__content h2,
.nxp--type-custom:not(.nxp--h-custom) .nxp__content h3, .nxp--type-custom:not(.nxp--h-custom) .nxp__content h4 {
	font-family: inherit; color: inherit; line-height: 1.2;
}

/* Custom heading style (set in the editor, or copied from a heading on the site). */
.nxp--h-custom .nxp__content h1, .nxp--h-custom .nxp__content h2,
.nxp--h-custom .nxp__content h3, .nxp--h-custom .nxp__content h4 {
	font-family: var(--nxp-h-font, inherit); font-size: var(--nxp-h-size, 40px); font-weight: var(--nxp-h-weight, 700);
	text-transform: var(--nxp-h-tt, none); color: var(--nxp-h-color, inherit); line-height: var(--nxp-h-lh, 1.15);
	letter-spacing: normal;
}
.nxp--type-custom .nxp__content a:not(.nxp-btn) { color: inherit; text-decoration: underline; }

.nxp-btn, .nxp__content a.nxp-btn {
	display: inline-block; padding: .7em 1.4em; border-radius: 8px; font-weight: 600; text-decoration: none;
	font-family: inherit; background: var(--nxp-btn); color: var(--nxp-btn-color) !important; cursor: pointer;
}
.nxp-btn:hover { opacity: .9; }

html.nxp-lock { overflow: hidden !important; padding-right: var(--nxp-sbw, 0); }

@media (max-width: 600px) {
	.nxp { padding: 12px; }
	.nxp__box { padding: calc(var(--nxp-pad) * .7); }
}
@media (prefers-reduced-motion: reduce) {
	.nxp__box, .nxp__overlay { transition: none; }
}