/* Надстройка «подсказки и статистика выбора». Автогенерация из прототипа. */
/* ============ надстройка для formaplus.net ============ */
/* служебные имена полей сайт прячет своим скриптом — прячем стилем */
.same-field{display:none!important}

/* --- токены --------------------------------------------------------------
   блок вопроса #8D6959 (коричневый), таблетки #FFCC99, выбранная #9FBF75
   подложка подсказки — белый 88 % поверх коричневого = #F1EDEB
   ink   #33251d 12,7   mute #6E5347 6,0   act #3E5A15 6,7   risk #A91005 6,5
   шрифт наследуется от сайта (Montserrat)
--------------------------------------------------------------------------- */

/* ---------- доля выбора в варианте ответа ---------- */
/* цвет наследуем от подписи: на персиковой таблетке она тёмная, на выбранной белая */
.dgr-share{position:relative;display:inline-flex;align-items:center;bottom:auto;
  font-size:13px;font-weight:700;color:inherit;font-variant-numeric:tabular-nums;
  padding:0 0 0 8px;margin-left:6px;border-left:1px solid rgba(51,37,29,.32);
  white-space:nowrap;cursor:pointer}
.custom-control-input:checked ~ .custom-control-new .dgr-share{border-left-color:rgba(255,255,255,.55)}
/* всплывашка — СВОЯ (.dgr-tip), не переиспользуем классы сайта .helper-show-body/
   .helper-wrapper: их :hover/::стрелки и правила для выбранного состояния давали
   пустой пузырь на выбранном варианте. Позиционируем в пикселях (position:fixed),
   чтобы не вылезал за край. Открывается по клику (класс .open вешает analytics.js),
   закрывается крестиком: показ по наведению мигал, когда мышь шла по краю бейджа. */
.dgr-share .dgr-tip{position:fixed;top:0;left:0;z-index:60;display:none;
  width:260px;max-width:calc(100vw - 16px);padding:11px 38px 11px 16px;box-sizing:border-box;
  background:#faf7f5;border:1px solid #d7cbc4;border-radius:8px;
  box-shadow:0 10px 26px rgba(51,37,29,.2);
  font-size:14px;font-weight:400;line-height:1.35;text-align:left;color:#33251d;
  white-space:normal;cursor:default}
.dgr-share .dgr-tip::after,.dgr-share .dgr-tip::before{content:'';position:absolute;top:100%;
  left:var(--dgr-arrow,50%);border:12px solid transparent;border-top-color:#faf7f5;margin-left:-12px}
.dgr-share .dgr-tip::before{border-top-color:#d7cbc4;margin-top:1px}
.dgr-share.open .dgr-tip{display:block}
/* Внутренние span-ы всплывашки попадают под правило сайта «.custom-control-new span»
   (nowrap, line-height 35px, position:relative), поэтому текст не переносился,
   а крестик уезжал в поток. Держим вес селектора выше сайтового. */
.dgr-share .dgr-tip .dgr-tip-tx{display:block;position:static;white-space:normal;
  line-height:1.35;font-size:14px;font-weight:400;text-align:left;transition:none}
/* Всплывашка лежит ВНУТРИ подписи варианта, а у сайта есть правило
   «.custom-radio .custom-control-input:checked ~ .custom-control-new span{color:#fff!important}»
   — на выбранном варианте оно красило текст всплывашки в белый по белому.
   Имя класса намеренно повторено: так вес селектора выше сайтового, и мы не
   привязываемся к его разметке. Сам процент цвет по-прежнему наследует. */
.dgr-share .dgr-tip.dgr-tip.dgr-tip.dgr-tip,
.dgr-share .dgr-tip.dgr-tip.dgr-tip.dgr-tip .dgr-tip-tx{color:#33251d!important}
/* крестик: 28×28 — чтобы попасть пальцем на телефоне */
.dgr-share .dgr-tip .dgr-tip-x{position:absolute;top:5px;right:5px;width:28px;height:28px;
  border-radius:50%;display:inline-flex;align-items:center;justify-content:center;
  font-size:19px;font-weight:700;line-height:1;cursor:pointer;background:none;
  white-space:nowrap;transition:none}
.dgr-share .dgr-tip.dgr-tip.dgr-tip.dgr-tip .dgr-tip-x{color:#6E5347!important}
.dgr-share .dgr-tip.dgr-tip.dgr-tip.dgr-tip .dgr-tip-x:hover{background:#33251d;color:#fff!important}
.dgr-tip-x:focus-visible{outline:3px solid #2b2b2b;outline-offset:2px}
.dgr-share:focus-visible{outline:3px solid #fff;outline-offset:2px;border-radius:4px}
/* тумблер «Выводить статистику выбора ответов» управляет только процентами */
body.dgr-no-calc .dgr-share{display:none}
.new-one-block .radio-line2{max-width:100%}
.custom-control-new{max-width:100%}

/* ---------- строка-подсказка под шкалой ---------- */
/* блок сайта: padding 35px 25px 20px, радиус 10px — полка вписывается в его низ */
.dgr-hint{margin:24px -25px -20px;padding:12px 25px;background:rgba(255,255,255,.88);
  border-top:1px solid rgba(51,37,29,.14);border-radius:0 0 10px 10px;text-align:left;
  overflow:visible;color:#33251d}
/* .new-one-block задаёт color:#fff — чтобы текст подсказки не наследовал белый,
   держим тёмный цвет на всех текстовых элементах строки */
.dgr-hint .dgr-tx,.dgr-hint .dgr-row,.dgr-hint .dgr-legal,.dgr-hint .dgr-legal p{color:#33251d}
.dgr-hint.thin{background:rgba(255,255,255,.78)}
body.dgr-no-tips .dgr-hint{display:none!important}
.dgr-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;width:100%;background:none;border:0;
  font:inherit;padding:0;cursor:pointer;color:#33251d;text-align:left}
.dgr-row.static{cursor:default}
.dgr-row:focus-visible{outline:3px solid #2b2b2b;outline-offset:3px;border-radius:6px}
.dgr-dot{flex:0 0 auto;width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;
  justify-content:center;font-size:12px;font-weight:800;color:#fff;background:#A91005;line-height:1}
.dgr-dot.ok{background:#3E5A15}
.dgr-dot.info{background:#7A5647}
.dgr-dot.none{background:#A99A91}
.dgr-tx{flex:1 1 300px;min-width:0;font-size:14px;line-height:1.45;color:#33251d;overflow-wrap:anywhere}
.dgr-val{position:relative;display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;
  font-weight:800;font-size:13.5px;color:#A91005;font-variant-numeric:tabular-nums;white-space:nowrap;
  background:#fff;border:1px solid #d7cbc4;border-radius:20px;padding:6px 8px 6px 14px}
.dgr-val.ok{color:#3E5A15}
.dgr-val.info{color:#7A5647}
.dgr-val:empty{display:none}
/* пока вариант не выбран, справа не значение, а призыв «Выберите ответ» —
   пунктир и приглушённый цвет, чтобы его не читали как рассчитанную сумму */
.dgr-val.pick{color:#6E5347;font-weight:700;border-style:dashed;padding-right:14px}
.dgr-hint.idle .dgr-dot{background:#A99A91}
.dgr-why{width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:1px solid #c2b0a7;background:#fff;
  color:#6E5347;font:inherit;font-size:12.5px;font-weight:800;line-height:1;cursor:pointer;padding:0;
  display:inline-flex;align-items:center;justify-content:center}
.dgr-why:hover{background:#33251d;border-color:#33251d;color:#fff}
.dgr-why:focus-visible{outline:3px solid #2b2b2b;outline-offset:2px}
.dgr-pop{position:absolute;top:calc(100% + 10px);right:0;z-index:40;width:344px;max-width:86vw;
  background:#faf7f5;border:1px solid #d7cbc4;border-radius:10px;padding:16px 18px;text-align:left;
  box-shadow:0 12px 30px rgba(51,37,29,.24);white-space:normal;font-weight:400;color:#33251d;display:none}
.dgr-val.open .dgr-pop{display:block}
.dgr-pop-t{font-size:12px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#6E5347;
  margin:0 0 8px}
.dgr-pop-f{font-size:14px;margin:0 0 12px;line-height:1.45}
.dgr-pop-f b{font-weight:800}
.dgr-pop label{display:block;font-size:13px;color:#6E5347;margin:0 0 5px;font-weight:600}
.dgr-pop-row{display:flex;gap:8px;align-items:center}
.dgr-pop input{flex:1 1 auto;min-width:0;border:1px solid #c2b0a7;border-radius:6px;padding:8px 10px;
  font:inherit;font-size:16px;font-weight:700;color:#33251d;text-align:right;background:#fff;
  font-variant-numeric:tabular-nums}
.dgr-pop input:focus-visible{outline:3px solid #2b2b2b;outline-offset:1px}
.dgr-pop button.dgr-apply{flex:0 0 auto;height:44px;padding:0 16px;border:0;border-radius:6px;
  background:#3E5A15;color:#fff;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
.dgr-pop button.dgr-apply:hover{background:#2B3F0E}
.dgr-pop-src{font-size:13px;color:#6E5347;margin:12px 0 0;padding-top:10px;border-top:1px solid #e6ddd8;
  line-height:1.45}
.dgr-price{border:0;background:none;padding:0 1px;font:inherit;font-weight:700;color:#3E5A15;cursor:pointer;
  border-bottom:1px dashed #3E5A15;line-height:inherit}
.dgr-price:hover{color:#33251d;border-bottom-color:#33251d}
.dgr-price:focus-visible{outline:3px solid #2b2b2b;outline-offset:2px;border-radius:3px}
.dgr-price::after{content:' ✎';font-size:.85em;opacity:.75}
.dgr-more{flex:0 0 auto;font-size:13px;font-weight:700;color:#3E5A15;display:inline-flex;align-items:center;gap:6px}
.dgr-more::after{content:'';width:0;height:0;border-left:5px solid currentColor;border-top:4px solid transparent;
  border-bottom:4px solid transparent;transition:transform .2s ease}
.dgr-hint.open .dgr-more::after{transform:rotate(90deg)}
.dgr-body{display:none;padding-top:13px;margin-top:12px;border-top:1px dashed rgba(51,37,29,.22)}
.dgr-hint.open .dgr-body{display:block}
.dgr-legal{font-size:14px;color:#3F332C;line-height:1.5}
.dgr-legal p{margin:0 0 9px;text-align:left}
.dgr-mname{font-size:12px!important;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:#6E5347;margin:0 0 8px!important}
.dgr-note{font-size:13px;color:#6E5347;margin-top:12px!important;padding-top:9px;
  border-top:1px solid rgba(51,37,29,.14)}

/* панель настроек */
.dgr-panel{background:#f3ece7;border:1px solid #d7cbc4;border-radius:10px;padding:12px 18px;margin:0 0 12px}
.dgr-panel-in{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.dgr-panel-t{font-size:13px;font-weight:800;color:#6E5347;text-transform:uppercase;letter-spacing:.05em}
.dgr-sw{display:inline-flex;align-items:center;gap:9px;font-size:14px;color:#33251d;cursor:pointer;
  user-select:none;margin:0;min-height:44px}
.dgr-sw input{position:absolute;opacity:0;width:0;height:0}
.dgr-sw span{width:40px;height:24px;border-radius:12px;background:#b3a49c;position:relative;flex:0 0 auto;
  transition:background-color .2s ease}
.dgr-sw span::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;
  background:#fff;transition:transform .2s ease}
.dgr-sw input:checked + span{background:#3E5A15}
.dgr-sw input:checked + span::after{transform:translateX(16px)}
.dgr-sw input:focus-visible + span{outline:3px solid #2b2b2b;outline-offset:3px}

/* до 767px сайт делает подпись варианта блочной (display:block), и процент
   срывается на вторую строку. Возвращаем строку и прижимаем процент вправо.
   .custom-control-new span весит 0-1-1, поэтому селекторы держим выше */
@media (max-width:767px){
  .custom-control-new .edited-btn-block{display:flex;align-items:center;
    justify-content:space-between;gap:12px;width:100%}
  .custom-control-new span.dgr-share{display:inline-flex;flex:0 0 auto;align-self:center;
    padding-left:12px;margin-left:0}
}

@media (max-width:760px){
  .dgr-hint{margin:20px -15px -14px;padding:12px 15px;border-radius:0 0 10px 10px}
  .dgr-panel-in{gap:12px}
  .dgr-row{gap:8px}
  .dgr-val{position:static}
  .dgr-hint{position:relative}
  .dgr-pop{position:absolute;left:15px;right:15px;top:calc(100% + 6px);width:auto;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .dgr-why,.dgr-apply,.dgr-sw span,.dgr-sw span::after,.dgr-more::after{transition:none!important}
}


/* ═══════════════════════════════════════════════════════════════════════════
   Кнопка «Выбрать типовые ответы» и поп-ап «Устали?» (ТЗ от 17.08.2026)
   Цвета и размеры взяты из style.css сайта, чтобы окна не выбивались:
   зелёная кнопка — тот же градиент, кант окна — тот же #fed8b1.
   ═══════════════════════════════════════════════════════════════════════════ */

/* вторичная кнопка: у сайта такой нет, а обе кнопки зелёными делать нельзя —
   тогда не видно, какое действие основное */
.dgr-knopka-vtor{
  display:inline-block;padding:14px 25px;height:55px;line-height:25px;
  font-family:'Montserrat-Medium',sans-serif;font-size:16px;
  color:#3e5a15;background:#fff;border:2px solid #9fbf75;border-radius:5px;
  cursor:pointer;transition:.3s;
}
.dgr-knopka-vtor:hover{background:#eef3e6}
.dgr-dlin{min-width:300px}
.dgr-iz-okna-obertka{margin-top:14px}

/* окна надстройки */
.dgr-okno .modal-header-free{padding-bottom:10px}
.dgr-okno .dgr-uzhe{margin-top:26px}
.dgr-derzh-obertka{margin-top:26px;padding-bottom:14px}
.dgr-derzh-obertka > *{margin-bottom:14px}
.dgr-ustali-zag{
  font-family:'Montserrat-Medium',sans-serif;font-size:26px;color:#534343;
  text-align:center;margin-top:26px;
}
.dgr-ustali-note{margin-top:10px}

/* кнопка, которую надо держать */
.dgr-derzhat{
  position:relative;overflow:hidden;width:100%;max-width:420px;border:none;cursor:pointer;
  font-family:'Montserrat-Medium',sans-serif;font-size:17px;letter-spacing:.4px;
  text-transform:uppercase;color:#a94442;background:#f7dede;border-radius:14px;
  padding:20px 18px;-webkit-user-select:none;user-select:none;touch-action:none;
}
.dgr-derzhat .dgr-zalivka{
  position:absolute;left:0;top:0;bottom:0;width:0;background:rgba(169,68,66,.22);
}
.dgr-derzhat .dgr-nadpis{position:relative}
.dgr-derzhat.dgr-gotovo{background:#e4efd6;color:#3e5a15}
.dgr-derzhat[disabled]{cursor:default}
.dgr-derzh-podskaz{font-size:13px;color:#8a7a70;min-height:18px}
.dgr-prodolzhit{
  display:inline-block;border-bottom:1px solid #33251d;cursor:pointer;line-height:1;font-size:16px;
}
.dgr-prodolzhit:hover{border-bottom-color:transparent}

/* ход подстановки */
.dgr-hod{max-width:420px;margin:0 auto}
.dgr-hod-tekst{font-size:14px;color:#33251d;margin-bottom:7px}
.dgr-hod-shkala{height:8px;background:#f3ece7;border-radius:8px;overflow:hidden}
.dgr-hod-shkala span{
  display:block;height:100%;width:0;border-radius:8px;transition:width .3s;
  background:linear-gradient(90deg,#94b06f,#9fbe75);
}

/* пояснение у знака вопроса */
.dgr-vopros-znak{
  display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;
  border-radius:50%;background:#a4765c;color:#fff;font-size:12px;cursor:help;
  vertical-align:middle;margin-left:5px;position:relative;
}
.dgr-vopros-znak .dgr-vsplyv{
  display:none;position:absolute;bottom:130%;left:50%;transform:translateX(-50%);width:290px;
  background:#33251d;color:#fff;font-size:13px;line-height:1.45;padding:11px 14px;border-radius:9px;
  text-align:left;font-family:'Montserrat-Regular',sans-serif;z-index:10;
}
.dgr-vopros-znak:hover .dgr-vsplyv{display:block}

@media (max-width:760px){
  .dgr-dlin{min-width:0;width:100%}
  .dgr-derzhat{font-size:15px;padding:18px 14px}
  .dgr-vopros-znak .dgr-vsplyv{width:230px}
}
@media (prefers-reduced-motion:reduce){
  .dgr-knopka-vtor,.dgr-hod-shkala span{transition:none!important}
}

/* ═══════════════════════════════════════════════════════════════════════
   Предпросмотр документа в окне скачивания (ТЗ от 21.08.2026, п. 1)

   Вместо картинки-гифки показываем то, что человек уже собрал. Смысл окна
   меняется: раньше оно объясняло, что надо ответить на вопросы, теперь
   показывает, ради чего отвечать.

   Обрезаем по высоте, а не по числу пунктов: у разных шаблонов пункты
   разной длины, и «первые три» дали бы то пол-экрана, то простыню.
   ═══════════════════════════════════════════════════════════════════════ */
.dgr-pred{
  position:relative;max-width:640px;margin:22px auto 0;
  border:1px solid #dfe3d8;border-radius:10px;background:#fff;
  overflow:hidden;text-align:left;
}
/*
 * Высота и кегль подобраны так, чтобы по куску было видно, как документ ляжет
 * на печать: десятка строк для этого мало — не понять ни плотности текста, ни
 * того, где кончится первая страница. Держим одинаковыми на всех шаблонах,
 * чтобы окно не прыгало от шаблона к шаблону.
 *
 * pointer-events отключены намеренно. Поля документа — живые элементы сайта,
 * и в копии они тянут за собой чужие обработчики: при наведении выскакивали
 * подсказки вроде «Укажите место». Предпросмотр должен быть картинкой, а не
 * второй копией конструктора.
 */
.dgr-pred-list{
  max-height:560px;overflow:hidden;padding:26px 30px 0;
  pointer-events:none;user-select:none;
  background-image:url('/img/vodyanoy-formaplus.svg');
  background-repeat:repeat;background-position:center top;
}
/* Затухание вместо резкого обрыва: обрыв читается как поломка вёрстки,
   а плавный уход — как «дальше есть ещё». */
.dgr-pred-tuman{
  position:absolute;left:0;right:0;bottom:0;height:110px;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.92) 62%,#fff 100%);
}
.dgr-pred-list *{font-size:11.5px!important;line-height:1.45!important;color:#33251d!important}
.dgr-pred-list b,.dgr-pred-list strong{font-weight:700!important}
/* Служебные метки полей сайт прячет скриптом на живой странице; в копии
   скрипта нет, поэтому прячем стилем — иначе они торчат в тексте. */
.dgr-pred-list .same-field{display:none!important}
.dgr-pred-list input,.dgr-pred-list select,.dgr-pred-list textarea,
.dgr-pred-list button,.dgr-pred-list .dgr-hint,.dgr-pred-list .dgr-share,
.dgr-pred-list [class*="dgr-"]{display:none!important}

/* Поля для заполнения в копии — это место под вписывание, а не элемент ввода.
   На живой странице они серые и кликабельные, и в предпросмотре это сбивает:
   человек пробует в них печатать прямо в окне. Показываем так же, как они
   выглядят в готовом документе, — подчёркнутым местом. */
/* Значки-галочки у заполненных полей (span.w-ico) — часть рабочего
   интерфейса: они говорят «поле заполнено». В предпросмотре печати им не
   место, в скачанном документе их не будет. */
.dgr-pred-list .w-ico{display:none!important}

.dgr-pred-list .ch-field{
  background:none!important;box-shadow:none!important;border:0!important;
  border-bottom:1px solid #c3bcb2!important;border-radius:0!important;
  padding:0 2px!important;color:#6f665c!important;cursor:default!important;
}

.dgr-pred-podpis{
  margin:14px auto 0;max-width:640px;font-size:14px;line-height:1.5;
  color:#8a6d1f;text-align:center;
}

/* ═══════════════════════════════════════════════════════════════════════
   Стоимость шаблона в правой колонке (ТЗ от 21.08.2026, п. 2)

   Второе место показа цены. Оформлена намеренно спокойно: это справка,
   а не призыв — на кнопку «Инструкция» рядом она перебивать не должна.
   ═══════════════════════════════════════════════════════════════════════ */
/*
 * Ритм колонки задан не мной: каждая карточка отбивается сверху на 30 пикселей
 * (margin-top у соседей, снизу у всех ноль), скругление 10, шрифт Montserrat.
 * Блок цены встаёт в этот же ритм, а не заводит свой: иначе он читается как
 * чужая вставка. Первая версия имела отступ только снизу — и прилипала к
 * кнопке «Инструкция» вплотную.
 *
 * Насыщенного начертания у сайта нет (объявлены только Montserrat-Regular и
 * Montserrat-Medium), поэтому font-weight:700 давал бы синтетический жир.
 * Сумму выделяем начертанием Medium и кеглем, а не весом.
 */
.dgr-cena-blok{
  background:#f1f0eb;border-radius:10px;padding:18px 22px;
  margin:30px 0 0;font-family:'Montserrat-Regular',sans-serif;
}
.dgr-cena-podpis{font-size:13px;line-height:1.3;color:#7a7168;margin-bottom:6px}
.dgr-cena-znachenie{display:flex;align-items:center;gap:8px}
.dgr-cena-summa{
  font-family:'Montserrat-Medium',sans-serif;font-weight:400;
  font-size:18px;line-height:1.2;color:#33251d;
}
.dgr-cena-vopros{
  position:relative;display:inline-flex;align-items:center;cursor:help;line-height:0;
}
.dgr-cena-vopros img{width:18px;height:18px;display:block}
.dgr-cena-vopros .dgr-vsplyv{
  display:none;position:absolute;bottom:135%;left:50%;transform:translateX(-50%);width:290px;
  background:#33251d;color:#fff;font-size:13px;line-height:1.45;padding:11px 14px;border-radius:9px;
  text-align:left;font-family:'Montserrat-Regular',sans-serif;z-index:20;
}
.dgr-cena-vopros:hover .dgr-vsplyv,
.dgr-cena-vopros:focus .dgr-vsplyv{display:block}

@media (max-width:1199px){
  /* В узкой колонке всплывашка упиралась бы в край экрана. */
  .dgr-cena-vopros .dgr-vsplyv{left:auto;right:0;transform:none;width:250px}
}
@media (max-width:760px){
  .dgr-pred-list{max-height:390px;padding:18px 18px 0}
  .dgr-pred-list *{font-size:11px!important}
  .dgr-pred-tuman{height:80px}
}