/* Монро Арт · поп-ап заявки и финальный блок главной (правки заказчика 01.10, п. 4, 5).
   Разметка — inc/v2-lead.php (окно в wp_footer, форма monro_v2_lead_form, блок
   monro_v2_lead_final), скрипт — assets/js/lead-modal.js. Подключается на всех
   страницах (inc/assets.php). Поля, флажок, кнопки — общие правила v2.css
   (.field, .agree, .btn); здесь только окно, «Прикрепить фото», мессенджеры под
   кнопкой и финальный блок. Все значения — токены DESIGN.md.
   Телефон — база: окно — нижний лист во всю ширину, над клавиатурой
   (--lm-kb и --lm-vh ставит скрипт по visualViewport) и над полосой «домой»
   (safe-area). От 600 px — карточка по центру. Движение — opacity и transform. */

.v2{--lead-w:448px;
  /* Финальный блок (#zayavka, DESIGN §2 «Вуаль финального блока», 13.10 — из чисел в токены): высота кадра-полосы
     до 900 px, минимальная высота блока от 900 px и вуаль — только --ink с прозрачностью. До 900 px вуаль снизу
     (кадр уходит в --ink под заголовком), от 900 px — слева, мягче, чем у первого экрана (12.10: «приглуши»), плюс
     общая --ink 14 %: белая карточка не сливается со светлой правой частью кадра. */
  --fin-bg-h:min(118vw,560px); --fin-min:min(100svh,720px);
  --veil-fin:linear-gradient(0deg,var(--ink) 0,color-mix(in srgb,var(--ink) 84%,transparent) var(--s-6),transparent 42%)}
@media (min-width:900px){.v2{
  --veil-fin:linear-gradient(90deg,color-mix(in srgb,var(--ink) 74%,transparent) 0,color-mix(in srgb,var(--ink) 62%,transparent) var(--veil-edge),
      color-mix(in srgb,var(--ink) 30%,transparent) calc(var(--veil-edge) + 12%),transparent calc(var(--veil-edge) + 30%)),
    color-mix(in srgb,var(--ink) 14%,transparent)}}

/* Фон под окном не прокручивается; место полосы прокрутки держим — страница не дёргается вбок. */
html.lm-open{overflow:hidden;scrollbar-gutter:stable}

/* ── Окно ─────────────────────────────────────────────────────────── */
.v2 .lm{position:fixed;inset:auto 0 0;width:100%;max-width:none;height:fit-content;max-height:calc(var(--lm-vh,100dvh) - var(--s-5));margin:0;padding:0;border:0;
  border-radius:var(--r-panel) var(--r-panel) 0 0;background:var(--paper);color:var(--ink);box-shadow:var(--shadow);
  flex-direction:column;overflow:hidden;
  translate:0 calc(var(--lm-kb,0px) * -1);
  opacity:0;transform:translateY(var(--s-5));transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.v2 .lm[open]{display:flex}
.v2 .lm:not([open]){display:none}
.v2 .lm.is-on{opacity:1;transform:none}
.v2 .lm::backdrop{background:color-mix(in srgb,var(--ink) 64%,transparent)}
.v2 .lm__sheet{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-3);min-height:0;padding:var(--s-4) var(--gut) calc(var(--s-4) + env(safe-area-inset-bottom));
  overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin}
.v2 .lm__x{position:absolute;top:var(--s-2);right:var(--s-2);z-index:1;display:grid;place-items:center;width:var(--tap);height:var(--tap);border-radius:var(--r-chip);
  background:var(--linen);color:var(--ink);transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease)}
.v2 .lm__x:hover{background:var(--ink);color:var(--card)}
.v2 .lm__x span{position:relative;width:var(--ico);height:var(--ico)}
.v2 .lm__x span::before,.v2 .lm__x span::after{content:'';position:absolute;left:0;top:calc(50% - var(--line) / 2);width:100%;height:var(--line);border-radius:var(--r-chip);background:currentColor;transform:rotate(45deg)}
.v2 .lm__x span::after{transform:rotate(-45deg)}
.v2 .lm__head{display:grid;gap:var(--s-1);padding-right:calc(var(--tap) + var(--s-1))}
.v2 .lm__t{font:500 var(--t-h3)/1.2 var(--f-d);letter-spacing:-.01em;text-wrap:balance}
.v2 .lm__d{font-size:var(--t-s);color:var(--ink-2);text-wrap:pretty}
.v2 .lm__pick{margin-top:var(--s-1);padding:var(--s-1) var(--s-2);border-radius:var(--r-btn);background:var(--linen);font-size:var(--t-s);color:var(--ink-2)}
.v2 .lm__pick b{font-weight:600;color:var(--ink)}
/* Заявка принята (v2.js заменяет содержимое формы): строка успеха крупно, как в других заявках. */
.v2 .lm .lead-form__done:focus{outline:none}

@media (min-width:600px){
  .v2 .lm{inset:0;width:min(100% - 2 * var(--gut),var(--lead-w));max-height:calc(100dvh - 2 * var(--s-5));margin:auto;border-radius:var(--r-panel);
    translate:none;transform:translateY(var(--s-3)) scale(.98)}
  .v2 .lm.is-on{transform:none}
  .v2 .lm__sheet{padding:var(--s-5)}
  .v2 .lm__x{top:var(--s-3);right:var(--s-3)}
}
/* Невысокий экран ноутбука (1440×800 и ниже, CLAUDE.md §3: окно целиком без прокрутки): поля окна и зазор до краёв экрана
   на шаг меньше — --s-4 вместо --s-5; окно из калькулятора («Ваш выбор») помещается целиком. */
@media (min-width:600px) and (max-height:820px){
  .v2 .lm{max-height:calc(100dvh - 2 * var(--s-4))}
  .v2 .lm__sheet{padding-block:var(--s-4)}
}
/* Без сдвига и масштаба: окно только проявляется (--dur), см. общее правило reduced-motion в v2.css. */
@media (prefers-reduced-motion:reduce){.v2 .lm,.v2 .lm.is-on{transform:none}}

/* ── Короткая форма: «Прикрепить фото», три согласия, мессенджеры ─── */
/* «Прикрепить фото» — маленькая пилюля на льне, не поле: снимок необязателен. Поле файла
   прозрачным слоем поверх пилюли — нажатие открывает камеру или галерею. После выбора —
   миниатюра и имя файла (v2.js), пояснение уходит. */
.v2 .lf-att{position:relative;display:inline-flex;flex-wrap:wrap;align-items:center;gap:0 var(--s-2);justify-self:start;max-width:100%;min-height:var(--tap);padding:0 var(--s-3) 0 var(--s-2);
  border-radius:var(--r-chip);background:var(--linen);font:600 var(--t-s)/1.2 var(--f-b);color:var(--ink);cursor:pointer;transition:background-color var(--dur) var(--ease)}
.v2 .lf-att:hover,.v2 .lf-att.is-over{background:color-mix(in srgb,var(--ink) 8%,var(--linen))}
.v2 .lf-att:focus-within{outline:var(--focus-w) solid var(--acc);outline-offset:var(--focus-off)}
.v2 .lf-att__in{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.v2 .lf-att__pick{display:inline-flex;align-items:center;gap:var(--s-1);white-space:nowrap}
.v2 .lf-att__pick svg{color:var(--acc)}
.v2 .lf-att__note{display:none;font-weight:400;color:var(--ink-2);white-space:nowrap}
/* «необязательно» — с 360 px: на 320 пилюля с ним шире колонки формы. */
@media (min-width:360px){.v2 .lf-att__note{display:inline}}
.v2 .lf-att__name{display:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:400;color:var(--ink-2)}
.v2 .lf-att__img{width:calc(var(--tap) - var(--s-1));height:calc(var(--tap) - var(--s-1));border-radius:var(--r-btn);object-fit:cover}
.v2 .lf-att.has-file{flex-wrap:nowrap;padding-left:var(--s-0)}
.v2 .lf-att.has-file .lf-att__pick svg,.v2 .lf-att.has-file .lf-att__note{display:none}
.v2 .lf-att.has-file .lf-att__name{display:block}
.v2 .lf__msgr{display:flex;flex-wrap:wrap;align-items:center;column-gap:var(--s-2);margin-top:calc(var(--s-1) - var(--s-3));font-size:var(--t-s);color:var(--ink-2)}
.v2 .lf__msgr a{position:relative;display:inline-flex;align-items:center;min-height:var(--tap);font-weight:600;color:var(--acc);text-decoration:underline;text-underline-offset:var(--ul-off)}
/* Короткая ссылка («MAX», 30 px) при касании — невидимая цель не уже --tap: псевдоэлемент шире ссылки поровну
   с обеих сторон, вид строки прежний (аудит 13.10, CLAUDE.md §3). На мыши — обычный размер. */
.v2 .lf__msgr a::after{content:'';position:absolute;inset:0 min(0px,(100% - var(--tap)) / 2)}
@media (hover:hover) and (pointer:fine){.v2 .lf__msgr a::after{content:none}}
.v2 .lf__msgr a:hover{color:var(--acc-ink)}
/* Ссылки мессенджеров — одной группой: не рвутся по одной (на 375 px «MAX» уходил на свою строку). */
.v2 .lf__msgr-in{display:inline-flex;flex-wrap:nowrap;column-gap:var(--s-2)}
/* Три согласия (R1) — строки как во всех формах сайта (v2.css .agree, .agree__row с полями --s-1):
   цели ссылок соседних согласий не ближе 8 px и при переносе текста на две строки. От цели
   ссылки последнего согласия до кнопки — не меньше --s-1 (правило 8 px): под согласиями ещё --s-1.
   Мессенджеры сразу под кнопкой: отрицательный отступ оставляет от кнопки до их целей --s-1. */
.v2 .lf .agree{gap:var(--s-1);margin-bottom:var(--s-1)}
.v2 .lf .agree__row{padding-block:0;align-items:center}
.v2 .lf .agree__txt{text-wrap:pretty}
.v2 .lf .agree__row a{display:inline;padding-block:calc((var(--tap) - 1lh) / 2);margin-block:0}
/* Мышь и тачпад: те же плотные строки, что во всех формах (v2.css, --check-d 18 px), флажок по первой строке. */
@media (hover:hover) and (pointer:fine){
  .v2 .lf .agree{gap:var(--s-2);margin-bottom:var(--s-2)}
  .v2 .lf .agree__row{align-items:start}
  .v2 .lf .agree__row a{padding-block:0}
}

/* ── Финальный блок главной «Пришлите фотографию» (#zayavka) ───────
   Правка заказчика 12.10: как первый экран — фоновое фото (клиент отправляет снимок с телефона),
   тёмная вуаль со стороны текста, текст светлый (--card / --on-photo-2), белая карточка формы.
   Телефон: свой вертикальный кадр полосой сверху (телефон в руке — в верхней половине), снизу
   кадр уходит в --ink, заголовок заходит на кадр на --s-6, под ним карточка — как первый экран.
   От 900 px: кадр во весь блок, текст слева, карточка формы у правого края сетки (12.10: «как первый экран»). */
.v2 .lead-fin{position:relative;isolation:isolate;padding-block:0 var(--band);background:var(--ink);color:var(--card)}
.v2 .lead-fin__bg{display:block;position:relative;height:var(--fin-bg-h);overflow:hidden}
.v2 .lead-fin__bg img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 28%}
.v2 .lead-fin__bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:var(--veil-fin)}
.v2 .lead-fin__in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s-4);margin-top:calc(var(--s-6) * -1)}
.v2 .lead-fin__say{display:grid;gap:var(--s-2)}
.v2 .lead-fin__lead{max-width:var(--measure);font-size:var(--t-lead);line-height:1.55;color:var(--on-photo-2)}
.v2 .lead-fin__call{max-width:var(--measure);font-size:var(--t-s);color:var(--on-photo-2)}
.v2 .lead-fin__call a{display:inline-block;padding-block:calc((var(--tap) - 1lh) / 2);margin-block:calc((1lh - var(--tap)) / 2);font-weight:600;color:var(--card);
  text-decoration:underline;text-underline-offset:var(--ul-off);white-space:nowrap}
.v2 .lead-fin__card{width:100%;min-width:0;max-width:var(--lead-w);padding:var(--s-4) var(--s-3);border-radius:var(--r-panel);background:var(--card);color:var(--ink)}
@media (min-width:600px){
  .v2 .lead-fin__card{padding:var(--s-5) var(--s-4)}
}
/* Планшет (600–899): кадр-полоса сверху, как на телефоне, а под ним текст и карточка формы рядом, по центру высоты
   друг друга (аудит 13.10: карточка --lead-w слева, правая треть блока пустовала; форму на всю ширину по центру
   не ставим — правило заказчика). Карточке колонка шире (6fr): строки согласий не дробятся. Под кадром ряд
   начинается с --s-4 (карточка не наезжает на кадр, как заголовок на телефоне). */
@media (min-width:600px) and (max-width:899px){
  .v2 .lead-fin__in{grid-template-columns:minmax(0,5fr) minmax(0,6fr);column-gap:var(--s-4);align-items:center;margin-top:var(--s-4)}
  .v2 .lead-fin__card{justify-self:end}
}
@media (min-width:900px){
  /* Как первый экран: текст слева (колонка --hero-col), карточка формы справа; вуаль слева — та же
     раскладка, что --veil-side первого экрана, чуть мягче (12.10: «приглуши не так сильно»), плюс лёгкая
     общая --ink 14 %, чтобы белая карточка не сливалась со светлой правой частью кадра. */
  .v2 .lead-fin{display:grid;align-items:center;min-height:var(--fin-min);padding-block:var(--band)}
  .v2 .lead-fin__bg{position:absolute;inset:0;height:auto;z-index:-1}
  .v2 .lead-fin__bg img{object-position:50% 40%}
  .v2 .lead-fin__in{width:100%;margin-top:0;grid-template-columns:minmax(0,1fr) minmax(0,var(--lead-w));column-gap:var(--col-gap);align-items:center}
  .v2 .lead-fin__say{max-width:var(--hero-col)}
  .v2 .lead-fin__card{justify-self:end;box-shadow:var(--shadow)}
}

/* ── Действия блоков кнопками (правка 01.10, п. 12) ──────────────────
   «Рассчитать с этим размером» и «Рассчитать с этим уровнем» были ссылками и терялись.
   Телефон: кнопка во всю ширину колонки; от 600 px — по содержимому, слева. */
.v2 .size__price .size__go{margin-top:var(--s-2)}
@media (min-width:600px){
  .v2 .size__go,.v2 .tiers__go,.v2 .when__go{justify-self:start}
}
/* Цена услуги (#cena): «Узнать цену по фото» и вторичная «Рассчитать точно» — ровным рядом
   или, если в карточке тесно, друг под другом во всю ширину (а не лесенкой разной ширины). */
@media (min-width:600px){
  .v2 .sprice__go .btn{flex:1 1 auto}
}