/**
 * NH Makelaar — Forms
 */
.nh-form {
	display: flex;
	flex-direction: column;
	gap: var(--nh-space-4);
}

.nh-form-group {
	display: flex;
	flex-direction: column;
	gap: var(--nh-space-2);
}

.nh-form-group label {
	font-weight: var(--nh-font-weight-semibold);
	font-size: var(--nh-font-size-sm);
	color: var(--nh-color-text);
}

.nh-form-group input,
.nh-form-group textarea,
.nh-form-group select {
	padding: var(--nh-space-3);
	font-family: var(--nh-font-body);
	font-size: var(--nh-font-size-base);
	color: var(--nh-color-text);
	background-color: var(--nh-color-background);
	border: 1px solid var(--nh-color-border);
	border-radius: var(--nh-radius-sm);
	transition: border-color var(--nh-transition-fast),
				box-shadow var(--nh-transition-fast);
}

.nh-form-group input:focus,
.nh-form-group textarea:focus,
.nh-form-group select:focus {
	border-color: var(--nh-color-primary);
	box-shadow: 0 0 0 3px rgba(232, 108, 58, 0.15);
	outline: none;
}

.nh-form-group input:invalid:not(:placeholder-shown),
.nh-form-group textarea:invalid:not(:placeholder-shown) {
	border-color: var(--nh-color-error);
}

.nh-form-group .nh-error-message {
	font-size: var(--nh-font-size-sm);
	color: var(--nh-color-error);
}