.mc-title {
  font-size: 30px;
  font-weight: 700;
  color: #232323;
  line-height: 1.2;
  margin: 0 0 20px 0;
}

/* Отступ сверху как между другими блоками контента */
.mc-wrap {
  margin-top: 32px;
}

/* Вариант 1: на всю ширину контентной области */
.mc-wrap--full .mortgage-calculator {
  max-width: none;
  width: 100%;
}

/* Вариант 2: по правой границе фото (ширина как у блока с фото) */
.mc-wrap--photo .mortgage-calculator {
  max-width: 646px;
  width: 100%;
}

.mortgage-calculator {
  --mc-accent: #9717ce;
  --mc-border: #dddddd;
  --mc-muted: #777;
  --mc-bg: #fff;
  --mc-soft: #f8faff;

  width: 100%;
  max-width: 646px;
  padding: 18px;
  border: 1px solid var(--mc-border);
  border-radius: 12px;
  background: var(--mc-bg);
  font-family: inherit;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  min-width: 0;
  box-sizing: border-box;
}

.mc-form {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  min-width: 0;
}

.mc-summary {
  border-radius: 12px;
  background: var(--mc-soft);
  padding: 16px;
  display: grid;
  gap: 12px;
  align-content: start;
  font-family: inherit;
  font-size: 17px;
  min-width: 0;
  box-sizing: border-box;
}

.mc-summary-top {
  display: flex;
  flex-direction: column;
  gap: 6px; /* = margin-top у input → кнопка вровень с полем */
  align-items: stretch;
}

.mc-summary-bot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: stretch;
}

.mc-summary-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  /* высота строки — как у подписи поля: 17px × 1.35 ≈ 23px */
  line-height: 1.35;
}

.mc-summary-title {
  font-size: 17px;
  font-weight: 400;
  color: #232323;
  font-family: inherit;
  flex-shrink: 1;
  min-width: 0;
}

.mc-summary-value {
  font-size: 24px;
  font-weight: 700;
  color: var(--mc-accent);
  white-space: nowrap;
  font-family: inherit;
  flex-shrink: 0;
  line-height: 1.2;
}

.mc-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 48px;
  border-radius: 10px;
  background: var(--mc-accent);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  text-decoration: none;
  user-select: none;
}

.mc-cta:hover {
  text-decoration: none;
  background: #7a10a8;
}

.mc-cta:active {
  transform: translateY(1px);
}

.mc-reset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  height: 48px;
  padding: 0 18px;
  border: 1px solid var(--mc-border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 500;
  color: #232323;
  cursor: pointer;
  text-decoration: none;
  box-sizing: border-box;
  transition: border-color 120ms ease, background 120ms ease;
}
.mc-reset:hover {
  border-color: #ccc;
  background: #f5f5f5;
}
.mc-reset:active {
  transform: translateY(1px);
}

.mortgage-calculator label {
  display: block;
  margin: 0;
  font-size: 17px;
  color: #232323;
  line-height: 1.35;
}
.mortgage-calculator input {
  display: block;
  width: 100%;
  max-width: 100%;
  height: 48px;          /* = высота кнопки → идеальное визуальное выравнивание */
  padding: 0 12px;
  margin-top: 6px;
  border: 1px solid var(--mc-border);
  border-radius: 10px;
  box-sizing: border-box;
  font-size: 17px;
  font-family: inherit;
  background: #fff;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.mortgage-calculator input[type="number"]::-webkit-inner-spin-button,
.mortgage-calculator input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.mortgage-calculator input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.mortgage-calculator input:hover {
  border-color: #ccc;
}

.mortgage-calculator input:focus {
  outline: none;
  border-color: var(--mc-accent);
  box-shadow: 0 0 0 3px rgba(151, 23, 206, 0.18);
}

.mc-summary-value #mc-payment {
  font-size: inherit;    /* * { font-size: 17px } сайта перебивает наследование — явно восстанавливаем */
  font-weight: 700;
  color: var(--mc-accent);
  font-variant-numeric: tabular-nums;
}

.mc-disclaimer {
  display: block;
  font-size: 12px;
  color: var(--mc-muted);
  margin-top: 0;
  margin-bottom: 0;
  line-height: 1.35;
}

/* ───────────── DESKTOP ───────────── */
@media (min-width: 640px) {
  /*
    Ключевой принцип: метки форм — ПРЯМЫЕ дети внешней сетки (через display:contents
    на .mc-form), mc-summary использует subgrid. Это единственный надёжный способ
    гарантировать, что строки правой колонки совпадают со строками левых колонок.
  */
  .mortgage-calculator {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: auto auto;   /* высота строки = максимум содержимого в строке */
    row-gap: 6px;
    column-gap: 14px;
    align-items: start;              /* элементы прижаты к верху своей строки */
    padding: 16px 18px;
  }

  /* mc-form «прозрачен» — его дочерние label становятся прямыми grid-элементами */
  .mc-form {
    display: contents;
  }

  .mc-form label:nth-child(1) { grid-column: 1; grid-row: 1; }
  .mc-form label:nth-child(2) { grid-column: 2; grid-row: 1; }
  .mc-form label:nth-child(3) { grid-column: 1; grid-row: 2; }
  .mc-form label:nth-child(4) { grid-column: 2; grid-row: 2; }

  .mc-summary {
    grid-column: 3;
    grid-row: 1 / -1;
    /*
      subgrid наследует строки внешней сетки — mc-summary-top попадает
      точно в строку 1, mc-summary-bot — в строку 2.
      Фон синего блока покрывает обе строки + промежуток между ними.
    */
    display: grid;
    grid-template-rows: subgrid;
    padding: 0;                      /* padding перенесён на дочерние элементы */
    align-self: stretch;
    min-height: 0;
  }

  .mc-summary-top {
    /*
      Платёж в месяц на уровне меток полей (Y=0).
      Дисклеймер — ниже платежа, в пределах первой строки сетки.
    */
    padding: 0 16px 0 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    justify-content: flex-start;
    align-items: stretch;
  }

  /* Строка платежа: без фиксированной высоты — кнопка теперь в mc-summary-bot */
  .mc-summary-row {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    align-items: baseline;
  }
  .mc-summary-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .mc-summary-value {
    white-space: nowrap;
    flex-shrink: 0;
  }

  .mc-summary-bot {
    /*
      Псевдоэлемент ::before имитирует метку поля: те же font-size и line-height,
      что у .mortgage-calculator label. Браузер вычисляет высоту одинаково для
      обоих элементов — кнопка будет ровно на уровне инпута «Процентная ставка, %».
    */
    padding: 0 16px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 0;                          /* сбрасываем базовый gap:8px — иначе ::before добавляет лишние пиксели */
    justify-content: flex-start;
    align-items: stretch;
  }

  /* Невидимый спейсер: занимает ровно столько же, сколько подпись поля */
  .mc-summary-bot::before {
    content: '\00a0';        /* неразрывный пробел — даёт строку нужной высоты */
    display: block;
    font-size: 17px;
    line-height: 1.35;       /* = .mortgage-calculator label */
    color: transparent;
    margin-bottom: 6px;      /* = margin-top у input */
    flex-shrink: 0;
  }

  .mortgage-calculator label { min-width: 0; }
  .mortgage-calculator input  { min-width: 0; max-width: 100%; }
}