/* =========================================================
   Стилизация квиза "Расчёт стоимости капсул" — Drupal 9 Webform
   Реальная разметка (проверено по HTML страницы):

   <fieldset class="... webform-type-radios ...">
     <legend><span class="fieldset-legend ...">Вопрос?</span></legend>
     <div class="js-webform-radios webform-options-display-buttons">
       <div class="webform-options-display-buttons-wrapper">
         <div class="form-item form-type-radio radio">
           <label class="webform-options-display-buttons-label control-label option" for="...">
             <input class="visually-hidden form-radio" type="radio" .../>
             Текст варианта
           </label>
         </div>
       </div>
       ...
     </div>
   </fieldset>

   input лежит ВНУТРИ label (не рядом) — стилизуем через
   :has(), с JS-подстраховкой для случаев без поддержки :has().

   Всё привязано к id формы, чтобы не задеть остальные вебформы
   сайта: #webform-submission-raschyot-stoimosti-kapsul-add-form
   ========================================================= */

#webform-submission-raschyot-stoimosti-kapsul-add-form {
  --wq-navy: #12253F;
  --wq-navy-soft: #3C5170;
  --wq-teal: #0E7C7B;
  --wq-teal-soft: #E4F3F2;
  --wq-teal-dark: #0A5958;
  --wq-orange: #E85D2C;
  --wq-orange-dark: #C64A20;
  --wq-border: #E1E5EA;
  --wq-text: #1B2733;
  --wq-text-muted: #6B7787;
  --wq-radius: 12px;
  --wq-shadow: 0 1px 2px rgba(18, 37, 63, .04);
  --wq-shadow-hover: 0 6px 18px rgba(18, 37, 63, .10);

  max-width: 640px;
  margin: 0 auto;
  font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: var(--wq-text);
}

/* ---------------------------------------------------------
   Прогресс "1 of 9"
   --------------------------------------------------------- */
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-progress {
  margin-bottom: 18px;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-progress__summary {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--wq-text-muted);
  padding: 4px 10px;
  background: var(--wq-teal-soft);
  color: var(--wq-teal-dark);
  border-radius: 999px;
}

/* JS ниже добавит .webform-progress__bar — стили на неё */
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-progress__bar {
  height: 4px;
  border-radius: 2px;
  background: var(--wq-border);
  margin-top: 10px;
  overflow: hidden;
}
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-progress__bar-fill {
  height: 100%;
  background: var(--wq-teal);
  border-radius: 2px;
  transition: width .25s ease;
}

/* ---------------------------------------------------------
   Заголовок вопроса
   --------------------------------------------------------- */
#webform-submission-raschyot-stoimosti-kapsul-add-form fieldset {
  border: none;
  margin: 0;
  padding: 0;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form legend,
#webform-submission-raschyot-stoimosti-kapsul-add-form .fieldset-legend {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.35;
  color: var(--wq-navy);
  margin: 4px 0 20px;
  padding: 0;
  float: none;
  width: auto;
}

/* убираем звёздочку required, если не нужна визуально — раскомментируйте при желании */
/* .fieldset-legend .form-required::after { content: ""; } */

/* ---------------------------------------------------------
   Список карточек-вариантов
   --------------------------------------------------------- */
#webform-submission-raschyot-stoimosti-kapsul-add-form .js-webform-radios.webform-options-display-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 26px;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-wrapper {
  width: 100%;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .form-item.form-type-radio {
  margin: 0;
}

/* Карточка = сам label, инпут внутри спрятан классом visually-hidden из коробки,
   на всякий случай дублируем скрытие явно */
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 16px 18px 16px 50px;
  border: 1.5px solid var(--wq-border);
  border-radius: var(--wq-radius);
  background: #fff;
  cursor: pointer;
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--wq-text);
  box-shadow: var(--wq-shadow);
  transition: border-color .15s ease, background .15s ease,
              box-shadow .15s ease, transform .1s ease, color .15s ease;
}

/* кастомный кружок-индикатор слева */
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #C7CDD6;
  background: #fff;
  transition: border-color .15s ease;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label::after {
  content: "";
  position: absolute;
  left: 23px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--wq-teal);
  transform: translateY(-50%) scale(0);
  transition: transform .15s ease;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label:hover {
  border-color: var(--wq-teal);
  box-shadow: var(--wq-shadow-hover);
  transform: translateY(-1px);
}

/* Состояние "выбрано" — через :has() (Chrome/Edge/Safari/Firefox 2024+) */
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label:has(input:checked) {
  border-color: var(--wq-teal);
  background: var(--wq-teal-soft);
  box-shadow: 0 0 0 1px var(--wq-teal) inset, var(--wq-shadow-hover);
  color: var(--wq-teal-dark);
  font-weight: 700;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label:has(input:checked)::before {
  border-color: var(--wq-teal);
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label:has(input:checked)::after {
  transform: translateY(-50%) scale(1);
}

/* Подстраховка для браузеров без :has() — класс добавляет JS ниже */
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label.is-checked {
  border-color: var(--wq-teal);
  background: var(--wq-teal-soft);
  box-shadow: 0 0 0 1px var(--wq-teal) inset, var(--wq-shadow-hover);
  color: var(--wq-teal-dark);
  font-weight: 700;
}
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label.is-checked::before {
  border-color: var(--wq-teal);
}
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label.is-checked::after {
  transform: translateY(-50%) scale(1);
}

/* Видимый фокус с клавиатуры */
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label input[type="radio"]:focus-visible ~ * ,
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label:has(input:focus-visible) {
  outline: 2px solid var(--wq-navy-soft);
  outline-offset: 2px;
}

/* ---------------------------------------------------------
   Кнопка "Далее →" (Bootstrap btn/btn-default перебиваем)
   --------------------------------------------------------- */
#webform-submission-raschyot-stoimosti-kapsul-add-form .form-actions {
  margin: 0;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-button--next.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 22px;
  background: var(--wq-orange);
  border: none;
  border-radius: var(--wq-radius);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .01em;
  box-shadow: none;
  transition: background .15s ease, transform .1s ease;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-button--next.btn:hover,
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-button--next.btn:focus {
  background: var(--wq-orange-dark);
  color: #fff;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-button--next.btn:active {
  transform: scale(0.98);
}

/* Кнопка "Назад", если появится на следующих шагах квиза */
#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-button--previous.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 22px;
  margin-top: 10px;
  background: transparent;
  color: var(--wq-text-muted);
  font-size: 15px;
  font-weight: 600;
  border: 1.5px solid var(--wq-border);
  border-radius: var(--wq-radius);
  box-shadow: none;
}

#webform-submission-raschyot-stoimosti-kapsul-add-form .webform-button--previous.btn:hover {
  border-color: var(--wq-navy-soft);
  color: var(--wq-navy);
}

@media (max-width: 480px) {
  #webform-submission-raschyot-stoimosti-kapsul-add-form .fieldset-legend {
    font-size: 18px;
  }
  #webform-submission-raschyot-stoimosti-kapsul-add-form .webform-options-display-buttons-label {
    padding: 14px 16px 14px 46px;
  }
}