/**
 * EME Custom Popup Builder — front-end styles.
 *
 * Scoped under .eme-popup / .eme-popup-open so the plugin cannot affect
 * unrelated theme layout. Everything uses CSS custom properties so a theme
 * can override without !important.
 */

.eme-popup {
	--eme-popup-width: 560px;
	--eme-popup-bg: #ffffff;
	--eme-popup-fg: #1f2933;
	--eme-popup-radius: 8px;
	--eme-popup-shadow: 0 20px 50px rgba(15, 23, 42, 0.28);
	--eme-popup-overlay: rgba(15, 23, 42, 0.55);
	--eme-popup-accent: #0b6e4f;
	--eme-popup-gap: 16px;
	--eme-popup-z: 999999;

	display: none;
	box-sizing: border-box;
	font-family: inherit;
	color: var(--eme-popup-fg);
}

.eme-popup.is-open {
	display: flex;
}

.eme-popup *,
.eme-popup *::before,
.eme-popup *::after {
	box-sizing: inherit;
}

/* -------------------------------------------------------------------------
 * Modal (centred overlay)
 * ---------------------------------------------------------------------- */

.eme-popup--modal {
	position: fixed;
	inset: 0;
	z-index: var(--eme-popup-z);
	/* Both alignment values are emitted only when the editor changed them, so
	 * the fallbacks here are the unchanged appearance. The mobile rule below
	 * has a different fallback for vertical alignment, which is why the
	 * default is never written into a custom property. */
	align-items: var(--eme-popup-align-v, center);
	justify-content: var(--eme-popup-align-h, center);
	padding: calc(24px + var(--eme-popup-offset-y, 0px)) calc(24px + var(--eme-popup-offset-x, 0px));
	background: var(--eme-popup-overlay);
	/* A maximum height larger than the viewport would otherwise put the
	 * close button out of reach with no way to scroll to it. */
	overflow-y: auto;
}

.eme-popup--modal .eme-popup__dialog {
	position: relative;
	width: 100%;
	max-width: var(--eme-popup-width);
	max-height: var(--eme-popup-max-height, calc(100vh - 48px - 2 * var(--eme-popup-offset-y, 0px)));
	overflow-y: auto;
	background: var(--eme-popup-bg);
	border-radius: var(--eme-popup-radius);
	box-shadow: var(--eme-popup-shadow);
	padding: 32px 28px 28px;
}

/* Optional bounds apply to every layout, so they live on the dialog itself
 * rather than being repeated in each layout block. */
.eme-popup__dialog {
	min-width: var(--eme-popup-min-width, 0px);
	min-height: var(--eme-popup-min-height, 0px);
}

/* -------------------------------------------------------------------------
 * Banners
 * ---------------------------------------------------------------------- */

.eme-popup--banner_top,
.eme-popup--banner_bottom {
	position: fixed;
	left: 0;
	right: 0;
	z-index: var(--eme-popup-z);
	justify-content: var(--eme-popup-align-h, center);
	padding: calc(var(--eme-popup-gap) + var(--eme-popup-offset-y, 0px)) calc(var(--eme-popup-gap) + var(--eme-popup-offset-x, 0px));
}

.eme-popup--banner_top {
	top: 0;
}

.eme-popup--banner_bottom {
	bottom: 0;
}

.eme-popup--banner_top .eme-popup__dialog,
.eme-popup--banner_bottom .eme-popup__dialog {
	position: relative;
	width: 100%;
	max-width: var(--eme-popup-max-width, var(--eme-popup-width));
	/* Without a height cap a long banner grows past the viewport, which puts
	 * the close button off-screen and leaves the content unreachable. Cap it to
	 * the space the banner's own padding leaves and scroll inside instead. */
	max-height: var(--eme-popup-max-height, calc(100vh - 2 * var(--eme-popup-gap) - 2 * var(--eme-popup-offset-y, 0px)));
	overflow-y: auto;
	background: var(--eme-popup-bg);
	border-radius: var(--eme-popup-radius);
	box-shadow: var(--eme-popup-shadow);
	padding: 24px 48px 24px 24px;
}

/* -------------------------------------------------------------------------
 * Fullscreen
 * ---------------------------------------------------------------------- */

.eme-popup--fullscreen {
	position: fixed;
	inset: 0;
	z-index: var(--eme-popup-z);
	align-items: var(--eme-popup-align-v, center);
	justify-content: var(--eme-popup-align-h, center);
	background: var(--eme-popup-bg);
	padding: calc(24px + var(--eme-popup-offset-y, 0px)) calc(24px + var(--eme-popup-offset-x, 0px));
	overflow-y: auto;
}

.eme-popup--fullscreen .eme-popup__dialog {
	position: relative;
	width: 100%;
	max-width: var(--eme-popup-max-width, 960px);
	max-height: var(--eme-popup-max-height, calc(100vh - 48px - 2 * var(--eme-popup-offset-y, 0px)));
	overflow-y: auto;
}

/* -------------------------------------------------------------------------
 * Shared internals
 * ---------------------------------------------------------------------- */

.eme-popup__title {
	margin: 0 0 12px;
	font-size: 1.25rem;
	line-height: 1.3;
	font-weight: 600;
}

.eme-popup__body > *:first-child {
	margin-top: 0;
}

.eme-popup__body > *:last-child {
	margin-bottom: 0;
}

.eme-popup__close {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 36px;
	height: 36px;
	padding: 0;
	line-height: 1;
	font-size: 24px;
	cursor: pointer;
	background: transparent;
	border: 0;
	border-radius: 50%;
	color: inherit;
	opacity: 0.6;
	transition: opacity 0.15s ease, background-color 0.15s ease;
}

.eme-popup__close:hover,
.eme-popup__close:focus {
	opacity: 1;
	background: rgba(15, 23, 42, 0.08);
}

.eme-popup__close:focus-visible {
	outline: 2px solid var(--eme-popup-accent);
	outline-offset: 2px;
}

/* Lock background scroll while a modal or fullscreen popup is open. */
html.eme-popup-open,
html.eme-popup-open body {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
 * Animations
 *
 * Selected with attribute selectors rather than an inline animation-name:
 * a custom property cannot be used as a keyframes identifier in every
 * browser this plugin supports. The script adds .is-closing and holds it for
 * the configured duration before removing .is-open, which is what gives the
 * exit animation time to run.
 * ---------------------------------------------------------------------- */

@keyframes eme-popup-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes eme-popup-fade-out {
	from { opacity: 1; }
	to { opacity: 0; }
}

@keyframes eme-popup-slide-up-in {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}

@keyframes eme-popup-slide-up-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(24px); }
}

@keyframes eme-popup-slide-down-in {
	from { opacity: 0; transform: translateY(-24px); }
	to { opacity: 1; transform: none; }
}

@keyframes eme-popup-slide-down-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: translateY(-24px); }
}

@keyframes eme-popup-zoom-in {
	from { opacity: 0; transform: scale(0.94); }
	to { opacity: 1; transform: none; }
}

@keyframes eme-popup-zoom-out {
	from { opacity: 1; transform: none; }
	to { opacity: 0; transform: scale(0.94); }
}

.eme-popup.is-open[data-eme-anim-in="fade"] .eme-popup__dialog {
	animation: eme-popup-fade-in var(--eme-popup-duration, 240ms) var(--eme-popup-easing, ease-out) both;
}

.eme-popup.is-open[data-eme-anim-in="slide-up"] .eme-popup__dialog {
	animation: eme-popup-slide-up-in var(--eme-popup-duration, 240ms) var(--eme-popup-easing, ease-out) both;
}

.eme-popup.is-open[data-eme-anim-in="slide-down"] .eme-popup__dialog {
	animation: eme-popup-slide-down-in var(--eme-popup-duration, 240ms) var(--eme-popup-easing, ease-out) both;
}

.eme-popup.is-open[data-eme-anim-in="zoom"] .eme-popup__dialog {
	animation: eme-popup-zoom-in var(--eme-popup-duration, 240ms) var(--eme-popup-easing, ease-out) both;
}

.eme-popup.is-closing[data-eme-anim-out="fade"] .eme-popup__dialog {
	animation: eme-popup-fade-out var(--eme-popup-duration, 240ms) var(--eme-popup-easing, ease-out) both;
}

.eme-popup.is-closing[data-eme-anim-out="slide-up"] .eme-popup__dialog {
	animation: eme-popup-slide-up-out var(--eme-popup-duration, 240ms) var(--eme-popup-easing, ease-out) both;
}

.eme-popup.is-closing[data-eme-anim-out="slide-down"] .eme-popup__dialog {
	animation: eme-popup-slide-down-out var(--eme-popup-duration, 240ms) var(--eme-popup-easing, ease-out) both;
}

.eme-popup.is-closing[data-eme-anim-out="zoom"] .eme-popup__dialog {
	animation: eme-popup-zoom-out var(--eme-popup-duration, 240ms) var(--eme-popup-easing, ease-out) both;
}

/* A popup on its way out must not swallow the click that dismissed it. */
.eme-popup.is-closing {
	pointer-events: none;
}

/* -------------------------------------------------------------------------
 * Reduced motion
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.eme-popup__close {
		transition: none;
	}

	/* Same specificity as the animation rules above — three classes plus an
	 * attribute — and later in the file, so this wins without !important. */
	.eme-popup.is-open[data-eme-anim-in] .eme-popup__dialog,
	.eme-popup.is-closing[data-eme-anim-out] .eme-popup__dialog {
		animation: none;
	}
}

/* -------------------------------------------------------------------------
 * Small screens
 * ---------------------------------------------------------------------- */

@media (max-width: 600px) {
	.eme-popup--modal {
		padding: calc(12px + var(--eme-popup-offset-y, 0px)) calc(12px + var(--eme-popup-offset-x, 0px));
		/* Differs from the desktop fallback on purpose: a centred modal on a
		 * phone sits under the thumb, so the default is the bottom edge. An
		 * explicit vertical alignment still wins. */
		align-items: var(--eme-popup-align-v, flex-end);
	}

	.eme-popup--modal .eme-popup__dialog {
		max-width: none;
		max-height: var(--eme-popup-max-height, calc(100vh - 24px - 2 * var(--eme-popup-offset-y, 0px)));
		padding: 24px 20px 20px;
	}

	.eme-popup--banner_top .eme-popup__dialog,
	.eme-popup--banner_bottom .eme-popup__dialog {
		padding: 16px 44px 16px 16px;
	}
}