/**
 * Contact page (slug: contact) — form spacing corrections over webflow.css.
 * Anastasiia row19: the form is taller than Figma (target ~720px). The field
 * labels (.cv2s-flabel) carry an 8px bottom gap and the gap above the submit is
 * larger than Figma — tighten both to bring the form to the Figma height.
 * Loaded only on the contact page.
 */
.cv2s-flabel { margin-bottom: 2px; }

/* ─── R2 (Anastasiia Design Audit, re-fix after QA-fail) — error + focus border
   on the WHOLE input, not the area inside it ─────────────────────────────────
   The visible field box is `.cv2s-input-wrap` (it carries the 1px #e6e9ee border);
   the inner `.cv2s-input` is borderless (border:0). My first pass put the red on
   the borderless input + an inset box-shadow → a red line drawn INSIDE the box,
   exactly what she flagged. Put both the error red AND the focus state on the wrap
   so the whole input outlines, and neutralise the inner indicators. */
.cv2s-input-wrap:has(.cv2s-input:user-invalid) {
	border-color: rgb(229, 21, 32) !important;
}
.cv2s-input-wrap:has(.cv2s-input:focus) {
	border-color: #1a1a1a;
}
.cv2s-input:user-invalid,
.cv2s-input:user-invalid:focus,
textarea.cv2s-input:user-invalid {
	border-color: transparent !important;
	box-shadow: none !important;
}
.cv2s-input:focus,
textarea.cv2s-input:focus {
	box-shadow: none;
	outline: none;
}

/* ─── D1 cont. (Anastasiia QA-failed) — "gap above the submit button is too big" ─
   The empty `.cv2s-status` feedback div (it carries an aria-live whitespace node,
   so :empty can't match it) sits as its own flex row between the textarea and the
   submit, adding an extra 24px row-gap (submit gap 48px vs Figma's 24px). Pull the
   submit up by one gap so it follows the last field at Figma's 24px; the status
   still shows its message after submit, just one gap tighter. */
.cv2s-submit {
	margin-top: -24px;
}

/* ─── D2 cont. (Anastasiia QA-failed) — input error state needs the message ────
   Figma 7578:14845 shows an invalid field with a red border AND red helper text
   "This is required field" beneath it. The red border already exists
   (:user-invalid); add the message via :has() + ::after — no markup change. */
.cv2s-field-wide:has(.cv2s-input:user-invalid)::after,
.cv2s-field-half:has(.cv2s-input:user-invalid)::after,
.cv2s-field:has(.cv2s-input:user-invalid)::after {
	content: "This is required field";
	display: block;
	width: 100%;
	margin-top: 6px;
	color: rgb(229, 21, 32);
	font-family: "DM Mono", ui-monospace, monospace;
	font-size: 13px;
	line-height: 1.4;
}
