@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root {
    --cc-black-10: #1a1a1a;
    --cc-black-20: #333;
    --cc-black-30: #4d4d4d;
    --cc-black-40: #666;
    --cc-black-50: #808080;
    --cc-black-60: #999;
    --cc-black-80: #ccc;
    --cc-black-90: #e5e5e5;
    --cc-black-95: #f2f2f2;
    --cc-white: #fff;

	--color-brand-yellow: rgba(255, 201, 23, 1);

    --color-blue-500: rgba(52, 138, 244, 1);
    --color-blue-600: rgba(24, 109, 220, 1);
    --color-blue-700: rgba(31, 85, 178, 1);
    --color-blue-800: rgba(30, 68, 141, 1);
    --color-blue-900: rgba(25, 51, 112, 1);

	--color-red-600: red;

    --font-weight-normal: 400;
    --font-weight-demi: 550;
    --font-weight-bold: 700;

	--font-size-xs: 0.75em; 
	--font-size-s: 0.875em; 
	--font-size-m: 1em; 
	--font-size-l: 1.375em; 

    --border-radius-150: 6px;
    --border-radius-300: 12px;
    --border-radius-400: 16px;
    --border-radius-full: 9999px;

    --max-width-2xl: 1280px;
    --max-width-xl: 896px;
    --max-width-lg: 512px;
    --max-width-xs: 320px;
}

/* Styling */ 
h1, h2, p, a {
	margin: 0; 
}

fieldset .hidden {
    display: none; 
}

/* styling form fields */
fieldset {
	position: relative;
	border: none; 
	padding: 0; 
	margin: 0; 
}

/* general styling */ 
body {
    font-family: 'roboto', 'sans-serif'; 
	display: flex; 
	flex-direction: column; 
	margin: 0;
	align-items: center;
	background-color: var(--cc-black-95);
	gap: 1.5em;
	overflow-x: hidden;
}

/* header */ 
body > div {
	background-color: var(--color-brand-yellow);
	width: 100%; 
}

body > div div:first-of-type {
	padding: 2em; 
	display: flex; 
	flex-direction: column; 
	gap: 0.5em;
}

body > div div:first-of-type h1 {
	color: var(--color-blue-700);
	font-size: 2.375rem; 
	font-weight: var(--font-weight-normal);
}

body > div div:nth-of-type(2) {
	width: 100%;
	background-color: var(--color-blue-700);  
	
	h2 {
		width: 100%; 
		align-self: center;
		animation: slide 20s infinite linear; 
		color: var(--cc-white); 
	}
}

@keyframes slide {
	from {
		transform: translateX(-100%);
	} to {
		transform: translateX(100%);
	}
}

body > div div:nth-of-type(2) button {	/* reset local storage */ 
	position: absolute; 
	top: 10%; 
	right: 1em;
}

/* ---------- */ 
form {
	max-width: var(--max-width-xl);
	width: 100%; 
	margin: 0;
	border: 1px var(--color-grey); 
	border-radius: var(--border-radius-150); 
	display: flex; 
	flex-direction: column; 
	gap: 1.5em;
	margin-bottom: 5em;
}

section {
	display: flex; 
	flex-direction: column;
	gap: 1.5em; 
}

section > fieldset {
	display: flex; 	
	flex-direction: column;
	gap: 1.5em; 
	background-color: var(--cc-white);
	margin: 0; 
	padding: 1.5em;
	border: 1px var(--cc-black-90) solid; 
	border-radius: var(--border-radius-150); 
	position: relative; 

	&:first-of-type {
		padding: 4em 1.5em 1.5em 1.5em;
	}
}

section > fieldset:first-of-type > legend {
	position: absolute; 
	top: 1em; 
	color: var(--color-blue-700); 
	font-weight: var(--font-weight-demi);
	font-size: var(--font-size-l);
	padding-inline: 0;
}

section > fieldset label:has(input[type="text"]), section > fieldset label:has(input[type="date"]), section > fieldset label:has(input[type="number"]) {
	display: flex;
	flex-direction: column; 
	gap: 0.4em;
	color: var(--cc-black-10); 
	font-size: var(--font-size-m);
	font-weight: var(--font-weight-normal);

	& p {
		display: none; 
		color: var(--color-red-600); 
	}
}

label:has(input[type="text"]:user-invalid) p:first-of-type {
	display: contents;
}

#bsnHelp.valid {
	display: contents;
	color: #008000; 
}

/* label:has(input[type="text"]:user-valid) p:nth-of-type(2) {
	display: contents;
	color: #008000; 
} */

input[type="text"]:user-invalid {
	border-left-color: var(--color-red-600); 
	border-left-width: 4px; 
}

section fieldset fieldset legend {
	margin-bottom: 0.4em;
}

section fieldset fieldset {
	display: inherit;
	flex-direction: inherit;
	gap: inherit;
}

section fieldset fieldset:has(input[type="radio"]) div {
	display: flex;
	flex-direction: row;
	gap: 0.5em;
}

section fieldset fieldset:has(input[type="radio"]) p {
	display: none; 
	color: var(--color-red-600); 
}

section fieldset fieldset:has(input[type="radio"]:user-invalid) p {
	display: block;
}

label:has(input[type="radio"]) {
	border: 1px var(--color-blue-700) solid; 
	min-width: 44px; 
	min-height: 44px; 
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--border-radius-150);
}

label:has(input[type="radio"]:checked) {
	background-color: var(--color-blue-700); 
	color: var(--cc-white); 
}

section > fieldset > div {
	display: inherit;
	flex-direction: inherit;
	gap: inherit; 
}

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

section > fieldset input[type="text"], section > fieldset input[type="date"], section > fieldset input[type="number"]{
	border-radius: var(--border-radius-150); 
	border: 2px var(--cc-black-80) solid; 
	min-height: 44px; 
	font: inherit;
	padding: 0 0.5em;
}

/* hidden feature */ 
section:first-of-type fieldset:nth-of-type(2) > div fieldset:first-of-type:has(input[value="Nee"]:checked) + fieldset {
	opacity: 0.3;
	pointer-events: none;
	transition: 0.15s; 

	+ fieldset {
		opacity: 0.3;
		pointer-events: none;
		transition: 0.15s; 
	}
}

/* verkrijger */ 
#verkrijger {
	position: relative; 
	padding-bottom: 5em;
	display: flex; 
	flex-direction: column; 
	gap: 3em;
}

/* #verkrijger > fieldset {
	margin-bottom: 2em;
} */

#verkrijger > div {
	height: 2px; 
	width: 100%; 
	background-color: var(--color-blue-700);
}

#verkrijger fieldset {
	gap: 1em;
	position: relative; 
}

#verkrijger > fieldset:not(:first-of-type) {
	margin-top: 2em;
}

#verkrijger > fieldset:not(:first-of-type) > div {
	height: 2px; 
	width: 100%; 
	background-color: var(--color-blue-700);
	margin: 1em 0; 

	position: absolute; 
	top: -5.5em;
}

#verkrijger > fieldset > button {
	position: absolute; 
	right: 0; 
	top: -2.7em; 


	background: none; 
	border: none; 
	border-radius: 99em;
	width: 3.5em; 
	height: 3.5em;

	&:hover, &:focus {
		background-color: var(--cc-black-90);
	}

	&:active {
		background-color: var(--color-blue-700);
	}
}

#verkrijger > fieldset > button img {
	width: 1.7em; 
	height: auto;
}

#verkrijger > fieldset > legend {
	font-weight: var(--font-weight-bold); 
	color: var(--color-blue-700); 
	font-size: var(--font-size-l);
}

section:nth-of-type(2) > fieldset fieldset:first-of-type:has(input[value="Nee"]:checked) + fieldset {
	opacity: 0.3;
	pointer-events: none;
	transition: 0.15s; 
}

section:nth-of-type(2) details {
	border-bottom: 1px var(--cc-black-10) solid; 
	padding: 1em 0; 
	background-color: var(--cc-white);
	color: var(--color-blue-600);
	font-weight: var(--font-weight-demi);
	font-size: 1.125em;
	position: relative; 
	
	summary {
		list-style: none; 
	}

	fieldset {
		margin-top: 1em;
	}
}

#remove {
	position: absolute; 
	background-color: var(--cc-black-90); 
	border-radius: var(--border-radius-150);
	color: var(--color-blue-900); 
	border: none; 
	padding: 0.8em;
	font-size: var(--font-size-s); 
	font-weight: var(--font-weight-normal);
	top: 0.5em; 
	right: 0;
}

#add {
	position: absolute; 
	bottom: 0; 
	background-color: var(--color-blue-700); 
	border-radius: var(--border-radius-150);
	border: none; 
	padding: 1em;
	color: var(--cc-white);
	font-size: var(--font-size-m); 
	box-shadow: inset 0 -0.125em 0 var(--color-blue-900); 
}

button[type="submit"] {
	padding: 1em 3em; 
	background-color: var(--color-brand-yellow); 
	border-radius: var(--border-radius-400);
	width: fit-content; 
	color: var(--cc-black-10); 
	font-size: var(--font-size-l); 
	box-sizing: border-box;
	border: none; 
	box-shadow: inset 0 -0.125em 0 rgb(209, 162, 5);;
}