*,
*::before,
*::after {
	box-sizing: border-box;
	transition: all 0.3s ease;
}

:root {
	--NS-Yellow: rgb(253, 212, 79);
	--NS-Blue: rgb(0, 51, 127);
	--font-family: "Roboto", sans-serif;
	--font-size-h1: 34px;
	--font-size-h2: 28px;
	--font-size-p: 20px;
	--font-size-legend: 26px;
	--font-size-label: 24px;
	--font-size-label-active: 28px;
	--error-message-font-size: 18px;
	--input-text-border-radius: 4px;
	--input-text-focus-border-radius: 6px;
	--form-border-radius: 8px;
	--font-size-submit: 24px;
	--submit-width: 40em;
}

/* MARK: Overall */

header,
body {
	font-family: var(--font-family);
}

@media (max-width: 800px) {
	:root {
		--font-size-h1: 30px;
		--font-size-h2: 26px;
		--font-size-p: 18px;
		--font-size-legend: 24px;
		--font-size-label: 22px;
		--font-size-label-active: 26px;
		--submit-width: 26em;
	}
}

/* ------ MARK:Nesting header ------ */

header {
	> p {
		display: flex;
		align-items: center;
		justify-content: center;
		background: red;
		color: white;
		font-size: var(--font-size-p);
		width: 95vw;
		margin: 0 auto;
		padding: 4px 8px;
		border-radius: 0 0 8px 8px;
		animation: zoomIn 0.5s ease-out;
	}
	> div {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 1em;
		width: 95vw;
		border-radius: 8px 8px 0 0;
		margin: 0 auto;
		padding: 4px 8px;
		background: var(--NS-Yellow);

		> svg {
			width: 100px;
			animation: slideInFadeIn 0.5s ease-out;
			transition: transform 0.8s ease-in-out;

			&:hover {
				transform: rotate(180deg);
			}
		}

		> h1 {
			font-size: var(--font-size-h1);
		}
	}
}

@keyframes slideInFadeIn {
	0% {
		scale: 0.5;
		opacity: 0;
		transform: translateX(-200px);
	}
	100% {
		scale: 1;
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes zoomIn {
	0% {
		font-size: 12px;
	}
	100% {
		font-size: var(--font-size-p);
	}
}

main {
	> h2 {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		margin-top: 1em;
		width: 95vw;
		padding: 4px 8px;
		font-size: var(--font-size-h2);
	}

	> p {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 0 auto;
		width: 95vw;
		font-size: var(--font-size-p);
	}

	> form {
		z-index: 1;
		border-radius: var(--form-border-radius);
		padding: 4px 8px;
		margin: 0 auto;
		width: 95vw;
		max-width: 600px;
		height: auto;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		gap: 1.5em;
		justify-content: center;
		align-items: center;
		border: none;
		background: none;

		> fieldset > legend {
			font-size: var(--font-size-legend);
		}

		.field1A {
			box-shadow: 0px 0px 10px rgba(253, 212, 79, 0.8);
		}
	}
}

.field1A,
.field1D > fieldset:last-of-type,
.field1E > .verkrijgerContainer {
	z-index: 10;
	border-radius: 8px;
	padding: 10px 8px;
	margin: 2em 0 2.5em 0;
	width: 100%;
	height: auto;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap: 20px;
	border: none;
}

.verkrijgerContainer {
	margin: 2em 0 0 0 !important;
}

.field1Aa > label > span,
.field1Dd > label > span,
main > p > span,
.field1Ee > label > span {
	padding: 0.2em;
	color: red;
}

.field1Aa,
.field1Bb,
.field1D > fieldset:last-of-type > .field1Dd,
.field1E > .verkrijgerContainer > .fieldEeContainer > .field1Ee {
	display: flex;
	align-items: flex-start;
	justify-content: start;
	flex-direction: column;
	position: relative;
	margin: 0 auto;
	width: 90%;
}

.field1Aa > input,
.field1Bb > input,
.field1D > fieldset:last-of-type > .field1Dd > input,
.field1E > .verkrijgerContainer > .fieldEeContainer > .field1Ee > input,
input[type="date"] {
	width: 100%;
	padding: 18px;
	border-radius: var(--input-text-border-radius);
	background: transparent;
	font-size: 22px;
}

form .field1Aa label,
form .field1Bb label,
form .field1D > fieldset:last-of-type > .field1Dd label,
form .field1E > .verkrijgerContainer > .fieldEeContainer > .field1Ee label {
	margin-top: 20px;
	margin-bottom: 6px;
	font-size: 22px;
	font-weight: 500;
	color: rgba(0, 0, 0, 1);
	transition:
		font-size 0.4s ease,
		width 0.3s ease,
		margin-left 0.6s ease;
}

form .field1A .field1Aa:focus-within > label,
form .field1Bb:focus-within > label,
form .field1D > fieldset:last-of-type > .field1Dd:focus-within > label,
form .field1E > .verkrijgerContainer > .fieldEeContainer > .field1Ee:focus-within > label {
	font-size: 24px;
	margin-left: 0;
	font-weight: 700;
	width: 100%;
	color: var(--NS-Blue);
	z-index: 111;
	padding: 0px;
	border-radius: 16px;
}

.field1Aa > input:focus-visible,
.field1Bb > input:focus-visible,
.field1D > fieldset:last-of-type > .field1Dd > input:focus-visible,
.field1E > .verkrijgerContainer > .fieldEeContainer > .field1Ee > input:focus-visible {
	border-radius: var(--input-text-focus-border-radius);
	border: 2px solid var(--NS-Blue);
	outline: 1px solid var(--NS-Blue);
}

.field1B,
.field1C,
.field1D,
.field1E,
.field1E {
	display: flex;
	flex-direction: column;
	gap: 1em;
	height: 0;
	opacity: 0;
	gap: 0;
	margin: 0;
	overflow: hidden;
	padding: 0;
	width: 100%;
	border: none;
	visibility: hidden;
}

.field1B > fieldset,
.field1C > fieldset,
.field1D > fieldset,
.field1E > fieldset:first-of-type,
.field1E > .verkrijgerContainer > .fieldEeContainer,
.field1ERadio {
	z-index: 10;
	border-radius: 8px;
	width: 100%;
	height: auto;
	display: flex;
	padding: 10px;
	margin: 0;
	flex-direction: column;
	border: none;
	box-shadow: 0px 0px 10px rgba(253, 212, 79, 0.8);
}

.field1B > fieldset:nth-of-type(4) {
	display: flex;
	align-items: center;
	justify-content: center;
}

.field1D {
	margin-top: 2.5em;
}

/* MARK:Add and remove buttons */

.legendRemoveStyling {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	background-color: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
}

.legendRemoveStyling > span {
	width: 100%;
	margin: 0;
	z-index: 100;
	color: black;
	font-size: var(--font-size-legend);
	background: var(--NS-Yellow);
	box-shadow: 0 -3px 10px rgba(253, 212, 79, 0.5);
	border-radius: 16px;
	padding: 4px 16px;
	width: 100%;
	margin: 0 auto;
}

.legendRemoveStyling:has(.remove-btn-visible) > span {
	width: 65%;
}

.remove-btn {
	opacity: 0;
	pointer-events: none;
	cursor: none;
	width: 0%;
	padding: 0;
	margin: 0;
	border: none;
	overflow: hidden;
}

.remove-btn-visible {
	opacity: 1;
	z-index: 100;
	color: black;
	background: rgba(255, 255, 255, 0.9);
	background: var(--NS-Yellow);
	box-shadow: 0 -3px 10px rgba(253, 212, 79, 0.5);
	border-radius: 16px;
	border: none;
	padding: 4px 8px;
	font-size: 20px;
	width: 35%;
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: all;
	cursor: pointer;
}

.add-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 0;
	width: 96%;
	height: 3em;
	border-radius: 16px;
	border: none;
	background: transparent;
	box-shadow: 0 0 10px var(--NS-Blue);
	margin: 0 auto;
	margin-bottom: 2em !important;
	overflow: hidden;
	cursor: pointer;
}

.add-btn > span {
	font-size: 22px;
	transform: translateX(0);
	transition: transform 0.3s ease-in-out;
}

.add-btn > span:active {
	transform: scale(0.95);
}

/* ------ MARK: Progressive disclosure ------ */

/* Fieldset1A */

.field1A.fieldsetValid ~ .field1B {
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	margin-top: 0em;
	height: auto;
	z-index: 1;
	pointer-events: all;
	overflow: visible;
	visibility: visible;
	gap: 2em;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

/* Fieldset1B */

.field1B {
	opacity: 0;
	pointer-events: none;
	height: 0;
	padding: 0;
	margin: 0;
	z-index: -1;
	transform: translateY(-50px);

	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1B fieldset:nth-of-type(2),
.field1B fieldset:nth-of-type(3),
.field1B fieldset:nth-of-type(4) {
	opacity: 0;
	pointer-events: none;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 1;
	transform: translateY(-50px);
	overflow: hidden;
	visibility: hidden;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1B:has(fieldset:first-of-type input[value="Ja"]:checked) fieldset:nth-of-type(2),
.field1B:has(fieldset:nth-of-type(2) input[value="Ja"]:checked) fieldset:nth-of-type(3),
.field1B:has(fieldset:nth-of-type(3) input[value="Ja"]:checked) fieldset:nth-of-type(4) {
	opacity: 1;
	pointer-events: all;
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	padding: 10px;
	height: auto;
	z-index: 1;
	visibility: visible;
	overflow: visible;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1B:has(input[type="date"]:valid) ~ .field1C {
	opacity: 1;
	pointer-events: all;
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	padding: 10px;
	height: auto;
	z-index: 1;
	visibility: visible;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

/* Fieldset1B done */

/* Fieldset1C */

.field1C {
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: -1;
	pointer-events: none;
	transform: translateY(-100px);
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1B:has(input[value="Nee"]:checked) ~ .field1C {
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	margin-top: 0em;
	height: auto;
	z-index: 1;
	overflow: visible;
	gap: 1em;
	visibility: visible;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1C fieldset:nth-of-type(2),
.field1C fieldset:nth-of-type(3),
.field1D {
	opacity: 0;
	pointer-events: none;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 1;
	transform: translateY(-100px);
	overflow: hidden;
	visibility: hidden;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1C:has(fieldset:first-of-type input[value="Ja"]:checked) fieldset:nth-of-type(2),
.field1C:has(fieldset:nth-of-type(2) input[value="Ja"]:checked) fieldset:nth-of-type(3),
.field1C:has(fieldset:nth-of-type(2) input[value="Nee"]:checked) fieldset:nth-of-type(3) .field1C:has(fieldset:nth-of-type(3) input[value="Ja"]:checked) ~ .field1D,
.field1C:has(fieldset:nth-of-type(3) input[value="Nee"]:checked) ~ .field1D {
	opacity: 1;
	pointer-events: all;
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	padding: 10px;
	height: auto;
	z-index: 1;
	visibility: visible;
	overflow: visible;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

/* Fieldset1C done */

/* Fieldset1D */

.field1C:has(fieldset:first-of-type input[value="Nee"]:checked) ~ .field1D {
	opacity: 1;
	pointer-events: all;
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	padding: 10px;
	height: auto;
	z-index: 1;
	gap: 1em;
	visibility: visible;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1D > fieldset:last-of-type {
	opacity: 0;
	pointer-events: none;
	transition: all 0.3s ease;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 1;
	transform: translateY(-100px);
	overflow: hidden;
	visibility: hidden;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1D:has(fieldset:first-of-type input[value="Ja"]:checked) fieldset:last-of-type {
	opacity: 1;
	pointer-events: all;
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	padding: 10px;
	height: auto;
	z-index: 1;
	gap: 1em;
	visibility: visible;
	overflow: visible;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

/* Fieldset1D done */

/* Fieldset1E */

.field1E {
	display: flex;
	align-items: center;
	justify-content: center;
	pointer-events: none;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 1;
	transform: translateY(-100px);
	visibility: hidden;
	overflow: hidden;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1D:has(fieldset:first-of-type input[value="Nee"]:checked) ~ .field1E {
	opacity: 1;
	pointer-events: all;
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	padding: 10px;
	height: auto;
	z-index: 1;
	overflow: visible;
	visibility: visible;
	gap: 1em;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1D.fieldsetValid ~ .field1E,
.field1D:has(.fieldsetValid) ~ .field1E {
	opacity: 1;
	pointer-events: all;
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	padding: 10px;
	height: auto;
	z-index: 1;
	overflow: visible;
	visibility: visible;
	gap: 1em;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1E fieldset:nth-of-type(2),
.field1E .add-btn {
	opacity: 0;
	pointer-events: none;
	overflow: hidden;
	height: 0;
	padding: 0;
	margin: 0;
	opacity: 0;
	z-index: 1;
	transform: translateY(-100px);
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

.field1E:has(fieldset:first-of-type input[value="Ja"]:checked) fieldset:nth-of-type(2),
.field1E:has(fieldset:first-of-type input[value="Ja"]:checked) .add-btn {
	opacity: 1;
	pointer-events: all;
	display: flex;
	transform: translateY(0px);
	opacity: 1;
	padding: 10px;
	height: auto;
	z-index: 1;
	gap: 1em;
	visibility: visible;
	transition:
		transform 0.4s ease-in-out,
		opacity 0.8s ease-in-out;
}

/* Fieldset1E done */

/* ------ MARK:Fieldset validation ------ */

.field1A:user-valid {
	background: green;
	border: 10px solid green;
}

input[type="date"] {
	cursor: pointer;
	font-family: var(--font-family);
}

/* ------ DONE ------ */

/* MARK: Radiobuttons! */

.radioBox {
	display: flex;
	flex-direction: column;
	gap: 15px;
	width: 100%;
	max-width: 400px;
	margin: 3em auto;
	z-index: 100;
	pointer-events: auto !important;
}

.radio-button-label {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex: 1;
	padding: 1em 2em;
	border: 2px solid var(--NS-Blue);
	border-radius: 8px;
	cursor: pointer;
	position: relative !important;
	transition: border 0.8s ease-in-out;

	> input[type="radio"] {
		appearance: none;
	}

	> span {
		font-size: var(--font-size-label);
		transition:
			font-size 0.3s ease,
			font-weight 0.3s ease;
	}

	&:has(input[type="radio"]:checked) {
		background: var(--NS-Blue);
		border: 2px solid var(--NS-Blue);

		> span {
			color: white;
		}
	}
}

.radio-button-label:has(input[type="radio"]:focus-visible) {
	outline: 3px solid var(--NS-Yellow);
	outline-offset: 2px;
}

/* The END */

legend {
	z-index: 100;
	color: black;
	font-size: var(--font-size-legend);
	background: var(--NS-Yellow);
	box-shadow: 0 -3px 10px rgba(253, 212, 79, 0.5);
	border-radius: 16px;
	padding: 4px 8px;
	width: 100%;
	margin: 0 auto;
}

.send,
.saveBtn {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	padding: 3em 6em;
	border-radius: 16px;
	border: none;
	background: transparent;
	border: 2px solid var(--NS-Yellow);
	margin: 0 auto;
	overflow: hidden;
	cursor: pointer;
}

.send > span,
.saveBtn > span {
	z-index: 10000;
	padding: 0;
	font-size: var(--font-size-submit);
	text-align: center;
}

.send:active,
.saveBtn:active {
	transform: scale(0.95);
}

/* Submit animation */

.send {
	display: none !important;
	transition: all 0.7s cubic-bezier(0.64, 0.04, 0.35, 1) !important;
	overflow: hidden;
}

.send.sendAnimation {
	background-color: var(--NS-Yellow);
	width: var(--submit-width) !important;
	/* transform: scale(1.05); */
	pointer-events: none;
	transform-origin: center !important;
	margin: 0 auto !important;
}

.send.sendAnimation > span {
	font-size: 28px;
	font-weight: 700;
	color: black;
}

.send.sendAnimation:before,
.send.sendAnimation:after {
	opacity: 0 !important;
}

.field1E:has(fieldset:first-of-type :is(input[value="Nee"]:checked, input[value="Ja"]:checked)) ~ .send {
	display: flex !important;
	width: 20em;
}

/* MARK: saveBtn styling */

.saveBtn {
	padding: 2em 4em !important;
	margin-top: 1.5em;
	width: 25em;
}

/* MARK:Error message handler */

.show-error,
.BSN-error {
	opacity: 0;
	font-size: var(--error-message-font-size);
	padding: 2px 8px;
	width: 100%;
	height: 0;
	pointer-events: none;
}

input[type="text"]:user-invalid,
input[type="date"]:user-invalid,
.form-error input[type="text"]:invalid,
.form-error input[type="date"]:invalid {
	border-radius: var(--input-text-focus-border-radius);
	border: 3px solid red;
	outline: 1px solid red;
	box-shadow: 0 0 0px rgba(255, 0, 0, 0);
	animation: invalidGlow 1.5s ease-in-out;
}

.form-error .radio-button-label:has([type="radio"]:invalid) {
	border: 2px solid red;
}

input[type="text"]:user-invalid ~ .show-error,
input[type="date"]:user-invalid ~ .show-error,
.form-error input:invalid ~ .show-error {
	opacity: 1;
	font-size: var(--error-message-font-size);
	padding: 2px 8px;
	margin-top: 0.5em;
	height: auto;
	color: red;
	border-radius: var(--input-text-focus-border-radius);
}

/* MARK:BSN number validation error message */

.BSNnumberInput.valid {
	position: relative;
	border: 1px solid green;
	outline: 2px solid green;
}

.BSNnumberInput.invalid {
	border: 1px solid red;
	outline: 2px solid red;
}
.BSNnumberInput.invalid ~ .BSN-error {
	opacity: 1;
	font-size: var(--error-message-font-size);
	color: red;
	padding: 2px 8px;
	margin-top: 0.5em;
	height: auto;
	border-radius: var(--input-text-focus-border-radius);
}

.animateTo {
	animation: slideDownIn 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes slideDownIn {
	0% {
		opacity: 0;
		transform: translateY(-80px) scale(0.5);
	}
	100% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}