/* ─────────────────────────────────────────────────────────────────────────
 * clever-prep-forms.css — SHARED on-site form base (Task 7)
 *
 * Purpose: harmonise the visual defaults of every on-site form's controls
 * (inputs / textarea / select / labels / focus ring) and standardise the
 * Brevo submit feedback states, so the five forms stop diverging.
 *
 * SCOPE: additive, LOW-specificity (single class wrapper + element). Loaded
 * BEFORE the per-page form CSS in functions.php, so any per-page rule that
 * intentionally diverges (heights, layout, the footer pill chrome, the
 * free-consult custom select) still wins. This file fills gaps only.
 *
 * Wrappers covered:
 *   .cp-contact-form      (contact page)
 *   .cp-footer-subscribe  (footer subscribe — chrome stays page-owned)
 *   .cp-mcatp-sheet__form  (MCAT waitlist sheet)
 *   .cp-eyeq-modal__form   (EyeQ modal)
 *   .cp-fc-form            (free consult)
 *
 * Feedback hooks come from clever-prep-brevo/assets/capture.js, which:
 *   - sets [data-brevo-state="sending|success|error"] on the <form>
 *   - on success REPLACES the form with a sibling <div class="cpbrevo-success">
 *   - on error appends/updates <p class="cpbrevo-error" role="alert"> in the form
 * (It does NOT use .is-success / .is-error — those are not applied by capture.js.)
 * ─────────────────────────────────────────────────────────────────────── */

/* ── Controls: text/email/tel/url/textarea/select base ──────────────────── */
.cp-contact-form input[type="text"],
.cp-contact-form input[type="email"],
.cp-contact-form input[type="tel"],
.cp-contact-form input[type="url"],
.cp-contact-form textarea,
.cp-contact-form select,
.cp-mcatp-sheet__form input[type="text"],
.cp-mcatp-sheet__form input[type="email"],
.cp-mcatp-sheet__form input[type="tel"],
.cp-mcatp-sheet__form input[type="url"],
.cp-mcatp-sheet__form textarea,
.cp-mcatp-sheet__form select,
.cp-eyeq-modal__form input[type="text"],
.cp-eyeq-modal__form input[type="email"],
.cp-eyeq-modal__form input[type="tel"],
.cp-eyeq-modal__form input[type="url"],
.cp-eyeq-modal__form textarea,
.cp-eyeq-modal__form select,
.cp-fc-form input[type="text"],
.cp-fc-form input[type="email"],
.cp-fc-form input[type="tel"],
.cp-fc-form input[type="url"],
.cp-fc-form textarea,
.cp-fc-form select {
	font-family: var(--cp-font-body);
	font-size: 15px;
	color: var(--color-dark-100);
	background: #fff;
	border: 1px solid var(--cp-border-input);
	border-radius: var(--cp-radius-lg);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ── Placeholder colour ─────────────────────────────────────────────────── */
.cp-contact-form input::placeholder,
.cp-contact-form textarea::placeholder,
.cp-mcatp-sheet__form input::placeholder,
.cp-mcatp-sheet__form textarea::placeholder,
.cp-eyeq-modal__form input::placeholder,
.cp-eyeq-modal__form textarea::placeholder,
.cp-fc-form input::placeholder,
.cp-fc-form textarea::placeholder,
.cp-footer-subscribe__input::placeholder {
	color: var(--cp-input-placeholder);
}

/* ── Consistent brand focus ring ────────────────────────────────────────── */
.cp-contact-form input:focus,
.cp-contact-form textarea:focus,
.cp-contact-form select:focus,
.cp-mcatp-sheet__form input:focus,
.cp-mcatp-sheet__form textarea:focus,
.cp-mcatp-sheet__form select:focus,
.cp-eyeq-modal__form input:focus,
.cp-eyeq-modal__form textarea:focus,
.cp-eyeq-modal__form select:focus,
.cp-fc-form input:focus,
.cp-fc-form textarea:focus,
.cp-fc-form select:focus {
	outline: none;
	border-color: var(--cp-orange);
	box-shadow: 0 0 0 3px rgba(237, 134, 60, 0.25);
}

/* ── Labels ─────────────────────────────────────────────────────────────── */
.cp-contact-form label,
.cp-mcatp-sheet__form label,
.cp-eyeq-modal__form label,
.cp-fc-form label {
	font-family: var(--cp-font-body);
	color: var(--color-dark-64);
}

/* ── Submit feedback states (Brevo capture.js) ──────────────────────────── */
/* Replaced-form success node — rendered as a sibling where the form was. */
.cpbrevo-success {
	font-family: var(--cp-font-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-dark-100);
	padding: 14px 16px;
	border: 1px solid rgba(237, 134, 60, 0.25);
	border-radius: var(--cp-radius-lg);
	background: rgba(237, 134, 60, 0.08);
}

/* Inline error message appended into the form on a failed submit. */
.cpbrevo-error {
	font-family: var(--cp-font-body);
	font-size: 13px;
	line-height: 1.45;
	color: var(--cp-pill-red);
	margin-top: 6px;
}

/* Error state: tint control borders while the form carries the error state. */
[data-brevo-state="error"] input:not(:focus),
[data-brevo-state="error"] textarea:not(:focus),
[data-brevo-state="error"] select:not(:focus) {
	border-color: var(--cp-pill-red);
}

/* Sending state: dim controls + show wait cursor while the request is in flight. */
[data-brevo-state="sending"] {
	opacity: 0.7;
	cursor: progress;
}