/* Плавающий виджет: кнопка «наверх» + обратный звонок.
   Палитра берётся из :root в base.html (--acc/--acc2/--dark/--tx). */

.wbc{position:fixed;right:18px;bottom:18px;z-index:950;
     display:flex;flex-direction:column;align-items:center;gap:12px}

.wbc__btn{position:relative;width:54px;height:54px;border:0;border-radius:50%;
          display:flex;align-items:center;justify-content:center;cursor:pointer;
          padding:0;transition:transform .18s,box-shadow .18s,opacity .2s,visibility .2s}
.wbc__btn svg{width:24px;height:24px;fill:currentColor;position:relative;z-index:2}
.wbc__btn:focus-visible{outline:3px solid #1b6ea8;outline-offset:3px}
.wbc__btn:hover{transform:translateY(-2px)}

/* «Наверх»: появляется только когда прокрутили заметно вниз — иначе кнопка
   мозолит глаза на первом экране, где она бесполезна. */
.wbc__top{background:#fff;color:var(--dark,#1e2a36);border:1px solid #dde3ea;
          box-shadow:0 6px 18px rgba(20,30,45,.14);
          opacity:0;visibility:hidden;transform:translateY(8px)}
.wbc__top.is-on{opacity:1;visibility:visible;transform:none}
.wbc__top:hover{background:#f7f9fc;color:var(--acc2,#f13910)}

/* Телефон: постоянный акцент. Пульс — отдельный слой под иконкой, чтобы
   анимация не дёргала саму кнопку и не мешала попадать по ней пальцем. */
.wbc__phone{background:var(--acc,#ff3c1f);color:#fff;
            box-shadow:0 8px 22px rgba(241,57,16,.42)}
.wbc__phone:hover{background:var(--acc2,#f13910)}
.wbc__ring{position:absolute;inset:0;border-radius:50%;
           background:var(--acc,#ff3c1f);opacity:.55;z-index:1;
           animation:wbc-pulse 2.1s cubic-bezier(.22,.61,.36,1) infinite}
@keyframes wbc-pulse{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(1.85);opacity:0}
  100%{transform:scale(1.85);opacity:0}
}

/* Модалка */
.wbc-modal{position:fixed;inset:0;z-index:1000;display:none}
.wbc-modal.is-open{display:block}
.wbc-modal__backdrop{position:absolute;inset:0;background:rgba(15,23,32,.55)}
.wbc-modal__box{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
                width:min(420px,calc(100vw - 32px));max-height:calc(100vh - 32px);
                overflow:auto;background:#fff;border-radius:12px;padding:26px 24px 20px;
                box-shadow:0 24px 60px rgba(15,23,32,.35)}
.wbc-modal__x{position:absolute;right:10px;top:8px;width:34px;height:34px;border:0;
              background:none;font-size:26px;line-height:1;color:#8a95a1;cursor:pointer;
              border-radius:8px}
.wbc-modal__x:hover{background:#f2f5f8;color:var(--acc2,#f13910)}
.wbc-modal__title{font-size:20px;line-height:1.3;color:var(--dark,#1e2a36);
                  margin:0 24px 8px 0;font-weight:700}
.wbc-modal__sub{font-size:13px;color:#5b6875;margin-bottom:16px;line-height:1.5}
.wbc-modal__sub b{color:var(--tx,#2c3e50)}
.wbc-modal__sku{display:inline-block;background:#fdecE8;color:#c02f0d;
                border-radius:3px;padding:1px 6px;font-size:12px;font-weight:700;
                white-space:nowrap}

.wbc-form .inp{display:block;width:100%;margin-bottom:10px;padding:11px 13px;
               border:1px solid #ccd3da;border-radius:6px;font:inherit;background:#fff}
.wbc-form .inp:focus{outline:none;border-color:var(--acc,#ff3c1f);
                     box-shadow:0 0 0 3px rgba(241,57,16,.13)}
.wbc-form textarea.inp{resize:vertical;min-height:74px}
.wbc-form .inp.is-bad{border-color:#d33;box-shadow:0 0 0 3px rgba(211,51,51,.12)}

.wbc-form__submit{width:100%;padding:13px;border:0;border-radius:6px;cursor:pointer;
                  background:var(--acc,#ff3c1f);color:#fff;font:700 15px/1 inherit;
                  text-transform:uppercase;letter-spacing:.4px;transition:background .15s}
.wbc-form__submit:hover{background:var(--acc2,#f13910)}
.wbc-form__submit[disabled]{opacity:.6;cursor:default}
.wbc-form__note{margin-top:10px;font-size:13px;line-height:1.5;min-height:1px}
.wbc-form__note.is-bad{color:#c0392b}
.wbc-form__note.is-ok{color:#227a3b;font-weight:600}
.wbc-form__legal{margin-top:12px;font-size:11px;line-height:1.5;color:#8a95a1}

/* Ловушка для ботов: не display:none — часть спам-скриптов пропускает
   скрытые таким образом поля, а нам нужно, чтобы они его заполнили. */
.hp-field{position:absolute!important;left:-9999px!important;width:1px!important;
          height:1px!important;opacity:0!important;pointer-events:none}

@media(max-width:600px){
  .wbc{right:12px;bottom:12px;gap:10px}
  .wbc__btn{width:50px;height:50px}
  .wbc-modal__box{padding:22px 18px 16px}
  .wbc-modal__title{font-size:18px}
}

/* Уважаем системную настройку «меньше движения»: пульс — украшение,
   а для части пользователей ещё и источник укачивания. */
@media(prefers-reduced-motion:reduce){
  .wbc__ring{animation:none;opacity:.3}
  .wbc__btn{transition:none}
  .wbc__btn:hover{transform:none}
}

/* Кнопки призыва, открывающие эту же модалку (25.08.2026).
   .wb-btn писался под <a> и уже задаёт border:0 и cursor:pointer — их
   повторять не нужно. Единственное, чего не хватает на <button>, это
   шрифт: без сброса браузер ставит системный, и кнопка выпадает из ряда
   по начертанию и ширине.
   Вариант --ghost НЕ трогаем: у него своя рамка в 1px, и общий border:none
   её бы срезал. */
button.wb-btn { font: inherit; }

/* =====================================================================
   Встроенная секция заявки (25.08.2026).
   Формы стоят раскрытыми прямо в тексте страниц — так посетитель видит
   поля сразу, а не после клика. Разметка та же, что у модалки, поэтому
   классы отдельные: у модального окна свой контекст (затемнение, фикс.
   позиция), и общие стили пришлось бы всё время переопределять.

   Карточка белая и непрозрачная намеренно: она одинаково читается и на
   светлом фоне страницы, и поверх тёмной секции. Модификатор --dark
   нужен только там, где форма должна раствориться в тёмном блоке.
   ===================================================================== */
.wb-formsec { margin: 34px 0; }

.wb-formsec__box {
  background: var(--color-bg-white, #fff);
  border: 1px solid var(--color-border-light, #E4E7EC);
  border-radius: var(--radius-m, 12px);
  box-shadow: var(--shadow-card, 0 2px 8px rgba(26,31,43,.06));
  padding: 26px 28px;
}

.wb-formsec__title {
  margin: 0 0 6px;
  font-size: 21px;
  line-height: 1.3;
  color: var(--color-text-main, #1A1F2B);
}

.wb-formsec__sub {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--color-text-secondary, #5F6A7A);
}

.wb-formsec__row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.wb-formsec__inp {
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;
  border: 1px solid var(--color-border-light, #E4E7EC);
  border-radius: 8px;
  background: var(--color-bg-input, #fff);
  color: var(--color-text-main, #1A1F2B);
  font: inherit;
  font-size: 15px;
}
.wb-formsec__inp::placeholder { color: var(--color-text-hint, #929FB0); }
.wb-formsec__inp:focus {
  outline: none;
  border-color: var(--color-border-focus, #058C6D);
  box-shadow: var(--shadow-focus-teal, 0 0 0 4px rgba(5,140,109,.15));
}
/* Подсветка незаполненного телефона — её ставит wb-callback.js */
.wb-formsec__inp.is-bad {
  border-color: var(--color-border-error, #F13910);
  box-shadow: 0 0 0 4px rgba(241,57,16,.12);
}

.wb-formsec__area { margin-top: 12px; resize: vertical; }

.wb-formsec__act {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.wb-formsec__note { margin: 0; font-size: 14px; }
.wb-formsec__note.is-ok { color: var(--color-brand-teal, #058C6D); }
.wb-formsec__note.is-bad { color: var(--color-brand-red, #F13910); }

.wb-formsec__legal {
  margin: 14px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-hint, #929FB0);
}
.wb-formsec__legal a { color: var(--color-accent-link, #058C6D); }

/* Вариант для тёмных блоков: карточка растворяется, поля остаются
   светлыми — тёмные поля на тёмном фоне читаются заметно хуже. */
.wb-formsec--dark .wb-formsec__box {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  box-shadow: none;
}
.wb-formsec--dark .wb-formsec__title { color: var(--color-text-white, #fff); }
.wb-formsec--dark .wb-formsec__sub,
.wb-formsec--dark .wb-formsec__legal { color: rgba(255, 255, 255, .72); }
.wb-formsec--dark .wb-formsec__legal a { color: #7FE3C6; }
.wb-formsec--dark .wb-formsec__note.is-ok { color: #7FE3C6; }
.wb-formsec--dark .wb-formsec__note.is-bad { color: #FF9678; }

@media (max-width: 700px) {
  .wb-formsec__box { padding: 20px 16px; }
  .wb-formsec__row { grid-template-columns: 1fr; }
  .wb-formsec__title { font-size: 19px; }
  .wb-formsec__act { gap: 10px; }
  .wb-formsec__submit { width: 100%; }
}

/* Баннер главной: текст слева, форма справа (25.08.2026).
   Место под форму в вёрстке уже было — список преимуществ ограничен
   680px, правая половина пустовала. */
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 36px;
  align-items: center;
}
.hero__col--form .wb-formsec { margin: 0; }

@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 24px; }
  /* На узком экране форма уводит первый экран вниз, поэтому её место —
     под текстом, а не над ним. */
  .hero__col--form { order: 2; }
}

/* =====================================================================
   Правки оформления форм 25.08.2026 (по замечаниям заказчика).
   Идут ПОСЛЕ базовых правил, поэтому перекрывают их.
   ===================================================================== */

/* Ряд полей делится по ширине КОНТЕЙНЕРА, а не экрана. Это важно для
   баннера главной: там колонка формы 460px, и жёсткие три колонки дали бы
   по ~140px — подсказки вроде «E-mail для ответа» снова обрезались бы.
   auto-fit сам переносит поля, когда места мало. */
.wb-formsec__row {
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}

/* Поля просторнее: подсказка и вписанная почта должны помещаться целиком. */
.wb-formsec__inp {
  padding: 13px 15px;
  font-size: 15.5px;
}

/* Заголовок и подзаголовок по центру. */
.wb-formsec__title,
.wb-formsec__sub {
  text-align: center;
}
.wb-formsec__sub { margin-left: auto; margin-right: auto; max-width: 46em; }

/* Кнопка по центру, подпись о результате — под ней, тоже по центру.
   На узком экране кнопка растягивается на всю ширину: попасть пальцем
   в кнопку по центру узкого экрана труднее, чем в широкую полосу. */
.wb-formsec__act {
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.wb-formsec__submit {
  min-width: 240px;
  padding-top: 13px;
  padding-bottom: 13px;
}
.wb-formsec__note { text-align: center; }

@media (max-width: 640px) {
  .wb-formsec__submit { width: 100%; min-width: 0; }
}

/* --- Модалка: те же принципы --- */
.wbc-modal__title { text-align: center; }
.wbc-modal__sub { text-align: center; }
.wbc-form .inp {
  padding: 13px 15px;
  font-size: 15.5px;
  margin-bottom: 11px;
}
/* В модалке кнопка и так во всю ширину — ей добавляем только воздух. */
.wbc-form__submit { padding: 14px; }
.wbc-form__note { text-align: center; }

/* Согласие на обработку персональных данных (152-ФЗ, 25.08.2026).
   Галочка снята по умолчанию — предустановленная согласием не считается. */
.wb-consent {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 4px 0 14px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary, #5F6A7A);
  cursor: pointer;
  text-align: left;
}
.wb-consent__box {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin: 1px 0 0;
  accent-color: var(--color-brand-teal, #058C6D);
  cursor: pointer;
}
.wb-consent a { color: var(--color-accent-link, #058C6D); text-decoration: underline; }
/* Подсветку ставит wb-callback.js, когда галочку не отметили. */
.wb-consent.is-bad { color: var(--color-brand-red, #F13910); }
.wb-consent.is-bad .wb-consent__box { outline: 2px solid var(--color-brand-red, #F13910); }

/* В форме-секции блок согласия центрируем вместе с кнопкой, но текст
   внутри оставляем по левому краю — центрированные две строки читаются хуже. */
.wb-formsec__form .wb-consent { max-width: 34em; margin-left: auto; margin-right: auto; }

/* Тёмный вариант (баннер главной). */
.wb-formsec--dark .wb-consent { color: rgba(255,255,255,.75); }
.wb-formsec--dark .wb-consent a { color: #7FE3C6; }
.wb-formsec--dark .wb-consent.is-bad { color: #FF9678; }

/* Блокировка прокрутки под открытой модалкой (25.08.2026).
   Раньше ставился просто overflow:hidden на body — полоса прокрутки
   исчезала, страница расширялась на её ширину, и весь макет прыгал вправо.
   Отступ той же ширины держит ширину неизменной. Переменную --wbc-sbw
   выставляет wb-callback.js; на мобильных полосы нет и она не появляется. */
body.wbc-locked {
  overflow: hidden;
  padding-right: var(--wbc-sbw, 0px);
}
/* Плавающий виджет прижат к правому краю и position:fixed — на него отступ
   body не влияет, поэтому сдвигаем его отдельно, иначе прыгнет он один. */
body.wbc-locked .wbc {
  margin-right: var(--wbc-sbw, 0px);
}

/* =====================================================================
   Выбор способа связи под плавающей кнопкой (25.08.2026).
   Пункты выезжают вверх над кнопкой. Пока меню закрыто, оно полностью
   выключено из взаимодействия (visibility + pointer-events), иначе
   невидимые ссылки перехватывали бы клики по странице.
   ===================================================================== */
.wbc__menu {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .18s, transform .18s, visibility .18s;
}
.wbc__menu.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
}

.wbc__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border: 1px solid #dde3ea;
  border-radius: 999px;
  background: #fff;
  color: var(--dark, #1e2a36);
  font: 600 14px/1.2 inherit;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(20, 30, 45, .14);
  transition: transform .15s, box-shadow .15s;
}
.wbc__item:hover {
  transform: translateY(-2px);
  color: var(--dark, #1e2a36);
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(20, 30, 45, .18);
}
.wbc__item:focus-visible { outline: 3px solid #1b6ea8; outline-offset: 2px; }

/* Кружок с иконкой: фирменный цвет мессенджера — так пункт узнаётся
   раньше, чем прочитан. */
.wbc__ico {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
}
.wbc__ico svg { width: 17px; height: 17px; fill: currentColor; }

.wbc__item--max .wbc__ico  { background: #0077FF; }
.wbc__item--tg  .wbc__ico  { background: #2AABEE; }
.wbc__item--wa  .wbc__ico  { background: #25D366; }
.wbc__item--call .wbc__ico { background: var(--acc, #ff3c1f); }

/* Пока меню открыто, пульс у главной кнопки не нужен: он тянет внимание
   обратно к кнопке, хотя выбор уже перед глазами. */
.wbc__menu.is-open ~ .wbc__phone .wbc__ring { animation: none; opacity: 0; }

@media (max-width: 520px) {
  /* На узком экране подписи занимают половину ширины — оставляем иконки,
     а название мессенджера читается по цвету и значку. */
  .wbc__label { display: none; }
  .wbc__item { padding: 8px; }
}

/* =====================================================================
   Кнопка «наверх» — в левый нижний угол (25.08.2026).
   Была в одной колонке с кнопкой связи справа. Закрытое меню выбора
   скрыто через visibility и ПРОДОЛЖАЕТ занимать место в колонке, поэтому
   после первого открытия стрелку выдавливало вверх и обратно она уже не
   опускалась. Вынос влево убирает и саму причину, и тесноту в правом углу.

   position:fixed у потомка отсчитывается от окна, а не от родителя,
   поэтому кнопка выходит из колонки .wbc и встаёт куда нужно.
   ===================================================================== */
.wbc__top {
  position: fixed;
  left: 18px;
  bottom: 18px;
}
/* Слева полосы прокрутки нет, компенсировать сдвиг не требуется — но и
   margin-right от .wbc наследовать ей незачем. */
body.wbc-locked .wbc__top { margin-right: 0; }

@media (max-width: 520px) {
  .wbc__top { left: 12px; bottom: 12px; }
}