/* ============================================================
   components/faq.css
   FAQ section
   ============================================================ */

/* ===== FAQ ===== */
.faq-list { display: flex; flex-direction: column; gap: 12px; }
.faq-item {
  background: #fff; border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05); overflow: hidden;
}
.faq-header {
  padding: var(--space-5) var(--space-6);
  display: flex; align-items: center; gap: 16px;
  cursor: pointer; font-weight: 700; font-size: 15px;
}
.faq-header:hover { background: #fafafa; }
.faq-q {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: var(--primary); color: #fff; font-weight: 900; font-size: 14px;
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
}
.faq-content {
  padding: 0 var(--space-6) var(--space-5) var(--space-16);
  font-size: var(--font-base); color: #666; line-height: 1.8;
  display: none;
}
.faq-item.active .faq-content { display: block; }