/* Сброс стилей для всех элементов внутри контейнера калькулятора для единообразия */
#alpinist-ru-facade-repair-calc.alpinist-calc * {
  margin: 0 !important; /* Убираем стандартные внешние отступы */
  padding: 0 !important; /* Убираем стандартные внутренние отступы */
  box-sizing: border-box !important; /* Учитываем padding и border в размерах элемента */
  font-size: inherit !important; /* Наследуем размер шрифта от родительского элемента */
  line-height: inherit !important; /* Наследуем высоту строки от родительского элемента */
}

/* Стили для основного контейнера калькулятора */
#alpinist-ru-facade-repair-calc.alpinist-calc {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; /* Используем современный набор шрифтов для кроссплатформенности */
  max-width: 836px !important; /* Ограничиваем максимальную ширину контейнера для удобства чтения */
  margin: 10px auto !important; /* Центрируем контейнер с отступами 10px сверху и снизу */
  padding: 20px !important; /* Добавляем внутренние отступы контейнеру */
  display: block !important; /* Устанавливаем блочный тип отображения для контейнера */
}

/* Стили для заголовка калькулятора */
#alpinist-ru-facade-repair-calc.alpinist-calc h1 {
  font-size: 24px !important; /* Устанавливаем размер шрифта для заголовка */
  font-weight: 700 !important; /* Делаем текст заголовка жирным */
  text-align: center !important; /* Выравниваем текст заголовка по центру */
  margin-bottom: 20px !important; /* Добавляем отступ снизу заголовка */
}

/* Стили для контейнера формы */
#alpinist-ru-facade-repair-calc.alpinist-calc .facade-calc-form {
  background: #f9f9f9 !important; /* Устанавливаем светло-серый фон для формы */
  border-radius: 8px !important; /* Скругляем углы формы */
  padding: 20px !important; /* Добавляем внутренние отступы форме */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05) !important; /* Добавляем легкую тень для визуальной глубины */
}

/* Стили для строк формы */
#alpinist-ru-facade-repair-calc.alpinist-calc .form-row {
  margin-bottom: 20px !important; /* Устанавливаем отступ снизу между строками формы */
}

/* Уменьшенный отступ для строки с выбором типа ремонта */
#alpinist-ru-facade-repair-calc.alpinist-calc .form-row:has(#facade-repair-type) {
  margin-bottom: 10px !important; /* Уменьшаем отступ для компактного расположения строки с выбором типа ремонта */
}

/* Уменьшенный отступ для строки с вводом площади */
#alpinist-ru-facade-repair-calc.alpinist-calc .form-row:has(#facade-area) {
  margin-bottom: 7px !important; /* Еще меньший отступ для строки с вводом площади для компактности */
}

/* Уменьшенный отступ для группы чекбоксов */
#alpinist-ru-facade-repair-calc.alpinist-calc .form-row.checkbox-group {
  margin-bottom: 10px !important; /* Уменьшаем отступ для группы чекбоксов */
}

/* Стили для меток формы */
#alpinist-ru-facade-repair-calc.alpinist-calc label {
  display: block !important; /* Делаем метки блочными элементами для занятия полной ширины */
  font-size: 14px !important; /* Устанавливаем размер шрифта для меток */
  font-weight: 600 !important; /* Делаем шрифт меток жирным */
  margin-bottom: 8px !important; /* Добавляем отступ снизу меток */
}

/* Стили для выпадающих списков и числовых полей ввода */
#alpinist-ru-facade-repair-calc.alpinist-calc select,
#alpinist-ru-facade-repair-calc.alpinist-calc input[type="number"] {
  width: 100% !important; /* Устанавливаем полную ширину для полей ввода */
  padding: 12px 15px !important; /* Добавляем внутренние отступы для удобства ввода */
  border: 1px solid #ddd !important; /* Устанавливаем светло-серую рамку для полей */
  border-radius: 4px !important; /* Скругляем углы полей ввода */
  font-size: 14px !important; /* Устанавливаем размер шрифта для полей ввода */
  transition: border-color 0.3s ease !important; /* Плавный переход цвета рамки при фокусе */
}

/* Стили для текста заполнителя в числовых полях */
#alpinist-ru-facade-repair-calc.alpinist-calc input[type="number"]::placeholder {
  color: #888 !important; /* Устанавливаем серый цвет для текста заполнителя */
  font-style: italic !important; /* Делаем текст заполнителя курсивным */
}

/* Стили для полей при фокусе */
#alpinist-ru-facade-repair-calc.alpinist-calc input[type="number"]:focus,
#alpinist-ru-facade-repair-calc.alpinist-calc select:focus {
  border-color: #0077FF !important; /* Устанавливаем синюю рамку при фокусе */
  outline: none !important; /* Убираем стандартный контур при фокусе */
}

/* Устанавливаем текстовое поведение для числовых полей в Firefox */
#alpinist-ru-facade-repair-calc.alpinist-calc input[type="number"] {
  -moz-appearance: textfield !important; /* Убираем стрелки в числовых полях в Firefox */
  appearance: textfield !important; /* Убираем стрелки в числовых полях в других браузерах */
}

/* Убираем стрелки в числовых полях для WebKit-браузеров */
#alpinist-ru-facade-repair-calc.alpinist-calc input[type="number"]::-webkit-inner-spin-button,
#alpinist-ru-facade-repair-calc.alpinist-calc input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none !important; /* Скрываем стрелки спиннера в WebKit-браузерах */
  margin: 0 !important; /* Убираем отступы для спиннеров */
}

/* Стили для группы ввода (поле площади + кнопка) */
#alpinist-ru-facade-repair-calc.alpinist-calc .input-group {
  display: flex !important; /* Используем флекс-лейаут для поля ввода и кнопки */
  gap: 10px !important; /* Устанавливаем расстояние между полем и кнопкой */
}

/* Стили для кнопки отправки */
#alpinist-ru-facade-repair-calc.alpinist-calc .input-group button {
  padding: 12px 20px !important; /* Устанавливаем внутренние отступы для кнопки */
  background: #0077FF !important; /* Устанавливаем синий фон для кнопки */
  color: white !important; /* Устанавливаем белый цвет текста кнопки */
  border: none !important; /* Убираем рамку кнопки */
  border-radius: 4px !important; /* Скругляем углы кнопки */
  cursor: pointer !important; /* Устанавливаем курсор указателя для интерактивности */
  transition: background 0.3s ease, transform 0.2s ease, filter 0.2s ease, cursor 0.2s ease !important; /* Плавные переходы для фона, трансформации, фильтра и курсора */
}

/* Эффект наведения на кнопку отправки */
#alpinist-ru-facade-repair-calc.alpinist-calc .input-group button:hover {
  background: #0055CC !important; /* Темно-синий фон при наведении на кнопку */
}

/* Стили для состояния "Принято" кнопки отправки */
#alpinist-ru-facade-repair-calc.alpinist-calc .input-group button.applied {
  transform: scale(0.95) !important; /* Слегка уменьшаем кнопку для эффекта нажатия */
  background: #D3D3D3 !important; /* Устанавливаем светло-серый фон для состояния "Принято" */
  filter: none !important; /* Убираем эффект яркости для нейтрального вида */
  cursor: not-allowed !important; /* Устанавливаем курсор "неактивно" для указания завершения действия */
}

/* Стили для всплывающих подсказок */
#alpinist-ru-facade-repair-calc.alpinist-calc .tooltip {
  font-size: 12px !important; /* Устанавливаем меньший размер шрифта для подсказок */
  color: #666 !important; /* Устанавливаем серый цвет текста для подсказок */
  margin-top: 5px !important; /* Добавляем отступ сверху для подсказок */
}

/* Стили для сообщений об ошибках */
#alpinist-ru-facade-repair-calc.alpinist-calc #area-error,
#alpinist-ru-facade-repair-calc.alpinist-calc #download-error {
  min-height: 16px !important; /* Резервируем минимальную высоту для сообщений об ошибках */
  font-size: 12px !important; /* Устанавливаем размер шрифта для сообщений об ошибках */
  margin-top: 5px !important; /* Добавляем отступ сверху для сообщений */
  margin-bottom: 5px !important; /* Добавляем отступ снизу для сообщений */
}

/* Цвет сообщения об ошибке для поля площади */
#alpinist-ru-facade-repair-calc.alpinist-calc #area-error {
  color: #d32f2f !important; /* Устанавливаем красный цвет для сообщений об ошибках площади */
}

/* Стили для ошибки загрузки */
#alpinist-ru-facade-repair-calc.alpinist-calc #download-error.error {
  color: #d32f2f !important; /* Устанавливаем красный цвет для состояния ошибки загрузки */
}

/* Стили для успешной загрузки */
#alpinist-ru-facade-repair-calc.alpinist-calc #download-error.success {
  color: #2e7d32 !important; /* Устанавливаем зеленый цвет для состояния успешной загрузки */
}

/* Стили для группы чекбоксов */
#alpinist-ru-facade-repair-calc.alpinist-calc .checkbox-group {
  display: flex !important; /* Используем флекс-лейаут для группы чекбоксов */
  flex-direction: column !important; /* Располагаем чекбоксы вертикально */
  gap: 3px !important; /* Устанавливаем небольшой зазор между чекбоксами */
}

/* Стили для меток чекбоксов */
#alpinist-ru-facade-repair-calc.alpinist-calc .checkbox-group label {
  display: flex !important; /* Используем флекс-лейаут для чекбокса и текста */
  align-items: center !important; /* Выравниваем чекбокс и текст по центру */
  font-weight: normal !important; /* Устанавливаем нормальный вес шрифта для меток */
  font-size: 14px !important; /* Устанавливаем размер шрифта для меток чекбоксов */
}

/* Стили для чекбоксов */
#alpinist-ru-facade-repair-calc.alpinist-calc .checkbox-group input[type="checkbox"] {
  width: 18px !important; /* Устанавливаем ширину чекбокса */
  height: 18px !important; /* Устанавливаем высоту чекбокса */
  margin-right: 10px !important; /* Добавляем отступ справа от чекбокса */
}

/* Стили для контейнера результатов */
#alpinist-ru-facade-repair-calc.alpinist-calc .calc-result {
  background: #e3f2fd !important; /* Устанавливаем светло-голубой фон для результатов */
  border-left: 4px solid #1e88e5 !important; /* Добавляем синюю полосу слева */
  padding: 15px !important; /* Устанавливаем внутренние отступы для контейнера результатов */
  border-radius: 4px !important; /* Скругляем углы контейнера результатов */
  margin-top: 10px !important; /* Добавляем отступ сверху для контейнера результатов */
}

/* Стили для элементов результатов */
#alpinist-ru-facade-repair-calc.alpinist-calc .calc-result > div {
  font-size: 14px !important; /* Устанавливаем размер шрифта для текста результатов */
  margin-bottom: 10px !important; /* Добавляем отступ снизу между элементами результатов */
}

/* Жирный шрифт для значений результатов */
#alpinist-ru-facade-repair-calc.alpinist-calc .calc-result > div span {
  font-weight: 700 !important; /* Делаем значения результатов жирными */
}

/* Стили для заголовка описания */
#alpinist-ru-facade-repair-calc.alpinist-calc #calc-repair-desc-title {
  font-size: 16px !important; /* Устанавливаем размер шрифта для заголовка описания */
  font-weight: 600 !important; /* Делаем шрифт заголовка описания жирным */
  margin-bottom: 10px !important; /* Добавляем отступ снизу для заголовка описания */
}

/* Стили для списка описания */
#alpinist-ru-facade-repair-calc.alpinist-calc #calc-repair-desc {
  list-style-type: disc !important; /* Устанавливаем маркеры в виде точек для списка */
  padding-left: 20px !important; /* Добавляем отступ слева для списка */
  font-size: 14px !important; /* Устанавливаем размер шрифта для элементов списка */
  margin-bottom: 15px !important; /* Добавляем отступ снизу для списка */
}

/* Стили для скрытых элементов затрат на координацию и удаление */
#alpinist-ru-facade-repair-calc.alpinist-calc #calc-coordination-cost,
#alpinist-ru-facade-repair-calc.alpinist-calc #calc-removal-cost {
  display: none !important; /* Скрываем элементы изначально */
  opacity: 0 !important; /* Устанавливаем полную прозрачность изначально */
  transform: translateY(10px) !important; /* Смещаем элементы вниз на 10px изначально */
  transition: opacity 0.3s ease, transform 0.3s ease !important; /* Плавные переходы для прозрачности и смещения */
}

/* Стили для видимых элементов затрат на координацию и удаление */
#alpinist-ru-facade-repair-calc.alpinist-calc #calc-coordination-cost.visible,
#alpinist-ru-facade-repair-calc.alpinist-calc #calc-removal-cost.visible {
  display: block !important; /* Делаем элементы видимыми */
  opacity: 1 !important; /* Устанавливаем полную непрозрачность */
  transform: translateY(0) !important; /* Возвращаем элементы в исходное положение */
}

/* Стили для общей стоимости */
#alpinist-ru-facade-repair-calc.alpinist-calc #calc-total-final span {
  font-weight: 700 !important; /* Делаем текст общей стоимости жирным */
  font-size: 20px !important; /* Устанавливаем увеличенный размер шрифта для общей стоимости */
}

/* Стили для кнопки скачивания */
#alpinist-ru-facade-repair-calc.alpinist-calc #download-estimate {
  display: block !important; /* Делаем кнопку скачивания блочным элементом */
  width: 100% !important; /* Устанавливаем полную ширину для кнопки скачивания */
  padding: 15px !important; /* Устанавливаем внутренние отступы для кнопки скачивания */
  margin-top: 5px !important; /* Добавляем отступ сверху для кнопки скачивания */
  background: linear-gradient(90deg, #0077FF, #00D1FF, #0077FF) !important; /* Устанавливаем градиентный фон для кнопки */
  background-size: 200% !important; /* Устанавливаем двойной размер фона для анимации */
  color: white !important; /* Устанавливаем белый цвет текста для кнопки */
  border: none !important; /* Убираем рамку для кнопки скачивания */
  border-radius: 4px !important; /* Скругляем углы кнопки скачивания */
  font-size: 16px !important; /* Устанавливаем размер шрифта для кнопки скачивания */
  cursor: pointer !important; /* Устанавливаем курсор указателя для кнопки */
  transition: background-position 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, opacity 0.2s ease !important; /* Плавные переходы для фона, трансформации, тени, фильтра и прозрачности */
  animation: shimmer 4s infinite linear !important; /* Применяем анимацию мерцания */
}

/* Эффект наведения на кнопку скачивания */
#alpinist-ru-facade-repair-calc.alpinist-calc #download-estimate:hover {
  background-position: 100% !important; /* Сдвигаем градиентный фон при наведении */
  box-shadow: 0 4px 15px rgba(0, 119, 255, 0.3) !important; /* Добавляем тень при наведении */
}

/* Стили для состояния загрузки кнопки скачивания */
#alpinist-ru-facade-repair-calc.alpinist-calc #download-estimate.downloading {
  transform: scale(0.95) !important; /* Слегка уменьшаем кнопку в состоянии загрузки */
  filter: brightness(1.2) !important; /* Увеличиваем яркость кнопки в состоянии загрузки */
  opacity: 0.6 !important; /* Устанавливаем полупрозрачность для состояния загрузки */
}

/* Стили для отключенной кнопки скачивания */
#alpinist-ru-facade-repair-calc.alpinist-calc #download-estimate:disabled {
  opacity: 0.6 !important; /* Устанавливаем полупрозрачность для отключенного состояния */
  cursor: not-allowed !important; /* Устанавливаем курсор "неактивно" для отключенной кнопки */
}

/* Описание анимации мерцания */
#alpinist-ru-facade-repair-calc.alpinist-calc @keyframes shimmer {
  0% { background-position: -200%; } /* Начальная позиция градиента вне экрана */
  100% { background-position: 200%; } /* Конечная позиция градиента вне экрана */
}

/* Медиа-запрос для мобильных устройств */
@media (max-width: 600px) {
  #alpinist-ru-facade-repair-calc.alpinist-calc .form-row label {
    font-size: 13px !important; /* Уменьшаем размер шрифта меток для мобильных устройств */
  }
  #alpinist-ru-facade-repair-calc.alpinist-calc .tooltip {
    font-size: 11px !important; /* Уменьшаем размер шрифта подсказок для мобильных устройств */
  }
  #alpinist-ru-facade-repair-calc.alpinist-calc .form-row {
    margin-bottom: 15px !important; /* Уменьшаем отступ между строками формы для мобильных устройств */
  }
}