/* Start:/local/templates/motor/assets/calculator/calculator.css?17878137664468*/
/**
 * calculator.css
 * Дополнение к main.css для страницы "Калькулятор себестоимости".
 *
 * Базовые примитивы (.calc-form__set, .calc-form__field, .calc-form__input,
 * .calc-form__result, .calc-form__del, .calc-form__add-btn, .btn, .tooltip)
 * приходят из main.css — здесь только то, чего в нём нет:
 * заголовки блоков, сетки на 3–4 колонки, ошибки полей, акцентные итоги.
 * Все значения — на токенах сайта (--red, --black-*, шрифт Montserrat).
 */

.calc-form__legend {
  padding: 0;
  margin-bottom: 24px;
  color: var(--black);
}

.calc-form__note {
  margin: 0 0 20px;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--black-30);
}

.calc-form__field {
  position: relative;
  min-width: 0;
}

/* Сетки на 3 и 4 колонки — в дополнение к --one-el / --two-el из main.css */
@media (min-width: 1440px) {
  .calc-form__set-grid--three-el {
    grid-template-columns: repeat(3, 1fr);
  }

  .calc-form__set-grid--four-el {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Итоги блока "Наименования" наследуют базовые 6 колонок строки товара,
     поэтому оба поля той же ширины, что и поля позиции. Явные номера
     колонок ставят их точно под "Сумма инвойса, ¥" (3-я) и
     "Сумма инвойса, ₽" (4-я). Ниже 1440px сетка одноколоночная —
     поля просто встают в общий столбец, как и все остальные. */
  .calc-form__set-grid--invoice-totals > .calc-form__field:first-child {
    grid-column: 3;
  }

  .calc-form__set-grid--invoice-totals > .calc-form__field:last-child {
    grid-column: 4;
  }
}

.calc-form__set-grid + .calc-form__set-grid,
.calc-form__ol + .calc-form__set-grid {
  margin-top: 20px;
}

/* Поля ввода: дата и текст выглядят так же, как числовые поля сайта */
.calc-form__input[type="date"] {
  min-height: 40px;
  font-family: inherit;
  color: inherit;
  background-color: var(--white);
}

.calc-form__input.is-invalid {
  border-color: var(--red);
}

/* Сообщение об ошибке под полем.
   Позиционируется абсолютно (как .error-massage у форм сайта):
   появление текста не должно сдвигать соседние поля вниз.
   Помещается в 20px-зазор сетки .calc-form__set-grid. */
.calc-form__error {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  margin-top: 2px;
  font-size: 1.2rem;
  line-height: 1.2;
  color: var(--red);
  pointer-events: none;
}

.calc-form__error:empty {
  display: none;
}

/* Итоговые значения выделяются на фоне обычных расчётных полей */
.calc-form__result--total {
  font-weight: 600;
  color: var(--red);
  background-color: var(--red-90);
}

/* Предупреждение о несовпадении платежей и инвойсов */
.calc-form__warning {
  margin: 0 0 24px;
  padding: 12px 16px;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--red);
  background-color: var(--red-90);
  border-radius: 12px;
}

.calc-form__warning[hidden] {
  display: none;
}

/* Кнопки под блоком: "Добавить позицию" рядом с "Очистить всё" */
.calc-form__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

.calc-form__actions .calc-form__add-btn {
  margin: 0;
}

.calc-form__hint {
  margin: 12px 0 0;
  font-size: 1.4rem;
  line-height: 1.4;
  color: var(--black-30);
}

.calc-form__hint[hidden] {
  display: none;
}

/* Кнопка удаления строки: на узких экранах остаётся в своей колонке,
   на десктопе main.css уводит её за правый край строки. */
.calc-form__ol--controls > li > .calc-form__del {
  align-self: center;
}

/* Модальное окно подтверждения очистки — кнопки в ряд */
.modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

/* End */
/* /local/templates/motor/assets/calculator/calculator.css?17878137664468 */