/*
 * Princen Werkplaatsplanner — huisstijl
 * Eén bestand voor twee plekken:
 *   .pp-*      kentekenveld, startformulier en pop-up op de pagina zelf
 *   #cwpbase   het UnameIT-widget (wordt in de shadow root geladen; #id wint van hun .cwpbase__holder.cwpbase)
 */

/* ---------- Kentekenveld ([princen_kenteken]) ---------- */

.pp-form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin: 0;
}
.pp-plate {
	display: flex;
	height: 62px;
	margin: 0;
	border: 2px solid #2B2B33;
	border-radius: 8px;
	overflow: hidden;
	background: #F7C600;
	cursor: text;
}
.pp-plate span {
	width: 40px;
	flex: none;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	padding-bottom: 9px;
	background: #1C3F94;
	color: #FFFFFF;
	font: 700 13px 'Source Sans 3', sans-serif;
}
/* .x.x = net zwaarder dan de input-reset van het thema (input[type="text"]) */
.pp-plate.pp-plate input {
	all: unset;
	flex: 1;
	min-width: 0;
	text-align: center;
	font-family: Nunito, sans-serif;
	font-weight: 800;
	font-size: 28px;
	letter-spacing: .08em;
	color: #2B2B33;
	text-transform: uppercase;
}
.pp-plate.pp-plate input::placeholder {
	color: rgba(43, 43, 51, .45);
}
.pp-plate:focus-within {
	outline: 3px solid #424999;
	outline-offset: 2px;
}
/* .x.x = net zwaarder dan de knopstijlen van thema/Elementor-kit (button:hover, .elementor-kit-8 button) */
.pp-btn.pp-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	width: 100%;
	border: 0;
	border-radius: 8px;
	padding: 16px 22px;
	background: #E36D49;
	color: #FFFFFF;
	font-family: Nunito, sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	cursor: pointer;
	transition: background .15s;
}
.pp-btn.pp-btn:hover,
.pp-btn.pp-btn:focus {
	background: #9E4F2E;
	color: #FFFFFF;
}
.pp-arrow {
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url(https://cdn.jsdelivr.net/npm/lucide-static@0.452.0/icons/arrow-right.svg) center/contain no-repeat;
	mask: url(https://cdn.jsdelivr.net/npm/lucide-static@0.452.0/icons/arrow-right.svg) center/contain no-repeat;
}

/* ---------- Startformulier ([princen_planner]) ----------
 * Velden twee aan twee als er ruimte is, anders onder elkaar.
 * Wrapt op de breedte van de Elementor-kolom, niet op die van het scherm.
 */
.pp-start {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 12px;
	margin: 0;
	scroll-margin-top: 120px; /* niet onder een sticky header */
	font-family: 'Source Sans 3', sans-serif;
}
.pp-field {
	flex: 1 1 240px; /* kentekenplaat heeft ~240px nodig; smaller = velden onder elkaar */
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.pp-full { flex-basis: 100%; }
.pp-form *, .pp-start * { box-sizing: border-box; }
.pp-label {
	padding: 0;
	font: 700 15px/1.3 Nunito, sans-serif;
	color: #424999;
}
.pp-input.pp-input {
	width: 100%;
	height: 52px;
	padding: 12px 14px;
	font: 400 16px 'Source Sans 3', sans-serif;
	color: #2B2B33;
	background: #FFFFFF;
	border: 1.5px solid #DDE0EA;
	border-radius: 8px;
	box-shadow: none;
}
.pp-input.pp-input:focus { outline: 0; border-color: #424999; box-shadow: 0 0 0 3px rgba(66, 73, 153, .15); }
.pp-input::placeholder { color: #9FA3D0; }
textarea.pp-input.pp-input { height: auto; min-height: 96px; resize: vertical; line-height: 1.5; }
.pp-field[hidden] { display: none; }

.pp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.pp-chip { position: relative; margin: 0; cursor: pointer; }
.pp-chip input { position: absolute; opacity: 0; pointer-events: none; }
.pp-chip span {
	display: block;
	padding: 10px 14px;
	border: 1.5px solid #DDE0EA;
	border-radius: 8px;
	background: #FFFFFF;
	font: 600 15px 'Source Sans 3', sans-serif;
	color: #2B2B33;
	transition: background .15s, border-color .15s;
}
.pp-chip:hover span { border-color: #9FA3D0; }
.pp-chip input:checked + span { background: #424999; border-color: #424999; color: #FFFFFF; }
.pp-chip input:focus-visible + span { outline: 3px solid #424999; outline-offset: 2px; }
.pp-extra {
	margin-top: 12px;
	padding: 14px;
	border-radius: 8px;
	background: #F4F5F9;
}
.pp-extra[hidden] { display: none; }
.pp-sub { display: block; margin-bottom: 10px; font-size: 14px; color: #5A5A5A; }
.pp-extra .pp-chip span { padding: 8px 12px; font-size: 14px; }
.pp-note { margin: -6px 0 0; text-align: center; font-size: 14px; color: #5A5A5A; }

.pp-km {
	display: flex;
	align-items: center;
	height: 62px; /* gelijk aan de kentekenplaat */
	margin: 0;
	padding: 0 16px;
	background: #FFFFFF;
	border: 1.5px solid #DDE0EA;
	border-radius: 8px;
	cursor: text;
}
.pp-km:focus-within { border-color: #424999; box-shadow: 0 0 0 3px rgba(66, 73, 153, .15); }
.pp-km.pp-km input {
	all: unset;
	flex: 1;
	min-width: 0;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 18px; /* >= 16px: geen inzoomen op iOS */
	color: #2B2B33;
}
.pp-km.pp-km input::placeholder { color: #9FA3D0; }
.pp-km span { font-family: Nunito, sans-serif; font-weight: 700; color: #424999; }

/* ---------- Zakelijk formulier (JetFormBuilder, widget-class pp-zakelijk) ---------- */
.elementor-widget.pp-zakelijk { width: 100%; }
/* "Hoeveel voertuigen?" als blokken in plaats van rondjes */
.pp-zakelijk .field-type-radio-field .jet-form-builder__fields-group {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 12px;
}
.pp-zakelijk .field-type-radio-field .jet-form-builder__field-wrap { margin: 0; }
.pp-zakelijk .field-type-radio-field label { display: block; margin: 0; cursor: pointer; }
.pp-zakelijk .field-type-radio-field input { position: absolute; opacity: 0; pointer-events: none; }
.pp-zakelijk .field-type-radio-field input + span {
	display: block;
	padding: 14px 8px;
	text-align: center;
	border: 1.5px solid #DDE0EA;
	border-radius: 8px;
	background: #FFFFFF;
	font: 700 16px Nunito, sans-serif;
	color: #2B2B33;
	transition: background .15s, border-color .15s;
}
.pp-zakelijk .field-type-radio-field .jet-form-builder__field-label.for-radio > span::before { content: none; } /* rondje van JetFormBuilder */
.pp-zakelijk .field-type-radio-field label:hover input + span { border-color: #9FA3D0; }
.pp-zakelijk .field-type-radio-field input:checked + span { background: #424999; border-color: #424999; color: #FFFFFF; }
.pp-zakelijk .field-type-radio-field input:focus-visible + span { outline: 3px solid #424999; outline-offset: 2px; }
/* Verzendknop over de volle breedte, met pijl */
.pp-zakelijk .jet-form-builder__action-button-wrapper,
.pp-zakelijk .jet-form-builder__submit-wrap { width: 100%; }
.elementor .pp-zakelijk .jet-form-builder__action-button.jet-form-builder__submit {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 10px;
	padding: 18px 22px;
	border-radius: 8px;
	font-size: 18px;
}
.elementor .pp-zakelijk .jet-form-builder__submit::after {
	content: "";
	width: 18px;
	height: 18px;
	background: currentColor;
	-webkit-mask: url(https://cdn.jsdelivr.net/npm/lucide-static@0.452.0/icons/arrow-right.svg) center/contain no-repeat;
	mask: url(https://cdn.jsdelivr.net/npm/lucide-static@0.452.0/icons/arrow-right.svg) center/contain no-repeat;
}
@media (max-width: 480px) {
	.pp-zakelijk .field-type-radio-field .jet-form-builder__fields-group { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Pop-up ---------- */
.pp-dialog {
	width: min(1080px, calc(100vw - 48px));
	max-width: none;
	max-height: calc(100dvh - 48px);
	padding: 0;
	border: 0;
	border-radius: 16px;
	background: #FFFFFF;
	color: #2B2B33;
	box-shadow: 0 24px 60px rgba(20, 22, 60, .35);
	overflow: hidden;
}
.pp-dialog[open] { display: flex; flex-direction: column; animation: pp-in .5s cubic-bezier(.2, .8, .2, 1); }
.pp-dialog::backdrop { background: rgba(20, 22, 60, .6); }
.pp-dialog[open]::backdrop { animation: pp-fade .5s ease; }
@keyframes pp-in { from { opacity: 0; transform: translateY(24px) scale(.97); } }
@keyframes pp-fade { from { opacity: 0; } }
html:has(.pp-dialog[open]) { overflow: hidden; } /* pagina erachter niet laten scrollen */

.pp-dialog-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 14px 16px 14px 28px;
	border-bottom: 1px solid #DDE0EA;
}
.pp-dialog-head strong { font: 700 20px/1.2 Nunito, sans-serif; color: #424999; }
.pp-close.pp-close {
	width: 44px;
	padding: 0;
	height: 44px;
	flex: none;
	border: 0;
	border-radius: 8px;
	background: #F4F5F9;
	cursor: pointer;
	position: relative;
}
.pp-close::before {
	content: "";
	position: absolute;
	inset: 12px;
	background: #424999;
	-webkit-mask: url(https://cdn.jsdelivr.net/npm/lucide-static@0.452.0/icons/x.svg) center/contain no-repeat;
	mask: url(https://cdn.jsdelivr.net/npm/lucide-static@0.452.0/icons/x.svg) center/contain no-repeat;
}
.pp-close.pp-close:hover,
.pp-close.pp-close:focus { background: #E8EAF2; }
.pp-close.pp-close:focus-visible { outline: 3px solid #424999; outline-offset: 2px; }
.pp-dialog-body {
	flex: 0 1 auto;   /* hoogte volgt de inhoud (JS zet height), max-height van de pop-up begrenst */
	min-height: 0;
	height: 320px;
	transition: height .55s cubic-bezier(.2, .8, .2, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 4px 28px 28px;
	position: relative;
}
/* Tijdens het automatisch doorklikken van stap 1 een laadtekst i.p.v. een flits van stap 1 */
#cwp3 { transition: opacity .45s ease .1s; }
.pp-dialog[data-busy] #cwp3 { opacity: 0; visibility: hidden; transition: none; }
.pp-dialog[data-busy] .pp-dialog-body { overflow: hidden; }
.pp-dialog[data-busy] .pp-dialog-body::before {
	content: "Even geduld, we zetten je afspraak klaar\2026";
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 700 18px Nunito, sans-serif;
	color: #424999;
}

/* Mobiel: pop-up schermvullend */
@media (max-width: 640px) {
	.pp-dialog {
		width: 100vw;
		height: 100dvh;
		max-height: 100dvh;
		margin: 0;
		border-radius: 0;
	}
	.pp-dialog-head { padding-left: 16px; }
	.pp-dialog-body { padding: 0 16px 24px; flex: 1 1 auto; height: auto !important; }
	@keyframes pp-in { from { opacity: 0; transform: translateY(40px); } }
}


/* ---------- UnameIT-widget ([princen_planner]) ---------- */

#cwpbase {
	font-family: 'Source Sans 3', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #2B2B33;
}
#cwpbase a { color: #C4522F; }
#cwpbase a:hover { color: #9E4F2E; }

/* Koppen: geen hoofdletters, Nunito, indigo */
#cwpbase h1, #cwpbase h2, #cwpbase h3, #cwpbase h4,
#cwpbase .h1, #cwpbase .h2, #cwpbase .h3, #cwpbase .h4 {
	font-family: Nunito, sans-serif;
	font-weight: 700;
	text-transform: none;
	color: #424999;
	line-height: 1.25;
}
#cwpbase h1, #cwpbase .h1 { font-size: 30px; margin: 0 0 6px; }
#cwpbase h2, #cwpbase .h2, #cwpbase h3, #cwpbase .h3 { font-size: 21px; }
#cwpbase p { font-size: 16px; }
#cwpbase .main form > section:first-child p { color: #5A5A5A; }

/* Stappenbalk */
#cwpbase .crtl-stepper::before { background: #E8EAF2; }
#cwpbase .crtl-stepper::after { background: #424999; }
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"] a,
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"] a:hover,
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"] a:focus { color: #9FA3D0; }
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"] a::after { background: #CBCFE8; }
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"] a [class^="crtl-stepper__item__text"] {
	font-family: Nunito, sans-serif;
	font-weight: 700;
	font-size: 15px;
	text-transform: none;
}
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"] a[href]:hover { color: #424999; }
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--completed::before { background-color: #424999; }
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--completed a { color: #424999; }
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--completed a::after { border-color: #424999; background: #30326B; }
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--active a,
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--active a:hover { color: #E36D49; }
#cwpbase .crtl-stepper > [class^="crtl-stepper__item"].crtl-stepper__item--active a::after { border-color: #E36D49; background: #FFFFFF; }

/* Invoervelden */
#cwpbase .form-control {
	height: 52px;
	padding: 12px 14px;
	font-family: 'Source Sans 3', sans-serif;
	font-size: 16px;
	color: #2B2B33;
	background-color: #FFFFFF;
	border: 1.5px solid #DDE0EA;
	border-radius: 8px;
}
#cwpbase .form-control:focus { border-color: #424999; box-shadow: 0 0 0 3px rgba(66, 73, 153, .15); }
#cwpbase .form-control::placeholder { color: #9FA3D0; }
#cwpbase label { font-family: Nunito, sans-serif; font-weight: 700; color: #424999; }
#cwpbase .form-group .error-field input,
#cwpbase .form-control.has-error { border-color: #C62828; color: #C62828; }

/* Kenteken (zelfde plaat als op de pagina) */
#cwpbase .input-group--licenceplate { border: 2px solid #2B2B33; border-radius: 8px; overflow: hidden; }
#cwpbase .input-group--licenceplate .input-group-addon {
	background: #1C3F94;
	border: 0;
	border-radius: 0 !important;
	width: 40px;
}
#cwpbase .input-group--licenceplate .form-control,
#cwpbase .input-group--licenceplate.input-locale--nl .form-control {
	height: 58px;
	background-color: #F7C600;
	border: 0;
	border-radius: 0 !important;
	box-shadow: none;
	font-family: Nunito, sans-serif;
	font-weight: 800;
	font-size: 26px;
	letter-spacing: .08em;
	color: #2B2B33;
}
#cwpbase .input-group--licenceplate .form-control:-webkit-autofill { -webkit-box-shadow: 0 0 0 1000px #F7C600 inset; }

/* Kilometerstand */
#cwpbase .input-group--milage .form-control {
	height: 62px;
	background-color: #FFFFFF;
	border-radius: 8px 0 0 8px !important;
	border-right: 0;
	font-size: 20px;
}
#cwpbase .input-group--milage .form-control:focus { box-shadow: none; border-color: #424999; }
#cwpbase .input-group--milage .input-group-addon {
	background: #FFFFFF;
	border: 1.5px solid #DDE0EA;
	border-left: 0;
	border-radius: 0 8px 8px 0 !important;
	font-family: Nunito, sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: #424999;
}
#cwpbase .input-group--milage .form-control::placeholder { font-size: 16px; color: #9FA3D0; }

/* Knoppen */
#cwpbase .btn {
	font-family: Nunito, sans-serif;
	font-weight: 700;
	font-size: 17px;
	text-transform: none;
	padding: 14px 3em 14px 1.6em;  /* rechts ruimte voor hun pijl-icoon */
	border-radius: 8px;
	border-width: 0;
	transition: background .15s;
}
#cwpbase .btn-primary::after,
#cwpbase .btn-default::after { right: 1.4em; }
#cwpbase .btn.btn-back { padding: 14px 1.6em 14px 3em; }
#cwpbase .btn.btn-back::after { content: none; }
#cwpbase .btn.btn-back::before { left: 1.4em; }
#cwpbase .btn-primary,
#cwpbase .btn-primary:focus,
#cwpbase .btn-primary:active,
#cwpbase .btn-primary.disabled:hover,
#cwpbase .btn-primary[disabled]:hover { color: #FFFFFF; background-color: #E36D49; }
#cwpbase .btn-primary:hover,
#cwpbase .btn-primary:active:hover { color: #FFFFFF; background-color: #9E4F2E; }
#cwpbase .btn-default,
#cwpbase .btn-default:focus { color: #424999; background-color: #FFFFFF; box-shadow: inset 0 0 0 1.5px #CBCFE8; }
#cwpbase .btn-default:hover,
#cwpbase .btn-default:active { color: #424999; background-color: #F4F5F9; box-shadow: inset 0 0 0 1.5px #424999; }

/* Keuzelijsten (werkzaamheden, vervangend vervoer) */
#cwpbase .crtl-form-list__row { border-color: #DDE0EA; }
#cwpbase .crtl-form-list__row__label,
#cwpbase .crtl-form-list__row label {
	font-family: 'Source Sans 3', sans-serif;
	font-weight: 400;
	color: #2B2B33;
}
#cwpbase .radio input + label::before,
#cwpbase .checkbox input + label::before { background: #FFFFFF; border: 1.5px solid #CBCFE8; }
#cwpbase .radio input:focus + label::before,
#cwpbase .checkbox input:focus + label::before { border-color: #424999; }
#cwpbase .radio input[type="radio"]:checked + label::after,
#cwpbase .checkbox input[type="radio"]:checked + label::after { background: #424999; }
#cwpbase .radio input[type="checkbox"]:checked + label::after,
#cwpbase .checkbox input[type="checkbox"]:checked + label::after { color: #424999; }
#cwpbase .crtl-form-list__row__infobox-toggle { color: #424999; }
#cwpbase .crtl-infobox__content { background-color: #F4F5F9; }
#cwpbase .crtl-infobox--pointer-left .crtl-infobox__content::before,
#cwpbase .crtl-infobox--pointer-right .crtl-infobox__content::before { border-color: transparent transparent #F4F5F9; }

/* Kalender */
#cwpbase .crtl-browser__title { font-family: Nunito, sans-serif; font-weight: 700; color: #424999; }
#cwpbase .crtl-browser a { color: #424999; }
#cwpbase .crtl-datepicker__picker__legend li { font-family: Nunito, sans-serif; font-weight: 700; color: #5A5A5A; }
#cwpbase [class^="crtl-datepicker__picker__calendar__date"] label strong { font-family: Nunito, sans-serif; font-weight: 700; color: #2B2B33; }
#cwpbase [class^="crtl-datepicker__picker__calendar__date"] label::after { background: #424999; }
#cwpbase [class^="crtl-datepicker__picker__calendar__date"] label:hover { border-color: #424999; background: #F4F5F9; }
#cwpbase [class^="crtl-datepicker__picker__calendar__date"] input[type="radio"]:checked ~ label { border-color: #424999; background: #F4F5F9; }
#cwpbase [class^="crtl-datepicker__picker__calendar__date"] input[type="radio"]:checked ~ label em { color: #424999; }
#cwpbase [class^="crtl-datepicker__picker__calendar__date"].crtl-datepicker__picker__calendar__date--limmited label::before { background: #E36D49; }
#cwpbase [class^="crtl-datepicker__picker__calendar__date"].crtl-datepicker__picker__calendar__date--limmited label em { color: #C4522F; }

/* Overzicht rechts */
#cwpbase .aside > .h3 { margin-top: 0; }
#cwpbase .crtl-accordion--panel .crtl-accordion__section { background: #F4F5F9; border-radius: 12px; }
#cwpbase .crtl-accordion--panel .crtl-accordion__section + .crtl-accordion__section { margin-top: 8px; }
#cwpbase .crtl-accordion--panel .crtl-accordion__section__header,
#cwpbase .crtl-accordion--panel .crtl-accordion__section__header .h4 {
	font-family: Nunito, sans-serif;
	font-weight: 700;
	font-size: 17px;
	text-transform: none;
	color: #424999;
}
#cwpbase .crtl-licenceplate { background: #F7C600; font-family: Nunito, sans-serif; letter-spacing: .05em; }
#cwpbase .crtl-licenceplate::before { background: #1C3F94; }

/* Labels, badges, meldingen */
#cwpbase .crtl-badge--primairy, #cwpbase .crtl-label--primary { background: #424999; }
#cwpbase .crtl-badge--secondary, #cwpbase .crtl-label--secondary { background: #E36D49; }
#cwpbase .crtl-badge--alert { background-color: #C62828; }
#cwpbase .crtl-icon--primary { color: #424999; }
#cwpbase .crtl-icon--secondary { color: #E36D49; }
#cwpbase .alert-danger { background: #FDECEC; border-color: #F5C2C2; color: #C62828; border-radius: 8px; }
#cwpbase .crtl-message--success::after { color: #2E7D4F; }
#cwpbase .crtl-message--success::before { border-color: rgba(46, 125, 79, .3); }
#cwpbase .crtl-message--error::after { color: #C62828; }
#cwpbase .crtl-message--error::before { border-color: rgba(198, 40, 40, .3); }

/* Smallere schermen: geen ruimte voor het overzicht naast de stappen; stappen volle breedte */
@media (max-width: 1000px) {
	#cwpbase .main { width: 100%; }
	#cwpbase .aside { display: none; }
}