/* =========================================================
   SEARCH ROW
========================================================= */
.lw-search-row {
    width: 100%;
    position: relative;
    padding: 12px 16px 14px;
}
/* =========================================================
   SEARCH CONTAINER
========================================================= */
.lw-search-container,
.lw-search-container .block_content,
.lw-search-container .leoproductsearch-content,
.lw-search-container form,
.lw-search-container .form-group,
.lw-search-container .input-wrapper {
    margin-top: -10px;
    width: 100% !important;
    max-width: 100% !important;
    position: relative;
}
/* =========================================================
   INPUT
========================================================= */
#leo_search_query_top {
    width: 100% !important;
    max-width: 100% !important;
    height: 40px;
    border: none !important;
    border-radius: 16px;
    background: #f5f5f5;
    padding: 0 55px 0 18px;
    box-shadow: none !important;
    outline: none !important;
    font-size: 14px;
    color: #000;
}
/* =========================================================
   PLACEHOLDER
========================================================= */
#leo_search_query_top::placeholder {
    color: #999;
    opacity: 1;
}
/* =========================================================
   SEARCH BUTTON
========================================================= */
.lw-search-container button,
.lw-search-container .btn,
.lw-search-container .search-button {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 991px) {
    .lw-search-row {
        padding: 10px 12px 12px;
    }
    #leo_search_query_top {
        height: 40px;
        font-size: 13px;
    }
}
/* =========================================================
   SEARCH OVERLAY (BACKDROP BLUR)
========================================================= */

/* 1. The Overlay Layer */
.lw-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /* Site main color (Blue) at 15% opacity */
    background: rgba(0, 178, 226, 0.15); 
    /* Modern Frost Effect */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 1000010; 
    display: none; 
    pointer-events: none;
    transition: opacity 0.3s ease;
}

/* 2. Toggle Visibility 
   Note: This assumes your JS adds 'search-is-active' to the body 
   or shows the overlay div directly. */
body.search-is-active .lw-search-overlay {
    display: block;
    pointer-events: auto;
}

/* 3. Sticky Header Protection
   Ensures the header/search bar stays SHARP while background blurs */
.header-nav {
    position: sticky !important;
    top: 0;
    z-index: 1000030 !important;
    background: #fff; /* Ensure it's not transparent */
}

/* 4. Results Layering
   Ensures the dropdown stays ABOVE the blur */
.ac_results.lps_results {
    z-index: 1000020 !important;
}
/* If the results dropdown is visible, show the overlay */
.ac_results:visible ~ .lw-search-overlay,
.ac_results[style*="display: block"] ~ .lw-search-overlay {
    display: block !important;
}