/* ===== FAQ (scoped by .faq-root) ===== */
.faq-root .faq-container { margin-top: 40px; }

.faq-root .faq__items {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.faq-root .faq__item {
  background: transparent;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: background-color .2s ease;
}

.faq-root .faq__item.open { background: #f9f9f9; }

/* без translateY на :hover — чтобы не было визуального "подскока" во время анимации */
.faq-root .faq__item:hover { background: #fff; }

/* заголовок вопроса */
.faq-root .faq__item-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: #fff;
  cursor: pointer;
  user-select: none;
  outline: none;
}

.faq-root .faq__item-text {
  font-size: 16px;
  font-weight: 500;
  color: #212529;
  flex: 1 1 auto;
  text-align: left;
}

/* кнопка "+" / "×" */
.faq-root .faq__item-btn {
  background: transparent;
  min-width: 30px;
  min-height: 30px;
  border-radius: 50%;
  position: relative;
  cursor: pointer;
  border: 1px solid #e60680;
  transition: border-color .2s ease;
}

.faq-root .faq__item-btn:focus { outline: 0; }

.faq-root .faq__item-btn::before,
.faq-root .faq__item-btn::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 2px;
  background: #e60680;
  transform: translate(-50%, -50%);
  transition: transform .25s ease;
}

.faq-root .faq__item-btn::after { transform: translate(-50%, -50%) rotate(90deg); }

.faq-root .faq__item-btn.active::before { transform: translate(-50%, -50%) rotate(45deg); }
.faq-root .faq__item-btn.active::after  { transform: translate(-50%, -50%) rotate(-45deg); }

/* блок ответа — анимируем ТОЛЬКО высоту */
.faq-root .faq__item-content {
  background: #fff;            /* чтобы не просвечивали серые полосы */
  padding: 0 15px;             /* постоянные боковые отступы */
  box-sizing: border-box;
  overflow: hidden;
  max-height: 0;               /* стартовое состояние */
  transition: max-height .35s ease; /* синхронизировано со script.js (DURATION=350) */
  will-change: max-height;
}

/* внутренняя обёртка — по ней меряем scrollHeight */
.faq-root .faq__item-content-inner {
  padding: 15px 0 15px 9px;    /* вертикальные отступы переносим сюда */
  line-height: 1.5;
  color: #212529;
}

/* адаптив */
@media (max-width: 768px) {
  .faq-root .faq-container { padding: 15px; }
  .faq-root .faq__item-text { font-size: 14px; }
  .faq-root .faq__item-btn  { width: 28px; height: 28px; margin-left: 1px; }
}