/* ========== LAYOUT & STRUCTURE ========== */
.navbar {
    max-width          : 1200px;
    width              : 100%;
    margin             : 0 auto;
    height             : 40px;
    line-height        : 30px;
    position           : fixed; /* Stick at the top */
    z-index            : 1060;  /* Above body content */
    background-size    : cover;
    background-position: center;
    background-repeat  : no-repeat;
    background-image   : url("/static/images/items/gold3.png");
    box-shadow         : 0px 4px 6px rgba(0, 0, 0, 0.3);
}

.navbar-collapse {
    width          : 100%;
    display        : flex;
    flex-wrap      : wrap;
    justify-content: space-between;
    align-items    : center;
}

.navbar-nav {
    flex-direction: row;
    display       : flex;
    align-items   : center;
}

/* ========== BRAND ========== */
.navbar-brand {
    padding: 0 5px;
    cursor          : pointer;
    font-family     : "PhotinaMTStd-SemiBold", "Sans-serif";
    color           : #000;
    background-color: transparent;
    border-radius   : 5px;
    border          : 0.5px solid #000; /* inherited bootstrap style makes  brand border thicker than links */
}

/* ========== SEARCH ========== */
.search-form {
    margin-right : 20px;
    outline      : none;
    display      : flex;
    align-items  : center;
    flex-wrap    : nowrap; /* Prevent wrapping to a new row */
    border-radius: 5px;
}

.search-input {
    font-family              : "Photina MT", "Sans-serif";
    font-size                : 14px;
    line-height              : 26px; /* Same height as brand */
    border-top               : 1px solid #000;
    border-bottom            : 1px solid #000;
    border-left              : 1px solid #000;
    border-right             : none;
    outline                  : none;
    padding                  : 2px 5px;
    width                    : 250px;
    border-top-left-radius   : 5px;
    border-bottom-left-radius: 5px;
}

.btn-search {
    padding                   : 5px; /* Btn same height as search input */
    display                   : inline-block;
    outline                   : none;
    border-top-right-radius   : 5px;
    border-bottom-right-radius: 5px;
    border                    : 1px solid #000;
    background-color          : transparent;
}

.icon-search {
    width              : 25px;
    height             : 20px;
    display            : block;
    background-size    : contain;
    background-repeat  : no-repeat;
    background-position: center center;
    background-image   : url('../images/icons/e6.png');
}

/* ========== TOGGLER ========== */
.navbar-toggler {
    padding    : 2px;
    border     : none;
}

/* Remove default black box-shadow when clicking */
.navbar-toggler:focus {
    box-shadow: none;
    outline   : none;
}

.navbar-toggler-icon {
    display        : flex;
    flex-direction : column;
    justify-content: space-between;
    width          : 30px;
    height         : 20px;
    cursor         : pointer;
}

.navbar-toggler-icon .bar {
    height          : 5px;
    width           : 100%;
    background-color: #000;

    transition      : all 0.3s ease-in-out;
    margin          : 3px 0;
    display         : block;
}

/* Toggler collapsed animation */
.navbar-toggler.collapsed .bar-1 {
    transform: rotate(45deg) translate(5px, 5px);
}

.navbar-toggler.collapsed .bar-2 {
    opacity: 0;
}

.navbar-toggler.collapsed .bar-3 {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ========== NAV LINKS ========== */
.nav-link {
    padding         : 0px 10px;
    cursor          : pointer;
    font-family     : "PhotinaMTStd-SemiBold", "Sans-serif";
    color           : #000;
    background-color: transparent;
}

/* Categories & Account dropdown links */
#CategoriesDropdown,
#AccountDropdown {
    border-radius: 5px 0 0 5px;
    border-right : none;
    border-top   : 1px solid #000;
    border-left  : 1px solid #000;
    border-bottom: 1px solid #000;
}

/* All Products link and Cart container */
#AllProducts,
.cart-container {
    border-radius: 0 5px 5px 0;
    border-top   : 1px solid #000;
    border-bottom: 1px solid #000;
    border-right : 1px solid #000;
}

.cart-container {
    line-height     : 30px;
    padding         : 5px;
    display         : flex;
    align-items     : center;
    position        : relative;
    background-color: transparent;

}

.icon-cart {
    width            : 25px;
    height           : 20px;
    display          : flex;
    align-items      : center;
    position         : relative;
    vertical-align   : middle;
    background-size  : contain;
    background-repeat: no-repeat;
    background-image : url("/static/images/icons/cart-5.png");
}

.cart-container .notify {
    position        : absolute;
    top             : -10px;
    right           : 6px;
    border-radius   : 50%;
    font-family     : "ELEPHNT";
    color           : #ffffffa5;
    background-color: transparent;
    transform       : scale(0.8); /* Base state */
    transition      : all 0.2s ease;
}

/* ========== DROPDOWNS ========== */
/* Better performance on touch screens */
.nav-item.dropdown.show .dropdown-menu {
    display: block;
}

.dropdown-menu {
    font-family    : "Photina MT", "Sans-serif";
    width          : 100px; /* fixed width */
    padding        : 2px;
    top            : 100%;
    z-index        : 1060;
    position       : absolute !important;
    box-sizing     : border-box;
    border         : 1px solid #000;
    display        : none;
    overflow       : hidden;
}

.dropdown-item {
    font-size       : 12px;
    line-height     : 12px;
    margin          : 5px;
    color           : #000;
    background-color: transparent;
    display         : block;
    transition      : transform 0.2s ease;
}

.dropdown-item:hover {
    transform       : scale(1.1);
    background-color: transparent;
    color           : #000;
}

/* ========== ACTIVE & HOVER STATES ========== */
.navbar-brand:hover,
.nav-link:hover,
.nav-link:focus,
.nav-link.active {
    color           : #000;
    box-shadow      : inset 1px 1px 1px rgba(0, 0, 0, 0.78);
    background-image: radial-gradient(#00000015,#00000020);
}

.search-input:hover,
.search-input:focus,
.search-input.active {
    outline: none;
}

.btn-search:hover .icon-search {
    transition      : all 0.1s ease;
    background-image: url('../images/icons/e5.png');
}

.btn-search:hover,
.cart-container:hover {
    font-family     : "ELEPHNT", "Sans-serif";
    color           : #000;
    box-shadow      : inset 1px 1px 1px rgba(0, 0, 0, 0.78);
    background-image: radial-gradient(#00000015,#00000020);
}

.cart-container:hover .notify {
    top      : -5px;
    right    : 7px;
    color    : #FFF;
    transform: scale(1.4);
}

/* ========== RESPONSIVE SETTINGS ========== */
@media (max-width: 992px) {
    /* Navbar background follews to second row when toggler */
    .navbar {
        height: auto;
    }

    /* Height of navbar second row */
    .navbar-collapse.show {
        height: 36px;
    }

    /* Pushes links down so they dont touch items in the row above */
    .nav-link,
    .cart-container {
        margin-top: 8px;
    }
    
    /* Adds side padding to nav-links when in second row */
    .navbar-nav .nav-link {
        padding: 0 8px;
    }

    /* Dropdown over other templates */
    .dropdown-menu {
        position : absolute !important;
        min-width: auto !important;
    }
}

@media (max-width: 768px) {
    /* Styles below ensure toggler stays in top row by > font & margin */
    .navbar-brand {
        margin   : 0;
        font-size: 14px;
    }

    .nav-link {
        font-size: 14px;
    }

    .dropdown-item {
        font-size: 12px;
    }

    .dropdown-item:hover {
        font-size: 13px;
    }
    
    .search-form {
       justify-content: center;
       padding        : 0px;
       margin         : 0px;
    }

    .search-input {
        width: 175px;
    }
}