/* =========================================================
   FORM SECTION + WRAPPER
========================================================= */

.form__block {
	padding: 2rem 0 12rem 0;
}

.form--body {
	background: linear-gradient(to top right, #010160 0%, #0A0A87 50%, #0B0B98 100%);
	border-radius: 0;
	border-top-right-radius: 7rem;
	padding: 2rem;
}

.form--body--inner {
	background-color: #FFFFFF;
	border-radius: 0;
	border-top-right-radius: 5.5rem;
	box-shadow: 0 0 15px rgba(0, 0, 0, 0.15);
	padding: 3rem;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

.form--body h2 {
	color: #000000;
	font-size: 2.5rem;
	font-weight: 900;
	letter-spacing: 0;
	line-height: 1.1;
	margin: 0;
}

.question--counter {
	color: #0A0A87;
	display: block;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: 1.45rem;
	font-weight: 800;
	letter-spacing: -.0125rem;
	line-height: 1;
	margin-bottom: .25rem;
}

.form--indication {
	color: #000000;
	display: block;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.35rem;
	font-weight: 800;
	line-height: 1;
	margin-bottom: .5rem;
}

.form-step {
	margin-bottom: 1rem;
}

.form-step__title {
	color: #010101;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: 1.25rem;
	font-weight: 900;
	letter-spacing: -0.0125rem;
	line-height: 1.2;
	margin: 0;
}

.form--body .form-subtitle {
	color: #000000;
	display: block;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.15rem;
	font-weight: 400;
	letter-spacing: -.0125rem;
	line-height: 1.2;
	margin: 0 0 1.25rem 0;
	text-decoration: underline;
}

.form--body .form-label {
	color: #010101;
	display: inline-block;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.0125rem;
	line-height: 1.2;
	margin-bottom: .5rem;
}

span.indication {
	color: #111111;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.1rem;
}


/* =========================================================
   STEP DIVIDER
========================================================= */

.form-step-divider {
	margin: 2rem 0;
}

.form-step-divider hr {
	border: 0;
	border-top: 1.5px solid #DEDEDE;
	margin: 0;
	opacity: 1;
}

/* =========================================================
   INPUTS + SELECTS + TEXTAREA
========================================================= */

.form-control,
.form-select {
	border: 1.5px solid #CCCCCC;
	border-radius: .5rem;
	box-shadow: none;
	color: #28282B;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.1rem;
	height: 50px;
	padding: 0.35rem 0.75rem 0.4rem 0.75rem;
}

.form--body .form-control:focus,
.form--body .form-select:focus {
	background-color: #FFFFFF;
	border-color: #FFB600;
	box-shadow: 0 0 0 .15rem rgba(255, 182, 0, .18);
	color: #1E231E;
	outline: none;
}

.form-control::placeholder {
	color: #AAAAAA;
	opacity: 1;
}

textarea.form-control {
	height: auto;
	min-height: 120px;
	padding: 0.65rem 0.75rem;
	resize: vertical;
}

/* =========================================================
   FORM GROUPS + VALIDATION
========================================================= */

.form-group {
	width: 100%;
}

.fv-help-block {
	color: #FF9000;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-size: 1rem;
	font-weight: 800;
	white-space: nowrap;
}

/* =========================================================
   CUSTOM RADIO + CUSTOM CHECKBOX
   (NO BLUE BORDER, NO ORANGE BULLET)
========================================================= */

.radio--other--option,
.checkbox--other--option {
	margin-bottom: 1rem;
}

.radio,
.checkbox {
	align-items: center;
	display: flex;
}

.radio label,
.checkbox label {
	cursor: pointer;
	display: inline-flex;
	margin: 0;
	padding: 0;
}

.radio label input[type="radio"],
.checkbox label input[type="checkbox"] {
	display: none;
}

/* base control */
.radio .cr,
.checkbox .cr {
	align-items: center;
	background-color: #FFFFFF;
	border: 1.5px solid #CBCFD3;
	display: inline-flex;
	height: 24px;
	justify-content: center;
	position: relative;
	transition: border-color .2s ease, box-shadow .2s ease, background-color .2s ease;
	width: 24px;
}

/* radio shape */
.radio .cr {
	border-radius: 50%;
}

/* checkbox shape */
.checkbox .cr {
	border-radius: .25rem;
}

/* radio icon = BLUE dot */
.radio .cr .cr-icon {
	color: #FFB600;
	font-size: 10px;
	line-height: 1;
	opacity: 0;
	transform: scale(.75);
	transition: opacity .2s ease, transform .2s ease;
}

/* checkbox icon = BLUE check */
.checkbox .cr .cr-icon {
	color: #FFB600;
	font-size: 14px;
	line-height: 1;
	opacity: 0;
	transform: scale(.75);
	transition: opacity .2s ease, transform .2s ease;
}

/* checked state */
.radio label input[type="radio"]:checked+.cr,
.checkbox label input[type="checkbox"]:checked+.cr {
	color: #FFB600;
	border-color: #FFB600;
	box-shadow: 0 0 0 .15rem rgba(255, 182, 0, .18);
}

.radio label input[type="radio"]:checked+.cr .cr-icon,
.checkbox label input[type="checkbox"]:checked+.cr .cr-icon {
	opacity: 1;
	transform: scale(1);
}

/* hover */
.radio:hover .cr,
.checkbox:hover .cr {
	border-color: #FFB600;
}

/* =========================================================
   BOOTSTRAP FORM-CHECK OVERRIDE (TERMS CHECKBOX)
========================================================= */

.form-check {
	align-items: flex-start;
	display: flex;
	margin: 0;
}

.form-check-input {
	appearance: none;
	-webkit-appearance: none;
	background-color: #FFFFFF;
	border: 1.5px solid #CBCFD3;
	border-radius: .25rem;
	cursor: pointer;
	flex: 0 0 auto;
	height: 24px;
	margin: .15rem 0 0 0;
	position: relative;
	width: 24px;
}

.form-check-input:focus {
	box-shadow: 0 0 0 .25rem rgba(11, 11, 152, .25);
	outline: none;
}

.form-check-input:checked {
	background-color: #0B0B98;
	border-color: #0B0B98;
}

.form-check-input:checked::after {
	color: #FFFFFF;
	content: "\f00c";
	font-family: "Font Awesome 6 Pro";
	font-size: 14px;
	font-weight: 900;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}

/* Valid states (Bootstrap patterns) */
.form-check-input.is-valid,
.was-validated .form-check-input:valid {
	border-color: #0B0B98;
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
	background-color: #0B0B98;
	border-color: #0B0B98;
}

.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus {
	box-shadow: 0 0 0 .25rem rgba(11, 11, 152, .25);
	outline: 0;
}

/* Label kleur wanneer valid */
.form-check-input.is-valid~.terms__label,
.was-validated .form-check-input:valid~.terms__label {
	color: #0B0B98;
}


/* =========================================================
   TERMS TEXT (AVG + AKKOORD LABEL)
========================================================= */

.terms__checkwrap {
	padding-bottom: .75rem;
	padding-top: .75rem;
}

.form--body .form--body--inner .terms--text p {
	color: #666666;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.05rem;
	font-weight: 400;
	line-height: 1.4;
	margin: 0;
	text-rendering: optimizeLegibility;
}

.form--body .terms__label {
	color: #000000;
	font-family: 'Eina 01', Arial, sans-serif;
	font-size: 1.1rem;
	font-weight: bold;
	line-height: 1.6;
	margin: 0;
	text-rendering: optimizeLegibility;
	text-transform: initial;
}

.terms__label a {
	color: #0A0A87;
	font-weight: 700;
	text-decoration: underline;
}

.terms__label a:hover {
	color: #87AE00;
}

/* =========================================================
   BUTTON
========================================================= */

.btn__content--form {
	background-color: #FF8A00;
	border: none;
	border-top-right-radius: 1.25rem;
	color: #FFFFFF;
	cursor: pointer;
	display: inline-block;
	font-family: 'Gotham Pro', Arial, sans-serif;
	font-weight: 700;
	padding: 1rem 1.5rem .85rem 1.5rem;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: background-color 0.3s ease, color 0.3s ease;
}

.btn__content--form:hover {
	background-color: #010160;
}

.btn__content--form i {
	transition: transform 0.3s ease;
}

.btn__content--form:hover i {
	transform: translateX(8px);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media screen and (max-width: 991.98px) {

	.form--body {
		border-top-right-radius: 5rem;
		padding: 1.5rem;
	}

	.form--body--inner {
		padding: 2rem;
	}

	.form--body h2 {
		font-size: 1.75rem;
	}

	.form-step__title {
		font-size: 1.15rem;
	}

	.form-label {
		font-size: 1.15rem;
	}
}

@media screen and (max-width: 575.98px) {

	.form--body--inner {
		padding: 1.5rem;
	}

	.btn__content--form {
		padding: .95rem 1.25rem .8rem 1.25rem;
	}
}