/* ===== Wachtscherm ===== */
.wachtscherm {
	width: min(100% - 2rem, 720px);
	margin: clamp(24px, 6vh, 56px) auto 0;
	background: var(--color-white, #fff);
	border: 1px solid var(--color-gray-light, #e6e9ef);
	border-radius: var(--border-radius, 16px);
	box-shadow: var(--shadow, 0 8px 24px rgba(0,0,0,.06));
	padding: clamp(16px, 3vw, 28px);
	transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
	/* Zorgt dat brede child-elementen (bv. progressbar) niet “lekken” */
	overflow: hidden;
}

	/* Typografie: geen pt, nette line-height en responsieve schaal */
	.wachtscherm h5 {
		font-size: clamp(1.25rem, 2.2vw, 1.6rem);
		line-height: 1.2;
		text-align: center;
		margin: 0;
	}

	.wachtscherm p {
		margin: clamp(16px, 4vh, 28px) auto 0;
		font-size: clamp(0.95rem, 1.5vw, 1.1rem);
		line-height: 1.55;
		text-align: center;
		max-width: 60ch;
		color: var(--color-text, inherit);
	}

	/* Status/taakregel */
	.wachtscherm .currentTask {
		text-align: center;
		font-weight: 700;
		font-size: clamp(0.95rem, 1.5vw, 1.1rem);
		color: var(--primary-blue, #1B75BB);
	}

	/* Loading blok */
	.wachtscherm .loadingWrap {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: .75rem;
		margin: 1.25rem 0 0;
	}

		.wachtscherm .loadingWrap img {
			max-width: 130px;
			width: 100%;
			height: auto;
			object-fit: contain;
		}

	/* Progress bar – robuust, met betere contrast en afgeronde hoeken */
	.wachtscherm .loadingBar {
		position: relative;
		width: 100%;
		height: 24px;
		border: 1px solid var(--color-gray-light, #e6e9ef);
		background: #f1f4f7;
		border-radius: calc(var(--border-radius, 16px) / 2);
		overflow: hidden;
	}

		/* Gebruik transform i.p.v. width voor soepelere updates zonder layout thrash */
		.wachtscherm .loadingBar .fillMeUp {
			position: absolute;
			inset: 0;
			background: var(--primary-blue, #1B75BB);
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding-right: .5rem;
			transform-origin: left center;
			will-change: transform;
		}

		/* Percentage-label: altijd goed leesbaar en verticaal gecentreerd */
		.wachtscherm .loadingBar .perc {
			color: #fff;
			font-weight: 700;
			line-height: 1;
			
		}

	/* Hover/focus micro-interactie */
	.wachtscherm:hover {
		box-shadow: 0 12px 32px rgba(0,0,0,.1);
		transform: translateY(-1px);
	}

	.wachtscherm:focus-within {
		outline: 2px solid color-mix(in oklab, var(--primary-blue, #1B75BB) 40%, transparent);
		outline-offset: 2px;
		border-color: color-mix(in oklab, var(--primary-blue, #1B75BB) 28%, var(--color-gray-light, #e6e9ef));
	}

/* Dark mode—zachter vlak en beter contrast in de bar */
@media (prefers-color-scheme: dark) {
	.wachtscherm {
		background: #121418;
		border-color: color-mix(in oklab, #fff 14%, transparent);
		box-shadow: 0 12px 32px rgba(0,0,0,.45);
	}

		.wachtscherm p {
			color: #e8eaee;
		}

		.wachtscherm .loadingBar {
			background: #1a1d22;
			border-color: color-mix(in oklab, #fff 14%, transparent);
		}
}

/* Motion respecteren */
@media (prefers-reduced-motion: reduce) {
	.wachtscherm {
		transition: none;
	}

		.wachtscherm .loadingBar .fillMeUp {
			transition: none;
		}
}

/* Kleine schermen: iets compactere ronding en padding */
@media (max-width: 600px) {
	.wachtscherm {
		border-radius: 14px;
		padding: clamp(14px, 4vw, 20px);
	}
}