//
// Small/X-Small styles
// --------------------------------------------------

// Body Modifiers
body {
    &.mobile-menu-active {
        background: $bg-white;

        .mobile-my-account {
            //display: none !important;

            &.touch-active {
                display: block !important;
            }
        }

        .page-wrap {
            > * {
                display: none !important;
            }

            > #header
            ,> #mobile-nav-wrapper {
                display: block !important;
            }
        }

        .mobile-menu-only {
            display: block;
        }

        .mobile-menu-hide {
            display: none !important;
        }
    }
}

.mobile-menu-only {
    display: none;
}

@media (min-width: $screen-md) {
    .mobile-nav-arrow span {
        &:before {
            display: none;
        }
    }
}

.nav-header-wrapper {
    visibility: hidden;
    position: relative;
    z-index: 2;
    overflow: hidden;
}

// Mobile Menu Submenu titles
.nav-header {
    position: relative;
    vertical-align: middle;

    .page-title {
        text-align: center;
        margin: 0px;
        background: $mobile-page-title-bg;
        color: $color-white;
        padding: 5px 0 !important;

        h1 {
            padding: 15px 10px;
            line-height: normal;

            span {
                font-size: 24px;
                max-width: 480px;
                display: inline-block;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            @media (max-width: 520px) {
                span {
                    max-width: 280px;
                }
            }
        }

        &:after  {
            display: block;
        }

        // Close icon
        > a.glyphicon {
            color: $color-white;
            position: absolute;
            top: 0px;
            right: -10px;
            display: block;
            height: 50px;
            width: 65px;
            line-height: 40px;
            text-decoration: none;
            z-index: 5;
        }
    }

    [class^="level-"] {
        //display:none;
        position: relative;
        width: 100%;
    }

    .level-0 {
        [class^="level-"] {
            position: absolute;
            top: 0;
            left: 0;
        }
    }
}

.mobile-nav-wrapper {
    display: none;
    overflow: hidden;

    .left-arrow
    ,.right-arrow {
        display: none;
    }

    a {
        text-decoration: none;
    }

    .fp-your-account
    ,.fp-separator
    ,.fp-logout-link
    ,.fp-welcome-angle-down
    ,.menu-arrows {
        display: none !important;
    }

    #mobile-menu-footer {
        position: relative;

        > ul {
            margin: 0px;
            padding: 0px;

            li {
                list-style-type: none;
            }
        }
    }

    // Top section of Mobile menu
    .container-account-menu {
        position: relative;
        top: -54px;
        margin-bottom: -54px;
        padding: 0px;
    }

    .header-login {
        padding: 0px;
        a {
            line-height: normal;
        }
        .header-name {
            display: block;
        }
        .separator {
            display: none;
        }
    }

    .account-menu-wrapper {
        position: relative;
        z-index: 1;

        .fp-welcome {
            padding-bottom: 0px;
        }

        .account-menu
        ,#mobile-selected-store
        ,#reorder-indicator-mobile {
            padding: 0px;
            padding: $padding-vert;
        }

        .logout-link {
            display: none;
        }

        .header-name {
            a {
                color: $link-color-secondary;
            }
        }

        .account-menu {
            background: $bg-white;
            //height: 70px;
            //padding-top: 30px;

            .user-session-indicator {
                .fp-welcome {
                    line-height: 1;
                }
            }
        }

        #mobile-selected-store {
            background: $mobile-select-store-background-color;

            a {
                color: $mobile-select-store-link-color;
            }
        }

        #reorder-indicator-mobile {
            padding: 0;

            a {
                padding: $padding-vert $padding-vert;
                display: block;
                font-weight: $font-bold;
            }

            .fp-icon {
                position: absolute;
                right: 5px;
            }
        }

        .fp-not-logged-in {
            color: $font-white;
        }

        .fp-icon-map-marker {
            margin-right: 5px;
        }
    }

    // Bottom section of Mobile menu
    #mobile-menu-footer {
        //position: absolute;
        width: 100%;
        border-top: #{$border-style-gray-thin};
        margin-top:  0;
        padding-top: 0;

        .header-name
        ,.header-not-logged-in {
            display: none;
        }

        a.logout-link {
            color: $link-base-color;

            &:hover {
                color: $font-white;
            }
        }

        .header-welcome
        ,.mobile-store-locator {
            display: none;
        }
    }

    // Social links at the bottom section of Mobile menu
    .social-list {
        margin-left: $margin-horz;

        .icon-wrap {
            display: inline-block;
            width: 40px;
            height: 40px;
            @include border-radius(20px);
            text-align: center;
            line-height: 40px;
        }

        .icon-social {
            color: $font-white;
            font-size: 22px;
        }
    }

    // Superfish Overrides start
    ul {
        position: relative;
    }

    li {
        top: 0px;
        padding: 0;
        vertical-align: middle;
    }

    // To hide items when window expands
    .current-menu-parent {
        > .glyphicon-remove
        ,> li > a {
            visibility:hidden;
        }
    }

    .col-nav {
        padding-top: 0;
    }

    // Link Styles
    .menu-footer-menu-mobile-container
    ,.sf-menu
    ,ul.mobile-logout {
        width: 100%;
        a {
            @include transition-duration(0s);
            //padding: #{$padding-vert-sm + 5} $padding-horz;
            color: #{$font-color-base};
            font-size: 17px;
            line-height: 30px;
            display: block;
        }

        a:hover
        ,.touch-active > a
        ,> li > a:hover {
            background-color: $bg-mobile-menu-hover;
            color: #{$font-white};
            text-decoration: none;
        }

        li.menu-item-has-children > a {
            &:hover {
                background-color: $bg-mobile-menu-hover;
                color: #{$font-white};
            }
        }

    }

    #menu-footer-menu-mobile {
        > li {
            > a {
                padding: #{$padding-vert-sm + 5} $padding-horz !important;
            }
        }
    }

    .sf-menu
    ,#menu-footer-menu-mobile {
        background: transparent;
        width: 100%;

        li {
            position: relative;
            border-bottom: 1px solid $bg-gray;

            h2 {
                font-size: $font-size-base;
                line-height: 30px;
                text-transform: capitalize;
            }

            &:last-child {
                border-bottom: 0px;
            }
        }

        ul {
            position: absolute;
            display: block;
            left: 0;
            z-index: 99;

            li {
                &:before {
                    content:'';
                }
            }
        }

        ul ul {
            top: 0;
            left: 100%;
        }

        .menu-splash-image {
            display: none !important; /* no need for mobile */
        }

        li.menu-item-has-children > a {
            > span[class^="fp-icon"] {
                &:before {
                    display: none !important;
                }
            }

            &:before {
                padding: 0px;
                position: absolute;
                top: 25px;
                right: 20px;
                font-size: #{$font-size-base - 4};
                font-weight: $font-light;
            }

            &:hover {
                &:before {
                    color: $color-white;
                }
            }
        }

        li.menu-item-has-children > a > span
        ,.sub-menu li.menu-item-has-children > a > span
        ,.sub-menu li.menu-item-has-children > a > span
        ,.sub-menu li.menu-item-has-children > a:hover > span
        ,li.menu-item-has-children > a:hover > span
        ,.sub-menu li.menu-item-has-children > a:hover > span {
            background-image: none;
        }


        li
        ,.sub-menu li {
            display: inherit;

            a > span:not(.fp-icon-star){
                display:inline-block;
                padding:0px;
                min-width:75%;
            }
        }

        li {
            a > span {
                padding: #{$padding-vert-sm + 5} $padding-horz !important;
            }
        }

        li.menu-item-has-children {
            a > span {
                &:not(.fp-icon){
                    max-width: 90%;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                    display: block;
                }
            }
        }

        .sub-menu {
            z-index:2;
            position:absolute;

            ul {
                vertical-align:middle;
                list-style: none outside none;
                margin:0;
                height:auto;
                float:none;
            }

            ul li{
                padding:0;
                margin:0;
                display:block;
                height:auto;
                float:none;
                position:static !important;
            }

            a {
                display:block;
                position:relative;
                z-index:1;
            }

            .sub-menu-4
            ,.sub-menu-5
            ,.sub-menu-6
            ,.sub-menu-7
            ,.sub-menu-8
            ,.sub-menu-9 {
               margin-top: 0px !important;
            }

            @if($menu-menu-type == 'regular'){
                .sub-menu-3 {
                   margin-top: 0px !important;
                }
            }
        }

        li .sub-menu {
            width:100%;
            @include box-shadow(none);
            border:0;
            padding-top:0 !important;
            padding-bottom:0 !important;
            margin-top:0;
            top:0 !important;
            display:none;
            left:0;
        }

        li.touch-active > .sub-menu
        ,li.animating > .sub-menu{
            display:block !important;
            visibility: visible !important;
        }

        li.show > .sub-menu {
            display:block !important;
        }
    }

    #menu-footer-menu-mobile {
        ul.second-menu {
            margin: 0px;
            padding: 0px;

            span[class^="fp-icon"] {
                color: $color-favorite;
            }
        }

        li {
            margin-bottom: 0px;
            a {
                span {
                    max-width: 100% !important;
                }
            }
        }

    }
}

#reorder-indicator-mobile {
    border-bottom: 1px solid $bg-gray;
}

.mobile-logout {
    display: none;

    a {
        background: $mobile-sign-out-bg;
        text-align: center;
        @include border-radius($border-radius);
        color: $color-white !important;
        margin: 10px;
        font-weight: $font-bold;
        padding: $padding-vert-sm 0;

        &:hover {
            background: $bg-primary-dark !important;
        }
    }
}

.fp-is-logged-in {
    .mobile-logout {
        @include clearfix();
        display: block;
    }

    .mobile-nav-wrapper {
        .fp-separator {
            display: inline-block !important;
        }

        .account-menu-wrapper .account-menu {
            background: $mobile-login-background-color;

            span
            ,a {
                color: $font-white;
            }
        }

        .fp-my-account-right-angle {
            font-size: 15px;
        }
    }
}

#mobile-menu-footer {
    ul.menu {
        li {
            display: block;
            width: 100%;
            text-align: left;
            margin: 0 auto;
            border-bottom: 1px solid #cccccc !important;
        }
    }
}
@media (max-width: 991px) {
/*DETAIL MOBILE MENU*/
.sf-menu.main-menu>li.current-menu-item>a, .sf-menu.main-menu>li.current-page-parent>a, .sf-menu.main-menu>li.current-page-ancestor>a {
        color: #414042 !important;
        font-weight: bold;
        }
footer .footer-menu-col, .menu-footer-menu-col-2-container li {
        display: block;
        text-align: center;
        }
ul.social-links {
        display: flex; /*make us of Flexbox*/
        align-items: center; /*does vertically center the desired content*/
        justify-content: center; /*horizontally centers single line items*/
        text-align: center; /*optional, but helps horizontally center text that breaks into multiple lines*/
        }
body.mobile-menu-active .page-wrap>#header, body.mobile-menu-active .page-wrap>#mobile-nav-wrapper {
        display: block!important;
        }
body.mobile-menu-active .page-wrap > #header{
        padding-top: 0px;
        }
body.mobile-menu-active .page-wrap > #mobile-nav-wrapper{
        padding-top:70px;
        }
.mobile-nav-wrapper .account-menu-wrapper #mobile-selected-store {
        background: #f3f3f3;}
        
footer .footer-logo {
        width: 100%;
        display: block;
        align-items: center;
        padding: 0 15px 15px 15px;
        }
.fp-page-title h1.fp-page-title {
        padding: 10px;
        }
.fp-page-title .fp-item-detail {
        padding: 10px 10px 20px 10px;
        }
    footer .footer-menu-col li {
    text-align: center;
    }

    footer .footer-content {
    padding-bottom: 50px;
        text-align: center !important;
    }

    .mobile-2-col.panel-row-style > .panel-grid-cell {
    width: 50% !important;
    }
}