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

/* ---------------------------------------------------------
   0) Baseline
   --------------------------------------------------------- */

html,
body {
	background-color: var(--COLOR-WHITE);
	color: var(--COLOR-DARKGRAY);
	font-family: var(--FONT-FAMILY);
	scroll-behavior: smooth;
}

/* Globale transitions op interactives */
a,
button,
.card,
.form-check-input,
.form-control {
	transition: var(--TRANSITION);
}

/* Visually hidden focusable (skiplinks, SR helpers) */
.visually-hidden-focusable:not(:focus):not(:focus-within) {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

/* Utility */
.text--muted {
	color: var(--COLOR-DARKGRAY);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(.85 * var(--font-size));
	font-weight: 400;
	text-decoration: underline;
}

.text--strong {
	color: var(--COLOR-BLACK);
	font-weight: 600;
}

.button--wrapper {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: space-between;
}

.intro--wrapper {
	margin-bottom: 1.25rem;
}

.intro--wrapper h1 {
	color: var(--COLOR-BLACK);
	font-size: calc(2.25 * var(--font-size));
	font-weight: 800;
	letter-spacing: -.005rem;
	line-height: 1.1;
	margin-bottom: .5rem;
}

.intro--wrapper h2 {
	color: var(--COLOR-PRIMARY);
	font-size: calc(1.85 * var(--font-size));
	font-weight: 800;
	letter-spacing: -.005rem;
	line-height: 1.1;
	margin-bottom: .5rem;
}

p {
	font-size: calc(1.1 * var(--font-size));
}

.intro--wrapper p {
	margin-bottom: 0;
}



/* ---------------------------------------------------------
   1) Header
   --------------------------------------------------------- */

.section--header {
	background-color: var(--COLOR-SECONDARY);
}

.logo--box {
	align-items: center;
	display: inline-flex;
	height: 50px;
	justify-content: center;
	overflow: hidden;
}

.logo--box img.planner--brand--logo {
	display: block;
	height: 100%;
	object-fit: contain;
	width: auto;
}


/* ---------------------------------------------------------
   2) Stepper
   --------------------------------------------------------- */

.stepper--box {
	-webkit-overflow-scrolling: touch;
}

.stepper--list {
	gap: .5rem;
	overflow-x: auto;
	padding-bottom: .25rem;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}

.stepper--list::-webkit-scrollbar {
	height: 6px;
}

.stepper--list::-webkit-scrollbar-thumb {
	background: var(--COLOR-MIDGRAY);
	border-radius: 8px;
}


.stepper--item {
	align-items: center;
	background-color: var(--COLOR-WHITE);
	border-radius: 999px;
	color: var(--COLOR-BLACK);
	display: inline-flex;
	padding: .5rem 1rem .5rem .6rem;
	white-space: nowrap;
}

.stepper--item[aria-disabled="true"] {
	opacity: .6;
}

.stepper--item--active {
	background-color: var(--COLOR-PRIMARY);
	color: var(--COLOR-WHITE);
}

.stepper--index {
	align-items: center;
	background-color: rgba(0, 0, 0, .08);
	border-radius: 50%;
	display: inline-grid;
	font-family: var(--FONT-FAMILY);
	font-size: calc(1.1 * var(--font-size));
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	height: 1.75rem;
	justify-items: center;
	width: 1.75rem;
}

.stepper--item--active .stepper--index {
	background-color: rgba(255, 255, 255, .25);
}

.stepper--label {
	font-family: var(--FONT-FAMILY);
	font-size: calc(1.05 * var(--font-size));
	font-weight: 700;
	letter-spacing: .0125rem;
	line-height: 1.1;
	margin-left: .35rem;
}

.stepper--link {
	color: inherit;
	text-decoration: none;
}

.stepper--link:hover {
	opacity: .85;
	text-decoration: none;
}


/* ---------------------------------------------------------
   3) Appointment section layout
   --------------------------------------------------------- */

.section--appointment {
	background-color: var(--COLOR-WHITE);
}

.card--form,
.resume--card {
	border: 1px solid var(--COLOR-LIGHTGRAY);
	border-radius: 16px;
	box-shadow: 0 0 12px rgba(0, 0, 0, .05) !important;
}

/* sticky aside met marge onder header */
.resume--card {
	position: sticky;
	top: 1rem;
}

/* Info-icoon naast labels */
.tooltip-icon {
	background: none;
	border: 0;
	padding: 0;
	line-height: 1;
	color: var(--COLOR-MEDIUMGRAY);
	cursor: help;
}

.tooltip-icon:hover,
.tooltip-icon:focus {
	color: var(--COLOR-DARKGRAY);
}

.tooltip.tt-forms .tooltip-inner,
.tooltip.tt-wijzig .tooltip-inner {
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(.9 * var(--font-size));
	line-height: var(--line-height);
}



/* ---------------------------------------------------------
   4) Form (globaal)
   --------------------------------------------------------- */

.form-label {
	color: var(--COLOR-BLACK);
}

.form-control::placeholder {
	color: var(--COLOR-MEDIUMGRAY);
}

.form-check {
	align-items: center;
	display: flex;
	gap: .625rem;
	margin: .375rem 0;
	padding-left: 0;
}

.form-check-input {
	block-size: 1.125rem;
	inline-size: 1.125rem;
	margin: 0;
}

.form-check .form-check-input {
	margin-left: 0;
}

.form-check-label {
	cursor: pointer;
	line-height: 1.3;
	margin: 0;
}

.form-control:focus,
.form-check-input:focus {
	box-shadow: var(--PL-FOCUS);
	outline: none;
}

.form_indication {
	color: var(--COLOR-BLACK);
	display: inline-block;
	font-weight: 600;
}

/* Kenteken + km */
.input--plate {
	letter-spacing: .06em;
	text-transform: uppercase;
}

.input--mileage {
	text-align: left;
}

/* RDW status helper (vul via JS) */
#plateStatus {
	color: var(--COLOR-PRIMARY);
	display: block;
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(1 * var(--font-size));
	font-weight: 400;
	margin-top: .35rem;
}

/* Formcheck link */
.agree--final--link {
	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;
	text-decoration: underline;
	transition: var(--TRANSITION);
}

.agree--final--link:hover {
	color: var(--brandcolor-3);
}


/* ---------------------------------------------------------
   5) Services (stap 3) – wrappers & toggles
   --------------------------------------------------------- */

/* Basiskader (geldt voor zowel collapsible als statisch) */
.svc--group {
	background-color: var(--COLOR-WHITE);
	border: 1px solid var(--COLOR-LIGHTGRAY);
	border-radius: 12px;
}

/* Ruimte tussen opeenvolgende groepen */
.svc--group+.svc--group {
	margin-top: .75rem;
}

/* ----- Collapsible variant (details/summary) ----- */

/* Verberg default marker en maak klikbaar */
.svc--summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	list-style: none;
	margin: 0;
	padding: 0.5rem 0rem;
	user-select: none;
	font-weight: 600;
}

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

/* Inhoudsruimte binnen een openklapgroep */
.svc--content {
	padding: 0 1.25rem 1rem 1.25rem;
}

/* Chevron-animatie (omhoog = open) */
.svc--group[open] .fa-chevron-up {
	transform: rotate(0);
	transition: transform var(--TRANSITION);
}

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

/* Checkbox-rijen netjes uitlijnen binnen groepen */
.svc--content .form-check,
.svc--body .form-check {
	align-items: center;
	display: flex;
	gap: .5rem;
	margin-bottom: .5rem;
}

.svc--content .form-check-input,
.svc--body .form-check-input {
	float: none;
	/* override bootstrap float */
	margin: 0;
	/* horizontaal gecentreerd tov label */
}

.svc--content .form-check-label,
.svc--body .form-check-label {
	line-height: 1.4;
	/* prettige leeslijn */
}

/* Hint-icoon naast label (optioneel) */
.svc--hint {
	color: var(--COLOR-MEDIUMGRAY);
}

.svc--hint:hover {
	color: var(--COLOR-DARKGRAY);
}

/* ----- Statische variant (altijd open, zonder toggle) ----- */

.svc--group--static {
	padding: 1rem 1.25rem;
}

.svc--header {
	font-weight: 600;
}

.svc--body {
	padding: 0;
	/* rijen gebruiken eigen grid spacing */
}

.svc--body .row+.row {
	margin-top: .25rem;
	/* subtiele verticale ritme binnen de static group */
}

/* ---------------------------------------------------------
   6) Datum & tijd (stap 4) – kalender
   --------------------------------------------------------- */

/* Header (titel + nav) */
.calendar--month {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .75rem;
}

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

/* Eigen nav-knoppen (geen Bootstrap .btn) */
.calendar--btn {
	align-items: center;
	background: var(--COLOR-WHITE);
	border: 1.5px solid var(--COLOR-LIGHTGRAY);
	border-radius: 10px;
	cursor: pointer;
	display: inline-flex;
	gap: .5rem;
	justify-content: center;
	line-height: 1;
	padding: .4rem .65rem;
}

.calendar--btn:hover {
	border-color: var(--COLOR-MIDGRAY);
}

.calendar--btn:focus {
	box-shadow: var(--PL-FOCUS-SECONDARY);
	outline: none;
}

/* Weekdagkoppen */
.calendar--weekdays {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: .25rem;
	margin-bottom: .25rem;
	padding: 0 .25rem;
}

.calendar--weekday {
	color: var(--COLOR-BLACK);
	font-family: var(--FONT-FAMILY);
	font-size: calc(1.1 * var(--font-size));
	font-weight: 700;
	text-align: center;
}

/* Dagenraster */
.calendar--grid {
	border: 1px solid var(--COLOR-LIGHTGRAY);
	border-radius: 12px;
	display: grid;
	gap: .25rem;
	grid-template-columns: repeat(7, 1fr);
	padding: .5rem;
}

/* Dag-knoppen */
.calendar--day {
	align-items: center;
	aspect-ratio: 1 / .75;
	background: var(--COLOR-WHITE);
	border: 1px solid transparent;
	border-radius: 10px;
	display: inline-flex;
	font-variant-numeric: tabular-nums;
	justify-content: center;
	padding: .25rem;
	cursor: pointer;
}

.calendar--day:hover {
	background-color: var(--COLOR-LIGHTGRAY);
}

.calendar--day.is-active,
.calendar--day:focus {
	border-color: var(--COLOR-PRIMARY);
	box-shadow: var(--PL-FOCUS-PRIMARY);
	outline: none;
	border-width: 2px;
}

.calendar--day.is-active:hover {
	background-color: var(--COLOR-PRIMARY);
	color: var(--COLOR-WHITE);
}

/* Vandaag */
.calendar--day.is-today {
	background: var(--COLOR-WHITE);
	border-color: var(--brandcolor-3);
	border-width: 2px;
}

/* Disabled / buiten maand */
.calendar--day.is-disabled,
.calendar--day[disabled] {
	color: #AAA;
	background: #FDFDFD;
	border-color: #EFEFEF;
	cursor: not-allowed;
}



/* ---------------------------------------------------------
   7) Vervangend vervoer (stap 5) – kaartachtige opties
   --------------------------------------------------------- */

.option--card {
	border: 1px solid var(--COLOR-LIGHTGRAY);
	border-radius: 12px;
	padding: .75rem 1rem;
}

.option--card.is-active {
	border-color: var(--COLOR-PRIMARY);
	box-shadow: 0 0 0 .2rem rgba(255, 127, 24, .15);
}

/* ---------------------------------------------------------
   8) Resume (rechterkolom)
   --------------------------------------------------------- */

h3.resume--heading {
	color: var(--COLOR-BLACK);
	font-size: calc(1.65 * var(--font-size));
	font-weight: 800;
	letter-spacing: .005rem;
	line-height: 1.1;
	margin-bottom: .5rem;
}

.resume--block+hr {
	border-color: var(--COLOR-LIGHTGRAY);
}

.resume--headline {
	color: var(--COLOR-BLACK);
	font-size: .95rem;
	font-weight: 600;
	margin-bottom: .5rem;
}

.resume--list {
	margin: 0;
}

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

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

.resume--services,
.resume--datetime,
.resume--mobility,
.resume--name,
.resume--email,
.resume--phone,
.resume--ctype,
.resume--company,
.resume--leaseco,
.resume--street,
.resume--houseno,
.resume--zip,
.resume--city,
.resume--remarks {
	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 {
	font-variant-numeric: tabular-nums;
	letter-spacing: .04em;
	text-transform: uppercase;
}

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

.resume--email,
.resume--mileage,
.resume--vehicle {
	color: var(--COLOR-BLACK);
}

/* ---------------------------------------------------------
   9) Alerts
   --------------------------------------------------------- */

.alert-info {
	background-color: #E8F2FF;
	border-color: #D6E6FF;
	color: #244D8B;
	font-family: var(--FONT-FAMILY-ALT);
	font-weight: 400;
	line-height: 1.35;
}

.alert-warning {
	background-color: #FFCBD8;
	border-color: #FFCBD8;
	color: #9F0033;
	font-family: var(--FONT-FAMILY-ALT);
	font-weight: 400;
	line-height: 1.35;
}

/* ---------------------------------------------------------
   10) Buttons
   --------------------------------------------------------- */

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

.btn-primary:hover,
.btn-primary:focus {
	background-color: #E66F11;
	/* donkerder oranje */
	border-color: #E66F11;
}

.btn-link {
	color: var(--COLOR-DARKGRAY);
}

.btn-link:hover {
	color: var(--COLOR-BLACK);
	text-decoration: underline;
}

/* 'Opslaan in agenda' disabled state (bedankt) */
.btn--calendar[aria-disabled="true"],
.btn--calendar:disabled {
	cursor: not-allowed;
	opacity: .65;
}

/* ---------------------------------------------------------
   11) Accessibility tweaks
   --------------------------------------------------------- */

[aria-current="step"] {
	font-weight: 600;
}

[aria-disabled="true"] {
	cursor: not-allowed;
}

/* ---------------------------------------------------------
   12) GSAP hooks
   --------------------------------------------------------- */

.gsap--fade-in {
	opacity: 0;
	transform: translateY(8px);
	will-change: opacity, transform;
}

/* ---------------------------------------------------------
   13) Responsive (kleine, niet-mq-specifieke hulpen)
   --------------------------------------------------------- */

@media (min-width: 992px) {

	/* custom sticky met offset voor grote schermen */
	.position-lg-sticky {
		position: sticky;
		top: 1rem;
	}
}

/* ---------------------------------------------------------
   14) Footer & legal
   --------------------------------------------------------- */

.section--footer {
	background-color: var(--COLOR-WHITE);
}

/* Wrapper om spacing/uitlijning consistent te houden */
.footer--legal {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	justify-content: space-between;
}

/* Basis tekst (géén underline) */
.footer--label {
	color: var(--COLOR-DARKGRAY);
	display: flex;
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(.95 * var(--font-size));
	font-weight: 400;
	gap: 1.5rem;
	margin-bottom: 0;
	text-decoration: none;
}

/* Links (wel underline + transition) */
.footer--link {
	color: var(--COLOR-DARKGRAY);
	font-family: var(--FONT-FAMILY-ALT);
	font-size: calc(.95 * var(--font-size));
	font-weight: 400;
	text-decoration: none;
	transition: var(--TRANSITION);
}

.footer--link:hover {
	color: var(--COLOR-BLACK);
	text-decoration-color: var(--COLOR-BLACK);
}

/* Toegankelijke focus */
.footer--link:focus-visible {
	outline: 2px solid var(--COLOR-SECONDARY);
	outline-offset: 2px;
	text-decoration: none;
}

/* Layout kolommen in footer */
.footer--left {
	display: flex;
	flex-direction: column;
	gap: .25rem;
}

.footer--badges {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.footer--badge {
	height: 30px;
	/* gevraagd: ~30px hoog */
	width: auto;
	display: block;
}

@media (max-width: 576px) {
	.footer--legal {
		align-items: flex-start;
		gap: .75rem;
	}
}




/* END CSS */