/* FAQ Accordion CSS */

.faq-section {
  padding: 80px 0 !important;
  background-color: var(--bg-primary, #ffffff) !important;
  border-top: 1px solid var(--color-border, #e2e8f0) !important;
}

.faq-accordion {
  max-width: 860px !important;
  margin: 0 auto !important;
}

.faq-item {
  border-bottom: 1px solid var(--color-border, #e2e8f0) !important;
  padding: 18px 0 !important;
}

.faq-item:first-child {
  border-top: 1px solid var(--color-border, #e2e8f0) !important;
}

.faq-question {
  width: 100% !important;
  background: none !important;
  border: none !important;
  outline: none !important;
  text-align: left !important;
  font-family: var(--font-display, inherit) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: var(--text-primary, #0f172a) !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 0 !important;
  gap: 16px !important;
  transition: color 0.2s ease !important;
  box-shadow: none !important;
  margin: 0 !important;
}

.faq-question:hover,
.faq-item.active .faq-question {
  color: var(--color-accent, #00d2c4) !important;
}

.faq-question::after {
  content: '+' !important;
  font-size: 1.6rem !important;
  font-weight: 400 !important;
  color: var(--color-accent, #00d2c4) !important;
  transition: transform 0.25s ease !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}

.faq-item.active .faq-question::after {
  transform: rotate(45deg) !important;
}

.faq-answer {
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.35s ease, margin 0.35s ease !important;
  text-align: left !important;
}

.faq-item.active .faq-answer {
  max-height: 500px !important;
  margin-top: 12px !important;
  padding-bottom: 8px !important;
}

.faq-answer p {
  color: var(--text-secondary, #64748b) !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  margin: 0 !important;
  text-align: left !important;
}

@media (max-width: 768px) {
  .faq-section {
    padding: 50px 0 !important;
  }
  .faq-question {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  .faq-answer p {
    font-size: 0.9rem !important;
  }
}