---
// Компонент иконки поиска (лупа)
---

<button class="search-icon-btn" id="search-icon-btn" data-modal-target="search-modal" aria-label="Поиск статей">
  <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="11" cy="11" r="8"></circle>
    <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
  </svg>
</button>

<script>
  (function() {
    const btn = document.getElementById('search-icon-btn');
    
    btn?.addEventListener('click', () => {
      window.dispatchEvent(new CustomEvent('open-modal', { 
        detail: 'search-modal' 
      }));
    });
  })();
</script>

<style>
  .search-icon-btn {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    padding: 0.75rem;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .search-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(234, 194, 110, 0.5);
    color: #eac26e;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(234, 194, 110, 0.2);
  }

  .search-icon-btn:active {
    transform: translateY(0);
  }

  @media (max-width: 768px) {
    .search-icon-btn {
      padding: 0.6rem;
    }
  }
</style>