/* ============================================================
   VP-CALC — калькуляторы-лидогенераторы viperstroy.com  ·  MOBILE FIRST
   Дополнение к viperstroy-ui.css. Подключать ПОСЛЕ него.
   Правила те же: тап ≥44px, поля ровно 16px (iOS не зумит),
   базовая раскладка — одна колонка.
   ============================================================ */

/* все поля внутри калькулятора — 16px, иначе iOS Safari зумит при фокусе */
.vpc input,.vpc select,.vpc textarea{font-size:16px}

.vpc{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.vpc *{box-sizing:border-box}

/* ---------- прогресс ---------- */
.vpc-progress{display:flex;background:var(--bg-soft);border-bottom:1px solid var(--line)}
.vpc-progress li{flex:1;list-style:none;padding:11px 4px;text-align:center;font-size:12px;font-weight:700;
  color:var(--muted);position:relative;transition:.2s;min-height:44px;display:flex;
  align-items:center;justify-content:center;gap:6px}
.vpc-progress li span{display:none}
.vpc-progress li b{display:inline-grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--line);color:#fff;font-size:12px;margin-right:7px;vertical-align:middle}
.vpc-progress li.on{color:var(--brand);background:#fff}
.vpc-progress li.on b{background:var(--brand)}
.vpc-progress li.done{color:var(--ok)}
.vpc-progress li.done b{background:var(--ok)}
.vpc-progress li.done b::after{content:"✓"}
.vpc-progress li.done span{opacity:.75}

/* ---------- шаги ---------- */
.vpc-body{padding:26px 28px}
.vpc-step{display:none;animation:vpcIn .22s ease}
.vpc-step.on{display:block}
@keyframes vpcIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.vpc-q{margin-bottom:22px}
.vpc-q>label,.vpc-qlabel{display:block;font-size:16px;font-weight:700;margin-bottom:4px}
.vpc-hint{font-size:13.5px;color:var(--muted);margin-bottom:11px}

/* поля */
.vpc-num{display:flex;align-items:stretch;width:100%;max-width:320px;min-height:52px;
  border:1.5px solid var(--line);border-radius:var(--r-s);overflow:hidden;background:#fff}
.vpc-num input{flex:1;border:none;padding:13px 14px;font-size:19px;font-weight:700;font-family:inherit;
  color:var(--ink);width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.vpc-num input::-webkit-outer-spin-button,.vpc-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.vpc-num input:focus{outline:none}
.vpc-num:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px rgba(194,65,12,.1)}
.vpc-num .u{display:grid;place-items:center;padding:0 15px;background:var(--bg-soft);border-left:1px solid var(--line);
  font-size:14px;font-weight:700;color:var(--muted);white-space:nowrap}
.vpc-inline{display:flex;gap:14px;flex-wrap:wrap}
.vpc-inline>div{flex:1;min-width:150px}

/* карточки выбора */
.vpc-cards{display:grid;gap:10px;grid-template-columns:1fr}
@media (min-width:560px){.vpc-cards{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}
.vpc-card{position:relative;border:1.5px solid var(--line);border-radius:var(--r-s);padding:14px 44px 14px 16px;
  cursor:pointer;transition:border-color .16s,background .16s,transform .16s;background:#fff;
  min-height:56px;display:flex;flex-direction:column;justify-content:center;touch-action:manipulation}
@media (hover:hover){.vpc-card:hover{border-color:var(--line-2);transform:translateY(-2px)}}
.vpc-card input{position:absolute;opacity:0;pointer-events:none}
.vpc-card .t{font-weight:700;font-size:15.5px;display:block;margin-bottom:3px}
.vpc-card .d{font-size:13px;color:var(--muted);line-height:1.45;display:block}
.vpc-card .p{font-size:13px;font-weight:800;color:var(--ok);margin-top:7px;display:block}
.vpc-card:has(input:checked){border-color:var(--brand);background:var(--brand-l);box-shadow:0 0 0 3px rgba(194,65,12,.09)}
.vpc-card:has(input:checked) .t{color:var(--brand-d)}
.vpc-card:has(input:checked)::after{content:"✓";position:absolute;top:10px;right:12px;width:20px;height:20px;
  border-radius:50%;background:var(--brand);color:#fff;font-size:12px;display:grid;place-items:center;font-weight:800}

/* компактные пилюли */
.vpc-pills{display:flex;gap:8px;flex-wrap:wrap}
.vpc-pill{position:relative;display:inline-flex;align-items:center;min-height:44px;
  border:1.5px solid var(--line);border-radius:30px;padding:10px 18px;cursor:pointer;
  font-size:15px;font-weight:600;transition:border-color .16s,background .16s;background:#fff;
  touch-action:manipulation}
.vpc-pill input{position:absolute;opacity:0;pointer-events:none}
.vpc-pill:hover{border-color:var(--line-2)}
.vpc-pill:has(input:checked){border-color:var(--brand);background:var(--brand);color:#fff}

/* чекбоксы-допы */
.vpc-checks{display:grid;gap:9px}
.vpc-check{display:flex;gap:12px;align-items:flex-start;border:1.5px solid var(--line);border-radius:var(--r-s);
  padding:14px 15px;cursor:pointer;transition:border-color .16s,background .16s;background:#fff;
  min-height:56px;touch-action:manipulation;flex-wrap:wrap}
@media (hover:hover){.vpc-check:hover{border-color:var(--line-2)}}
.vpc-check input{width:24px;height:24px;margin-top:1px;accent-color:var(--brand);flex:none}
.vpc-check:has(input:checked){border-color:var(--brand);background:var(--brand-l)}
.vpc-check .t{font-weight:700;font-size:15px;display:block}
.vpc-check .d{font-size:13px;color:var(--muted);display:block}
.vpc-check .p{margin-left:36px;font-weight:800;font-size:13.5px;color:var(--ok);white-space:nowrap}
@media (min-width:560px){.vpc-check .p{margin-left:auto;padding-left:10px}}

/* навигация */
.vpc-nav{display:grid;gap:10px;padding:16px 18px;border-top:1px solid var(--line);background:var(--bg-soft)}
.vpc-nav .sp{display:none}
.vpc-nav .btn{width:100%}
.vpc-nav .btn-primary{order:-1}          /* главное действие первым — большим пальцем ближе */
@media (min-width:560px){
  .vpc-nav{display:flex;gap:11px;justify-content:space-between;align-items:center;padding:18px 28px;flex-wrap:wrap}
  .vpc-nav .sp{display:block;flex:1}
  .vpc-nav .btn{width:auto}
  .vpc-nav .btn-primary{order:0}
}
.vpc-err{color:var(--bad);font-size:13.5px;font-weight:600;display:none}
.vpc-err.on{display:block}

/* ---------- результат ---------- */
.vpc-result{background:linear-gradient(150deg,#12212E,#23415A);color:#fff;padding:30px 28px;text-align:center}
.vpc-result .lbl{font-size:13px;letter-spacing:.11em;text-transform:uppercase;color:#9FB6C7;font-weight:700}
.vpc-sum{font-size:clamp(28px,9vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.1;margin:8px 0 3px;
  overflow-wrap:anywhere}
.vpc-sum .cur{color:var(--accent)}
.vpc-bgn{font-size:15px;color:#A9BECD}
.vpc-meta{display:grid;grid-template-columns:1fr;gap:10px;margin-top:18px}
@media (min-width:480px){.vpc-meta{grid-template-columns:repeat(3,1fr)}}
.vpc-meta div{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--r-s);
  padding:10px 14px}
.vpc-meta b{display:block;font-size:19px;color:var(--accent)}
.vpc-meta span{font-size:12.5px;color:#B9CAD6}

/* разбивка */
.vpc-break{padding:22px 28px;border-bottom:1px solid var(--line)}
.vpc-break h4{font-size:15px;margin-bottom:12px}
.vpc-break ul{list-style:none}
.vpc-break li{display:flex;justify-content:space-between;gap:10px;padding:10px 0;
  border-bottom:1px dashed var(--line);font-size:14.5px;flex-wrap:wrap}
.vpc-break li:last-child{border-bottom:none;font-weight:800;border-top:2px solid var(--ink);margin-top:5px;padding-top:11px}
.vpc-break li b{white-space:nowrap}
.vpc-break li span:first-child{color:var(--ink-2)}

/* ---------- лид-форма ---------- */
.vpc-lead{padding:26px 28px;background:var(--accent-l);border-top:3px solid var(--accent)}
.vpc-lead h3{font-size:21px;margin-bottom:5px}
.vpc-lead .sub{font-size:14.5px;color:var(--ink-2);margin-bottom:16px}
.vpc-lead-grid{display:grid;grid-template-columns:1fr;gap:10px;margin-bottom:13px}
@media (min-width:640px){.vpc-lead-grid{grid-template-columns:repeat(3,1fr)}}
.vpc-lead input,.vpc-lead select{width:100%;min-height:52px;padding:13px 14px;
  border:1.5px solid #E6D3A6;border-radius:var(--r-s);
  font-size:16px;font-family:inherit;background:#fff;-webkit-appearance:none;appearance:none}
.vpc-lead input:focus,.vpc-lead select:focus{outline:none;border-color:var(--brand)}
.vpc-lead input.bad{border-color:var(--bad);background:#FFF7F7}
.vpc-gain{display:grid;gap:7px;margin-bottom:15px}
.vpc-gain li{list-style:none;font-size:14px;padding-left:25px;position:relative;color:var(--ink-2)}
.vpc-gain li::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:800}
.vpc-micro{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px;padding-top:14px;border-top:1px solid #E6D3A6}
.vpc-micro{display:grid;grid-template-columns:1fr 1fr;gap:8px}
@media (min-width:560px){.vpc-micro{display:flex;gap:9px;flex-wrap:wrap}}
.vpc-micro a{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  min-height:44px;padding:10px 15px;border-radius:30px;font-size:13.5px;font-weight:700;
  touch-action:manipulation}
.vpc-micro a.s-viber,.vpc-micro a.s-wa,.vpc-micro a.s-tg,.vpc-micro a.btn-dark{color:#fff}
.vpc-micro a.btn-ghost{color:var(--ink);background:#fff;border:1.5px solid #E6D3A6}
.vpc-micro a.btn-ghost:hover{border-color:var(--brand);color:var(--brand)}
.vpc-micro a:hover{text-decoration:none;filter:brightness(1.08)}
.vpc-social{font-size:13px;color:var(--muted);margin-top:12px;display:flex;align-items:center;gap:8px}
.vpc-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none;animation:vpcPulse 1.8s infinite}
@keyframes vpcPulse{0%,100%{opacity:1}50%{opacity:.35}}

/* успех */
.vpc-done{padding:44px 28px;text-align:center;display:none}
.vpc-done.on{display:block}
.vpc-done .ico{width:66px;height:66px;border-radius:50%;background:var(--ok-l);color:var(--ok);font-size:32px;
  display:grid;place-items:center;margin:0 auto 16px}

/* дисклеймер */
.vpc-note{padding:15px 28px;font-size:13px;color:var(--muted);background:var(--bg-soft);border-top:1px solid var(--line)}

/* липкая полоса с результатом */
.vpc-sticky{position:fixed;left:0;right:0;bottom:0;z-index:90;background:var(--bg-dark);color:#fff;
  padding:10px var(--pad-x) calc(10px + env(safe-area-inset-bottom,0px));
  display:none;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  box-shadow:0 -6px 22px rgba(18,33,46,.28);font-size:14px}
.vpc-sticky .btn{flex:none}
.vpc-sticky.on{display:flex}
.vpc-sticky b{color:var(--accent);font-size:19px}
.vpc-sticky .btn{padding:10px 20px;font-size:15px}

/* базовые отступы — мобильные, на широких экранах увеличиваем */
.vpc-body,.vpc-lead,.vpc-break,.vpc-result{padding-left:18px;padding-right:18px}
@media (min-width:560px){
  .vpc-body,.vpc-lead,.vpc-break,.vpc-result{padding-left:28px;padding-right:28px}
  .vpc-progress li span{display:inline}
  .vpc-progress li{font-size:13px;padding:13px 10px}
}
/* липкая панель калькулятора не должна перекрывать нижнюю CTA-панель сайта */
@media (max-width:1023px){ .vpc-sticky.on ~ .sticky-cta,.sticky-cta:has(~ .vpc-sticky.on){display:none} }

/* ============================================================
   >>> ПАТЧ ВИЗУАЛЬНОГО СЛОЯ · vp-calc
   Ниже — только визуальные правки: токены, типографика, спейсинг,
   состояния, композиция внутри блоков. Имена классов и DOM не тронуты.
   Чтобы откатиться — удалите всё от этой строки до конца файла.
   ============================================================ */
/* ============================================================
   VP-CALC · ПАТЧ ВИЗУАЛЬНОГО СЛОЯ
   Подключать ПОСЛЕ vp-calc.css. Классы и разметку JS-движка
   не трогаем: только тон, типографика, спейсинг, состояния.
   Пункт 4 брифа: усилить момент результата, шаги перестают
   выглядеть анкетой.
   ============================================================ */

/* ---------- ШАГИ: разговор, а не анкета ---------- */

/* прогресс — тонкая полоса с активным шагом, а не ряд табов */
.vpc-progress{background:#fff;border-bottom:1px solid var(--line)}
.vpc-progress li{
  padding:12px 6px;border-bottom:3px solid transparent;background:none;
  font-size:12.5px;font-weight:700;color:var(--muted)
}
.vpc-progress li b{
  width:20px;height:20px;font-size:11px;margin-right:7px;
  background:var(--bg-soft);color:var(--muted);border:1px solid var(--line-2)
}
.vpc-progress li.on{color:var(--brand-d);background:none;border-bottom-color:var(--brand)}
.vpc-progress li.on b{background:var(--brand);border-color:var(--brand);color:#fff}
.vpc-progress li.done{color:var(--ink-2)}
.vpc-progress li.done b{background:var(--ok);border-color:var(--ok);color:#fff}

/* вопрос звучит как вопрос мастера на объекте, а не как подпись поля */
.vpc-body{padding-top:22px}
.vpc-q{margin-bottom:26px}
.vpc-q>label,.vpc-qlabel{
  font-size:20px;line-height:1.25;font-weight:800;letter-spacing:-.02em;margin-bottom:5px
}
.vpc-hint{font-size:13.5px;max-width:54ch;line-height:1.5}

/* число вводится крупно: это главный параметр сметы */
.vpc-num{min-height:56px;border-color:var(--line-2)}
.vpc-num input{font-size:21px;font-variant-numeric:tabular-nums}
.vpc-num .u{font-family:var(--mono);font-size:13px;background:var(--paper,#FCFBF6);
  border-left:1px solid var(--line-2);color:var(--ink-2)}

/* карточки выбора: плотнее к материалу, цена — как строка в смете */
.vpc-card{
  border-radius:12px;padding:15px 46px 15px 16px;
  background:linear-gradient(#fff,#FCFCFA);box-shadow:0 1px 0 rgba(18,33,46,.05)
}
.vpc-card .t{font-size:16.5px;letter-spacing:-.012em}
.vpc-card .d{font-size:13px}
.vpc-card .p{
  font-family:var(--mono);font-size:12px;font-weight:700;color:var(--brand-d);
  background:var(--paper,#FCFBF6);border:1px solid var(--paper-line,#E3DCC9);
  border-radius:4px;padding:3px 8px;display:inline-block;
  font-variant-numeric:tabular-nums;align-self:flex-start
}
.vpc-card:has(input:checked){
  box-shadow:0 0 0 3px rgba(194,65,12,.12),0 8px 20px rgba(194,65,12,.14)
}
.vpc-card:has(input:checked)::after{box-shadow:0 2px 6px rgba(194,65,12,.4)}

.vpc-pill{font-weight:700}
.vpc-pill:has(input:checked){box-shadow:0 4px 14px rgba(194,65,12,.22)}

.vpc-check .p{
  font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--brand-d)
}

/* ---------- РЕЗУЛЬТАТ: выдача сметы, а не всплывшая цифра ---------- */
.vpc-result{
  background:
    radial-gradient(120% 100% at 50% -30%,rgba(245,158,11,.22),transparent 62%),
    linear-gradient(155deg,#0E1C27 0%,#1B3346 55%,#22405A 100%);
  border-top:4px solid var(--accent);
  padding-block:24px 22px;text-align:left
}
.vpc-result .lbl{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;
  display:flex;align-items:center;gap:10px
}
.vpc-result .lbl::after{                 /* линейка бланка вместо центрирования */
  content:"";height:1px;flex:1;
  background:linear-gradient(90deg,rgba(255,255,255,.3),rgba(255,255,255,0))
}
.vpc-sum{
  font-size:clamp(34px,10.5vw,58px);font-variant-numeric:tabular-nums;
  letter-spacing:-.035em;margin:12px 0 2px;text-shadow:0 2px 0 rgba(0,0,0,.2)
}
.vpc-bgn{
  font-family:var(--mono);font-size:13px;color:#AFC2D0;
  border-top:1px dashed rgba(255,255,255,.22);margin-top:14px;padding-top:11px
}
/* три показателя рядом с суммой — строки сметы, а не плитки */
.vpc-meta{gap:8px;margin-top:16px}
.vpc-meta div{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.13);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:11px 14px
}
.vpc-meta b{display:inline;font-size:17px;font-variant-numeric:tabular-nums;order:2}
.vpc-meta span{font-family:var(--mono);font-size:11.5px;letter-spacing:.04em}

/* разбивка = КСС по позициям: выноски точками, итог двойной линией */
.vpc-break{background:var(--paper,#FCFBF6);border-top:3px solid var(--brand)}
.vpc-break h4{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin-bottom:14px
}
.vpc-break li{
  border-bottom:1px dotted var(--paper-line,#E3DCC9);
  font-variant-numeric:tabular-nums;padding:11px 0
}
.vpc-break li span:first-child{color:var(--paper-ink,#2B2418)}
.vpc-break li b{font-family:var(--mono);font-size:14px}
.vpc-break li:last-child{
  border-top:2.5px double var(--ink);border-bottom:none;font-size:16px;padding-top:12px
}
.vpc-break li:last-child b{font-family:inherit;font-size:18px;letter-spacing:-.02em}

/* ---------- ЛИД-ФОРМА: заявка на точную КСС ---------- */
.vpc-lead{
  background:var(--paper,#FCFBF6);border-top:3px solid var(--brand)
}
.vpc-lead h3{letter-spacing:-.022em}
.vpc-lead .sub{max-width:56ch}
.vpc-lead input,.vpc-lead select{border-color:#DFD7C4}
.vpc-lead input:focus,.vpc-lead select:focus{box-shadow:0 0 0 3px rgba(194,65,12,.12)}
.vpc-gain li{padding-left:26px}
.vpc-gain li::before{content:"\25B8";color:var(--brand);font-weight:700}
.vpc-micro{padding-top:14px;border-top:1px solid var(--paper-line,#E3DCC9)}
.vpc-micro a.btn-ghost{border-color:#DFD7C4}

/* липкая полоса результата: цифра табличная, чтобы не дёргалась при пересчёте */
.vpc-sticky b{font-variant-numeric:tabular-nums}

/* дисклеймер — реквизит документа */
.vpc-note{font-family:var(--mono);font-size:12px;line-height:1.6}

/* успех */
.vpc-done .ico{border:1.5px solid #BFE3D3;box-shadow:1.5px 1.5px 0 rgba(15,138,95,.25)}