/**
 * Стани форм на мобільному — 1:1 з кадрів дизайнерки (полотно 402, 26.09):
 *   198:515 «Порожнє поле», 198:543 «фокус», 198:555 «Помилка», 198:569 «після відправки».
 * Намальована форма CTA головної (залиті поля); інші форми — за тією ж логікою
 * у своєму стилі. Десктопні значення (÷0.6), кольори й механіка — forms.css,
 * розділ «Стани форм»; тут лише мобільні розміри.
 * forms.css і мобільні файли форм (11, 14, 23, 30) пишуть «[data-layout] body …»
 * з !important — тому тут так само, а файл підключається після них.
 */

/* ------------------------------------------------------ Порожня форма
   198:515 (пригашена кнопка, доки нічого не введено) — у forms.css, одне
   правило для всіх форм і обох розкладок: мобільних розмірів воно не має. */

/* -------------------------------------------------------------- Фокус
   198:543: рамка рівно 1px #B87333 всередині поля (рядок y=166 — чиста мідь,
   y=167 уже заливка 47; ліва x=48 і права x=352 — теж по 1px). */
[data-layout="mobile"] body .cta__col .ff-el-form-control:focus,
[data-layout="mobile"] body .mlead .ff-el-form-control:focus {
  box-shadow: inset 0 0 0 1px var(--accent) !important;
}

/* ------------------------------------------------------------ Помилка
   198:555: рамка 1px #D85849 (x=48 / x=352 — чистий колір), текст під полем
   «Введіть номер повністю» — MuseoSans 300, 10.8 (ширина чорнила 122 = 300/10.8),
   колір #D85849. Базова лінія на 18.4 нижче низу поля (260.6 → 279.0),
   кнопка зсувається рівно на 18 (281.6 → 299.6):
   рядок 13.8, margin-top підібраний за центроїдом чорнила того самого тексту
   (кадр: 15.16 від низу поля; при 8.58 у Chrome було 14.26 → +0.9 = 9.48),
   бокс 9.48 + 13.8 = 23.28 → низ −5.28, щоб у потоці лишилось 18. */
[data-layout="mobile"] body .cta__col .ff-el-is-error .ff-el-form-control,
[data-layout="mobile"] body .mlead .ff-el-is-error .ff-el-form-control {
  box-shadow: inset 0 0 0 1px var(--vk-error) !important;
}
[data-layout="mobile"] body .contacts__col--form .ff-el-is-error .ff-el-form-control {
  border-bottom-color: var(--vk-error) !important;
}

[data-layout="mobile"] body .fluentform .ff-el-group .error.text-danger {
  margin: 9.48px 0 -5.28px;
  font-size: 10.8px;
  line-height: 13.8px;
}

/* ------------------------------------------------------ Після відправки
   198:569: іконка 41×41 (коло r=17.08 зі штрихом 2px, центр 201.5/154.5),
   зелений #51953E. «Заявку надіслано» — 300, 25px (чорнило 200 завширшки,
   штрих 1.75); пояснення — як текст над формою: 100, 10.8, крок рядків 15,
   рветься після «уточнити». Від базової лінії першого рядка тексту над формою
   (y=115) до верху іконки 19, від верху іконки до базової лінії заголовка 80,
   від неї до першого рядка пояснення 29. */
[data-layout="mobile"] body .fluentform div.ff-message-success {
  padding: 0;
  border-radius: 0;
  font-size: 10.8px;
  line-height: 15px;
}
[data-layout="mobile"] body .fluentform .ff-message-success::before {
  width: 41px;
  height: 41px;
}
/* рядок 30: базова лінія на 21.75 від його верху → 80 − 41 − 21.75 = 17.25 */
[data-layout="mobile"] body .fluentform .ff-message-success .vk-success__title {
  margin-top: 17.25px;
  font-size: 25px;
  line-height: 30px;
}
/* низ заголовка на 8.25 нижче його базової лінії, базова лінія рядка 15 —
   на 10.42 від верху: 29 − 8.25 − 10.42 = 10.33 */
[data-layout="mobile"] body .fluentform .ff-message-success .vk-success__text {
  max-width: 206px;
  margin-top: 10.33px;
  font-size: 10.8px;
  line-height: 15px;
}

/* CTA: перша базова лінія тексту 10.8/14.7 — на 10.27 від верху колонки,
   іконка на 19 нижче → 29.27 */
[data-layout="mobile"] body .cta__col .ff-message-success { top: 29.27px; }

/* Лід на мобільному: текст вікна там 300, а не 100 (30-modals.css) — пояснення так само */
[data-layout="mobile"] body .mlead .ff-message-success .vk-success__text { font-weight: 300; }