/*
 * Userforms overrides for the Vandenberg theme.
 *
 * The legacy SS3 ContactForm.ss / OfferteForm.ss arranged fields with
 * `.contact-top` (3 cols) and `.offerte-row` (2 cols). UserForms emits a flat
 * `.userformsstep` containing every field, so we lay them out with CSS Grid.
 *
 * Field IDs (e.g. #Bericht, #Aanhef) come from the EditableFormField.Name
 * column, set by SeedFormFieldsTask.
 */

/* === Honeypot must always be hidden, even from screen readers === */
.honeypot-field,
.userform input[name="Website"] {
	position: absolute !important;
	left: -10000px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
	opacity: 0 !important;
}

.userform {
	text-align: left;
}

.userform .userform-fields {
	max-width: 800px;
	margin: 0 auto;
}

.userform .userformsstep {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px 25px;
	border: none;
	padding: 0;
	margin: 0;
}

.userform .userformsstep > .field {
	margin: 0;
}

/* Full-width fields */
.userform #Aanhef,
.userform #Bericht,
.userform #Onderwerp {
	grid-column: 1 / -1;
}

/* Contact form (no Aanhef field) gets a 3-up row for Naam/Email/Tel */
.userform:not(:has(#Aanhef)) .userformsstep {
	grid-template-columns: 1fr 1fr 1fr;
}
.userform:not(:has(#Aanhef)) #Bericht {
	grid-column: 1 / -1;
}

/* Labels (default light page) */
.userform label.left,
.userform legend.left {
	display: block;
	font-size: 14px;
	font-weight: 700;
	margin-bottom: 6px;
	color: #333;
}

/* Inputs (default light page) */
.userform input[type="text"],
.userform input[type="email"],
.userform input[type="tel"],
.userform input[type="number"],
.userform textarea,
.userform select {
	width: 100%;
	background-color: #FBFAF8;
	padding: 12px;
	font-size: 16px;
	border: 1px solid #ECECEC;
	color: #555;
	font-family: inherit;
	box-sizing: border-box;
}

.userform textarea {
	resize: vertical;
	min-height: 175px;
}

/* Native select fallback (when jQuery customSelect doesn't run) */
.userform select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("../images/dropdown_arrow.png");
	background-repeat: no-repeat;
	background-position: right 12px center;
	padding-right: 36px;
}

/* customSelect wrapper output */
.userform span.customSelect {
	background: #FBFAF8 url("../images/dropdown_arrow.png") right 12px center no-repeat;
	border: 1px solid #ECECEC;
	color: #555;
	padding: 12px;
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	display: inline-block;
}

/* Aanhef radio row */
.userform .userformsoptionset {
	border: none;
	padding: 0;
	margin: 0;
}
.userform .userformsoptionset .middleColumn > div {
	display: inline-block;
	margin-right: 18px;
}
.userform .userformsoptionset input[type="radio"] {
	margin-right: 6px;
}

/* Required-field marker */
.userform .requiredField label.left::after {
	content: " *";
	color: #c00;
}

/* === Contact-section variant: the `#contact` section has a dark textured
   background (footer_lodyas.png). Force text inside it to light so the
   contact-info block, WYSIWYG content, and form labels all stay readable. === */

#contact,
#contact p,
#contact .section-body,
#contact .contact-info,
#contact .contact-info strong,
#contact a {
	color: #f1f1f1;
}
#contact a:hover {
	color: #FEB04D;
}


#contact .userform input[type="text"],
#contact .userform input[type="email"],
#contact .userform input[type="tel"],
#contact .userform input[type="number"],
#contact .userform textarea {
	background-color: rgba(37, 37, 37, 0.90);
	color: #f1f1f1;
	border-color: transparent;
}
#contact .userform input[type="text"]::placeholder,
#contact .userform input[type="email"]::placeholder,
#contact .userform input[type="tel"]::placeholder,
#contact .userform textarea::placeholder {
	color: rgba(241, 241, 241, 0.55);
	font-style: italic;
}
#contact .userform label.left,
#contact .userform legend.left {
	color: #f1f1f1;
}
#contact .userform select,
#contact .userform span.customSelect {
	background-color: rgba(37, 37, 37, 0.90);
	color: #f1f1f1;
	border-color: transparent;
}

/* Action button row — full width below the grid */
.userform .Actions,
.userform .btn-toolbar,
.userform .step-navigation {
	grid-column: 1 / -1;
	margin-top: 20px;
	text-align: right;
}

.userform .Actions input[type="submit"],
.userform .btn-toolbar input[type="submit"],
.userform .step-navigation button {
	background-color: #FEB04D;
	color: #fff;
	border: 1px solid transparent;
	padding: 12px 30px;
	font-size: 16px;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 6px;
	cursor: pointer;
}
.userform .Actions input[type="submit"]:hover,
.userform .btn-toolbar input[type="submit"]:hover {
	background-color: #fff;
	color: #FEB04D;
	border-color: #FEB04D;
}

/* Hide the progress bar and step nav when there is only one step */
.userform .progress,
.userform .step-button-wrapper,
.userform .step-navigation .step-buttons {
	display: none;
}

/* Error messages */
.userform .message {
	grid-column: 1 / -1;
	padding: 12px;
	margin-bottom: 18px;
	border-radius: 4px;
}
.userform .message.good {
	background-color: #d4edda;
	color: #155724;
}
.userform .message.bad,
.userform .message.required,
.userform .message.error {
	background-color: #f8d7da;
	color: #721c24;
}
.userform .field.error input,
.userform .field.error textarea,
.userform .field.error select {
	border-color: #c00;
}

/* Mobile */
@media (max-width: 720px) {
	.userform .userformsstep,
	.userform:not(:has(#Aanhef)) .userformsstep {
		grid-template-columns: 1fr;
	}
}