/* Contact Form Widget – uses CSS vars from widget settings */
.hello-biz-contact-form-wrapper {
	--cf-form-bg: #000000;
	--cf-form-padding: 30px;
	--cf-form-radius: 12px;
	--cf-field-spacing: 20px;
	--cf-label-color: #ffffff;
	--cf-label-size: 16px;
	--cf-required-color: #ff6b6b;
	--cf-input-bg: #ffffff;
	--cf-input-color: #000000;
	--cf-input-border: #e0e0e0;
	--cf-input-radius: 8px;
	--cf-input-padding: 12px 16px;
	--cf-input-size: 16px;
	--cf-btn-bg: #ffffff;
	--cf-btn-color: #000000;
	--cf-btn-radius: 8px;
	--cf-btn-padding: 14px 28px;
	--cf-btn-size: 16px;
	--cf-thankyou-color: #ffffff;
	--cf-thankyou-size: 18px;
	max-width: 100%;
}

.hello-biz-contact-form-inner {
	background: var(--cf-form-bg);
	padding: var(--cf-form-padding);
	border-radius: var(--cf-form-radius);
}

.hello-biz-contact-form-wrapper .hello-biz-contact-form {
	display: flex;
	flex-direction: column;
	gap: var(--cf-field-spacing);
}

.hello-biz-cf-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hello-biz-cf-label {
	color: var(--cf-label-color);
	font-size: var(--cf-label-size);
	font-weight: 500;
	line-height: 1.3;
}

.hello-biz-cf-required {
	color: var(--cf-required-color);
}

.hello-biz-cf-input {
	width: 100%;
	background: var(--cf-input-bg);
	color: var(--cf-input-color);
	border: 1px solid var(--cf-input-border);
	border-radius: var(--cf-input-radius);
	padding: var(--cf-input-padding);
	font-size: var(--cf-input-size);
	box-sizing: border-box;
	transition: border-color 0.2s;
}

.hello-biz-cf-input::placeholder {
	color: rgba(0, 0, 0, 0.4);
}

.hello-biz-cf-input:focus {
	outline: none;
	border-color: var(--cf-input-color);
}

.hello-biz-cf-input.is-invalid {
	border-color: var(--cf-required-color);
}

.hello-biz-cf-submit-wrap {
	margin-top: 0.25rem;
}

.hello-biz-cf-submit {
	background: var(--cf-btn-bg);
	color: var(--cf-btn-color);
	border: none;
	border-radius: var(--cf-btn-radius);
	padding: var(--cf-btn-padding);
	font-size: var(--cf-btn-size);
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s;
}

.hello-biz-cf-submit:hover:not(:disabled) {
	opacity: 0.9;
}

.hello-biz-cf-submit:disabled {
	opacity: 0.7;
	cursor: not-allowed;
}

.hello-biz-cf-thankyou {
	color: var(--cf-thankyou-color);
	font-size: var(--cf-thankyou-size);
	line-height: 1.5;
	padding: var(--cf-form-padding);
	background: var(--cf-form-bg);
	border-radius: var(--cf-form-radius);
}

.hello-biz-contact-form-wrapper.hello-biz-cf-submitted .hello-biz-contact-form {
	display: none;
}

.hello-biz-contact-form-wrapper.hello-biz-cf-submitted .hello-biz-cf-thankyou {
	display: block !important;
}