/**
 * Pop-Up overlay styles. Deliberately minimal so the block content inside the
 * pop-up drives the look; this just handles the modal shell and centering.
 */

.epop-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	opacity: 0;
	transition: opacity 0.25s ease;
}

.epop-overlay[hidden] {
	display: none;
}

.epop-overlay.is-open {
	opacity: 1;
}

.epop-backdrop {
	position: absolute;
	inset: 0;
	background: rgba( 0, 0, 0, 0.6 );
}

/*
 * The shell is intentionally transparent and padding-free: the Cover block
 * inside the pop-up supplies the background and padding. overflow:hidden clips
 * the Cover's square corners to the shell's rounded corners.
 */
.epop-dialog {
	position: relative;
	z-index: 1;
	max-width: 750px;
	width: 100%;
	max-height: 90vh;
	overflow: hidden auto;
	border-radius: var(--container-border-radius, 1rem);
	box-shadow: 0 10px 40px rgba( 0, 0, 0, 0.3 );
	transform: translateY( 8px );
	transition: transform 0.25s ease;
}

.epop-overlay.is-open .epop-dialog {
	transform: translateY( 0 );
}

/*
 * Overlaid on top of the block content in the top-right corner. z-index keeps
 * it above the Cover block, and the translucent chip stays legible on top of
 * whatever background the Cover uses (light or dark).
 */
.epop-close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border: 0;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.45 );
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.epop-close:hover,
.epop-close:focus {
	background: rgba( 0, 0, 0, 0.7 );
}

.epop-content > :first-child {
	margin-top: 0;
}

.epop-content > :last-child {
	margin-bottom: 0;
}

@media ( prefers-reduced-motion: reduce ) {
	.epop-overlay,
	.epop-dialog {
		transition: none;
	}
}