/**
 * Contact Form 7 styles
 *
 * Shared by every CF7 form on the site (see rules.md's Forms mandate) — the
 * form's fields/labels/honeypot are authored in wp-admin under
 * Contact → Contact Forms, using the `class:form-control` / `class:form-select`
 * / `class:btn` tag options so this file only has to style Bootstrap's own
 * classes plus CF7's validation/response markup.
 *
 * 1. Fields
 * 2. Submit button
 * 3. Boxed variant
 * 4. Estimate variant
 * 5. Form panel
 * 6. Validation & response messages
 * 7. Responsive
 */

/* ============================ FIELDS ============================ */
.contact-form .form-control,
.contact-form .form-select {
	border-radius: 2px;
	padding: .75rem 1rem;
}

/* ============================ SUBMIT BUTTON ============================ */
.contact-form__submit {
	background: var(--color-nav-bg);
	color: #fff;
	font-weight: 600;
	padding: .8rem 2.5rem;
	border-radius: var(--radius-btn);
	border: 0;
}
.contact-form__submit:hover {
	color: #fff;
	background: var(--color-accent-red);
}
.contact-form .wpcf7-spinner {
	margin-left: .75rem;
}

/* ============================ BOXED VARIANT ============================ */
/* Shared by every "boxed" CF7 form — Bookings and Contact both use this exact
   field treatment (see rules.md's Shared Section Reuse). */
.contact-form--boxed .form-control,
.contact-form--boxed .form-select {
	border-color: #caced4;
	color: #333f47;
	font-size: 1.125rem;
	padding: 1rem 1.25rem;
}
.contact-form--boxed .form-control::placeholder {
	color: #333f47;
}
.contact-form--boxed textarea.form-control {
	height: 204px;
}
.contact-form__caption {
	color: #828282;
	font-size: 1rem;
	margin: .5rem 0 0;
}
.contact-form__submit--pill {
	background: var(--color-accent-red);
	border-radius: var(--radius-btn);
	font-size: 1.5rem;
	text-transform: uppercase;
	padding: 1rem 2.5rem;
}
.contact-form__submit--pill:hover {
	background: var(--color-nav-bg);
}

/* ============================ ESTIMATE VARIANT ============================ */
/* The homepage "Get A Location-Based Car Repair Estimate" form — Figma nodes
   337:411–429: flat white fields with no border or radius, and a square black
   submit rather than the pill the other forms use. */
.contact-form--estimate .form-control,
.contact-form--estimate .form-select {
	border: 0;
	border-radius: 0;
	background-color: #fff;
	color: var(--heading-color);
	font-size: 1.125rem;
	padding: 16px;
	height: 59px;
}
.contact-form--estimate .form-control::placeholder {
	color: #7b7b7b;
}
.contact-form--estimate textarea.form-control {
	height: 154px;
	resize: vertical;
}
.contact-form--estimate .contact-form__submit {
	border-radius: var(--radius-btn);
	min-width: min(284px, 100%);
	padding: 18px 36px;
	font-size: 1.125rem;
}

/* ============================ FORM PANEL ============================ */
/* Shared boxed-panel wrapper around a CF7 form — Bookings and Contact both
   use this exact box treatment (see rules.md's Shared Section Reuse). */
.contact-form-panel {
	background: #f0f3f5;
	padding: clamp(1.5rem, 4vw, 2.5rem);
}

/* ============================ VALIDATION & RESPONSE ============================ */
.contact-form .wpcf7-not-valid-tip {
	color: var(--color-accent-red);
	font-size: .85rem;
	margin-top: .25rem;
}
.contact-form .wpcf7-response-output {
	border-radius: 4px;
	padding: .75rem 1rem;
	margin-top: 1.5rem;
	font-size: .95rem;
}
.contact-form form.sent .wpcf7-response-output {
	border-color: #198754;
	color: #198754;
}
.contact-form form.failed .wpcf7-response-output,
.contact-form form.aborted .wpcf7-response-output,
.contact-form form.spam .wpcf7-response-output {
	border-color: var(--color-accent-red);
	color: var(--color-accent-red);
}

/* ============================ RESPONSIVE ============================ */

/* --- sm: 576-767 --- */
@media (max-width: 767.98px) {
	.contact-form-panel {
		padding: 1.5rem;
	}
}