﻿
/* BreadCrumbs*/
header #breadcrumbsContainer {
    /*width: 100%;*/
    padding: 0 16px;
}

    header #breadcrumbsContainer .breadcrumbs {
        padding: 10px 0px;
        font-size: 14px;
        text-align: right;
        color: #757B88;
        width: 100%;
        background-color: #fff;
        max-width: 960px;
        margin: 16px 0 0 0;
        white-space: nowrap;
        display: flex;
        gap: 4px;
    }

        header #breadcrumbsContainer .breadcrumbs a {
            color: #6E6E6E;
            text-decoration: none;
        }

.BreadCrumbcsScroller small {
    margin: -1px 4px 0px 10px;
    border-left: 1px solid #444749;
    border-bottom: 1px solid #444749;
    width: 5px;
    height: 5px;
    display: inline-block;
    transform: rotate( 45deg );
    vertical-align: middle;
}

.BreadCrumbcsScroller span:last-child {
    color: #000;
    font-weight: bold;
    display: inline-block;
    height: 18px;
}

/* Top Header sticky */
.HeaderContainer {
    width: 100%;
    background-color: #001439;
    position: sticky;
    top: 0;
    z-index: 1000;
    display: flex;
    justify-content: center;
}

    .HeaderContainer a {
        text-decoration: none;
    }

    .HeaderContainer .Header {
        position: relative;
        height: 80px;
        z-index: 9999;
        display: grid;
        grid-template-columns: 0 minmax(150px, 204px) minmax(240px, 611px) minmax(100px, 178px) 0 minmax(150px, 242px);
        align-items: center;
        justify-items: center;
        max-width: 1236px;
    }

        .HeaderContainer .Header > :nth-child(2) {
            justify-self: start;
        }

        .HeaderContainer .Header > :last-child {
            justify-self: end;
        }

/* Mobile Search Icon */
#sectionHeader #dealsMobileSearchContainer #dealsMobileSearchIcon > img {
    display: none;
}

/* Logo */
#sectionHeader .zapPlusLogo {
    width: 138px;
    height: 54px;
}

#sectionHeader .ZapDealsLogo > a img {
    width: 136px;
    height: 58px;
    transition: .2s;
    margin: 0 5px 0;
    vertical-align: middle;
}

    #sectionHeader .ZapDealsLogo > a img:hover {
        width: 144px;
        height: 61px;
        margin: 0;
    }

#sectionHeader .zaplink {
    flex-direction: column;
    color: #fff;
    font-family: Assistant;
    font-size: 12px;
    text-align: right;
}

    #sectionHeader .zaplink .zaplinkContainer {
        display: flex;
        /*flex-direction: column;*/
        margin: 0 auto;
        align-items: center;
        gap: 3px;
        margin-right: 15px;
    }

        #sectionHeader .zaplink .zaplinkContainer img {
            width: 70px;
            height: 20px;
            transition: .2s;
            /*object-fit: none;*/
        }

#sectionHeader .zaplinkContainer #toZapLogoText {
    font-size: 14px;
}

.HeaderContainer .Header a {
    display: flex;
    justify-content: center;
}

.HeaderContainer .Header .ZapLogo {
    display: flex;
    cursor: pointer;
    text-align: center;
}

    .HeaderContainer .Header .ZapLogo img {
        width: 136px;
        height: 58px;
    }

.HeaderContainer #menu-right-container .burger {
    display: none;
}

/* Search */
.HeaderContainer .Header .search {
    display: grid;
    grid-template-columns: minmax(280px, 550px) 138px 40px;
    /*grid-template-columns: minmax(280px, 550px) 50px;*/
    height: 46px;
    margin: 0 20px;
    max-width: 711px;
    text-align: right;
    background-color: #fff;
    border-radius: 6px;
}

    .HeaderContainer .Header .search form {
        width: 100%;
        display: flex;
        justify-content: space-between;
    }

    .HeaderContainer .Header .search .searchField {
        display: inline-block;
        float: left;
        width: 570px;
        height: 38px;
        margin-top: 2px;
        background-color: #fff;
        border: none;
        font: 17px arial;
        color: #7b7b7b;
        text-align: right;
        direction: rtl;
        padding-right: 13px;
        outline: none;
        border-top-right-radius: .6rem;
        border-bottom-right-radius: .6rem;
    }

    .HeaderContainer .Header .search .submitSearch {
        width: 28px;
        border-radius: 6px 0 0 6px;
        background-repeat: no-repeat;
        background-position: center;
        cursor: pointer;
        border: none;
        border-right: none;
        background-image: url(https://img.zap.co.il/imgs/search-icon-new.svg);
        background-color: #fff;
        justify-self: center;
        grid-column: 3;
    }

.HeaderContainer .Header .HeaderWithCart {
    display: grid;
    grid-template-columns: minmax(90px, 120px) minmax(30px, 50px) minmax(30px, 50px);
    /*grid-template-columns: minmax(36px, 80px) minmax(120px, 200px) minmax(102px, 120px) minmax(50px, 80px) minmax(50px, 100px);*/
    align-items: center;
    padding: 0 10px;
    justify-content: center;
}


.Header #loginAndCartContainer #desktop-login-area {
    display: grid;
    grid-template-columns: 24px auto;
    align-items: center;
    white-space: nowrap;
    margin-right: 25px;
}

    .Header #loginAndCartContainer #desktop-login-area .login-area-img {
        width: 24px;
        height: 24px;
        border-radius: 50%
    }

    .Header #loginAndCartContainer #desktop-login-area .loginUserContainer {
        color: #fff;
        font-size: 12px;
        text-align: right;
        padding-right: 6px;
        display: flex;
        flex-direction: column;
    }

        .Header #loginAndCartContainer #desktop-login-area .loginUserContainer .personal-area-href {
            text-align: right;
            font: bold 14px Assistant;
            color: #fff;
            text-decoration: underline;
            cursor: pointer;
            display: block;
        }

.shoppingCartContainer {
    border-right: 1px solid rgb(255 255 255 / 42%);
    height: 20px;
}


/* CSS for tablets */
@media (min-width: 590px) and (max-width: 820px) {
    .HeaderContainer .Header {
        grid-template-columns: 0 minmax(94px, 190px) minmax(280px, 460px) minmax(90px, 140px) 0 minmax(130px, 180px);
    }

    #sectionHeader .zaplink {
        margin-right: unset;
    }

    .HeaderContainer .Header .HeaderWithCart {
        grid-template-columns: minmax(82px, 120px) minmax(24px, 36px);
        gap: 4px;
    }

    #sectionHeader .ZapDealsLogo > a img {
        width: 100px;
        height: 43px;
    }

        #sectionHeader .ZapDealsLogo > a img:hover {
            width: 112px;
            height: 47px;
            margin: 0;
        }

    .HeaderContainer .Header .search {
        grid-template-columns: minmax(180px, 400px) 40px;
    }

    #sectionHeader .zaplink {
        margin: 0 auto;
        font-size: 11px;
    }

        #sectionHeader .zaplink .zaplinkContainer img {
            width: 82px;
            height: 18px;
        }
}

/* CSS for mobile screens */
@media (max-width: 590px) {

    header #breadcrumbsContainer .breadcrumbs {
        margin: 6px 0 0;
    }


    header #breadcrumbsContainer {
        display: flex;
        /*width: 90%;*/
    }

        header #breadcrumbsContainer .BreadCrumbcsScroller {
            /*width: 85%;*/
            line-height: 26px;
            overflow-x: scroll;
            scrollbar-width: none; /* For Firefox */
            -ms-overflow-style: none; /* For Internet Explorer and Edge */
        }

    .rightScroll {
        line-height: 26px;
    }

    /*header #breadcrumbsContainer .BreadCrumbcsScroller small {*/
        /*transform: translate(0px, -4px) rotate(45deg);*/
    /*}

    header #breadcrumbsContainer .BreadCrumbcsScroller > span {*/
        /*width: 100%;*/
    /*}*/

        /*header #breadcrumbsContainer .BreadCrumbcsScroller > span > span {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }*/

    .HeaderContainer .Header {
        grid-template-columns: minmax(37px, 1fr) minmax(100px, 1fr) minmax(137px, 1fr) minmax(45px, 100px) minmax(40px, 60px);
        /*grid-template-columns: minmax(75px,1fr) minmax(55px,1fr) minmax(148px, 1fr) minmax(11px,100px) minmax(40px, 60px);*/
        height: 52px;
    }

        .HeaderContainer .Header .search {
            background-color: unset;
            display: flex;
        }

            .HeaderContainer .Header .search .submitSearch {
                background-color: unset;
            }

        .HeaderContainer .Header ZapDealsLogo > a {
            justify-content: flex-start;
        }

    #sectionHeader #acSearch-Container {
        width: 100%;
        position: absolute;
        top: 50px;
        background: #fff;
        display: none;
        border-radius: unset;
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
    }

    #acSearch-Container #acSearch-dropdown-container {
        top: 42px;
    }

    #sectionHeader #acSearch-Container #acSearch-dropdown-container {
        width: 100%;
    }

    #sectionHeader .zapPlusLogo {
        width: 75px;
        height: 32px;
    }

    #sectionHeader .zaplink {
        margin: 0 auto;
        font-size: 10px;
    }

        #sectionHeader .zaplink .zaplinkContainer .zapPlusZapLogo {
            display: flex;
            padding: 0.316px 0.001px 0.321px 0.322px;
            justify-content: center;
            align-items: center;
        }
        
    #sectionHeader #loginAndCartContainer {
        display: block;
        padding: 0;
        width: 100%;
        /*border-right: 1px solid #fff;*/
    }

    #sectionHeader #dealsMobileSearchContainer {
        height: 100%;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        #sectionHeader #dealsMobileSearchContainer #dealsMobileSearchIcon {
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }

    .Header #loginAndCartContainer > #desktop-login-area {
        display: none;
    }

    /*    #shoppingCartContainer a {
        border-right: 1px solid #fff;
    }*/

    /*    #shoppingCartContainer a > img {
        border-right: 1px solid white;
        padding-right: 33px;
    }
    #shoppingCartContainer > a {
        border-right: 1px solid #fff;
    }*/

    /*#unitContainer > a {
        border-right: 1px solid #fff;
    }
*/
    #sectionHeader .ZapDealsLogo {
        width: 65%;
        display: flex;
        justify-content: center;
    }

        #sectionHeader .ZapDealsLogo > a {
            justify-content: center;
            margin-right: 15px;
        }

            #sectionHeader .ZapDealsLogo > a img {
                width: 74px;
                height: 32px;
                transition: .2s;
                margin: 0 2px 0;
                vertical-align: middle;
            }

                #sectionHeader .ZapDealsLogo > a img:hover {
                    width: 81px;
                    height: 36px;
                    margin: 0;
                }

    .HeaderContainer #menu-right-container {
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .HeaderContainer #menu-right-container .burger {
            cursor: pointer;
            width: 19px;
            height: 22px;
            display: inline-block;
            /*background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMThweCIgaGVpZ2h0PSIxMnB4IiB2aWV3Qm94PSIwIDAgMTggMTIiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogc2tldGNodG9vbCA1Mi41ICg2NzQ2OSkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+QkY3RTE0RjEtNUMxOC00MTRELTkxQ0QtNzIyRTA5NkZCNjQ0PC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBza2V0Y2h0b29sLjwvZGVzYz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxnIGlkPSJkZWFscy1tb2JpbGUtMS1jb3B5IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzQxLjAwMDAwMCwgLTE2LjAwMDAwMCkiIGZpbGw9IiNGRkZGRkYiPgogICAgICAgICAgICA8ZyBpZD0ibWVudSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzQxLjAwMDAwMCwgMTYuMDAwMDAwKSI+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMC42OTIzMDc2OTIsNyBMMCw3IEwwLDUgTDAuNjkyMzA3NjkyLDUgTDE3LjMwNzY5MjMsNSBMMTgsNSBMMTgsNyBMMTcuMzA3NjkyMyw3IEwwLjY5MjMwNzY5Miw3IFogTTAuNjkyMzA3NjkyLDEyIEwwLDEyIEwwLDEwIEwwLjY5MjMwNzY5MiwxMCBMMTcuMzA3NjkyMywxMCBMMTgsMTAgTDE4LDEyIEwxNy4zMDc2OTIzLDEyIEwwLjY5MjMwNzY5MiwxMiBaIE0wLjY5MjMwNzY5MiwyIEwwLDIgTDAsMCBMMC42OTIzMDc2OTIsMCBMMTcuMzA3NjkyMywwIEwxOCwwIEwxOCwyIEwxNy4zMDc2OTIzLDIgTDAuNjkyMzA3NjkyLDIgWiIgaWQ9IkNvbWJpbmVkLVNoYXBlIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);*/
        }

    /* Mobile Search */
    /*    #sectionHeader #dealsMobileSearchContainer {
        width: 100%;
        height: 24px;
        display: flex;
        justify-content: center;
        align-items: center;
    }*/

    /*        #sectionHeader #dealsMobileSearchContainer #dealsMobileSearchIcon {
            min-width: 50px;
            display: flex;
            justify-content: center;
        }*/

    #sectionHeader #dealsMobileSearchContainer #dealsMobileSearchIcon > img {
        display: block;
        width: 16px;
        height: 16px;
    }

    .HeaderContainer .Header .HeaderWithCart {
        grid-template-columns: minmax(36px, 80px) minmax(120px, 200px) minmax(102px, 120px) minmax(50px, 80px) minmax(50px, 100px);
    }
}


.Header #loginAndCartContainer .Header-Separator {
    border-left: 1px solid rgba(255,255,255,.5);
    height: 20px;
    margin-left: 50%;
    opacity: .8;
}
