/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


/* Global 
primary: #BE8162 (Dark Orange/Brown)
secondary: #00ABA8 (light Blue)
Primary font: #515351
light footer: #f7f0ed(redish light grey)
*/

:root {
    --secondary: #6CAF00;
    --primary: #7B7560;
    --dark: #363626;
    --light: #F4F1ED;

    /* You can also create and implement new tags as needed */
    --grey: #f7f0ed;
    --footer: #373728;

    /* Define Fonts */
    --secondary-font: 'Montserrat', sans-serif;
    --primary-font: 'Montserrat', sans-serif;

    /* Bootstrap Overrides
    You can override bootstrap application default colours at root, by using the !important flag
    This will change ALL implementations of the bootstrap colour tags
    You can also override bootstrap colours for individual elements, do this when you don't want the changes to apply globally. */

    --bs-black: var(--dark)!important;
    --bs-link-hover-color-rgb: var(--dark)!important;
    --bs-primary: var(--dark)!important;
    --bs-background-blue: var(--primary)!important;
    --bs-emphasis-color: var(--primary)!important;
    --bs-heading-color: var(--secondary)!important;
    --bs-medium-grey: var(--secondary)!important;
    --bs-highlight-rgb: var(--secondary)!important;
    --bs-highlight: var(--secondary)!important;
    --bs-secondary-rgb: var(--dark)!important;
    --bs-gray: var(--dark)!important;
  }


  @keyframes descend {
    from {
      opacity: 0;
      transform: translateY(-50px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .card {
    opacity: 0;
    animation: descend .9s ease-in-out forwards;
  }
  

  /* Universal Elements */
    a {
        color:var(--secondary);
        background: transparent;
    }
    a:hover {
        color:var(--dark);
        background: transparent;

    }

    body {
        font-family: var(--primary-font);    
        color: var(--dark);
    }

    h1,h2,h3,h4,h5 {
        font-family: var(--secondary-font);
    }

.modal-footer .btn {
    margin: 0 !important;
}

.btn {
    border-radius: 5px;
} 

/* add checkmar to cc storage selections*/
[id^="profile_id_-"][id$="_label"]:has(input:checked)::before  {
  content: "\2713\0020 ";
  color: var(--bs-highlight);
  margin-right: 0.5em;
}

.c-main__layout {
    background: linear-gradient(rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1)), url(../../XImages/base_images/zao_background.svg) repeat center center;
    background-size: 19%;
}


  /* End Universal Elements */


  /* Header */

  .navbar-main {
    height: 80px;
  }

  .c-dropdown-menu {
    padding: 0 15px!important;
  }

  .c-profile__group .c-dropdown-menu-card .c-dropdown-card .c-profile-links .c-dropdown-menu li .dropdown-item {
    border-bottom: 1px solid var(--dark)!important;
  }
  .c-btn__signin .btn, .c-btn__signup .btn {
    white-space: nowrap;
  }

    .logo-container > a > img {
        width: 50%;
        display: block;
    }

    .navbar-main {
        background: var(--light) !important;
        display: flex;
        justify-content: space-between;
    }

    .navbar-brand {
        display: none;
    }

    .nav-item__language {
        display:none!important;
    }


    .header-links {
        display: none;
    }

    .header-container {
        width: 100%;
        display: flex;
        justify-content: space-between
    }

    .nav.c-nav__delivery {
        background: var(--dark)!important;
        color: var(--light)!important;
    }

    .nav-item > .c-btn__sm  {
        color: var(--secondary);
    }
    
    .nav-item > img {
        filter: brightness(0) invert(1);
    }

    /* Desktop Header */
    @media only screen and (min-width:48.001rem){
 

    }
    /* Mobile Header */
    @media only screen and (max-width:48rem){
        .navbar-toggler-icon {
        }
        .c-nav__delivery .c-label__text {
            color: var(--light);
        }
        .c-header__main > nav > div {
            margin: auto;
            display: block!important;
        }
        .logo-container > a > img{
            margin: auto;
            width: 25%!important;
        }

        .navbar-cart__wrapper { 
            display: flex;
            justify-content: space-between;
            position: absolute;
            top: 7px;
            width: 100%;
        }
        header.c-header__main nav.navbar{
            padding: 0.25rem 1rem .75rem !important;
        }
 

    }

  /* End Header */

  /* Footer */

  .left-footer-links, .right-footer-links {
    display: flex;
    flex-direction: column;
  }

  .bottom-footer {
    width:100%;
    padding: 5px 20px;
    border-top: 2px solid var(--light);
  }

  .bottom-footer-links {
    display: flex;
    justify-content: center;
    gap: 3rem;
  }

  footer h3 {
    color: var(--light) ;
    font-weight: 700;
    line-height: 20px;
  }

    footer {
        padding-top: 5px;
        background: var(--footer);
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;

    }

    footer a {
        text-decoration: none;
    }

    .middle-footer-logo > img {
        width: 60%;
        padding: 2rem;
    }

    .middle-footer-logo {
        display: flex;
        justify-content: center;
    }
    #monkeyCopyRight > a {
        color: var(--light);
    }
    .copy_text {
        color: var(--light);
        display: flex;
        justify-content: center;
    }

    /* Desktop Footer */
    @media only screen and (min-width:48.001rem){
 

    }


    /* Mobile Footer */

    @media only screen and (max-width:48rem){
        .top-footer, .top-footer-links, .bottom-footer, .bottom-footer-links {
            flex-direction: column;
            width: 100%;
            align-items: center;
            text-align: center;
        
        }
        .middle-footer-logo > img {
            width: 25%;
        }
        .bottom-footer {
            padding: 10px 0;
        }
    }


    /* End Footer */ 


  /* Main Content */

.btn-quick-add img {
    background: transparent !important;
    filter: brightness(0) invert(1);
}
  .btn-outline-primary {
    background-color: var(--secondary);
    color: var(--light);
    border: 1px solid var(--dark);
}


  .c-checkout__details {
    border: 1px solid var(--dark);
    padding: 20px;
    border-radius: 0.5rem;
    background: white;
  }


  #v-loyalty-rewards, #v-saved-locations {
    margin-top: 3.375rem;
  }


  #v-loyalty-rewards > div:nth-child(1), #v-saved-locations > div:nth-child(2){
    display: none;
  }

  #v-pills-tab > .nav-item > .nav-link {
    border-bottom: 1px solid var(--dark);
  }

  .c-sidebar__account {
    margin: 3.375rem 3rem;
    border: 1px solid var(--dark);
    padding: 20px;
    background: var(--light);
    border-radius: 0.5rem;

  }

  #accountInformationForm {
    border: 1px solid var(--dark);
    padding: 20px;
    background: var(--light);
    border-radius: 0.5rem;
  }

  .nav-tabs__categories {
    padding: 10px;
    border: 1px solid var(--dark) !important;
    border-radius: 0.5rem;
  }

  #btnCheckoutFixed {
    background: var(--light);
    padding: 1rem 3rem 1rem 2.1rem;
  }
  .c-product-item__details .c-product__block {
    padding: 24px;
    border: 1px solid black;
    background: white;
    border-radius: 0.5rem;
  }

  .accordion-item:last-of-type .accordion-button.collapsed {
    border-radius: 0;
  }

  .btn-primary {
    --bs-btn-color: var(--light)!important;
    --bs-btn-bg: var(--secondary)!important;
    --bs-btn-border-color: var(--grey)!important;
    --bs-btn-hover-color: var(--light)!important;
    --bs-btn-hover-bg: var(--secondary)!important;
    --bs-btn-hover-border-color: none;
    --bs-btn-focus-shadow-rgb: 95, 95, 95;
    --bs-btn-active-color: var(--light)!important;
    --bs-btn-active-bg: var(--dark)!important;
    --bs-btn-active-border-color: var(--dark)!important;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(24, 24, 24, 0.125);
    --bs-btn-disabled-color: var(--light)!important;
    --bs-btn-disabled-bg: var(--grey)!important;
    --bs-btn-disabled-border-color: var(--grey)!important;
}

.btn.btn-primary:hover {
    background-color: var(--secondary)!important;
}

.c-card__product .card img, .c-product-item__details .c-product__details .c-product__img {
    background-color: var(--light);
}

.c-group-filter .c-btn-filter:hover, .c-group-filter .c-btn-filter:active, .c-group-filter .c-btn-filter.show, .c-group-filter .c-btn-filter:focus-visible, .c-group-filter .icon__close:focus-visible {
    border: 1px solid var(--dark)!important;
}

#sidebarCart .btn-add-to-cart.c-collapse-arrow:hover, #sidebarCart .btn-add-to-cart.c-collapse-arrow:active, #sidebarCart .btn-add-to-cart.c-collapse-arrow {
    background-color: var(--primary)!important;
    border: 1px solid var(--dark)!important;
}

.dropdown-item:hover, .dropdown-item:focus {
    background-color: var(--primary);
}

.c-collapse-arrow:hover {
    background-color: var(--primary)!important;
}

.c-product__tabs .nav-tabs .nav-item .nav-link.active::before {
    background-color: var(--primary);
    width: calc(100% + 0.5rem);
    left: -0.25rem;
}

.c-product__tabs .nav-tabs .nav-item .nav-link:hover, .c-product__tabs .nav-tabs .nav-item .nav-link.active {
    color: var(--primary) !important;
}


.c-product__tabs .nav-tabs .nav-item .nav-link.active::before {
    background-color: var(--primary);
    width: calc(100% + 0.5rem);
    left: -0.25rem;
}

.nav-link.active {
    font-weight: 700;
}

.c-product__tabs .catering-menu__main_slider::after {
  content: none !important;
  display: none !important;
}

.btn.btn-outline-primary:hover, .btn.btn-outline-primary:active {
    color: var(--light)!important;
    border: 1px solid var(--dark)!important;
    background: var(--dark)!important;
}

.c-btn__signin > a, .c-btn__signin > a:hover {
    background: var(--primary)!important;
    color: var(--light)!important;
    border: 0;
    border-radius: 5px;
}
.c-btn__signin:hover, .c-btn__signup:hover, #btnCheckout:hover {
    transform: scale(1.03);
}

.c-btn__signup a.btn {
    background: var(--primary) !important;
    border-radius: 5px 5px 5px 5px;
}

.c-btn__signup a.btn:hover {
    background: var(--dark) !important;
    color: var(--light);
}

#heading_preorder, .c-content__heading {
    color: var(--dark)
}
.product-section h4.moo-product-tabs {
    color: var(--dark);
}


.c-profile__group .c-profile__dropdown span {
    color: var(--secondary)!important;
}

.c-sidebar__cart.open, .c-sidebar__cart.close {
    transition: all 0.3s ease-in-out;
}
.c-product__tags .badge {
    background-color: var(--primary)!important;
}
.c-product__sub-categries.row {
    padding: 10px;
}

.c-card__product .card:hover {
    border-color: var(--dark);
    transform: scale(1.02)!important;
    filter: drop-shadow(2px 2px 2px var(--primary));
}

.c-card__product .card {
    border: 2px solid var(--dark);
    transition: transform 0.3s ease;
}

.item-header {
    text-transform: uppercase;
    font-family: var(--secondary-font);
}

.dropdown-menu, .overflow-auto {
    scrollbar-color: var(--light) var(--secondary);
    scrollbar-width: thin;
}


    /* Desktop Main Content */
    @media only screen and (min-width:48.001rem){
        .c-card__product .card {
            scale: 0.9;
        }

    }
    /* Mobile Main Content*/
    @media only screen and (max-width:48rem){
 

    }

  /* End Main Content */

/* Things that should not be local, these really need to be main app style rules */

@media (max-width: 48em){
    .c-sidebar__block {
        height: 0;
      }
}

.credit-card-multi-image {
    max-width: 250px;
}

.c-product-item__details .c-product__details .c-product__img.default_product_image {
    object-fit: cover;
}

#activateEditButton {
    background-color: var(--light);
}

.c-dropdown-menu li:has(a[href="/online/loyaltyReward"]), 
.c-dropdown-menu li:has(a[href="/online/dev405/loyaltyReward"]), 
.c-sidebar__account li:has(a[href="/online/loyaltyReward"]),
.c-sidebar__account li:has(a[href="/online/dev405/loyaltyReward"])
  {
  display: none;
}

.c-profile__dropdown span {
    font-size: 35px;
    margin-top: -10px;
}


/* Card Buttons */
[id^="profile_id_-"][id$="_label"]:has(input:checked)::before  {
  content: "\2713\0020 ";
  color: var(--bs-highlight);
  margin-right: 0.5em;
}
/* Hide CC choice when only one
.c-payment-method__item .c-payment-method__item div.c-form-choice:has(input:nth-of-type(1):last-of-type)
{
    display: none;
} */

#payment_method_2 #cc_profiles li.c-payment-method__item--profile-MOO:has(.c-form-choice:nth-of-type(1):last-of-type)
{
    display: none;
} 

/* Card Buttons */
[id^="profile_id_-"][id$="_label"]:has(input:checked)::before  {
  content: "\2713\0020 ";
  color: var(--bs-highlight);
  margin-right: 0.5em;
}
/* Hide CC choice when only one
.c-payment-method__item .c-payment-method__item div.c-form-choice:has(input:nth-of-type(1):last-of-type)
{
    display: none;
} */

#payment_method_2 #cc_profiles li.c-payment-method__item--profile-MOO:has(.c-form-choice:nth-of-type(1):last-of-type)
{
    display: none;
} 

/* Add to cart fix */
.c-main__content.mainContentActive {
    padding-bottom: 0px !important;
    margin-bottom: 0 !important;
}
.c-quantity-cart__fixed.fixed-bottom {
  position: sticky;
  bottom: 0; 
  left: auto;
  right: auto;
  z-index: 1020;
}
.c-quantity-cart__fixed {
  width: calc(100% - 400px);
  margin-inline: auto;  /* center the bar within its container */
  transform: translateX(0);
  display: none;
  opacity: 0;
  transition: opacity 1s, visibility 1s ease-in-out;
}
.c-quantity-cart__fixed.show {
  display: block;
  opacity: 1;
}
 .c-quantity-cart__fixed { 
    width: 100%;
}

/* Hide dietary icons on production items */
.c-selection__items .c-items__group .c-dietary__tags {
	display: none !important;
}

/* END Hide dietary icons on production items */

/* Checkout Button Width */
.c-checkout__fixed {
    max-width: 399px !important;
}
/* END Checkout Button Width */