/* =========================================================
   FORMS.CSS
   WILMAX – FORMS
   FORWARD © 2025
========================================================= */

/* Groepslabels (zoals 'Algemeen', 'Airco') */
.form--indication {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: calc(1.15 * var(--font-size));
	font-weight: 700;
}

/* Labels (onderlijnd, planner-look) */
.form--label,
.form-label {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(1 * var(--font-size));
	font-weight: 400;
	margin-bottom: .5rem;
	text-decoration: underline;
}

/* Wrapper voor korte intro-teksten (boven formulieren) */
.intro--wrapper {
	margin-bottom: 1rem;
}

.intro--wrapper>p {
	margin-bottom: .5rem;
}

/* ---------------------------------------
   1) Text inputs & textarea
--------------------------------------- */
.form-control {
	background-color: var(--COLOR-WHITE);
	border: 1.5px solid var(--COLOR-MIDGRAY);
	border-radius: .35rem;
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: 1rem;
	line-height: 1.5;
	padding: .6rem .8rem;
	transition: var(--TRANSITION);
}

.form-control::placeholder {
	color: var(--COLOR-MEDIUMGRAY);
	font-family: var(--FONT-FAMILY-ALT);
	opacity: .5;
}

.form-control:focus {
	background-color: var(--COLOR-WHITE);
	border-color: var(--COLOR-BLACK);
	box-shadow: 0 0 0 .15rem rgba(0, 0, 0, .18);
	color: var(--COLOR-BLACK);
	outline: 0;
}

input.form-control {
	height: 3rem;
}

textarea.form-control {
	min-height: 2.75rem;
	resize: vertical;
}

/* Kenteken & km */
.input--plate {
	letter-spacing: .06em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

.input--mileage {
	font-variant-numeric: tabular-nums;
}

/* Valid/invalid states (Bootstrap-compatibel) */
.is-invalid.form-control,
.was-validated .form-control:invalid {
	border-color: #DC3545;
}

.is-valid.form-control,
.was-validated .form-control:valid {
	border-color: #198754;
}

/* ---------------------------------------
   2) Select
--------------------------------------- */
.form-select {
	background-color: var(--COLOR-WHITE);
	border: 1.5px solid var(--COLOR-LIGHTGRAY);
	border-radius: 8px;
	color: var(--COLOR-BLACK);
	padding: .6rem 2.25rem .6rem .8rem;
	transition: var(--TRANSITION);
}

.form-select:focus {
	border-color: var(--COLOR-BLACK);
	box-shadow: 0 0 0 .15rem rgba(0, 0, 0, .18);
	outline: 0;
}

/* ---------------------------------------
   3) Checkbox & radio
   - nette uitlijning + grotere klikzone
   - accent-color voor moderne browsers
--------------------------------------- */
.form-check {
	align-items: center;
	display: flex;
	gap: .625rem;
	margin: .375rem 0;
	padding-left: 0;
}

.form-check-input {
	accent-color: var(--COLOR-PRIMARY);
	block-size: 1.125rem;
	border: 1.5px solid var(--COLOR-MIDGRAY);
	inline-size: 1.125rem;
	margin: 0;
}

.form-check-input:checked {
	background-color: var(--brandcolor-3);
	border-color: var(--brandcolor-3);
}

.form-check-input:focus {
	border-color: var(--brandcolor-3);
	outline: 0;
	box-shadow: none;
}

.form-check-label {
	color: var(--COLOR-BLACK);
	cursor: pointer;
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(1 * var(--font-size));
	font-weight: 400;
	line-height: 1.35;
	margin: 0;
}

/* groter variant */
.form-check--lg .form-check-input {
	block-size: 1.25rem;
	inline-size: 1.25rem;
}

.form-check--lg .form-check-label {
	font-size: 1.05rem;
}

/* disabled */
.form-check-input:disabled+.form-check-label {
	opacity: .6;
}

/* ---------------------------------------
   4) Service-groepen (details/summary)
--------------------------------------- */
.svc--group {
	border: 1.5px solid var(--COLOR-LIGHTGRAY);
	border-radius: .5rem;
	padding: .75rem 1.25rem;
}

.svc--summary {
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.svc--summary::-webkit-details-marker {
	display: none;
}

.svc--group .fa-chevron-up {
	transition: transform .25s ease;
}

.svc--group[open] .fa-chevron-up {
	transform: rotate(180deg);
}

.svc--hint {
	opacity: .7;
}

.svc--hint:hover {
	opacity: 1;
}

.svc--check {
	margin: .375rem 0;
}

/* ---------------------------------------
   5) Buttons (Bootstrap-compatibel)
   – sluit aan op planner look & feel
--------------------------------------- */
.btn,
a.btn {
	border-width: 1.5px;
	border-radius: 999px;
	font-family: var(--FONT-FAMILY);
	font-size: calc(1.05 * var(--font-size));
	font-weight: 800;
	letter-spacing: -.005rem;
	line-height: 1.1;
	padding: .75rem 1rem;
	text-decoration: none;
	transition: var(--TRANSITION);
}

.btn-primary {
	background: var(--COLOR-PRIMARY);
	border-color: var(--COLOR-PRIMARY);
	color: #FFF;
}

.btn-primary:hover,
.btn-primary:focus {
	background: var(--COLOR-PRIMARY-HOVER);
	border-color: var(--COLOR-PRIMARY-HOVER);
	box-shadow: var(--PL-FOCUS-PRIMARY);
}

.btn-secondary {
	background: var(--COLOR-LIGHTGRAY);
	border-color: var(--COLOR-LIGHTGRAY);
	color: var(--COLOR-BLACK);
}

.btn-secondary:hover,
.btn-secondary:focus {
	background: var(--COLOR-SECONDARY-HOVER);
	border-color: var(--COLOR-SECONDARY-HOVER);
	box-shadow: var(--PL-FOCUS-SECONDARY);
}

/* Outline-variant voor links/kleine acties */
.btn-outline-secondary {
	color: var(--COLOR-SECONDARY);
	border-color: var(--COLOR-SECONDARY);
	background: transparent;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
	color: #FFF;
	background: var(--COLOR-SECONDARY);
	border-color: var(--COLOR-SECONDARY);
	box-shadow: var(--PL-FOCUS-SECONDARY);
}

/* Toegankelijk focus zonder Bootstrap-blauw */
.btn:focus,
.btn:focus-visible,
.btn:active,
.btn.active,
.show>.btn,
.btn-check:focus+.btn,
.btn-check:checked+.btn:focus {
	outline: 0;
	box-shadow: none;
}

.btn-primary:focus-visible {
	box-shadow: var(--PL-FOCUS-PRIMARY);
}

.btn-secondary:focus-visible,
.btn-outline-secondary:focus-visible {
	box-shadow: var(--PL-FOCUS-SECONDARY);
}

/* Active states coherent met hover */
.btn-primary:active,
.btn-primary.active,
.show>.btn-primary {
	background: var(--COLOR-PRIMARY-HOVER);
	border-color: var(--COLOR-PRIMARY-HOVER);
	color: #FFF;
}

.btn-secondary:active,
.btn-secondary.active,
.show>.btn-secondary {
	background: var(--COLOR-SECONDARY-HOVER);
	border-color: var(--COLOR-SECONDARY-HOVER);
	color: var(--COLOR-BLACK);
}

.btn-outline-secondary:active,
.btn-outline-secondary.active,
.show>.btn-outline-secondary {
	background: var(--COLOR-SECONDARY);
	border-color: var(--COLOR-SECONDARY);
	color: #FFF;
	box-shadow: var(--PL-FOCUS-SECONDARY);
}

/* Mobile tap highlight uit */
button,
a.btn {
	-webkit-tap-highlight-color: transparent;
}