document.addEventListener('DOMContentLoaded', function() { const searchIcon = document.getElementById('search-svg-icon-id'); const modal = document.getElementById('search-modal'); const closeBtn = document.querySelector('.close-search'); const searchInput = modal.querySelector('input[type="search"]'); if (searchIcon) { searchIcon.addEventListener('click', function() { modal.style.display = 'flex'; setTimeout(() => { searchInput.focus(); }, 100); }); } if (closeBtn) { closeBtn.addEventListener('click', function() { modal.style.display = 'none'; }); } window.addEventListener('click', function(event) { if (event.target === modal) { modal.style.display = 'none'; } }); searchInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { this.form.submit(); } }); }); .search-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 999999; align-items: center; justify-content: center; } .search-modal-content { background: white; padding: 40px 30px 30px 30px; width: 90%; max-width: 600px; position: relative; } .close-search { position: absolute; top: 10px; right: 15px; font-size: 30px; cursor: pointer; color: #333; font-weight: bold; } .search-title { display: block; color: #242424; font-size: 16px; font-weight: 600; margin-bottom: 15px; text-align: center; } .search-form { width: 100%; display: flex; gap: 10px; align-items: center; } .search-form input[type="search"] { flex: 1; padding: 15px 20px; font-size: 18px; border-style: solid; border-width: 1px; border-color: #702C85; outline: none; color: #242424; background-color: #fff; } input:focus:not([type="button"]):not([type="submit"]), .elementor-kit-33 textarea:focus, .elementor-kit-33 .elementor-field-textual:focus { outline: none!important; color: #242424!important; background-color: #fff!important; } button.search-submit { background: #ddd; border: none; cursor: pointer; padding: 14px; border-radius: 11px; display: flex; align-items: center; justify-content: center; } button.search-submit:hover { background: #702C85; } button.search-submit:hover svg path { stroke: white; }