/* ThriveWorkOS — Contact Form 7 styling.
   CF7 ships no visual design of its own, just predictable class names on
   plain markup; this reuses the same tokens as the newsletter input/button
   (theme.json colors + type) so a CF7 form reads as part of the site. */

.wpcf7-form p {
	margin: 0 0 22px;
}
.wpcf7-form label {
	display: block;
	font-family: var( --wp--preset--font-family--libre-franklin );
	font-weight: 600;
	font-size: 14px;
	color: var( --wp--preset--color--heading );
	margin-bottom: 8px;
}
.wpcf7-form-control-wrap {
	display: block;
	width: 100%;
}

.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email,
.wpcf7-form-control.wpcf7-tel,
.wpcf7-form-control.wpcf7-url,
.wpcf7-form-control.wpcf7-number,
.wpcf7-form-control.wpcf7-date,
.wpcf7-form-control.wpcf7-textarea,
.wpcf7-form-control.wpcf7-select {
	box-sizing: border-box;
	width: 100%;
	background: var( --wp--preset--color--card );
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 6px;
	padding: 13px 15px;
	font-family: var( --wp--preset--font-family--libre-franklin );
	font-size: 15.5px;
	color: var( --wp--preset--color--body-text );
	transition: border-color 0.15s ease;
}
.wpcf7-form-control.wpcf7-textarea {
	min-height: 140px;
	resize: vertical;
}
.wpcf7-form-control.wpcf7-text:focus,
.wpcf7-form-control.wpcf7-email:focus,
.wpcf7-form-control.wpcf7-tel:focus,
.wpcf7-form-control.wpcf7-url:focus,
.wpcf7-form-control.wpcf7-number:focus,
.wpcf7-form-control.wpcf7-date:focus,
.wpcf7-form-control.wpcf7-textarea:focus,
.wpcf7-form-control.wpcf7-select:focus {
	outline: none;
	border-color: var( --wp--preset--color--brass );
}

.wpcf7-form-control.wpcf7-submit {
	background: var( --wp--preset--color--brass );
	color: var( --wp--preset--color--cta-on-brass );
	border: none;
	border-radius: 6px;
	padding: 14px 26px;
	font-family: var( --wp--preset--font-family--libre-franklin );
	font-weight: 600;
	font-size: var( --wp--preset--font-size--body-sm );
	cursor: pointer;
	transition: background-color 0.15s ease;
}
.wpcf7-form-control.wpcf7-submit:hover {
	background: var( --wp--preset--color--brass-hover );
}
.wpcf7-form-control.wpcf7-submit:disabled {
	opacity: 0.6;
	cursor: default;
}

.wpcf7-spinner {
	margin: 0 0 0 8px;
	vertical-align: middle;
}

.wpcf7-not-valid-tip {
	display: block;
	margin-top: 6px;
	font-family: var( --wp--preset--font-family--libre-franklin );
	font-size: 13px;
	color: #b3441f;
}
.wpcf7-form-control.wpcf7-not-valid {
	border-color: #b3441f;
}

.wpcf7-response-output {
	margin: 24px 0 0;
	padding: 13px 16px;
	border: 1px solid var( --wp--preset--color--border-alt );
	border-radius: 6px;
	font-family: var( --wp--preset--font-family--libre-franklin );
	font-size: 14.5px;
	color: var( --wp--preset--color--body-text );
}
/*
 * CF7's own stylesheet (includes/css/styles.css) styles these same states
 * with a selector one element more specific than a plain class match
 * (".wpcf7 form.sent ..." beats ".wpcf7-form.sent ..."), so it wins the
 * cascade even though ours loads after it. !important is the reliable fix.
 */
.wpcf7-form.sent .wpcf7-response-output {
	border-color: var( --wp--preset--color--brass ) !important;
	color: var( --wp--preset--color--heading );
}
.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.payment-required .wpcf7-response-output {
	border-color: #b3441f !important;
	color: #b3441f;
}

.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}