/*
 * Ventureheap Builder - lead form.
 */

.vhb-lead-form {
	padding: 28px;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius);
}

.vhb-lead-form--shortcode { padding: 0; border: 0; background: none; }

.vhb-lead-form__title { margin: 0 0 1.2rem; color: var(--vhb-secondary); }

.vhb-form-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

.vhb-field { margin: 0; display: flex; flex-direction: column; gap: .3rem; }
.vhb-field label { font-weight: 600; font-size: .92rem; color: var(--vhb-secondary); }
.vhb-required { color: #dc2626; }

.vhb-form input[type="text"],
.vhb-form input[type="email"],
.vhb-form input[type="tel"],
.vhb-form select,
.vhb-form textarea {
	width: 100%;
	font: inherit;
	color: var(--vhb-text);
	padding: .7rem .9rem;
	background: var(--vhb-bg);
	border: 1px solid var(--vhb-border);
	border-radius: var(--vhb-radius-btn);
	transition: border-color var(--vhb-transition), box-shadow var(--vhb-transition);
}

.vhb-form input:focus, .vhb-form select:focus, .vhb-form textarea:focus {
	outline: none;
	border-color: var(--vhb-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--vhb-primary) 18%, transparent);
}

.vhb-form textarea { resize: vertical; min-height: 120px; }

.vhb-field-error { font-size: .84rem; color: #dc2626; }
.vhb-field.has-error input, .vhb-field.has-error select, .vhb-field.has-error textarea { border-color: #dc2626; }

.vhb-form-actions { margin: 1.2rem 0 0; }
.vhb-form-submit { min-width: 180px; }
.vhb-form-submit[disabled] { opacity: .6; cursor: progress; }

.vhb-form-message:empty { display: none; }
.vhb-form-message p { margin: 0 0 1rem; padding: .8rem 1rem; border-radius: var(--vhb-radius-btn); }
.vhb-form-success { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.vhb-form-error { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* The honeypot must be reachable by bots but invisible and unfocusable for
   people, so it is moved off screen rather than display:none. */
.vhb-hp {
	position: absolute !important;
	left: -9999px !important;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

@media (min-width: 600px) {
	.vhb-form-grid { grid-template-columns: 1fr 1fr; }
	.vhb-field--wide { grid-column: 1 / -1; }
}