/* ============================================================
   Easy Peasy — доступность лид-формы Fluent Forms (форма заявки).
   Цель: тач-таргеты ≥44×44px (WCAG 2.5.5 / 2.1 AA) для RODO-чекбокса
   и кнопки отправки, плюс видимый фокус. Скоупим строго под .fluent_form_*
   и .ff-* классы, чтобы НЕ конфликтовать с дизайнерским components.css.
   ============================================================ */

/* --- RODO-чекбокс: увеличиваем хит-эриа до ≥44px --- */
.frm-fluent-form .ff-el-form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
}

/* Кликабельная область метки тянется на всю строку (хит-эриа ≥44px по высоте). */
.frm-fluent-form .ff-el-form-check-label {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  cursor: pointer;
  line-height: 1.4;
}

/* Сам чекбокс: ≥24px визуально + расширенная зона нажатия псевдоэлементом до 44px. */
.frm-fluent-form input[type="checkbox"].ff-el-form-check-input,
.frm-fluent-form input[type="checkbox"].ff-el-form-check-checkbox {
  position: relative;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin-top: 0;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--wp--preset--color--primary, #FF5A5F);
}

/* Невидимая зона нажатия 44×44, центрированная на чекбоксе (клавиатура не задета). */
.frm-fluent-form input[type="checkbox"].ff-el-form-check-input::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

/* --- Кнопка отправки: высота ≥48px --- */
.frm-fluent-form .ff-btn-submit {
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
  font-weight: 700;
}

/* --- Текстовые сообщения валидации (WCAG 3.3.1, ур. A) ---
   Гарантируем видимость inline-ошибок Fluent Forms, даже если глобальный CSS
   перекрывает дженерик-классы .error/.text-danger. FF добавляет их при
   неудачной отправке (с role=alert) — текст «поле обязательно»/«нужно согласие». */
.frm-fluent-form .ff-el-is-error .text-danger,
.frm-fluent-form .error.text-danger,
.frm-fluent-form .ff-el-form-control.has-error ~ .text-danger,
.frm-fluent-form [role="alert"].error,
.frm-fluent-form .ff-el-group.ff-el-is-error .error {
  display: block !important;
  margin-top: 6px;
  color: var(--wp--preset--color--red, #DC2626);
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.35;
}

/* Подсветка проблемного поля рамкой (в дополнение к тексту). */
.frm-fluent-form .ff-el-is-error input,
.frm-fluent-form .ff-el-is-error select,
.frm-fluent-form .ff-el-is-error textarea {
  border-color: var(--wp--preset--color--red, #DC2626);
}

/* Чекбокс согласия рисуется полностью своими руками (appearance:none + рамка
   var(--line) ниже по файлу), поэтому общее правило выше до него не достаёт:
   селектор совпадает, но специфичность .lead-grid--ff перебивает цвет обратно.
   А это самая частая причина отказа — забытая галочка RODO, и человек должен
   видеть, ЧТО именно подсвечено, а не только читать текст под блоком. */
.frm-fluent-form .ff-el-is-error input[type="checkbox"].ff-el-form-check-input,
.lead-grid--ff .ff-el-is-error input[type="checkbox"].ff-el-form-check-input {
  border-color: var(--wp--preset--color--red, #DC2626);
}

/* Сводка ошибок формы (если включена) — тоже видимой. */
.frm-fluent-form .ff_submit_btn_wrapper .error,
.frm-fluent-form .ff-errors-in-stack {
  display: block !important;
  color: var(--wp--preset--color--red, #DC2626);
  font-weight: 600;
}

/* --- Видимый фокус (доступность с клавиатуры) --- */
.frm-fluent-form input:focus-visible,
.frm-fluent-form select:focus-visible,
.frm-fluent-form textarea:focus-visible,
.frm-fluent-form .ff-btn-submit:focus-visible {
  outline: 3px solid var(--wp--preset--color--blue, #2563EB);
  outline-offset: 2px;
}

/* ============================================================
   ВИЗУАЛЬНЫЙ ПАРИТЕТ С ЭТАЛОНОМ (.lead-grid из прототипа home-hero).
   Боевая разметка Fluent Forms внутри .lead-grid--ff приводится к тому же
   виду, что и статический макет .lead-grid (.field/.input/.select/.check/…).
   Все правила строго заскоуплены под .lead-grid--ff, чтобы не задеть ни
   дизайнерский components.css, ни эталонный .lead-grid.
   Соответствие классов: .ff-el-group → .field, .ff-el-input--label → .field-label,
   .ff-el-form-control → .input/.select, .ff-el-form-check → .check.
   ============================================================ */

/* Обёртки FF: убираем внешние отступы плагина, раскладываем поля колонкой
   с тем же ритмом, что и эталонный .lead-grid (gap:15px). */
.lead-grid--ff .fluentform,
.lead-grid--ff form.frm-fluent-form {
  margin: 0;
}
.lead-grid--ff .frm-fluent-form fieldset {
  display: flex;
  flex-direction: column;
  gap: 15px;
  border: 0;
  margin: 0;
  padding: 0;
  min-inline-size: 100%;
}
/* Скрытый SR-заголовок убираем из потока flex, иначе он добавляет лишний gap. */
.lead-grid--ff .frm-fluent-form legend.ff_screen_reader_title {
  position: absolute;
}
/* Группа поля = .field; gap у fieldset уже даёт вертикальный ритм. */
.lead-grid--ff .ff-el-group {
  margin: 0;
}

/* Подпись поля = .field-label (вес 600, .9rem, цвет text, отступ 7px до контрола). */
.lead-grid--ff .ff-el-input--label {
  margin: 0 0 7px;
  padding: 0;
  line-height: 1.3;
}
.lead-grid--ff .ff-el-input--label > label {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.3;
}
/* Звёздочка обязательного поля — цветом бренда, как .req в эталоне. */
.lead-grid--ff .ff-el-is-required.asterisk-right > label::after {
  color: var(--primary);
  margin-left: 3px;
}

/* Контролы = .input / .select / .textarea эталона. */
.lead-grid--ff .ff-el-form-control {
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--text);
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 16px;
  min-height: 50px;
  width: 100%;
  box-shadow: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.lead-grid--ff .ff-el-form-control::placeholder {
  color: var(--text-muted);
  opacity: 0.75;
}
.lead-grid--ff .ff-el-form-control:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: var(--ring);
}

/* Селект = .select: убираем нативную стрелку, рисуем шеврон как .select-wrap::after.
   Шеврон — на контейнере контента (позиционирующий контекст), только когда внутри
   именно <select> (:has), цвет берётся из токена и адаптируется к теме. */
.lead-grid--ff select.ff-el-form-control {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 46px;
  cursor: pointer;
}
.lead-grid--ff .ff-el-input--content {
  position: relative;
}
.lead-grid--ff .ff-el-input--content:has(> select)::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2.5px solid var(--text-muted);
  border-bottom: 2.5px solid var(--text-muted);
  transform: rotate(45deg);
  pointer-events: none;
}

/* RODO-чекбокс = .check: подпись согласия мельче и приглушённее (как в эталоне). */
.lead-grid--ff .ff-el-form-check {
  gap: 11px;
  align-items: flex-start;
}
/* Метку выравниваем по ВЕРХУ (как .check align-items:flex-start в эталоне),
   чтобы чекбокс стоял у первой строки текста, а не центрировался по блоку. */
.lead-grid--ff .ff-el-form-check-label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-height: 44px;
  padding: 0;
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.45;
}
.lead-grid--ff .ff-el-form-check-label a {
  color: var(--primary);
}
/* Полностью кастомный бокс = .check .box эталона: скруглённый квадрат 24px,
   рамка var(--line), фон var(--surface); appearance:none снимает нативную
   отрисовку и позволяет нарисовать галку псевдоэлементом. Выравниваем по
   первой строке (margin-top:1px, как .box в эталоне). */
.lead-grid--ff input[type="checkbox"].ff-el-form-check-input {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  min-width: 24px;
  margin: 1px 0 0;
  border: 2px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease;
}
.lead-grid--ff input[type="checkbox"].ff-el-form-check-input:checked {
  background: var(--primary);
  border-color: var(--primary);
}
/* Белая «галочка» как .box svg в эталоне (border-based чек). */
.lead-grid--ff input[type="checkbox"].ff-el-form-check-input:checked::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 11px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.lead-grid--ff input[type="checkbox"].ff-el-form-check-input:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* Кнопка отправки = .btn.btn-primary.btn-lg во всю ширину. */
.lead-grid--ff .ff_submit_btn_wrapper {
  margin: 0;
}
.lead-grid--ff .frm-fluent-form .ff-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 16px 30px;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.0625rem;
  line-height: 1.1;
  color: var(--on-primary);
  background: var(--btn-primary-bg);
  border: 2px solid transparent;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-brand);
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.lead-grid--ff .frm-fluent-form .ff-btn-submit:hover {
  background: var(--btn-primary-bg-hover);
  transform: translateY(-2px);
  box-shadow: var(--sh-brand-strong);
}
.lead-grid--ff .frm-fluent-form .ff-btn-submit:active {
  background: var(--btn-primary-bg-active);
  transform: translateY(0);
}

/* Футнот под формой = .lead-foot-note (рендерится eps_lead_foot_note()). */
.lead-grid--ff .lead-foot-note {
  margin: 0;
}

/* ---- Состояние успешной отправки ----
   Fluent Forms на успехе прячет форму (samePageFormBehavior=hide_form) и
   вставляет .ff-message-success сразу после неё, ВНУТРИ .lead-grid--ff. Дефолтный
   стиль FF — прозрачный фон + серая рамка + тёмный текст: на тёмной теме почти не
   читается и вообще не считывается как «успех». Оформляем как явный брендовый
   success-статус на семантических токенах (тема-независимо, читаемо на всех
   ширинах, не обрезается .lead-card{overflow:hidden} — сообщение помещается). */
.lead-grid--ff .ff-message-success {
  position: relative;
  margin: 0;
  padding: 18px 20px 18px 56px;
  border: 1px solid color-mix(in srgb, var(--green) 42%, var(--line));
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--green) 13%, var(--surface));
  color: var(--text);
  font-size: 1rem;
  line-height: 1.5;
  font-weight: 600;
  box-shadow: var(--sh-sm);
}
/* Зелёный чек-бейдж слева — явный аффорданс успеха (фиксированный зелёный +
   белая галочка: одинаково контрастно и на светлой, и на тёмной теме). */
.lead-grid--ff .ff-message-success::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 17px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #16A34A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / 17px 17px no-repeat;
}
/* Ссылки внутри сообщения (если появятся) — тем-независимый акцент. */
.lead-grid--ff .ff-message-success a {
  color: var(--primary);
  text-decoration: underline;
}