/* Full-bleed: the dialog imposes no size, padding, or clipping of its own —
   the scroll container runs edge-to-edge (so the native scrollbar sits at
   the true right edge of the screen, not inset), and a pattern's own card
   always has room to render its full rounded corners since nothing outside
   it is clipping the scroll area to a shorter box. Build padding, max-width,
   and centering into the pattern itself. */
.mm-pcp-dialog {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: 100vw;
	max-height: 100vh;
	margin: 0;
	border: none;
	background: transparent;
	padding: 0;
	overflow: visible;
}

.mm-pcp-dialog::backdrop {
	background: rgba(0, 0, 0, 0.5);
}

.mm-pcp-dialog__body {
	width: 100%;
	height: 100%;
	padding: 0;
	overflow-y: auto;
	padding: 0 1rem;

	@media all and (min-width: 1024px) {
		padding: 0 2rem;
	}
}

/* Positioning context for .mm-pcp-dialog__close, which now lives inside the
   rendered pattern's (or fallback's) own top-level element instead of
   floating fixed on the dialog, so it's part of that block's own design. */
.mm-pcp-popup-root {
	position: relative;
}
.mm-pcp-dialog__close-wrap {
	position: fixed;
	width: var(--wp--preset--spacing--x-large);
	top: 2rem;
	padding: 2rem;
	right: 0;
	left: 0;
	z-index: 999;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.mm-pcp-dialog__close {
	position: relative;
	width: 2.25rem;
	height: 2.25rem;
	border: none;
	background: var(--wp--preset--color--secondary);
	border-radius: 50%;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
	color: #fff;
	z-index: 1;
}

.mm-pcp-dialog__status {
	text-align: center;
	padding: 2rem 0;
}

.mm-pcp-fallback__title {
	margin-top: 0;
}

.mm-pcp-fallback__image img {
	width: 100%;
	height: auto;
	border-radius: 4px;
	margin-bottom: 1rem;
}

.mm-pcp-fallback__content > :first-child {
	margin-top: 0;
}

.mm-pcp-fallback__content > :last-child {
	margin-bottom: 0;
}

.mm-pcp-scroll-lock {
	overflow: hidden;
}