/* neocalc — стили калькулятора neoved.
   База перенесена из текущего блока на Tilda без изменений внешнего вида;
   в конце файла — новые компоненты из ТЗ (таймер, скидка, модалки, ошибки полей). */

/* Шрифт раздаём сами, а не через Google Fonts: так он не зависит от внешнего
   сервиса и гарантированно совпадает с тем, что в макете.
   Файл лежит рядом с этим CSS — public/Onest-Medium.ttf → /widget/Onest-Medium.ttf

   Начертание одно, Medium. Диапазон 400–500 указан намеренно: при font-weight 400
   браузер возьмёт этот же файл вместо того, чтобы синтезировать жирность —
   искусственное утолщение как раз и делало текст толще макета. */
/* Обычное начертание и медиум — разные файлы.
 *
 * Раньше был подключён только Onest-Medium и объявлен как «400 500»: браузер
 * брал его и на 400, поэтому весь обычный текст — подзаголовок, подсказки
 * полей, строка ошибки, согласие в попапе — рисовался медиумом и выглядел
 * жирнее макета. В макете 400 это Onest-Regular, 500 — Onest-Medium.
 *
 * Regular взят с Google Fonts и разбит по подмножествам, чтобы не тянуть
 * лишние алфавиты. Медиум остаётся своим файлом: в нём есть стилистический
 * набор ss01 с широкой единицей, на котором держится таймер.
 */
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('onest-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('onest-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('onest-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                 U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Onest'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('onest-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
                 U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Onest';
  src: url('Onest-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Сглаживание как на Tilda: без него глифы выглядят заметно толще макета */
#neocalc-wrapper,
#neocalc-wrapper * {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== iOS COLOR FIX ===== */
#neocalc-wrapper a,
#neocalc-wrapper a:link,
#neocalc-wrapper a:visited { color: #110000 !important; text-decoration: none; }

#neocalc-wrapper select,
#neocalc-wrapper option {
  color: #110000 !important;
  -webkit-text-fill-color: #110000 !important;
  appearance: none; -webkit-appearance: none;
  background-color: #fff;
}

#neocalc-wrapper .toggle-buttons .button {
  background-color: #fff !important;
  color: #110000 !important;
  -webkit-text-fill-color: #110000 !important;
}
#neocalc-wrapper .toggle-buttons .button.active {
  background-color: #eee !important;
  color: #110000 !important;
  -webkit-text-fill-color: #110000 !important;
}
#neocalc-wrapper input::placeholder { color: #ccc !important; -webkit-text-fill-color: #ccc !important; opacity: 1; }
#neocalc-wrapper input { color: #110000 !important; -webkit-text-fill-color: #110000 !important; }

/* ===== BASE ===== */
#neocalc-wrapper * { box-sizing: border-box; }
#neocalc-wrapper main {
  font-family: 'Onest', sans-serif;
  color: #110000; line-height: 21px; font-size: 17px; text-align: left;
}
#neocalc-wrapper .form-title {
  margin-top: 15px; margin-bottom: 22px;
  font-weight: 500; font-size: 40px; line-height: 44px; letter-spacing: -0.02em;
}
#neocalc-wrapper .form_subtitle { line-height: 18px; margin-bottom: 31px; margin-right: 3px; }
#neocalc-wrapper .result-title {
  margin-bottom: 40px; font-weight: 500; font-size: 40px; line-height: 28px; letter-spacing: -0.02em;
}

/* ===== LAYOUT ===== */
#neocalc-wrapper .row { display: flex; flex-direction: row; justify-content: space-between; }
#neocalc-wrapper .form-container {
  margin: 0 auto; max-width: 1160px; background-color: #EEEEEE;
  padding: 25px 40px; border: 1px solid #E5E5E5 !important; border-radius: 40px;
  position: relative; z-index: 5;
}
#neocalc-wrapper .input-part { min-width: 555px; margin-right: 40px; flex: 2; }
#neocalc-wrapper .result-part { flex: 2; max-width: 500px; }
#neocalc-wrapper .form-size-container { min-height: 536px; }

/* ===== FORM ELEMENTS ===== */
#neocalc-wrapper .form-group { margin-bottom: 13px; max-width: 270px; position: relative; }
#neocalc-wrapper .form-group label {
  font-size: 17px; display: inline-block; margin-bottom: 15px;
  font-weight: 500; color: #110000; padding-left: 20px;
  /* Safari открывает нативный picker, если нажать label скрытого select.
     Связь for оставляем для скринридеров, но pointer-события принимает
     только видимое поле из дизайна. */
  pointer-events: none;
}
#neocalc-wrapper .form-group input,
#neocalc-wrapper .form-group select {
  width: 100%; padding: 15px 20px; font-family: 'Onest', sans-serif;
  font-size: 15px; line-height: 21px; background-color: #fff;
  border-radius: 35px; border: 1px solid #E5E5E5 !important; min-height: 55px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
}
#neocalc-wrapper .form-group input:focus,
#neocalc-wrapper .form-group select:focus { outline: none; }
#neocalc-wrapper .last-input, #neocalc-wrapper .nc-wide { max-width: 100%; }
#neocalc-wrapper .last-input { margin-bottom: 20px; }

#neocalc-wrapper .select-input::after {
  content: url('https://static.tildacdn.com/tild3262-6466-4434-b239-326235303836/Polygon.png');
  position: absolute; right: 20px; top: 48px; pointer-events: none;
}
#neocalc-wrapper .input-container { position: relative; width: 100%; min-height: 55px; }
#neocalc-wrapper input[type=number]::-webkit-outer-spin-button,
#neocalc-wrapper input[type=number]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* ===== BUTTONS ===== */
#neocalc-wrapper button:focus { outline: 1px solid transparent; }
#neocalc-wrapper .button {
  padding: 15px; border: none; border-radius: 50px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 45px; font-size: 17px; font-family: 'Onest', sans-serif;
  font-weight: 500 !important; outline: none;
  transition: background-color .3s ease, color .3s ease;
}
#neocalc-wrapper .submit-button { background-color: #ee0000; color: #fff; border-radius: 35px; }
#neocalc-wrapper .reset-button { background-color: #fff; color: #110000; border: 1px solid #E5E5E5 !important; }
/* По макету: Telegram — серая, «Зафиксировать -20%» — чёрная (см. .nc-lock-button) */
#neocalc-wrapper .telegram-button {
  background-color: #EEEEEE; color: #110000 !important; border: 1px solid #E5E5E5 !important;
}
#neocalc-wrapper .call-button {
  background-color: #EEEEEE; color: #110000 !important; border: 1px solid #E5E5E5 !important; max-width: 270px;
}

/* ─────────────────────────────────────────────────────────────────────────
   Наведение: одно правило на все кнопки.

   1. Раньше у каждой кнопки был свой цвет наведения — красная становилась
      чёрной, чёрная красной. Отсюда ощущение, что кнопки красятся случайно.
      Теперь эффект единый: лёгкое осветление, цвет кнопки не подменяется.

   2. Медиазапрос отключает :hover на тач-экранах. Там состояние «залипает»
      после тапа и держится до касания в другом месте — на телефоне это
      выглядело как произвольная перекраска.
   ───────────────────────────────────────────────────────────────────────── */
/* border-color обязателен в списке: без него рамка переключалась мгновенно,
   а фон ехал 0.2s — на глаз выглядело как «сначала загорается рамка,
   потом сама кнопка» (правка 15.08). Длительности одинаковые. */
#neocalc-wrapper .button {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .15s ease;
}

@media (hover: hover) and (pointer: fine) {
  /* Правило простое: красная кнопка чернеет, все остальные краснеют.
     Так наведение всегда уводит в контрастный цвет и нигде не совпадает
     с исходным состоянием соседней кнопки. */
  #neocalc-wrapper .submit-button:hover {
    background-color: #110000;
    color: #fff !important;
  }

  /* «Сбросить» чернеет, а не краснеет: действие не целевое,
     красный на нём читался бы как призыв нажать */
  #neocalc-wrapper .reset-button:hover {
    background-color: #110000;
    color: #fff !important;
    border-color: #110000 !important;
  }

  #neocalc-wrapper .telegram-button:hover,
  #neocalc-wrapper .call-button:hover,
  #neocalc-wrapper .nc-lock-button:hover {
    background-color: #EE0000;
    color: #fff !important;
    border-color: #EE0000 !important;
  }

  /* Переключатель продуктов красным не красим: красная вкладка читалась бы
     как выбранная и спорила бы с реальным активным состоянием */
  #neocalc-wrapper .toggle-country-button:hover:not(.active) { background-color: #F2F2F2 !important; }

  #neocalc-wrapper .suggestions-box div:hover { background-color: #ffeeee; }
}

/* Отклик на нажатие. Работает и на телефоне: :active держится только
   во время касания, поэтому не «залипает», как :hover */
#neocalc-wrapper .button:active { opacity: .9; }

/* Убираем серую вспышку при тапе на Android и подсветку выделения на iOS */
#neocalc-wrapper .button,
#neocalc-wrapper .suggestions-box div {
  -webkit-tap-highlight-color: transparent;
}
#neocalc-wrapper .button-container { display: flex; justify-content: space-between; gap: 15px; }

/* По макету кнопки стоят в ряд и делят ширину поровну */
#neocalc-wrapper .nc-actions { flex-direction: row; align-items: center; gap: 15px; margin-top: 4px; }
/* Шрифт мельче основного и запрет переноса: «Зафиксировать -20%» и
   «Перейти в Telegram» должны умещаться в одну строку при делении ширины пополам */
#neocalc-wrapper .nc-actions .button {
  flex: 1 1 0; max-width: none;
  font-size: 15px; white-space: nowrap; padding-left: 12px; padding-right: 12px;
}
/* По макету основная кнопка — чёрная, Telegram рядом с ней серая */
#neocalc-wrapper .nc-lock-button { background-color: #110000; color: #fff !important; border: none; }

/* ===== TABS ===== */
#neocalc-wrapper .toggle-buttons {
  display: flex; justify-content: space-between; margin-bottom: 32px;
  padding: 5px; background-color: #fff; border-radius: 35px; border: 1px solid #E5E5E5 !important; gap: 4px;
}
#neocalc-wrapper .toggle-country-button {
  background-color: #fff; font-weight: 500; padding: 15px 0; width: 100%;
}
#neocalc-wrapper .toggle-country-button.active { background-color: #EEEEEE; border: 1px solid #E5E5E5 !important; }

/* ===== SUGGESTIONS ===== */
/* Рамка одна — на всём списке, по скруглению. Раньше она стояла на каждом
   пункте: соседние линии складывались в 2 px, а по бокам шла лишняя обводка,
   которая не повторяла закругление списка. */
#neocalc-wrapper .suggestions-box {
  max-height: 225px; overflow: hidden auto; background: #fff;
  border: 1px solid #E5E5E5; border-radius: 25px;
  min-width: 270px; z-index: 1000; margin-top: 4px; position: absolute;
}
/* Пока список не раскрыт, он пустой — рамка висела бы полоской под полем */
#neocalc-wrapper .suggestions-box:empty { border: 0; }
/* Только прямые потомки: без `>` правило ловило и вложенные элементы пункта,
   и разделитель рисовался дважды — отсюда двойные линии в списке. */
#neocalc-wrapper .suggestions-box > div {
  padding: 12px 16px; cursor: pointer; font-size: 14px; color: #110000;
  border: 0 !important; border-top: 1px solid #E5E5E5 !important;
  transition: background-color .2s ease;
}
/* У первого пункта разделителя быть не должно — иначе он ляжет на рамку списка */
#neocalc-wrapper .suggestions-box > div:first-child { border-top: 0 !important; }
/* Вложенным элементам рамки не достаётся ни при каких условиях */
#neocalc-wrapper .suggestions-box > div * { border: 0 !important; }

/* ===== RESULTS ===== */
#neocalc-wrapper .result-content { padding: 40px 40px 40px; position: relative; min-height: 610px; }

/* Подложка тянется на всю высоту контента.
   Раньше здесь стояла фиксированная min-height: 610px под четыре строки результата.
   После добавления «Скидки», «Комиссии к оплате» и таймера контент перерос подложку,
   и кнопки оказывались за пределами белой карточки. */
#neocalc-wrapper .result-content-bg {
  background-color: #fff;
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  border-radius: 30px;
  border: 1px solid #E5E5E5 !important;
  z-index: -1;
}
#neocalc-wrapper .currency { color: #CCCCCC; }
#neocalc-wrapper .result-group_list { margin: 0 !important; padding: 0 !important; list-style: none; }
#neocalc-wrapper .result-group {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 30px; background-color: #EEEEEE; border: 1px solid #E5E5E5 !important;
  color: #CCCCCC; border-radius: 35px; min-height: 55px; margin-bottom: 15px;
}
#neocalc-wrapper .result-group.nc-filled { color: #110000; }
#neocalc-wrapper .result-group.nc-filled .result-label,
#neocalc-wrapper .result-group.nc-filled .result-value { color: #110000; }
#neocalc-wrapper .result-label { line-height: 21px; font-size: 17px; font-weight: 500; }
#neocalc-wrapper .result-value { font-weight: 500; font-size: 25px; letter-spacing: -0.02em; }

/* «Пилюли» комиссии и экономии — 70% от размера остальных строк (ТЗ) */
#neocalc-wrapper .result-group.nc-small { min-height: 39px; padding: 4px 24px; }
#neocalc-wrapper .result-group.nc-small .result-label { font-size: 15px; }
#neocalc-wrapper .result-group.nc-small .result-value { font-size: 18px; }

/* По макету эти две строки на белом фоне, а обводка — того же серого,
   что и код валюты справа (.currency) */
#neocalc-wrapper .result-group.nc-plain {
  background-color: #fff;
  /* Обводка как у остальных строк результата (правка дизайнера 14.08) */
  border-color: #E5E5E5 !important;
}
/* Полная комиссия зачёркнута — «старая» цена до скидки.
   Линия проходит и через сумму, и через код валюты, цвет тот же серый. */
#neocalc-wrapper .result-group.nc-struck .result-value {
  text-decoration: line-through;
  text-decoration-color: #CCCCCC;
}
#neocalc-wrapper .result-group.nc-total { min-height: 75px; border-radius: 50px; margin-bottom: 32px; }
#neocalc-wrapper .result-group.nc-total .result-label { font-size: 20px; }
#neocalc-wrapper .result-group.nc-total .result-value { font-size: 30px; }

/* ===== STATUS ===== */
/* Строка сообщений под формой. Значения из макета: 17/22, вес 400, #EE0000.
   Ширина ограничена, чтобы длинный текст ошибки ложился в две строки, как нарисовано. */
#neocalc-wrapper .nc-status {
  min-height: 24px; margin: 20px 20px 12px; max-width: 515px;
  font-family: 'Onest', sans-serif;
  font-size: 17px; line-height: 22px; font-weight: 400;
}
#neocalc-wrapper .nc-status-loading, #neocalc-wrapper .nc-status-ok { color: #EE0000; }
#neocalc-wrapper .nc-status-error, #neocalc-wrapper .error-text { color: #EE0000; }

/* ===== FORM VISIBILITY ===== */
#neocalc-wrapper .nc-form { display: none; }
#neocalc-wrapper .nc-form.nc-active { display: block; }

#neocalc-wrapper .background-image {
  z-index: -2; position: absolute; bottom: 0; right: 0; width: 1159px; height: 350px;
  border-radius: 50px; background-size: cover;
  background-image: url('https://static.tildacdn.com/tild6566-6634-4236-b136-343030636231/map.png');
}

/* ═════════════════ НОВОЕ ПО ТЗ ═════════════════ */

/* Незаполненное поле меняет только цвет обводки — толщина прежняя,
   чтобы вёрстка не сдвигалась. Текст ошибки один, в строке .nc-status
   Селекторы с именем тега обязательны: правило `.form-group input`
   специфичнее одиночного класса, и без них красная рамка не появлялась. */
#neocalc-wrapper .nc-invalid,
#neocalc-wrapper .form-group input.nc-invalid,
#neocalc-wrapper .form-group select.nc-invalid,
#neocalc-wrapper .nc-modal .form-group input.nc-invalid,
#neocalc-wrapper .nc-modal .form-group select.nc-invalid,
#neocalc-wrapper .nc-picker-input.nc-invalid {
  border: 1px solid #EE0000 !important;
}

/* Таймер скидки — под кнопками, по центру */
#neocalc-wrapper .nc-timer-block {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 20px; text-align: center;
}
/* Таймер — обычный текст без подложки, крупнее подписи под ним.
   nowrap: строка «До конца предложения: 01:50» не должна разрываться,
   иначе время уезжает на вторую строку к правому краю. */
/* Значения из макета (Dev Mode, 14.08): 17/22, вес 500, #110000 */
#neocalc-wrapper .nc-timer {
  display: inline-flex; align-items: baseline; gap: 6px; white-space: nowrap;
  background: none; border: 0; border-radius: 0; padding: 0;
  font-family: 'Onest', sans-serif;
  font-size: 17px; line-height: 22px; font-weight: 500; color: #110000;
  margin-bottom: 7px;
}
/* tabular-nums — чтобы строка не «дёргалась» при смене цифр */
#neocalc-wrapper #nc-timer-value {
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
/* Последние 30 секунд краснеет только время, подпись «До конца предложения» — нет */
#neocalc-wrapper #nc-timer-value.nc-timer-urgent { color: #EE0000; }

/* Подпись — обычный блок текста, а не flex: иконка должна стоять
   в потоке перед первым словом и переноситься вместе с ним, а не висеть
   отдельным столбиком слева, когда текст занимает две строки. */
/* Значения из макета: 12/15, вес 400, #EE0000, по центру.
   Отступ от молнии до текста — 4 px. */
#neocalc-wrapper .nc-timer-note {
  display: block; text-align: center;
  font-family: 'Onest', sans-serif;
  font-size: 12px; line-height: 15px; font-weight: 400; color: #EE0000; padding: 0;
}
/* Смещение задано в em, а не в пикселях: при 12 px на мобильном и 12 px на
   десктопе иконка одинаково садится по оптической середине строки.
   Фиксированный -1px центрировал её только при одном размере шрифта. */
#neocalc-wrapper .nc-timer-note-icon {
  display: inline-block; vertical-align: -0.12em; margin-right: 4px; line-height: 0;
}
#neocalc-wrapper .nc-timer-note-icon svg { display: block; }

/* Затемнение блока после истечения таймера */
#neocalc-wrapper.nc-expired .result-content { opacity: .75; }

/* Модальные окна */
#neocalc-wrapper { position: relative; }
#neocalc-wrapper .nc-modal { display: none; position: fixed; inset: 0; z-index: 10000; }
#neocalc-wrapper .nc-modal.nc-open { display: block; }

/* Окно «Время предложения истекло» и его затемнение живут внутри блока
   калькулятора, а не поверх всей страницы (правка 15.08). Раньше так было
   только до 1160 px, на десктопе окно затемняло весь сайт целиком.
   Форма заявки остаётся полноэкранной — её нужно заполнять целиком. */
/* Габариты берём от блока, а не от обёртки: #neocalc-wrapper тянется
   во всю ширину секции, а видимый блок — это .form-container с max-width
   1160 (635 на планшете) по центру. С inset: 0 затемнение вылезало
   за края блока на 60 px с каждой стороны. Скругление тоже повторяем,
   иначе углы затемнения торчат за скруглённый блок. */
#neocalc-wrapper #nc-expired-popup {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1160px;
}
#neocalc-wrapper #nc-expired-popup.nc-open {
  display: flex; align-items: center; justify-content: center;
}
#neocalc-wrapper #nc-expired-popup .nc-modal-backdrop {
  border-radius: 40px;
}
#neocalc-wrapper #nc-expired-popup .nc-modal-body {
  margin: 0; max-height: calc(100% - 32px);
}
@media (max-width: 1160px) {
  #neocalc-wrapper #nc-expired-popup { max-width: 635px; }
}
/* На мобильном блок занимает всю ширину и рисуется без скругления */
@media (max-width: 634px) {
  #neocalc-wrapper #nc-expired-popup { max-width: none; }
  #neocalc-wrapper #nc-expired-popup .nc-modal-backdrop { border-radius: 0; }
}
/* Затемнение — чистый чёрный, а не «почти чёрный» #110000 (правка 14.08).
   Курсор-указатель: по затемнению можно закрыть окно. */
#neocalc-wrapper .nc-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, .55);
  cursor: pointer;
}
/* Размеры и цвета сняты с формы «Обратный звонок» на neoved.io:
   карточка серая, поля белые высотой 45px с радиусом 45px и без рамки,
   заголовок 40px/500 по центру, кнопка красная той же высоты. */
#neocalc-wrapper .nc-modal-body {
  position: relative; margin: 5vh auto; max-width: 430px; width: calc(100% - 32px);
  max-height: 90vh; overflow-y: auto;
  background-color: #EEEEEE;
  border-radius: 40px; padding: 40px;
  isolation: isolate;
}

/* Подложка вынесена в отдельный слой: на сайте картинка приглушена
   до opacity .35 и опущена относительно верха карточки примерно на 100px.
   Через background-image на самой карточке прозрачности не добиться —
   она погасила бы и текст. */
#neocalc-wrapper .nc-modal-body::before {
  content: '';
  position: absolute; inset: 0;
  background-image: url('https://static.tildacdn.com/tild3534-6237-4563-b763-636162313530/globe.png');
  background-size: 151.5%;
  background-position: 0 100px;
  background-repeat: no-repeat;
  opacity: .35;
  border-radius: 40px;
  pointer-events: none;
  z-index: 0;
}
#neocalc-wrapper .nc-modal-body > * { position: relative; z-index: 1; }
#neocalc-wrapper .nc-modal-small { max-width: 625px; text-align: center; margin: 23vh auto; padding: 38px 0;}
#neocalc-wrapper .nc-modal-small p {margin-top: 15px;}
#neocalc-wrapper .nc-modal-small .submit-button{    width: 43%;}

#neocalc-wrapper .nc-modal-small::before{background-image:none;}
#neocalc-wrapper .nc-modal .form-title {
  font-size: 40px; line-height: 44px; font-weight: 500; color: #110000;
  margin: 0 0 12px;
}
#neocalc-wrapper .nc-modal-small .form-title{
font-size: 40px;
}
#neocalc-wrapper .nc-modal .form_subtitle {
  font-size: 16px; line-height: 22px; margin-bottom: 24px;
}
#neocalc-wrapper .nc-modal .form-group input,
#neocalc-wrapper .nc-modal .form-group select {
  height: 45px; min-height: 45px; padding: 0 20px;
  font-size: 17px; line-height: 45px;
  background-color: #fff; border: 0 !important; border-radius: 45px;
}
#neocalc-wrapper .nc-modal .form-group select { padding-right: 45px; }
#neocalc-wrapper .nc-modal .button {
  height: 45px; border-radius: 45px; font-size: 17px; margin-top: 8px;
}

/* intl-tel-input оборачивает поле в свой контейнер — растягиваем его
   на всю ширину и прячем рамку, чтобы поле выглядело как остальные */
/* Поле телефона по макету: флаг со скруглением, мелкая серая стрелка,
   код страны тёмный и в одну строку с номером, плейсхолдер серый. */
#neocalc-wrapper .iti { width: 100%; display: block; }
#neocalc-wrapper .iti__tel-input { width: 100%; }

/* Флаг встаёт на те же 20 px от края, что и текст в остальных полях.
   По умолчанию контейнер прижат к нулю и выбивался из общей вертикали. */
#neocalc-wrapper .iti__country-container,
#neocalc-wrapper .iti__flag-container {
  left: 20px !important;
  padding: 0;
  display: flex;
  align-items: center;
}
/* Своё левое поле 8px у этого блока сдвигало флаг на 28px вместо 20 */
#neocalc-wrapper .iti__selected-country-primary { padding-left: 0; }
/* Селекторы без модификатора iti--separate-dial-code: в версии 25
   библиотека этот класс больше не проставляет, и правила не срабатывали. */
#neocalc-wrapper .iti__selected-country {
  background: transparent; border: 0; border-radius: 45px 0 0 45px;
  padding-left: 0;
  display: flex; align-items: center;
}
/* Флаг: чуть крупнее стандартного и со скруглением, как нарисовано.
   Выравнивание по центру даёт flex выше — раньше он «проваливался» вниз,
   потому что спрайт выровнен по базовой линии текста. */
#neocalc-wrapper .iti__flag {
  border-radius: 2px;
  box-shadow: none;
  transform: scale(1.15);
  transform-origin: center;
  top: auto;
  margin-top: -5px;
}
/* Стрелка: мельче и светлее стандартной */
#neocalc-wrapper .iti__arrow {
  border-top-color: #999;
  border-left-width: 4px; border-right-width: 4px; border-top-width: 5px;
  margin-left: 8px;
}
#neocalc-wrapper .iti__arrow--up { border-bottom-color: #999; }
/* Код страны — того же размера и цвета, что и сам номер */
#neocalc-wrapper .iti__selected-dial-code {
  font-size: 17px; color: #110000;
}
/* Отступ до номера здесь НЕ задаём: он зависит от длины кода страны
   («+7» против «+380») и пересчитывается в syncPhonePadding()
   после инициализации и при смене страны. */

#neocalc-wrapper .iti__country-list {
  border-radius: 16px; border: 1px solid #E5E5E5; box-shadow: 0 8px 24px rgba(17, 0, 0, .12);
}
#neocalc-wrapper .iti__country { font-size: 15px; }
/* Крестик стоит в правом верхнем углу всего окна, а не внутри карточки —
   как в попапах Tilda. Внутри он налезал на заголовок формы. */
#neocalc-wrapper .nc-modal-close {
  position: fixed; top: 20px; right: 24px; z-index: 2;
  background: none; border: none; padding: 0;
  font-size: 40px; line-height: 1; cursor: pointer; color: #FFFFFF;
  opacity: .8; transition: opacity .2s ease;
}
#neocalc-wrapper .nc-modal-close:hover { opacity: 1; }
#neocalc-wrapper .nc-modal .form-group { max-width: 100%; margin-bottom: 10px; }
#neocalc-wrapper .nc-modal .form-title,
#neocalc-wrapper .nc-modal .form_subtitle { text-align: center; }
/* Подписей над полями нет, поэтому стрелку селекта поднимаем к центру поля */
#neocalc-wrapper .nc-modal .select-input::after { top: 12px; }

/* Ловушка для ботов: убираем из видимой вёрстки, но оставляем в DOM,
   чтобы автозаполнение спам-скриптов её нашло */
#neocalc-wrapper .nc-hp {
  position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden;
}

/* Отступ задан тексту, а не кнопке. Отрицательный margin работал, пока строка
   статуса всегда занимала место; теперь она схлопывается в ноль, и согласие
   наезжало на кнопку. */
#neocalc-wrapper .nc-consent {
  margin-top: 16px; text-align: center;
  font-size: 11px; line-height: 15px; color: #999;
}
/* Ссылки не выделяются цветом — только подчёркиванием, как в форме на сайте */
#neocalc-wrapper .nc-consent a {
  color: #999 !important;
  text-decoration: underline;
}

/* Строка статуса в форме заявки: пока пустая — не занимает места.
   При появлении текста плавно раскрывается и отодвигает согласие вниз,
   вместо того чтобы держать пустой отступ всё время. */
#neocalc-wrapper #nc-lead-status {
  min-height: 0;
  max-height: 120px;
  margin: 8px 0 0;
  overflow: hidden;
  opacity: 1;
  transition: max-height .25s ease, opacity .25s ease, margin .25s ease;
}
#neocalc-wrapper #nc-lead-status:empty {
  max-height: 0;
  margin: 0;
  opacity: 0;
}
/* Кнопки в модалках всегда по центру: у .button стоит max-width,
   без auto-полей он прижимал бы кнопку к левому краю */
#neocalc-wrapper .nc-modal-body .button { margin-left: auto; margin-right: auto; }
#neocalc-wrapper .nc-modal .form-title { font-size: 40px; line-height: 32px; margin-top: 0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1160px) {
  #neocalc-wrapper .nc-modal-small {
    margin: 35.5vh auto !important;
    width: calc(80% - 43px);
  }
  #neocalc-wrapper .nc-modal-small .form-title{
    font-size: 40px;
    margin-bottom: 16px;
    line-height: 33px;
}
#neocalc-wrapper .nc-modal-small .submit-button{
  margin-top: 19px;
  width: 70% !important;
}
#neocalc-wrapper .nc-modal-small p{
    width: 70%;
    margin: auto;
  }
  #neocalc-wrapper .button-container.nc-actions{
    display: grid;
    margin-top: 0;
    grid-template-columns: calc(50% + 1px) calc(50% - 10px);
  }
  .button.telegram-button{
    padding-left: 1px;
  }
  #neocalc-wrapper .nc-timer-note {
    padding-left: 10px;
  }
  #neocalc-wrapper .nc-timer-note-icon {
    top: 1px;
    left: -2px;
  }
  #neocalc-wrapper .row-main { flex-direction: column; }
  #neocalc-wrapper .form-title, #neocalc-wrapper .form_subtitle, #neocalc-wrapper .result-title { text-align: center; }
  #neocalc-wrapper .form-container { padding: 40px; max-width: 635px; margin: 0 auto; }
  #neocalc-wrapper .input-part { min-width: 100%; margin-right: 0; margin-bottom: 40px; }
  #neocalc-wrapper .result-part, #neocalc-wrapper .result-content-bg { max-width: 100%; }
  #neocalc-wrapper .background-image {
    width: 634px; height: 600px; bottom: 410px;
    background-image: url('https://static.tildacdn.com/tild3234-3339-4564-a461-313636373135/map_635.png');
  }
}

@media (max-width: 634px) {
  #neocalc-wrapper .result-group.nc-small .result-label {font-size: 12px;}
  #neocalc-wrapper main { font-size: 15px; }
  #neocalc-wrapper .row { flex-direction: column; }
  #neocalc-wrapper .form-title { font-size: 25px; line-height: 30px; margin-top: 4px; margin-bottom: 4px; }
  #neocalc-wrapper .form_subtitle {font-size: 15px !important; max-width: 270px;     line-height: 122% !important; margin: 0 auto 14px;}
  #neocalc-wrapper .result-title { font-size: 25px; line-height: 18px; margin-bottom: 20px; }
  /* 45 px — тач-таргет по правке 14.08, было 40 */
  #neocalc-wrapper .button { font-size: 15px; max-width: 280px; height: 45px; }
  #neocalc-wrapper .result-group.nc-total {margin-bottom: 32px !important;}
  #neocalc-wrapper .button-container.nc-actions {width: 88% !important; margin-left: auto; margin-right: auto;}
  #neocalc-wrapper .button-container { flex-direction: column; align-items: center; gap: 10px; }
  /* На узком экране кнопки под результатом тоже уходят в столбик */
  #neocalc-wrapper .nc-actions { flex-direction: column; display: flex !important; }
  #neocalc-wrapper .nc-actions .button { flex: none; width: 100%; max-width: 280px; }
  /* Три вкладки остаются в одну строку и делят ширину поровну */
  #neocalc-wrapper .toggle-buttons { margin-bottom: 13px; flex-wrap: nowrap; gap: 2px; padding: 4px; }
  #neocalc-wrapper .toggle-country-button {
    flex: 1 1 0; min-width: 0; padding: 10px 4px; height: 45px;
    font-size: 14px; white-space: nowrap;
  }
  #neocalc-wrapper .form-container { margin: 0; padding: 0; background: transparent; border: 0 !important; border-radius: 0; }
  /* Серую подложку и внутренние отступы на мобильном даёт сам блок формы,
     иначе поля упираются в края экрана */
  #neocalc-wrapper .input-part {
    min-width: 100%; margin: 0; padding: 20px 20px 25px;
    background-color: #EEEEEE;
    background-image: url('https://static.tildacdn.com/tild6535-3362-4236-b532-346465623633/map_360.webp');
    background-size: 100% auto; background-repeat: no-repeat; background-position: 0 303px;
  }
  #neocalc-wrapper .form-group { margin-bottom: 4px; max-width: 100%; }
  #neocalc-wrapper .form-size-container {min-height: 594px;}
  #neocalc-wrapper .form-group label { font-size: 15px; margin-bottom: 4px; }
  #neocalc-wrapper .form-group input, #neocalc-wrapper .form-group select { padding: 10px 20px; min-height: 45px; }
  #neocalc-wrapper .select-input::after { top: 38px; }
  #neocalc-wrapper .result-content { padding: 20px 20px 29px; min-height: 100%; border: 1px solid #E5E5E5 !important; }
  #neocalc-wrapper .result-content-bg { min-height: 100%; border: 0 !important; }
  #neocalc-wrapper .result-group { min-height: 45px; padding: 6px 20px; }
  #neocalc-wrapper .result-label { font-size: 15px; }
  #neocalc-wrapper .result-value { font-size: 22px; text-align: right; }
  #neocalc-wrapper .result-group.nc-total { min-height: 55px; }
  #neocalc-wrapper .result-group.nc-total .result-label { font-size: 18px; }
  #neocalc-wrapper .result-group.nc-total .result-value { font-size: 25px; }
  #neocalc-wrapper .nc-modal-body { padding: 24px 20px; margin: 2vh auto; }
  /* На узком экране таймер и подпись мельче, чтобы каждая строка была одной */
  /* Размеры те же, что на десктопе: значения заданы макетом (17/22 и 12/15) */
  #neocalc-wrapper .nc-timer { font-size: 17px; line-height: 22px; margin-bottom: 1px; }
  #neocalc-wrapper .nc-timer-note { font-size: 12px; line-height: 15px; padding-left: 0!important; margin-left: -21px;}
  #neocalc-wrapper .nc-timer-block { margin-top: 27px; padding-left: 7px;}
  #neocalc-wrapper .background-image {
    width: 360px; height: 400px; bottom: 30px; background-size: inherit;
    background-image: url('https://static.tildacdn.com/tild6535-3362-4236-b532-346465623633/map_360.webp');
  }
}


/* ==== ПАТЧ ПОД МАКЕТ FIGMA ==== */
/* Патч вёрстки калькулятора под макет Figma «neoved +», страница 0:1, фрейм «1».
 *
 * Значения сняты из Figma REST API (файл 7eWxN6jH89YCLFnCn9XHnB), а не на глаз:
 * каждая цифра ниже соответствует absoluteBoundingBox или style узла макета.
 * Подключать ПОСЛЕ neocalc.css.
 *
 * Что уже совпадает и потому здесь не трогается: палитра целиком
 * (#EEEEEE, #E5E5E5, #110000, #EE0000, #FFFFFF, #CCCCCC), высоты полей 55,
 * радиусы 35/50, высота кнопок 45, высота «Итого» 75, размеры лейблов
 * и значений в крупных строках результата.
 */

/* ── Заголовки ───────────────────────────────────────────────────────
 * В макете «Предварительный расчет» и «Ваш результат» — один стиль:
 * 40 px, вес 500, интерлиньяж 40. В текущей вёрстке интерлиньяж разъехался:
 * у левого 44, у правого 28.
 */
#neocalc-wrapper .form-title,
#neocalc-wrapper .result-title {
  font-size: 40px;
  line-height: 40px;
  font-weight: 500;
  /* В макете у заголовков и у всех числовых значений трекинг −0.02em:
     40 → −0.8, 30 → −0.6, 25 → −0.5, 20 → −0.4. У подписей он нулевой. */
  letter-spacing: -0.02em;
}
#neocalc-wrapper .result-group .result-value { letter-spacing: -0.02em; }

/* Подзаголовок: 17/400, интерлиньяж 21 (в текущей вёрстке 18) */
#neocalc-wrapper .form_subtitle {
  font-size: 17px;
  line-height: 21px;
  font-weight: 400;
}

/* ── Мелкие строки результата: «Комиссия (N%)» и «Экономия» ──────────
 * В макете это отдельный типоразмер: высота блока 35 против 55 у крупных,
 * значение 20 px против 25. Сейчас высота наследуется от .result-group,
 * а значение набрано 18 px.
 */
#neocalc-wrapper .result-group.nc-small {
  min-height: 35px;
  height: 35px;
  /* Внутренние поля как у крупных строк: в макете подпись начинается на 705,
     то есть 30 от левого края строки, а значение заканчивается на 1065 —
     30 от правого. В вёрстке стояло 24, и подписи «Комиссия» и «Экономия»
     уезжали на 6 px влево относительно «Суммы» и «Итого». */
  padding-left: 20px;
  padding-right: 30px;
}
#neocalc-wrapper .result-group.nc-small .result-label {
  font-size: 15px;
  line-height: 19px;
  font-weight: 500;
}
#neocalc-wrapper .result-group.nc-small .result-value {
  font-size: 20px;
  line-height: 25px;
  font-weight: 500;
}

/* ── Таймер и подпись под ним ────────────────────────────────────────
 * Макет: «До конца предложения: 02:00» — 17/500, интерлиньяж 21;
 * «Скидка фиксируется при отправке заявки» — 12/400, интерлиньяж 15.
 * Сейчас 15/21 и 15/20 соответственно — подпись заметно крупнее макета.
 */
#neocalc-wrapper .nc-timer {
  font-size: 17px;
  line-height: 21px;
  font-weight: 500;
  color: #110000;
}
#neocalc-wrapper .nc-timer-note {
  font-size: 12px;
  line-height: 15px;
  font-weight: 400;
  color: #EE0000;
}

/* ── Кнопки нижнего ряда ─────────────────────────────────────────────
 * Макет: «Зафиксировать -20%» 210×45 радиус 35 на #110000;
 * «Перейти в Telegram» 195×45 радиус 50 на #EEEEEE с обводкой.
 * Ширины в макете фиксированные, поэтому задаём минимальные —
 * при сжатии контейнера кнопки всё равно ужимаются.
 */
#neocalc-wrapper .nc-lock-button {
  min-width: 210px;
  border-radius: 35px;
}
#neocalc-wrapper .telegram-button {
  min-width: 195px;
  border-radius: 50px;
}

/* ── Белая карточка результата ───────────────────────────────────────
 * В макете у неё радиус 30 и обводка #E5E5E5, у внешнего серого блока
 * скругления нет вовсе — он тянется во всю ширину секции.
 */
#neocalc-wrapper .result-content-bg {
  border-radius: 30px;
  border: 1px solid #E5E5E5;
  background: #FFFFFF;
}

/* ── Мобильная раскладка ─────────────────────────────────────────────
 * Правка от 11.08: «В моб версии браузера лучше тоже учесть верстку,
 * шире сделать, подогнать под андроид и iOS». Мобильный фрейм макета —
 * 360 px; поля и кнопки занимают всю ширину за вычетом полей 20 px.
 */
@media (max-width: 634px) {
  #neocalc-wrapper .nc-modal-small .submit-button {
        width: 90% !important;
  }
  #neocalc-wrapper .nc-modal-small{
    margin: 36vh auto !important;
    padding: 28px 20px;
    width: calc(100% - 38px);
    border-radius: 31px;
  }
  #neocalc-wrapper .form-title,
  #neocalc-wrapper .result-title {
    font-size: 25px;
    line-height: 30px;
  }
  #neocalc-wrapper .nc-modal-small .form-title {
    font-size: 25px;
    line-height: 100%;
    margin-bottom: 6px;
  }
  #neocalc-wrapper .nc-modal-small p{
        max-width: 85%;
        font-size: 15px;
        line-height: 139%;
        margin: 0px auto 13px;
  }
  #neocalc-wrapper .nc-modal-small .submit-button{
    font-size: 15px;
  }
  #neocalc-wrapper .result-group.nc-small {
    min-height: 35px;
    height: 35px;
  }
  #neocalc-wrapper .result-group.nc-small .result-value {
    font-size: 17px;
    line-height: 21px;
  }
  #neocalc-wrapper .nc-lock-button,
  #neocalc-wrapper .telegram-button {
    min-width: 0;
    width: 100%;
  }
  #neocalc-wrapper .nc-actions {
    flex-direction: column;
    gap: 10px;
  }
}

/* ── Дополнение от 13.08, по результатам проверки на стенде ──────────
 *
 * 1. Единая подсветка вкладок. Правка от 11.08: «Кнопка окрашивается
 *    почти рандомно каждый раз, подсветка единая должна быть».
 *    Причина найдена: у неактивных вкладок обводка #110000 (чёрная),
 *    у активной — #E5E5E5. В макете чёрной обводки нет ни у одной:
 *    контейнер белый, активная вкладка — заливка #EEEEEE с обводкой #E5E5E5.
 */
#neocalc-wrapper .toggle-country-button {
  border-color: #E5E5E5;
}
#neocalc-wrapper .toggle-country-button.active {
  background-color: #EEEEEE;
  border-color: #E5E5E5;
}

/* 2. Красная и чёрная кнопки: белая обводка на цветном фоне даёт
 *    полоску светлее фона по краю. В макете обводки у них нет.
 */
#neocalc-wrapper .submit-button,
#neocalc-wrapper .nc-lock-button {
  border-color: transparent;
}

/* 3. Мобильные кнопки нижнего ряда упирались в max-width: 280px из
 *    базового файла, поэтому width:100% не срабатывал. Правка от 11.08:
 *    «В моб версии браузера лучше тоже учесть верстку, шире сделать».
 */
@media (max-width: 634px) {
  /* Селектор из трёх частей: базовое правило .nc-actions .button имеет
     ту же специфичность, поэтому короткий вариант его не перебивал. */
  #neocalc-wrapper .nc-actions .nc-lock-button,
  #neocalc-wrapper .nc-actions .telegram-button {
    max-width: none;
    width: 100%;
  }
}

/* ── Размер шрифта на кнопках нижнего ряда ───────────────────────────
 * В базовом файле стоит 15 px с nowrap и узкими полями, чтобы две кнопки
 * влезли в колонку. В макете они 17 px при ширинах 210 и 195: сумма
 * с зазором 15 даёт ровно 420 — ширину колонки результата, то есть
 * помещаются и в исходном размере.
 * Специфичность повышена: базовое правило .nc-actions .button равное.
 */
#neocalc-wrapper .nc-actions .nc-lock-button,
#neocalc-wrapper .nc-actions .telegram-button {
  font-size: 17px;
}
@media (max-width: 634px) {
  #neocalc-wrapper .nc-actions .nc-lock-button,
  #neocalc-wrapper .nc-actions .telegram-button {
    font-size: 15px;
  }
}

/* ════════════════════════════════════════════════════════════════════
 * Найдено автоматическим аудитом 13.08.2026
 * ════════════════════════════════════════════════════════════════════ */

/* ── Фокус с клавиатуры: убран по правке Димы от 14.08 ──────────────
 * Было: обводка 2 px #110000 на :focus-visible. Дима: «Фокус с клавиатуры
 * убрать, про него никто не говорил, вместо этого в активном поле скрывать
 * текст "Введите ..."». Обводку снимаем, подсказку прячем на фокусе.
 *
 * Оговорка на будущее: без видимого фокуса форму нельзя пройти с клавиатуры
 * вслепую. Если вернёмся к доступности — сюда.
 */
#neocalc-wrapper .nc-form input:focus-visible,
#neocalc-wrapper .nc-form select:focus-visible,
#neocalc-wrapper .nc-modal input:focus-visible,
#neocalc-wrapper .nc-modal select:focus-visible,
#neocalc-wrapper .nc-picker-input:focus-visible,
#neocalc-wrapper .button:focus-visible {
  outline: none;
  outline-offset: 0;
}
#neocalc-wrapper .nc-form input:focus-visible,
#neocalc-wrapper .nc-picker-input:focus-visible {
  border-color: #E5E5E5;
}

/* Подсказка исчезает, как только в поле встали.
   !important и -webkit-text-fill-color обязательны: в базовом файле
   цвет подсказки задан через `input::placeholder { color: #ccc !important;
   -webkit-text-fill-color: #ccc !important }`, и без них правило не работает. */
#neocalc-wrapper input:focus::placeholder,
#neocalc-wrapper .nc-picker-input:focus::placeholder {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}

/* ── Таймер: широкая единица и ровная ширина цифр ────────────────────
 * Табличные цифры (tnum) выравнивают ширину, но единицу они подставляют
 * узкую в широком боксе — вокруг неё оставался заметный воздух, из-за
 * чего «02:00» и «01:59» выглядели по-разному набранными.
 *
 * В Onest есть широкая единица: стилистический набор ss01 меняет `one`
 * на `tab_1` шириной 672 против 372 у обычной. Проверено рендером:
 * ss01 применяется поверх tnum, ширина строки та же (178.6 px против
 * 178.6 у одного tnum), то есть скачков не появляется.
 */
#neocalc-wrapper .nc-timer,
#neocalc-wrapper .nc-timer #nc-timer-value {
  font-variant-numeric: tabular-nums;
  /* Ниже в этом же правиле стояла вторая строка font-feature-settings
     с одним tnum — она перебивала ss01, и единица снова становилась
     обычной. Оставляем один набор фич, и он последний. */
  font-feature-settings: 'ss01' 1, 'tnum' 1;
}

/* ── Тач-таргеты на мобильном ────────────────────────────────────────
 * Вкладки и кнопки были 40 px при рекомендованном минимуме 44.
 * Промах пальцем на телефоне — прямая потеря заявки.
 */
@media (max-width: 634px) {
  /* 45 px по правке от 14.08 (было 40) */
  #neocalc-wrapper .button,
  #neocalc-wrapper .toggle-country-button {
    height: 45px;
    min-height: 45px;
    font-size: 15px;
  }
}

/* ── Плейсхолдер поля страны ─────────────────────────────────────────
 * Текст «Буквенный код / название страны» не влезал в поле шириной 270
 * и обрезался на 16 px. Текст укорочен в neocalc-client.js; на случай
 * длинных значений добавлено многоточие вместо жёсткой обрезки.
 */
#neocalc-wrapper .nc-form input,
#neocalc-wrapper .nc-form select {
  text-overflow: ellipsis;
}

/* ── Единые выпадающие списки (см. neocalc-pickers.js) ───────────────
 * Нативный select прячем, но не удаляем: он держит значение и на нём
 * висит существующая валидация. Видимым становится текстовое поле
 * с тем же поведением, что у поля страны.
 */
/* Селектор поднят по специфичности: в попапе правило
   `.nc-modal .form-group input` перебивало высоту и оставляло от спрятанного
   поля прозрачный блок в 45px */
#neocalc-wrapper .form-group select.nc-picker-hidden,
#neocalc-wrapper .form-group input.nc-picker-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  padding: 0;
  border: 0;
}
#neocalc-wrapper .nc-picker-input {
  width: 100%;
  height: 55px;
  padding: 0 20px;
  border: 1px solid #E5E5E5;
  border-radius: 35px;
  background: #FFFFFF;
  color: #110000;
  font-size: 15px;
  font-family: inherit;
  text-overflow: ellipsis;
  cursor: pointer;
}
#neocalc-wrapper .nc-picker-input:focus-visible {
  outline: 2px solid #110000;
  outline-offset: 2px;
  border-color: #110000;
}
/* Панель ставится скриптом в координатах окна (position: fixed).
   В обычном потоке её обрезала карточка попапа: у .nc-modal-body
   стоит overflow-y: auto, и список времени было видно наполовину. */
#neocalc-wrapper .nc-picker-box {
  z-index: 1000;
  border: 1px solid #E5E5E5;
  box-shadow: 0 8px 24px rgba(17, 0, 0, .12);
}
#neocalc-wrapper .nc-picker-box:empty { display: none; }
/* Выбранный пункт видно сразу: список открывается на нём */
#neocalc-wrapper .suggestions-box div.nc-picker-current { background-color: #F2F2F2; font-weight: 500; }
#neocalc-wrapper .suggestions-box div.nc-picker-current:hover { background-color: #ffeeee; }

/* ── Календарь (см. neocalc-pickers.js) ──────────────────────────────
 * Нативный type="date" рисуется каждым браузером по-своему и не
 * ограничивает год четырьмя знаками — в поле можно было оставить
 * «31-Apr-19999». Здесь свой выбор даты: будни, начиная с сегодняшнего,
 * ровно те же правила, что проверяет сервер.
 */
#neocalc-wrapper .nc-datepicker {
  position: absolute;
  z-index: 1000;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-radius: 25px;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(17, 0, 0, .12);
  color: #110000;
  font-family: inherit;
}
#neocalc-wrapper .nc-datepicker:empty { display: none; }
#neocalc-wrapper .nc-dp-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
#neocalc-wrapper .nc-dp-title { font-size: 15px; font-weight: 500; }
#neocalc-wrapper .nc-dp-nav {
  width: 28px; height: 28px; min-height: 0; padding: 0;
  border: 1px solid #E5E5E5; border-radius: 50%;
  background: #FFFFFF; color: #110000;
  font-size: 16px; line-height: 1; font-family: inherit; cursor: pointer;
}
#neocalc-wrapper .nc-dp-nav:hover:not(:disabled) { background: #F2F2F2; }
#neocalc-wrapper .nc-dp-nav:disabled { opacity: .35; cursor: default; }
#neocalc-wrapper .nc-dp-week {
  display: grid; grid-template-columns: repeat(7, 1fr);
  text-align: center; color: #999999; font-size: 12px; margin-bottom: 4px;
}
#neocalc-wrapper .nc-dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
#neocalc-wrapper .nc-dp-empty { height: 34px; }
#neocalc-wrapper .nc-dp-day {
  height: 34px; min-height: 0; padding: 0;
  border: 1px solid transparent; border-radius: 50%;
  background: #FFFFFF; color: #110000;
  font-size: 14px; font-family: inherit; cursor: pointer;
}
#neocalc-wrapper .nc-dp-day:hover:not(.nc-dp-off) { background: #FFEEEE; }
#neocalc-wrapper .nc-dp-today { border-color: #E5E5E5; }
/* Выходные и прошедшие дни: сервер их всё равно отклонит */
#neocalc-wrapper .nc-dp-off { color: #CCCCCC; cursor: default; }
#neocalc-wrapper .nc-dp-picked,
#neocalc-wrapper .nc-dp-picked:hover { background: #110000; color: #FFFFFF; border-color: #110000; }

/* ── Подгонка под макет: положение элементов ────────────────────────
 * Размеры элементов совпадали, а положения — нет: расхождение копилось
 * сверху вниз и к кнопке «Рассчитать» достигало 46 px. Отступы пересчитаны
 * по координатам узлов фрейма «desktop» (1160×660) в Figma.
 *
 * Текстовые узлы в Figma обрезаны по глифам: 40 px шрифт даёт коробку 28.
 * Поэтому целевое положение считается от глифа, а CSS-строка выше него
 * на половину разницы с интерлиньяжем.
 *
 * Только для десктопа: мобильные отступы заданы в @media (max-width: 634px)
 * выше по файлу, и без этой обёртки правки перебили бы их по порядку.
 */
@media (min-width: 635px) {
  /* Рамка 1px плюс padding 25 давали отступ 26 и высоту блока 662.
     С 24 контент начинается ровно на 25, а блок выходит 660, как в макете. */
  #neocalc-wrapper .form-container { padding: 24px 39px; }

  /* Иконка-молния в макете 9×10 и висит слева от подписи, не входя
     в её центрирование: текст отцентрован по карточке, молния — за его
     левым краем. В вёрстке она была 16px и участвовала в центрировании,
     из-за чего подпись уезжала вправо на 11px. */
  #neocalc-wrapper .nc-timer-note { position: relative; padding-left: 15px;}
  #neocalc-wrapper .nc-timer-note-icon {
    position: absolute;
    left: 1px;
    top: 3px;
    width: 9px;
    height: 10px;
  }
  #neocalc-wrapper .nc-timer-note-icon svg { width: 9px; height: 10px; display: block; }
  /* Положение кнопки «Рассчитать» задаёт не отступ, а min-height контейнера
     полей: 536 ставили её на 569, в макете она на 575. Отступы внутри
     контейнера её не двигают, пока он держится на минимальной высоте. */
  #neocalc-wrapper .form-size-container { min-height: 541px; }
  #neocalc-wrapper .form-title { margin-top: 9px; margin-bottom: 12px; }
  /* В макете подзаголовок начинается на 3 px правее заголовка: замер по
     пикселям даёт «стенд 41, макет 44» при полном совпадении заголовка.
     Воспроизводим как нарисовано. */
  #neocalc-wrapper .form_subtitle { margin-bottom: 26px; padding-left: 3px; }
  /* 4 + 45 + 4 + 2 рамки = 55, как в макете; было 5 и давало 57 */
  #neocalc-wrapper .toggle-buttons { padding: 4px; margin-bottom: 28px; }
  #neocalc-wrapper .form-group label { margin-bottom: 10px; }
  #neocalc-wrapper .form-group { margin-bottom: 9px; }

  #neocalc-wrapper .result-content { padding-top: 34px; padding-bottom: 19px; }
  #neocalc-wrapper .result-title { margin-bottom: 34px; }
  #neocalc-wrapper .nc-timer-block { margin-top: 14px; padding-left: 2px;}
  #neocalc-wrapper .nc-timer { margin-bottom: 1px; }
}

/* ── Расстояния в правой колонке ────────────────────────────────────
 * Размеры самих строк совпадали с макетом, а зазоры между ними — нет:
 * 15 px против 10 в макете, и 32 px под «Итого» против 25. На шести
 * строках это давало +32 px, из-за чего весь блок был выше макета.
 * Значения сняты по координатам узлов в Figma, а не на глаз.
 */
#neocalc-wrapper .result-group { margin-bottom: 10px; }
#neocalc-wrapper .result-group.nc-total { margin-bottom: 25px; }

/* Подсказка под кнопками результата и подписи под полями убраны 15.08:
   текст ошибки должен быть один и только в строке .nc-status.
   Правила оставлены скрывающими на случай, если элементы придут
   из закэшированной сборки клиента. */
#neocalc-wrapper .nc-precalc-note,
#neocalc-wrapper .nc-field-error { display: none !important; }

@media (max-width: 634px) {
  #neocalc-wrapper .nc-picker-input { height: 44px; font-size: 14px; }
}

#neocalc-wrapper .result-group.nc-struck .result-value {
  position: relative;
  text-decoration: none;
}

/* До расчёта строка пустая — зачёркивать нечего, а линия висела сама по себе */
#neocalc-wrapper .result-group.nc-struck:not(.nc-filled) .result-value::after {
  display: none;
}

#neocalc-wrapper .result-group.nc-struck .result-value::after {
  content: '';
  position: absolute;
  left: -6px;              /* вылет слева */
  right: -6px;             /* вылет справа */
  top: 45%;
  height: 2px;
  transform: translateY(-50%);
  background: #CCCCCC;
  pointer-events: none;
}

/* ── Планшет: собственный внутренний отступ контейнера ────────────────
 * Правило «padding: 40px» задано в @media (max-width: 1160px), но ниже по
 * файлу идёт блок подгонки под макет @media (min-width: 635px) с padding
 * 24/39 — он перекрывал его на всём диапазоне шире 634px, включая планшет.
 *
 * Диапазонный запрос решает это без !important: он ограничен сверху и снизу,
 * стоит последним в файле и не задевает ни мобильную версию, ни десктоп.
 */
@media (min-width: 635px) and (max-width: 1160px) {
  #neocalc-wrapper .form-container { padding: 40px; }
}

/* ══ Сверка с макетом: состояние ошибки (кадры «calc») ══════════════════
 * Замеры стенда против координат узлов Figma: desktop 2998:65 сходился,
 * planшет и мобильный — нет. Ниже только то, что расходилось.
 */

/* Планшет: сверху у блока было 40 px против 24 в макете, из-за чего весь
   блок — переключатель, поля, кнопки, карточка — ехал вниз ровно на 16 px,
   а высота выходила 1327 вместо 1310. Снизу 40 остаётся: в макете под
   карточкой как раз 40. */
@media (min-width: 635px) and (max-width: 1160px) {
  /* Боковые 39, а не 40: рамка блока в 1 px входит в ширину 635, и с сорока
     содержимое вставало на 41 вместо 40, а по ширине было на 2 px уже.
     Снизу 39 по той же причине — в макете под карточкой ровно 40. */
  #neocalc-wrapper .form-container { padding: 24px 39px 39px; }
}

/* Молния под таймером. В макете на всех трёх ширинах зазор до текста 4 px,
   а группа «молния + подпись» стоит по центру строки таймера. У нас группа
   собиралась из инлайнового значка с margin-right и текста, поэтому на
   мобильном уезжала на 8 px влево от таймера. Флексом центр совпадает
   с центром строки при любой ширине. */
#neocalc-wrapper .nc-timer-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding-left: 0 !important;
  /* На мобильном подпись сдвигали на -21 px, чтобы визуально уравновесить
     торчащий значок. Со строкой-флексом сдвиг уводит её мимо центра. */
  margin-left: 0 !important;
}
#neocalc-wrapper .nc-timer-note-icon {
  /* Значок был выведен из потока (position: absolute; left: 1px) и потому
     прилипал к левому краю подписи вместо того, чтобы стоять перед текстом.
     Во флексе он снова обычный элемент строки. */
  position: static;
  left: auto;
  top: auto;
  margin-right: 0;
  flex: none;
}

@media (max-width: 634px) {
  /* Заголовки: кегль 25 совпадал, интерлиньяж в макете 40, а не 30 */
  #neocalc-wrapper .form-title,
  #neocalc-wrapper .result-title { line-height: 40px; }
  #neocalc-wrapper .form-title { margin-top: 9px; margin-bottom: 0; }
  #neocalc-wrapper .form_subtitle { line-height: 19px; margin-bottom: 16px; }

  /* Переключатель: в макете 45 в высоту против 55 на десктопе,
     вкладки 35 против 45, внутренние отступы и зазоры по 5 */
  #neocalc-wrapper .toggle-buttons { padding: 5px; gap: 5px; margin-bottom: 11px; }
  #neocalc-wrapper .toggle-country-button {
    height: 35px;
    min-height: 35px;
    padding: 5px 4px;
  }

  /* Подписи полей: интерлиньяж 19, а стоял 21 */
  #neocalc-wrapper .form-group label { line-height: 19px; margin-bottom: 6px; }
  #neocalc-wrapper #nc-form-payment .form-group,
  #neocalc-wrapper .nc-form .form-group { margin-bottom: 5px; }

  /* Текст ошибки: на мобильном в макете 15/19 по центру,
     а стоял десктопный 17/22 по левому краю */
  #neocalc-wrapper .nc-status {
    font-size: 15px;
    line-height: 19px;
    text-align: center;
    margin-top: 10px;
  }

  /* Карточка результата: 577 в макете против 607 у нас */
  #neocalc-wrapper .result-content { padding-top: 8px; padding-bottom: 26px; }
  #neocalc-wrapper .result-title { margin-bottom: 9px; }
}


/* ── Состояние ошибки, второй проход ────────────────────────────────────
 * Остаток после первого замера: строка таймера и мобильная вертикаль.
 */

/* Сдвиг строки таймера влево (7 px на мобильном, 2 на десктопе) был
   компенсацией инлайновой молнии: она торчала слева и текст казался
   несимметричным. После того как группа стала флексом с центрированием,
   компенсация уводит её мимо центра блока. */
#neocalc-wrapper .nc-timer-block { padding-left: 0 !important; }
#neocalc-wrapper .nc-timer-note { width: 100%; }

@media (max-width: 634px) {
  /* Заголовок в макете на 9 px от верха блока, а верхний отступ в 20 px
     уводил его на 29. Карта на фоне привязана к тому же боксу и вместе
     с отступом тоже встаёт на место — в макете вектор на отметке 303. */
  #neocalc-wrapper .input-part { padding-top: 0; }

  /* line-height: 122% давало 18.3 при кегле 15, в макете 19.
     Ширина слоя подзаголовка в макете 320, а не 270. */
  #neocalc-wrapper .form_subtitle { line-height: 19px !important; max-width: 320px; }

  /* 4 + 35 + 4 + рамка = 45 в высоту, зазоры по 5 → вкладки ровно по 100 */
  #neocalc-wrapper .toggle-buttons { padding: 4px; gap: 5px; }

  /* Низ карточки: от «Итого» до кнопок 25, от кнопок до таймера 19 */
  #neocalc-wrapper .result-group.nc-total { margin-bottom: 25px; }
  #neocalc-wrapper .nc-timer-block { margin-top: 19px; }
  #neocalc-wrapper .nc-timer { line-height: 22px; }
}


/* ── Подписи полей на мобильном ─────────────────────────────────────────
 * Подпись была inline-block, поэтому попадала в строку с интерлиньяжем 21
 * и добавляла лишний пиксель сверху к каждой группе. За пять полей набегало
 * пять пикселей, и поле суммы уезжало от макета. Блочная подпись занимает
 * ровно свои 19.
 */
@media (max-width: 634px) {
  #neocalc-wrapper .form-group label { display: block; }
}


/* ── Состояние ошибки, остатки ──────────────────────────────────────────*/

/* Зазор между вкладками в макете 5, а не 4: при 555 в ширину это даёт
   вкладки 178 / 179 / 178 — ровно как нарисовано. С четвёркой выходило
   по 180 и правая вкладка не попадала на своё место. */
@media (min-width: 635px) {
  #neocalc-wrapper .toggle-buttons { gap: 5px; }
}

@media (min-width: 635px) and (max-width: 1160px) {
  /* Кнопки под карточкой: в макете 236 и 224 при зазоре 15 — это ровно
     475, ширина карточки внутри отступов. Гибкие доли давали 238.5 и 227.5,
     и правая кнопка вылезала за край на 7 px. */
  #neocalc-wrapper .nc-lock-button { flex: 0 0 236px; width: 236px; min-width: 0; }
  #neocalc-wrapper .telegram-button { flex: 0 0 224px; width: 224px; min-width: 0; }
}

@media (max-width: 634px) {
  /* Строка ошибки в макете начинается ровно на нижней границе группы поля
     суммы, а до кнопок от неё 12 px. Отступы между строкой и формой
     схлопываются, поэтому зазор до кнопок задан внутренним отступом
     контейнера — он не схлопывается ни с чем. */
  #neocalc-wrapper .nc-status { margin-top: 0; }
  #neocalc-wrapper #nc-form-payment .form-group.last-input { margin-bottom: 0; }
  #neocalc-wrapper .input-part .button-container { padding-top: 0; }
  /* От «Итого» до кнопок в макете 25, стояло 32. Ниже по файлу значение
     закреплено через !important, поэтому здесь тоже без него не обойтись. */
  #neocalc-wrapper .result-content .result-group.nc-total { margin-bottom: 25px !important; }
}

@media (min-width: 635px) and (max-width: 1160px) {
  /* Кнопки: 236 + 15 + 224 = 475, ровно ширина карточки внутри отступов.
     Строка кнопок — грид с равными колонками, поэтому одной шириной кнопок
     дело не решалось: правая вставала по своей колонке, а не за левой.
     Задаём сами колонки. */
  #neocalc-wrapper .button-container.nc-actions {
    grid-template-columns: 236px 224px;
    gap: 15px;
  }
}

@media (max-width: 634px) {
  /* Рамка карточки съедала пиксель: при внутреннем отступе 20 строки
     начинались на 21 и были 318 в ширину вместо 320. */
  #neocalc-wrapper .result-content { padding-left: 19px; padding-right: 19px; }
}

@media (max-width: 634px) {
  /* Ширина строки кнопок была задана долей от карточки (88%) и поехала,
     как только внутренний отступ карточки стал 19. В макете кнопки 280. */
  #neocalc-wrapper .button-container.nc-actions { width: 280px !important; }
}


/* ══ Попап заявки: сверка с макетом (кадры «form») ══════════════════════
 * Макет появился 15.08: 3073:706 — десктоп и планшет (панель 420×565),
 * 3073:746 — мобильный (330×490). До этого попап собирался по форме
 * с Тильды, отсюда расхождения в кеглях и отступах.
 */
/* Только форма заявки: окно истёкшего таймера — другой размер,
   раньше оно перенимало эту ширину и текст в нём ломался на три строки. */
#neocalc-wrapper #nc-lead-modal .nc-modal-body {
  width: 420px;
  max-width: 420px;
  padding: 24px 35px 26px;
}
#neocalc-wrapper .nc-modal .form-title {
  font-size: 40px;
  line-height: 51px;
  margin: 0 0 10px;
}
#neocalc-wrapper .nc-modal .form_subtitle {
  font-size: 17px;
  line-height: 22px;
  margin: 0 0 21px;
}
#neocalc-wrapper .nc-modal .nc-consent {
  font-size: 13px;
  line-height: 17px;
}
/* В попапе плейсхолдер светлее, чем в самом калькуляторе: там #CCCCCC,
   здесь #AAAAAA. Оба значения из макета, не наши. */
#neocalc-wrapper .nc-modal input::placeholder {
  color: #AAAAAA !important;
  -webkit-text-fill-color: #AAAAAA !important;
}
#neocalc-wrapper .nc-modal input::-webkit-input-placeholder {
  color: #AAAAAA !important;
  -webkit-text-fill-color: #AAAAAA !important;
}

@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .nc-modal-body {
    width: 330px;
    max-width: 330px;
    padding: 16px 20px 20px;
  }
  #neocalc-wrapper .nc-modal .form-title { font-size: 25px; line-height: 32px; margin: 0 0 6px; }
  #neocalc-wrapper .nc-modal .form_subtitle { font-size: 15px; line-height: 19px; margin: 0 0 17px; }
  #neocalc-wrapper .nc-modal .nc-consent { font-size: 12px; line-height: 15px; }
  /* Поля и кнопка в мобильном макете 40 в высоту против 45 на десктопе */
  #neocalc-wrapper .nc-modal input,
  #neocalc-wrapper .nc-modal select,
  #neocalc-wrapper .nc-modal .submit-button {
    height: 40px;
    min-height: 40px;
    font-size: 15px;
  }
  #neocalc-wrapper .nc-modal .submit-button { width: 290px; max-width: 290px; }
}


/* Подзаголовок попапа: в макете он ровно в две строки, разделённые
   переносом. У нас первая строка не влезала и ломалась пополам, потому что
   к тексту прилипал левый отступ в 3 px из калькулятора: строке нужно 347.5,
   а оставалось 347. Отступ здесь ни к чему — текст по центру. */
#neocalc-wrapper .nc-modal .form_subtitle { padding-left: 0; }

@media (max-width: 634px) {
  /* На мобильном строка длиннее колонки полей: в макете подзаголовок 303 px
     при колонке 290, то есть он выходит за неё на 7 px с каждой стороны. */
  #neocalc-wrapper .nc-modal .form_subtitle { margin-left: -9px; margin-right: -9px; }

  /* Высота полей: правило .form-group input задаёт 45, короткий селектор
     его не перебивал */
  #neocalc-wrapper .nc-modal .form-group input,
  #neocalc-wrapper .nc-modal .form-group select,
  #neocalc-wrapper .nc-modal .form-group .iti input,
  #neocalc-wrapper .nc-modal .nc-picker-input {
    height: 40px;
    min-height: 40px;
    line-height: 40px;
    font-size: 15px;
  }
  #neocalc-wrapper .nc-modal .form-group { min-height: 40px; }
}


/* Высота панели попапа добирается отступами: в макете 565 на десктопе
   и 490 на мобильном. Телефонное поле: флаг в макете в 13 px от края
   поля, текст — в 52. */
#neocalc-wrapper #nc-lead-modal .nc-modal-body { padding-bottom: 28px; }
/* Блок страны стоит абсолютно на left: 20px от края поля, в макете флаг
   в 13. Двигаем сам блок, а не его внутренний отступ. */
/* left задан через !important в общем правиле для обеих версий плагина */
#neocalc-wrapper .nc-modal .iti__country-container { left: 13px !important; }
/* Стрелка в макете 5x4 и в 5 px от флага, у нас была 8x5 и в 8 */
#neocalc-wrapper .nc-modal .iti__arrow {
  border-left-width: 2.5px;
  border-right-width: 2.5px;
  border-top-width: 4px;
  margin-left: 5px;
}
#neocalc-wrapper .nc-modal .iti__selected-country { padding-left: 0; }
#neocalc-wrapper .nc-modal .iti__selected-country-primary { padding-right: 5px; }
/* Код страны — отдельный элемент плагина, он стоит перед полем ввода.
   В макете строка «+7 (000) 000-00-00» начинается на 52 px от края поля,
   значит с 52 начинается код, а плейсхолдер идёт за ним через пробел. */
/* Код страны: в макете строка «+7 (000) 000-00-00» начинается на 52 px
   от края поля, между кодом и номером обычный пробел. */
#neocalc-wrapper .nc-modal .iti__selected-dial-code { padding-left: 1px; }
/* Код страны теперь набирается в самом поле, слева остались только флаг
   и стрелка — постоянной ширины. Поэтому отступ снова фиксированный:
   в макете строка «+7 (000) 000-00-00» начинается на 52 px от края поля.
   Раньше здесь стояло 74 (флаг + отдельный блок с кодом), и трёхзначный
   код вроде «+380» в этот отступ не помещался и налезал на номер. */
#neocalc-wrapper .nc-modal .iti .iti__tel-input { padding-left: 52px !important; }

@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .nc-modal-body { padding-top: 21px; padding-bottom: 25px; }
  #neocalc-wrapper .nc-modal .iti__country-container { left: 11px !important; }
  /* На мобильном код набран тем же кеглем, что и подсказка — 15 */
  #neocalc-wrapper .nc-modal .iti__selected-dial-code {
    padding-left: 1px;
    margin-left: 0;
    font-size: 15px;
  }
  #neocalc-wrapper .nc-modal .iti .iti__tel-input { padding-left: 46px !important; }
}


/* Подпись и значение строки результата держатся в одну строку: высота
   строки в макете фиксированная, перенос ломает всю вертикаль под ней.
   Если значение не влезает, его кегль ужимает neocalc-client.js. */
#neocalc-wrapper .result-group { flex-wrap: nowrap; }
#neocalc-wrapper .result-group .result-label,
#neocalc-wrapper .result-group .result-value { white-space: nowrap; }


/* Высота блока в макете зависит от числа полей вкладки: на мобильном
   «Платеж» 1310, «Карта» 1150, «Крипто» 1075; на планшете 1310 и 1215.
   Общая min-height держала высоту самой длинной вкладки, и под короткими
   оставалось пустое место в 160–235 px. На десктопе высоту задаёт карточка
   результата — там ограничение ни на что не влияет и остаётся. */
@media (max-width: 1160px) {
  #neocalc-wrapper .form-size-container { min-height: 0; }
}

/* Строка ошибки занимает место всегда, даже когда её нет: в макете она
   нарисована во всех кадрах и лишь спрятана в заполненных состояниях,
   а расстояние от последнего поля до кнопок везде одинаковое — 79 px
   на мобильном и 82 на планшете. Без резерва блок при удачном расчёте
   подскакивал на высоту сообщения. */
#neocalc-wrapper .nc-status { min-height: 44px; }
@media (max-width: 634px) {
  #neocalc-wrapper .nc-status { min-height: 57px; }
}


/* Планшет: от последнего поля до кнопок в макете 82 px. Раньше недостающие
   7 добирались общей min-height формы, но она же держала лишнюю высоту
   на коротких вкладках. Теперь зазор задан там, где он и есть. */
@media (min-width: 635px) and (max-width: 1160px) {
  #neocalc-wrapper .nc-status { margin-bottom: 19px; }
}


/* ══ Замечания 16.08 ═══════════════════════════════════════════════════ */

/* Окно «Время предложения истекло» по кадрам alert: панель 625×210
   на десктопе, 466×272 на планшете, 320×206 на мобильном, фон #EEEEEE
   и скругление 40 (30 на мобильном). До этого окно перенимало размеры
   формы заявки — 420 в ширину, и заголовок ломался на три строки. */
#neocalc-wrapper #nc-expired-popup .nc-modal-body {
  width: 625px;
  max-width: 625px;
  padding: 34px 25px 38px;
  border-radius: 40px;
  background-color: #EEEEEE;
  text-align: center;
}
#neocalc-wrapper #nc-expired-popup .form-title {
  font-size: 40px;
  line-height: 40px;
  margin: 0 0 11px;
}
/* Подзаголовок окна — обычный абзац без класса */
#neocalc-wrapper #nc-expired-popup .nc-modal-body p {
  font-size: 17px;
  line-height: 22px;
  margin: 0 0 20px;
  max-width: none;
}
/* Перенос строки нужен только там, где строка не помещается в одну */
#neocalc-wrapper .nc-br-narrow { display: none; }
@media (max-width: 1160px) {
  #neocalc-wrapper .nc-br-narrow { display: inline; }
}
#neocalc-wrapper #nc-expired-popup .submit-button,
#neocalc-wrapper #nc-expired-popup .button {
  width: 270px;
  max-width: 270px;
  height: 45px;
  min-height: 45px;
  margin: 0 auto;
  border-radius: 35px;
}

@media (min-width: 635px) and (max-width: 1160px) {
  #neocalc-wrapper #nc-expired-popup .nc-modal-body { width: 466px; max-width: 466px; }
}
@media (max-width: 634px) {
  #neocalc-wrapper #nc-expired-popup .nc-modal-body {
    width: 320px;
    max-width: 320px;
    padding: 26px 20px 28px;
    border-radius: 30px;
  }
  #neocalc-wrapper #nc-expired-popup .form-title { font-size: 25px; line-height: 25px; margin: 0 0 7px; }
  #neocalc-wrapper #nc-expired-popup .nc-modal-body p { font-size: 15px; line-height: 19px; margin: 0 0 16px; }
  #neocalc-wrapper #nc-expired-popup .nc-modal-body .submit-button,
  #neocalc-wrapper #nc-expired-popup .nc-modal-body .button {
    width: 260px; max-width: 260px; height: 40px; min-height: 40px;
  }
}

/* Подписи мелких строк результата стояли на 10 px левее крупных: у них был
   свой левый отступ в 20 против 30. В макете все подписи по одной линии. */
#neocalc-wrapper .result-group.nc-small { padding-left: 30px; }
@media (max-width: 634px) {
  #neocalc-wrapper .result-group.nc-small { padding-left: 20px; }
}

/* Флаг в поле телефона: в макете круглый 19×19.
 *
 * Плагин рисует флаг куском общего спрайта 20×15, поэтому просто задать
 * размер нельзя — поедут координаты всех стран. Берём из спрайта квадрат
 * и масштабируем элемент целиком: zoom тянет и картинку, и смещение,
 * заданное правилом страны, так что флаг остаётся тем же, просто крупнее
 * и обрезанным по кругу. */
/* Флаг рисуется своей картинкой (см. ниже), спрайт плагина больше
   не используется — значит и подгонять его размер не нужно. */
#neocalc-wrapper .nc-modal .iti__flag {
  width: 19px;
  height: 19px;
  /* Зазор до стрелки задан её собственным отступом в 5 px — как в макете,
     своего справа флагу не нужно. */
  margin: 0;
}
/* Код страны в макете набран тем же серым, что и подсказка */
#neocalc-wrapper .nc-modal .iti__selected-dial-code { color: #AAAAAA; }


/* Ширины внутри окна таймера заданы долями от панели (70% у абзаца,
   90% у кнопки через !important) — от старой вёрстки, когда панель была
   другой. По макету абзац занимает всю ширину, а кнопка ровно 270 и 260. */
#neocalc-wrapper #nc-expired-popup .nc-modal-body p {
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}
#neocalc-wrapper #nc-expired-popup .nc-modal-body .submit-button {
  width: 270px !important;
}
@media (max-width: 634px) {
  #neocalc-wrapper #nc-expired-popup .nc-modal-body .submit-button {
    width: 260px !important;
  }
}


/* Стрелка у кода страны в макете такая же серая, как подсказка */
#neocalc-wrapper .nc-modal .iti__arrow { border-top-color: #AAAAAA; }
#neocalc-wrapper .nc-modal .iti__arrow--up { border-bottom-color: #AAAAAA; }

/* Код страны серый, пока поле пустое: в макете нарисовано именно пустое
   состояние, и там вся строка — подсказка. Как только номер набран, код
   становится частью значения и темнеет вместе с ним. */
#neocalc-wrapper .nc-modal .iti.nc-phone-filled .iti__selected-dial-code { color: #110000; }


/* Переносы в тексте согласия: в макете они расставлены вручную и на разных
   ширинах в разных местах. Показываем ту пару, что нужна. */
#neocalc-wrapper .nc-br-m { display: none; }
#neocalc-wrapper .nc-br-d { display: inline; }
@media (max-width: 634px) {
  #neocalc-wrapper .nc-br-m { display: inline; }
  #neocalc-wrapper .nc-br-d { display: none; }
}


/* ══ Правки 17.08 ══════════════════════════════════════════════════════ */

/* Планета в форме заявки опущена: в макете её верх на 135 px от верха
   панели, на мобильном на 100. У нас было 100 на всех ширинах. */
#neocalc-wrapper #nc-lead-modal .nc-modal-body::before { background-position: 0 124px; }
@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .nc-modal-body::before { background-position: 0 100px; }
}

/* Поля формы обведены рамкой в 1 px, как поля калькулятора: в макете
   у прямоугольников полей стоит обводка #E5E5E5, у нас её не было. */
/* !important нужен: выше в файле у полей модалки стоит border: 0 !important */
#neocalc-wrapper #nc-lead-modal .form-group input,
#neocalc-wrapper #nc-lead-modal .form-group select,
#neocalc-wrapper #nc-lead-modal .iti__tel-input {
  border: 1px solid #E5E5E5 !important;
  box-sizing: border-box;
}

/* Правило рамки модалки объявлено ниже общей валидации и содержит второй id,
   поэтому отдельным поздним селектором возвращаем ошибке красный контур. */
#neocalc-wrapper #nc-lead-modal .form-group input.nc-invalid,
#neocalc-wrapper #nc-lead-modal .form-group select.nc-invalid,
#neocalc-wrapper #nc-lead-modal .iti__tel-input.nc-invalid {
  border-color: #EE0000 !important;
}

/* Скругление панели формы на мобильном 30, а не 40 */
@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .nc-modal-body { border-radius: 30px; }
}

/* ── Выпадающие списки ──────────────────────────────────────────────────
 * Кадры time / date / flags от 17.08: панель 350 в ширину со скруглением 20,
 * пять строк по 45 с разделителями в 1 px — это ровно 231 в высоту.
 * На мобильном 290, скругление 15, строки по 40, высота 206.
 * Правила общие для списков формы и для стран с валютами в калькуляторе:
 * в макете они одинаковые.
 */
#neocalc-wrapper .suggestions-box,
#neocalc-wrapper .nc-picker-box {
  border-radius: 20px;
  max-height: 231px;
}
#neocalc-wrapper .suggestions-box > div {
  padding: 0 20px;
  /* 46 = строка 45 плюс разделитель: рамка считается внутрь высоты,
     поэтому без этого лишнего пикселя шаг выходил 45 и к пятой строке
     список расходился с макетом на четыре пикселя. Первая строка без
     разделителя и потому ровно 45. */
  height: 46px;
  display: flex;
  align-items: center;
  font-size: 17px;
  line-height: 22px;
  /* Строка в макете одна: длинное название лучше подрезать, чем ломать
     высоту строки и всего списка */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#neocalc-wrapper .suggestions-box > div:first-child { height: 45px; }
#neocalc-wrapper .suggestions-box div:hover,
#neocalc-wrapper .suggestions-box div.nc-picker-current,
#neocalc-wrapper .suggestions-box div.nc-picker-current:hover {
  background-color: #F5F5F5;
}
/* Выбранный пункт в макете набран тем же начертанием, что и остальные */
#neocalc-wrapper .suggestions-box div.nc-picker-current { font-weight: 400; }

@media (max-width: 634px) {
  #neocalc-wrapper .suggestions-box,
  #neocalc-wrapper .nc-picker-box {
    border-radius: 15px;
    max-height: 206px;
  }
  #neocalc-wrapper .suggestions-box > div {
    height: 41px;
    font-size: 15px;
    line-height: 19px;
  }
  #neocalc-wrapper .suggestions-box > div:first-child { height: 40px; }
}


/* ── Круглые флаги ──────────────────────────────────────────────────────
 * Набор HatScripts/circle-flags вместо спрайта intl-tel-input: в макете
 * флаги круглые, а спрайт плагина прямоугольный, и обрезать его по кругу —
 * это терять часть полотнища. Файлы лежат в public/flags, по одному на
 * страну, грузится только выбранный.
 */
#neocalc-wrapper .nc-modal .iti__flag {
  border-radius: 50%;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 19px;
  /* Внутренней тени нет: в макете флаг без обводки */
  /* Выше в файле спрайт растягивали масштабом и поднимали отрицательным
     отступом — своей картинке это не нужно, флаг и так нужного размера. */
  transform: none;
  margin-top: 0;
}
@media (max-width: 634px) {
  #neocalc-wrapper .nc-modal .iti__flag {
    width: 18px;
    height: 18px;
    background-size: 18px 18px;
  }
}
/* Пункт «международный» в списке остаётся значком плагина */
#neocalc-wrapper .nc-modal .iti__globe { background-size: contain; }

#neocalc-wrapper .nc-modal .iti__ad { background-image: url('flags/ad.svg'); }
#neocalc-wrapper .nc-modal .iti__ae { background-image: url('flags/ae.svg'); }
#neocalc-wrapper .nc-modal .iti__af { background-image: url('flags/af.svg'); }
#neocalc-wrapper .nc-modal .iti__ag { background-image: url('flags/ag.svg'); }
#neocalc-wrapper .nc-modal .iti__ai { background-image: url('flags/ai.svg'); }
#neocalc-wrapper .nc-modal .iti__al { background-image: url('flags/al.svg'); }
#neocalc-wrapper .nc-modal .iti__am { background-image: url('flags/am.svg'); }
#neocalc-wrapper .nc-modal .iti__an { background-image: url('flags/an.svg'); }
#neocalc-wrapper .nc-modal .iti__ao { background-image: url('flags/ao.svg'); }
#neocalc-wrapper .nc-modal .iti__aq { background-image: url('flags/aq.svg'); }
#neocalc-wrapper .nc-modal .iti__ar { background-image: url('flags/ar.svg'); }
#neocalc-wrapper .nc-modal .iti__as { background-image: url('flags/as.svg'); }
#neocalc-wrapper .nc-modal .iti__at { background-image: url('flags/at.svg'); }
#neocalc-wrapper .nc-modal .iti__au { background-image: url('flags/au.svg'); }
#neocalc-wrapper .nc-modal .iti__aw { background-image: url('flags/aw.svg'); }
#neocalc-wrapper .nc-modal .iti__ax { background-image: url('flags/ax.svg'); }
#neocalc-wrapper .nc-modal .iti__az { background-image: url('flags/az.svg'); }
#neocalc-wrapper .nc-modal .iti__ba { background-image: url('flags/ba.svg'); }
#neocalc-wrapper .nc-modal .iti__bb { background-image: url('flags/bb.svg'); }
#neocalc-wrapper .nc-modal .iti__bd { background-image: url('flags/bd.svg'); }
#neocalc-wrapper .nc-modal .iti__be { background-image: url('flags/be.svg'); }
#neocalc-wrapper .nc-modal .iti__bf { background-image: url('flags/bf.svg'); }
#neocalc-wrapper .nc-modal .iti__bg { background-image: url('flags/bg.svg'); }
#neocalc-wrapper .nc-modal .iti__bh { background-image: url('flags/bh.svg'); }
#neocalc-wrapper .nc-modal .iti__bi { background-image: url('flags/bi.svg'); }
#neocalc-wrapper .nc-modal .iti__bj { background-image: url('flags/bj.svg'); }
#neocalc-wrapper .nc-modal .iti__bl { background-image: url('flags/bl.svg'); }
#neocalc-wrapper .nc-modal .iti__bm { background-image: url('flags/bm.svg'); }
#neocalc-wrapper .nc-modal .iti__bn { background-image: url('flags/bn.svg'); }
#neocalc-wrapper .nc-modal .iti__bo { background-image: url('flags/bo.svg'); }
#neocalc-wrapper .nc-modal .iti__bq { background-image: url('flags/bq.svg'); }
#neocalc-wrapper .nc-modal .iti__br { background-image: url('flags/br.svg'); }
#neocalc-wrapper .nc-modal .iti__bs { background-image: url('flags/bs.svg'); }
#neocalc-wrapper .nc-modal .iti__bt { background-image: url('flags/bt.svg'); }
#neocalc-wrapper .nc-modal .iti__bw { background-image: url('flags/bw.svg'); }
#neocalc-wrapper .nc-modal .iti__by { background-image: url('flags/by.svg'); }
#neocalc-wrapper .nc-modal .iti__bz { background-image: url('flags/bz.svg'); }
#neocalc-wrapper .nc-modal .iti__ca { background-image: url('flags/ca.svg'); }
#neocalc-wrapper .nc-modal .iti__cc { background-image: url('flags/cc.svg'); }
#neocalc-wrapper .nc-modal .iti__cd { background-image: url('flags/cd.svg'); }
#neocalc-wrapper .nc-modal .iti__cf { background-image: url('flags/cf.svg'); }
#neocalc-wrapper .nc-modal .iti__cg { background-image: url('flags/cg.svg'); }
#neocalc-wrapper .nc-modal .iti__ch { background-image: url('flags/ch.svg'); }
#neocalc-wrapper .nc-modal .iti__ci { background-image: url('flags/ci.svg'); }
#neocalc-wrapper .nc-modal .iti__ck { background-image: url('flags/ck.svg'); }
#neocalc-wrapper .nc-modal .iti__cl { background-image: url('flags/cl.svg'); }
#neocalc-wrapper .nc-modal .iti__cm { background-image: url('flags/cm.svg'); }
#neocalc-wrapper .nc-modal .iti__cn { background-image: url('flags/cn.svg'); }
#neocalc-wrapper .nc-modal .iti__co { background-image: url('flags/co.svg'); }
#neocalc-wrapper .nc-modal .iti__cq { background-image: url('flags/cq.svg'); }
#neocalc-wrapper .nc-modal .iti__cr { background-image: url('flags/cr.svg'); }
#neocalc-wrapper .nc-modal .iti__cu { background-image: url('flags/cu.svg'); }
#neocalc-wrapper .nc-modal .iti__cv { background-image: url('flags/cv.svg'); }
#neocalc-wrapper .nc-modal .iti__cw { background-image: url('flags/cw.svg'); }
#neocalc-wrapper .nc-modal .iti__cx { background-image: url('flags/cx.svg'); }
#neocalc-wrapper .nc-modal .iti__cy { background-image: url('flags/cy.svg'); }
#neocalc-wrapper .nc-modal .iti__cz { background-image: url('flags/cz.svg'); }
#neocalc-wrapper .nc-modal .iti__de { background-image: url('flags/de.svg'); }
#neocalc-wrapper .nc-modal .iti__dj { background-image: url('flags/dj.svg'); }
#neocalc-wrapper .nc-modal .iti__dk { background-image: url('flags/dk.svg'); }
#neocalc-wrapper .nc-modal .iti__dm { background-image: url('flags/dm.svg'); }
#neocalc-wrapper .nc-modal .iti__do { background-image: url('flags/do.svg'); }
#neocalc-wrapper .nc-modal .iti__dz { background-image: url('flags/dz.svg'); }
#neocalc-wrapper .nc-modal .iti__ec { background-image: url('flags/ec.svg'); }
#neocalc-wrapper .nc-modal .iti__ee { background-image: url('flags/ee.svg'); }
#neocalc-wrapper .nc-modal .iti__eg { background-image: url('flags/eg.svg'); }
#neocalc-wrapper .nc-modal .iti__eh { background-image: url('flags/eh.svg'); }
#neocalc-wrapper .nc-modal .iti__er { background-image: url('flags/er.svg'); }
#neocalc-wrapper .nc-modal .iti__es { background-image: url('flags/es.svg'); }
#neocalc-wrapper .nc-modal .iti__et { background-image: url('flags/et.svg'); }
#neocalc-wrapper .nc-modal .iti__fi { background-image: url('flags/fi.svg'); }
#neocalc-wrapper .nc-modal .iti__fj { background-image: url('flags/fj.svg'); }
#neocalc-wrapper .nc-modal .iti__fk { background-image: url('flags/fk.svg'); }
#neocalc-wrapper .nc-modal .iti__fm { background-image: url('flags/fm.svg'); }
#neocalc-wrapper .nc-modal .iti__fo { background-image: url('flags/fo.svg'); }
#neocalc-wrapper .nc-modal .iti__fr { background-image: url('flags/fr.svg'); }
#neocalc-wrapper .nc-modal .iti__fx { background-image: url('flags/fx.svg'); }
#neocalc-wrapper .nc-modal .iti__ga { background-image: url('flags/ga.svg'); }
#neocalc-wrapper .nc-modal .iti__gb { background-image: url('flags/gb.svg'); }
#neocalc-wrapper .nc-modal .iti__gd { background-image: url('flags/gd.svg'); }
#neocalc-wrapper .nc-modal .iti__ge { background-image: url('flags/ge.svg'); }
#neocalc-wrapper .nc-modal .iti__gf { background-image: url('flags/gf.svg'); }
#neocalc-wrapper .nc-modal .iti__gg { background-image: url('flags/gg.svg'); }
#neocalc-wrapper .nc-modal .iti__gh { background-image: url('flags/gh.svg'); }
#neocalc-wrapper .nc-modal .iti__gi { background-image: url('flags/gi.svg'); }
#neocalc-wrapper .nc-modal .iti__gl { background-image: url('flags/gl.svg'); }
#neocalc-wrapper .nc-modal .iti__gm { background-image: url('flags/gm.svg'); }
#neocalc-wrapper .nc-modal .iti__gn { background-image: url('flags/gn.svg'); }
#neocalc-wrapper .nc-modal .iti__gp { background-image: url('flags/gp.svg'); }
#neocalc-wrapper .nc-modal .iti__gq { background-image: url('flags/gq.svg'); }
#neocalc-wrapper .nc-modal .iti__gr { background-image: url('flags/gr.svg'); }
#neocalc-wrapper .nc-modal .iti__gs { background-image: url('flags/gs.svg'); }
#neocalc-wrapper .nc-modal .iti__gt { background-image: url('flags/gt.svg'); }
#neocalc-wrapper .nc-modal .iti__gu { background-image: url('flags/gu.svg'); }
#neocalc-wrapper .nc-modal .iti__gw { background-image: url('flags/gw.svg'); }
#neocalc-wrapper .nc-modal .iti__gy { background-image: url('flags/gy.svg'); }
#neocalc-wrapper .nc-modal .iti__hk { background-image: url('flags/hk.svg'); }
#neocalc-wrapper .nc-modal .iti__hm { background-image: url('flags/hm.svg'); }
#neocalc-wrapper .nc-modal .iti__hn { background-image: url('flags/hn.svg'); }
#neocalc-wrapper .nc-modal .iti__hr { background-image: url('flags/hr.svg'); }
#neocalc-wrapper .nc-modal .iti__ht { background-image: url('flags/ht.svg'); }
#neocalc-wrapper .nc-modal .iti__hu { background-image: url('flags/hu.svg'); }
#neocalc-wrapper .nc-modal .iti__ic { background-image: url('flags/ic.svg'); }
#neocalc-wrapper .nc-modal .iti__id { background-image: url('flags/id.svg'); }
#neocalc-wrapper .nc-modal .iti__ie { background-image: url('flags/ie.svg'); }
#neocalc-wrapper .nc-modal .iti__il { background-image: url('flags/il.svg'); }
#neocalc-wrapper .nc-modal .iti__im { background-image: url('flags/im.svg'); }
#neocalc-wrapper .nc-modal .iti__in { background-image: url('flags/in.svg'); }
#neocalc-wrapper .nc-modal .iti__io { background-image: url('flags/io.svg'); }
#neocalc-wrapper .nc-modal .iti__iq { background-image: url('flags/iq.svg'); }
#neocalc-wrapper .nc-modal .iti__ir { background-image: url('flags/ir.svg'); }
#neocalc-wrapper .nc-modal .iti__is { background-image: url('flags/is.svg'); }
#neocalc-wrapper .nc-modal .iti__it { background-image: url('flags/it.svg'); }
#neocalc-wrapper .nc-modal .iti__je { background-image: url('flags/je.svg'); }
#neocalc-wrapper .nc-modal .iti__jm { background-image: url('flags/jm.svg'); }
#neocalc-wrapper .nc-modal .iti__jo { background-image: url('flags/jo.svg'); }
#neocalc-wrapper .nc-modal .iti__jp { background-image: url('flags/jp.svg'); }
#neocalc-wrapper .nc-modal .iti__ke { background-image: url('flags/ke.svg'); }
#neocalc-wrapper .nc-modal .iti__kg { background-image: url('flags/kg.svg'); }
#neocalc-wrapper .nc-modal .iti__kh { background-image: url('flags/kh.svg'); }
#neocalc-wrapper .nc-modal .iti__ki { background-image: url('flags/ki.svg'); }
#neocalc-wrapper .nc-modal .iti__km { background-image: url('flags/km.svg'); }
#neocalc-wrapper .nc-modal .iti__kn { background-image: url('flags/kn.svg'); }
#neocalc-wrapper .nc-modal .iti__kp { background-image: url('flags/kp.svg'); }
#neocalc-wrapper .nc-modal .iti__kr { background-image: url('flags/kr.svg'); }
#neocalc-wrapper .nc-modal .iti__kw { background-image: url('flags/kw.svg'); }
#neocalc-wrapper .nc-modal .iti__ky { background-image: url('flags/ky.svg'); }
#neocalc-wrapper .nc-modal .iti__kz { background-image: url('flags/kz.svg'); }
#neocalc-wrapper .nc-modal .iti__la { background-image: url('flags/la.svg'); }
#neocalc-wrapper .nc-modal .iti__lb { background-image: url('flags/lb.svg'); }
#neocalc-wrapper .nc-modal .iti__lc { background-image: url('flags/lc.svg'); }
#neocalc-wrapper .nc-modal .iti__li { background-image: url('flags/li.svg'); }
#neocalc-wrapper .nc-modal .iti__lk { background-image: url('flags/lk.svg'); }
#neocalc-wrapper .nc-modal .iti__lr { background-image: url('flags/lr.svg'); }
#neocalc-wrapper .nc-modal .iti__ls { background-image: url('flags/ls.svg'); }
#neocalc-wrapper .nc-modal .iti__lt { background-image: url('flags/lt.svg'); }
#neocalc-wrapper .nc-modal .iti__lu { background-image: url('flags/lu.svg'); }
#neocalc-wrapper .nc-modal .iti__lv { background-image: url('flags/lv.svg'); }
#neocalc-wrapper .nc-modal .iti__ly { background-image: url('flags/ly.svg'); }
#neocalc-wrapper .nc-modal .iti__ma { background-image: url('flags/ma.svg'); }
#neocalc-wrapper .nc-modal .iti__mc { background-image: url('flags/mc.svg'); }
#neocalc-wrapper .nc-modal .iti__md { background-image: url('flags/md.svg'); }
#neocalc-wrapper .nc-modal .iti__me { background-image: url('flags/me.svg'); }
#neocalc-wrapper .nc-modal .iti__mf { background-image: url('flags/mf.svg'); }
#neocalc-wrapper .nc-modal .iti__mg { background-image: url('flags/mg.svg'); }
#neocalc-wrapper .nc-modal .iti__mh { background-image: url('flags/mh.svg'); }
#neocalc-wrapper .nc-modal .iti__mk { background-image: url('flags/mk.svg'); }
#neocalc-wrapper .nc-modal .iti__ml { background-image: url('flags/ml.svg'); }
#neocalc-wrapper .nc-modal .iti__mm { background-image: url('flags/mm.svg'); }
#neocalc-wrapper .nc-modal .iti__mn { background-image: url('flags/mn.svg'); }
#neocalc-wrapper .nc-modal .iti__mo { background-image: url('flags/mo.svg'); }
#neocalc-wrapper .nc-modal .iti__mp { background-image: url('flags/mp.svg'); }
#neocalc-wrapper .nc-modal .iti__mq { background-image: url('flags/mq.svg'); }
#neocalc-wrapper .nc-modal .iti__mr { background-image: url('flags/mr.svg'); }
#neocalc-wrapper .nc-modal .iti__ms { background-image: url('flags/ms.svg'); }
#neocalc-wrapper .nc-modal .iti__mt { background-image: url('flags/mt.svg'); }
#neocalc-wrapper .nc-modal .iti__mu { background-image: url('flags/mu.svg'); }
#neocalc-wrapper .nc-modal .iti__mv { background-image: url('flags/mv.svg'); }
#neocalc-wrapper .nc-modal .iti__mw { background-image: url('flags/mw.svg'); }
#neocalc-wrapper .nc-modal .iti__mx { background-image: url('flags/mx.svg'); }
#neocalc-wrapper .nc-modal .iti__my { background-image: url('flags/my.svg'); }
#neocalc-wrapper .nc-modal .iti__mz { background-image: url('flags/mz.svg'); }
#neocalc-wrapper .nc-modal .iti__na { background-image: url('flags/na.svg'); }
#neocalc-wrapper .nc-modal .iti__nc { background-image: url('flags/nc.svg'); }
#neocalc-wrapper .nc-modal .iti__ne { background-image: url('flags/ne.svg'); }
#neocalc-wrapper .nc-modal .iti__nf { background-image: url('flags/nf.svg'); }
#neocalc-wrapper .nc-modal .iti__ng { background-image: url('flags/ng.svg'); }
#neocalc-wrapper .nc-modal .iti__ni { background-image: url('flags/ni.svg'); }
#neocalc-wrapper .nc-modal .iti__nl { background-image: url('flags/nl.svg'); }
#neocalc-wrapper .nc-modal .iti__no { background-image: url('flags/no.svg'); }
#neocalc-wrapper .nc-modal .iti__np { background-image: url('flags/np.svg'); }
#neocalc-wrapper .nc-modal .iti__nr { background-image: url('flags/nr.svg'); }
#neocalc-wrapper .nc-modal .iti__nu { background-image: url('flags/nu.svg'); }
#neocalc-wrapper .nc-modal .iti__nz { background-image: url('flags/nz.svg'); }
#neocalc-wrapper .nc-modal .iti__om { background-image: url('flags/om.svg'); }
#neocalc-wrapper .nc-modal .iti__pa { background-image: url('flags/pa.svg'); }
#neocalc-wrapper .nc-modal .iti__pe { background-image: url('flags/pe.svg'); }
#neocalc-wrapper .nc-modal .iti__pf { background-image: url('flags/pf.svg'); }
#neocalc-wrapper .nc-modal .iti__pg { background-image: url('flags/pg.svg'); }
#neocalc-wrapper .nc-modal .iti__ph { background-image: url('flags/ph.svg'); }
#neocalc-wrapper .nc-modal .iti__pk { background-image: url('flags/pk.svg'); }
#neocalc-wrapper .nc-modal .iti__pl { background-image: url('flags/pl.svg'); }
#neocalc-wrapper .nc-modal .iti__pm { background-image: url('flags/pm.svg'); }
#neocalc-wrapper .nc-modal .iti__pn { background-image: url('flags/pn.svg'); }
#neocalc-wrapper .nc-modal .iti__pr { background-image: url('flags/pr.svg'); }
#neocalc-wrapper .nc-modal .iti__ps { background-image: url('flags/ps.svg'); }
#neocalc-wrapper .nc-modal .iti__pt { background-image: url('flags/pt.svg'); }
#neocalc-wrapper .nc-modal .iti__pw { background-image: url('flags/pw.svg'); }
#neocalc-wrapper .nc-modal .iti__py { background-image: url('flags/py.svg'); }
#neocalc-wrapper .nc-modal .iti__qa { background-image: url('flags/qa.svg'); }
#neocalc-wrapper .nc-modal .iti__re { background-image: url('flags/re.svg'); }
#neocalc-wrapper .nc-modal .iti__ro { background-image: url('flags/ro.svg'); }
#neocalc-wrapper .nc-modal .iti__rs { background-image: url('flags/rs.svg'); }
#neocalc-wrapper .nc-modal .iti__ru { background-image: url('flags/ru.svg'); }
#neocalc-wrapper .nc-modal .iti__rw { background-image: url('flags/rw.svg'); }
#neocalc-wrapper .nc-modal .iti__sa { background-image: url('flags/sa.svg'); }
#neocalc-wrapper .nc-modal .iti__sb { background-image: url('flags/sb.svg'); }
#neocalc-wrapper .nc-modal .iti__sc { background-image: url('flags/sc.svg'); }
#neocalc-wrapper .nc-modal .iti__sd { background-image: url('flags/sd.svg'); }
#neocalc-wrapper .nc-modal .iti__se { background-image: url('flags/se.svg'); }
#neocalc-wrapper .nc-modal .iti__sg { background-image: url('flags/sg.svg'); }
#neocalc-wrapper .nc-modal .iti__sh { background-image: url('flags/sh.svg'); }
#neocalc-wrapper .nc-modal .iti__si { background-image: url('flags/si.svg'); }
#neocalc-wrapper .nc-modal .iti__sj { background-image: url('flags/sj.svg'); }
#neocalc-wrapper .nc-modal .iti__sk { background-image: url('flags/sk.svg'); }
#neocalc-wrapper .nc-modal .iti__sl { background-image: url('flags/sl.svg'); }
#neocalc-wrapper .nc-modal .iti__sm { background-image: url('flags/sm.svg'); }
#neocalc-wrapper .nc-modal .iti__sn { background-image: url('flags/sn.svg'); }
#neocalc-wrapper .nc-modal .iti__so { background-image: url('flags/so.svg'); }
#neocalc-wrapper .nc-modal .iti__sr { background-image: url('flags/sr.svg'); }
#neocalc-wrapper .nc-modal .iti__ss { background-image: url('flags/ss.svg'); }
#neocalc-wrapper .nc-modal .iti__st { background-image: url('flags/st.svg'); }
#neocalc-wrapper .nc-modal .iti__su { background-image: url('flags/su.svg'); }
#neocalc-wrapper .nc-modal .iti__sv { background-image: url('flags/sv.svg'); }
#neocalc-wrapper .nc-modal .iti__sx { background-image: url('flags/sx.svg'); }
#neocalc-wrapper .nc-modal .iti__sy { background-image: url('flags/sy.svg'); }
#neocalc-wrapper .nc-modal .iti__sz { background-image: url('flags/sz.svg'); }
#neocalc-wrapper .nc-modal .iti__ta { background-image: url('flags/ta.svg'); }
#neocalc-wrapper .nc-modal .iti__tc { background-image: url('flags/tc.svg'); }
#neocalc-wrapper .nc-modal .iti__td { background-image: url('flags/td.svg'); }
#neocalc-wrapper .nc-modal .iti__tf { background-image: url('flags/tf.svg'); }
#neocalc-wrapper .nc-modal .iti__tg { background-image: url('flags/tg.svg'); }
#neocalc-wrapper .nc-modal .iti__th { background-image: url('flags/th.svg'); }
#neocalc-wrapper .nc-modal .iti__tj { background-image: url('flags/tj.svg'); }
#neocalc-wrapper .nc-modal .iti__tk { background-image: url('flags/tk.svg'); }
#neocalc-wrapper .nc-modal .iti__tl { background-image: url('flags/tl.svg'); }
#neocalc-wrapper .nc-modal .iti__tm { background-image: url('flags/tm.svg'); }
#neocalc-wrapper .nc-modal .iti__tn { background-image: url('flags/tn.svg'); }
#neocalc-wrapper .nc-modal .iti__to { background-image: url('flags/to.svg'); }
#neocalc-wrapper .nc-modal .iti__tr { background-image: url('flags/tr.svg'); }
#neocalc-wrapper .nc-modal .iti__tt { background-image: url('flags/tt.svg'); }
#neocalc-wrapper .nc-modal .iti__tv { background-image: url('flags/tv.svg'); }
#neocalc-wrapper .nc-modal .iti__tw { background-image: url('flags/tw.svg'); }
#neocalc-wrapper .nc-modal .iti__tz { background-image: url('flags/tz.svg'); }
#neocalc-wrapper .nc-modal .iti__ua { background-image: url('flags/ua.svg'); }
#neocalc-wrapper .nc-modal .iti__ug { background-image: url('flags/ug.svg'); }
#neocalc-wrapper .nc-modal .iti__uk { background-image: url('flags/uk.svg'); }
#neocalc-wrapper .nc-modal .iti__un { background-image: url('flags/un.svg'); }
#neocalc-wrapper .nc-modal .iti__us { background-image: url('flags/us.svg'); }
#neocalc-wrapper .nc-modal .iti__uy { background-image: url('flags/uy.svg'); }
#neocalc-wrapper .nc-modal .iti__uz { background-image: url('flags/uz.svg'); }
#neocalc-wrapper .nc-modal .iti__va { background-image: url('flags/va.svg'); }
#neocalc-wrapper .nc-modal .iti__vc { background-image: url('flags/vc.svg'); }
#neocalc-wrapper .nc-modal .iti__ve { background-image: url('flags/ve.svg'); }
#neocalc-wrapper .nc-modal .iti__vg { background-image: url('flags/vg.svg'); }
#neocalc-wrapper .nc-modal .iti__vi { background-image: url('flags/vi.svg'); }
#neocalc-wrapper .nc-modal .iti__vn { background-image: url('flags/vn.svg'); }
#neocalc-wrapper .nc-modal .iti__vu { background-image: url('flags/vu.svg'); }
#neocalc-wrapper .nc-modal .iti__wf { background-image: url('flags/wf.svg'); }
#neocalc-wrapper .nc-modal .iti__ws { background-image: url('flags/ws.svg'); }
#neocalc-wrapper .nc-modal .iti__xk { background-image: url('flags/xk.svg'); }
#neocalc-wrapper .nc-modal .iti__xx { background-image: url('flags/xx.svg'); }
#neocalc-wrapper .nc-modal .iti__ye { background-image: url('flags/ye.svg'); }
#neocalc-wrapper .nc-modal .iti__yt { background-image: url('flags/yt.svg'); }
#neocalc-wrapper .nc-modal .iti__yu { background-image: url('flags/yu.svg'); }
#neocalc-wrapper .nc-modal .iti__za { background-image: url('flags/za.svg'); }
#neocalc-wrapper .nc-modal .iti__zm { background-image: url('flags/zm.svg'); }
#neocalc-wrapper .nc-modal .iti__zw { background-image: url('flags/zw.svg'); }


/* Крестик формы: круг 40×40 цвета #EEEEEE с тёмным крестом внутри —
   тот же значок, что в мобильном меню на первой странице макета.
   На мобильном его нет вовсе: закрыть форму там можно касанием
   по затемнению. */
#neocalc-wrapper #nc-lead-modal .nc-modal-close {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #EEEEEE;
  opacity: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease;
}
#neocalc-wrapper #nc-lead-modal .nc-modal-close:hover { background: #E0E0E0; }
#neocalc-wrapper .nc-close-icon { display: block; }

@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .nc-modal-close { display: none; }
  /* Код страны в макете начинается на 46 px от края поля */
  #neocalc-wrapper .nc-modal .iti__selected-dial-code { margin-left: 2px; }
}

/* Часовой пояс в списке времени набран серым и отбит от времени
   двумя пробелами — как в макете. */
#neocalc-wrapper .suggestions-box .nc-opt-note {
  color: #AAAAAA;
  margin-left: 9px;
}

/* Список страны идёт по ширине своего поля: в макете выпадающий блок ровно
   под полем, а у нас он растягивался по самому длинному названию — 343
   против 270 у поля. Списки формы ширину получают из скрипта, их не трогаем. */
#neocalc-wrapper .suggestions-box:not(.nc-picker-box) {
  width: 100%;
  min-width: 0;
}

/* Календарь — то же семейство скруглений, что у списков: 20 на десктопе
   и планшете, 15 на мобильном. Высота пока своя (301 против 286 в макете):
   дизайнер написал, что доработает календарь, разложим по его версии. */
#neocalc-wrapper .nc-datepicker { border-radius: 20px; }
@media (max-width: 634px) {
  #neocalc-wrapper .nc-datepicker { border-radius: 15px; }
}


/* ══ Календарь и список стран телефона по кадрам date / flags ══════════
 * Кадры от 17.08: календарь 350×286 со скруглением 20 (мобильный 290×256,
 * скругление 15), список стран телефона 350×277 (мобильный 290×247).
 * Строки и там и там по 46 (41 на мобильном) с разделителями в 1 px.
 */

/* ── Календарь ──────────────────────────────────────────────────────── */
#neocalc-wrapper .nc-datepicker {
  padding: 0;
  overflow: hidden;
}
/* Шапка с месяцем: 46 в высоту, снизу разделитель на всю ширину */
#neocalc-wrapper .nc-dp-head {
  height: 46px;
  margin: 0;
  padding: 0 20px;
  border-bottom: 1px solid #E5E5E5;
  box-sizing: border-box;
}
#neocalc-wrapper .nc-dp-title {
  font-size: 17px;
  line-height: 22px;
  font-weight: 500;
  color: #110000;
}
#neocalc-wrapper .nc-dp-nav {
  width: 28px;
  height: 28px;
  color: #110000;
}
/* Сетка: семь колонок по 46, строки по 31 — как в макете */
#neocalc-wrapper .nc-dp-week {
  padding: 7px 14px 0;
  margin: 0;
}
#neocalc-wrapper .nc-dp-week span {
  font-size: 15px;
  line-height: 31px;
  color: #110000;
}
/* Суббота и воскресенье в макете набраны серым */
#neocalc-wrapper .nc-dp-week span:nth-child(6),
#neocalc-wrapper .nc-dp-week span:nth-child(7) { color: #AAAAAA; }
#neocalc-wrapper .nc-dp-grid {
  /* Снизу 14, а не 16: разделитель шапки считается в её высоту,
     и с шестнадцатью календарь выходил на два пикселя выше макета. */
  padding: 0 14px 16px;
  margin: 0;
  /* Между неделями был зазор в 2 px, и за шесть строк календарь вырастал
     на 12 сверх макета. В макете строки идут вплотную, шаг ровно 31. */
  row-gap: 0;
}
#neocalc-wrapper .nc-dp-day,
#neocalc-wrapper .nc-dp-empty {
  height: 31px;
  min-height: 31px;
  font-size: 15px;
  line-height: 31px;
}
/* Недоступные дни в макете такие же серые, как выходные */
#neocalc-wrapper .nc-dp-day.nc-dp-off { color: #AAAAAA; }
/* Кружок сегодняшнего дня — 30 в диаметре, цвет подложки #EEEEEE */
#neocalc-wrapper .nc-dp-day.nc-dp-today,
#neocalc-wrapper .nc-dp-day.nc-dp-current {
  background-color: #EEEEEE;
  border-radius: 50%;
}

@media (max-width: 634px) {
  #neocalc-wrapper .nc-dp-head { height: 41px; padding: 0 15px; }
  #neocalc-wrapper .nc-dp-title { font-size: 15px; line-height: 19px; }
  #neocalc-wrapper .nc-dp-nav { width: 24px; height: 24px; }
  #neocalc-wrapper .nc-dp-week { padding: 6px 8px 0; }
  #neocalc-wrapper .nc-dp-week span { font-size: 12px; line-height: 28px; }
  #neocalc-wrapper .nc-dp-grid { padding: 0 8px 13px; }
  #neocalc-wrapper .nc-dp-day,
  #neocalc-wrapper .nc-dp-empty {
    height: 28px;
    min-height: 28px;
    font-size: 12px;
    line-height: 28px;
  }
}

/* ── Список стран в поле телефона ───────────────────────────────────── */
#neocalc-wrapper .iti__dropdown-content {
  border: 1px solid #E5E5E5;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(17, 0, 0, .12);
}
#neocalc-wrapper .iti__search-input {
  height: 46px;
  padding: 0 20px;
  font-size: 17px;
  line-height: 22px;
  border: 0;
  border-bottom: 1px solid #E5E5E5;
  box-sizing: border-box;
}
#neocalc-wrapper .iti__search-input::placeholder { color: #AAAAAA; }
/* Пять строк по 46 — ровно 230, вместе с поиском и рамками это 277 */
#neocalc-wrapper .iti__country-list { max-height: 230px; }
#neocalc-wrapper .iti__country {
  height: 46px;
  /* 12, а не 14: рамка панели и вложенный список съедают по пикселю,
     и флаг вставал на 16 вместо макетных 14 */
  padding: 0 12px;
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 17px;
  line-height: 22px;
  color: #110000;
  border-top: 1px solid #E5E5E5;
  box-sizing: border-box;
}
#neocalc-wrapper .iti__country:first-child { border-top: 0; height: 45px; }
#neocalc-wrapper .iti__country:hover,
#neocalc-wrapper .iti__country.iti__highlight { background-color: #F5F5F5; }
#neocalc-wrapper .iti__dial-code { color: #AAAAAA; }
#neocalc-wrapper .iti__country-name { margin: 0; }

@media (max-width: 634px) {
  #neocalc-wrapper .iti__dropdown-content { border-radius: 15px; }
  #neocalc-wrapper .iti__search-input {
    height: 41px;
    padding: 0 20px;
    font-size: 15px;
    line-height: 19px;
  }
  #neocalc-wrapper .iti__country-list { max-height: 205px; }
  #neocalc-wrapper .iti__country {
    height: 41px;
    font-size: 15px;
    line-height: 19px;
    gap: 12px;
  }
  #neocalc-wrapper .iti__country:first-child { height: 40px; }
}

/* Список стран ложится ровно на поле телефона: в макете его левый верхний
   угол совпадает с углом поля, и он перекрывает поля ниже. Библиотека
   считает положение сама и в тесной карточке разворачивала список вверх,
   поэтому переопределяем через !important. */
#neocalc-wrapper #nc-lead-modal .iti__dropdown-content {
  /* Отсчёт идёт от блока страны, а он сам сдвинут внутрь поля на 13 px
     (11 на мобильном) и на 3 вниз — этот сдвиг и вычитаем, чтобы список
     встал углом в угол поля. */
  top: -3px !important;
  bottom: auto !important;
  left: -13px !important;
  right: auto !important;
  width: 350px;
}
@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .iti__dropdown-content {
    left: -11px !important;
    width: 290px;
  }
}

/* ══ Правки 18.08 ══════════════════════════════════════════════════════ */

/* Крестик формы: в макете это просто серый крест без круглой подложки */
#neocalc-wrapper #nc-lead-modal .nc-modal-close {
  width: 32px;
  height: 32px;
  border-radius: 0;
  background: none;
}
#neocalc-wrapper #nc-lead-modal .nc-modal-close:hover { background: none; opacity: .75; }

/* Строка поиска в списке стран — не поле формы: рамку и скругление,
   которые достались ей от правила для полей попапа, снимаем. Разделитель
   снизу остаётся: это первая линия списка. */
#neocalc-wrapper #nc-lead-modal .iti__search-input {
  border: 0 !important;
  border-bottom: 1px solid #E5E5E5 !important;
  border-radius: 0 !important;
  background: #FFFFFF;
}

/* Скругления по назначению: у стран и валют 25 (20 на мобильном),
   у флагов, дат и времени 20 (15 на мобильном). */
#neocalc-wrapper .suggestions-box,
#neocalc-wrapper .nc-picker-box { border-radius: 25px; }
#neocalc-wrapper #nc-lead-modal .suggestions-box,
#neocalc-wrapper #nc-lead-modal .nc-picker-box { border-radius: 20px; }
@media (max-width: 634px) {
  #neocalc-wrapper .suggestions-box,
  #neocalc-wrapper .nc-picker-box { border-radius: 20px; }
  #neocalc-wrapper #nc-lead-modal .suggestions-box,
  #neocalc-wrapper #nc-lead-modal .nc-picker-box { border-radius: 15px; }
}

/* ── Календарь ──────────────────────────────────────────────────────── */
/* Панель без обводки, с тенью — как в макете */
#neocalc-wrapper .nc-datepicker {
  border: 0;
  box-shadow: 0 8px 24px rgba(17, 0, 0, .12);
}
/* Шапка с днями недели целиком серая */
#neocalc-wrapper .nc-dp-week span,
#neocalc-wrapper .nc-dp-week span:nth-child(6),
#neocalc-wrapper .nc-dp-week span:nth-child(7) { color: #AAAAAA; }
/* Стрелки месяцев без круглой подложки */
#neocalc-wrapper .nc-dp-nav {
  border: 0;
  background: none;
  box-shadow: none;
  width: 24px;
  height: 24px;
  padding: 0;
  color: #110000;
}
#neocalc-wrapper .nc-dp-nav:disabled { opacity: .3; }
#neocalc-wrapper .nc-dp-nav svg { display: block; margin: 0; }
/* Отметка сегодняшнего дня — круг, а не овал: ячейка шире, чем выше,
   поэтому рисуем кругом из градиента, а не скруглением коробки */
#neocalc-wrapper .nc-dp-day.nc-dp-today,
#neocalc-wrapper .nc-dp-day.nc-dp-current {
  background: radial-gradient(circle 15px at 50% 50%, #EEEEEE 0 15px, transparent 15px);
  border-radius: 0;
}
@media (max-width: 634px) {
  #neocalc-wrapper .nc-dp-day.nc-dp-today,
  #neocalc-wrapper .nc-dp-day.nc-dp-current {
    background: radial-gradient(circle 13px at 50% 50%, #EEEEEE 0 13px, transparent 13px);
  }
}

/* Список страны тоже ложится на поле, а не под него: он единственный
   расставляется стилями, остальные панели — скриптом. */
#neocalc-wrapper .suggestions-box:not(.nc-picker-box) {
  /* Вплотную под полем: вместе они читаются одной фигурой */
  top: 100%;
  margin-top: 0;
}

/* У дней нет рамок: сегодняшний день отмечен только серым кругом,
   а рамка вокруг ячейки рисовала квадрат поверх него. */
#neocalc-wrapper .nc-dp-day,
#neocalc-wrapper .nc-dp-day:hover,
#neocalc-wrapper .nc-dp-day.nc-dp-today,
#neocalc-wrapper .nc-dp-day.nc-dp-current {
  border: 0;
  box-shadow: none;
}

/* ══ Валюты и страны: единая фигура с полем ════════════════════════════
 * Список примыкает к полю без зазора: у поля срезаны нижние углы,
 * у списка — верхние, а разделителем служит нижняя рамка поля.
 * Кегль в этих списках 15, у времени в попапе остаётся 17.
 */
#neocalc-wrapper .nc-picker-open,
#neocalc-wrapper input.nc-picker-open {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}
#neocalc-wrapper .suggestions-box:not(.nc-picker-box),
#neocalc-wrapper .form-group .nc-picker-box {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-top: 0;
}
#neocalc-wrapper .suggestions-box > div { font-size: 15px; }
#neocalc-wrapper #nc-lead-modal .suggestions-box > div { font-size: 17px; }
@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .suggestions-box > div { font-size: 15px; }
}

/* Приписка — серым и через отбивку, как в макете */
#neocalc-wrapper .suggestions-box .nc-opt-note { color: #AAAAAA; margin-left: 9px; }

/* Зеркало значения поля: тот же текст, но приписку можно покрасить серым.
   Пока поле в фокусе, показываем настоящий текст — человек печатает. */
#neocalc-wrapper .nc-picker-shown {
  position: absolute;
  display: none;
  align-items: center;
  box-sizing: border-box;
  color: #110000;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  z-index: 1;
}
#neocalc-wrapper .nc-has-shown + .nc-picker-shown { display: flex; }
#neocalc-wrapper .nc-has-shown:focus + .nc-picker-shown { display: none; }
/* !important обязателен: цвет текста полей задан в правилах выше тоже
   через !important, и без него настоящий текст просвечивал сквозь зеркало */
#neocalc-wrapper input.nc-has-shown {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
}
#neocalc-wrapper input.nc-has-shown:focus {
  color: #110000 !important;
  -webkit-text-fill-color: #110000 !important;
}
#neocalc-wrapper .nc-picker-shown .nc-opt-note { color: #AAAAAA; margin-left: 9px; }
/* Поле — точка отсчёта для зеркала */
#neocalc-wrapper .form-group,
#neocalc-wrapper .input-container { position: relative; }

/* Стрелки месяца стоят по краям шапки: в макете левая начинается на 25,
   правая заканчивается на 25 от правого края (на мобильном по 20).
   Кнопка остаётся 24×24 ради попадания пальцем, а сам значок прижат
   к нужному краю. */
#neocalc-wrapper .nc-dp-head { padding: 0 25px; }
#neocalc-wrapper .nc-dp-nav {
  display: flex;
  align-items: center;
}
#neocalc-wrapper .nc-dp-nav[data-step="-1"] { justify-content: flex-start; }
#neocalc-wrapper .nc-dp-nav[data-step="1"] { justify-content: flex-end; }
@media (max-width: 634px) {
  #neocalc-wrapper .nc-dp-head { padding: 0 20px; }
  #neocalc-wrapper .nc-dp-chevron { width: 5px; height: 8px; }
}

/* Рамка, скругление и тень уже есть у обёртки .iti__dropdown-content.
   На самом списке они давали лишнюю полоску по краям: строки вставали
   на 2 px от края панели вместо 1, а справа выглядывал кусок рамки. */
#neocalc-wrapper .iti__country-list {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Библиотека телефона сдвигает список на 1 px влево, пряча свою рамку.
   У нас из-за этого справа из-под списка выглядывала красная кнопка. */
#neocalc-wrapper .iti__dropdown-content { margin-left: 0; }

/* ══ Значок раскрытия у селектов: шеврон вместо треугольника ═══════════
 * В свежих кадрах дизайнер заменил Polygon 9×8 на arrow 9×5.7 того же
 * цвета — такой же шеврон, как стрелки календаря и пункты меню.
 * Коробку оставляем прежней (9×21), поэтому все выставленные top в силе,
 * а сам значок рисуем по центру коробки.
 */
#neocalc-wrapper .select-input::after {
  content: '';
  display: block;
  width: 9px;
  height: 21px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='6' viewBox='0 0 9 5.7' fill='none'%3E%3Cpath d='M0.75 0.75L4.5 4.95L8.25 0.75' stroke='%23E5E5E5' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: 9px 5.7px;
}
/* В мобильной версии шеврон уменьшен в той же пропорции, что и стрелки
   календаря (5.7×9 → 5×8), то есть 9×5.7 → 8×5 */
@media (max-width: 634px) {
  #neocalc-wrapper .select-input::after { background-size: 8px 5px; }
}
/* Коробка значка на 21 px выше поля ростом 45: чтобы шеврон встал ровно
   по центру, поднимаем её на 1 px (в десктопной версии центр совпадает). */
@media (max-width: 634px) {
  #neocalc-wrapper .select-input::after { top: 37px; }
}

/* Стрелка у кода страны в форме — такой же шеврон, как у селектов.
 * В макете здесь треугольник 5×4 (мобильный 4×3); коробку берём его,
 * а зазор до «+7» уменьшаем на тот же 1 px, чтобы код остался на месте.
 */
#neocalc-wrapper .nc-modal .iti__arrow {
  width: 5px;
  height: 4px;
  border: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='3.2' viewBox='0 0 5 3.2' fill='none'%3E%3Cpath d='M0.45 0.45L2.5 2.75L4.55 0.45' stroke='%23AAAAAA' stroke-width='0.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
  background-size: 5px 3.2px;
}
#neocalc-wrapper .nc-modal .iti__selected-country-primary { padding-right: 4px; }
/* Раскрытый список — шеврон вверх */
#neocalc-wrapper .nc-modal .iti__arrow--up { transform: rotate(180deg); }
@media (max-width: 634px) {
  #neocalc-wrapper .nc-modal .iti__arrow {
    width: 4px;
    height: 3px;
    background-size: 4px 2.5px;
  }
  /* Ширина здесь не изменилась, поэтому зазор оставляем прежним */
  #neocalc-wrapper .nc-modal .iti__selected-country-primary { padding-right: 5px; }
}


/* ══ Правки 18.08: значки из выгрузки, фигура списков, наведение ═══════
 * Всё ниже взято числами из файла Figma (geometry=paths и координаты
 * узлов), а не нарисовано на глаз.
 */

/* ── Значок раскрытия: тот же шеврон, что стрелки календаря и меню ──── */
#neocalc-wrapper .select-input::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5.7' viewBox='0 0 9 5.7'%3E%3Cg transform='translate(9 0) rotate(90)' fill='%23E5E5E5'%3E%3Cpath d='M0 7.79868L4.49916 3.29959L5.7005 4.50091L1.20134 9L0 7.79868Z'/%3E%3Cpath d='M4.50127 5.69967L0.00098921 1.19946L1.20047 0L5.7005 4.50091L4.50127 5.69967Z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ── Значение поля показываем как есть: скобок в нём больше нет ─────── */
#neocalc-wrapper .nc-picker-shown { display: none !important; }
#neocalc-wrapper input.nc-has-shown,
#neocalc-wrapper input.nc-has-shown:focus {
  color: #110000 !important;
  -webkit-text-fill-color: #110000 !important;
}

/* ── Единая фигура поля и списка ─────────────────────────────────────
 * В макете это один прямоугольник 270×287 со скруглением 25 и рамкой
 * в 1 px цвета #E5E5E5. Тени у него нет — из-за неё фигура выглядела
 * крупнее и круглее, чем нарисовано.
 */
#neocalc-wrapper .nc-picker-open {
  border-top-left-radius: 25px !important;
  border-top-right-radius: 25px !important;
}
#neocalc-wrapper .suggestions-box:not(.nc-picker-box),
#neocalc-wrapper .form-group .nc-picker-box {
  border-bottom-left-radius: 25px;
  border-bottom-right-radius: 25px;
  box-shadow: none;
  border: 1px solid #E5E5E5;
  border-top: 0;
}
@media (max-width: 634px) {
  #neocalc-wrapper .nc-picker-open {
    border-top-left-radius: 20px !important;
    border-top-right-radius: 20px !important;
  }
  #neocalc-wrapper .suggestions-box:not(.nc-picker-box),
  #neocalc-wrapper .form-group .nc-picker-box {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }
}

/* ── Календарь: ни кругов на стрелках, ни овалов на днях ─────────────
 * Ячейка дня шире, чем выше, поэтому border-radius: 50% давал овал.
 * Круг рисуем заливкой, как у сегодняшнего дня.
 */
#neocalc-wrapper .nc-dp-nav:hover:not(:disabled) { background: none; }
#neocalc-wrapper .nc-dp-day:hover:not(.nc-dp-off),
#neocalc-wrapper .nc-dp-day.nc-dp-picked,
#neocalc-wrapper .nc-dp-day.nc-dp-picked:hover {
  border-radius: 0;
  border-color: transparent;
}
#neocalc-wrapper .nc-dp-day:hover:not(.nc-dp-off):not(.nc-dp-picked) {
  background: radial-gradient(circle 15px at 50% 50%, #F5F5F5 0 15px, transparent 15px);
}
#neocalc-wrapper .nc-dp-day.nc-dp-picked,
#neocalc-wrapper .nc-dp-day.nc-dp-picked:hover {
  background: radial-gradient(circle 15px at 50% 50%, #110000 0 15px, transparent 15px);
  color: #FFFFFF;
}
@media (max-width: 634px) {
  #neocalc-wrapper .nc-dp-day:hover:not(.nc-dp-off):not(.nc-dp-picked) {
    background: radial-gradient(circle 14px at 50% 50%, #F5F5F5 0 14px, transparent 14px);
  }
  #neocalc-wrapper .nc-dp-day.nc-dp-picked,
  #neocalc-wrapper .nc-dp-day.nc-dp-picked:hover {
    background: radial-gradient(circle 14px at 50% 50%, #110000 0 14px, transparent 14px);
  }
}
/* Стрелка месяца ровно из выгрузки: 5.7×9 (мобильная 5×8) */
#neocalc-wrapper .nc-dp-chevron { width: 5.7px; height: 9px; }
@media (max-width: 634px) {
  #neocalc-wrapper .nc-dp-chevron { width: 5px; height: 8px; }
}

/* ── Крестик формы: 16×16 в 50 px от верхнего правого угла экрана ──── */
#neocalc-wrapper #nc-lead-modal .nc-modal-close {
  top: 50px;
  right: 50px;
  width: 16px;
  height: 16px;
}
#neocalc-wrapper .nc-close-icon { width: 16px; height: 16px; display: block; }

/* ── Планета: в макете её верх на 135 px ниже верха панели ─────────── */
#neocalc-wrapper #nc-lead-modal .nc-modal-body::before { background-position: 0 135px; }

/* ── Стрелка у кода страны: тот же шеврон, коробка по макету 5×4 ───── */
#neocalc-wrapper .nc-modal .iti__arrow {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5.7' viewBox='0 0 9 5.7'%3E%3Cg transform='translate(9 0) rotate(90)' fill='%23AAAAAA'%3E%3Cpath d='M0 7.79868L4.49916 3.29959L5.7005 4.50091L1.20134 9L0 7.79868Z'/%3E%3Cpath d='M4.50127 5.69967L0.00098921 1.19946L1.20047 0L5.7005 4.50091L4.50127 5.69967Z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 5px 3.17px;
}
@media (max-width: 634px) {
  #neocalc-wrapper .nc-modal .iti__arrow { background-size: 4px 2.53px; }
}

/* Форма стоит по центру экрана: в макете панель 565 в высоту при экране
   660 отбита сверху и снизу поровну (48 и 47). Отступ в 5vh давал 33
   сверху и 62 снизу. */
#neocalc-wrapper #nc-lead-modal.nc-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
#neocalc-wrapper #nc-lead-modal .nc-modal-body {
  margin: 0;
  max-height: calc(100vh - 32px);
}
/* На мобильном глобус выше: во всех мобильных кадрах его верх на 100 px */
@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .nc-modal-body::before { background-position: 0 100px; }
}

/* Полоса прокрутки в выпадающих списках: в макете её нет, а на Windows
   она рисуется широкой колонкой со стрелками. Прокрутка остаётся —
   колесо, клавиши и палец работают как раньше. */
#neocalc-wrapper .suggestions-box,
#neocalc-wrapper .nc-picker-box,
#neocalc-wrapper .iti__country-list {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
#neocalc-wrapper .suggestions-box::-webkit-scrollbar,
#neocalc-wrapper .nc-picker-box::-webkit-scrollbar,
#neocalc-wrapper .iti__country-list::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Зона нажатия стрелок месяца: видимый значок 6x9, а кнопка была 24x24 —
   в неё было сложно попасть. Расширяем невидимой подложкой до ~48x46,
   не сдвигая сам значок ни на пиксель. */
#neocalc-wrapper .nc-dp-nav { position: relative; }
#neocalc-wrapper .nc-dp-nav::before {
  content: '';
  position: absolute;
  inset: -11px -12px;
}

/* Пустой контейнер подсказок не должен быть виден: рамка, данная спискам,
   рисовала под каждым полем тонкую полосу, пока список пуст. */
#neocalc-wrapper .suggestions-box:empty,
#neocalc-wrapper .nc-picker-box:empty { display: none; }

/* Поля выбора не принимают ввод: каретку прячем, курсор как у кнопки */
#neocalc-wrapper .nc-picker-input {
  caret-color: transparent;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* Круг под днём центрируем по краске цифры, а не по коробке ячейки.
   В строке 31 px краска цифры стоит центром на 14.75 (мобильная 13.83
   при строке 28) — на столько круг и поднимаем. В макете эллипс стоит
   ровно на этом же уровне: центр 192.23 против центра краски 192.5. */
#neocalc-wrapper .nc-dp-day.nc-dp-today,
#neocalc-wrapper .nc-dp-day.nc-dp-current {
  background: radial-gradient(circle 15px at 50% 14.75px, #EEEEEE 0 15px, transparent 15px);
}
#neocalc-wrapper .nc-dp-day:hover:not(.nc-dp-off):not(.nc-dp-picked) {
  background: radial-gradient(circle 15px at 50% 14.75px, #F5F5F5 0 15px, transparent 15px);
}
#neocalc-wrapper .nc-dp-day.nc-dp-picked,
#neocalc-wrapper .nc-dp-day.nc-dp-picked:hover {
  background: radial-gradient(circle 15px at 50% 14.75px, #110000 0 15px, transparent 15px);
}
@media (max-width: 634px) {
  #neocalc-wrapper .nc-dp-day.nc-dp-today,
  #neocalc-wrapper .nc-dp-day.nc-dp-current {
    background: radial-gradient(circle 14px at 50% 13.83px, #EEEEEE 0 14px, transparent 14px);
  }
  #neocalc-wrapper .nc-dp-day:hover:not(.nc-dp-off):not(.nc-dp-picked) {
    background: radial-gradient(circle 14px at 50% 13.83px, #F5F5F5 0 14px, transparent 14px);
  }
  #neocalc-wrapper .nc-dp-day.nc-dp-picked,
  #neocalc-wrapper .nc-dp-day.nc-dp-picked:hover {
    background: radial-gradient(circle 14px at 50% 13.83px, #110000 0 14px, transparent 14px);
  }
}


/* ══ Фигура при прокрутке и своя полоса прокрутки ══════════════════════ */

/* Поле уехало за верх экрана — фигура начинается списком, углы возвращаем */
#neocalc-wrapper .suggestions-box.nc-picker-cut,
#neocalc-wrapper .form-group .nc-picker-box.nc-picker-cut {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-top: 1px solid #E5E5E5;
}
/* Список развернулся вверх: смежная сторона меняется местами */
#neocalc-wrapper .suggestions-box.nc-picker-up,
#neocalc-wrapper .form-group .nc-picker-box.nc-picker-up {
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-top: 1px solid #E5E5E5;
  border-bottom: 0;
}
#neocalc-wrapper .nc-picker-open.nc-picker-open-up {
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 25px !important;
  border-bottom-right-radius: 25px !important;
}
@media (max-width: 634px) {
  #neocalc-wrapper .suggestions-box.nc-picker-cut,
  #neocalc-wrapper .form-group .nc-picker-box.nc-picker-cut,
  #neocalc-wrapper .suggestions-box.nc-picker-up,
  #neocalc-wrapper .form-group .nc-picker-box.nc-picker-up {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
  }
  #neocalc-wrapper .nc-picker-open.nc-picker-open-up {
    border-bottom-left-radius: 20px !important;
    border-bottom-right-radius: 20px !important;
  }
}

/* Тонкий полупрозрачный ползунок: лежит поверх списка и не сужает строки */
#neocalc-wrapper .nc-scrollbar {
  position: absolute;
  width: 4px;
  border-radius: 2px;
  background: rgba(17, 0, 0, .18);
  pointer-events: none;
  z-index: 2;
  display: none;
}


/* ══ Правки 19.08 ══════════════════════════════════════════════════════ */

/* 1. Подложка с планетой лежит отдельным слоем под содержимым карточки,
      и её угол выходил за скруглённый угол формы — заметнее всего
      в мобильной версии, где скругление 30. Слой обрезаем по карточке. */
#neocalc-wrapper .nc-modal-body::before {
  border-radius: inherit;
  overflow: hidden;
}

/* 2. Двойная линия в списке стран телефона. Строке поиска досталась
      внутренняя обводка от правила для полей формы: рамка в 1 px легла
      поверх рамки самой панели. Оставляем только нижнюю — это первая
      линия списка. */
#neocalc-wrapper #nc-lead-modal .form-group input.iti__search-input {
  border: 0 !important;
  border-bottom: 1px solid #E5E5E5 !important;
  border-radius: 0 !important;
}

/* 3. Наведение на выбор страны: под флагом и стрелкой серая подложка,
      как в макете. Рисуем отдельным слоем, чтобы ничего не сдвинулось. */
/* Подложку вешаем на саму кнопку: внутренняя обёртка обрезает всё, что
   выходит за её край, и правый конец таблетки срезался прямым углом. */
#neocalc-wrapper .nc-modal .iti__selected-country {
  position: relative;
  /* Выше поля ввода: с нулём кнопка уходила под его белый фон и переставала
     ловить нажатия — список стран не открывался. */
  z-index: 1;
}
#neocalc-wrapper .nc-modal .iti__selected-country::before {
  content: '';
  position: absolute;
  top: 50%;
  left: -6px;
  width: 41px;
  height: 30px;
  transform: translateY(-50%);
  border-radius: 15px;
  background: transparent;
  transition: background-color .15s ease;
  z-index: -1;
}
#neocalc-wrapper .nc-modal .iti__selected-country:hover::before,
#neocalc-wrapper .nc-modal .iti__selected-country[aria-expanded='true']::before {
  background: #EEEEEE;
}
@media (max-width: 634px) {
  #neocalc-wrapper .nc-modal .iti__selected-country::before {
    width: 39px;
    height: 28px;
    border-radius: 14px;
  }
}

/* 5. Зазор до кода страны — как во всех списках, в два пробела (9 px).
      Общий gap строки в 13 px разводил имя и код шире, чем в макете,
      где набрано «Russia␣␣+7». */
#neocalc-wrapper .iti__country {
  gap: 0;
}
#neocalc-wrapper .iti__country .iti__country-name { margin-left: 13px; }
#neocalc-wrapper .iti__country .iti__dial-code { margin-left: 9px; }
@media (max-width: 634px) {
  #neocalc-wrapper .iti__country .iti__country-name { margin-left: 12px; }
  #neocalc-wrapper .iti__country .iti__dial-code { margin-left: 8px; }
}

/* 6. Стрелка «→» в крипто-парах. Onest подключён сабсетами Google, и ни в
      один из них символ U+2192 не входит — браузер подставлял его из
      другого шрифта, оттого стрелка выходила длиннее и с широкими
      пробелами. Отдаём этот символ из самого Onest: сабсет на один глиф. */
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('onest-arrow.ttf') format('truetype');
  unicode-range: U+2192;
}
@font-face {
  font-family: 'Onest';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('onest-arrow-500.ttf') format('truetype');
  unicode-range: U+2192;
}
/* У библиотеки свой ховер — серый прямоугольник во всю кнопку. Он ложился
   поверх нашей таблетки и читался квадратом. Оставляем только таблетку. */
#neocalc-wrapper .nc-modal .iti__selected-country:hover,
#neocalc-wrapper .nc-modal .iti__selected-country:focus,
#neocalc-wrapper .nc-modal .iti__selected-country:hover .iti__selected-country-primary,
#neocalc-wrapper .nc-modal .iti__selected-country-primary:hover {
  background-color: transparent !important;
}


/* ══ По обновлённому макету от 19.08 ═══════════════════════════════════
 * Дизайнер пересчитал кадры: раньше поля считались по 45 без учёта того,
 * что обводка идёт внутрь, и панель выходила на 2 px выше нужного.
 */

/* Фигура «поле + список» у валют и стран — ровно 285: поле 55 и список 230.
   Высоту меряем вместе с рамкой, иначе нижняя добавляла лишний пиксель. */
#neocalc-wrapper .suggestions-box,
#neocalc-wrapper .nc-picker-box {
  box-sizing: border-box;
}
#neocalc-wrapper .suggestions-box:not(.nc-picker-box),
#neocalc-wrapper .form-group .nc-picker-box {
  max-height: 230px;
}
@media (max-width: 634px) {
  #neocalc-wrapper .suggestions-box:not(.nc-picker-box),
  #neocalc-wrapper .form-group .nc-picker-box {
    max-height: 205px;
  }
}

/* Календарю обводка вернулась: в кадре date она есть — 1 px #E5E5E5 внутрь.
   Снимали её по правке «без обводки», но там речь шла про рамки вокруг
   ячеек дней, а не про саму панель. */
#neocalc-wrapper .nc-datepicker {
  border: 1px solid #E5E5E5;
  box-sizing: border-box;
}

/* Списки формы (дата и время) считаются по своим кадрам — 231 и 206.
   Правило про 230 писалось для валют и стран, их задевать не должно. */
#neocalc-wrapper #nc-lead-modal .nc-picker-box { max-height: 231px; }
@media (max-width: 634px) {
  #neocalc-wrapper #nc-lead-modal .nc-picker-box { max-height: 206px; }
  /* Мобильная фигура валют и стран: поле 45 плюс список 206 */
  #neocalc-wrapper .suggestions-box:not(.nc-picker-box),
  #neocalc-wrapper .form-group .nc-picker-box { max-height: 206px; }
}

/* Обводка добавила календарю 2 px сверх макетных 286 — забираем их
   у нижнего поля сетки, сама сетка при этом не двигается. */
#neocalc-wrapper .nc-dp-grid { padding-bottom: 14px; }
@media (max-width: 634px) {
  #neocalc-wrapper .nc-dp-grid { padding-bottom: 11px; }
}