/* FAQ page styles migrated from faq.html */

.faq-hero {
        background: var(--bg-dark);
        position: relative;
        overflow: hidden;
        padding-top: 160px;
        padding-bottom: 5rem;
      }
      .faq-hero-bg {
        position: absolute;
        inset: 0;
        background:
          radial-gradient(ellipse 70% 90% at 100% 50%, rgba(10,40,120,0.5) 0%, transparent 65%),
          radial-gradient(ellipse 40% 60% at 60% 40%, rgba(5,20,80,0.25) 0%, transparent 55%);
        pointer-events: none;
      }
      /* Wave lines decoration */
      .faq-hero-waves {
        position: absolute;
        inset: 0;
        background-image:
          repeating-linear-gradient(
            -20deg,
            transparent,
            transparent 60px,
            rgba(30,100,220,0.04) 60px,
            rgba(30,100,220,0.04) 61px
          );
        pointer-events: none;
      }
      /* Search bar */
      .faq-search-bar {
        background: white;
        border-radius: 12px;
        box-shadow: 0 8px 32px rgba(0,0,0,0.15);
        display: flex;
        align-items: center;
        overflow: hidden;
        max-width: 600px;
      }
      .faq-search-input {
        flex: 1;
        border: none;
        outline: none;
        padding: 0.85rem 1rem;
        font-size: 0.85rem;
        color: #374151;
        background: transparent;
        font-family: var(--font-body, 'Montserrat', sans-serif);
        min-width: 0;
      }
      @media (max-width: 639px) {
        .faq-search-input {
          padding: 0.7rem 0.75rem;
          font-size: 0.8rem;
        }
      }
      .faq-search-input::placeholder { color: #9ca3af; }
      .faq-search-btn {
        background: var(--accent-green);
        color: white;
        border: none;
        padding: 0.85rem 1.5rem;
        font-size: 0.85rem;
        font-weight: 700;
        cursor: pointer;
        font-family: var(--font-body, 'Montserrat', sans-serif);
        letter-spacing: 0.02em;
        transition: background 0.2s;
        white-space: nowrap;
      }
      @media (max-width: 639px) {
        .faq-search-btn {
          padding: 0.7rem 1.1rem;
          font-size: 0.8rem;
        }
      }
      .faq-search-btn:hover { background: #356b18; }

      /* ── FAQ Dark Mode ── */
      /* Accordion container border */
      .dark #faqAccordion {
        border-color: rgba(255,255,255,0.08) !important;
      }
      /* Item separator borders */
      .dark .faq-item[style*="border-top:1px solid rgba(0,0,0"] {
        border-top-color: rgba(255,255,255,0.06) !important;
      }
      /* Number circles */
      .dark .faq-trigger span[style*="background:rgba(20,82,177,0.08)"],
      .dark .faq-trigger span[style*="background:rgba(20,82,177,0.1)"] {
        background: rgba(20,82,177,0.25) !important;
        color: #6aadff !important;
      }
      /* Answer box */
      .dark .faq-answer > div[style*="background:rgba(20,82,177,0.05)"] {
        background: rgba(20,82,177,0.15) !important;
      }
      /* Chevron icons on closed items */
      .dark .faq-trigger i[style*="color:#9ca3af"] {
        color: rgba(255,255,255,0.4) !important;
      }
      /* FAQ trigger button hover */
      .dark .faq-trigger:hover {
        background: rgba(255,255,255,0.04);
      }
      /* Search bar in dark mode */
      .dark .faq-search-bar {
        background: #0f1f35;
        box-shadow: 0 8px 32px rgba(0,0,0,0.3);
      }
      .dark .faq-search-input {
        color: rgba(255,255,255,0.85);
      }
      .dark .faq-search-input::placeholder {
        color: rgba(255,255,255,0.35);
      }
      /* ── Category button base hover (both modes) ── */
      .faq-cat-btn {
        background: transparent;
        cursor: pointer;
        text-align: left;
      }
      .faq-cat-btn:hover {
        background: rgba(20,82,177,0.06) !important;
      }
      /* Light mode active state */
      .faq-cat-btn.active-cat {
        background: rgba(20,82,177,0.08) !important;
      }

      /* ── DARK MODE: category buttons ── */
      /* Default state — card-gradient handles bg, text uses var(--text-primary)=white */
      /* Hover — keep a very subtle dark bg so white text stays readable */
      .dark .faq-cat-btn:hover {
        background: rgba(255,255,255,0.07) !important;
      }
      /* Active state */
      .dark .faq-cat-btn.active-cat {
        background: rgba(20,82,177,0.25) !important;
      }
      /* Count badges on non-active items — make visible in dark */
      .dark .faq-cat-btn span.text-xs {
        color: rgba(255,255,255,0.5) !important;
      }
      /* Support card headset icon bg */
      .dark .card-gradient div[style*="background:rgba(20,82,177,0.1)"] {
        background: rgba(20,82,177,0.25) !important;
      }