/* Калькулятор единого пособия — пошаговый мастер. Scoped под #ep-calc. */

#ep-calc, #ep-calc .calculator,
#ep-calc input, #ep-calc select, #ep-calc button, #ep-calc textarea,
#ep-calc .label-text, #ep-calc .tax-result span,
#ep-calc .tax-result .amount-group span, #ep-calc .amount-group span:first-child {
  font-family: "Unbounded", sans-serif;
}

#ep-calc .calculator { color: #000; }

/* ── Прогресс ─────────────────────────────────────────────── */
#ep-calc .ep-progress { margin-bottom: 16px; }
#ep-calc .ep-progress-track {
  height: 2px; background: #eee; border-radius: 2px; overflow: hidden; margin-bottom: 12px;
}
#ep-calc .ep-progress-bar { height: 100%; width: 0; background: #000; transition: width .3s ease; }
#ep-calc .ep-dots { display: flex; gap: 4px; }
#ep-calc .ep-dot {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: "Unbounded", sans-serif; font-size: 12px; line-height: 1.2; color: #999; text-align: center;
}
#ep-calc .ep-dot span {
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  border: 1px solid #ddd; font-size: 12px; background: #fff; color: #999; transition: .2s;
}
#ep-calc .ep-dot.cur { color: #000; }
#ep-calc .ep-dot.cur span { border-color: #000; color: #000; }
#ep-calc .ep-dot.done span { background: #000; border-color: #000; color: #fff; }

/* ── Шаги ─────────────────────────────────────────────────── */
#ep-calc .ep-step { display: none; animation: epfade .25s ease; }
#ep-calc .ep-step.active { display: block; }
@keyframes epfade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
#ep-calc .ep-step > .label-text { font-size: 13px; opacity: 1; margin-bottom: 12px; font-weight: 600; }

/* ── Поля ─────────────────────────────────────────────────── */
#ep-calc .form-group input[type="number"],
#ep-calc .form-group input[type="text"],
#ep-calc .form-group input[type="date"] {
  height: 64px; padding: 24px 16px 8px; font-size: 15px;
  text-align: left; justify-content: flex-start; display: block; margin-bottom: 0; width: 100%;
}
#ep-calc .form-group { margin-bottom: 12px; }
#ep-calc .form-group__wrapper { align-items: stretch; }
#ep-calc .form-group__wrapper > .form-group { flex: 1 1 0; min-width: 0; margin-bottom: 0; }

/* ── Список выбора ────────────────────────────────────────── */
#ep-calc .ep-radio-list { display: flex; flex-direction: column; gap: 8px; }
#ep-calc .ep-radio {
  display: flex; align-items: center; gap: 12px; cursor: pointer;
  border: 1px solid #ddd; border-radius: 14px; padding: 14px 16px; transition: .15s; background: #fff;
}
#ep-calc .ep-radio:hover { border-color: #bbb; }
#ep-calc .ep-radio:has(input:checked) { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
#ep-calc .ep-radio span { font-size: 13px; line-height: 1.35; }
#ep-calc .ep-radio span small { display: block; font-size: 12px; opacity: .55; margin-top: 2px; }

#ep-calc input[type="radio"], #ep-calc input[type="checkbox"] {
  appearance: auto; -webkit-appearance: auto;
  width: 20px; height: 20px; min-width: 20px; flex: none;
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none;
  display: inline-block; accent-color: #000; cursor: pointer;
}

#ep-calc .ep-check {
  display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid #ddd; border-radius: 14px; padding: 12px 16px; margin-top: 8px; font-size: 12px;
}
#ep-calc .ep-check:has(input:checked) { border-color: #000; }

#ep-calc .ep-hint { margin: 10px 0 0; font-size: 12px; line-height: 1.5; opacity: .6; }

/* ── Подразделы шага имущества ────────────────────────────── */
#ep-calc .ep-sub-title {
  display: block; margin: 18px 0 8px; font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; opacity: .55;
}
#ep-calc .ep-step > .ep-sub-title:first-of-type { margin-top: 14px; }
#ep-calc .ep-reasons { display: flex; flex-direction: column; }
#ep-calc .ep-reasons .ep-check { margin-top: 6px; padding: 10px 14px; }
#ep-calc #ep-z-hint { opacity: .75; }
/* ── Сверка условий назначения ────────────────────────────── */
#ep-calc .ep-checks { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
#ep-calc .ep-checks li {
  position: relative; font-size: 12px; line-height: 1.5; color: #000;
  padding: 10px 14px 10px 36px; border: 1px solid #e5e7eb; border-radius: 12px; background: #f7f9fc;
}
#ep-calc .ep-checks li::before { position: absolute; left: 14px; top: 10px; font-weight: 700; }
#ep-calc .ep-checks li.ok { background: #f2f9f3; border-color: #cfe7d3; }
#ep-calc .ep-checks li.ok::before { content: "✓"; color: #2f7d3a; }
#ep-calc .ep-checks li.bad { background: #fff4f4; border-color: #f3d0d0; }
#ep-calc .ep-checks li.bad::before { content: "✕"; color: #c23b3b; }

/* ── Навигация ────────────────────────────────────────────── */
#ep-calc .ep-nav { display: flex; align-items: center; gap: 12px; margin-top: 20px; }
#ep-calc .ep-nav button { width: auto; flex: 0 0 auto; padding: 14px 22px; }
#ep-calc .ep-nav #ep-next { background: #000; color: #fff; }
#ep-calc .ep-nav #ep-next:hover { background: #000; opacity: .85; }
#ep-calc .ep-nav #ep-back { background: #fff; }
#ep-calc .ep-nav #ep-back:disabled, #ep-calc .ep-nav #ep-next:disabled { opacity: .35; cursor: default; }
#ep-calc .ep-step-label { flex: 1; text-align: center; font-size: 12px; opacity: .55; }

/* ── Результат ────────────────────────────────────────────── */
#ep-calc .calculator__result { margin-top: 16px; }
#ep-calc .tax-result.ep-main span,
#ep-calc .tax-result.ep-main .amount-group span:first-child { font-weight: 700; }
#ep-calc .tax-result.ep-main .amount-group span:first-child { font-size: 20px; }
#ep-calc .ep-how { border: 1px solid #ddd; border-radius: 12px; padding: 0; }
#ep-calc .ep-how summary {
  cursor: pointer; padding: 12px 16px; font-size: 12px; list-style: none; user-select: none;
}
#ep-calc .ep-how summary::-webkit-details-marker { display: none; }
#ep-calc .ep-how summary::before { content: "▸ "; }
#ep-calc .ep-how[open] summary::before { content: "▾ "; }
#ep-calc .ep-how ol { margin: 0; padding: 0 16px 8px; list-style: none; counter-reset: epstep; }
#ep-calc .ep-how li {
  counter-increment: epstep; position: relative;
  padding: 10px 0 10px 30px; margin: 0; border-top: 1px solid #eee; color: #000;
}
#ep-calc .ep-how li::before {
  content: counter(epstep); position: absolute; left: 0; top: 11px;
  width: 20px; height: 20px; border-radius: 50%; background: #f2f2f2;
  display: flex; align-items: center; justify-content: center; font-size: 11px;
}
#ep-calc .ep-how-h { display: block; font-size: 12px; font-weight: 600; line-height: 1.4; margin-bottom: 3px; }
#ep-calc .ep-how-b { display: block; font-size: 13px; line-height: 1.55; font-variant-numeric: tabular-nums; }
#ep-calc .ep-how-b b { font-weight: 600; white-space: nowrap; background: #f4f7fb; border-radius: 4px; padding: 1px 4px; margin-right: -3px; }

/* ── Мобайл ───────────────────────────────────────────────── */
@media screen and (max-width: 767px) {
  #ep-calc .form-group__wrapper { flex-direction: column; gap: 0; }
  #ep-calc .form-group__wrapper .form-group { margin-bottom: 12px; }
  #ep-calc .ep-dot { font-size: 10px; gap: 4px; }
  #ep-calc .ep-dot span { font-size: 13px; }

  /* Панель шагов держится у нижнего края экрана, пока заполняют шаг:
     кнопка «Далее» видна без прокрутки шага до конца. */
  #ep-calc .ep-nav {
    position: sticky; bottom: 0; z-index: 3; margin-top: 12px;
    padding: 10px 0 calc(10px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #eee;
  }
  /* На последнем шаге под панелью идёт результат — прилипание мешает, снимаем. */
  #ep-calc.ep-last .ep-nav { position: static; border-top: 0; padding: 0; margin-top: 20px; }
  #ep-calc.ep-last .ep-step-label { display: none; }
    #ep-calc .ep-nav button { padding: 14px 16px; }
}


/* ── Раскрывающийся блок «Ещё условия» ────────────────────── */
#ep-calc .ep-adv-toggle {
  width: auto; margin: 4px 0 0; padding: 10px 0; border: 0; background: none;
  font-family: "Unbounded", sans-serif; font-size: 12px; color: #000; cursor: pointer; text-align: left;
}
#ep-calc .ep-adv-toggle::before { content: "▸ "; }
#ep-calc .ep-adv-toggle.open::before { content: "▾ "; }
#ep-calc .ep-adv-toggle:hover { opacity: .7; background: none; }
#ep-calc .ep-adv { display: none; padding-top: 8px; }
#ep-calc .ep-adv.open { display: block; }

/* ── Результат ────────────────────────────────────────────── */
#ep-calc .ep-note {
  font-size: 12px; line-height: 1.5; border-radius: 12px; padding: 12px 14px; margin: 0;
  background: #f7f9fc; border: 1px solid #e5e7eb;
}
#ep-calc .ep-note.ok { background: #f2f9f3; border-color: #cfe7d3; }
#ep-calc .ep-note.warn { background: #fff8ec; border-color: #f0dcb6; }
#ep-calc .ep-extra { display: flex; gap: 8px; border: 0; padding: 0; }
#ep-calc .ep-extra > div {
  flex: 1; border: 1px solid #ddd; border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
#ep-calc .ep-extra span { font-size: 12px; opacity: .6; line-height: 1.3; }
#ep-calc .ep-extra b { font-size: 15px; }

@media screen and (max-width: 767px) {
  #ep-calc .ep-extra { flex-direction: column; }
}

/* ── Таблицы в тексте ─────────────────────────────────────── */
.ep-table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 14px; }
.ep-table th, .ep-table td { border: 1px solid #e5e7eb; padding: 8px 10px; text-align: left; vertical-align: top; }
.ep-table th { background: #f7f9fc; font-weight: 600; }
.ep-table td:first-child { font-weight: 600; }

/* ── Селект региона ───────────────────────────────────────────
   Общий стиль .calculator-wrapper select не даёт полю ни рамки,
   ни отступа сверху: выбранный регион наезжает на подпись
   «Регион проживания». Повторяем геометрию обычного поля. */
#ep-calc select {
  width: 100%;
  height: 64px;
  margin: 0 0 8px;
  padding: 22px 40px 0 16px;
  border: 1px solid #ddd;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 16px center;
}

/* Общий .tax-result делит строку 40/60 без зазора: длинная подпись
   упирается в сумму. Разводим колонки только на этой странице. */
#ep-calc .tax-result { gap: 12px; }

.ep-regions { overflow: auto; max-height: 460px; margin: 8px 0 12px; border: 1px solid #e5e7eb; }
.ep-table-regions { min-width: 560px; margin: 0; font-size: 13px; }
.ep-table-regions th, .ep-table-regions td { padding: 6px 8px; white-space: nowrap; }
.ep-table-regions td:first-child { white-space: normal; }
.ep-table-regions th { position: sticky; top: 0; z-index: 1; }
.ep-table-regions th, .ep-table-regions td { border-width: 0 1px 1px 0; }