/* =========================================================
   FORMS.CSS
   WilMax Planner UI – STELLAR
   FORWARD
   ========================================================= */


/* 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;
}

.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 intro-teksten onder H1/H2 */
.intro--wrapper {
	margin-bottom: 1rem;
}

.intro--wrapper>p {
	margin-bottom: 0.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;
}

/* Invalid / valid feedback (Bootstrap classes) */
.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:checked {
	background-color: var(--brandcolor-3);
	border-color: var(--brandcolor-3);
}

.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: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;
}

/* Grotere variant voor prominente opties */
.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 state */
.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;
}

/* Elke checkbox rij in services lijsten */
.svc--check {
	margin: .375rem 0;
}


/* ---------------------------------------
	  5) Buttons wrapper
	  --------------------------------------- */
.button--wrapper {
	border-top: 2px solid #EAECEF;
	gap: .5rem;
	padding-top: 1.5rem;
}

.btn,
a.btn {
	border-width: 1.5px;
	font-size: calc(1.15 * var(--font-size));
	font-weight: 800;
	letter-spacing: -.005rem;
	line-height: 1.1;
	margin: 0;
	padding: .75rem 1rem;
	text-decoration: none;
}

/* Primary = oranje */
.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);
}

/* Secondary = Grey */
.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);
}

/* Timeslot = blue */
.btn-timeslot {
	background: var(--COLOR-WHITE);
	border-color: var(--COLOR-MIDGRAY);
	color: var(--COLOR-BLACK);
	width: 100px;
}

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

/* Outline-varianten */
.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);
}

/* Links in secundaire kleur */
.link-secondary {
	color: var(--COLOR-SECONDARY);
}

.link-secondary:hover {
	color: var(--COLOR-SECONDARY-HOVER);
}

/* Verwijder Bootstrap's blauwe focusring overal */
.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;
}

/* Toegankelijke, eigen focusring per variant */
.btn-primary:focus-visible {
	box-shadow: var(--PL-FOCUS-PRIMARY);
}

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

/* Active states consistent met hover-kleuren (geen Bootstrap-blauw) */
.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);
}

.btn-timeslot:active,
.btn-timeslot.active {
	background: var(--COLOR-SECONDARY-HOVER);
	border-color: var(--COLOR-SECONDARY-HOVER);
	color: var(--COLOR-WHITE);
}

/* Mobile tap highlight (iOS/Android) uitzetten */
button,
a.btn {
	-webkit-tap-highlight-color: transparent;
}



/* ---------------------------------------
	  6) Resume typografie (rechts)
	  --------------------------------------- */
.resume--heading {
	color: var(--COLOR-BLACK);
	font-weight: 700;
	text-transform: uppercase;
	font-size: .95rem;
	letter-spacing: .06em;
}

.resume--section-title {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: calc(1.1 * var(--font-size));
	font-weight: 700;
}

.resume--services li {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(1 * var(--font-size));
	font-weight: 400;
	margin-bottom: .15rem;
}

.resume--label {
	color: var(--COLOR-DARKGRAY);
	font-weight: 500;
}

.resume--value {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(1 * var(--font-size));
	font-weight: 400;
	margin-bottom: .15rem;
}

.resume--plate {
	text-transform: uppercase;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

.resume--type {
	text-transform: uppercase;
}

/* ---------------------------------------
	  7) Sticky aside (Safari/parents fixes)
	  --------------------------------------- */
.section--appointment {
	overflow: visible;
}

/* belangrijk: geen hidden op parent */
.sticky-lg-top {
	top: 1.25rem;
}

/* wat lucht boven het resume-kaartje */
aside.resume--card {
	align-self: flex-start;
}

/* voorkom gelijke hoogte gedrag */