/* ===== FAQ PAGE STYLES ===== */

.faq-section { margin-bottom: var(--space-10); }
.faq-section h3 { margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 2px solid var(--color-gold); }
.faq-item { border: 1px solid var(--color-border); border-radius: var(--radius-lg); margin-bottom: var(--space-3); overflow: hidden; transition: all 0.3s ease; }
.faq-item:hover { border-color: var(--color-gold); }
.faq-question { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); cursor: pointer; background: var(--color-surface); font-weight: 600; font-size: var(--text-base); gap: var(--space-4); user-select: none; transition: background 0.3s; }
.faq-question:hover { background: var(--color-surface-2); }
.faq-question .faq-icon { flex-shrink: 0; width: 24px; height: 24px; transition: transform 0.3s ease; color: var(--color-gold); }
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; }
.faq-answer-inner { padding: 0 var(--space-5) var(--space-5); font-size: var(--text-sm); line-height: 1.8; color: var(--color-text-secondary); }
.faq-item.open .faq-answer { max-height: 500px; }

.faq-categories { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; margin-bottom: var(--space-8); }
.faq-cat-btn { padding: var(--space-2) var(--space-5); border: 2px solid var(--color-border); border-radius: var(--radius-full); background: transparent; color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; cursor: pointer; transition: all 0.3s ease; }
.faq-cat-btn:hover, .faq-cat-btn.active { background: var(--color-gold); color: #fff; border-color: var(--color-gold); }