/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/* 
    Created on : 10-jul-2019, 11:26:06
    Author     : Tatiana

    web: Grima
*/

@mixin cabecera_dos{
    header{
        .busquedaCesta{
            background: $fondo_cabecera;
            min-height: 133px;
            & > .container{
                @media (max-width: 991px){
                    padding-bottom: 20px;
                }
                & > .row{
                    text-align: center;
                }
            }
            #header_logo {
                text-align: center;
                padding: 7px 15px;
                a{
                    background: none;
                    width: 100%;
                    height: 100%;
                    display: inline-block;
                    img{
                        display: initial !important;
                    }
                }
                @media (max-width: 991px) {
                    text-align: center;
                    a {
                        background: none;
                        display: inline-block;
                        max-width: 100%;
                    }
                }
            }
            #sticky_top{
                /*este es el navegador superior primer bloque*/
                .nav{
                    background: $fondo_cabecera;
                    font-family:$fuente2;
                    font-weight: 300;
                    height: 40px;
                    font-size:12px;
                    color:$blanco;
                    text-align: left;
                    .nav_info{
                        text-align:center;
                        height:100%;
                        padding:10px 0px;
                        a.telefono, a.email{
                            margin-right:3px;
                            color:$blanco;
                            i{
                                margin-right: 5px;
                            }
                            &:hover{
                                color:$secundario;
                            }
                        }
                        .nav_redes_sociales{
                            display:inline-block;
                            a {
                                display: inline-block;
                                vertical-align: middle;
                                color:$blanco;                   
                                i{
                                    display: inline-block;
                                    height: 20px;
                                    width: 20px;
                                    transition: all 0.3s ease-in-out 0s;
                                    -webkit-transition: all 0.3s ease-in-out 0s;
                                    -ms-transition: all 0.3s ease-in-out 0s;
                                }
                                &:hover{
                                    color:$secundario;                       
                                }
                            }
                        }
                    }
                    .header_links{
                        height: 100%;
                        @media(max-width: 500px){
                            width: 100%;
                        }
                        #header_links{
                            list-style: none;
                            text-align: right;
                            margin-right: -15px;
                            li{
                                display: inline-flex;
                                align-items: center;
                                a {
                                    display: inline-block;
                                    line-height: 12px;
                                    padding: 0 5px 1px;
                                    margin: 14px 0 13px;
                                    text-transform: capitalize;
                                    color: $blanco;
                                    .icono_cuenta{
                                        display: none;
                                    }
                                    &:hover{
                                        color:$secundario;
                                    }
                                    &.account{
                                        border-style: none;
                                    }
                                    &.logout i{
                                        position: relative;
                                        top: 2px;
                                        font-size: 18px;
                                    }
                                }
                                .registro{
                                    border-style: solid;
                                    border-width: 0 0 0 1px;
                                    border-color: #d7d7d7;
                                    color: $blanco;
                                }
                                .logout{
                                    float:right;
                                    padding:2px 12px 1px;
                                    margin-left: -5px;
                                }
                                a.account {
                                    max-width: 300px;
                                    white-space: nowrap;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    @media all and (max-width: 991px){
                                        max-width: 140px;
                                    }
                                    @media all and (max-width: 882px){
                                        span{
                                            display:none;
                                        }
                                    }
                                }

                            }
                        }
                        @media(max-width: 991px){
                            text-align: center;
                        } 
                    }
                    @media(max-width: 991px){
                        position:absolute;
                        right:0px;
                        top:15px;
                    }
                }
                #search_block_top{
                    // float: left;

                    display: block;
                    padding: 0px;
                    div#search_block_top_collapse{
                        border: $busqueda_borde;
                        //background-color: $blanco;
                        display: block;
                        @media (max-width:767px){
                            display: none;
                            &.in{
                                display: block;
								position: fixed;
								top: 50px;
								right: 0px;
								width: 100%;
								z-index: 1;
                            }
                            button{
                                display: initial;
                            }
                        }
                    }
                    #search_query_top {
                        background: $blanco none repeat scroll 0 0;
                        border: 0 none;
                        color: rgba(68,68,68,0.5);
                        display: inline-block;
                        font-size: 12px;
                        height: 48px;
                        line-height: 48px;
                        box-shadow: none !important;
                        margin-right: 0;
                        padding: 0px 20px;
                        text-align: left;
						flex-grow: 2;
                    }
                    #searchbox{
                        display: flex;
                        .search_filter {
                            background: $blanco none repeat scroll 0 0;
                            width: auto;
                            &:before {
                                border-right: 2px solid #008fa1;
                                content: "";
                                height: 32px;
                            }
                            &:before {
                                border-right: 2px solid $gris;
                            }
                            &::after {
                                color: rgb(68, 68, 68);
                                content: "";
                                font-family: $fuente_iconos;
                                font-size: 12px;
                            }
                            #category_filter {
                                -moz-appearance: none;
                                -webkit-appearance: none;
                                -moz-appearance: none;
                                background: transparent none repeat scroll 0 0;
                                border: 0 none;
                                color: $gris_chocolate;
                                font-size: 12px;
                                height: 48px;
                                line-height: 48px;
                                padding: 0px;
                                position: relative;
                                text-transform: uppercase;
                                // width: 160px;
                                z-index: 1024;
                                text-align: center;
                                display:block;
                                width: 138px;
                                &:hover{
                                    color:$bt_bAvanzada_fuente_hover;
                                }
                            }
                        }
                        .boton.button-search {
                            -moz-box-shadow: none;
                            -webkit-box-shadow: none;
                            background: transparent none repeat scroll 0 0;
                            border: 0 none !important;
                            box-shadow: none !important;
                            text-align: center;
                            padding: 0;
                            span{
                                &:before{
                                    color: $grisTexto;
                                    font-size: 2.6em;  
                                }
                            }
                            &:hover{
                                span{
                                    &:before{
                                        color:$primario;
                                    }
                                }
                            }
                        }
                    }
                }
                .boton{
                    border-color:$secundario;
                    background: $secundario;
                    display:none;
                }
                .shopping_cart_menu {
                    display: inline-block;
                    margin-left: 5px;
                    width: auto;
                    float: right;
                    position: relative;
                    // @media(max-width: 600px){
                    //     top:76px;
                    //     z-index: 3;
                    //     right:-31px;
                    // }
                    .cesta_desplegableV2{
                        height: 50px;
                        width: auto;
                        min-width: 163px;
                        line-height: 53px;
                        text-align: center;
                        &:hover{
                            background-color: $fondo_cesta_desp_hover;
                            .contenedor_totales_cesta{
                                a.btn_comprar_minicest{
                                    color:$minicesta_boton_comprar_fuente_hover;
                                    background-color: $fondo_cesta_desp_hover;
                                }
                            }
                        }
                        .contenedor_totales_cesta{
                            a.btn_comprar_minicest{
                                color:$minicesta_boton_comprar_fuente;
                                height: 100%;
                                width: 100%;
                                display: block;
                                background: $minicesta_boton_comprar_fondo;
                                &:hover{
                                    color:$minicesta_boton_comprar_fuente_hover;
                                    background-color: $minicesta_boton_comprar_fondo_hover;
                                }
                                span.mdi{
                                    font-size: 1.4em;
                                    vertical-align: middle;
                                }
                            }
                        }
                        /*Líneas de la cesta*/
                        .linea_cesta{
                            dt {
                                background: $blanco none repeat scroll 0 0;
                                font-weight: normal;
                                padding: 15px 15px 17px;
                                position: relative;
                                overflow:hidden;
                                a{
                                    float:none;
                                    font-size: 12px;
                                    transition: all 0.3s ease-in-out 0s;
                                    -webkit-transition: all 0.3s ease-in-out 0s;
                                    -moz-transition: all 0.3s ease-in-out 0s;
                                    &.cart-images{
                                        border: 1px solid $gris;
                                        display: flex;
                                        justify-content: center;
                                        vertical-align: top;
                                        margin-right: 15px;   
                                        width: 95px;
                                        height: 109px;
                                        text-align: center;
                                        float: left;
                                        align-items: center;
                                        img{
                                            max-width:100%;
                                            height: auto;
                                        }
                                    }
                                    img{
                                        width:auto !important;
                                        @include sombraPortada();
                                    }
                                }
                                .cart-info {
                                    display: inline-block;
                                    max-width: 110px;
                                    max-height: 107px;
                                    .product-name {
                                        padding: 0;
                                        display: block;
                                        margin-top: -3px;
                                        height:auto;
                                        a {
                                            display: inline-block;
                                            color: $titulo_ficha;
                                            line-height: 18px;
                                            font-weight: normal;
                                            white-space: normal;
                                            font-size: 15px;
                                            &:hover{
                                                color:$titulo_ficha_hover;
                                            }
                                        }
                                    }
                                    span{
                                        &.quantity-formated {
                                            color: $autor_ficha;
                                            display: inline-block;
                                            font-size: 12px;
                                            div{
                                                display: inline-block;
                                                font-size:12px;
                                                font-weight: normal;
                                                &.cesta_menos, &.cesta_mas {
                                                    display: none;
                                                }
                                            }
                                        }
                                    }
                                    .product-atributes {
                                        padding-bottom: 3px;
                                        font-size: 13px;
                                        a {
                                            color: #9c9b9b;
                                            font-size: 12px;
                                            max-width: 130px;
                                            overflow: hidden;
                                            display: inline-block;
                                            white-space: nowrap;
                                            text-overflow: ellipsis;
                                        }
                                    }
                                    .cantidad{
                                        display: -webkit-inline-box;
                                        width: 85px;
                                        .menos, .mas{
                                            a{
                                                padding:0px;
                                            }
                                        }
                                        .cantidad_articulos{
                                            input{
                                                padding: 0px;
                                                height: 24px;
                                                width: 45px;
                                                text-align: center;
                                            }
                                        }
                                    }
                                }
                                .eliminar{
                                    position: absolute;
                                    right: 0px;
                                    top: 11px;
                                    i{
                                        font-size: 20px;
                                    }
                                }
                                .precio{
                                    text-align: right;
                                    position: absolute;
                                    right: 8px;
                                    bottom: 15px;
                                }
                                .remove_link {
                                    position: absolute;
                                    right: 0px;
                                    top: 11px;
                                    .linea_cesta_borrar a{
                                        color: #bbbbbb;
                                        outline: none;
                                        text-decoration: none;
                                        font-size: 0px;
                                        &:before{
                                            display: inline-block;
                                            content: "\f1c0";
                                            font-family: $fuente_iconos;
                                            font-size: 18px;
                                            line-height: 18px;
                                            text-shadow: 1px 1px #f9f9f9;
                                        }
                                    }
                                }
                                &:hover{
                                    background: $grisCesta;
                                    a.cart-images{
                                        background-color: $blanco;
                                    }
                                }
                            }
                            dd {
                                border-bottom: 1px solid #e2dfdf;
                                -webkit-box-shadow: 0 1px $blanco;
                                -moz-box-shadow: 0 1px $blanco;
                                box-shadow: 0 1px $blanco;
                                margin-bottom: 1px;
                                position: relative;
                            }
                        }
                        .contenedor_cesta_desplegable {
                            height: auto;
                            overflow: hidden;
                            border-top: $borde_cesta_desp;
                            width: 280px;
                            text-align: left;
                            z-index: 1100;
                            max-height: 450px;
                            overflow-y: auto;
                            scrollbar-width: thin;

                            &::-webkit-scrollbar {
                                width: 6px; 
                                height: 6px;
                            }
                            &::-webkit-scrollbar-thumb{
                                background: #ccc;
                                border-radius: 2px;
                            }
                            &::-webkit-scrollbar-thumb:hover {
                                background: #b3b3b3;
                                box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.2);
                            }
                            &::-webkit-scrollbar-thumb:active{
                                background-color: #999999;
                            }
                            &::-webkit-scrollbar-track{
                                background: #e1e1e1;
                                border-radius: 4px;
                            }
                            &::-webkit-scrollbar-track:hover, &::-webkit-scrollbar-track:active{
                                background: #d4d4d4;
                            }
                            .lineas_cesta_linea_mini_cesta {
                                max-height:  470px;
                                overflow-y:  auto;
                            }
                            .cart-prices{
                                color: $precio_minicesta;
                            }
                            .cesta_restaurar{
                                .minicesta_restaurar_estilos{
                                    p{
                                        text-align: center;
                                        padding:10px;
                                        margin:0px;
                                    }
                                    .articulo{
                                        font-weight: bold;
                                        color: $precio_minicesta;
                                    }
                                    .enlace_restaurar{
                                        text-align: center;
                                        background:$gris;
                                        .restaurar{
                                            float:none;
                                            display: block;
                                        }
                                    }
                                }
                            }
                            .cart-prices-line, .cesta_restaurar p {
                                overflow: hidden;
                                background: $blanco;
                                line-height: initial;
                            }
                            .cart-prices-line{
                                padding: 15px;
                                text-align: left;
                                border-bottom: 1px solid #e2dfdf;
                                padding-right: 7px;
                            }
                            .cart_block_total, .cart_block_shipping_cost, a{
                                float: right;
                            }
                            .price, a{
                                color: $precio_minicesta;
                                font-size: 16px;
                                font-weight: bold;
                                white-space: nowrap;
                            }
                            .cart-buttons {
                                overflow: hidden;
                                padding: 15px;
                                margin: 0;
                                a {
                                    border: medium none;
                                    font-family: $fuente;
                                    font-size: 14px;
                                    margin-right: 0;
                                    text-transform: uppercase;
                                    line-height: 1;
                                    padding: 7px 15px;
                                    background-color: $botones_color;
                                    color: $botones_fuente;
                                    font-weight: bold;
                                    &:hover{
                                        background: $botones_color_hover;
                                        color:$botones_fuente_hover !important;
                                    }
                                }
                                #button_order_cart {
                                    padding-top: 8px;
                                    padding-bottom: 5px;
                                }
                                .cesta_vaciar a{
                                    float:left;
                                }
                            }
                            .cesta_vaciar a{
                                float: none;
                                padding-top: 9px;
                                padding-bottom: 8px;
                                margin:0px 3px;
                            }
                        }
                    }
                }
                @media only screen and (min-width: 1200px){
                    &.sticky-fixed-top  #search_block_top  #searchbox {
                        .search_filter  {
                            display: block;
                            background: transparent none repeat scroll 0 0;
                            border: 0 none;
                            color: #4666a0;
                            font-size: 24px;
                            font-weight: 700 !important;
                            height: 37px;
                            line-height: 43px;
                            width: 60px;
                            z-index: 1024;
                            text-align: center;
                            &:before{
                                border:none;
                            }
                            #category_filter {
                                position: relative;
                                top: 1px;
                                display: inline-block;
                                font-family: $fuente_iconos;
                                font-style: normal;
                                font-weight: 400;
                                line-height: 1;
                                -webkit-font-smoothing: antialiased;
                                font-size:0;
                                height: 35px;
                                width: 35px;
                                &:before{
                                    content: "\f493";
                                    font-size: 24px;
                                    display: block;
                                    line-height: 34px;
                                    color:$busqueda_icono_color;
                                }
                            }
                        } 
                        .boton.button-search{
                            span{
                                &:before{
                                    font-size: 2.4em;
                                }
                            }
                        }
                    }
                }

                @media only screen and (min-width: 992px){
                    text-align: right;
                }
                @media only screen and (max-width: 991px){
                    display: inline-block;
                    float: none;
                    right: auto !important;
                    position: static;
                }
                &.sticky-fixed-top #search_block_top .boton.button-search {
                    @media only screen and (min-width: 992px){
                        height: 39px;
                        right: -1px;
                        top: -1px;
                        width: 39px;
                    }
                }
                &.sticky-fixed-top #search_block_top #search_block_top_collapse{
                    display: none;
                    &.in {
                        display: block;
                        position: absolute;
                        right: 0;
                    }
                }
            }
            .sticky-fixed-top{
                padding: 0;
                position: fixed;
                top: 0;
                width: auto;
                margin: 0 !important;
                z-index: 5003;
                .nav{
                    display:none;
                }
                #search_block_top {
                    padding: 0;
                    width: auto;
                    margin: 0px 0 0;
                    .boton{
                        display: block;
                        i {
                            font-size: 23px;
                        }

                    }

                    #search_query_top {
                        width: 280px;
                        height: 37px;
                        line-height: 37px;
                    }
                }
                .shopping_cart_menu {
                    // margin: 5px 0 0 5px;
                    padding: 1px 0px;
                    width: auto;
                    .cesta_desplegableV2 {
                        height: 39px;
                        line-height: 39px;
                        &:hover{
                            background: rgba(255,255,255,0.3);
                        }
                    }
                }
            }
        }
        #contenedorNav{
            &.fieldmegamenu-sticky{
                .stt-menu {
                    display: none;
                }
            }
            .main-navigation{
                background: $menuSup_fondo;
                border-bottom: 1px solid $terciario;
                border-top:1px solid $terciario;
                position: relative;
                width: 100%;
                @media only screen and (min-width: 100px){
                    &.fixed{
                        position: fixed;
                        z-index: 1030;
                        top: 0px;
                        left: 0px;
                        right: 0px;
                    }
                }
                @media (max-width: 991px){
                    height:auto;
                }
                
                
            }
            .fixed{
                .fieldmegamenu{ 
                    li .lupa{
                        display:block;
                    }
                    a{
                        padding:16px 30px !important;
                        @media(max-width: 679px){
                            padding:16px 18px !important;
                        }
                    }
                }

                @media(max-width:400px){
                    .fieldmegamenu a{
                        padding: 16px 12px !important;
                    }
                }
                .title{
                    .mdi{
                        display: inline-block !important;
                        vertical-align: middle;
                        font-size: 30px;
                    }
                    .title-text{
                        display: none;
                    }
                }
            }
        }
    }
    /**************************************/
    /*************MEDIA QUERIES************/
    /**************************************/
    @media(max-width: 991px){
        header{
            .busquedaCesta{
                #sticky_top {
                    &.sticky-fixed-top .shopping_cart_menu{
                        top: 0px;
                        right: 21px;
                        z-index: 1031;
                        position: fixed;
                        .cesta_desplegableV2{
                            line-height: 54px;
                            min-width:50px;
                            span{
                                font-size: 20px;
                                &.ajax_cart_no_product.hidden-xs{
                                    display: none;
                                }
                            }
                        } 
                    }
                }
            }
        }
    }

    @media(max-width: 767px){
        header{
            .busquedaCesta{
                min-height: 95px;
                #sticky_top {
                    width: 50%;
                    display:flex;
                    align-items:start;
                    align-content:center;
                    justify-content: center;
                    .nav{
                        position: inherit;
						right: auto;
						top: auto;
						flex: 1 1;
						float: none;
						display: block;
						height: 55px;
						padding: 0;
						overflow: hidden;
						max-width: 65px;
						background:none;
                    }
                    .nav .nav_info{
                        display:none;
                    }
                    .nav .header_links{
                        padding:0;
                        width: auto;
                        height: auto;
                        #header_links{
                            text-align: left;
                            float: none;
                            display: block;
                            width: 86%;
                            ul{
                                li:last-child{
                                    display:none;
                                }
                            }
                        }
                    }
                    .nav .header_links #header_links li{
                        &:first-child{
                            a{
                                font-size: 0px;
                                overflow: hidden;
                                display: block;
                                left: auto;
                                top: auto;
                                margin:0;
                                &:before{
                                    display: block;
                                    font-size: 30px;
                                    content: "\F004";
                                    font-family: $fuente-iconos;
                                    background: $primario;
                                    padding: 22px 10px 21px;
                                }
                            }
                        }
                        a.account{
                            font-size: 0px;
                            margin:0px;
                            float:right;
							padding:0px;
                            .icono_cuenta{
                                display: block;
                                padding: 13px 0;
                                font-size: 40px;
                                display: inline-block;
                            }
                        }
                        a.logout i{
                            font-size: 40px;
                        }
                    }
                    #search_block_top{
                            border: 0 none;
							padding: 0;
							float: none;
							position: initial;
							display: block;
							height: auto;
							flex: 1 1;
							width: auto;
							right: auto;
							top: auto;
							text-align: left;
							margin-left: 3px;
							max-width: 65px;
                        .mdi-madnify{
                            font-size: 30px;
                        }
                        #searchbox {
                            border: 1px solid $gris;
                            padding: 0;
                            position: relative;
                            width: auto;
                            .search_filter{
                                background: $blanco none repeat scroll 0 0;
                                border: 1px solid $gris;
                                #category_filter{
                                    width: 73px;
                                    padding: 0 0 0 8px;
                                    font-size: 0px;
                                    &:after{
                                        color: #444;
                                        content: "\f493";
                                        font-family: "Material Design Icons";
                                        font-size: 24px;
                                    }
                                }
                            }
                        }
                    }
                    .shopping_cart_menu{
                        position:initial;
                        top:auto;
                        right:auto;
                        display: block;
                        float:none;
                        margin:0;
                        padding:0;
						.cesta_desplegableV2 {
							min-width: 50px;
						}
                        .mdi-cart{
                            font-size: 30px;
                        }
                    }

                    &.sticky-fixed-top .shopping_cart_menu{
                        right: 0px;
                    }

                    .boton{
                        display:block;
                        font-size:20px;
                        padding: 8px 14px 8px;
                        margin:0;
                    }
                }
            }
        }
    }

    @media(max-width: 560px){
        span.ajax_cart_no_product{
            display: none;
        }

        header .busquedaCesta #sticky_top .shopping_cart_menu .cesta_desplegableV2{
            min-width: 60px;
        }
    }
}
