/*==================================================
  Category Search
==================================================*/

.sv-category-search{
    padding:28px 0 18px;
    background:#fff;
}

.sv-category-search__form{
    display:grid;
    grid-template-columns:42px minmax(0, 1fr) 118px;
    align-items:center;
    max-width:900px;
    min-height:54px;
    border:1px solid #dce3ee;
    border-radius:8px;
    background:#fff;
    box-shadow:0 12px 28px rgba(15,23,42,.06);
    overflow:hidden;
}

.sv-category-search__icon{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#667085;
    font-size:0;
}

.sv-category-search__icon::before{
    content:"";
    width:15px;
    height:15px;
    border:2px solid #667085;
    border-radius:50%;
}

.sv-category-search__icon::after{
    content:"";
    position:absolute;
    width:8px;
    height:2px;
    border-radius:2px;
    background:#667085;
    transform:translate(10px, 10px) rotate(45deg);
}

.sv-category-search__input{
    width:100%;
    height:54px;
    border:0;
    outline:0;
    color:#101828;
    font-size:15px;
    background:transparent;
}

.sv-category-search__input::placeholder{
    color:#667085;
}

.sv-category-search .sv-button,
.sv-category-search .sv-button--primary{
    height:54px;
    border:0;
    border-radius:0;
    background:linear-gradient(180deg,#3c5dff,#3B5BFF);
    color:#fff;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
}

@media(max-width:640px){
    .sv-category-search__form{
        grid-template-columns:42px minmax(0, 1fr);
    }

    .sv-category-search .sv-button,
    .sv-category-search .sv-button--primary{
        grid-column:1 / -1;
        width:100%;
    }
}