/*
---------------------------------------------------------------------------
DEVNITE STUDIOS
---------------------------------------------------------------------------
Project      : Kirzen 4.1
Organization : Devnite Studios
License      : Proprietary
Copyright    : © 2026 Devnite Studios. All rights reserved.

This source file is proprietary software developed and maintained by
Devnite Studios as part of the Kirzen 4.1 project.

Unauthorized copying, redistribution, modification, publication,
or reproduction of this file or any portion of its contents is strictly
prohibited without prior written authorization from Devnite Studios.
---------------------------------------------------------------------------
*/

/* ============================================================================
   FAQ WRAPPER
   ============================================================================ */

.faq-wrap {
  max-width: 720px;
}

.faq-search-wrap {
  max-width: 480px;

  margin-bottom: 32px;
}

.faq-search-wrapper {
  max-width: 100%;
}

.faq-search-wrapper .search-input {
  max-width: 100%;
}

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

.accordion {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.accordion-item {
  overflow: hidden;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);

  background: var(--bg-surface);

  transition:
    border-color var(--transition-fast),
    box-shadow var(--transition-fast);
}

.accordion-item:hover {
  border-color: var(--border-strong);
}

.accordion-item.open {
  border-color: var(--accent-primary);
  box-shadow: 0 0 0 3px rgba(88, 101, 242, 0.08);
}

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

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;

  padding: 18px 20px;

  gap: 12px;

  text-align: left;

  color: var(--text-primary);

  font-size: 15px;
  font-weight: 500;

  cursor: pointer;

  transition: background-color var(--transition-fast);
}

.accordion-trigger:hover {
  background: var(--bg-surface-hover);
}

.accordion-trigger:focus-visible {
  outline: none;
  background: var(--bg-surface-hover);
}

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

.accordion-icon {
  flex-shrink: 0;

  color: var(--text-muted);

  transition:
    transform var(--transition-fast),
    color var(--transition-fast);
}

.accordion-item.open .accordion-icon {
  transform: rotate(180deg);
  color: var(--accent-primary);
}

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

.accordion-body {
  display: none;

  padding: 0 20px 20px;

  color: var(--text-secondary);

  font-size: 14px;

  line-height: 1.7;

  animation: accordion-fade-in 200ms ease;
}

.accordion-item.open .accordion-body {
  display: block;
}

@keyframes accordion-fade-in {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   EMPTY STATE
   ============================================================================ */

.faq-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 10px;

  padding: 48px 24px;

  color: var(--text-muted);

  text-align: center;
}

.faq-empty svg {
  color: var(--text-muted);
  opacity: 0.6;
}

.faq-empty p {
  font-size: 14px;
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
  .accordion-trigger {
    padding: 15px 16px;

    font-size: 14px;
  }

  .accordion-body {
    padding: 0 16px 16px;

    font-size: 13px;
  }

  .faq-search-wrap {
    margin-bottom: 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accordion-body,
  .accordion-icon,
  .accordion-item,
  .accordion-trigger {
    animation: none !important;
    transition: none !important;
  }
}