/* Verni Contact Form — styled to match the existing Forminator layout */
.vcf-form {
	font-family: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	max-width: 640px;
	color: #333;
}
.vcf-row {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-bottom: 20px;
}
.vcf-col { flex: 1 1 calc(50% - 12px); min-width: 220px; }
.vcf-col-full { flex: 1 1 100%; }

.vcf-label {
	display: block;
	font-weight: 700;
	color: #333;
	font-size: 14px;
	margin-bottom: 8px;
}
.vcf-label span { color: #e02b2b; }

.vcf-input {
	width: 100%;
	background: #fff;
	border: 1px solid #d1d1d1;
	border-radius: 8px;
	padding: 12px 16px;
	font-size: 16px;
	color: #555;
	box-sizing: border-box;
	font-family: inherit;
}
.vcf-input::placeholder { color: #bbb; }
.vcf-input:focus { outline: 2px solid #254DEB; outline-offset: 1px; border-color: #254DEB; }

.vcf-select {
	appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	padding-right: 42px;
}
.vcf-textarea { resize: vertical; min-height: 120px; }

/* intl-tel-input sits inside .vcf-input's box */
.iti { width: 100%; }
.iti input.vcf-input { padding-left: 52px; }

.vcf-radio-group { display: flex; gap: 24px; align-items: center; }
.vcf-radio { font-size: 15px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }

/* Conditional province: hidden until South Africa is chosen */
.vcf-province-wrap { display: none; }
.vcf-province-wrap.vcf-visible { display: block; }

/* Honeypot */
.vcf-hp { position: absolute; left: -9999px; top: -9999px; height: 0; overflow: hidden; }

.vcf-submit-wrap { text-align: right; margin-top: 8px; }
.vcf-submit {
	background: #ffd520;
	color: #000;
	font-weight: 800;
	text-transform: uppercase;
	border: none;
	border-radius: 4px;
	padding: 14px 30px;
	font-size: 14px;
	cursor: pointer;
	transition: background 0.3s ease;
}
.vcf-submit:hover { background: #e6c200; }
.vcf-submit:disabled { opacity: 0.6; cursor: not-allowed; }

.vcf-messages { margin: 12px 0; font-size: 15px; }
.vcf-messages.vcf-error { color: #c0392b; }
.vcf-messages.vcf-ok { color: #2e7d32; }

.vcf-input.vcf-field-error { border-color: #c0392b; }
.vcf-field-msg { color: #c0392b; font-size: 13px; margin-top: 4px; }

/* intl-tel-input validation error state */
.iti input.vcf-field-error { border-color: #c0392b; }

/* ============================================================
   Form isolation. Kept deliberately minimal: only rules that
   touch elements INSIDE .vcf-scope, nothing that creates a new
   containing block or stacking context on the wrapper itself
   (those can disturb Divi's absolutely-positioned menu markup).
   ============================================================ */
.vcf-scope {
	position: relative;
	max-width: 100%;
	box-sizing: border-box;
}
.vcf-scope .vcf-form,
.vcf-scope .vcf-form * { box-sizing: border-box; }

/* intl-tel-input: keep its dropdown tidy inside the form */
.vcf-scope .iti { position: relative; display: block; }
.vcf-scope .iti__country-list {
	z-index: 1000;
	max-width: 100%;
	box-sizing: border-box;
}
.vcf-scope .iti--separate-dial-code .iti__selected-dial-code { font-size: 15px; }

/* List reset scoped tightly to the form only (NOT any ul/li in the scope,
   so it can never reach a theme menu that shares an ancestor). */
.vcf-scope .vcf-form ul,
.vcf-scope .vcf-form li { list-style: none; margin: 0; padding: 0; }

/* Mobile: single column inside the form only. */
@media (max-width: 782px) {
	.vcf-scope .vcf-row { flex-direction: column; gap: 16px; }
	.vcf-scope .vcf-col { flex: 1 1 100%; min-width: 0; }
	.vcf-scope .vcf-submit-wrap { text-align: left; }
	.vcf-scope .vcf-submit { width: 100%; }
}