/*
 * Skin voor Forminator binnen .form-main.
 *
 * Het thema levert het oranje kader (.form-main) en de titel uit de originele
 * stylesheet; deze regels laten de velden van de plugin de opmaak van het
 * oorspronkelijke offerteformulier volgen: labels Roboto 20px bold, invoervelden
 * 50px hoog zonder rand, en een zwarte knop in Roboto Condensed 25px.
 *
 * Waarom !important: Forminator schrijft per formulier een stylesheet weg met
 * een ID-selector (.forminator-ui#forminator-module-192...). Die wint van elke
 * class-regel, ongeacht laadvolgorde, en de gratis versie neemt de
 * typografie-instellingen niet mee bij het genereren. De instellingen staan wel
 * goed in tools/setup-forms.php, zodat de opmaak klopt zodra de plugin die weer
 * gebruikt of de klant hem via de UI aanpast.
 */

.form-main .forminator-ui.forminator-custom-form[data-design="default"] {
	width: 100% !important;
	float: left;
	margin: 0 !important;
	font-family: "Roboto", sans-serif !important;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-row {
	width: 100% !important;
	float: left;
	margin: 0 0 15px !important;
	padding: 0 !important;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-row:last-child {
	margin-bottom: 0;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-col {
	width: 100% !important;
	float: left;
	padding: 0 !important;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-field {
	width: 100% !important;
	float: left;
}

/* Labels. */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-label {
	display: block !important;
	width: 100% !important;
	float: left;
	margin: 0 0 10px !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	color: #000 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
}

/*
 * Boven de keuzerondjes staat op de originele site niets. Het label bestaat hier
 * wel, omdat Forminator het gebruikt als kolomkop in het inzendingenoverzicht en
 * in de notificatiemail. Het wordt daarom uit beeld gehaald in plaats van
 * verborgen met display:none, zodat een schermlezer de vraag nog voorleest.
 *
 * Selector op het elementtype: Forminator zet het label van een keuzegroep in
 * een <span> en dat van de tekstvelden in een <label>. Het id is niet bruikbaar,
 * want daar zit per aanroep een andere hash in.
 */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] span.forminator-label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Het origineel toont geen sterretje bij verplichte velden. */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-required {
	display: none !important;
}

/* Tekstvelden. */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-textarea {
	width: 100% !important;
	float: left;
	height: 50px !important;
	min-height: 50px !important;
	margin: 0 !important;
	padding: 0 10px !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 17px !important;
	line-height: 48px !important;
	color: #000 !important;
	background: #fff !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-textarea {
	height: auto !important;
	min-height: 100px !important;
	padding-top: 12px;
	line-height: 24px !important;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input::placeholder,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-textarea::placeholder {
	color: #ababae !important;
	font-size: 18px !important;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-input:focus,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-textarea:focus {
	border: 0 !important;
	outline: 2px solid #000;
	outline-offset: -2px;
	box-shadow: none !important;
	background: #fff !important;
}

/* Radiogroep: één optie per regel, label vet zoals in het origineel. */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-field-radio {
	margin-bottom: 15px;
}

/*
 * Het origineel zet elke keuze in een blokje van 25px met 10px eronder — een
 * stap van 35px, drie keuzes samen 105px. Forminator komt op 24px uit, dus
 * zorgt min-height dat de rondjes op dezelfde regels staan als daar.
 */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] label.forminator-radio {
	display: flex !important;
	align-items: center;
	width: 100% !important;
	float: left;
	min-height: 25px;
	margin: 0 0 10px !important;
	cursor: pointer;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-radio-label {
	font-family: "Roboto", sans-serif !important;
	font-size: 20px !important;
	font-weight: 700 !important;
	line-height: 24px !important;
	color: #000 !important;
	padding-left: 0;
}

/*
 * Het origineel gebruikt een gewoon <input type="radio"> van de browser: een
 * rondje van 10px, met 3px lucht tot de tekst. Forminator tekent er zelf een
 * van 20px met nog eens 10px ernaast. Dat verschil van 17px kostte precies
 * genoeg ruimte om "Geen bijzonderheden" op een telefoon over twee regels te
 * breken, waardoor het formulier — en daarmee de hele pagina eronder —
 * verschoof ten opzichte van het origineel.
 */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-radio-bullet {
	/*
	 * flex-basis moet mee: het rondje staat in een flexregel en Forminator zet
	 * daar 20px op. Alleen width aanpassen levert een ovaal van 20 bij 10 op.
	 */
	flex: 0 0 10px !important;
	width: 10px !important;
	height: 10px !important;
	margin-right: 3px !important;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-radio-bullet::before {
	width: 4px !important;
	height: 4px !important;
}

/* Knoppen: zwart, uppercase, Roboto Condensed — net als .form-main .button. */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next {
	display: inline-block !important;
	float: left;
	width: auto !important;
	min-width: 0;
	height: auto !important;
	margin: 0 15px 0 0 !important;
	padding: 10px 25px !important;
	font-family: "Roboto Condensed", sans-serif !important;
	font-size: 25px !important;
	font-weight: 400 !important;
	line-height: 100% !important;
	letter-spacing: normal !important;
	text-transform: uppercase !important;
	color: #fff !important;
	background: #000 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: all 0.3s ease-out;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button:hover,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit:hover,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back:hover,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next:hover {
	color: #fff !important;
	background: #333 !important;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-pagination-footer {
	display: block !important;
	width: 100% !important;
	float: left;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
}

/* Meldingen. */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-error-message,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-response-message {
	width: 100% !important;
	float: left;
	margin: 5px 0 0 !important;
	padding: 0 !important;
	font-family: "Roboto", sans-serif !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	color: #000 !important;
	background: transparent !important;
	border: 0 !important;
}

.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-response-message.forminator-success {
	margin-bottom: 10px;
}

/*
 * Forminator verbergt de "vorige"-knop op de eerste stap met .forminator-hidden.
 * De knopregels hierboven gebruiken !important, dus die regel moet dat ook.
 */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-hidden,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] [hidden] {
	display: none !important;
}

/*
 * .forminator-pagination-submit is geen knop maar een sjabloon: Forminator zet
 * hem met een inline style="display:none" in de HTML en leest er alleen het
 * label uit om de echte verstuurknop mee te vullen. De knopregels hierboven
 * gebruiken !important en wonnen daardoor van die inline style, waardoor de
 * knop dubbel in beeld stond. Vandaar deze regel.
 */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-pagination-submit {
	display: none !important;
}

/*
 * Het originele formulier heeft geen "vorige stap"-knop: het oude CMS postte
 * elke stap naar de server en gaf geen weg terug. Forminator zet die knop er op
 * stap 2 wel bij, dus verbergen we hem om het origineel te volgen.
 *
 * Wil de klant hem alsnog (handig als iemand zich in het land vergist), dan is
 * dit blok het enige wat weg hoeft.
 */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back {
	display: none !important;
}

/*
 * De knoptekst mag niet afbreken: het origineel houdt "volgende stap" op één
 * regel en een tweeregelige knop maakt het formulier hoger.
 *
 * Er stond hier ook een regel die de letter onder 560px een maat kleiner maakte.
 * Die was nodig toen de laatste stap nog "aanvraag versturen" heette; met de
 * knopteksten van het origineel ("volgende stap" en "versturen") past 25px op
 * een telefoon van 375px, net als op de originele site.
 */
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-submit,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-back,
.form-main .forminator-ui.forminator-custom-form[data-design="default"] .forminator-button-next {
	max-width: 100% !important;
	white-space: nowrap !important;
}