/* ==========================================================================
   Страница «Онлайн оплата». Дополняет news.css и home.css — оттуда берутся
   токены, кнопки, секции, шаги, плитки и аккордеон вопросов.
   ========================================================================== */

.nd-payhead { padding: 4px 0 26px; }
.nd-pay h1.page-title { max-width: 20ch; }
.nd-payhead .nd-hero__lead { margin-bottom: 0; }

/* ---------- две колонки: форма и памятка ---------- */
.nd-paycols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start;
  margin-bottom: 8px;
}

/* ---------- форма ---------- */
.nd-payform {
  border: 1px solid var(--nd-line);
  border-radius: 4px;
  background-color: #fff;
  padding: 26px 28px 24px;
}
.nd-payform__title {
  margin: 0 0 18px;
  font-family: var(--nd-serif);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.2;
  text-transform: none;
  color: var(--nd-ink);
}

.nd-payfield { margin-bottom: 18px; }
.nd-payfield label {
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  font-size: 0.84375rem;
  line-height: 1.4;
  color: var(--nd-ink);
}
.nd-payfield input {
  display: block;
  width: 100%;
  border: 1px solid var(--nd-line-2);
  border-radius: 3px;
  background-color: #fff;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--nd-ink);
  font-variant-numeric: tabular-nums;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.nd-payfield input::-webkit-input-placeholder { color: var(--nd-ink-3); }
.nd-payfield input::placeholder { color: var(--nd-ink-3); }
.nd-payfield input:focus {
  outline: none;
  border-color: var(--nd-accent);
  -webkit-box-shadow: 0 0 0 3px rgba(243, 113, 43, 0.14);
  box-shadow: 0 0 0 3px rgba(243, 113, 43, 0.14);
}
.nd-payfield input.is-err { border-color: #c0392b; }
.nd-payfield small {
  display: block;
  margin-top: 6px;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--nd-ink-3);
}

/* эхо суммы: показывает, как форма поняла ввод — защищает от «10 000» → 10 ₽ */
.nd-payform__echo {
  display: block;
  margin-top: 8px;
  font-weight: 600;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--nd-ink);
  font-variant-numeric: tabular-nums;
}
.nd-payform__echo:empty { display: none; }

.nd-payform__msg {
  margin: 0 0 16px;
  border-radius: 3px;
  font-size: 0.84375rem;
  line-height: 1.5;
}
.nd-payform__msg:empty { display: none; }
.nd-payform__msg.is-err {
  border: 1px solid #e6c3bd;
  background-color: #fdf1ef;
  padding: 11px 13px;
  color: #a5311f;
}
.nd-payform__msg.is-ok {
  border: 1px solid #bfe0c4;
  background-color: #f1faf2;
  padding: 11px 13px;
  color: #1f6b32;
}
.nd-payform__msg.is-ok a {
  color: inherit;
  text-decoration: underline;
}

.nd-payform__safe {
  margin: 14px 0 0;
  font-size: 0.75rem;
  line-height: 1.5;
  color: var(--nd-ink-3);
}

/* ---------- правая колонка ---------- */
.nd-paycard { display: grid; gap: 14px; }
.nd-paycard .nd-card p {
  margin: 0 0 12px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--nd-ink-2);
}
.nd-paycard .nd-card p.nd-note { margin: 10px 0 0; }

.nd-paylist { margin: 10px 0 0; }
.nd-paylist li {
  display: grid;
  grid-template-columns: 18px minmax(0, 1fr);
  gap: 9px;
  align-items: start;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--nd-ink-2);
}
.nd-paylist li + li { margin-top: 9px; }
.nd-paylist .nd-ico { color: var(--nd-ok); margin-top: 1px; }

.nd-payphones { margin: 10px 0 0; }
.nd-payphones li + li { margin-top: 9px; }
.nd-payphones a {
  display: block;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.3;
  color: var(--nd-ink);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
.nd-payphones a:hover { color: var(--nd-accent-ink); }
.nd-payphones span {
  display: block;
  font-size: 0.71875rem;
  line-height: 1.4;
  color: var(--nd-ink-3);
}

/* ---------- адаптив ---------- */
@media (max-width: 1024px) {
  .nd-paycols { grid-template-columns: minmax(0, 1fr) 280px; gap: 22px; }
  .nd-payform { padding: 22px 22px 20px; }
}

@media (max-width: 810px) {
  .nd-paycols { grid-template-columns: minmax(0, 1fr); }
  .nd-paycard { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
}

@media (max-width: 576px) {
  .nd-payhead { padding-bottom: 20px; }
  .nd-payform { padding: 20px 18px 18px; }
  .nd-paycard { grid-template-columns: minmax(0, 1fr); }
  .nd-payfield input { font-size: 1rem; }
}

/* заголовок вопросов оформляется как у остальных секций, а не отдельным стилем */
.nd-faq--plain { margin-top: 0; border-top: 0; }

/* последняя секция страницы — вопросы: линия-разделитель нужна, в отличие от главной,
   где последним идёт призыв в собственной рамке */
.nd-pay .nd-sec:last-child { border-top: 1px solid var(--nd-line); padding-top: 44px; }

/* в региональном варианте у города два номера */
.nd-payphones a + a { margin-top: 4px; }