/* Всплывающее окно поверх затемнённой страницы: калькулятор и заявка. */

.ovl[hidden] { display: none; }

.ovl {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.ovl__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 20, 26, .62);
}

.ovl__box {
  position: relative;
  z-index: 1;
  width: min(1080px, 100%);
  max-height: calc(100vh - 48px);
  overflow: auto;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(15, 20, 26, .35);
}

/* Калькулятор и самостоятельная заявка: окно рисует сам модуль внутри
   прозрачного кадра, поэтому контейнер занимает весь экран и не
   добавляет своей белой рамки. */
.ovl[data-kind="calc"],
.ovl[data-kind="orderform"] {
  padding: 0;
}

.ovl[data-kind="calc"] .ovl__box,
.ovl[data-kind="orderform"] .ovl__box {
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  width: 100%;
  height: 100%;
  max-height: none;
  overflow: hidden;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.ovl[data-kind="calc"] .ovl__body,
.ovl[data-kind="orderform"] .ovl__body { height: 100%; min-height: 0; }

.ovl[data-kind="form"] .ovl__box { padding: 22px 24px 24px; }

.ovl__close {
  position: absolute;
  top: 10px;
  inset-inline-end: 12px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line, #d9dbde);
  border-radius: 50%;
  background: #fff;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  /* Правка 18.08.2026: цвет крестика задан явно. Раньше его не задавало
     ни одно правило, и замер на открытом окне давал color: rgb(0,0,0) -
     «цвет по умолчанию», а не наш чёрный #1B1B1B. В Chrome крестик от
     этого чёрный, в Safari на iPhone - системный голубой #007AFF.
     Кнопка видна всегда, когда открыто любое окно сайта: и обратный
     звонок, и заявка, и калькулятор.
     Откат: удалить строку color - крестик снова станет системного цвета. */
  color: #1b1b1b;
}

/* У калькулятора свой крестик - второй не рисуем. */
.ovl--own-close .ovl__close { display: none; }

.ovl__frame { display: block; width: 100%; height: 100%; border: 0; }

/* Кадр показывается только готовым.

   Документ модуля рисует свой непрозрачный фон, а кадр растянут на весь
   экран. Пока документ грузится, показывать кадр нельзя: на медленной
   связи на весь экран вспыхивал сплошной бледно-голубой лист вместо
   затемнённого сайта. Прозрачность зашита в сам документ на сборке, а
   этот класс закрывает и остаток времени - от подстановки адреса до
   первой отрисовки. */
.ovl--loading .ovl__frame { visibility: hidden; }

/* Надпись читается на любом фоне: страница под затемнением бывает и
   светлой, и тёмной, поэтому у надписи своя тёмная плашка. */
.ovl__loading {
  position: absolute;
  z-index: 2;
  inset-inline: 0;
  top: 50%;
  width: fit-content;
  max-width: min(420px, calc(100% - 48px));
  margin: 0 auto;
  transform: translateY(-50%);
  padding: 10px 18px;
  border-radius: 10px;
  background: rgba(15, 20, 26, .82);
  color: #fff;
  font-size: 15px;
  line-height: 1.4;
  text-align: center;
}

.ovl:not(.ovl--loading) .ovl__loading { display: none; }
.ovl__loading-slow { display: none; }
.ovl--slow .ovl__loading-fast { display: none; }
.ovl--slow .ovl__loading-slow { display: block; }

/* У окон модуля свой крестик, но пока расчёт не открылся, закрыть окно
   нечем - на это время показываем наш. */
.ovl--own-close.ovl--slow .ovl__close { display: block; }

body.ovl-open { position: fixed; width: 100%; overflow: hidden; }

/* ── Форма заявки ─────────────────────────────────────────────── */

.leadform h2 { margin: 0 0 4px; font-size: 22px; }
.leadform .sub { margin: 0 0 14px; color: var(--muted, #63676c); }
.leadform .form-grid { display: grid; gap: 10px; }
.leadform .form-field input[type="text"],
.leadform .form-field input[type="tel"],
.leadform .form-field input[type="email"],
.leadform .form-field textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line, #d9dbde);
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.leadform .form-field textarea { min-height: 96px; resize: vertical; }
.leadform .form-field.has-error input,
.leadform .form-field.has-error textarea { border-color: #9b2434; }

.leadform .dropzone {
  padding: 14px;
  border: 1px dashed var(--line, #d9dbde);
  border-radius: 8px;
  text-align: center;
  color: var(--muted, #63676c);
  cursor: pointer;
}
.leadform .dropzone.is-over { border-color: var(--accent, #2f3336); background: var(--soft, #f5f6f7); }
.leadform .file-list { margin-top: 6px; font-size: 13px; color: var(--muted, #63676c); }

.leadform .consent { display: flex; gap: 8px; align-items: flex-start; }
.leadform .consent input { margin-top: 3px; }

/* Правка 18.08.2026: галке согласия задан фирменный цвет - иначе в Safari
   на iPhone она рисуется системным голубым.

   Что нашёл контроль. У галки в окне «Перезвоните мне» (заготовка
   div#form-callback в base.html, окно собирает overlay.js, функция
   openCallback) свойство accent-color оставалось «auto». Это значит, что
   заливку включённой галки рисует сама операционная система: в Chrome на
   компьютере она синевато-серая, в Safari на iPhone - системный голубой
   #007AFF. Замер делался на открытом окне, а не на скрытой заготовке.

   У двух галок формы заявки на главной цвет уже задан фирменным #8C1821
   (bloki/14_zayavka.css, раздел 1.8) - здесь ровно то же значение, чтобы
   галки на сайте выглядели одинаково.

   Заодно задан цвет текста полей формы: он тоже нигде не назначался, и
   вычисленное значение было rgb(0,0,0) - «цвет по умолчанию», а не наш
   чёрный #1B1B1B = rgb(27,27,27). На вид в Chrome разницы нет, но в
   Safari набранный текст брался бы из системной палитры.

   Правило стоит здесь, а не в bloki/14_zayavka.css: окно обратного звонка
   общее для всех страниц сайта (заготовка в base.html, стили - в этом
   файле), а файлы bloki/* подключены только на главной. В 14_zayavka.css
   правка вылечила бы окно лишь на одной странице.

   Откат: удалить оба правила - галка снова станет системного цвета
   (голубая в Safari на iPhone). */
.leadform .consent input[type="checkbox"] { accent-color: #8c1821; color: #1b1b1b; }

.leadform input[type="text"],
.leadform input[type="tel"],
.leadform input[type="email"],
.leadform textarea { color: #1b1b1b; }

/* Место под настоящую Yandex SmartCaptcha. Самодельных картинок с
   символами на сайте нет. */
.leadform .smartcaptcha-slot {
  margin: 12px 0;
  min-height: 40px;
  font-size: 13px;
  color: var(--muted, #63676c);
}
.leadform .smartcaptcha-slot[data-state="local-test"] {
  padding: 10px 12px;
  border: 1px dashed var(--line, #d9dbde);
  border-radius: 8px;
  background: var(--soft, #f5f6f7);
}

/* Невидимая капча места не занимает: пустой рамки под формой быть не
   должно. Высоту слота Яндекс обнуляет сам, поэтому строка о защите
   стоит следующей, а не внутри слота - иначе она наезжала на согласие.
   Строку требуют условия Яндекса: значок SmartCaptcha мы прячем. */
.leadform .smartcaptcha-slot[data-invisible] {
  margin: 0;
  min-height: 0;
}

.leadform .captcha-note {
  display: block;
  margin: 10px 0 2px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--muted, #8a8f95);
}

.leadform .captcha-note a {
  color: inherit;
}

/* Пелена SmartCaptcha. Виджет кладёт её поверх всей страницы сразу при
   отрисовке, ещё до всякой проверки, и внутри неё крутится волчок. Пока
   проверки нет, пелену видеть нельзя - иначе форма и калькулятор
   выглядят затемнёнными и неработающими. Разрешаем её ровно на время
   настоящей проверки: сценарий ставит на документ метку. */
.SmartCaptcha-Overlay {
  visibility: hidden !important;
  pointer-events: none !important;
}

html[data-captcha-check="1"] .SmartCaptcha-Overlay {
  visibility: visible !important;
  pointer-events: auto !important;
}

/* Ловушка для роботов: поле есть в разметке, но человек его не видит,
   не наводит и не попадает в него клавишей. Не display: none - часть
   роботов такие поля пропускает именно по этому признаку. */
.leadform .trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.leadform button[type="submit"] {
  width: 100%;
  padding: 13px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent, #2f3336);
  color: #fff;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.leadform button[type="submit"]:disabled { opacity: .6; cursor: default; }

.form-status { margin-top: 10px; min-height: 20px; }
.form-status--ok { color: #1f7a3d; font-weight: 600; }
.form-status--error { color: #9b2434; font-weight: 600; }

.leadform .note { margin-top: 8px; font-size: 12px; color: var(--muted, #63676c); }

@media (max-width: 760px) {
  .ovl { padding: 0; }
  .ovl__box,
  .ovl[data-kind="calc"] .ovl__box {
    width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    border-radius: 0;
  }
  .ovl[data-kind="form"] .ovl__box { padding: 16px 14px 20px; overflow: auto; }
  .leadform h2 { font-size: 18px; }

  /* Окно заявки на телефоне (замечание Павла 05.09.2026): карточка
     формы длиннее экрана, а у вида orderform оставался overflow:
     hidden от прежнего кадра во весь экран - заголовок «Заявка на
     перевод» уезжал за верхний край и прокрутки не было. Кадра в этом
     виде больше нет: окну возвращается прокрутка, а зачин формы
     получает мобильный кегль H2 (20, как у заголовков разделов). */
  .ovl[data-kind="orderform"] .ovl__box {
    display: block;
    height: 100dvh;
    max-height: 100dvh;
    overflow: auto;
  }
  .ovl[data-kind="orderform"] .ovl__body { height: auto; }
  /* Призыв «Заявка на перевод» в ОКНЕ показывается и на телефоне -
     правило З3 (bloki/14_zayavka.css) прячет его у встроенных форм,
     потому что там заголовок даёт раздел страницы; у окна раздела нет,
     и без призыва непонятно, что открылось (замечание Павла
     05.09.2026). Кегль - мобильный H2. */
  body.mob .ovl[data-kind="orderform"] .zzov {
    display: block;
    font-size: 20px;
  }
}

/* ── Заявка после расчёта (решения Павла 07.09.2026) ─────────────────
   Плашка предварительного расчёта первыми строками формы, крестик
   внутри карточки заявки и возврат к расчёту. Всё это живёт только в
   окне заявки: встроенные в страницы формы не меняются.
   Откат: удалить раздел целиком. */

.ovl .zkorobka { position: relative; }

.ovl .zzakryt {
  position: absolute;
  top: 10px;
  right: 12px;
  z-index: 2;
  width: 32px;
  min-height: 32px;
  padding: 0;
  font: 400 26px/1 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #63676c;
  background: transparent;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  transition: color .2s, background-color .2s;
}
.ovl .zzakryt:hover { color: #8c1821; background: #f2f3f4; }

.ovl .zraschyot {
  margin: 0 0 14px;
  padding: 12px 14px;
  font: 400 14px/1.45 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #1b1b1b;
  background: #faf6f6;
  border: 1px solid #e6d7d8;
  border-radius: 10px;
}
.ovl .zraschyot-zagolovok {
  margin: 0 0 2px;
  font-size: 15px;
  font-weight: 700;
}
.ovl .zraschyot-napravlenie {
  margin: 0 0 8px;
  font-size: 13px;
  color: #63676c;
}
.ovl .zraschyot-stroki {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 12px;
  margin: 0;
}
.ovl .zraschyot-stroki dt { margin: 0; color: #54595f; }
.ovl .zraschyot-stroki dd {
  margin: 0;
  text-align: right;
  white-space: nowrap;
}
.ovl .zraschyot-itogo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 8px 0 0;
  padding-top: 8px;
  font-size: 16px;
  font-weight: 700;
  color: #8c1821;
  border-top: 1px solid #e6d7d8;
}
.ovl .zraschyot-ogovorka {
  margin: 8px 0 0;
  font-size: 12px;
  color: #63676c;
}

.ovl .znazad {
  display: inline-block;
  margin: 12px 0 0;
  padding: 6px 2px;
  font: 400 13px/1.3 Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #63676c;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ovl .znazad:hover { color: #8c1821; text-decoration: underline; }

@media (max-width: 760px) {
  .ovl .zraschyot { margin-bottom: 12px; padding: 10px 12px; }
  .ovl .zraschyot-stroki { font-size: 13px; }
  .ovl .zzakryt { top: 6px; right: 6px; }
}

/* ── Фокус, поставленный сценарием, обводку не рисует ──────────────────

   Правки Павла 08.09.2026, замечания 1 и 2. После закрытия окна кнопка
   «выглядит вложенной в другую кнопку: видны границы второй кнопки, на
   белом фоне, не красной»; при первом открытии крестик «обведён голубой
   рамкой непонятной формы». Со второго раза ни того, ни другого нет.

   Это системная обводка фокуса. Её рисует браузер, когда фокус переводит
   сценарий: при открытии окна - внутрь, при закрытии - обратно на
   кнопку. Человек в этот момент работает пальцем, и обводка ему только
   мешает; непостоянство - от эвристики :focus-visible, которая смотрит
   на предыдущий ввод.

   Признак `data-fokus-tiho` ставит js/site/overlay.js на время такого
   перевода фокуса и снимает при первом нажатии клавиши или уходе
   фокуса. Клавиатурная работа не страдает: там признака нет, и обводка
   видна как обычно.

   Откат: удалить раздел - вернётся системная обводка после закрытия. */
/* ПЕРЕДЕЛАНО ВТОРОЙ РАЗ 08.09.2026, круг 2, замечание К2-1: «кликаю,
   закрываю, и опять эта херовина с границей». Две прежние редакции рамку
   не убрали. Причина найдена замером НА СТЕНДЕ настоящим касанием
   (cdp_palec.js): рамку рисует единственное правило во всём сайте -
   эталонное `.act[data-h]:focus-visible{outline:2px solid var(--accent);
   outline-offset:2px}` из css/etalon/glavnaya-a.css. Замер с признаком
   `data-fokus-tiho` давал `outline: solid 2px rgb(47,51,54)` с отступом
   2 точки: тёмно-серое кольцо в двух точках от красной кнопки - это и
   есть «границы второй кнопки, на белом фоне, не красной».

   Почему не сработали прежние правки:

   1. Сила селекторов у меня и у эталона ОДИНАКОВАЯ - по (0,3,0):
      класс + признак + псевдокласс с обеих сторон. Перечисление
      «поимённо» в круге 2 ничего не изменило, силу я сравнял ещё в
      первой редакции. При равной силе решает порядок подключения, а
      overlay.css идёт таблицей № 0, эталон - № 7. Кто ниже, тот и
      побеждает: эталон.

      Лечится приставкой `body` - это домашний приём, тем же способом
      перебивает эталон весь bloki/00_obshchee.css. Сила становится
      (0,3,1), и порядок подключения больше ни при чём.

   2. `:focus` и `:focus-visible` стояли одним списком. Браузер, не
      знающий `:focus-visible`, выбрасывает ВЕСЬ список целиком - об этом
      прямо написано в bloki/00_obshchee.css, раздел 4.4, и я это правило
      нарушил. Теперь каждый псевдокласс отдельным блоком: на старом
      браузере уцелеет хотя бы `:focus`.

   Тень больше не трогаем вовсе. Ни одно правило сайта не вешает на эти
   кнопки тень по фокусу (проверено перебором всех правил с `:focus`),
   а прежняя «возвращённая» тень `inset 0 1px 0` не совпадала с настоящей
   тенью кнопки `inset 0 4px 8px 4px` - сработай то правило, кнопка
   потеряла бы свой внутренний отсвет.

   Откат: удалить четыре правила ниже - вернётся обводка после закрытия. */

/* Общий случай - гасит системную обводку у крестика и прочих кнопок без
   своего правила фокуса. */
body [data-fokus-tiho]:focus { outline: none; }
body [data-fokus-tiho]:focus-visible { outline: none; }

/* Кнопки первого экрана: единственные, у кого обводка задана эталоном.
   Приставка `body` делает правило сильнее его. */
body .act[data-fokus-tiho]:focus { outline: none; }
body .act[data-fokus-tiho]:focus-visible { outline: none; }

/* ── Крестик закрытия: ничего своего ───────────────────────────────────

   ОТМЕНЕНО 08.09.2026, круг 2, замечание К2-2: «красный крестик обвели в
   кружок - это лишнее. Рамка вдобавок стоит криво и наезжает на поля.
   Оставить просто крестик, как было, ничего своего не добавлять».

   В первом круге крестики двух окон были приведены к одному размеру
   40×40 со скруглением - по требованию того же дня «сделать крестики
   одинаковыми». Павел увидел результат и решение отменил: крестик
   остаётся таким, каким был (в окне заявки 32×32, в окне расчёта свой -
   его рисует сам модуль).

   Здесь намеренно НЕТ правил: раздел оставлен отметкой, чтобы никто не
   завёл их заново. Обводку фокуса на крестике гасит правило выше. */