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

@import url('https://fonts.googleapis.com/css2?family=Onest:wght@100..900&display=swap');

/* ===== 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;
}
#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 .3s ease, color .3s 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 .submit-button:hover { background-color: #110000; color: #fff; }
#neocalc-wrapper .reset-button { background-color: #fff; color: #110000; border: 1px solid #E5E5E5 !important; }
#neocalc-wrapper .reset-button:hover { background-color: #110000; color: #fff; }
#neocalc-wrapper .telegram-button { background-color: #110000; color: #fff; max-width: 270px; }
#neocalc-wrapper .telegram-button:hover { background-color: #EE0000; }
#neocalc-wrapper .call-button {
  background-color: #EEEEEE; color: #110000 !important; border: 1px solid #E5E5E5 !important; max-width: 270px;
}
#neocalc-wrapper .call-button:hover { background-color: #EE0000; color: #fff !important; }
#neocalc-wrapper .button-container { display: flex; justify-content: space-between; gap: 15px; }

/* Две кнопки под результатом: одинаковая ширина, чтобы не «прыгали» по краям */
#neocalc-wrapper .nc-actions { flex-direction: column; align-items: center; gap: 12px; margin-top: 4px; }
#neocalc-wrapper .nc-actions .button { max-width: 270px; }

/* ===== 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 ===== */
#neocalc-wrapper .suggestions-box {
  max-height: 225px; overflow-y: auto; background: #fff; border-radius: 25px;
  min-width: 270px; z-index: 1000; margin-top: 4px; position: absolute;
}
#neocalc-wrapper .suggestions-box div {
  padding: 12px 16px; cursor: pointer; font-size: 14px; color: #110000;
  border: 1px solid #E5E5E5 !important; transition: background-color .2s ease;
}
#neocalc-wrapper .suggestions-box div:hover { background-color: #ffeeee; }

/* ===== 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; }
#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 ===== */
#neocalc-wrapper .nc-status { min-height: 24px; margin: 8px 0 12px; font-size: 15px; line-height: 21px; }
#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');
}

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

/* Подсветка незаполненных обязательных полей */
#neocalc-wrapper .nc-invalid { border: 1px solid #EE0000 !important; }
#neocalc-wrapper .nc-field-error {
  color: #EE0000; font-size: 13px; line-height: 16px; padding: 6px 20px 0;
}

/* Таймер скидки — под кнопками, по центру */
#neocalc-wrapper .nc-timer-block {
  display: flex; flex-direction: column; align-items: center;
  margin-top: 20px; text-align: center;
}
#neocalc-wrapper .nc-timer {
  display: inline-flex; align-items: center; gap: 6px;
  background: #F7F7F7; border: 1px solid #E5E5E5; border-radius: 35px;
  padding: 10px 20px; font-size: 15px; font-weight: 500; color: #110000;
  margin-bottom: 8px;
}
#neocalc-wrapper #nc-timer-value { font-variant-numeric: tabular-nums; }
/* Последние 30 секунд краснеет вся строка, а не только цифры */
#neocalc-wrapper .nc-timer { transition: color .2s ease; }
#neocalc-wrapper .nc-timer.nc-timer-urgent { color: #EE0000; }

#neocalc-wrapper .nc-timer-note {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: #999; padding: 0;
}
#neocalc-wrapper .nc-timer-note-icon { display: inline-flex; flex-shrink: 0; line-height: 0; }

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

/* Модальные окна */
#neocalc-wrapper .nc-modal { display: none; position: fixed; inset: 0; z-index: 10000; }
#neocalc-wrapper .nc-modal.nc-open { display: block; }
#neocalc-wrapper .nc-modal-backdrop { position: absolute; inset: 0; background: rgba(17, 0, 0, .55); }
#neocalc-wrapper .nc-modal-body {
  position: relative; margin: 5vh auto; max-width: 520px; width: calc(100% - 32px);
  max-height: 90vh; overflow-y: auto; background: #fff; border-radius: 30px; padding: 32px;
}
#neocalc-wrapper .nc-modal-small { max-width: 420px; text-align: center; }
#neocalc-wrapper .nc-modal-close {
  position: absolute; top: 16px; right: 20px; background: none; border: none;
  font-size: 28px; line-height: 1; cursor: pointer; color: #999;
}
#neocalc-wrapper .nc-modal .form-group { max-width: 100%; }
#neocalc-wrapper .nc-modal .form-title { font-size: 28px; line-height: 32px; margin-top: 0; }

/* ===== RESPONSIVE ===== */
@media (max-width: 1160px) {
  #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 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: 17px; }
  #neocalc-wrapper .result-title { font-size: 25px; line-height: 18px; margin-bottom: 20px; }
  #neocalc-wrapper .button { font-size: 15px; max-width: 280px; height: 40px; }
  #neocalc-wrapper .button-container { flex-direction: column; align-items: center; gap: 10px; }
  #neocalc-wrapper .toggle-buttons { margin-bottom: 15px; flex-wrap: wrap; }
  #neocalc-wrapper .toggle-country-button { padding: 10px 12px; height: 45px; font-size: 14px; }
  #neocalc-wrapper .form-container { margin: 0; padding: 0; background: transparent; border: 0 !important; border-radius: 0; }
  #neocalc-wrapper .form-group { margin-bottom: 9px; max-width: 100%; }
  #neocalc-wrapper .form-group label { font-size: 15px; margin-bottom: 6px; }
  #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; }
  #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');
  }
}