.btn-search {
    width: 30px;
    height: 30px;
    border-style: none;
    outline: none;
    cursor: pointer;
    border-radius: 50%;
    color: #0C0C0C;
    background-color:transparent;
    pointer-events: painted;
}

@media (max-width: 767px) {
    .products_filters  .search-box {
        display: block;
        width: 100%;
        background-color: #f5f5f5;
        background-position: right center;
        background-origin: content-box;
        padding: 8px 15px;
        margin-bottom: 5px;
        border-radius: 4px;
    }
    .btn-search {
        margin: 5px 20px;
        position: absolute;
        right: 0;
    }
    .input-search{
        padding: 8px 15px;
        height: 38px;
        width: 100%;
        font-size: 18px;
        color: #0C0C0C;
        margin-bottom: 5px;
    }
}
@media (min-width: 768px) {
    .sort {
        position: relative;
    }
    .search-box{
        width: fit-content;
        height: fit-content;
        position: relative;
    }
    .input-search{
        height: 30px;
        width: 30px;
        border-style: none;
        padding: 10px;
        font-size: 18px;
        letter-spacing: 2px;
        outline: none;
        border-radius: 25px;
        transition: all .5s ease-in-out;
        color: #0C0C0C;
        opacity: 0;
        padding-left: 40px;
    }
    .btn-search {
        position: absolute;
        left: 0;
    }
    .btn-search:focus ~ .input-search {
        width: 200px;
        border-radius: 0px;
        background-color: transparent;
        border-bottom:1px solid rgba(0,0,0,.5);
        transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
        opacity: 1;
    }
    .btn-search:focus ~ input[type=radio],
    .btn-search:focus ~ label,
    .input-search:focus ~ input[type=radio],
    .input-search:focus ~ label
    {
        display: none;
    }
    .input-search:focus{
        width: 200px;
        border-radius: 0px;
        background-color: transparent;
        border-bottom:1px solid rgba(0,0,0,.5);
        transition: all 500ms cubic-bezier(0, 0.110, 0.35, 2);
        opacity: 1;
    }
    .input-search::placeholder{
        font-size: 14px;
        opacity: 0;
    }
    .btn-search:focus ~ .input-search::placeholder,
    .input-search:focus::placeholder {
        opacity: 1;
    }
}