/* importing fonts */
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo&display=swap');
/*for Headings*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300&family=Nanum+Myeongjo&display=swap');
/*for all text other than Headings*/

/* setting variables for colors */
:root {
    --red-category: #D92534;
    /*non-veg*/
    --green-category: #babb49;
    /*veg*/
    --new-item: #5ABF56;
    --myBGColor: #f7f2e8;
    /* --myPrimaryColor: rgba(0,0,0,0.8); */
    --myPrimaryColor: rgb(68,62,63);
    /* --myPrimaryColor: #401801; */
}

html{
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto';
    font-size: 1rem;
        /* Add your background pattern here */
        background-color: var(--myBGColor);
        background-image: radial-gradient( rgb(255, 255, 255) 1.5px, transparent 0);
        background-size: 16px 16px;
        background-position: -5px -5px
    /* background-color: var(--myBGColor); */
    color: var(--myPrimaryColor);
}
/*
.card-body:hover{
    font-size: 1rem;
}
.card-body:active{
    font-size: 1rem;
}*/

/* if user preference set to light mode */
/* Dark mode */
/*@media (prefers-color-scheme: dark) {

    body,
    h1.card-header,
    p.card-body,
    p.card-footer {
        color: var(--myBGColor);

    }

    body {
        background-color: var(--myPrimaryColor);
    }
}
*/

.LogoDisplay{
    max-width: 100%;
    max-height: 10vh;
}

#TopLogo{
    background: var(--myBGColor);
    /* max-width: 100%; */
    height: 10vh;
    background-repeat: no-repeat;
    position: relative;
    left: 30vw;
    transform: scale(.9);
}
.myNav::-webkit-scrollbar { /* width */
    height: 0rem;
  }
  
  
  .myNav::-webkit-scrollbar-track { /* Track */
    background: rgba(0,0,0,0.8);
    z-index: 2;
  }
  
  
  .myNav::-webkit-scrollbar-thumb { /* Handle */
    background: #e4d3ba;
    border-radius: 10px;
  }
  
  
  .myNav::-webkit-scrollbar-thumb:hover { /* Handle on hover */
    background: #555;
  }


::-webkit-scrollbar {  /* width */
    width: 4px;
  }
  

  ::-webkit-scrollbar-track {  /* Track */
    background: #f1f1f1;
  }
  
  
  ::-webkit-scrollbar-thumb { /* Handle */
    background: var(--red-category);
    border-radius: 2px;
  }
  
  
  ::-webkit-scrollbar-thumb:hover { /* Handle on hover */
    background: #555;
  }

.myNav{
    position: sticky;
    top: 0px;
    z-index: 1;
    background-color: var(--green-category);
    /* padding: 10px; */
    overflow-x: auto;
    white-space: nowrap;
}

label[for="Salads"]{
    padding-left: 10px;
}

h1{
    display: inline-block;
    font-size: 1.2rem;
    font-weight: 600;
    /* background-color: rgba(68,62,63, 0.0); */
    /* background: linear-gradient(360deg, rgba(236,235,244,0) 0%, rgba(14,14,14,0.08) 100%); */
    max-width: 85%;
    border: 0px;
    margin-bottom: 0px;
}
.item-price {
    display: inline-block;
    position: absolute;
    right: 15px;
    font-style: italic;
    font-weight: 400;
    font-size: 1rem;
}

.card-header{
    border: 0px;
    background: none;
    margin-bottom: 0px;
    padding: 5px 2px 2px 5px;
}


.card {
    background-color: rgba(33,37,41,0.0) !important;
    letter-spacing: .5px;
    color: var(--myPrimaryColor) !important;
    border-width: 0px 0px 1px 0px;
    border-color: var(--myPrimaryColor);
   /* backdrop-filter: blur(5px); */
}

.card-body{
    padding: 6px 5px 16px 5px;
}

/*edit this block to edit the "NEW" logo*/
.item-new::after {
    display: inline-block;
    position: absolute;
    top: .4rem;
    margin-left: .4rem;
    height: auto;
    width: auto;
    content: "NEW";
    color: white;
    font-size: 0.6rem;
    background-color: var(--new-item);
    padding: 3px;
}

/*adding the right border green highlight for new items*/
div:has(div > h1.item-new){
    border-right: 8px var(--new-item) solid;
}

h1.foodCategory-veg::before {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    margin-right: 10px;
    content: "";
    background: url(icons8-vegetarian-food-symbol-48.png) no-repeat 0 0;
    background-size: 100%;
    position: relative;
}

.foodCategory-non-veg::before {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    margin-right: 8px;
    content: "";
    background: url(icons8-non-vegetarian-food-symbol-48.png) no-repeat 0 0;
    background-size: 100%;
    position: relative;
}

.foodCategory-egg::before {
    display: inline-block;
    height: 1rem;
    width: 1rem;
    margin-right: 5px;
    content: "";
    background: url(icons8-non-vegetarian-food-symbol-48.png) no-repeat 0 0;
    background-size: 100%;
    position: relative;
}

span.item-price::before {
    content: "₹ "
}

/* hidding radio buttons */
input {
    display: none;
}

/* show labels inline */
input+label {
    display: inline-block;
    /* border: var(--myBGColor) .1rem solid; */
    padding: .5rem .5rem .2rem .2rem;
    /* margin: 5px; */
    font-family: 'Arial';
    font-size: 1.2rem;
    font-weight: 600;
    color: #f1f1f1;

}

/* highlighting the selected label */
input:checked+label {
  /*background-color: var(--green-category);*/
  color: var(--myPrimaryColor);
  border-bottom: var(--myPrimaryColor) .2rem solid;
}

/* hidding content by default */
div.card[data-menu-category] {
    display: none;
}

/* showing content based on selection of menu */
    /* the :has pseudo-class isn't supported by firefox; so, find another method to implement this */
div:has(input[value="Mains"]:checked) ~ div.card[data-menu-category="Mains"],
div:has(input[value="Salads"]:checked) ~ div.card[data-menu-category="Salads"],
div:has(input[value="Salad Wraps"]:checked) ~ div.card[data-menu-category="Salad Wraps"],
div:has(input[value="Smoothies"]:checked) ~ div.card[data-menu-category="Smoothies"],
div:has(input[value="Sandwiches"]:checked) ~ div.card[data-menu-category="Sandwiches"],
div:has(input[value="Rice Bowls"]:checked) ~ div.card[data-menu-category="Rice Bowls"],
div:has(input[value="Parfait (Overnight Soaked Oats)"]:checked) ~ div.card[data-menu-category="Parfait (Overnight Soaked Oats)"],
div:has(input[value="Pastas"]:checked) ~ div.card[data-menu-category="Pastas"],
div:has(input[value="Mini Meals"]:checked) ~ div.card[data-menu-category="Mini Meals"],
div:has(input[value="Parathas"]:checked) ~ div.card[data-menu-category="Parathas"],
div:has(input[value="Cheat Day Meal"]:checked) ~ div.card[data-menu-category="Cheat Day Meal"],
div:has(input[value="Healthy Dosa With Bhurji"]:checked) ~ div.card[data-menu-category="Healthy Dosa With Bhurji"] {
    display: block;
}