/* Страница «Калькулятор». Figma: Calculator/pc 611:5631 (1920×1080), Calculator/mb 611:5638 (390×844).
   В макете это заготовка: шапка, крошки и H1, без содержимого. Форма расчёта собрана
   на токенах проекта теми же значениями, что форма заказа (css/checkout.css), потому
   что другого образца поля ввода в макете нет. Спека — log-figma.md §32. */
.calc {
  padding-bottom: 120px;
}

/* Блоб тот же, что на странице каталога */
.calc__blob {
  left: -241px;                  /* 20 − 261 */
  top: -86px;                    /* 3 − 89 */
  width: 1880px;
  height: 1383px;
}

/* H1 (611:5633): 261/223 240×43, Bold 36. В потоке: раньше стоял на top 134, а форма
   компенсировала его отсутствие в потоке отступом 159 — переименование страницы
   накрывало форму заголовком. Крошки кончаются на 38, H1 стоит на 134 → зазор 96. */
.calc__h1 {
  margin: 96px 0 0;
  font-weight: 700;
  font-size: 36px;
  line-height: normal;
  color: var(--black);
}

/* Зазор H1 → форма: 197 − 177 = 20 */
.calc__body {
  margin-top: 20px;
}

.calc__intro {
  margin: 0 0 32px;
  max-width: 720px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--brand);
}

.calc__form {
  max-width: 860px;
  padding: 32px;
  border-radius: var(--r-card);
  background: var(--white);
}

.calc__row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.calc__field {
  display: flex;
  flex: 1 1 200px;
  flex-direction: column;
  gap: 8px;
}

.calc__label {
  font-size: 14px;
  color: var(--brand);
}

.calc__input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid var(--brand-16);
  border-radius: var(--r-btn);
  background: var(--white);
  font-family: inherit;
  font-size: 16px;
  color: var(--black);
}

.calc__input:focus-visible {
  border-color: var(--brand);
  outline: none;
}

.calc__error {
  margin: 16px 0 0;
  font-size: 14px;
  color: #d23c3c;
}

.calc__error[hidden] {
  display: none;
}

.calc__result {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
  padding: 24px;
  border-radius: var(--r-btn);
  background: #f6f6f6;
}

.calc__result-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
}

.calc__result-label {
  font-size: 14px;
  color: var(--brand);
}

.calc__result-value {
  margin: 0;
  font-weight: 700;
  font-size: 20px;
  color: var(--black);
}

.calc__note {
  margin: 20px 0 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--brand);
  opacity: 0.7;
}

@media (max-width: 1199px) {
  .calc {
    padding-bottom: 60px;
  }

  /* H1 (611:5644): 28/157 187×33, Bold 28 */
  .calc__h1 {
    left: 14px;
    top: 75px;                   /* 157 − 82 */
    font-size: 28px;
  }

  /* низ крошек mb 25 (11 + 14), низ H1 108 (75 + 33), зазор 20 */
  .calc__body {
    margin-top: 70px;
    padding-top: 33px;
  }

  .calc__intro {
    margin-bottom: 20px;
  }

  .calc__form {
    padding: 20px 14px;
  }

  .calc__row {
    gap: 16px;
  }

  .calc__field {
    flex: 1 1 100%;
  }

  .calc__result {
    padding: 16px;
  }

  .calc__result-row {
    flex-direction: column;
    gap: 4px;
  }
}