/* Front-end styles. Inherits colors -> looks good on dark themes. */
.af-faq { margin: 2rem 0; color: inherit; }
.af-faq__title { margin: 0 0 1rem; font-weight: 700; font-size: 1.25rem; color: inherit; }

.af-faq__item {
  border: 1px solid var(--af-faq-border, rgba(255,255,255,.18));
  border-radius: 12px;
  background: var(--af-faq-bg, rgba(255,255,255,.03));
  margin: 0 0 .75rem;
  overflow: hidden;
}
.af-faq__item summary {
  cursor: pointer;
  padding: 1rem 1.125rem;
  font-weight: 600;
  list-style: none;
}
.af-faq__item summary::-webkit-details-marker { display: none; }
.af-faq__item[open] summary {
  border-bottom: 1px solid var(--af-faq-border, rgba(255,255,255,.18));
}
.af-faq__a { padding: 1rem 1.125rem; line-height: 1.65; color: inherit; }
.af-faq__a p { margin: 0 0 1rem; }
.af-faq__a p:last-child { margin-bottom: 0; }

/* Light schemes get lighter borders automatically */
@media (prefers-color-scheme: light) {
  .af-faq__item {
    border-color: rgba(0,0,0,.12);
    background: var(--af-faq-bg, rgba(0,0,0,.02));
  }
  .af-faq__item[open] summary {
    border-bottom-color: rgba(0,0,0,.12);
  }
}

/* You can override colors from theme using CSS variables on .af-faq */

/* ---------- FAQ: заметная разница между вопросом и ответом ---------- */
.af-faq { color: inherit; }

/* Карточка */
.af-faq .af-faq__item{
  border: 1px solid var(--af-faq-border, rgba(255,255,255,.16));
  border-radius: 12px;
  background: var(--af-faq-card, rgba(255,255,255,.03));
  margin: 0 0 .8rem;
  overflow: hidden;
}

/* ВОПРОС */
.af-faq .af-faq__item summary{
  position: relative;
  display: flex; align-items: center;
  list-style: none; /* скрыть маркер FF */
  padding: 1rem 2.5rem 1rem 2.5rem; /* место под бейдж и стрелку */
  font-weight: 700;
  background: var(--af-faq-q-bg, rgba(255,255,255,.06));
  transition: background .2s ease, color .2s ease;
  cursor: pointer;
}
.af-faq .af-faq__item summary:hover{
  background: var(--af-faq-q-bg-hover, rgba(255,255,255,.08));
}
.af-faq .af-faq__item summary::-webkit-details-marker{ display:none; } /* скрыть маркер Chrome/Safari */

.af-faq .af-faq__item[open] summary{
  border-bottom: 1px solid var(--af-faq-border, rgba(255,255,255,.18));
}

/* бейдж "Q" слева */
.af-faq .af-faq__item summary::before{
  content: "Q";
  position: absolute; left: .9rem; top: 50%; transform: translateY(-50%);
  font-size: .75rem; font-weight: 700; letter-spacing: .4px;
  padding: .15rem .45rem; border-radius: .4rem;
  background: var(--af-faq-accent, #7aa2ff);
  color: #0b0e11;
}

/* шеврон справа */
.af-faq .af-faq__item summary::after{
  content: "";
  position: absolute; right: .9rem; top: 50%;
  width: .55rem; height: .55rem;
  border-right: 2px solid rgba(255,255,255,.6);
  border-bottom: 2px solid rgba(255,255,255,.6);
  transform: translateY(-50%) rotate(45deg);
  transition: transform .2s ease, border-color .2s ease;
}
.af-faq .af-faq__item[open] summary::after{
  transform: translateY(-50%) rotate(225deg);
  border-color: var(--af-faq-accent, #7aa2ff);
}

/* фокус для клавиатуры */
.af-faq .af-faq__item summary:focus-visible{
  outline: 2px solid var(--af-faq-accent, #7aa2ff);
  outline-offset: 2px;
}

/* ОТВЕТ */
.af-faq .af-faq__a{
  position: relative;
  padding: 1rem 1.125rem 1.25rem 2.5rem; /* выравниваем с бейджем */
  line-height: 1.65;
  color: var(--af-faq-a-color, rgba(255,255,255,.92));
  background: var(--af-faq-a-bg, rgba(255,255,255,.03));
}

/* разделительная линия поверх ответа */
.af-faq .af-faq__a{
  border-top: 1px solid var(--af-faq-border, rgba(255,255,255,.12));
}

/* бейдж "A" у ответа */
.af-faq .af-faq__a::before{
  content: "A";
  position: absolute; left: .9rem; top: 1rem;
  font-size: .75rem; font-weight: 700; letter-spacing: .4px;
  padding: .15rem .45rem; border-radius: .4rem;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
}

.af-faq .af-faq__a p{ margin: 0 0 1rem; }
.af-faq .af-faq__a p:last-child{ margin-bottom: 0; }

/* Светлая тема — немного другие фоны/границы (на случай, если страница не тёмная) */
@media (prefers-color-scheme: light){
  .af-faq .af-faq__item{ border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.02); }
  .af-faq .af-faq__item[open] summary{ border-bottom-color: rgba(0,0,0,.12); }
  .af-faq .af-faq__item summary{ background: rgba(0,0,0,.03); }
  .af-faq .af-faq__a{ background: rgba(0,0,0,.02); color: rgba(0,0,0,.85); }
}