/* SEARCH AREA */

.desktop-search{
display:flex;
justify-content:center;
margin:20px 0;
padding:0 20px;
}

/* SEARCH BAR */


/* DROPDOWN */

.search-box select{

appearance:none;
-webkit-appearance:none;
-moz-appearance:none;

background:#ffffff;

border:1px solid #e3e3e3;

border-radius:20px;

font-size:14px;

padding:10px 28px 10px 14px;

outline:none;

cursor:pointer;

color:#111;

margin-right:6px;

background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='%23666'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
background-repeat:no-repeat;
background-position:right 10px center;

}

.search-box input{

flex:1;

border:none;
outline:none;

background:transparent;

font-size:15px;

padding:10px 14px;

border-left:1px solid #dcdcdc;   /* small divider */

margin-left:6px;
min-width:0;

}

/* placeholder */

.search-box input::placeholder{
color:#8a8a8a;
}

/* SEARCH BAR CONTAINER */

.search-box{

display:flex;
align-items:center;

background:#ffffff;

border:1px solid #e2e2e2;

border-radius:30px;

padding:4px;

transition:.2s;

}

/* focus effect */

.search-box:focus-within{

border-color:#2563eb;

box-shadow:0 0 0 3px rgba(37,99,235,0.08);

}

/* SEARCH BUTTON */

.search-box button{

border:none;

background:#000;

color:#fff;

font-size:14px;
font-weight:600;

padding:10px 22px;

border-radius:26px;

cursor:pointer;

}

.search-box button:hover{
background:#111;
}

@media (max-width:600px){

.search-box{
width:100%;
}

.search-box select{
min-width:70px;
font-size:13px;
}

.search-box button{
padding:10px 16px;
font-size:13px;
}

}