/* =========================================================
BrainTest — FAQ Page Styles
Complemento visual da Central de Ajuda
Depende de ui.css + ui-theme.css
========================================================= */


/* =========================================================
TRANSIÇÕES GERAIS
========================================================= */

.faq-category-card,
.faq-chip,
.faq-question,
.faq-search-btn {
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}


/* =========================================================
CHIPS
========================================================= */

.faq-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-chip:active {
  transform: scale(0.96);
}


/* =========================================================
BUSCA
========================================================= */

.faq-search-input::placeholder {
  color: var(--color-muted);
  opacity: 0.85;
}

.faq-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.faq-search-btn:active {
  transform: scale(0.97);
}


/* =========================================================
RESPOSTA RÁPIDA
========================================================= */

.faq-answer-card {
  animation: faqFadeIn 0.25s ease;
}

@keyframes faqFadeIn {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
CATEGORIAS
========================================================= */

.faq-category-card strong {
  letter-spacing: -0.01em;
}

.faq-category-card span {
  opacity: 0.9;
}

.faq-category-card:active {
  transform: scale(0.98);
}


/* =========================================================
ACCORDION
========================================================= */

.faq-question {
  font-weight: 500;
}

.faq-question-icon {
  font-weight: 700;
}

.faq-item.is-open .faq-question {
  background: color-mix(in srgb, var(--color-primary) 6%, transparent);
}

.faq-answer-inner {
  animation: faqExpand 0.22s ease;
}

@keyframes faqExpand {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* =========================================================
LINKS DE AÇÃO
========================================================= */

.faq-answer-links a {
  text-decoration: none;
}

.faq-answer-links a:hover {
  transform: translateY(-1px);
}


/* =========================================================
FORMULÁRIO DE SUPORTE
========================================================= */

.faq-support-form input,
.faq-support-form select,
.faq-support-form textarea {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background 0.2s ease;
}

.faq-support-form textarea {
  font-size: 0.9rem;
}

.faq-support-actions .btn {
  min-width: 130px;
}


/* =========================================================
ESTADO VAZIO
========================================================= */

.faq-empty-state .card {
  animation: faqFadeIn 0.25s ease;
}


/* =========================================================
RESPONSIVIDADE EXTRA
========================================================= */

@media (max-width: 540px) {

  .faq-chip {
    font-size: 0.82rem;
    padding: 0.55rem 0.75rem;
  }

  .faq-question-text strong {
    font-size: 0.9rem;
  }

  .faq-question-text span {
    font-size: 0.78rem;
  }

  .faq-answer-inner p {
    font-size: 0.88rem;
  }

}