/* ========================= 
        BOTON DE FILTRO
========================= */

#btn-filtro-menu{
    border:0;
    cursor:pointer;
    color:#1976D2;
    background-color:transparent;
    font-weight: 700;
}

#btn-filtro-menu *{
    vertical-align:middle;
}

#btn-filtro-menu svg *{
    fill:#1976D2
}

#btn-filtro-menu:hover *{
    color:#FF8057;
}

#btn-filtro-menu:hover svg *{
    fill:#FF8057;
}

#btn-filtro-menu{
    font-size:2rem;
    color:#646464;
    margin-bottom:20px;
}

#btn-filtros {
    background-color: #B41E82;
    position: sticky;
    top: 60px;
    width: 100%;
    z-index: 900;
    color:white;
    padding:10px 0;
}

#btn-filtros path {
    fill: white;
}

/* ========================= 
    FILTROS APLICADOS
========================= */

.trash{
    color:#1976D2;
    cursor: pointer;
}

.trash p, .trash svg{
    vertical-align:middle;
}

.trash{
    font-size:11px !important;
}

.trash path{
    fill: #1976D2;
}

.filtros-titulo:hover .trash svg path{
    fill: blue;
}

.filtros-titulo-aplicados:hover p{
    color:#646464;
}

.filtros-aplicados div{
    color:white;
    background-color:#FF8057;
    border-radius:100px;
    display:inline-flex;
    justify-content: space-between;
    align-items:center;
    font-size:12px;
    margin-top:5px;
    padding:2px 10px;
}
.filtros-aplicados div svg{
    cursor: pointer;
}

.filtros-aplicados div p{
    margin:0;
    display:inline-block;
}

.filtros-titulo-aplicados{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;
}
/* ========================= 
    LISTADO DE FILTROS
========================= */

#filtros{
    background-color: #F5F4F7;
    z-index:1000;
    width:100%;
    position:fixed;
    top:0;
    right:-100%;
}

@media(max-width:767px){
    #filtros{height:100%;}
}

#filtros > div{
    padding:20px;
    position: relative;
    overflow-y: auto;
    height: 100%;
}
@media(min-width:768px){
    #filtros > div{
        padding:20px 0;
    }
}

.filtros-titulo{
    display:flex;
    justify-content:space-between;
    align-items:center;
    cursor:pointer;
}

.filtros-titulo:hover{
    color:#FF8057;
}

.filtros-titulo:hover svg path{
    fill:#FF8057
}

.filtros-titulo{
    color:#646464;
    font-weight:500;
}

#filtros > div > ul > li{
    margin-bottom:20px;
}

.filtro-lista li{
    margin-left:5px;
    margin-top:10px;
    color:#646464;
    padding-right:30px;
}

ul.filtro-lista{
    overflow:hidden;
    height:0px;
}


.girar .arrow svg{
    transform:rotate(-180deg);
}

#resultados {
    margin-top: 30px;
}
@media(min-width:768px){
    #btn-filtros, #btn-filtro-menu{display:none}


    .contenedor{
        display:grid;
        grid-template-columns: repeat(6, minmax(0, 1fr));
        grid-gap:1rem;
    }

    #filtros{
        position:relative;
        right:0;
        top:0;
        grid-column: span 3 / span 3;
        z-index:0;
    }

    #resultados {
        grid-column: span 9 / span 9;
        padding: 20px 0;
        margin-top: 0;
    }
}    

#search_options #btn-aplicar{
    background-color:#FF8057;
    color:white;
    width:100%;
    text-align:center;
    padding:10px;
    border:0;
    border-radius:1000px;
    cursor:pointer;
    margin-top:1rem;
}

#search_options #btn-aplicar:hover{
    background-color:#FF6D3E
}
/* ========================= 
    FILTROS OPCIONES
========================= */

 #search_options {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            align-items: start;
        }
        
        #search_options > li {
            width: 100%;
        }
        
        #search_options > li.filtro-button {
            grid-column: 4;
            grid-row: 1;
        }
        
        #btn-aplicar {
            width: 100%;
            padding: 10px;
            background-color: #6442FF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        
        @media (max-width: 1024px) {
            #search_options {
                grid-template-columns: repeat(2, 1fr);
            }
            
            #search_options > li.filtro-button {
                grid-column: 2;
                grid-row: 1;
            }
        }
        
        @media (max-width: 640px) {
            #search_options {
                grid-template-columns: 1fr;
            }
            
            #search_options > li.filtro-button {
                grid-column: 1;
                grid-row: auto;
            }
        }

/* ========================= 
    CHECKBOX
========================= */
.checkbox{
    display:inline-flex;
    align-items:center;
    cursor:pointer;
}

.checkbox__input{
    display:none;
}

.checkbox__box{
    width:1.25em;
    height:1.25em;
    border: 2px  solid #5B5B5B;
    border-radius:7px;
    margin-right:10px;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.checkbox__box::after{
    content: '\2714';
    color: #F5F4F7;
    transform: scale(0);
}

input.checkbox__input:checked + div.checkbox__box{
    background-color: #FF8057;
    border-color: #FF8057;
}

input.checkbox__input:checked + div.checkbox__box + span{
    font-weight:500;
}

input.checkbox__input:checked + div.checkbox__box::after{
    transform: scale(1);
}

input.checkbox__input + div.checkbox__box + span{
    font-size:15px;
}


/* ========================= 
    RESULTADOS
========================= */

#resultados h2{
    font-size:1.5rem;
    color:#646464;
    font-weight:400;
}

#listado-resultados{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap:1rem;
}

#listado-resultados > div {
    grid-column: span 2 / span 2;
}

@media(min-width: 768px){
    #listado-resultados > div {
        grid-column: span 1/ span 1;
    }
}

div[data-key] p {
    max-width: 120px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
/* BOTON BUSQUEDA Y FILTRO */

.button i {
    font-size: 12px;
    margin-right: 0.625rem;
}

@media(max-width:767px){
    .listing__buttons {
        background-color: #fff;
        bottom: 0;
        box-shadow: 0 0 0.625rem 0.125rem rgb(0 0 0 / 25%);
        display: grid;
        column-gap: 20px;
        grid-template-columns: 1fr 1fr;
        flex-direction: column;
        left: 0;
        margin-top: 1.25rem;
        padding: 0.625rem;
        position: fixed;
        right: 0;
        z-index: 1;
    }
}
    

.button.change-search {
    font-size: 12px;
}

.listing__buttons .button {
    padding: 10px;
}

a.button.--text.incluirmeMobile {
    grid-column-start: 1;
    grid-column-end: 3;
}

.listing .incluirmeMobile {
    margin-top: 0;
    grid-column-start: 1;
    grid-column-end: 3;
}