---

/* Изменять можно только этот файл. JavaScript не нужен. */

.faq {
  /* Готовые значения для оформления открытого вопроса. */
  --faq-active-color: #5155cf;
  --faq-active-background: #fafaff;
  --faq-active-stripe-color: #5b5fe2;
  --faq-active-stripe-width: 4px;
}

/* Ваш CSS ниже */

/* 1. Базовые стили и плавность для заголовка */
details .faq__question {
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

details .faq__question-text {
  transition: color 0.3s ease;
}

/* 2. Плавное раскрытие/скрытие ответа */
/* Обертка ответа изначально схлопнута */
.faq__answer-clip {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

/* Когда details открыт — раскрываем обертку */
details[open] .faq__answer-clip {
  grid-template-rows: 1fr;
}

/* 3. Переопределяем поведение из base.css для закрытых details */
/* Это нужно, чтобы ответы реально скрывались, а не просто сжимались в 0 высоты */
details:not([open])::details-content {
  content-visibility: hidden;
}

/* 4. Стили открытого вопроса (фон + полоса) */
details[open] .faq__question {
  background-color: var(--faq-active-background);
  /* box-shadow вместо border-left, чтобы не дергался текст при изменении ширины */
  box-shadow: inset var(--faq-active-stripe-width) 0 0 0 var(--faq-active-stripe-color);
}

details[open] .faq__question-text {
  color: var(--faq-active-color);
}

/* 5. Иконки (плавный поворот) */
details .faq__icon::after {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
  color: var(--faq-active-color);
  transition: transform 0.3s ease;
}

/* Закрытое состояние — плюс */
details:not([open]) .faq__icon::after {
  content: "+";
}

/* Открытое состояние — плюс поворачивается на 45 градусов, образуя крестик */
details[open] .faq__icon::after {
  content: "+";
  transform: rotate(45deg);
}