/* Форма заявки с выбором темы на /contacts/ (FINISHER-199 / FINISHER-TC-50, 13.08.2026).
   Свои правила нужны потому, что блок вставлен не как t396-артборд с абсолютными
   координатами, а обычным потоком — иначе на мобильном он поехал бы вместе с сеткой. */
/* box-sizing обязателен: .t-container у Тильды идёт с width:100% и content-box,
   поэтому боковые padding'и уезжали за вьюпорт и на 375px страница получала
   горизонтальный скролл (415 при 375). */
.fin-cform { max-width: 720px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; }
.fin-cform__title {
  font-family: 'GraphicLCG', Arial, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 1.15;
  color: #040404;
  margin: 0 0 12px;
}
.fin-cform__descr {
  font-family: 'GraphicLCG', Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  color: #040404;
  margin: 0 0 28px;
}
.fin-cform__form .t-input-group { margin-bottom: 18px; }
/* height:auto обязателен: у Тильды в tilda-forms-1.0.min.css лежит
   `.t-input-title{height:100%}` — это рассчитано на её раскладку, где подпись
   лежит в отдельной абсолютно спозиционированной колонке. У нас группа поля —
   грид-элемент с ОПРЕДЕЛЁННОЙ высотой строки, поэтому 100% = вся строка: подпись
   занимает её целиком, а поле выпадает из группы вниз и наезжает на следующую
   подпись. Лист грузится отложенно (media="print" → onload), поэтому вёрстка
   «падала» не сразу, а в момент догрузки страницы. */
.fin-cform__form .t-input-title {
  display: block;
  height: auto;
  margin-bottom: 6px;
  font-family: 'GraphicLCG', Arial, sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: #040404;
}
.fin-cform__opt { font-weight: 400; opacity: .55; }
.fin-cform__form .t-input,
.fin-cform__form .t-select {
  width: 100%;
  height: 48px;
  padding: 0 14px;
  font-size: 16px;
  background: #fff;
  box-sizing: border-box;
}
.fin-cform__form textarea.t-input {
  height: auto;
  min-height: 110px;
  padding: 12px 14px;
  line-height: 1.4;
  resize: vertical;
}
.fin-cform__form .t-checkbox__control { display: flex; align-items: flex-start; gap: 8px; }
.fin-cform__form .t-checkbox__labeltext { font-size: 13px; line-height: 1.35; }
.fin-cform__form .t-checkbox__labeltext a { color: #040404; text-decoration: underline; }
.fin-cform__submit {
  width: 100%;
  height: 52px;
  border: 0;
  border-radius: 5px;
  background: #040404;
  color: #fff;
  font-family: 'GraphicLCG', Arial, sans-serif;
  font-size: 16px;
  cursor: pointer;
  transition: background-color .2s ease;
}
.fin-cform__submit:hover, .fin-cform__submit:focus-visible { background: #6d687f; }
.fin-cform__form .t-input-error { margin-top: 4px; font-size: 12px; }

@media screen and (min-width: 700px) {
  /* имя и телефон в одну строку — на 720px это читается лучше столбика из шести полей */
  .fin-cform__form .t-form__inputsbox {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
  }
  .fin-cform__form .t-input-group_sb,
  .fin-cform__form .t-input-group_ta,
  .fin-cform__form .t-input-group_cb,
  .fin-cform__form .t-form__submit { grid-column: 1 / -1; }
}
@media screen and (max-width: 480px) {
  .fin-cform__title { font-size: 26px; }
}

/* ---- Taste-полировка (14.08.2026) --------------------------------------- */
/* Форма-карточка: мягкая рамка + тёплая (в тон near-black бренду) тень —
   отделяет блок заявки от контента, но остаётся спокойной. Аккуратно, чтобы
   не спорить с фирменной плоской вёрсткой Тильды. */
.fin-cform__form {
  background: #fff;
  border: 1px solid #ececec;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 12px 34px rgba(4, 4, 4, .06);
  box-sizing: border-box;
}
@media screen and (max-width: 480px) {
  .fin-cform__form { padding: 20px 16px; }
}

/* Видимый фокус во всех полях. Кольцо через box-shadow (не border), потому что
   у полей border задан ИНЛАЙНОМ — перебить его из таблицы можно только !important,
   а тень инлайном не задана, поэтому берётся штатно и не конфликтует. */
.fin-cform__form .t-input:focus,
.fin-cform__form .t-select:focus,
.fin-cform__form textarea.t-input:focus {
  outline: none;
  border-color: #6d687f !important;
  box-shadow: 0 0 0 3px rgba(109, 104, 127, .18);
}
/* Согласие: видимый фокус на самом чекбоксе (клавиатурная навигация). */
.fin-cform__form .t-checkbox:focus-visible + .t-checkbox__indicator {
  outline: 2px solid #6d687f;
  outline-offset: 2px;
}

/* Тактильная отдача кнопки: лёгкое «нажатие» вместо статичного hover. */
.fin-cform__submit { transition: background-color .2s ease, transform .05s ease; }
.fin-cform__submit:active { transform: translateY(1px); }
.fin-cform__submit:focus-visible { outline: 2px solid #6d687f; outline-offset: 3px; }

/* ---- Поле «Телефон»: плагин-маска Тильды (18.08.2026) --------------------
   tilda-phone-mask оборачивает <input> в .t-input-phonemask__wrap (флаг + код +
   само поле) и копирует на обёртку инлайновую рамку/скругление, а ВНУТРЕННИЙ
   input делает border:0. Пока плагин догружается (реальная сеть + гео-запрос
   страны), сайт показывал сырой input с собственной рамкой ВНУТРИ обёртки —
   получалось «рамка в рамке», и внутренний бокс вылезал за скруглённый край.
   Фиксируем детерминированно, не полагаясь на тайминг плагина:
   обёртка = поле, внутренний input — без рамки/скругления, обрезаем всё лишнее. */
.fin-cform__form .t-input-phonemask__wrap {
  display: flex;
  align-items: center;
  height: 52px;                 /* в один уровень с полями «Имя»/«E-mail» */
  padding: 0 14px;
  overflow: hidden;             /* внутренний бокс не может «выехать» за скругление */
  box-sizing: border-box;
}
.fin-cform__form .t-input-phonemask,
.fin-cform__form input[name="Phone"].t-input-phonemask {
  border: 0 !important;
  border-radius: 0 !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.fin-cform__form .t-input-phonemask__select { margin: 0 8px 0 0; flex-shrink: 0; }
/* фокус подсвечиваем на всей обёртке-поле, а не на «голом» внутреннем input */
.fin-cform__form .t-input-phonemask__wrap:focus-within {
  border-color: #6d687f !important;
  box-shadow: 0 0 0 3px rgba(109, 104, 127, .18);
}
/* Пока маска-плагин ещё не создал обёртку, у «сырого» поля должна быть
   такая же высота, чтобы строка «Имя + Телефон» не прыгала при догрузке. */
.fin-cform__form input[name="Phone"]:not(.t-input-phonemask) { min-height: 52px; }

/* ---- Кнопка отправки: не даём ей пропасть при догрузке форм-скриптов -------
   Тильдовский tilda-forms изредка навешивает служебные состояния на
   .t-form__submit; фиксируем, что контейнер и сама кнопка всегда видимы. */
.fin-cform__form .t-form__submit { display: block; margin-top: 8px; }
.fin-cform__submit { display: block; width: 100%; }

/* ---- Компактная форма заявки (FINISHER-207, 01.09.2026) -------------------
   Три поля (Имя / Телефон / согласие) — пред-футерный блок на страницах услуг
   и портфолио и врезка в конце статьи. Разметка формы та же, что на /contacts/,
   поэтому все правила выше (фокус, маска телефона, кнопка) работают и здесь;
   ниже — только то, чем компактная форма отличается. */
.fin-lead__title { font-size: 28px; text-align: center; }
.fin-lead__descr { text-align: center; max-width: 520px; margin-left: auto; margin-right: auto; }
@media screen and (max-width: 480px) {
  .fin-lead__title { font-size: 24px; }
}
/* Согласие и кнопка стоят рядом с полями, а не «этажом» ниже: в форме из трёх
   полей вертикальный ритм иначе разъезжается. */
.fin-lead__form .t-input-group_cb { margin-bottom: 12px; }
/* Высота полей задаётся явно: обёртка маски телефона выше по файлу прибита к 52px,
   а «Имя» на страницах услуг получало 48px из постраничного tilda-blocks-page*.css —
   в одной строке поля разъезжались по 4px. */
.fin-lead__form .t-input,
.fin-lead__form .t-select { height: 52px; }

/* Врезка в статье: CTA-карточка .art-cta уже даёт фон и padding, поэтому своя
   «карточка» формы внутри неё была бы карточкой в карточке — гасим фон и тень.
   Текст внутри выравниваем влево: .art-cta центрирует всё, а подписи полей и
   строка согласия в центре читаются плохо. */
.fin-lead_art { margin-top: 6px; }
.art-cta .fin-lead__form {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  text-align: left;
}
.art-cta .fin-lead__form .t-input,
.art-cta .fin-lead__form .t-input-phonemask__wrap { background: #fff; }
/* В .art-cta любая ссылка стилизована как большая чёрная кнопка — под это правило
   попадала бы и ссылка на политику в строке согласия. Возвращаем ей вид текста.
   Специфичность выше, чем у `.art-cta a` из инлайнового <style> страницы. */
.art-cta .fin-lead__form a {
  display: inline;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: #040404;
  font-weight: 400;
  text-decoration: underline;
}