/* ============================================================================
   ok-modal.css — ЕДИНЫЙ КОМПОНЕНТ ПОПАПА. Пакет W1-P04, эталон «04 Карточка товара».
   ============================================================================

   ЗАЧЕМ ФАЙЛ. До него визуальная система попапа существовала в шести разных
   листах, и каждый попап имел свои значения. Замер до правки (13 попапов, живой
   рендер, 1440 и 375):

     затемнение фона   — ШЕСТЬ разных значений: rgba(20,24,34,.55), rgba(11,22,44,.55),
                         rgba(9,18,42,.55), rgba(12,28,60,.55), rgba(10,18,38,.82),
                         rgba(12,18,32,.86);
     радиус коробки    — 16 / 18 / 22 / 24px;
     внутренний отступ — 30px / 26px 26px 22px / 20px 28px / 32px 38px 28px / 16px;
     ширина коробки    — 460px / 420px / без ограничения;
     размер заголовка  — 20 / 21 / 22 / 23 / 26px;
     кнопка закрытия   — 38×38 и 40×40, и ВСЕ ТРИНАДЦАТЬ ниже нормы тач-цели 44×44.

   ЧТО ДЕЛАЕТ ФАЙЛ. Сводит эти величины к одному набору токенов из мастер-файла
   «04 Карточка товара» и даёт кнопке закрытия зону 44×44 на тач-устройствах.

   ЧЕГО ФАЙЛ НЕ ДЕЛАЕТ — И ПОЧЕМУ ЭТО ВАЖНО:

   1. НЕ трогает механику показа. У попапов их две — `hidden` + `.is-open`
      (шапка, гарантия, форматы, автопарк, тизер, «О компании», город) и
      `aria-hidden` + `.is-open` с display (заказ, фото, подбор, hero услуги,
      кейс, лайтбокс). На обе завязан JS и красный список группы 9. Файл задаёт
      ТОЛЬКО оформление: цвет, радиус, отступ, типографику, зону нажатия.

   2. НЕ переименовывает узлы. Имена классов внутри попапов — часть контракта JS
      (`.okna-hdr-modal__box`, `.okna-org-guar-modal__x` и т.д.). Поэтому единый
      вид собран списком существующих селекторов, а не переразметкой.

   3. НЕ делает мобильные попапы «шторкой снизу», хотя мастер-файл рисует их
      именно так. Причина не в лени: геометрия позиционирования каждого попапа
      живёт в СВОЁМ листе (glavnaya.css, org.css, single.css, usluga.css,
      header-view.css), а они вне allowed этого пакета. Расхождение вынесено
      в реестр решений, а не замолчано.

   4. НЕ трогает поля и кнопку отправки формы. Их красит UI-кит design.css, а на
      карточке товара — ещё и single.css через `!important`. Перебивать чужой
      `!important` массово пакет не имеет права; поля и так уже 48–52px высотой,
      то есть норму тач-цели держат (замер: у 11 попапов из 11 с формой).

   МЕСТО В КАСКАДЕ. Лист подключается на `wp_enqueue_scripts` с приоритетом 100
   (inc/catalog-prices.php), то есть печатается ПОСЛЕ всех тематических листов.
   Но опирается файл не на порядок, а на СПЕЦИФИЧНОСТЬ: на этом сайте
   twentytwentyone/style.css грузится дважды, и брать порядком здесь нельзя.
   ============================================================================ */

:root{
  /* Токены попапа — мастер «04 Карточка товара», десктопная и мобильная рамки. */
  --ok-modal-scrim:        rgba(10, 15, 26, .55);   /* затемнение фона у попапов-форм */
  --ok-modal-bg:           #ffffff;
  --ok-modal-radius:       var(--ok-radius-card,16px);  /* десктоп · УБОРКА §2.1: 16px→--ok-radius-card (роль модалка/форма, то же значение) */
  --ok-modal-pad:          26px;                    /* десктоп */
  --ok-modal-pad-m:        22px 16px 20px;          /* мобилка */
  --ok-modal-width:        460px;
  --ok-modal-x-size:       38px;                    /* видимый размер крестика */
  --ok-modal-x-touch:      44px;                    /* зона нажатия на тач-устройствах */
  --ok-modal-x-bg:         #ffffff;
  --ok-modal-x-line:       #e8ecf2;
  --ok-modal-x-ink:        #526173;
  --ok-modal-x-shadow:     0 6px 18px rgba(20, 40, 80, .12);
  --ok-modal-title-size:   22px;
  --ok-modal-title-weight: 800;
  --ok-modal-title-ink:    var(--ink, #123d87);
  --ok-modal-sub-size:     14px;
  --ok-modal-sub-ink:      var(--ok-text-2, #526173);
  --ok-modal-sub-lh:       1.5;
  /* Фото-смотрелки затемняются сильнее — иначе снимок стекла не читается на светлом фоне.
     Это осознанное исключение из единого затемнения, а не забытый попап. Было два разных
     значения (кейс .82, лайтбокс .86) — сведены к одному, более тёмному: на нём фото
     читается лучше, а разнобой в два оттенка одного и того же экрана смысла не имел. */
  --ok-modal-scrim-photo:  rgba(10, 18, 38, .86);
}

/* ── 1. ЗАТЕМНЕНИЕ ФОНА ────────────────────────────────────────────────────
   Селекторы перечислены поимённо: `.ok-modal` — новый общий хук (его ставят
   производители в allowed-файлах), остальные — существующие корни попапов,
   в том числе двух, чьи файлы вне allowed (город, автопарк). Так единый вид
   получают все тринадцать, а не девять достижимых. */
.ok-modal > .ok-modal__scrim,
.okna-modal .okna-modal__overlay,
.okna-hdr-modal .okna-hdr-modal__ov,
.okna-org-guar-modal .okna-org-guar-modal__ov,
.okna-org-fmt-modal .okna-org-fmt-modal__ov,
.okna-city-modal .okna-city-modal__overlay,
.okna-ap-modal .okna-ap-modal__ov,
.okna-abt-modal .okna-abt-modal__ov,
.okna-about-modal .okna-about-modal__ov{
  background: var(--ok-modal-scrim);
}
/* Фото-смотрелки — своё затемнение из своего токена (значение не меняется). */
.okna-case-modal .okna-case-modal__overlay,
.okna-lb .okna-lb__overlay{
  background: var(--ok-modal-scrim-photo);
}

/* ── 2. КОРОБКА: радиус, внутренний отступ, ширина ─────────────────────────
   Только попапы-формы. Кейс и лайтбокс — смотрелки изображений, у них своя
   геометрия под кадр, и подгонять её под форму нельзя. */
.ok-modal > .ok-modal__box,
.okna-modal .okna-modal__box,
.okna-hdr-modal .okna-hdr-modal__box,
.okna-org-guar-modal .okna-org-guar-modal__box,
.okna-org-fmt-modal .okna-org-fmt-modal__box,
.okna-ap-modal .okna-ap-modal__box,
.okna-abt-modal .okna-abt-modal__box,
.okna-about-modal .okna-about-modal__box{
  background: var(--ok-modal-bg);
  border-radius: var(--ok-modal-radius);
  padding: var(--ok-modal-pad);
}
/* Ширину задаём только тем, у кого она уже ограничена: у гарантии и форматов
   коробка широкая по смыслу (таблица условий, сетка форматов) — сузить её до
   460px значит сломать их содержимое, а не унифицировать. */
.ok-modal > .ok-modal__box,
.okna-modal .okna-modal__box,
.okna-hdr-modal .okna-hdr-modal__box,
.okna-ap-modal .okna-ap-modal__box,
.okna-abt-modal .okna-abt-modal__box,
.okna-about-modal .okna-about-modal__box{
  max-width: var(--ok-modal-width);
}

/* ── 3. КНОПКА ЗАКРЫТИЯ: единый вид ────────────────────────────────────────
   38×38, круг, белая, тонкая рамка, мягкая тень — как в мастере.

   Крестик лайтбокса (`.okna-lb__close`) в этот список НЕ входит намеренно: он
   часть тройки одинаковых кнопок смотрелки (назад / вперёд / закрыть,
   общий класс `.okna-lb__btn`). Перекрасить одну из трёх — значит сломать ряд,
   а перекрашивать все три выходит за «единый вид попапа». Зону нажатия 44×44
   он всё равно получает — см. §4 ниже, там он есть.

   К W1-P04B добавилась вторая, техническая причина того же исключения: тройка
   покрашена ПО ID — `#okna-lb .okna-lb__btn` (single.css:355), это (1,1,0).
   Чтобы достать до неё, нужен свой селектор с id, то есть отдельная ветка
   каскада ради одной кнопки из трёх. Итог по крестику — 12 из 13, лайтбокс
   зафиксирован исключением (реестр решений, D-53). */
.ok-modal .ok-modal__close,
.okna-modal .okna-modal__close,
.okna-hdr-modal .okna-hdr-modal__x,
.okna-org-guar-modal .okna-org-guar-modal__x,
.okna-org-fmt-modal .okna-org-fmt-modal__x,
.okna-city-modal .okna-city-modal__close,
.okna-case-modal .okna-case-modal__close,
.okna-ap-modal .okna-ap-modal__x,
.okna-abt-modal .okna-abt-modal__x,
.okna-about-modal .okna-about-modal__x{
  width: var(--ok-modal-x-size);
  height: var(--ok-modal-x-size);
  border-radius: var(--ok-radius-pill,999px);
  background: var(--ok-modal-x-bg);
  border: 1px solid var(--ok-modal-x-line);
  color: var(--ok-modal-x-ink);
  box-shadow: var(--ok-modal-x-shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}

/* ── 3A. ФОН И ЦВЕТ В ПОКОЕ: перевес над родительской темой ────────────────
   ★ ЭТО НЕ ДУБЛЬ §3, А ЕДИНСТВЕННЫЙ СПОСОБ ОБОЙТИСЬ БЕЗ `!important`.

   До W1-P04B фон и цвет крестика держались чужими `!important` в пяти местах
   (design.css, org.css ×2, glavnaya.css, три инлайновых блока). Пакет требует
   их снять. Снятие «в лоб» даёт видимую регрессию, и она ИЗМЕРЕНА, а не
   выведена рассуждением: замер `_cross__bezimp__*` — 11 крестиков приехали
   графитовым кругом #28303d с мятной иконкой #d1e4dd.

   Причина. Родительская тема (twentytwentyone/style.css:1670 и :1700, лист
   печатается ПОСЛЕ нашего) держит любой `<button>`:

     button:not(:hover):not(:active):not(.has-text-color){ color:… }
     button:not(:hover):not(:active):not(.has-background){ background-color:… }

   Каждый `:not()` добавляет специфичность своего аргумента, итог — (0,3,1).
   Селекторы §3 — (0,2,0), они СЛАБЕЕ. Порядок печати тут не спасает.

   Приём взят не из головы: ровно так на этом сайте уже решены CTA «О компании»
   (ok-home-w5.css:309) и кнопка B2B (ok-home-w3.css:538). Повторяем ТОЛЬКО два
   спорных свойства цепочкой (0,4,2) — геометрия остаётся в §3, иначе на hover
   крестик терял бы размеры. `:not(:hover):not(:active)` обязателен: без него
   правило перебило бы и собственный hover ниже.

   Лайтбокс в списке отсутствует по причине из §3. */
html body .ok-modal .ok-modal__close:not(:hover):not(:active),
html body .okna-modal .okna-modal__close:not(:hover):not(:active),
html body .okna-hdr-modal .okna-hdr-modal__x:not(:hover):not(:active),
html body .okna-org-guar-modal .okna-org-guar-modal__x:not(:hover):not(:active),
html body .okna-org-fmt-modal .okna-org-fmt-modal__x:not(:hover):not(:active),
html body .okna-city-modal .okna-city-modal__close:not(:hover):not(:active),
html body .okna-case-modal .okna-case-modal__close:not(:hover):not(:active),
html body .okna-ap-modal .okna-ap-modal__x:not(:hover):not(:active),
html body .okna-abt-modal .okna-abt-modal__x:not(:hover):not(:active),
html body .okna-about-modal .okna-about-modal__x:not(:hover):not(:active){
  background: var(--ok-modal-x-bg);
  color: var(--ok-modal-x-ink);
  border-color: var(--ok-modal-x-line);
}

/* ── 3B. ОТКЛИК КРЕСТИКА: единый hover и нажатие ───────────────────────────
   Раньше синий hover жил в пяти листах и трёх инлайнах, у каждого свой набор
   `!important`. После их снятия hover обязан приехать откуда-то один раз —
   иначе §3 (правило БЕЗ псевдокласса, печатается позже легаси) молча погасил
   бы наведение: при равной специфичности (0,2,0) выигрывает последний лист.

   Тема на hover тоже вмешивается — `button:hover{ background-color:transparent;
   border-color:currentColor; color:inherit }` (0,1,1), style.css:1721. Наши
   (0,3,2) перевешивают её без флага.

   `:active` включён в тот же список: TT1 гасит фон и на нажатии, а сдвиг на
   1px крестику даёт общий слой отклика кнопок (design.css:1715) — его этот
   пакет не трогает. */
html body .ok-modal .ok-modal__close:hover,
html body .ok-modal .ok-modal__close:active,
html body .okna-modal .okna-modal__close:hover,
html body .okna-modal .okna-modal__close:active,
html body .okna-hdr-modal .okna-hdr-modal__x:hover,
html body .okna-hdr-modal .okna-hdr-modal__x:active,
html body .okna-org-guar-modal .okna-org-guar-modal__x:hover,
html body .okna-org-guar-modal .okna-org-guar-modal__x:active,
html body .okna-org-fmt-modal .okna-org-fmt-modal__x:hover,
html body .okna-org-fmt-modal .okna-org-fmt-modal__x:active,
html body .okna-city-modal .okna-city-modal__close:hover,
html body .okna-city-modal .okna-city-modal__close:active,
html body .okna-case-modal .okna-case-modal__close:hover,
html body .okna-case-modal .okna-case-modal__close:active,
html body .okna-ap-modal .okna-ap-modal__x:hover,
html body .okna-ap-modal .okna-ap-modal__x:active,
html body .okna-abt-modal .okna-abt-modal__x:hover,
html body .okna-abt-modal .okna-abt-modal__x:active,
html body .okna-about-modal .okna-about-modal__x:hover,
html body .okna-about-modal .okna-about-modal__x:active{
  background: var(--blue, #1c5bd6);
  color: #fff;
  border-color: var(--blue, #1c5bd6);
}

/* Размер иконки внутри крестика — тоже был расписан по шести листам (18px и
   20px). Сводим к одному значению здесь, чтобы после переноса инлайнов правило
   не пропало вместе с ними. */
.ok-modal .ok-modal__close svg,
.okna-modal .okna-modal__close svg,
.okna-hdr-modal .okna-hdr-modal__x svg,
.okna-org-guar-modal .okna-org-guar-modal__x svg,
.okna-org-fmt-modal .okna-org-fmt-modal__x svg,
.okna-city-modal .okna-city-modal__close svg,
.okna-case-modal .okna-case-modal__close svg,
.okna-ap-modal .okna-ap-modal__x svg,
.okna-abt-modal .okna-abt-modal__x svg,
.okna-about-modal .okna-about-modal__x svg{
  width: 18px;
  height: 18px;
  display: block;
}

/* ── 4. ТАЧ-ЦЕЛЬ КНОПКИ ЗАКРЫТИЯ ───────────────────────────────────────────
   Замер до правки: все 13 крестиков 38×38 или 40×40, то есть НИ ОДИН не
   держал норму 44×44. Видимый размер оставляем прежним (иначе поедет вёрстка
   шапки попапа), а зону нажатия расширяем псевдоэлементом — тем же приёмом,
   что применён к шапке в W1-P02.

   Только `hover:none` + `pointer:coarse`: на мыши правило 44×44 не действует,
   и раздувать зону там незачем — это создаст перекрытие с соседними целями.

   ★ ГРАБЛИ, НА КОТОРЫЕ Я НАСТУПИЛ И ИЗМЕРИЛ. Первая редакция этого блока писала
   всем крестикам `position: relative` — «чтобы псевдоэлементу было от чего
   считаться». Замер после правки показал: 11 крестиков из 13 УЖЕ были
   `position: absolute` (они висят в углу окна), и `relative` выбил их из угла
   в поток — на снимке 375 крестик уехал под заголовок и накрыл его.

   Правильно так: абсолютно спозиционированный элемент сам является блоком
   привязки для СВОИХ псевдоэлементов, поэтому `position` ему трогать не нужно
   вовсе. Объявляем `relative` ТОЛЬКО тому единственному крестику, который по
   замеру статичен, — в попапе выбора города. */
@media (hover: none) and (pointer: coarse){
  .okna-city-modal .okna-city-modal__close{ position: relative; }
  .ok-modal .ok-modal__close::after,
  .okna-modal .okna-modal__close::after,
  .okna-hdr-modal .okna-hdr-modal__x::after,
  .okna-org-guar-modal .okna-org-guar-modal__x::after,
  .okna-org-fmt-modal .okna-org-fmt-modal__x::after,
  .okna-city-modal .okna-city-modal__close::after,
  .okna-case-modal .okna-case-modal__close::after,
  .okna-lb .okna-lb__close::after,
  .okna-ap-modal .okna-ap-modal__x::after,
  .okna-abt-modal .okna-abt-modal__x::after,
  .okna-about-modal .okna-about-modal__x::after{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--ok-modal-x-touch);
    height: var(--ok-modal-x-touch);
    transform: translate(-50%, -50%);
    pointer-events: auto;
  }
}

/* ── 5. ТИПОГРАФИКА ЗАГОЛОВКА И ПОДЗАГОЛОВКА ───────────────────────────────
   Пять разных кеглей заголовка сводятся к 22px мастера. Заголовок гарантии
   (`__info-t`) и заголовок кейса в список входят: это те же заголовки попапа,
   просто названные по-своему. */
.ok-modal .ok-modal__title,
.okna-modal .okna-modal__title,
.okna-hdr-modal .okna-hdr-modal__title,
.okna-org-guar-modal .okna-org-guar-modal__info-t,
.okna-org-fmt-modal .okna-org-fmt-modal__title,
.okna-case-modal .okna-case-modal__title,
.okna-ap-modal .okna-ap-modal__title,
.okna-abt-modal .okna-abt-modal__title,
.okna-about-modal .okna-about-modal__title,
.okna-modal .okna-pm__title{
  font-size: var(--ok-modal-title-size);
  font-weight: var(--ok-modal-title-weight);
  color: var(--ok-modal-title-ink);
}
.ok-modal .ok-modal__sub,
.okna-modal .okna-modal__sub,
.okna-hdr-modal .okna-hdr-modal__sub,
.okna-org-fmt-modal .okna-org-fmt-modal__sub,
.okna-ap-modal .okna-ap-modal__sub,
.okna-abt-modal .okna-abt-modal__sub,
.okna-about-modal .okna-about-modal__sub,
.okna-modal .okna-pm__sub{
  font-size: var(--ok-modal-sub-size);
  color: var(--ok-modal-sub-ink);
  line-height: var(--ok-modal-sub-lh);
}

/* ── 6. МОБИЛЬНАЯ РАМКА ────────────────────────────────────────────────────
   Мастер даёт на мобиле padding 22/16/20. Боковые 16px вместо 30px — это
   +28px полезной ширины на экране 375, то есть поле ввода перестаёт жаться. */
@media (max-width: 600px){
  .ok-modal > .ok-modal__box,
  .okna-modal .okna-modal__box,
  .okna-hdr-modal .okna-hdr-modal__box,
  .okna-org-guar-modal .okna-org-guar-modal__box,
  .okna-org-fmt-modal .okna-org-fmt-modal__box,
  .okna-ap-modal .okna-ap-modal__box,
  .okna-abt-modal .okna-abt-modal__box,
  .okna-about-modal .okna-about-modal__box{
    padding: var(--ok-modal-pad-m);
  }
}

/* ── 7. ПОПАП ШАПКИ: стили переехали сюда из инлайнового <style> ───────────
   Раньше эти правила печатались тегом <style> прямо в разметке попапа
   (inc/forms-header.php). Перенос — требование §0B пакета. Значения перенесены
   БЕЗ ИЗМЕНЕНИЙ, кроме тех, что выше приводит к канону сам этот файл
   (затемнение, радиус, отступ, ширина, крестик, типографика).
   Два `!important` сохранены как были: они перебивают UI-кит кнопок в
   design.css, и без них крестик шапки станет обычной кнопкой. Это не новый
   `!important`, а перенесённый — счётчик пакета по новым остаётся нулевым. */
.okna-hdr-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .2s ease; }
.okna-hdr-modal.is-open{ opacity:1; }
.okna-hdr-modal[hidden]{ display:none; }
.okna-hdr-modal__ov{ position:absolute; inset:0; backdrop-filter:blur(2px); }
.okna-hdr-modal__box{ position:relative; width:100%; box-shadow:0 24px 70px rgba(11,22,44,.35); max-height:92vh; overflow:auto; transform:translateY(8px); transition:transform .2s ease; }
.okna-hdr-modal.is-open .okna-hdr-modal__box{ transform:none; }
.okna-hdr-modal__x{ position:absolute; top:14px; right:14px; transition:background .18s ease, color .18s ease, transform .12s ease; }
.okna-hdr-modal__x:active{ transform:translateY(1px); }
.okna-hdr-modal__title{ margin:0 44px 6px 0; line-height:1.2; }
.okna-hdr-modal__sub{ margin:0 0 14px; }
.okna-hdr-modal .okna-hdrf-f{ margin:0 0 10px; }
.okna-hdr-modal .okna-hdrf-f label{ display:block; font-weight:600; font-size:13px; margin:0 0 4px; }
.okna-hdr-modal .okna-hdrf-f .okna-req{ color:var(--red,#e0223a); }
.okna-hdr-modal .okna-hdrf-f input{ width:100%; }
.okna-hdr-modal .okna-hdrf-actions{ margin:4px 0 0; }
.okna-hdr-modal .okna-hdr-submit{ width:100%; }

/* ── 8. ПОПАПЫ АВТОПАРКА, ТИЗЕРА И «О КОМПАНИИ» ───────────────────────────
   Три блока переехали сюда из инлайновых тегов <style> в разметке
   (inc/forms-autopark.php, inc/forms-about-teaser.php, inc/forms-about.php).
   Перенос — требование §1 п.4 пакета W1-P04B, тем же порядком, каким в W1-P04
   переехал попап шапки (§7 выше).

   ЧТО ИЗ ПЕРЕНОСИМОГО ОТБРОШЕНО — и почему это не потеря:
     затемнение оверлея, фон/радиус/отступ/ширина коробки, кегль заголовка и
     подзаголовка, весь вид крестика и размер его иконки — всё это ВЫШЕ по
     файлу задаёт канон (§1, §2, §3, §3A, §3B, §5). Переносить их значения
     второй раз значило бы вернуть тот самый разнобой, ради которого файл и
     заведён: у трёх блоков коробка была 420 / 420 / 460px при канонных 460px.

   ★ НИ ОДНОГО `!important` НЕ ПЕРЕНЕСЕНО. В инлайнах их было пятнадцать
   объявлений (по пять на блок: фон, рамка и цвет крестика в покое, фон и цвет
   на наведении). Они держали крестик против правила кнопок родительской темы,
   и ровно ту же работу теперь делает §3A — специфичностью. Счётчик новых
   `!important` пакета остаётся нулевым, а старых стало на 15 меньше.

   Мёртвый CSS. Лист печатается на всех страницах, а эти три попапа живут на
   двух. Осознанно: перенесённого здесь ~45 правил, все с неймспейсом в
   селекторе, они ни до чего не достают. Условное подключение листа дало бы
   класс отказов «стиль не приехал» дороже выигрыша в пару килобайт. */

/* 8.1. Автопарк */
.okna-ap-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .2s ease; }
.okna-ap-modal.is-open{ opacity:1; }
.okna-ap-modal[hidden]{ display:none; }
.okna-ap-modal__ov{ position:absolute; inset:0; backdrop-filter:blur(2px); }
.okna-ap-modal__box{ position:relative; width:100%; box-shadow:0 24px 70px rgba(11,22,44,.35); max-height:92vh; overflow:auto; transform:translateY(8px); transition:transform .2s ease; }
.okna-ap-modal.is-open .okna-ap-modal__box{ transform:none; }
.okna-ap-modal__x{ position:absolute; top:14px; right:14px; transition:background .18s ease, color .18s ease, transform .12s ease; }
.okna-ap-modal__x:active{ transform:translateY(1px); }
.okna-ap-modal__title{ margin:0 44px 6px 0; line-height:1.2; }
.okna-ap-modal__sub{ margin:0 0 14px; }
.okna-ap-modal .okna-apf-f{ margin:0 0 10px; }
.okna-ap-modal .okna-apf-f label{ display:block; font-weight:600; font-size:13px; margin:0 0 4px; }
.okna-ap-modal .okna-apf-f .okna-req{ color:var(--red,#e0223a); }
.okna-ap-modal .okna-apf-f input{ width:100%; }
.okna-ap-modal .okna-apf-actions{ margin:4px 0 0; }
.okna-ap-modal .okna-ap-submit{ width:100%; }

/* 8.2. Тизер «О компании» */
.okna-abt-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .2s ease; }
.okna-abt-modal.is-open{ opacity:1; }
.okna-abt-modal[hidden]{ display:none; }
.okna-abt-modal__ov{ position:absolute; inset:0; backdrop-filter:blur(2px); }
.okna-abt-modal__box{ position:relative; width:100%; box-shadow:0 24px 70px rgba(11,22,44,.35); max-height:92vh; overflow:auto; transform:translateY(8px); transition:transform .2s ease; }
.okna-abt-modal.is-open .okna-abt-modal__box{ transform:none; }
.okna-abt-modal__x{ position:absolute; top:14px; right:14px; transition:background .18s ease, color .18s ease, transform .12s ease; }
.okna-abt-modal__x:active{ transform:translateY(1px); }
.okna-abt-modal__title{ margin:0 44px 6px 0; line-height:1.2; }
.okna-abt-modal__sub{ margin:0 0 14px; }
.okna-abt-modal .okna-abtf-f{ margin:0 0 10px; }
.okna-abt-modal .okna-abtf-f label{ display:block; font-weight:600; font-size:13px; margin:0 0 4px; }
.okna-abt-modal .okna-abtf-f .okna-req{ color:var(--red,#e0223a); }
.okna-abt-modal .okna-abtf-f input{ width:100%; }
.okna-abt-modal .okna-abtf-actions{ margin:4px 0 0; }
.okna-abt-modal .okna-abt-submit{ width:100%; }

/* 8.3. «О компании» */
.okna-about-modal{ position:fixed; inset:0; z-index:100000; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .2s ease; }
.okna-about-modal.is-open{ opacity:1; }
.okna-about-modal[hidden]{ display:none; }
.okna-about-modal__ov{ position:absolute; inset:0; backdrop-filter:blur(2px); }
.okna-about-modal__box{ position:relative; width:100%; box-shadow:0 24px 70px rgba(11,22,44,.35); max-height:92vh; overflow:auto; transform:translateY(8px); transition:transform .2s ease; }
.okna-about-modal.is-open .okna-about-modal__box{ transform:none; }
.okna-about-modal__x{ position:absolute; top:14px; right:14px; transition:background .18s ease, color .18s ease, transform .12s ease; }
.okna-about-modal__x:active{ transform:translateY(1px); }
.okna-about-modal__title{ margin:0 44px 6px 0; line-height:1.2; }
.okna-about-modal__sub{ margin:0 0 14px; }
.okna-about-modal .okna-abf-f{ margin:0 0 10px; }
.okna-about-modal .okna-abf-f label{ display:block; font-weight:600; font-size:13px; margin:0 0 4px; }
.okna-about-modal .okna-abf-f .okna-req{ color:var(--red,#e0223a); }
.okna-about-modal .okna-abf-f input{ width:100%; }
.okna-about-modal .okna-abf-actions{ margin:4px 0 0; }
.okna-about-modal .okna-about-submit{ width:100%; }

/* ── 9. МОБИЛЬНЫЕ ПОПАПЫ — ПО ЦЕНТРУ ЭКРАНА ──────────────────────────────
   ★ 2026-08-05 · РЕШЕНИЕ ВЛАДЕЛЬЦА. Раньше базовый .okna-modal (заказ/фото/подбор/
   picker/hero) держал коробку `margin:8vh auto 0` (прицеп к верху), а city-modal —
   bottom-sheet. Теперь все попапы на мобиле открываются ЦЕНТРОМ экрана.

   База `.okna-modal` — display:block из glavnaya.css; на мобиле переводим в flex
   с центрированием. Оверлей absolute inset:0 не мешает: коробка relative, z-index
   выше через поток (коробка идёт после оверлея в DOM).

   Не трогаем те попапы, что уже центрированы: .okna-hdr-modal, .okna-ap-modal,
   .okna-abt-modal, .okna-about-modal (flex center в §7/§8), .okna-org-*-modal
   (grid place-items), .okna-lb/.okna-case-modal (flex center). */
@media (max-width:600px){
  .okna-modal.is-open{ display:flex; align-items:center; justify-content:center; padding:16px; }
  .okna-modal__box{ margin:auto; max-height:92vh; }
}