/* =========================================================
   ENTERPRISE SEARCH MODULE
   SafeSparesOnline.com
========================================================= */

.search-container{
    position:relative;
    width:100%;
    max-width:100%;
    z-index:100;
    font-family:
        Inter,
        Manrope,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
}

/* =========================================================
   FORM
========================================================= */

.search-form{
    width:100%;
    margin:0;
}

/* =========================================================
   SEARCH WRAPPER
========================================================= */

.search-box-wrapper{
    position:relative;

    display:flex;
    align-items:center;

    width:100%;
    height:58px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,0.98) 0%,
            rgba(248,250,252,0.98) 100%
        );

    border:
        1px solid rgba(15,23,42,0.08);

    border-radius:20px;

    overflow:hidden;

    transition:
        all 0.28s ease;

    box-shadow:
        0 1px 2px rgba(15,23,42,0.04),
        0 8px 24px rgba(15,23,42,0.06);

    backdrop-filter:blur(18px);
}

/* =========================================================
   FOCUS STATE
========================================================= */

.search-box-wrapper:focus-within{
    border-color:#2f6b3b;

    box-shadow:
        0 0 0 4px rgba(47,107,59,0.10),
        0 12px 40px rgba(47,107,59,0.18);

    transform:translateY(-1px);
}

/* =========================================================
   SEARCH BUTTON
========================================================= */

.search-submit-btn{
    width:58px;
    height:58px;

    border:none;
    background:transparent;

    display:flex;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    color:#64748b;

    font-size:18px;

    transition:all 0.25s ease;

    flex-shrink:0;
}

.search-submit-btn:hover{
    color:#2f6b3b;
    transform:scale(1.04);
}

/* =========================================================
   INPUT
========================================================= */

.search-input{
    flex:1;

    height:100%;

    border:none;
    outline:none;

    background:transparent;

    font-size:15px;
    font-weight:500;
    color:#0f172a;

    padding:
        0 52px 0 0;

    letter-spacing:0.1px;
}

.search-input::placeholder{
    color:#94a3b8;
    font-weight:400;
}

/* =========================================================
   CLEAR BUTTON
========================================================= */

.clear-btn-new{
    position:absolute;

    right:16px;
    top:50%;

    transform:translateY(-50%);

    width:32px;
    height:32px;

    border-radius:50%;

    display:none;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    font-size:13px;
    color:#64748b;

    background:#f1f5f9;

    transition:all 0.22s ease;
}

.clear-btn-new:hover{
    background:#e2e8f0;
    color:#0f172a;
}

/* =========================================================
   SEARCH LOADER
========================================================= */

.search-loader{
    position:absolute;

    right:56px;
    top:50%;

    width:16px;
    height:16px;

    border-radius:50%;

    border:
        2px solid rgba(79,70,229,0.15);

    border-top-color:#2f6b3b;

    transform:
        translateY(-50%);

    animation:
        searchSpin 0.7s linear infinite;

    display:none;
}

@keyframes searchSpin{
    to{
        transform:
            translateY(-50%)
            rotate(360deg);
    }
}

/* =========================================================
   DROPDOWN
========================================================= */

.suggestions-box{
    position:absolute;

    top:calc(100% + 12px);
    left:0;

    width:100%;

    background:#ffffff;

    border:
        1px solid rgba(15,23,42,0.06);

    border-radius:24px;

    overflow:hidden;

    opacity:0;
    visibility:hidden;
    transform:
        translateY(10px);

    transition:
        all 0.25s ease;

    box-shadow:
        0 10px 40px rgba(15,23,42,0.10),
        0 2px 10px rgba(15,23,42,0.04);

    z-index:300;
}

/* ACTIVE STATE */

.suggestions-box.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* =========================================================
   SCROLL AREA
========================================================= */

.suggestions-scroll{
    max-height:460px;
    overflow-y:auto;
}

/* =========================================================
   SCROLLBAR
========================================================= */

.suggestions-scroll::-webkit-scrollbar{
    width:7px;
}

.suggestions-scroll::-webkit-scrollbar-thumb{
    background:
        rgba(100,116,139,0.22);

    border-radius:20px;
}

/* =========================================================
   SUGGESTION ITEM
========================================================= */

.suggestion-item{
    display:flex;
    align-items:center;
    gap:16px;

    padding:14px 18px;

    cursor:pointer;

    transition:
        all 0.22s ease;

    border-bottom:
        1px solid rgba(226,232,240,0.65);
}

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

.suggestion-item:hover,
.suggestion-item.active{
    background:
        linear-gradient(
            90deg,
            rgba(47,107,59,0.06),
            rgba(99,102,241,0.02)
        );
}

/* =========================================================
   THUMBNAIL
========================================================= */

.suggestion-thumb{
    width:64px;
    height:64px;

    border-radius:16px;

    object-fit:cover;

    background:#f8fafc;

    border:
        1px solid rgba(226,232,240,0.8);

    flex-shrink:0;

    transition:
        all 0.25s ease;
}

.suggestion-item:hover .suggestion-thumb{
    transform:scale(1.04);
}

/* =========================================================
   TEXT
========================================================= */

.suggestion-text{
    flex:1;
    min-width:0;
}

.suggestion-part{
    font-size:15px;
    font-weight:700;

    color:#0f172a;

    margin-bottom:4px;

    line-height:1.4;
}

.suggestion-part b{
    color:#2f6b3b;
}

.suggestion-desc{
    font-size:13px;
    color:#64748b;

    line-height:1.5;

    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;

    overflow:hidden;
}

/* =========================================================
   EMPTY STATE
========================================================= */

.search-empty-state{
    padding:40px 24px;
    text-align:center;
}

.search-empty-state h4{
    margin:0 0 10px;
    font-size:16px;
    color:#0f172a;
}

.search-empty-state p{
    margin:0;
    color:#64748b;
    font-size:14px;
    line-height:1.6;
}

/* =========================================================
   OVERLAY
========================================================= */

.search-overlay{
    position:fixed;
    inset:0;

    background:
        rgba(15,23,42,0.35);

    backdrop-filter:blur(4px);

    z-index:90;

    opacity:0;
    visibility:hidden;

    transition:all 0.25s ease;
}

.search-overlay.active{
    opacity:1;
    visibility:visible;
}

/* =========================================================
   MOBILE
========================================================= */

@media (max-width:768px){

    .search-container{
        position:relative;
        z-index:999;
    }

    .search-box-wrapper{
        height:54px;
        border-radius:18px;
    }

    .search-submit-btn{
        width:54px;
        height:54px;
        font-size:17px;
    }

    .search-input{
        font-size:14px;
    }

    .suggestions-box{
        position:fixed;

        top:78px;
        left:12px;
        right:12px;

        width:auto;

        border-radius:22px;

        max-height:
            calc(100vh - 100px);
    }

    .suggestions-scroll{
        max-height:
            calc(100vh - 140px);
    }

    .suggestion-item{
        padding:14px;
        gap:14px;
    }

    .suggestion-thumb{
        width:56px;
        height:56px;
        border-radius:14px;
    }

    .suggestion-part{
        font-size:14px;
    }

    .suggestion-desc{
        font-size:12px;
    }
}

/* =========================================================
   LARGE DESKTOP
========================================================= */

@media (min-width:1600px){

    .search-box-wrapper{
        height:62px;
    }

    .search-input{
        font-size:16px;
    }

    .search-submit-btn{
        width:62px;
        height:62px;
    }
}

/* =========================================================
   COMPACT DESKTOP SEARCH
========================================================= */

@media (max-width:1300px){

    .search-input{

        font-size:10px;

    }
}

@media (max-width:1100px){

    .search-input{

        font-size:10px;
    }

}