.wpcf7 {
	margin: 0;
}

.wpcf7 .wpcf7-form {
	margin: 0;
}

.wpcf7 .wpcf7-form p {
	margin: 0;
}

.wpcf7 .wpcf7-response-output {
	margin: 1rem 0 0;
	padding: .75rem 1rem;
	border: 1px solid var(--border-color);
	border-radius: var(--radius-sm);
	font-size: .9rem;
	background: var(--light-bg);
}

.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ok {
	border-color: var(--state-success);
	background: var(--state-success-bg);
	color: var(--state-success-text);
}

.wpcf7 .wpcf7-response-output.wpcf7-validation-errors,
.wpcf7 .wpcf7-response-output.wpcf7-acceptance-missing,
.wpcf7 .wpcf7-response-output.wpcf7-spam-blocked,
.wpcf7 .wpcf7-response-output.wpcf7-mail-sent-ng {
	border-color: var(--state-error);
	background: var(--state-error-bg);
	color: var(--state-error-text);
}

.wpcf7 .wpcf7-not-valid-tip {
	font-size: .78rem;
	color: var(--state-error);
	margin-top: .2rem;
}

/* `!important` is required and justified here: Contact Form 7 ships its own
   `.wpcf7-not-valid` styling and the field also carries Bootstrap's
   `.form-control`, whose `:focus` box-shadow/border would otherwise mask the
   invalid state while the user is still in the field. Both live in stylesheets
   we do not control, and at least one wins on load order. Scope is a single
   plugin class, and the alternative (an ID- or attribute-weighted selector)
   would be less legible for the same effect. This is a documented exception
   to the project's no-`!important` rule. */
.wpcf7 .wpcf7-not-valid {
	border-color: var(--state-error) !important;
	box-shadow: 0 0 0 .2rem rgba(var(--state-error-rgb), .15) !important;
}

.wpcf7 .wpcf7-spinner {
	display: block;
	margin: 1rem auto 0;
}

.wpcf7 .ajax-loader {
	display: block;
	margin: 1rem auto 0;
}

.wpcf7 form.submitting .wpcf7-response-output {
	opacity: .6;
}

.wpcf7 form.sent .wpcf7-response-output {
	animation: cf7-fade-in .3s ease;
}

@keyframes cf7-fade-in {
	from { opacity: 0; transform: translateY(-4px); }
	to   { opacity: 1; transform: translateY(0); }
}