/*
File: search.css
Contains all styles for the search icon, overlay, and live results.
*/

/* --- Header Search Icon --- */
.search-toggle-icon {
    background-color: var(--color-header-text);
    border: none;
    padding: 0;
    width: 24px;
    height: 24px;
    cursor: pointer;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>') no-repeat center;
}
.search-toggle-icon:hover { background-color: var(--color-primary); }
@media (max-width: 991px) {
    .header-search-container { display: none; }
}

/* --- Mobile Menu Search Form --- */
.mobile-search-container .search-form { max-width: 100%; margin-bottom: 20px; }

/* --- General Search Form --- */
.search-form {
    max-width: 400px;
    margin: 0 auto 30px;
    display: flex;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
}
.search-field {
    width: 100%;
    border: none;
    padding: 12px 45px 12px 15px;
    font-size: 1rem;
    background: #fff;
}
.search-submit {
    background-color: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 0;
    width: 45px;
    height: 100%;
    color: #64748b;
}
.search-submit:hover {
    color: var(--color-primary);
}
.search-submit::before {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    margin: 0 auto;
    background-color: currentColor;
    -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
    mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
}

/* --- Search Overlay Styles --- */
.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.95); backdrop-filter: blur(5px); z-index: var(--z-index-search-overlay); display: flex; justify-content: center; align-items: center; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
.search-overlay-active .search-overlay { opacity: 1; visibility: visible; }
.search-overlay-content { width: 100%; max-width: 600px; padding: 20px; }
.search-overlay .search-form { max-width: 100%; }
.search-overlay .search-field { width: 100%; border: none; border-bottom: 2px solid var(--color-text); background: transparent; font-size: 2rem; font-family: var(--font-headings); padding: 10px 0; outline: none; text-align: center; }
.search-overlay .search-submit { display: none; }

.search-close-btn { position: absolute; top: 30px; right: 30px; width: 40px; height: 40px; background: transparent; border: none; cursor: pointer; opacity: 0.8; transition: opacity 0.2s ease; }
.search-close-btn:hover { opacity: 1; }
.search-close-btn::before, .search-close-btn::after { content: ''; position: absolute; top: 50%; left: 15%; width: 70%; height: 2px; background-color: #334155; }
.search-close-btn::before { transform: rotate(45deg); }
.search-close-btn::after { transform: rotate(-45deg); }

/* --- Live Search Results --- */
#search-results-container { margin-top: 20px; max-height: 50vh; overflow-y: auto; }
.live-search-results { list-style: none; padding: 0; margin: 0; }
.live-search-results li a { display: flex; align-items: center; gap: 15px; padding: 10px; border-bottom: 1px solid #eee; text-decoration: none; color: var(--color-text); }
.live-search-results li a:hover { background-color: #f4f4f4; }
.live-search-results img { width: 50px; height: 50px; object-fit: cover; border-radius: 3px; }
.live-search-results span { font-size: 1.1rem; }
.live-search-no-results { text-align: center; font-size: 1.2rem; color: #777; }
.spinner { width: 40px; height: 40px; border: 4px solid #f3f3f3; border-top: 4px solid var(--color-primary); border-radius: 50%; margin: 20px auto; animation: spin 1s linear infinite; }
@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }