/* ---------------------------------------------------------------------------
 * Embed-popup (zie assets/js/popup.js): modaal venster met een Zoho-formulier.
 * Donkerblauwe blur-achtergrond, wit paneel dat met een zachte lift en schaal
 * binnenkomt, blauwe laadring tot het iframe er is.
 *
 * De maten komen uit popup.js (--popup-b/--popup-h voor het paneel,
 * --frame-b/--frame-h/--frame-schaal voor het iframe): elke embed krijgt de
 * ruimte die hij nodig heeft. De waarden hieronder zijn alleen het vangnet
 * voor het geval het script nog niet gemeten heeft.
 * ------------------------------------------------------------------------- */

.popup {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	visibility: hidden;
	transition: visibility 0s linear 400ms;
}

.popup.is-open {
	visibility: visible;
	transition-delay: 0s;
}

.popup__achtergrond {
	position: absolute;
	inset: 0;
	background: color-mix(in srgb, var(--c-donkerblauw) 75%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	transition: opacity 300ms var(--ease-out);
}

.popup.is-open .popup__achtergrond {
	opacity: 1;
}

/* Paneel en fallbackregel zitten in een kolom die nooit buiten het scherm kan
 * vallen: het paneel krimpt mee, de regel blijft leesbaar. */
.popup__venster {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	max-height: 100%;
	min-height: 0;
}

.popup__paneel {
	position: relative;
	flex: 0 1 auto;
	width: var(--popup-b, min(940px, 100%));
	height: var(--popup-h, 780px);
	max-width: 100%;
	min-height: 0;
	background: var(--c-wit);
	border-radius: var(--radius-sectie);
	box-shadow: 0 30px 80px rgb(0 0 0 / 45%);
	overflow: hidden;
	opacity: 0;
	translate: 0 28px;
	scale: 0.96;
	transition:
		opacity 450ms var(--ease-out),
		translate 500ms var(--ease-out),
		scale 500ms var(--ease-out);
}

.popup.is-open .popup__paneel {
	opacity: 1;
	translate: none;
	scale: 1;
	transition-delay: 60ms;
}

/* Vaste embeds (pagina's zonder eigen mobiele weergave) worden als geheel
 * geschaald: het frame houdt zijn eigen indeling, het paneel krimpt evenredig
 * mee zodat er geen witruimte omheen ontstaat. */
.popup__frame-vak {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.popup__frame {
	position: absolute;
	top: 50%;
	left: 50%;
	width: var(--frame-b, 100%);
	height: var(--frame-h, 100%);
	border: 0;
	transform: translate(-50%, -50%) scale(var(--frame-schaal, 1));
	opacity: 0;
	transition: opacity 350ms var(--ease-out);
}

.popup.is-geladen .popup__frame {
	opacity: 1;
}

/* Blauwe laadring totdat het formulier geladen is. */
.popup__laden {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin: -22px 0 0 -22px;
	border: 3px solid var(--c-grijs-2);
	border-top-color: var(--c-blauw);
	border-radius: 50%;
	animation: popup-laden 900ms linear infinite;
}

.popup.is-geladen .popup__laden {
	display: none;
}

@keyframes popup-laden {
	to {
		rotate: 360deg;
	}
}

/* De sluitknop zit binnen het paneel: buiten het paneel viel hij op kleine
 * schermen half weg. De witte ring houdt hem leesbaar op elke achtergrond. */
.popup__sluiten {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--c-donkerblauw);
	color: var(--c-wit);
	cursor: pointer;
	box-shadow: 0 0 0 3px var(--c-wit), 0 6px 16px rgb(0 0 0 / 25%);
	transition: background-color var(--dur-kort) var(--ease-out), rotate var(--dur-kort) var(--ease-out);
}

.popup__sluiten:hover {
	background: var(--c-blauw);
	rotate: 90deg;
}

.popup__sluiten:focus-visible {
	outline: 2px solid var(--c-blauw);
	outline-offset: 4px;
}

.popup__fallback {
	flex: 0 0 auto;
	margin: 0;
	font-size: var(--fs-s);
	text-align: center;
	color: var(--c-wit);
}

.popup__fallback a {
	color: var(--c-blauw);
}

body.popup-open {
	overflow: hidden;
}

@media (max-width: 767px) {
	.popup {
		padding: 10px;
	}

	.popup__paneel {
		border-radius: 16px;
	}

	.popup__sluiten {
		top: 10px;
		right: 10px;
		width: 36px;
		height: 36px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.popup__paneel {
		translate: none;
		scale: 1;
	}
}