/****************************************************
  Fruity Compact — center & tight spacing (v6)
****************************************************/

/* База */
html, body { font-size: 0.95rem !important; line-height: 1.4 !important; }

/* ===== 1) ЦЕНТР ПОД ЗАГОЛОВКОМ ===== */
/* центрируем главную колонку */
#outerframeContainer #main-col{
  max-width: 760px !important;     /* под себя: 680–820px */
  margin: 0 auto !important;
  float: none !important;
}
#outerframeContainer .group-container,
#outerframeContainer .group-outer-container{
  max-width: 760px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* ===== 2) УБРАТЬ РАМКИ ФРУТИ ===== */
.question-container{
  border: none !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ===== 3) СЖАТЬ ОТСТУПЫ ===== */
/* между вопросами */
.ls-question-wrapper,
.question-container{
  margin: 0 0 .28rem 0 !important;
  padding: .12rem 0 !important;
}
/* «вопрос → поле» почти вплотную */
.question-title-container,
.ls-label-question,
.question-text,
.control-label{
  margin: 0 0 .10rem 0 !important;
  padding: 0 !important;
}
/* глушим наследованные вертикальные поля */
.form-group,
.answer-container,
.answers-list,
.question-container .row{
  margin: 0 !important;
  padding: 0 !important;
}

/* ===== 4) ПОЛЯ ВВОДА — компактные ===== */
.form-control,.form-select{
  font-size: .92rem !important;
  height: 34px !important;
  line-height: 1.2 !important;
  padding: 5px 10px !important;
  border-radius: 4px !important;
}
/* текстовые/числовые — неширокие */
input[type="text"].form-control,
input[type="number"].form-control,
input[type="email"].form-control,
input[type="tel"].form-control{ max-width: 22rem !important; }
/* textarea как строчное поле */
textarea.form-control{
  height: 34px !important;
  min-height: 34px !important;
  max-height: 120px !important;
  resize: vertical !important;
  padding: 5px 10px !important;
}
/* не расползаться внутри матриц */
.ls-answers .form-control{
  max-width: 18rem !important;
  display: inline-block !important;
}

/* ===== 5) КНОПКИ ПОЛА — узкие ===== */
/* убрать большой нижний отступ у кнопок темы */
.btn.mb-3{ margin-bottom: .25rem !important; }

.ls-answers.gender-button.btn-group .btn,
.ls-answers.answers-list.btn-group .btn{
  height: 36px !important;
  min-width: 110px !important;      /* уже, чем по умолчанию */
  padding: .25rem .55rem !important;
  font-size: .9rem !important;
  line-height: 1.1 !important;
  border-radius: 8px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}
.ls-answers.gender-button.btn-group .btn + .btn{ margin-left: 6px !important; }
.ls-answers.gender-button .ls-icon{ font-size: .95em; margin-right: .35rem; }

/* Радио/чекбоксы обычных вопросов */
.form-check-input{
  width: 1rem !important; height: 1rem !important; margin-top: .25rem !important;
}

/* ===== 6) Адаптив ===== */
@media (max-width: 575.98px){
  #outerframeContainer #main-col,
  #outerframeContainer .group-container{ max-width: 100% !important; padding: 0 10px !important; }
  .ls-answers.gender-button.btn-group .btn{ min-width: 100px !important; height: 34px !important; }
  input.form-control, textarea.form-control, .ls-answers .form-control{ max-width: 100% !important; }
}

/* Небольшие зазоры между кнопками выбора пола */
.ls-answers.gender-button.btn-group {
  display: flex !important;
  flex-wrap: wrap;
  gap: 6px;               /* расстояние между кнопками */
}

/* На всякий случай — если где-то .btn-group не схватит gap */
.ls-answers.gender-button.btn-group .btn + .btn {
  margin-left: 6px !important;
}

/* === ВИЗУАЛЬНОЕ ОТДЕЛЕНИЕ ГРУПП ВОПРОСОВ === */
.group-container {
  border: 1px solid #e0e0e0 !important;   /* тонкая серая рамка */
  border-radius: 10px !important;         /* лёгкое скругление */
  padding: 1.2rem 1.6rem !important;      /* внутренние отступы */
  margin: 1.8rem auto !important;         /* отступ сверху/снизу между группами */
  background-color: #fafafa !important;   /* чуть-чуть сероватый фон */
  box-shadow: 0 1px 3px rgba(0,0,0,0.05) !important; /* мягкая тень */
}

/* Чтобы заголовок группы ("Введите ваши данные") выглядел частью рамки */
/* Карточный стиль группы */
.group-container {
  background: #fff !important;
  border: 1px solid #ccc !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
  padding: 1.5rem 2rem !important;
  margin: 2rem auto !important;
}
.group-container .group-title {
  font-weight: 600 !important;
  color: #2c2c2c !important;
  text-align: center !important;
  margin-bottom: 1rem !important;
}