/**
 * Popup Modal — front-end styles.
 *
 * The <dialog> is a transparent, full-viewport scroll container. Inside it a
 * centred column holds the close button and the panel. Short content sits
 * vertically centred; tall content scrolls the whole dialog.
 *
 * Panel defaults are wrapped in :where() so block supports (colour, padding)
 * and theme CSS override them without specificity fights.
 */

dialog.popup-modal {
	--popup-modal-gutter: clamp(1rem, 3vw, 2rem);
	position: fixed;
	inset: 0;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
}

dialog.popup-modal[open] {
	display: block;
	animation: popup-modal-fade 0.2s ease-out;
}

dialog.popup-modal::backdrop {
	background: rgb(0 0 0 / 0.6);
	animation: popup-modal-fade 0.2s ease-out;
}

/* Centred column: close button + panel */
dialog.popup-modal .popup-modal__inner {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: min(var(--popup-modal-width, 720px), 100% - (2 * var(--popup-modal-gutter)));
	min-height: 100%;
	margin-inline: auto;
	padding-block: var(--popup-modal-gutter);
}

dialog.popup-modal[open] .popup-modal__inner {
	animation: popup-modal-in 0.2s ease-out;
}

/* Close button — above the panel, stays visible while scrolling */
dialog.popup-modal .popup-modal__close {
	position: sticky;
	top: 0.75rem;
	z-index: 1;
	align-self: flex-end;
	flex: none;
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-bottom: 0.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--wp--preset--color--contrast, #1e1e1e);
	color: var(--wp--preset--color--base, #fff);
	box-shadow: 0 0.25rem 1rem rgb(0 0 0 / 0.25);
	cursor: pointer;
	transition: transform 0.15s ease;
}

dialog.popup-modal .popup-modal__close:hover {
	transform: scale(1.06);
}

dialog.popup-modal .popup-modal__close:focus-visible {
	outline: 2px solid var(--wp--preset--color--base, #fff);
	outline-offset: 3px;
}

/* Panel (block wrapper) */
:where(dialog.popup-modal .popup-modal__panel) {
	box-sizing: border-box;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	border-radius: 0.5rem;
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #1e1e1e);
	box-shadow: 0 1.5rem 4rem rgb(0 0 0 / 0.3);
}

/* Spacing between inner blocks (shared with the editor) */
.wp-block-edaptive-popup-modal .popup-modal__content > * {
	margin-block: 0;
}

.wp-block-edaptive-popup-modal .popup-modal__content > * + * {
	margin-block-start: var(--wp--style--block-gap, 1.25rem);
}

.wp-block-edaptive-popup-modal .popup-modal__content iframe {
	max-width: 100%;
}

/* Page scroll lock while a modal is open (scrollbar width compensated) */
html.popup-modal-is-open {
	overflow: hidden;
	padding-right: var(--popup-modal-scrollbar, 0);
}

@keyframes popup-modal-in {
	from {
		opacity: 0;
		transform: translateY(0.75rem) scale(0.98);
	}
}

@keyframes popup-modal-fade {
	from {
		opacity: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	dialog.popup-modal[open],
	dialog.popup-modal[open] .popup-modal__inner,
	dialog.popup-modal::backdrop {
		animation: none;
	}
}