@use "helpers";

#nav1 {
    padding-bottom: 20px;
    margin-bottom: 20px;
    border-bottom: 1px solid #EEEEEE;

    .nav1-title{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        margin-bottom: 20px;

        span{
            display: block;
            margin: 0px;
            color: helpers.$textoDark;
            font: normal 14px helpers.$fontBold;
            line-height: 17px;
            letter-spacing: 0.02em;
        }
    }

    .u1{
        position: relative;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        width: 100%;
        max-height: 540px;
        gap: 20px;

        .l1 {
            display: flex;
            flex-direction: column;
            width: 100%;

            .a1 {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                outline: 0px;
                width: 100%;
                color: helpers.$highlight;
                font: normal 15px helpers.$fontMedium;
                line-height: 18px;
                @include helpers.transicao(0.4s ease-in-out);

                p{
                    // max-width: calc(100% - 24px);
                }

                .dash{
                    flex-grow: 1;
                    display: flex;
                    content: "";
                    width: auto;
                    height: 2px;
                    margin: 0px 5px;
                    background-image: linear-gradient(to right, #E0E0E0 33%, rgba(255,255,255,0) 0%);
                    background-position: bottom;
                    background-size: 5px 2px;
                    background-repeat: repeat-x;
                }
            }

            .u2{
                position: relative;
                overflow: hidden;
                display: none;
                flex-direction: column;
                width: 100%;
                gap: 15px;
                padding-top: 12px;

                &:before{
                    position: absolute;
                    display: flex;
                    content: "";
                    width: 2px;
                    height: 91%;
                    top: 0px;
                    left: 5px;
                    background-image: linear-gradient(#E0E0E0 33%, rgba(255,255,255,0) 0%);
                    background-position: right;
                    background-size: 2px 5px;
                    background-repeat: repeat-y;
                }

                .l2{
                    position: relative;
                    display: block;
                    width: 100%;

                    &:before{
                        position: absolute;
                        z-index: 0;
                        display: flex;
                        content: "";
                        width: 25px;
                        height: 2px;
                        top: 8px;
                        left: 6px;
                        background-image: linear-gradient(to right, #E0E0E0 33%, rgba(255,255,255,0) 0%);
                        background-position: bottom;
                        background-size: 5px 2px;
                        background-repeat: repeat-x;
                    }

                    &.opened,
                    &.active{
                        .a2{
                            .a-icon{
                                border-color: helpers.$highlight;
                                background-color: helpers.$highlight;

                                .icon-check{
                                    visibility: visible;
                                    pointer-events:initial;
                                    opacity: 1;
                                    transition: opacity 0.3s linear;
                                }
                            }
                        }
                    }

                    .a2 {
                        position: relative;
                        z-index: 1;
                        display: flex;
                        align-items: center;
                        outline: 0px;
                        width: 100%;
                        padding-left: 20px;
                        color: helpers.$textoDark;
                        font: normal 15px helpers.$fontMedium;
                        line-height: 18px;
                        @include helpers.transicao(0.4s ease-in-out);

                        p{
                            max-width: calc(100% - 24px);
                        }
                    }

                    .u3{
                        display: block;
                        width: 100%;
                        padding-top: 7px;

                        .l3{
                            position: relative;
                            display: block;
                            width: 100%;
                            padding-left: 40px;

                            &:before{
                                position: absolute;
                                z-index: 0;
                                display: flex;
                                content: "";
                                width: 37px;
                                height: 2px;
                                top: 16px;
                                left: 6px;
                                background-image: linear-gradient(to right, #E0E0E0 33%, rgba(255,255,255,0) 0%);
                                background-position: bottom;
                                background-size: 5px 2px;
                                background-repeat: repeat-x;
                            }

                            &.opened,
                            &.active{
                                .a3{
                                    .a-icon{
                                        border-color: helpers.$highlight;
                                        background-color: helpers.$highlight;

                                        .icon-check{
                                            visibility: visible;
                                            pointer-events:initial;
                                            opacity: 1;
                                            transition: opacity 0.3s linear;
                                        }
                                    }
                                }
                            }

                            .a3 {
                                position: relative;
                                z-index: 1;
                                display: flex;
                                outline: 0px;
                                width: 100%;
                                padding: 7px 0px;
                                color: helpers.$textoDark;
                                font: normal 15px helpers.$fontMedium;
                                line-height: 18px;
                                align-items: center;
                                @include helpers.transicao(0.4s ease-in-out);
                            }
                        }
                    }
                }
            }

            &.opened,
            &.active{
                .a1{
                    .a-icon{
                        border-color: helpers.$highlight;
                        background-color: helpers.$highlight;

                        .icon-check{
                            visibility: visible;
                            pointer-events:initial;
                            opacity: 1;
                            transition: opacity 0.3s linear;
                        }
                    }

                    .icon-chevron{
                        transform: rotate(180deg);
                    }
                }

                ul {
                    display: flex;
                }
            }

            &:last-child {
                border-bottom-width: 1px;
            }
        }
    }

    .mobileModalClose{
        position: fixed;
        z-index: 22;
        cursor: pointer;
        display: block;
        width: calc(100vw - 20px);
        height: 40px;
        bottom: 10px;
        left: 10px;
        padding: 10px;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: normal;
        font-family: helpers.$fontBold;
        line-height: 18px;
        font-style: normal;
        text-align: center;
        background-color: helpers.$dark;

        @media(min-width:768px){
            display: none;
        }
    }
}

.filtro {
    .filtroLoading {
        font-size: 13px;
        font-family: helpers.$fontRegular;
    }

    .u1{
        .l1{
            display: flex;
            flex-direction: column;
            padding-bottom: 20px;
            margin-bottom: 20px;
            border-bottom: 1px solid #EEEEEE;

            .l1-title{
                color: helpers.$highlight;
            }

            .u2 {
                position: relative;
                overflow-y: auto;
                display: flex;
                flex-direction: column;
                width: 100%;
                gap: 15px;

                .l2{
                    display: block;
                    width: 100%;

                    .a3{
                        overflow: hidden;
                        display: block;
                        outline: 0px;
                        width: 100%;
                        padding: 10px 0px;
                        color: helpers.$textoDark;
                        font: normal 15px helpers.$fontRegular;
                        line-height: 18px;

                        img {
                            display: block;
                            width: 100%;
                            height: 100%;
                            margin: 0px;
                        }

                        &.selected{
                            &:before{
                                background-color: #AAAAAA;
                            }
                        }
                    }
                }
            }

            &.classificacoes {
                .u2 {
                    display: block;

                    .l2 {
                        border: none;

                        .a3 {
                            outline: 0px;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            border:none;

                            p{
                                display: block;
                                margin: 0px;
                                color: helpers.$textoDark;
                                font: normal 15px helpers.$fontRegular;
                                line-height: 18px;
                            }

                            &.selected{
                                .a-icon{
                                    border-color: helpers.$highlight;
                                    background-color: helpers.$highlight;

                                    .icon-check{
                                        visibility: visible;
                                        pointer-events:initial;
                                        opacity: 1;
                                        transition: opacity 0.3s linear;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &.cores,
            &.cores-nome{
                .u2{
                    display: flex;
                    flex-direction: column;
                    width: 100%;
                    gap: 15px;

                    .l2{
                        display: block;
                        width: 100%;

                        .a3{
                            outline: 0px;
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            width: 100%;
                            padding: 0px;

                            img{
                                display: block;
                                width: 14px;
                                height: 14px;
                                object-fit: cover;
                            }

                            p {
                                display: block;
                                margin: 0px;
                                color: helpers.$textoDark;
                                font: normal 15px helpers.$fontRegular;
                                line-height: 18px;
                            }

                            &.selected{
                                .a-icon{
                                    border-color: helpers.$highlight;
                                    background-color: helpers.$highlight;

                                    .icon-check{
                                        visibility: visible;
                                        pointer-events:initial;
                                        opacity: 1;
                                        transition: opacity 0.3s linear;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &.tamanhos{
                .u2{
                    display: flex;
                    flex-wrap: wrap;
                    align-items: flex-start;
                    justify-content: flex-start;
                    width: 100%;
                    gap: 20px;

                    .l2{
                        display: block;
                        width: 100%;

                        .a3{
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            outline: 0px;
                            width: 100%;
                            padding: 0px;
                            text-align: center;
                            text-indent: 0px;
                            letter-spacing: 0px;

                            span{
                                display: block;
                                width: calc(100% - 24px);
                                margin: 0px;
                                color: helpers.$textoDark;
                                font: normal 15px helpers.$fontRegular;
                                line-height: 18px;
                                text-align: left;
                            }

                            &.selected{
                                .a-icon{
                                    border-color: helpers.$highlight;
                                    background-color: helpers.$highlight;

                                    .icon-check{
                                        visibility: visible;
                                        pointer-events:initial;
                                        opacity: 1;
                                        transition: opacity 0.3s linear;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &.disponibilidade{
                .u2{
                    .item-disponibilidade{
                        display: flex;
                        align-items: center;
                        width: 100%; 
                        position: relative;
                        padding: 5px 0px;

                        input[type="radio"] {
                            opacity: 0;
                            width: 100%;
                            position: absolute;
                            cursor: pointer;
                        }

                        label{
                            margin: 0;
                            cursor: pointer;
                            color: #565656;
                            font: normal 15px helpers.$fontRegular;
                        }

                        .icon-check{
                            display: flex;
                            width: 14px;
                            height: 14px;
                            margin-right: 10px;
                            border: solid 1px #CCCCCC;
                            background-color: #EFEFEF;
                            align-items: center;
                            justify-content: center;
                        }

                        .checked{
                            border-color: #000000;
                            background-color: #000000;

                            &:before{
                                @include helpers.sprite();
                                display: block;
                                content: '';
                                width: 7px;
                                height: 5px;
                                background-position: -74px -89px;
                            }
                        }
                    }
                }
            }

            &.avaliacoes {
                .u2 {
                    max-height: initial;
                    overflow: hidden;
                    display: flex;
                    flex-direction: column;
                    width: 100%;

                    .l2 {
                        border: none;
                        display: flex;
                        flex-direction: column;
                        width: 100%;

                        .a3 {
                            display: flex;
                            align-items: center;
                            justify-content: flex-start;
                            width: 100%;
                            padding: 0px;
                            text-indent: 0;
                            border: none;
                            gap: 3px;

                            &.star-1 {
                                svg:nth-child(1){
                                    path{
                                        fill: #E4B40A
                                    }
                                }
                            }
                            &.star-2 {
                                svg:nth-child(1),
                                svg:nth-child(2){
                                    path{
                                        fill: #E4B40A
                                    }
                                }
                            }
                            &.star-3 {
                                svg:nth-child(1),
                                svg:nth-child(2),
                                svg:nth-child(3){
                                    path{
                                        fill: #E4B40A
                                    }
                                }
                            }
                            &.star-4 {
                                svg:nth-child(1),
                                svg:nth-child(2),
                                svg:nth-child(3),
                                svg:nth-child(4){
                                    path{
                                        fill: #E4B40A
                                    }
                                }
                            }
                            &.star-5 {
                                svg:nth-child(1),
                                svg:nth-child(2),
                                svg:nth-child(3),
                                svg:nth-child(4),
                                svg:nth-child(5){
                                    path{
                                        fill: #E4B40A
                                    }
                                }
                            }
                        }
                    }
                }
            }

            &.precos {
                .u2{
                    gap: 0px;
                }

                .l2 {
                    display: flex;
                    width: 100%;
                    margin: 0px;
                    margin-bottom: 20px;
                    float: left;
                    border:none;
                    text-indent: 0px;
                    flex-wrap: wrap;
                    align-items: center;
                    justify-content: flex-start;

                    @media (min-width: 768px) and (max-width: 1649px) {
                        width: 100%;
                    }

                    .titulo{
                        display: block;
                        margin: 0px;
                        color: helpers.$textoDark;
                        font: normal 13px helpers.$fontRegular;
                        line-height: 16px;
                    }

                    #preco-min,
                    #preco-max {
                        display: block;
                        width: 100%;
                        margin-bottom: 15px;
                    }

                    #preco-min-value,
                    #preco-max-value {
                        display: block;
                        margin: 0px;
                        margin-left: 5px;
                        color: helpers.$highlight;
                        font: normal 13px helpers.$fontMedium;
                        line-height: 16px;
                    }

                    #preco-filtrar {
                        display: block;
                        width: 100%;
                        padding: 15px 10px;
                        color: helpers.$textoLight;
                        font: normal 14px helpers.$fontMedium;
                        line-height: 17px;
                        text-align: center;
                        text-indent: 0px;
                        border-radius: 0px;
                        background-color: helpers.$highlight;
                        @include helpers.transicao(0.4s ease-in-out);

                        &:hover,&:focus {
                            text-decoration: none;
                            color: helpers.$textoLight;
                            background-color: helpers.$success;
                        }
                    }

                    &.promocao {
                        text-indent: 0px;

                        label {
                            display: flex;
                            align-items: center;
                            gap: 10px;
                            margin: 0px;
                            color: helpers.$textoDark;
                            font: normal 13px helpers.$fontRegular;
                            line-height: 16px;

                            input{
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                outline: 0px;
                                width: 14px;
                                height: 14px;
                                border-radius: 0px;
                                background-color: #EEEEEE;
                            }
                        }
                    }

                    &:last-of-type{
                        margin-bottom: 0px;
                    }
                }
            }
        }
    }

    .mobileModalClose{
        position: fixed;
        z-index: 22;
        cursor: pointer;
        display: block;
        width: calc(100vw - 20px);
        height: 40px;
        bottom: 10px;
        left: 10px;
        padding: 10px;
        color: #FFFFFF;
        font-size: 18px;
        font-weight: normal;
        font-family: helpers.$fontBold;
        line-height: 18px;
        font-style: normal;
        text-align: center;
        background-color: helpers.$dark;

        @media(min-width:768px){
            display: none;
        }
    }
}

#con-nav {
    position: relative;    
    width:100%;
    max-width: 315px;
    margin-bottom: 10px;

    @media(max-width:1199px){
        display: none;
    }

    .nav-title{
        display: block;
        margin: 0px;
        color: helpers.$textoDark;
        font: normal 22px helpers.$fontRegular;
        line-height: 26px;
        margin-bottom: 15px;
    }

    .box-breadcrumb{
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        width: 100%;
        margin-bottom: 60px;

        @media(max-width:1199px){
            width: 100%;
            justify-content: center;
        }

        .btn-back{
            outline: 0px;
            display: flex;
            align-items: center;
            justify-content: flex-start;
            gap: 10px;
            margin-right: 40px;

            span{
                display: block;
                margin: 0px;
                color: helpers.$textoDark;
                font: normal 15px helpers.$fontRegular;
                line-height: 18px;
            }
        }

        .conteudo{
            display: flex;
            flex-wrap: wrap;
            align-items: flex-start;
            justify-content: flex-start;
            max-width: calc(100% - 92px);
            gap: 10px;
            padding-top: 3px;
            color: #555555;
            font: normal 12px helpers.$fontMedium;
            line-height: 15px;

            a{
                outline: 0px;
                text-decoration: none;
                text-transform: uppercase;

                &:last-of-type{
                    color: helpers.$highlight;
                }
            }
        }
    }

    & > h2 {
        cursor: pointer;
        padding: 0;
        padding-top: 20px;
        color: #4A4A4A;
        font: normal 16px helpers.$fontRegular;

        &:after{
            @media(min-width:768px){
                @include helpers.sprite();
                content: "";
                width: 10px;
                height: 10px;
                margin-top: -2px;
                margin-left: 10px;
                vertical-align: middle;
                background-position: -281px -51px;
            }
        }

        &.selected{
            &:after{
                @media(min-width:768px){
                    background-position: -305px -51px;
                }
            }
        }
    }
}