/* Overlay */
#dpm-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.6);
	display: none;
	z-index: 99998;
	pointer-events: auto; /* overlay should block clicks only when active */
}

/* Wrapper centers modal and anchors the close button */
#dpm-modal-wrap {
	position: fixed;
	top: 10px;
	left: 50%;
	transform: translateX(-50%);
	width: min(90vw, 1133px);
	display: none;
	z-index: 99999;
	pointer-events: none; /* prevent wrapper from blocking clicks */
}

/* Show when active */
#dpm-modal-overlay.active,
#dpm-modal-wrap.active {
	display: block;
}

/* Modal box */
#dpm-modal {
	position: relative;
	background: transparent; /* or #fff if you want a box */
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
	width: 100%;
	overflow: hidden;
	border:0!important;
	outline:0!important;
	pointer-events: auto; /* allow clicks inside */
}

/* Modal content area */
#dpm-modal-content {
	max-height: 90vh;
	overflow-y: auto;
	padding: 0;
	margin: 0;
	border:0!important;
	outline:0!important;
}

/* Close button sits just outside the modal box but inside the wrapper */
#dpm-modal-close {
	position: relative;
	float:right;
	margin-bottom:20px;
	font-size: 60px;
	cursor: pointer;
	color: #fff;
	width: 32px;
	height: 32px;
	line-height: 28px;
	text-align: center;
	border-radius: 50%;
	pointer-events: auto; /* allow clicks inside */
	/* Optional: give it a subtle disc so it’s visible against dark backgrounds */
	/* background: #111; */
	/* box-shadow: 0 4px 12px rgba(0,0,0,.3); */
}

/* Optional hover */
#dpm-modal-close:hover {
	opacity: 0.85;
}

/* Smooth entrance */
@media (prefers-reduced-motion: no-preference) {
	#dpm-modal-wrap {
		transition: transform .18s ease, opacity .18s ease;
	}
	#dpm-modal-wrap[aria-hidden="true"] {
		opacity: 0;
		transform: translate(-50%, 10px);
	}
	#dpm-modal-wrap[aria-hidden="false"] {
		opacity: 1;
		transform: translate(-50%, 0);
	}
}

/* Prevent body scrolling only when modal is open */
body.dpm-open { overflow: hidden; }