@use "sass:map";
@use "helpers";

body{
    &.black-friday{
        #copyright,
        #checkout-content .checkout-card .card-header .step{
            background-color: #151515;
        }
    }
}

ul,p{ margin: 0px; }

#simplemodal-overlay{
    opacity: 0.7 !important;
    background-color: rgba(255,255,255,1) !important;
}

.container-checkout{
    @media(max-width:767px){
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

.radioButton {
    @include helpers.sprite();
    background-position: -165px -285px;
    content: '';
    cursor: pointer;
    height: 20px;
    width: 20px;
}

.help-block{
    text-align: center;
}

#he-topo-checkout {
    background-color: map.get(helpers.$checkout, backgroundColorHeTopoCheckout);
    height: 82px;

    .logo-topo {
        display: flex;
        height: 100%;
        align-items: center;
        justify-content: flex-start;

        img {
            width: 100%;
            max-width: helpers.$logoWidth;
            height: 67px;

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

    .atendimento {
        color: map.get(helpers.$checkout, colorAtendimento);
        display: block;
        margin-top: 20px;
        text-align: center;
        font-size: 11px;

        svg {
            width: 20px;
            margin-right: 5px;
        }

        @media (min-width: 768px) {
            text-align: right;
        }

        .ico-fone {
            @include helpers.sprite();
            background-position: -4px -85px;
            height: 15px;
            width: 15px;
            margin-right: 5px;
            margin-bottom: -3px;
        }

        strong{
            color: helpers.$textoMedium;
            font-size: 12px;
        }
    }
}

#nav-barra {
    background-color: map.get(helpers.$checkoutNavBarra, backgroundColor);
    border-top: 1px solid map.get(helpers.$checkoutNavBarra, borderColor);
    border-bottom: 1px solid map.get(helpers.$checkoutNavBarra, borderColor);
    height: 40px;
    #menu {
        display: table;
        list-style: none;
        margin: 0 -15px;
        table-layout: fixed;
        width: 100vw;

        @media (min-width: 768px) {
            margin: 0;
            width: 100%;
        }

        .item {
            border-bottom: 4px solid map.get(helpers.$checkoutNavBarra, borderColorItem);
            color: map.get(helpers.$checkoutNavBarra, colorItem);
            display: table-cell;
            height: 40px;
            font-size: 9px;
            font-weight: bold;
            line-height: 35px;
            text-align: center;
            text-transform: uppercase;
            width: auto;

            @media (min-width: 992px) {
                font-size: 15px;
            }

            &.active {
                border-bottom-color: map.get(helpers.$checkoutNavBarra, borderColorItemActive);
                color: map.get(helpers.$checkoutNavBarra, colorItemActive);

                @media (min-width: 992px) {
                    font-size: 15px;
                }
            }
        }
    }
}

#con-content {
    /*background-color: map-get($checkout, backgroundColorConContent);*/

    @media(min-width: 768px) {
        padding-top: 60px;
    }

    .checkout-titulo{
        display: block;
        margin: 0px;
        margin-bottom: 30px;
        margin-top: 30px;
        color: helpers.$textoMedium;
        font-size: 20px;
        font-family: helpers.$fontRegular;
        text-align: center;

        @media(min-width:767px){
            margin-top: 0px;
        }

        &:before{
            @include helpers.sprite();
            display: block;
            content: "";
            margin: 0 auto;
            margin-bottom: 5px;
        }
    }

    .checkout-conteudo{
        display: block;
        width: 100%;
        height: auto;
        padding: 5px;
        margin-bottom: 30px;
        background-color: helpers.$light;
        border: solid 1px helpers.$borders;

        @media(min-width:767px){
            padding: 10px;
        }

        .checkout-navegacao{
            position: relative;
            display: block;
            width: 100%;
            height: auto;
            margin: 10px 0px 40px 0px;
            font-size: 0px;
            text-align: center;
            font-family: helpers.$fontRegular;

            .item{
                display: inline-block;
                width: 160px;
                height: 50px;
                margin-bottom: 10px;
                font-size: 14px;
                vertical-align: middle;

                @media(min-width:992px){
                    margin-bottom: 0px;
                }

                a{
                    position: relative;
                    display: block;
                    width: 100%;
                    height: 100%;
                    padding: 15px 0px;
                    color: rgba(helpers.$textoMedium, 0.7);
                    font-size: 14px;
                    border-bottom: dotted 3px helpers.$borders;
                    outline: 0;
                    @include helpers.transicao(0.3s ease-in-out);

                    &:after{
                        position: absolute;
                        display: block;
                        content: "";
                        width: 10px;
                        height: 10px;
                        left: calc(50% - 5px);
                        bottom: -5px;
                        background-color: helpers.$light;
                        border: solid 1px helpers.$borders;
                        border-radius: 100%;
                        -webkit-border-radius: 100%;
                        -moz-border-radius: 100%;
                        @include helpers.transicao(0.3s ease-in-out);
                    }

                    &:hover, &:focus{
                        border-bottom-color: helpers.$dark;
                    }
                }

                &.finalizar{
                    a{
                        &:after{
                            width: 20px;
                            height: 20px;
                            left: calc(50% - 10px);
                            bottom: -10px;
                        }
                    }

                    &.concluido{
                        a{
                            color: helpers.$success;
                            border-bottom-color: helpers.$dark;
                            &:after{
                                background-color: helpers.$success;
                                border-color: helpers.$success;
                            }
                        }
                    }
                }
                &.atual{
                    a{
                        color: helpers.$textoDark;
                        border-bottom-color: helpers.$dark;
                        &:after{
                            background-color: helpers.$dark;
                            border-color: helpers.$dark;
                        }
                    }
                }
                &.concluido{
                    a{
                        color: helpers.$textoMedium;
                        border-bottom-color: helpers.$dark;
                        &:after{
                            background-color: helpers.$dark;
                            border-color: helpers.$dark;
                        }
                    }
                }
            }

            .checkout-nav{
                @include helpers.sprite();
                cursor: pointer;
                position: absolute;
                display:block;
                width: 11px;
                height: 20px;
                top: calc(50% - 10px);

                &.nav-prev{
                    left: 10px;
                    background-position: -435px -10px;
                }
                &.nav-next{
                    right: 10px;
                    background-position: -456px -10px;
                }
            }
        }
    }

    .checkout-acoes{
        display: block;
        width: 100%;
        height: auto;
        margin: 20px 0px;
        text-align: center;

        .item{
            display: block;
            width: 100%;
            margin-bottom: 15px;
            font-family: helpers.$fontRegular;
            vertical-align: middle;

            @media(min-width:992px){
                display: inline-block;
                width: auto;
                margin: 0px 10px;
            }

            .cupom{
                display: block;
                width: 100%;
                max-width: 410px;
                height: auto;
                padding: 5px;
                margin: 0 auto;
                background-color: helpers.$light;
                border: solid 1px helpers.$borders;

                @media(min-width:992px){
                    display: block;
                    width: 410px;
                }

                .label{
                    color: helpers.$textoDark;
                    font: normal 14px helpers.$fontBold;
                }
                .value{
                    color: helpers.$textoDark;
                    font: normal 14px helpers.$fontRegular;
                }
                .trocar{
                    cursor: pointer;
                    color: helpers.$textoDark;
                    font: normal 12px helpers.$fontBold;
                }

                #frmCupom{
                    input{
                        width:100%;
                        padding: 10px;
                        margin-bottom: 10px;
                        color: helpers.$textoMedium;
                        font-size: 13px;
                        border: none;

                        @media(min-width:500px){
                            width:280px;
                            margin-bottom: 0px;
                        }
                    }

                    #btnEnviarCupom{
                        outline: 0px;
                        width:100%;
                        height: auto;
                        padding: 10px;
                        color: helpers.$textoLight;
                        background-color: helpers.$dark;
                        border: solid 1px helpers.$dark;
                        font-size: 12px;
                        text-align: center;
                        @include helpers.transicao(0.3s ease-in-out);

                        @media(min-width:500px){
                            width:85px;
                        }

                        &:hover, &:focus{
                            outline: 0px;
                            color: helpers.$textoLight;
                            border-color: helpers.$success;
                            background-color: helpers.$success;
                        }
                    }
                }

                #btnEditarCupom{
                    color: helpers.$textoDark;
                    font-size: 12px;
                    text-decoration: underline;
                }
            }

            .btnConfirmar{
                display: block;
                width: 100%;
                max-width: 270px;
                height: auto;
                margin: 0 auto;
                padding: 10px;
                color: helpers.$light;
                font-size: 13px;
                font-family: helpers.$fontBold;
                text-align: center;
                text-transform: uppercase;
                background-color: helpers.$highlight;
                border: solid 1px helpers.$highlight;
                @include helpers.transicao(0.3s ease-in-out);

                @media(min-width:992px){
                    width: 270px;
                }

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

    .checkout-resumo{
        display: block;
        width: 100%;
        height: auto;
        padding: 15px 10px;
        margin-bottom: 15px;
        background-color: helpers.$light;
        border: solid 1px helpers.$borders;

        #resumo-content{
            .resumo-titulo{
                display: block;
                margin: 0px;
                margin-bottom: 15px;
                color: helpers.$textoMedium;
                font-size: 15px;
                font-family: helpers.$fontRegular;
                text-align: center;
            }

            .box-produtos{
                display: block;
                width: 100%;
                height: auto;
                padding: 10px;
                margin-bottom: 15px;
                background-color: helpers.$light;
                border: solid 1px helpers.$borders;

                @media(min-width:767px){
                    margin-bottom: 0px;
                }

                .produtos-todos{
                    display:none;
                }

                .produto-item{
                    display: block;
                    width: 100%;
                    height: auto;
                    max-width: 180px;
                    min-height: 365px;
                    margin: 0 auto;

                    .produto-foto{
                        display: block;
                        width: 100%;
                        height: auto;
                        margin-bottom: 10px;

                        a{
                            display: block;
                            outline: 0;

                            img{
                                display: block;
                                width: 100%;
                                height: auto;
                                max-width: 150px;
                                margin: 0 auto;
                            }
                        }
                    }

                    .produto-texto{
                        display: block;
                        width: 100%;
                        height: auto;
                        font-family: helpers.$fontRegular;

                        .produto-titulo{
                            a{
                                display: block;
                                color: helpers.$textoDark;
                                font-size: 12px;
                                text-align: center;
                                outline: 0;
                            }
                        }

                        .produto-referencia{
                            display: block;
                            margin-bottom: 5px;
                            color: helpers.$textoMedium;
                            font-size: 10px;
                            text-align: center;
                        }

                        .produto-informacoes{
                            .item{
                                display: block;
                                width: 100%;
                                height: auto;
                                margin-bottom: 5px;
                                font-size: 0px;
                                text-align: center;

                                p{
                                    display: inline-block;
                                    width: 50%;
                                    color: helpers.$textoMedium;
                                    font-size: 9px;
                                    vertical-align: middle;
                                    text-align: left;

                                    &:last-of-type{
                                        color: helpers.$textoDark;
                                        font-size: 11px;
                                        font-weight: normal;
                                        font-family: helpers.$fontMedium;
                                        text-align: right;
                                    }
                                }
                            }
                        }
                    }
                }
            }

            .btn-ver-todos{
                display: block;
                outline: 0;
                width: 100%;
                padding: 10px;
                max-width: 210px;
                margin: 15px auto;
                color: helpers.$textoLight;
                font-size: 12px;
                font-family: helpers.$fontRegular;
                border: solid 1px helpers.$dark;
                background-color: helpers.$dark;
                text-align: center;
                @include helpers.transicao(0.3s ease-in-out);

                &:hover, &:focus{
                    border-color: helpers.$success;
                    background-color: helpers.$success;
                }
            }

            .resumo-informacoes{
                display: block;
                width: 100%;
                height: auto;
                font-family: helpers.$fontRegular;

                .item{
                    display: block;
                    width: 100%;
                    height: auto;
                    margin-bottom: 15px;
                    padding: 15px 10px;
                    background-color: rgba(helpers.$medium, 0.3);
                    border: solid 1px helpers.$borders;

                    .item-titulo{
                        display: block;
                        margin: 0px;
                        margin-bottom: 15px;
                        color: helpers.$textoMedium;
                        font-size: 15px;
                        text-align: center;
                        text-transform: uppercase;
                    }

                    .item-informacao{
                        display: block;
                        margin: 0px;
                        color: helpers.$textoDark;
                        font-size: 14px;
                        text-align: center;
                    }

                    &.total{
                        border-color: helpers.$borders;
                        background-color: rgba(helpers.$highlight, 0.1);
                        
                        .item-informacao{
                            font-family: helpers.$fontBold;
                        }
                    }
                    &.frete{
                        color: helpers.$textoDark;
                        font-size: 11px;
                        text-align: center;

                        .titulo{
                            color: helpers.$textoDark;
                            font-size: 13px;
                            text-transform: uppercase;
                        }

                        .trocar-frete{
                            margin-top: 5px;
                            a{
                                display: block;
                                color: helpers.$textoDark;
                                outline: 0;
                                text-decoration: underline;
                            }
                        }
                    }
                    &.endereco{
                        color: helpers.$textoDark;
                        font-size: 14px;
                        text-align: center;

                        .titulo{
                            color: helpers.$textoMedium;
                            font-size: 15px;
                            text-transform: uppercase;
                        }

                        .trocar-endereco{
                            margin-top: 5px;
                            a{
                                display: block;
                                color: helpers.$textoDark;
                                text-decoration: underline;
                                outline: 0;
                            }
                        }
                    }
                    &.cupom {
                        color: helpers.$textoDark;
                        font-size: 11px;
                        text-align: center;

                        .titulo{
                            color: helpers.$textoDark;
                            font-size: 13px;
                            text-transform: uppercase;
                        }

                        .remover-cupom{
                            margin-top: 5px;
                            a{
                                display: block;
                                color: helpers.$textoDark;
                                text-decoration: underline;
                                outline: 0;
                            }
                        }
                    }
                }
            }
        }
    }

    .title-section {
        margin-bottom: 40px;

        .title {
            color: map.get(helpers.$checkout, colorTitleSection);
            font-size: 20px;
            font-weight: bold;
            margin: 0px;
            padding: 0px;
        }

        .subtitle {
            color: map.get(helpers.$checkout, colorSubtitleSection);
            float: left;
            font-size: 13px;
        }
    }

    .content {
/*        border: 1px solid map-get($checkout, borderColorContent);
        clear: both;
        margin-bottom: 30px;*/
    }

    .content-button-actions {
        padding: 20px 0px;
        text-align: center;

        .btnConfirmar {
            @include helpers.transicao(0.3s);
            background-color: map.get(helpers.$checkoutButtonActions, backgroundColorBtnConfirmar);
            border: solid 1px helpers.$borders;
            border-radius: 0px;
            color: map.get(helpers.$checkoutButtonActions, colorBtnConfirmar);
            display: inline-block;
            font-size: 13px;
            font-weight: bold;
            height: 45px;
            line-height: 45px;
            margin: 25px 0;
            text-transform: uppercase;
            width: 262px;

            &:hover {
                color: helpers.$textoLight;
                border-color: helpers.$borders;
                background-color: map.get(helpers.$checkoutButtonActions, backgroundColorBtnConfirmarHover);
            }

            &.disabled {
                color: helpers.$textoMedium;
                border-color: helpers.$medium;
                background-color: helpers.$medium;
            }

            @media (min-width: 768px) {
                float: right;
                margin: 0;
            }
        }
    }

    #container-resumo {
        #resumo-content {
            display: none;
            margin-bottom: 48px;

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

            .box {
                border: 1px solid map.get(helpers.$checkout, borderColorBox);
                margin-bottom: 10px;
                padding: 15px 30px;

                &.box-endereco,
                &.box-frete {
                    background-color: map.get(helpers.$checkout, backgroundColorBox);

                    p {
                        color: map.get(helpers.$checkout, colorBoxText);
                        font-size: 13px;
                        line-height: 16px;
                    }
                    .vlFrete{
                        color: map.get(helpers.$checkoutFrete, colorBoxVlFrete);
                    }
                    .titulo {
                        color: map.get(helpers.$checkout, colorBoxTitle);
                        font-size: 14px;
                        font-weight: bold;
                        margin-bottom: 5px;
                    }

                    .trocar-endereco,
                    .trocar-frete {
                        color: map.get(helpers.$checkout, colorBoxLink);
                        font-size: 12px;
                        margin-top: 5px;
                        text-decoration: underline;
                    }
                }

                &.box-produtos {
                    background-color: map.get(helpers.$checkoutResumo, backgroundColorBoxProdutos);
                    max-height: 340px;
                    overflow-y: scroll;
                    padding: 0;

                    .produto-item {
                        border-bottom: 1px solid map.get(helpers.$checkoutResumo, borderColorProdutoItem);
                        padding: 10px 5px;

                        &:last-of-type {
                            border-bottom: none;
                        }

                        .produto-foto {
                            display: inline-block;
                            height: 90px;
                            vertical-align: top;
                            width: 90px;

                            @media (min-width: 1200px) {
                                margin: 0px 10px;
                            }

                            img {
                                height: 90px;
                                //width: 90px;

                            }
                        }

                        .produto-texto {
                            display: inline-block;
                            vertical-align: top;
                            //width - produtoFoto.width - (produto-tem.paddingLeft + produto-item.paddingRight)
                            width: calc(100% - 90px - 10px);

                            @media (min-width: 1200px) {
                                //width - produtoFoto.width - (produto-tem.paddingLeft + produto-item.paddingRight)
                                width: calc(100% - 110px - 10px);
                            }

                            p {
                                color: map.get(helpers.$checkoutResumo, colorProdutoText);
                                font-size: 13px;
                            }

                            .produto-titulo {
                                color: map.get(helpers.$checkoutResumo, colorProdutoTitulo);
                                font-size: 14px;
                            }
                        }
                    }
                }

                &.box-totais {
                    padding: 0;

                    .sub-totais {
                        background-color: map.get(helpers.$checkoutResumo, backgroundColorBoxTotaisSubTotais);
                        color: map.get(helpers.$checkoutResumo, colorBoxTotaisSubTotais);
                        padding: 10px 0px;

                        .produtos,
                        .frete,
                        .cupom {
                            display: block;
                            padding: 5px 30px;
                        }
                        .valuefrete{
                            color: map.get(helpers.$checkoutFrete, colorBoxVlFrete);
                        }
                        .cupom {
                            .trocar {
                                float: right;

                                #btnEditarCupom {
                                    cursor: pointer;
                                    text-decoration: underline;
                                }
                            }

                            #frmCupom {
                                font-size: 0;
                                padding: 5px 0px 0px;

                                #stCupom {
                                    border: 1px solid helpers.$borders;
                                    border-radius: 3px;
                                    font-size: 14px;
                                    height: 35px;
                                    margin-right: 10px;
                                    padding: 0 5px;
                                    width: calc(100% - 65px - 10px);
                                }

                                #btnEnviarCupom {
                                    background-color: map.get(helpers.$checkoutResumo, backgroundColorBtnEnviarCupom);
                                    border: solid 1px helpers.$borders;
                                    border-radius: 0px;
                                    color: map.get(helpers.$checkoutResumo, colorBtnEnviarCupom);
                                    font-size: 14px;
                                    height: 35px;
                                    width: 65px;
                                }
                            }
                        }
                    }

                    .total {
                        background-color: map.get(helpers.$checkoutResumo, backgroundColorTotal);
                        border-top: 1px solid map.get(helpers.$checkoutResumo, borderColorTotal);
                        color: map.get(helpers.$checkoutResumo, colorTotal);
                        padding: 15px 30px;
                    }

                    .label {
                        display: inline-block;
                        width: 115px;
                    }
                }
            }
        }

        .resumo-controle {
            background-color: map.get(helpers.$checkoutResumo, backgroundColorControle);
            margin: 0px -15px 20px;
            min-height: 50px;
            width: 100vw;

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

            .resumo-hide,
            .resumo-cupom,
            .resumo-show {
                color: map.get(helpers.$checkoutResumo, colorResumoControle);
                cursor: pointer;
                display: inline-block;
                font-size: 12px;
                padding: 15px;

                .separator {
                    display: block;
                    background-color: map.get(helpers.$checkoutResumo, backgroundColorResumoControleSeparator);
                    height: 1px;
                }

                .ico-show,
                .ico-hide {
                    @include helpers.sprite();
                    height: 8px;
                    margin-left: 5px;
                    width: 15px
                }

                .ico-hide {
                    background-position: -482px -85px;
                }

                .ico-show {
                    background-position: -467px -85px;
                    float: right;
                    margin-top: 4px;
                }
            }

            .resumo-cupom,
            .resumo-show {
                width: 50%;
            }

            .resumo-cupom {
                float:right;
            }

            .resumo-show {
                float: left;
            }
        }
    }
}

#copyright{
    .conteudo{
        padding: 30px 15px !important;
    } 
}