/**
 * WDM Popup — frontend modal styles.
 *
 * The modal is hidden by default (HTML `hidden` attribute).
 * JS removes `hidden` then adds `.wdm-popup--visible` so the
 * opacity/transform transition actually plays.
 */

/* ── Backdrop + wrapper ─────────────────────────────────────── */

.wdm-popup {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}

.wdm-popup[hidden] {
	display: none !important;
}

.wdm-popup--visible {
	opacity: 1;
	pointer-events: auto;
}

/* ── Dark overlay ───────────────────────────────────────────── */

.wdm-popup__overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.55);
	cursor: pointer;
}

/* ── Modal container ────────────────────────────────────────── */

.wdm-popup__container {
	position: relative;
	background: #fff;
	border-radius: 12px;
	max-width: 680px;
	width: calc(100% - 40px);
	max-height: 90vh;
	overflow-y: auto;
	padding: 0;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.25);
	z-index: 1;
	transform: translateY(16px) scale(0.98);
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* The wdm/popup-content block provides all inner padding and background.
 * Strip its border-radius here so the container's radius clips cleanly. */
.wdm-popup__content .wdm-popup-content {
	border-radius: 0;
	overflow: visible;
}

.wdm-popup--visible .wdm-popup__container {
	transform: translateY(0) scale(1);
}

/* ── Close button ───────────────────────────────────────────── */

.wdm-popup__close {
	position: absolute;
	top: 12px;
	right: 12px;
	/* Must sit above wdm-popup-content block (position:relative, later in DOM). */
	z-index: 10;
	background: none;
	border: none;
	cursor: pointer;
	padding: 6px;
	color: #888;
	line-height: 1;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: color 0.2s, background 0.2s;
}

.wdm-popup__close:hover {
	color: #111;
	background: rgba(0, 0, 0, 0.06);
}

/* ── Content area ───────────────────────────────────────────── */

.wdm-popup__content {
	position: relative;
}

/* ── Mobile ─────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.wdm-popup__container {
		border-radius: 10px;
		max-height: 88vh;
	}
}