/* Стили backend-калькулятора и форм
   Дом42 — форма "Рассчитать предварительную стоимость ремонта"
   Логика как в макете "Форма обр связи"
*/

/* =========================================================
   ОБЩАЯ ОБЁРТКА КАЛЬКУЛЯТОРА
   ========================================================= */

.calculator {
  padding: 80px 0;
  background: #2F3F5F; /* тёмно-синий фон секции */
}

/* Две колонки: слева заголовок, справа форма */
.calculator .container {
  display: flex;
  justify-content: space-between;
  align-items: center; /* выравниваем заголовок и форму по высоте */
  gap: 40px;
  min-height: 520px;
}

/* Левая колонка — заголовок/текст */
.calculator__intro {
  flex: 1;
  max-width: 460px;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center; /* центрируем текст относительно высоты секции */
}

.calculator__badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 12px;
}

.calculator__title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 10px;
  color: #ffffff;
}

.calculator__subtitle {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.5;
}

/* Правая колонка — обёртка формы */
.calculator__inner {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* Белая карточка формы-квиза */
.calculator__form {
  width: 100%;
  max-width: 480px;
  background: #ffffff;
  border-radius: 18px;
  padding: 28px 28px 24px;
  box-shadow: var(--shadow-soft);
}

/* =========================================================
   ИНДИКАТОРЫ ШАГОВ (1 / 2 / 3 / 4)
   ========================================================= */

.calculator__steps-indicators {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}

.calculator__step-indicator {
  width: 24px;
  height: 24px;
  border-radius: 999px;
  border: 1px solid var(--line-gray);
  background: #f5f7fa;
  font-size: 12px;
  font-weight: 600;
  color: var(--steel-gray);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.calculator__step-indicator--active {
  border-color: #2f3f5f;
  background: #2f3f5f;
  color: #ffffff;
}

/* =========================================================
   ОТДЕЛЬНЫЕ ШАГИ КВИЗА
   ========================================================= */

.calculator__step {
  display: none;
}

.calculator__step--active {
  display: block;
}

.calculator__step-title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
  color: var(--graphite);
}

.calculator__step-text {
  font-size: 14px;
  color: var(--steel-gray);
  line-height: 1.5;
  margin-bottom: 18px;
}

/* =========================================================
   ВАРИАНТЫ В ВИДЕ КАРТОЧЕК (ЧЕКБОКСЫ / РАДИО)
   ========================================================= */

.calculator__options-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* Карточка-чекбокс / радиокнопка */
.calculator__option {
  position: relative;
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line-gray);
  background: #fafafa;
  cursor: pointer;
  font-size: 14px;
  color: var(--graphite);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    color 0.2s ease;
}


/* Скрываем реальный input */
.calculator__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

/* Для вариантов, где заголовок и подпись разделены */
.calculator__option-title {
  display: block;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--graphite);
}

.calculator__option-text {
  display: block;
  font-size: 13px;
  color: var(--steel-gray);
}

/* Подчёркиваем выбранную карточку (как в макете) */
.calculator__option:has(input:checked) {
  background: #FF9800;         /* синий фон */
  border-color: #FF9800;       /* сливаем рамку с фоном */
  color: #ffffff !important;   /* белый текст */
  box-shadow: 0 0 0 1px rgba(47, 63, 95, 0.25);
}
/* Чтобы заголовок и подзаголовок тоже стали белыми */
.calculator__option:has(input:checked) .calculator__option-title,
.calculator__option:has(input:checked) .calculator__option-text {
  color: #ffffff !important;
}
/* Чтоб кнопки откликались при наведении */
.calculator__option:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
/* =========================================================
   ПОЛЯ ВВОДА / ТЕКСТОВАЯ ОБЛАСТЬ
   ========================================================= */

.calculator__field {
  margin-bottom: 16px;
}

.calculator__field-label {
  display: block;
  font-size: 13px;
  color: var(--steel-gray);
  margin-bottom: 4px;
}

.calculator__input,
.calculator__textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #dde2e6;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  resize: vertical;
}

.calculator__input:focus,
.calculator__textarea:focus {
  border-color: #2f3f5f;
  box-shadow: 0 0 0 1px rgba(47, 63, 95, 0.12);
  background: #ffffff;
}

.calculator__field-hint {
  font-size: 12px;
  color: var(--steel-gray);
  margin-bottom: 8px;
}

/* Дополнительные чекбоксы */
.calculator__checkboxes {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.calculator__checkbox {
  font-size: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--graphite);
}

.calculator__checkbox input {
  width: 16px;
  height: 16px;
}

/* Сетка для полей Имя / Телефон */
.calculator__contacts-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Блок с текстом про политику */
.calculator__policy {
  margin-top: 10px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--steel-gray);
}

/* =========================================================
   КНОПКИ УПРАВЛЕНИЯ ШАГАМИ
   ========================================================= */

.calculator__controls {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
}

.calculator__controls .btn {
  flex: 1;
}

/* =========================================================
   ВСПЛЫВАЮЩИЕ ПОДСКАЗКИ
   ========================================================= */
.calculator__error {
  display: none;
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #ffecec;
  color: #c62828;
  font-size: 13px;
  line-height: 1.4;
}
.calculator__success {
  display: none;
  margin-top: 8px;
  margin-bottom: 4px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #e8f5e9;   /* светло-зелёный фон */
  color: #1b5e20;        /* зелёный текст */
  font-size: 13px;
  line-height: 1.4;
  border: 1px solid rgba(27, 94, 32, 0.18);
}
/* ================================
   Calculator: disabled buttons UX
   ================================ */

.calculator__controls .btn:disabled,
.calculator__controls button:disabled {
  opacity: 0.65;          /* визуально "приглушаем" */
  cursor: not-allowed;    /* понятный курсор */
  box-shadow: none;       /* без подсветки */
  transform: none;        /* без "прыжков" */
}

.calculator__controls .btn:disabled:hover,
.calculator__controls button:disabled:hover {
  filter: none;
  box-shadow: none;
}


/* =========================================================
   АДАПТИВ ДЛЯ МОБИЛЬНОЙ ВЕРСИИ
   ========================================================= */

@media (max-width: 768px) {
  .calculator {
    padding: 40px 0;
  }

  /* На мобильных убираем двухколоночный flex */
  .calculator .container {
    display: block;
    min-height: auto;
  }

  .calculator__intro {
    max-width: 100%;
    margin-bottom: 20px;
    text-align: left;
  }

  .calculator__inner {
    justify-content: flex-start;
  }

  .calculator__form {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 22px 18px 18px;
    border-radius: 16px;
  }

  .calculator__options-grid {
    grid-template-columns: 1fr;
  }

  .calculator__contacts-grid {
    grid-template-columns: 1fr;
  }

  .calculator__title {
    font-size: 22px;
  }
}

/* ================================
   Step indicators: smooth appear
   ================================ */

/* базовое состояние */
.calculator__step-indicator {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 180ms ease, transform 180ms ease;
  will-change: opacity, transform;
}

/* когда кружок скрывается через JS (display:none) анимация не работает,
   поэтому используем мягкость для момента появления */
.calculator__step-indicator:not(.calculator__step-indicator--active) {
  opacity: 0.78;            /* слегка спокойнее, чтобы активный выделялся */
}

/* активный — чуть ярче/чётче */
.calculator__step-indicator--active {
  opacity: 1;
  transform: translateY(-1px);
}

/* ================================
   Step indicators: animate show/hide
   ================================ */

.calculator__step-indicator {
  transition:
    opacity 180ms ease,
    transform 180ms ease,
    width 180ms ease,
    height 180ms ease,
    border-width 180ms ease,
    margin 180ms ease;
  will-change: opacity, transform, width, height;
}

.calculator__step-indicator--hidden {
  opacity: 0;
  transform: translateY(-6px) scale(0.6);

  width: 0;
  height: 0;
  margin: 0 !important;
  border-width: 0;
  padding: 0;

  overflow: hidden;
  pointer-events: none;
}

/* =========================================================
   MODAL: калькулятор поверх всего сайта
   ========================================================= */
body.dom42-modal-open{
  overflow: hidden;
}

.calculator.calculator--modal{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(17,24,39,.72);
  padding: 18px 0;
  overflow: auto;
}

/* центрируем карточку */
.calculator.calculator--modal .container{
  min-height: calc(100vh - 36px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* в модалке левую колонку прячем */
.calculator.calculator--modal .calculator__intro{
  display: none;
}

.calculator.calculator--modal .calculator__inner{
  justify-content: center;
  width: 100%;
}

.calculator.calculator--modal .calculator__form{
  position: relative;                 /* для крестика */
  width: min(520px, 92vw);
  max-height: calc(100vh - 36px);
  overflow: auto;
}

/* крестик */
.calculator__modal-close{
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(47,63,95,.18);
  background: #fff;
  color: #2F3F5F;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.calculator__modal-close:hover{ background:#f5f7fa; }

/* =========================================================
   MODAL: убираем индикаторы шагов и кнопку "Назад"
   ========================================================= */

/* убираем цифры 1-4 сверху */
.calculator.calculator--modal .calculator__steps-indicators{
  display: none !important;
}

/* убираем кнопку "Назад" */
.calculator.calculator--modal #calculator-prev{
  display: none !important;
}

/* чтобы "Отправить заявку" красиво стояла справа */
.calculator.calculator--modal .calculator__controls{
  justify-content: flex-end;
}
/* =========================================================
   MODAL: после отправки показываем только success
   ========================================================= */
.calculator.calculator--modal.calculator--success-only .calculator__form{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}

.calculator.calculator--modal.calculator--success-only .calculator__form > *:not(#calculator-success){
  display: none !important;
}

.calculator.calculator--modal.calculator--success-only #calculator-success{
  display: block !important;
  margin: 0 !important;
  text-align: center;
  padding: 16px 14px;
  font-size: 14px;
}