.cfu-form {
	--cfu-gap: 1rem;
	--cfu-radius: 6px;
	--cfu-border-color: #d0d5dd;
	--cfu-focus-color: #2563eb;
	--cfu-error-color: #b42318;
	--cfu-success-color: #027a48;
	--cfu-text-color: #101828;
	--cfu-form-background: transparent;

	display: flex;
	flex-direction: column;
	gap: var(--cfu-gap);
	max-width: 100%;
	color: var(--cfu-text-color);
	background: var(--cfu-form-background);
	box-sizing: border-box;
}

.cfu-form *,
.cfu-form *::before,
.cfu-form *::after {
	box-sizing: inherit;
}

.cfu-field {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.cfu-field label {
	font-weight: 600;
	font-size: 0.9375rem;
}

.cfu-field input[type='text'],
.cfu-field input[type='email'],
.cfu-field input[type='tel'],
.cfu-field textarea,
.cfu-field input[type='file'] {
	width: 100%;
	padding: 0.625rem 0.75rem;
	border: 1px solid var(--cfu-border-color);
	border-radius: var(--cfu-radius);
	font-size: 1rem;
	font-family: inherit;
}

.cfu-field input:focus,
.cfu-field textarea:focus {
	outline: 2px solid var(--cfu-focus-color);
	outline-offset: 1px;
}

.cfu-field__hint {
	margin: 0.35rem 0 0;
	font-size: 0.8125rem;
	opacity: 0.7;
}

.cfu-field--consent label,
.cfu-field--copy label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-weight: 400;
	font-size: 0.875rem;
}

.cfu-required {
	color: var(--cfu-error-color);
}

.cfu-form__honeypot {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cfu-form__submit {
	align-self: flex-start;
	padding: 0.75rem 1.5rem;
	border: none;
	border-radius: var(--cfu-radius);
	background: var(--cfu-focus-color);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.cfu-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.cfu-form__message {
	padding: 0.75rem 1rem;
	border-radius: var(--cfu-radius);
	font-size: 0.9375rem;
}

.cfu-form__message--warning {
	background: #fffaeb;
	color: #b54708;
	border: 1px solid #fedf89;
}

.cfu-form__message--success {
	background: #ecfdf3;
	color: var(--cfu-success-color);
	border: 1px solid #abefc6;
}

.cfu-form__message--error {
	background: #fef3f2;
	color: var(--cfu-error-color);
	border: 1px solid #fecdca;
}

.cfu-field--error input,
.cfu-field--error textarea {
	border-color: var(--cfu-error-color);
}

@media (max-width: 480px) {
	.cfu-form__submit {
		width: 100%;
	}
}