/* Contact form chrome.

   The page CSS already styles every .wpcf7-* control the forms use. What was
   missing is here: the rules the plugin's own stylesheet supplied (validation
   tips, the response notice) and the .active state that shows the services
   popup, which had a display:none rule and nothing to undo it. */

/* ---- services popup ------------------------------------------------- */

.popup-overlay.active {
	display: flex;
}

.popup-content {
	max-height: 90vh;
	overflow-y: auto;
}

/* ---- form spacing ---------------------------------------------------- */

/* .wpcf7-form textarea carries a -50px bottom margin so the submit button can
   ride up under it; this restores clearance for the button that follows. The
   .desktop-form / .popup-form textarea rules replace that negative margin with
   a positive one, so inside those the spacer has nothing to make up for. */
.form-submit-spacer {
	height: 62px;
}

.desktop-form .form-submit-spacer,
.popup-form .form-submit-spacer {
	height: 0;
}

/* Each control sits on its own line under its label. The theme's rules only
   achieved that by accident of width (a 512px field could not share a line in
   a 520px popup); in a wide container the field rode up next to the label. */
.wpcf7-form .form-label .wpcf7-form-control-wrap {
	display: block;
}

/* Checkbox captions wrap onto two lines in the narrow columns, and the theme
   sets line-height in px on the label. Keep the box beside its caption. */
.wpcf7-list-item {
	margin: 0;
}

.wpcf7-list-item label {
	display: flex;
	align-items: flex-start;
}

/* The theme pulls the box 80% of its width to the left, which only lands right
   inside the 19% indent .desktop-form used to have. Let it sit in the flow. */
.wpcf7-form .wpcf7-list-item input[type="checkbox"] {
	flex: 0 0 auto;
	transform: none;
	margin-right: 8px;
}

.wpcf7-list-item-label {
	line-height: 1.4;
}

/* ---- validation ------------------------------------------------------ */

.wpcf7-not-valid-tip {
	display: block;
	color: #f44336;
	font-family: 'Inter', sans-serif;
	font-size: 13px;
	line-height: 1.3;
	margin-top: -8px;
	margin-bottom: 10px;
}

.wpcf7-form input.wpcf7-not-valid,
.wpcf7-form textarea.wpcf7-not-valid {
	border-color: #f44336;
}

/* ---- response notice ------------------------------------------------- */

.wpcf7-response-output {
	display: none;
	margin-top: 18px;
	padding: 12px 16px;
	border: 1px solid #ccc;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: #344054;
}

.wpcf7-form.sent .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
	display: block;
}

.wpcf7-form.sent .wpcf7-response-output {
	border-color: #0ebcf6;
	background: #f2fbfe;
}

.wpcf7-form.invalid .wpcf7-response-output {
	border-color: #f44336;
	background: #fdf3f2;
}

/* ---- small screens --------------------------------------------------- */

@media (max-width: 767px) {
	/* the theme fixes fields at 512px, wider than a phone */
	.desktop-form form.wpcf7-form input,
	.desktop-form form.wpcf7-form textarea,
	.popup-form form.wpcf7-form input,
	.popup-form form.wpcf7-form textarea {
		width: 100%;
		max-width: 100%;
	}

	.desktop-form form.wpcf7-form input[type="checkbox"],
	.popup-form form.wpcf7-form input[type="checkbox"] {
		width: 20px;
	}

	.services-options .wpcf7-form-control,
	.services-checkboxes .wpcf7-form-control {
		grid-template-columns: 1fr;
	}

	.services-options .wpcf7-list-item {
		margin-right: 0;
	}
}

/* The theme sized text and email fields but not tel, which then fell back to
   the full-width rule and sat wider than the fields above it. */
.desktop-form form.wpcf7-form input[type="tel"],
.popup-form form.wpcf7-form input[type="tel"] {
	width: 512px;
	max-width: 100%;
	height: auto;
	padding: 12px 14px;
	font-size: 16px;
	font-family: inter;
	border: 1px solid #D0D5DD;
	border-radius: 8px;
	margin-top: 6px;
	margin-bottom: -20px;
	box-sizing: border-box;
}