/* ===========================
   SHIRPUR SEARCH BOX
=========================== */
.so-search-box{

    position:relative;

    width:100%;

}

.so-search-wrapper{

    display:flex;

    align-items:center;

    background:#fff;

    border-radius:18px;

    overflow:hidden;

    height:64px;

    box-shadow:0 12px 40px rgba(0,0,0,.12);

}

.so-input-wrap{

    flex:1;

    display:flex;

    align-items:center;

    position:relative;

}

.so-search-input{

    flex:1;

    width:100%;

    min-width:0;

    border:none !important;

    outline:none !important;

    box-shadow:none !important;

    background:transparent;

    padding-left:52px;

    padding-right:20px;

    height:64px;

    font-size:16px;

}

.so-search-input::placeholder{

    color:#8c8c8c;

    font-size:15px;

}

.so-search-input:focus,
.so-search-input:hover,
.so-search-input:active{

    border:none !important;
    outline:none !important;
    box-shadow:none !important;

}

.so-input-icon{

    position:absolute;

    left:18px;

    width:18px;

    height:18px;

    stroke:#999;

    stroke-width:2;

    fill:none;

    pointer-events:none;

}

.so-module-wrap{

    flex:0 0 170px;

    border-right:1px solid #ececec;

}

.so-module{

    width:170px;

    height:64px;

    border:none;

    background:#fff;

    font-size:15px;

    font-weight:500;

    color:#444;

    padding:0 18px;

    outline:none;

    cursor:pointer;

}

.so-module option{

    font-size:16px;

    color:#444;

    padding:12px;

    background:#fff;

}

.so-search-btn{

    width:68px;

    min-width:68px;

    height:64px;

    background:linear-gradient(180deg,#2368df,#114fb8);
    
    border:none !important;

    outline:none !important;

    box-shadow:none !important;

    cursor:pointer;

    display:flex;

    justify-content:center;

    align-items:center;

    transition:.25s;

}
.so-search-btn:hover{

background:linear-gradient(180deg,#1C5FC9,#073685);

}


.so-results{

display:none;

position:absolute;

left:0;

right:0;

margin-top:8px;

background:#fff;

border-radius:16px;

overflow:hidden;

box-shadow:0 18px 45px rgba(0,0,0,.15);

z-index:99999;

}

.so-item{

display:flex;

align-items:center;

gap:14px;

padding:16px 22px;

text-decoration:none;

color:#222;

transition:.20s;

}

.so-item:hover{

background:#f7f9fc;

}

.so-thumb{

width:52px;

height:52px;

border-radius:10px;

object-fit:cover;

}

.so-info{

flex:1;

}

.so-title{

font-size:16px;

font-weight:600;

}

.so-meta{

font-size:13px;

color:#666;

margin-top:2px;

}

.so-area{

font-size:12px;

color:#888;

margin-top:2px;

}

.so-badge{

display:inline-block;

margin-top:8px;

padding:4px 10px;

border-radius:20px;

font-size:11px;

font-weight:600;

background:#eef4ff;

color:#0d56c5;

}

.so-view-all{

padding:16px;

text-align:center;

font-weight:600;

cursor:pointer;

border-top:1px solid #ececec;

background:#fafafa;

}

.so-view-all:hover{

background:#f1f4fa;

}

@media(max-width:768px){

.so-search-wrapper{

    flex-wrap:wrap;

    height:auto;

}

.so-module-wrap{

    width:100%;

    border-right:none;

    border-bottom:1px solid #eee;

}

.so-module{

    width:100%;

}

.so-input-wrap{

    width:calc(100% - 68px);

}

.so-search-btn{

    width:68px;

}

}


.so-no-results{

    padding:20px;

    text-align:center;

    color:#777;

    font-size:15px;

}

.so-search-btn svg{
    pointer-events:none;
}