Searchable FAQ Component

.searchable-faq-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.faq-header {
  text-align: center;
  margin-bottom: 3rem;
}

.faq-header h1 {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.faq-header p {
  font-size: 1.1rem;
  color: #7f8c8d;
}

.search-section {
  margin-bottom: 2rem;
}

.search-input-wrapper {
  position: relative;
  margin-bottom: 1rem;
}

#searchInput {
  width: 100%;
  padding: 1rem 1.5rem;
  border: 2px solid #e1e8ed;
  border-radius: 50px;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  box-sizing: border-box;
}

#searchInput:focus {
  outline: none;
  border-color: #3498db;
  box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);
}

.search-suggestions {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  display: none;
}

.suggestion-item {
  padding: 0.75rem 1rem;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f4;
}

.suggestion-item:hover {
  background: #f8f9fa;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.search-stats {
  text-align: center;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.faq-list {
  space-y: 1rem;
}

.faq-item {
  background: white;
  border: 1px solid #e1e8ed;
  border-radius: 12px;
  margin-bottom: 1rem;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.faq-question {
  padding: 1.5rem;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f8f9fa;
}

.faq-question h3 {
  margin: 0;
  font-size: 1.1rem;
  color: #2c3e50;
  font-weight: 600;
}

.expand-icon {
  color: #3498db;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.faq-item.active .expand-icon {
  transform: rotate(180deg);
}

.faq-answer {
  padding: 0 1.5rem;
  max-height: 0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item.active .faq-answer {
  padding: 1.5rem;
  max-height: 200px;
}

.faq-answer p {
  margin: 0;
  color: #555;
  line-height: 1.6;
}

.faq-item.hidden {
  display: none;
}

.faq-item.highlighted {
  border-color: #3498db;
  box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.1);
}

.highlight {
  background: #fff3cd;
  padding: 0.1rem 0.2rem;
  border-radius: 3px;
}

.no-results {
  text-align: center;
  padding: 3rem 1rem;
  color: #7f8c8d;
}

.no-results h3 {
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

@media (max-width: 768px) {
  .searchable-faq-container {
    padding: 1rem;
  }
  
  .faq-header h1 {
    font-size: 2rem;
  }
  
  #searchInput {
    font-size: 1rem;
  }
}

document.addEventListener('DOMContentLoaded', function() {
  const searchInput = document.getElementById('searchInput');
  const faqItems = document.querySelectorAll('.faq-item');
  const resultCount = document.getElementById('resultCount');
  const noResults = document.getElementById('noResults');
  const faqList = document.getElementById('faqList');
  
  let searchTimeout;
  
  // Toggle FAQ items
  faqItems.forEach(item => {
    const question = item.querySelector('.faq-question');
    question.addEventListener('click', () => {
      item.classList.toggle('active');
    });
  });
  
  // Search functionality
  searchInput.addEventListener('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
      performSearch(this.value.trim());
    }, 300);
  });
  
  function performSearch(searchTerm) {
    if (!searchTerm) {
      showAllItems();
      return;
    }
    
    const results = [];
    
    faqItems.forEach(item => {
      const question = item.querySelector('.faq-question h3').textContent.toLowerCase();
      const answer = item.querySelector('.faq-answer p').textContent.toLowerCase();
      const keywords = item.dataset.keywords.toLowerCase();
      const searchLower = searchTerm.toLowerCase();
      
      const questionMatch = question.includes(searchLower);
      const answerMatch = answer.includes(searchLower);
      const keywordMatch = keywords.includes(searchLower);
      
      if (questionMatch || answerMatch || keywordMatch) {
        results.push(item);
        item.classList.remove('hidden');
        item.classList.add('highlighted');
        
        // Highlight matching text
        highlightText(item, searchTerm);
      } else {
        item.classList.add('hidden');
        item.classList.remove('highlighted');
      }
    });
    
    updateResultCount(results.length);
    
    if (results.length === 0) {
      noResults.style.display = 'block';
      faqList.style.display = 'none';
    } else {
      noResults.style.display = 'none';
      faqList.style.display = 'block';
    }
  }
  
  function showAllItems() {
    faqItems.forEach(item => {
      item.classList.remove('hidden', 'highlighted');
      removeHighlights(item);
    });
    updateResultCount(faqItems.length);
    noResults.style.display = 'none';
    faqList.style.display = 'block';
  }
  
  function highlightText(item, searchTerm) {
    const question = item.querySelector('.faq-question h3');
    const answer = item.querySelector('.faq-answer p');
    
    const regex = new RegExp(`(${searchTerm})`, 'gi');
    
    question.innerHTML = question.textContent.replace(regex, '<span class="highlight">$1</span>');
    answer.innerHTML = answer.textContent.replace(regex, '<span class="highlight">$1</span>');
  }
  
  function removeHighlights(item) {
    const question = item.querySelector('.faq-question h3');
    const answer = item.querySelector('.faq-answer p');
    
    question.innerHTML = question.textContent;
    answer.innerHTML = answer.textContent;
  }
  
  function updateResultCount(count) {
    resultCount.textContent = `${count} result${count !== 1 ? 's' : ''} found`;
  }
})