/* Fonts */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,900;1,600;1,800&family=Oswald:wght@400;500;600&display=swap');

@font-face {
    font-family: 'mrdodo';
    src: url('../../XImages/fonts/mrdodo-regularrounded.otf') format('opentype');
    font-style: normal;
}

@font-face {
    font-family: 'Jakarta';
    src: url('../../XImages/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
    font-style: normal;
}

  
  /* Global 
  Primary Colour: Substitute #00b373, grab with var(--primary)
  Secondary Colour: Substitute #ff585d, grab with var(--secondary)
  Dark Colour: Substitute #1D3C34, grab with var(--dark)
  background Colour: Substitute #fff, grab with var(--light)
  
  */
  
  :root {
      --primary: #d9272c;
      --secondary: #0d1036;
      --redvelvet: #5E0000;
      --clementine: #F48122;
      --dark: #0d1036;
      --light: #EDE5DD;
  
      /* You can also create and implement new tags as needed */
      --grey: #434343;
  
      /* Define Fonts */
      --primary-font: 'mrdodo', sans-serif;
      --secondary-font: "Jakarta", 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(--secondary)!important;
      --bs-emphasis-color: var(--primary)!important;
      --bs-heading-color: var(--secondary)!important;
      --bs-medium-grey: var(--primary)!important;
      --bs-highlight-rgb: var(--primary)!important;
      --bs-highlight: var(--primary)!important;
      --bs-secondary-rgb: var(--dark)!important;
      --bs-nav-tabs-link-hover-border-color: var(--primary);
    }
  
  
    @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 */

    .bg-white {
        background-color: var(--light)!important;
    }

    h4, h5 {
        font-family: var(--secondary-font)!important;
        text-transform: uppercase;
        font-weight: 600;
    }
    h1, h2, h3, h4, h5, h6 {
        text-transform: uppercase;
        font-weight: 600!important;
    }


      a {
          color:var(--primary);
          background: transparent;
      }
      a:hover {
          color:var(--dark);
          background: transparent;
  
      }
  
      body {
          font-family: var(--secondary-font);    
          color: var(--dark);
      }
  
      h1,h2,h3,h4,h5 {
          font-family: var(--primary-font);
      }
  

  
    /* End Universal Elements */
  
  
    /* Header */
    .btn {
    border-radius: 99px;
    }
  
    .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: 25%;
          display: block;
      }
  
      .navbar-main {
          background: var(--light)!important;
          background-image: url(../../XImages/base_images/small_bread_bg.png) !important;
          background-size: 40px !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(--clementine);
      }
      
      .nav-item > img {
          filter: grayscale(1) contrast(7);
      }
  
      /* Desktop Header */
      @media only screen and (min-width:48.001rem){
   
  
      }
      /* Mobile Header */
      @media only screen and (max-width:48rem){
  
          .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: 50%!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;
          }

          .header-container {
            justify-content: center;
          }
   
  
      }
  
    /* End Header */
  
    /* Footer */
  
    .top-footer {
      display: flex;
      justify-content: center;
      padding-top: 20px;
    }
  
    .left-footer-links, .right-footer-links {
      display: flex;
      flex-direction: column;
    }
    .top-footer-links {
      display: flex;
      width: 50%;
      justify-content: space-evenly;
    }
  
    .bottom-footer {
      width:100%;
      padding: 20px 20px 5px 20px;
    }
  
    .bottom-footer-links {
      display: flex;
      width:100%;
      justify-content: center;
      align-items: center;
    }



    .legal-links {
        display: flex;
        width: 13%;
        justify-content: space-evenly;
    }

    .legal-links:hover {
        color: var(--primary);
    }
  
    .bottom-footer-links > a, .left-footer-links > a, .right-footer-links > a, footer h3 {
      color: var(--light);
    }
  

      footer {
          background: var(--dark);
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
  
      }
  
      footer a {
          text-decoration: none;
      }
  
  
      .middle-footer-logo {
          display: flex;
          justify-content: center;
      }
      .middle-footer-logo > img {
          width: 60%;
      }
      #monkeyCopyRight > a {
          color: var(--light);
      }
      .copy_text {
          color: var(--light);
          text-align: center;
      }
  
      /* Desktop Footer */
      @media only screen and (min-width:48.001rem){
        .bottom-footer-links > a:not(:last-child)::after {
            content: ' | '
          }
  
      }
  
  
      /* 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;
          
          }
          .legal-links {
            flex-direction: column;
            width: 100%;
            align-items: center;
          }
          .middle-footer-logo > img {
              width: 25%;
          }
          .bottom-footer {
              padding: 10px 0;
          }

      }
  
  
      /* End Footer */ 
  
  
    /* Main Content */

#carousel.catering-menu__slider.position-sticky {
    top: 112px;
    background: white !important;
    border-radius: 0.5rem !important;
    text-transform: uppercase;
}

.c-product__tabs .nav-tabs .slick-next:before, .c-product__tabs .catering-menu__slider .slick-next:before {
    box-shadow: -14px 0 15px 0px rgb(255 255 255 / 90%);
}

.c-product__tabs .nav-tabs .slick-prev:before, .c-product__tabs .catering-menu__slider .slick-prev:before {
    box-shadow: 14px 0 15px 0px rgb(255 255 255 / 90%);
}

.c-product__tabs .nav-tabs .nav-item .nav-link.active::before {
    background-color: var(--clementine) !important;
    width: calc(100% + 0.5rem) !important;
    left: -0.25rem !important;
}
  
    .card-product__price .btn-quick-add img {
      filter: invert(1) contrast(6);
      background-color: transparent!important;
      
  }
  
  .card-product__price .btn-quick-add:hover img {
    filter: invert(0) contrast(6);
    background-color: transparent!important;
    
  }
  
    .btn-outline-primary {
      background-color: var(--primary);
      color: var(--light);
      border: 1px solid var(--dark);
  }
  
  
    .c-checkout__details {
      border: 1px solid var(--dark);
      padding: 20px;
      background: white;
      border-radius: 0.5rem;
    }
  
  
    #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;
    }
  
    .c-sidebar__account {
      margin: 3.375rem 3rem;
      border: 1px solid var(--dark);
      padding: 20px;
      background: white;
      border-radius: 0.5rem;
    }
    .c-sidebar__account li:hover {
        background-color: var(--clementine);
    }
  
    #accountInformationForm {
      border: 1px solid var(--dark);
      padding: 20px;
      background: white;
      border-radius: 0.5rem;
    }
    .account-info__filled .form-control {
        border: 1px solid var(--dark) !important;
         padding-left: 5px !important;
         padding-right: 5px !important;
    }
  
  
    #btnCheckoutFixed {
      background: white;
      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(--primary)!important;
      --bs-btn-border-color: var(--grey)!important;
      --bs-btn-hover-color: var(--light)!important;
      --bs-btn-hover-bg: var(--primary)!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(--primary)!important;
  }
  
  .c-card__product .card img, .c-product-item__details .c-product__details .c-product__img {
      background-color: #fff;
  }
  
  .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(--clementine)!important;
      border: 1px solid var(--dark)!important;
  }
  
  .dropdown-item:hover, .dropdown-item:focus {
      background-color: var(--clementine);
  }
  
  .c-collapse-arrow:hover {
      background-color: var(--clementine)!important;
  }
  
  .btn.btn-outline-primary:hover, .btn.btn-outline-primary:active {
      color: var(--light)!important;
      border: 1px solid var(--dark)!important;
      background: var(--primary)!important;
  }
  
  .c-btn__signin > a, .c-btn__signin > a:hover {
      background: white !important;
      color: var(--primary)!important;
  }
  .c-btn__signin:hover, .c-btn__signup:hover, #btnCheckout:hover {
      transform: scale(1.03);
  }
  
  
  #heading_preorder, .c-content__heading  {
      color: var(--dark);
      font-size: 35px;
  }
  .moo-product-tabs {
    color: var(--dark);
      font-size: 25px;
  }
  .group_description {
    font-size: 12px;
  }
  
  
  .c-profile__group .c-profile__dropdown span {
      color: var(--primary)!important;
      font-size: 30px;
  }
  
  .c-sidebar__cart.open, .c-sidebar__cart.close {
      transition: all 0.3s ease-in-out;
  }

.c-main__layout div#sidebarCart {
    background-color: white !important;
    border-left: var(--grey) !important;
}
  
  
  .c-product__tags .badge {
      background-color: var(--clementine)!important;
  }
  .c-product__sub-categries.row {
      padding: 10px;
  }
  
  .c-card__product .card:hover {
      transform: scale(1.02)!important;
      filter: drop-shadow(2px 2px 2px var(--primary));
  }
  
  .c-card__product .card {
      transition: transform 0.3s ease;
      --tw-shadow: 0px 13px 20px 0px rgba(0, 0, 0, .12), 0px 11px 9px -10px rgba(0, 0, 0, .35);
      --tw-shadow-colored: 0px 13px 20px 0px var(--tw-shadow-color), 0px 11px 9px -10px var(--tw-shadow-color);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
  
  }
  
  .product_tabs {
      font-weight: 600;
  }
  
  .item-header {
      text-transform: uppercase;
      font-family: var(--primary-font);
  }
  
  .dropdown-menu, .overflow-auto {
      scrollbar-color: var(--light) var(--primary);
      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;
  }

/* Add background to edit button */
#activateEditButton {
	background-color: var(--light);
}

/* Menu Item Image Sizer */
.c-product-item__details .c-product__details .c-product__img.default_product_image {
	object-fit: cover;
}

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

/* Credit Card Selection */
[id^="profile_id_-"][id$="_label"]:has(input:checked)::before {
	content: "\2713\0020 ";
	color: var(--bs-highlight);
	margin-right: 0.5em;
}

#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;
}

/* END Credit Card Selection */

/* Add to cart sticky fix */
.c-main__content.mainContentActive.c-main__product {
	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%;
}

/* END Add to cart sticky fix */

/* 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 */


/*Category Header*/

.c-product__tabs .c-section__title {
    color: white;
    background-color: var(--secondary);
    padding: 7px 10px 7px;
    border-radius: 75px;
    border: 3px solid var(--secondary);
    letter-spacing: 0.03rem;
        font-family: 'mrdodo' !important;
}

/* Red velvet example
.c-product__tabs #category-85 .c-section__title {
    color: white;
    background-color: var(--redvelvet);
    padding: 7px 10px 7px;
    border-radius: 75px;
    border: 3px solid var(--redvelvet);
    letter-spacing: 0.03rem;
    font-weight: lighter !important;
}
*/
.c-product__tabs .sub-categories__group div.c-text__md {
    color: var(--secondary) !important;
    display: inline-block;
    background-color: var(--light);
    padding: 6px 10px 6px;
    border-radius: 75px;
    border: 3px solid var(--secondary);
    width: auto;
    margin-left: 2rem;
}
/* Red velvet example
.c-product__tabs #category-85 .sub-categories__group div.c-text__md {
    color: var(--secondary) !important;
    display: inline-block;
    background-color: var(--light);
    padding: 6px 10px 6px;
    border-radius: 75px;
    border: 3px solid var(--redvelvet);
    width: auto;
    margin-left: 2rem;
}
*/
.vh-100 {
    min-height: 100vh;
    height: auto !important;
}
.c-product__description .productSummaryText {
    height: 3.85rem;
    overflow: hidden;
}

.c-dietary__tags.badge.vegetarian-friendly_4 {
    width: 30px;
    height: 30px;
    font-size: var(--bs-font-size-xs);
    line-height: var(--bs-line-height-xs);
    border: 1.5px solid green;
    vertical-align: middle !important;
    padding: 0.4rem 0.125rem;
    color: green !important;
    font-weight: bolder !important;
}

/*
.product_tabs-91,
div#category-91 { Display: none}*/