/*
 * Huisstijl voor het Gravity Forms-offerteformulier.
 *
 * Handgeschreven, los van de Tailwind-build: dit bestand vereist geen `npm run
 * build`. Alles is gescoped onder .vm-offerte-form (de wrapper in
 * template-parts/cta-offerte.php), zodat andere formulieren onaangeroerd blijven.
 */

.vm-offerte-form {
	--vm-anthracite: #2a2b2d;
	--vm-stone-300: #c7c0b2;
	--vm-stone-400: #aca496;
	--vm-porcelain: #efebe2;
	--vm-porcelain-50: #f6f3ec;
	--vm-deep-copper: #9a5f38;
	--vm-deep-copper-hover: #884f2d;
}

/* Gravity Forms' eigen thema-variabelen overschrijven waar dat kan. */
.vm-offerte-form .gform_wrapper.gravity-theme {
	--gf-color-primary: var(--vm-deep-copper);
	--gf-color-primary-rgb: 154, 95, 56;
	--gf-color-primary-contrast: var(--vm-porcelain);
	--gf-ctrl-border-color: var(--vm-stone-300);
	--gf-ctrl-radius: 0.5rem;
	--gf-local-radius: 0.5rem;
}

.vm-offerte-form .gform_wrapper {
	margin: 0;
	font-size: 15px;
}

/* Rijen en afstand. */
.vm-offerte-form .gform_fields {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	grid-gap: 1rem;
}

.vm-offerte-form .gfield {
	margin: 0 !important;
}

/* Labels. */
.vm-offerte-form .gfield_label {
	display: block;
	margin: 0 0 0.375rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--vm-anthracite);
	line-height: 1.3;
}

.vm-offerte-form .gfield_required {
	color: var(--vm-deep-copper);
	margin-left: 0.15rem;
}

/* Invoervelden. */
.vm-offerte-form input[type="text"],
.vm-offerte-form input[type="email"],
.vm-offerte-form input[type="tel"],
.vm-offerte-form input[type="number"],
.vm-offerte-form select,
.vm-offerte-form textarea {
	width: 100%;
	box-sizing: border-box;
	height: 2.75rem;
	padding: 0 0.875rem;
	border: 1px solid var(--vm-stone-300);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--vm-anthracite);
	font-size: 15px;
	line-height: 1.4;
	transition: border-color 0.15s ease;
	-webkit-appearance: none;
	appearance: none;
}

.vm-offerte-form textarea {
	height: auto;
	min-height: 7rem;
	padding: 0.625rem 0.875rem;
	resize: vertical;
}

.vm-offerte-form input::placeholder,
.vm-offerte-form textarea::placeholder {
	color: var(--vm-stone-400);
}

.vm-offerte-form input:focus,
.vm-offerte-form select:focus,
.vm-offerte-form textarea:focus {
	outline: none;
	border-color: var(--vm-deep-copper);
}

/* Naam- en e-mail/telefoon naast elkaar op ruimere schermen. */
@media (min-width: 640px) {
	.vm-offerte-form .gform_fields {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}
	.vm-offerte-form .gfield--width-full,
	.vm-offerte-form .gfield.gf_full,
	.vm-offerte-form .gfield[data-vm-span="2"] {
		grid-column: 1 / -1;
	}
}

/* Beschrijvingstekst onder een veld. */
.vm-offerte-form .gfield_description {
	margin-top: 0.375rem;
	font-size: 0.78rem;
	color: var(--vm-stone-400);
}

/* Verzendknop. */
.vm-offerte-form .gform_footer {
	margin: 0.5rem 0 0;
	padding: 0;
}

.vm-offerte-form .gform_footer input[type="submit"],
.vm-offerte-form .gform_footer button,
.vm-offerte-form .gform_page_footer input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 46px;
	padding: 0 1.5rem;
	border: 0;
	border-radius: 0.5rem;
	background: var(--vm-deep-copper);
	color: var(--vm-porcelain);
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.vm-offerte-form .gform_footer input[type="submit"]:hover,
.vm-offerte-form .gform_footer button:hover {
	background: var(--vm-deep-copper-hover);
}

.vm-offerte-form .gform_footer input[type="submit"]:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

/* Validatie. */
.vm-offerte-form .gfield_error input,
.vm-offerte-form .gfield_error select,
.vm-offerte-form .gfield_error textarea {
	border-color: var(--vm-deep-copper);
}

.vm-offerte-form .gfield_validation_message,
.vm-offerte-form .validation_message {
	margin-top: 0.375rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--vm-deep-copper);
	font-size: 0.78rem;
	font-weight: 600;
}

.vm-offerte-form .gform_validation_errors {
	margin: 0 0 1rem;
	padding: 0.625rem 0.875rem;
	background: var(--vm-porcelain);
	border: 0;
	border-radius: 0.5rem;
	box-shadow: none;
}

.vm-offerte-form .gform_validation_errors h2,
.vm-offerte-form .gform_validation_errors .gform_submission_error {
	margin: 0;
	color: var(--vm-deep-copper);
	font-size: 0.85rem;
	font-weight: 600;
}

/* Bevestiging na verzenden. */
.vm-offerte-form .gform_confirmation_message {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 0;
	color: var(--vm-anthracite);
	font-size: 15px;
	line-height: 1.6;
}

/* Verborgen velden nemen geen ruimte in binnen de grid. */
.vm-offerte-form .gform_hidden,
.vm-offerte-form .gfield_visibility_hidden {
	display: none !important;
}