.calc-error {
  color: #dc3545 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  margin-top: 8px !important;
  padding: 8px 12px !important;
  border: 1px solid #dc3545 !important;
  border-radius: 6px !important;
  position: relative !important;
  animation: fadeInError 0.3s ease-out !important;
}

/* Анімація появи помилки */
@keyframes fadeInError {
  0% {
    opacity: 0;
    transform: translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Стилі для полів з помилками */
.calculate__form input.field-error,
.calculate__form input[name="your-phone"].field-error {
  border-bottom: 2px solid #dc3545 !important;
  transition: all 0.2s ease !important;
}

.calculate__form input.field-error:focus {
  border-bottom-color: #c53030 !important;
}

/* Стилі для контейнерів radio кнопок з помилками */
.form-group__checkboxes.has-error {
  border: 1px solid #dc3545 !important;
  border-radius: 6px !important;
  padding: 12px !important;
  transition: all 0.2s ease !important;
}

/* Структуризація списків radio-опцій у калькуляторі */
.calculate__form .form-group__label,
.modal-calculate__wrap .form-group__label {
  text-align: left !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  margin-bottom: 8px !important;
  padding-left: 10px !important;
  border-left: 3px solid rgba(8, 142, 201, 0.45) !important;
}

.calculate__form .form-group__checkboxes,
.modal-calculate__wrap .form-group__checkboxes {
  text-align: left !important;
}

/* Слайдер віку завжди на всю ширину */
.calculate__form .form-group__checkboxes--age,
.modal-calculate__wrap .form-group__checkboxes--age,
.calculate__form .form-group__checkboxes--2 .irs,
.modal-calculate__wrap .form-group__checkboxes--2 .irs,
.calculate__form .form-group__checkboxes--2 .irs--flat,
.modal-calculate__wrap .form-group__checkboxes--2 .irs--flat,
.calculate__form .form-group__checkboxes--age .irs,
.modal-calculate__wrap .form-group__checkboxes--age .irs,
.calculate__form .form-group__checkboxes--age .irs--flat,
.modal-calculate__wrap .form-group__checkboxes--age .irs--flat {
  width: 100% !important;
  max-width: 100% !important;
}

.calculate__form .form-group__checkboxes .form-group__checkbox,
.modal-calculate__wrap .form-group__checkboxes .form-group__checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  line-height: 1.25 !important;
  white-space: nowrap !important;
}

.calculate__form .form-group__checkboxes .form-group__checkbox input[type="radio"],
.modal-calculate__wrap .form-group__checkboxes .form-group__checkbox input[type="radio"],
.calculate__form .form-group__checkboxes .form-group__checkbox input[type="checkbox"],
.modal-calculate__wrap .form-group__checkboxes .form-group__checkbox input[type="checkbox"] {
  margin: 0 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  top: -2px !important;
}

.calculate__form .form-group__checkboxes .form-group__checkbox input[type="radio"]::before,
.modal-calculate__wrap .form-group__checkboxes .form-group__checkbox input[type="radio"]::before,
.calculate__form .form-group__checkboxes .form-group__checkbox input[type="checkbox"]::before,
.modal-calculate__wrap .form-group__checkboxes .form-group__checkbox input[type="checkbox"]::before {
  line-height: 1.8 !important;
}

.calculate__form .form-group__checkboxes .form-group__checkbox input[type="radio"]:checked::after,
.modal-calculate__wrap .form-group__checkboxes .form-group__checkbox input[type="radio"]:checked::after,
.calculate__form .form-group__checkboxes .form-group__checkbox input[type="checkbox"]:checked::after,
.modal-calculate__wrap .form-group__checkboxes .form-group__checkbox input[type="checkbox"]:checked::after {
  line-height: 1.8 !important;
}


.calculate__form .form-group__checkboxes--2,
.modal-calculate__wrap .form-group__checkboxes--2,
.calculate__form .form-group__checkboxes--3,
.modal-calculate__wrap .form-group__checkboxes--3,
.calculate__form .form-group__checkboxes--4,
.modal-calculate__wrap .form-group__checkboxes--4 {
  display: grid !important;
  align-items: start !important;
  justify-items: start !important;
  gap: 10px 14px !important;
}

.calculate__form .form-group__checkboxes--2,
.modal-calculate__wrap .form-group__checkboxes--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.calculate__form .form-group__checkboxes--3,
.modal-calculate__wrap .form-group__checkboxes--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.calculate__form .form-group__checkboxes--4,
.modal-calculate__wrap .form-group__checkboxes--4 {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

/* Покращення для мобільних пристроїв */
@media (max-width: 768px) {
  .calc-error {
    font-size: 12px !important;
    margin-top: 6px !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
  }

  .form-group__checkboxes.has-error {
    padding: 10px !important;
    border-radius: 4px !important;
  }

  .calculate__form .form-group__checkboxes--2,
  .modal-calculate__wrap .form-group__checkboxes--2,
  .calculate__form .form-group__checkboxes--3,
  .modal-calculate__wrap .form-group__checkboxes--3,
  .calculate__form .form-group__checkboxes--4,
  .modal-calculate__wrap .form-group__checkboxes--4 {
    gap: 8px 12px !important;
  }

  /* Робимо form-group на всю ширину на 768px та менше */
  .calculate__form .form-group,
  .modal-calculate__wrap .form-group {
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  /* Робимо form-group__checkboxes на всю ширину на 768px та менше */
  .calculate__form .form-group__checkboxes,
  .modal-calculate__wrap .form-group__checkboxes {
    width: 100% !important;
    flex: 0 0 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Робимо slider (irs) на всю ширину */
  .calculate__form .form-group__checkboxes .irs,
  .modal-calculate__wrap .form-group__checkboxes .irs,
  .calculate__form .form-group__checkboxes .irs--flat,
  .modal-calculate__wrap .form-group__checkboxes .irs--flat {
    width: 100% !important;
    max-width: 100% !important;
  }
}

@media (max-width: 576px) {
  .calculate__form .form-group__checkboxes--3,
  .modal-calculate__wrap .form-group__checkboxes--3,
  .calculate__form .form-group__checkboxes--4,
  .modal-calculate__wrap .form-group__checkboxes--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 375px) {
  .calculate__form .form-group__checkboxes--2,
  .modal-calculate__wrap .form-group__checkboxes--2,
  .calculate__form .form-group__checkboxes--3,
  .modal-calculate__wrap .form-group__checkboxes--3,
  .calculate__form .form-group__checkboxes--4,
  .modal-calculate__wrap .form-group__checkboxes--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 10px !important;
  }
}

/* Додаткові ефекти для кращого UX */
.calc-error::before {
  content: "⚠️" !important;
  margin-right: 6px !important;
  font-size: 14px !important;
}

/* Блокуємо розширення плашки калькулятора на мобільних пристроях */
@media (max-width: 991px) {
  /* Використовуємо fit-content замість auto */
  .fixed-arrows__calc,
  #calcWidgetTrigger {
    width: fit-content !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Навіть якщо додається клас show-text, використовуємо fit-content */
  .fixed-arrows__calc.show-text,
  #calcWidgetTrigger.show-text {
    width: fit-content !important;
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
  
  /* Прибираємо margin-right у іконки */
  .fixed-arrows__calc-icon {
    margin-right: 0 !important;
  }
  
  /* Приховуємо текст на мобільних */
  .fixed-arrows__calc-text {
    display: none !important;
    opacity: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
  }
}

/* Додаткові стилі для 768px */
@media (max-width: 768px) {
  .fixed-arrows__calc,
  #calcWidgetTrigger {
    margin-right: 0 !important;
    margin-left: 0 !important;
    right: 0 !important;
    width: fit-content !important;
    position: fixed !important;
    bottom: 50% !important;
    transform: translateY(50%) !important;
    left: 10px !important;
    z-index: 998 !important;
  }
  
  .fixed-arrows__calc.show-text,
  #calcWidgetTrigger.show-text {
    width: fit-content !important;
  }
  
  .fixed-arrows__calc-icon {
    margin-right: 0 !important;
  }

  #callWidgetTrigger,
  .fixed-arrows__call {
    bottom: 0 !important;
  }

  .fixed-arrows__top,
  .fixed-arrows__top--active {
    bottom: 0 !important;
  }
}