/**
 * Contact Form 7 — vehicle contact form styling.
 *
 * Scoped to a `.ciscar-contact-form` wrapper placed inside the CF7 form, so it
 * never touches other CF7 forms on the site. Mobile-first, themable via custom
 * properties. The `:has()` rules style form-level elements (response output,
 * spinner) only on forms that contain our wrapper.
 *
 * @since 1.1.0
 */

.ciscar-contact-form {
	--ccf-accent: #4da6fd;
	--ccf-accent-hover: #2e8de0;
	--ccf-text: #1a1a1a;
	--ccf-muted: #6b6b6b;
	--ccf-border: #d9d9d9;
	--ccf-bg: #ffffff;
	--ccf-field-bg: #fbfbfc;
	--ccf-radius: 10px;

	max-width: 540px;
	margin: 0 auto;
	padding: 1.75rem;
	background: var(--ccf-bg);
	border: 1px solid #ececec;
	border-radius: var(--ccf-radius);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	color: var(--ccf-text);
	font-family: inherit;
	box-sizing: border-box;
}

.ciscar-contact-form * {
	box-sizing: border-box;
}

/* Optional intro heading the user can add inside the wrapper. */
.ciscar-contact-form__title {
	margin: 0 0 1.25rem;
	font-size: 1.35rem;
	font-weight: 700;
	line-height: 1.2;
}

/* CF7 wraps each field in a <p>. */
.ciscar-contact-form p {
	margin: 0 0 0rem;
}

.ciscar-contact-form label {
	display: block;
	margin-bottom: 0.4rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ccf-text);
}

/* Inputs (excluding hidden + submit, handled below). */
.ciscar-contact-form input[type="text"],
.ciscar-contact-form input[type="email"],
.ciscar-contact-form input[type="tel"],
.ciscar-contact-form input[type="url"],
.ciscar-contact-form input[type="number"],
.ciscar-contact-form select,
.ciscar-contact-form textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	font-size: 1rem;
	font-family: inherit;
	color: var(--ccf-text);
	background: var(--ccf-field-bg);
	border: 1px solid var(--ccf-border);
	border-radius: 8px;
	transition:
		border-color 150ms ease,
		box-shadow 150ms ease,
		background 150ms ease;
}

.ciscar-contact-form textarea {
	min-height: 130px;
	resize: vertical;
}

.ciscar-contact-form input::placeholder,
.ciscar-contact-form textarea::placeholder {
	color: #aeb2b7;
}

.ciscar-contact-form input[type="text"]:focus,
.ciscar-contact-form input[type="email"]:focus,
.ciscar-contact-form input[type="tel"]:focus,
.ciscar-contact-form input[type="url"]:focus,
.ciscar-contact-form input[type="number"]:focus,
.ciscar-contact-form select:focus,
.ciscar-contact-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--ccf-accent);
	box-shadow: 0 0 0 3px rgba(77, 166, 253, 0.18);
}

/* Submit button. */
.ciscar-contact-form input[type="submit"],
.ciscar-contact-form button[type="submit"] {
	display: inline-block;
	width: 100%;
	margin-top: 0.25rem;
	padding: 0.85rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	font-family: inherit;
	color: #fff;
	background: var(--ccf-accent);
	border: none;
	border-radius: 8px;
	cursor: pointer;
	transition:
		background 150ms ease,
		transform 150ms ease;
}

.ciscar-contact-form input[type="submit"]:hover,
.ciscar-contact-form button[type="submit"]:hover {
	background: var(--ccf-accent-hover);
}

.ciscar-contact-form input[type="submit"]:active,
.ciscar-contact-form button[type="submit"]:active {
	transform: translateY(1px);
}

@media (min-width: 600px) {
	.ciscar-contact-form input[type="submit"],
	.ciscar-contact-form button[type="submit"] {
		width: auto;
	}
}

/* CF7 inline validation tips. */
.ciscar-contact-form .wpcf7-not-valid-tip {
	margin-top: 0.3rem;
	font-size: 0.8rem;
	color: #d63638;
}

.ciscar-contact-form input.wpcf7-not-valid,
.ciscar-contact-form textarea.wpcf7-not-valid {
	border-color: #d63638;
	box-shadow: 0 0 0 3px rgba(214, 54, 56, 0.12);
}

/* Spinner inline with the button. */
.ciscar-contact-form .wpcf7-spinner {
	margin: 0 0 0 0.6rem;
}

/* Response message — styled at the form level (works whether CF7 prints the
   output inside or just after our wrapper). */
.ciscar-contact-form .wpcf7-response-output,
.wpcf7-form:has(.ciscar-contact-form) .wpcf7-response-output {
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem;
	border-radius: 8px;
	font-size: 0.9rem;
	border-width: 1px;
	border-style: solid;
}

.wpcf7-form.sent:has(.ciscar-contact-form) .wpcf7-response-output {
	border-color: #46b450;
	background: #edfaef;
	color: #1e7e34;
}

.wpcf7-form.invalid:has(.ciscar-contact-form) .wpcf7-response-output,
.wpcf7-form.failed:has(.ciscar-contact-form) .wpcf7-response-output {
	border-color: #d63638;
	background: #fcf0f1;
	color: #b32d2e;
}