.section--faq {
  background-color: var(--adebeo-color-primary);
  padding: var(--adebeo-spacing-xl) 0;
}

.section--faq .section__heading {
  color: var(--adebeo-white);
}

.section--faq__question,
.section--faq__answer__content {
  margin-top: var(--adebeo-spacing-s);
  background-color: var(--adebeo-white);
  border-radius: var(--adebeo-border-radius-xs);
  padding: var(--adebeo-spacing-m);
  color: var(--adebeo-text-color);
}

.section--faq__question {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px var(--adebeo-spacing-s);
}

.section--faq__question__text {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px var(--adebeo-spacing-xs);
}

.section--faq__question__tag {
  background-color: var(--adebeo-accent-color);
  padding: 2px 8px;
  color: var(--adebeo-white);
  border-radius: var(--adebeo-border-radius-xs);
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
  line-height: 1;
  font-size: var(--adebeo-font-size-text);
}

.section--faq__question__icon img {
  display: block;
  width: 16px;
  height: 16px;
}

.section--faq__question__subtitle {
  min-width: 100%;
  font-size: var(--adebeo-font-size-text);
}

.section--faq__item.open .section--faq__question {
  background-color: var(--adebeo-accent-color);
  color: var(--adebeo-white);
}

.section--faq__question:after {
  content: '';
  display: block;
  width: 22px;
  height: 15px;
  transform: rotate(45deg);
  transition: transform 0.3s ease;
  margin: 17px 15px;
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16.501"><path fill="%23d54414" d="M15.756 0a.75.75 0 0 0-.537.22.75.75 0 0 0 0 1.061L21.438 7.5H.75a.75.75 0 0 0-.75.75.75.75 0 0 0 .75.75h20.69l-6.221 6.22a.75.75 0 0 0 0 1.061.75.75 0 0 0 1.06 0l7.496-7.496a.75.75 0 0 0 .055-.058.75.75 0 0 0 .04-.053.75.75 0 0 0 .003-.006.75.75 0 0 0 .033-.057.75.75 0 0 0 .004-.006.75.75 0 0 0 .03-.058.75.75 0 0 0 .001-.006.75.75 0 0 0 .024-.062.75.75 0 0 0 .002-.006.75.75 0 0 0 .016-.065.75.75 0 0 0 .002-.008.75.75 0 0 0 .01-.064.75.75 0 0 0 .003-.059.75.75 0 0 0 .002-.013.75.75 0 0 0 0-.008.75.75 0 0 0 0-.006.75.75 0 0 0-.004-.066.75.75 0 0 0 0-.006.75.75 0 0 0-.01-.067.75.75 0 0 0-.011-.052.75.75 0 0 0-.004-.018.75.75 0 0 0-.002-.006.75.75 0 0 0 0-.002.75.75 0 0 0-.025-.066.75.75 0 0 0-.018-.04.75.75 0 0 0-.012-.027.75.75 0 0 0-.035-.056.75.75 0 0 0-.03-.041.75.75 0 0 0-.011-.02.75.75 0 0 0-.004-.004.75.75 0 0 0-.045-.05.75.75 0 0 0-.004-.004.75.75 0 0 0-.006-.004l-.011-.012L16.279.221A.75.75 0 0 0 15.756 0Z"/></svg>')
    center no-repeat;
}

.section--faq__item.open .section--faq__question:after {
  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 16.501"><path fill="%23FFFFFF" d="M15.756 0a.75.75 0 0 0-.537.22.75.75 0 0 0 0 1.061L21.438 7.5H.75a.75.75 0 0 0-.75.75.75.75 0 0 0 .75.75h20.69l-6.221 6.22a.75.75 0 0 0 0 1.061.75.75 0 0 0 1.06 0l7.496-7.496a.75.75 0 0 0 .055-.058.75.75 0 0 0 .04-.053.75.75 0 0 0 .003-.006.75.75 0 0 0 .033-.057.75.75 0 0 0 .004-.006.75.75 0 0 0 .03-.058.75.75 0 0 0 .001-.006.75.75 0 0 0 .024-.062.75.75 0 0 0 .002-.006.75.75 0 0 0 .016-.065.75.75 0 0 0 .002-.008.75.75 0 0 0 .01-.064.75.75 0 0 0 .003-.059.75.75 0 0 0 .002-.013.75.75 0 0 0 0-.008.75.75 0 0 0 0-.006.75.75 0 0 0-.004-.066.75.75 0 0 0 0-.006.75.75 0 0 0-.01-.067.75.75 0 0 0-.011-.052.75.75 0 0 0-.004-.018.75.75 0 0 0-.002-.006.75.75 0 0 0 0-.002.75.75 0 0 0-.025-.066.75.75 0 0 0-.018-.04.75.75 0 0 0-.012-.027.75.75 0 0 0-.035-.056.75.75 0 0 0-.03-.041.75.75 0 0 0-.011-.02.75.75 0 0 0-.004-.004.75.75 0 0 0-.045-.05.75.75 0 0 0-.004-.004.75.75 0 0 0-.006-.004l-.011-.012L16.279.221A.75.75 0 0 0 15.756 0Z"/></svg>')
    center no-repeat;
  transform: rotate(90deg);
}

.section--faq__answer {
  max-height: 0;
  transition: max-height 0.3s ease;
  overflow: hidden;
}

.section--faq__item.open .section--faq__answer {
  max-height: 1600px;
  transition: max-height 0.3s ease;
}
