/* OnePix — Contact Form 7 mapped onto the site's form design. */

.wpcf7 { margin: 0; }

/* CF7 wraps every control in a span. Make it a normal block so the input fills
   its slot AND the validation tip sits directly UNDER its own field — instead of
   being flung into the flex/grid row (which made the errors "уезжать"). */
.wpcf7-form .wpcf7-form-control-wrap { display: block; width: 100%; }
.form__row { align-items: start; }                         /* a tip growing one cell won't stretch the other */
.form__phone { align-items: center; }
.form__phone > .wpcf7-form-control-wrap { flex: 1; }        /* input fills the space next to the flag */
/* Phone tip flows in normal document flow (full-width block directly under the
   field) so it can NEVER be hidden behind the next field — it pushes it down. */
.form__phone .wpcf7-not-valid-tip { position: static; display: block; width: 100%; margin: 6px 2px 0; }

/* CF7 renders the .form itself now (via the class filter), so inputs already get
   .form__input. Submit already gets .btn .btn--red .btn--block. */
.wpcf7-form .wpcf7-submit { -webkit-appearance: none; appearance: none; }

/* Consent checkboxes → .form__check look. */
.wpcf7-form .wpcf7-acceptance { display: block; }
.wpcf7-form .wpcf7-acceptance .wpcf7-list-item { margin: 0; display: block; }
.wpcf7-form .wpcf7-acceptance label {
	display: flex;
	gap: 10px;
	align-items: flex-start;
	cursor: pointer;
	font-size: var(--fs-caption, 13px);
	line-height: 1.4;
	color: #3a3650;
}
.wpcf7-form .wpcf7-acceptance input[type="checkbox"] {
	flex: none;
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--red, #c7212c);
	cursor: pointer;
}
.contacts__form .wpcf7-acceptance label,
.newsletter__form .wpcf7-acceptance label,
.form__check--light .wpcf7-acceptance label { color: rgba(255, 255, 255, .85); }
/* Consent links underlined in EVERY form so they read as links (was missing in the modal). */
.wpcf7-form .wpcf7-acceptance a { text-decoration: underline; text-underline-offset: 2px; }
.modal__form .wpcf7-acceptance a { color: var(--red, #c7212c); }
.contacts__form .wpcf7-acceptance a,
.newsletter__form .wpcf7-acceptance a { color: #fff; }

/* Required-field marker: red asterisk in the field's top-right corner + a note. */
.wpcf7-form .wpcf7-form-control-wrap:has(input.wpcf7-validates-as-required),
.wpcf7-form .wpcf7-form-control-wrap:has(textarea.wpcf7-validates-as-required) { position: relative; }
.wpcf7-form .wpcf7-form-control-wrap:has(input.wpcf7-validates-as-required)::after,
.wpcf7-form .wpcf7-form-control-wrap:has(textarea.wpcf7-validates-as-required)::after {
	content: "*";
	position: absolute;
	top: 6px;
	right: 12px;
	color: var(--red, #c7212c);
	font-size: 17px;
	line-height: 1;
	font-weight: 700;
	pointer-events: none;
	z-index: 3;
}
/* the phone field is a nested wrap; anchor the asterisk to the whole field */
.wpcf7-form .form__phone { position: relative; }
.wpcf7-form .form__phone:has(input.wpcf7-validates-as-required) > .wpcf7-form-control-wrap::after { right: 12px; }
.form__req-note { font-size: var(--fs-caption, 13px); color: var(--muted, #6f6c7d); margin: 2px 2px 0; }
.form__req-note b { color: var(--red, #c7212c); }
.contacts__form .form__req-note,
.newsletter__form .form__req-note { color: rgba(255, 255, 255, .7); }
.contacts__form .form__req-note b,
.newsletter__form .form__req-note b { color: #ff9ba1; }

/* Validation → our .form__err look. Sits neatly UNDER its own field. */
.wpcf7-form .wpcf7-not-valid-tip {
	color: var(--red, #c7212c);
	font-size: var(--fs-caption, 13px);
	line-height: 1.35;
	margin: 5px 2px 0;
	display: block;
}
.wpcf7-form .form__input.wpcf7-not-valid {
	border-color: var(--red, #c7212c) !important;
	background-color: #fff5f5 !important;             /* clear tint so the empty/invalid field stands out */
	box-shadow: 0 0 0 3px rgba(199, 33, 44, .2);
}
.wpcf7-form .form__phone:has(.wpcf7-not-valid) {
	border-radius: 8px;
	box-shadow: 0 0 0 3px rgba(199, 33, 44, .2);
}
.contacts__form .wpcf7-not-valid-tip,
.newsletter__form .wpcf7-not-valid-tip { color: #ff9ba1; }

/* AJAX response banner — sits directly under the button (small, tidy gap). */
.wpcf7 form .wpcf7-response-output {
	margin: 2px 2px 0;                    /* + the .form flex gap (14px) ≈ 16px under the button */
	padding: 12px 16px;
	border: 0;
	border-radius: 8px;
	font-size: var(--fs-small, 15px);
	line-height: 1.4;
	font-weight: 500;
}
.wpcf7 form.sent .wpcf7-response-output {
	background: rgba(34, 150, 78, .12);
	color: #1c7a3f;
	font-weight: 600;
	display: flex;
	align-items: center;
	gap: 9px;
}
/* success check icon */
.wpcf7 form.sent .wpcf7-response-output::before {
	content: "";
	flex: none;
	width: 20px;
	height: 20px;
	background: no-repeat center / contain
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%231c7a3f'/%3E%3Cpath d='M6.5 12.5 10.5 16.5 17.5 8' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { background: rgba(199, 33, 44, .1); color: var(--red, #c7212c); }
/* on the dark contact / newsletter cards the success banner needs light-on-dark */
.contacts__form.sent .wpcf7-response-output,
.newsletter__form.sent .wpcf7-response-output { background: rgba(46, 178, 96, .22); color: #eafff1; }
.contacts__form.sent .wpcf7-response-output::before,
.newsletter__form.sent .wpcf7-response-output::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='11' fill='%23fff'/%3E%3Cpath d='M6.5 12.5 10.5 16.5 17.5 8' fill='none' stroke='%232e7d46' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* The default CF7 spinner sat between the button and the banner as a 24px flex
   row (+ two 14px gaps) → a big dead gap. Remove it; loading feedback comes from
   the button state instead, so the banner sits right under the button. */
.wpcf7-spinner { display: none !important; }
.wpcf7-form.submitting .wpcf7-submit { opacity: .7; cursor: progress; }