/* Bedankpagina na een opleidingsinschrijving. */

.nlpa-dankjewel {
	position: relative;
	display: grid;
	place-items: center;
	min-height: min(760px, calc(100vh - 120px));
	padding: clamp(56px, 8vw, 112px) 24px;
	overflow: hidden;
	background: #f7f3f7;
}

.nlpa-dankjewel__kaart {
	position: relative;
	z-index: 1;
	width: min(100%, 720px);
	padding: clamp(34px, 6vw, 64px);
	border-top: 5px solid var(--wp--preset--color--olijf);
	border-radius: var(--nlpa-radius-groot);
	background: #fff;
	box-shadow: var(--nlpa-schaduw-diep);
	text-align: center;
}

.nlpa-dankjewel__vink {
	display: grid;
	place-items: center;
	width: 62px;
	height: 62px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: var(--wp--preset--color--paars);
	color: #fff;
	font-size: 32px;
	font-weight: 800;
}

.nlpa-dankjewel h1 {
	max-width: 15ch;
	margin: 0 auto 20px;
	font-size: clamp(36px, 6vw, 58px);
	line-height: 1.03;
}

.nlpa-dankjewel__intro {
	max-width: 54ch;
	margin: 0 auto clamp(30px, 5vw, 44px);
	font-size: clamp(18px, 2.2vw, 21px);
}

.nlpa-dankjewel__stappen {
	display: grid;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	text-align: left;
}

.nlpa-dankjewel__stappen li {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 16px;
	padding: 20px;
	border: 1px solid rgba(64, 31, 78, 0.13);
	border-radius: var(--nlpa-radius-kaart);
	background: #fbf8fb;
}

.nlpa-dankjewel__stappen li > span {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: #ece4ed;
	color: var(--wp--preset--color--paars-diep);
	font-weight: 800;
}

.nlpa-dankjewel__stappen h2 {
	margin: 2px 0 6px;
	font-size: 19px;
}

.nlpa-dankjewel__stappen p {
	margin: 0;
	font-size: 16px;
	line-height: 1.6;
}

.nlpa-dankjewel__contact {
	margin: 28px auto 24px;
	font-size: 16px;
}

.nlpa-dankjewel__knop {
	display: inline-flex;
	justify-content: center;
	color: #fff;
	background: var(--wp--preset--color--paars);
}

.nlpa-dankjewel__knop:hover,
.nlpa-dankjewel__knop:focus-visible {
	color: #fff;
	background: var(--wp--preset--color--paars-diep);
}

.nlpa-dankjewel__confetti i {
	position: absolute;
	width: 9px;
	height: 22px;
	border-radius: 2px;
	background: var(--wp--preset--color--paars);
	rotate: var(--draai, 18deg);
	opacity: 0.55;
}

.nlpa-dankjewel__confetti i:nth-child(even) {
	background: var(--wp--preset--color--olijf-tekst);
}

.nlpa-dankjewel__confetti i:nth-child(1) { top: 12%; left: 8%; --draai: 28deg; }
.nlpa-dankjewel__confetti i:nth-child(2) { top: 25%; left: 18%; --draai: -40deg; }
.nlpa-dankjewel__confetti i:nth-child(3) { top: 72%; left: 10%; --draai: 54deg; }
.nlpa-dankjewel__confetti i:nth-child(4) { top: 86%; left: 23%; --draai: -18deg; }
.nlpa-dankjewel__confetti i:nth-child(5) { top: 10%; right: 9%; --draai: -32deg; }
.nlpa-dankjewel__confetti i:nth-child(6) { top: 34%; right: 17%; --draai: 45deg; }
.nlpa-dankjewel__confetti i:nth-child(7) { top: 68%; right: 8%; --draai: -56deg; }
.nlpa-dankjewel__confetti i:nth-child(8) { top: 84%; right: 22%; --draai: 24deg; }
.nlpa-dankjewel__confetti i:nth-child(9) { top: 8%; left: 36%; --draai: 72deg; }
.nlpa-dankjewel__confetti i:nth-child(10) { right: 36%; bottom: 7%; --draai: -68deg; }

@media (max-width: 640px) {
	.nlpa-dankjewel {
		padding: 38px 16px 56px;
	}

	.nlpa-dankjewel__kaart {
		padding: 30px 20px;
		border-radius: var(--nlpa-radius-kaart);
	}

	.nlpa-dankjewel__stappen li {
		grid-template-columns: 34px 1fr;
		padding: 17px 15px;
	}

	.nlpa-dankjewel__stappen li > span {
		width: 32px;
		height: 32px;
	}

	.nlpa-dankjewel__knop {
		width: 100%;
	}

	.nlpa-dankjewel__confetti i:nth-child(n+7) {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nlpa-dankjewel *,
	.nlpa-dankjewel *::before,
	.nlpa-dankjewel *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}