* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
#root {
  background-color: var(--bg);
}
html,
body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  overflow-x: hidden;
}


/* ----- CIRCULR FOOD STYLES---------- */
#showFood {
  /* margin: 15px 70px; */
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
#showFood h2 {
  display: flex;
  justify-content: start;
  align-items: center;
  font-family: var(--heading-font);
  color: var(--text);
  font-size: 1.45rem;
  font-weight: 600;
  margin-top: 1.4rem;
  margin-bottom: 0.6rem;
  padding-left: 5vw;
}
/* container of only circluar food */
#allFoods {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.2rem;
  margin: 0.8rem 1rem;
}
@media (max-width: 412px) {
  #allFoods {
    gap: 0.5rem;
  }
}
@media (max-width: 377px) {
  #allFoods {
    gap: 0.2rem;
  }
}
@media (max-width: 359px) {
  #allFoods {
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
  }
}
#allFoods .food {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#allFoods .food img {
  transition: all 0.2s ease-in;
  border: 3px solid var(--surface);
  box-shadow: 0 0 0 1px var(--border), var(--shadow-sm);
  border-radius: 100%;
  width: 100px;
  height: 100px;
  object-fit: cover;
}
.food img:hover {
  cursor: pointer;
  transform: scale(1.05);
  box-shadow: 0 0 0 2px var(--primary), var(--shadow-md);
}
.label label {
  font-family: var(--font);
  text-transform: capitalize;
  color: var(--text-muted);
  font-size: 0.9rem;
  cursor: pointer;
}
.food img:active {
  cursor: pointer;
  transform: scale(0.999999);
}
/* media quesry for that */
@media (max-width: 800px) {
  #showFood {
    margin: 1rem 0.4rem;
  }
  #allFoods {
    margin: 0.4rem 0.8rem;
  }
  #showFood h2 {
    font-size: 1.4rem;
  }
  #allFoods .food img {
    width: 80px;
    height: 80px;
  }
}

/* ----- MAIN SLIDER ANIMATION STYLES---------- */
#specialFood {
  margin-top: 1%;
  text-align: center;
}
#Special-Heading {
  font-family: var(--heading-font);
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text);
  margin-top: 1.5rem;
  margin-bottom: 1.2rem;
}

/* slider responsive */
@media (max-width: 800px) {
  #Special-Heading {
    font-size: 1.4rem;
  }
}

/* ----- ALL DISH CARDS STYLES---------- */
#allDish {
  display: flex;
  justify-content: center;
  align-items: stretch;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding: 0.5rem 1rem 2.5rem;
}
/* dishesh box */
#dishes:hover {
  transition: all 0.3s ease;
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}
#dishes {
  transition: all 0.3s ease;
  background-color: var(--surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
/* image inside the dish card */
#dishes #logo img {
  transition: all 0.4s ease;
  width: 250px;
  height: 200px;
  object-fit: cover;
  cursor: pointer;
  display: block;
}

.dname {
  font-family: var(--font);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  padding: 0 0.4rem;
  border-radius: 6px;
  transition: all 0.4s ease-in;
  cursor: pointer;
  margin: 0.4rem 0;
}
#name {
  text-transform: uppercase;
  font-weight: 600;
  color: var(--text);
}
#price {
  color: var(--primary);
  font-weight: 700;
}
.dname:hover {
  background-color: rgb(211, 208, 208);
}
#dishName {
  margin-top: 0.6rem;
}
#addingCart {
  margin-bottom: 0.6rem;
  /* width: 290px; */
  display: flex;
  align-items: center;
  justify-content: center;
}
#minusBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color: var(--text);
  background-color: var(--surface);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border);
  padding: 0 8px;
  transition: all 0.2s ease-in;
}
#number {
  font-size: 1.1rem;
  padding: 0 0.5rem;
  font-weight: 600;
}
#addBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 100%;
  color: var(--text);
  background-color: var(--surface);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid var(--border);
  padding: 0px 5px;
  transition: all 0.2s ease-in;
}
.Btn {
  cursor: pointer;
  margin: 3px;
}
.Btn:hover {
  transform: scale(1.04);
  background-color: var(--primary-light);
}
.addCartBtn {
  color: #fff;
  background-color: var(--primary);
  font-size: 0.9rem;
  padding: 6px 16px;
  margin-left: 0.6rem;
  transition: all 0.2s ease;
  text-align: center;
  font-weight: 600;
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}
.addCartBtn:hover {
  background-color: var(--primary-dark);
}

/* responsive desgin */
@media (max-width: 600px) {
  #allDish {
    gap: 0rem;
  }
}
@media (max-width: 800px) {
  /* imae of inside of dish */
  #dishes #logo img {
    width: 300px;
    height: 200px;
  }
  .dname {
    font-size: 1.5rem;
  }
  #number {
    font-size: 1.3rem;
  }

  #number {
    font-size: 1.1rem;
    padding: 0 0.2rem;
  }
  #minusBtn {
    font-size: 20px;
    padding: 0 11px;
  }
  #addBtn {
    font-size: 20px;
    padding: 0px 7px;
  }
  .addCartBtn {
    font-size: 1.1rem;
    padding: 1px 8px 0px 8px;
    margin-left: 10px;
  }
}

/* coin - popup styles */
.coin-popup {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.allBox {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background-color: var(--surface);
  width: 470px;
  overflow: hidden;
  height: 430px;
  visibility: hidden;
  z-index: 1;
  box-shadow: var(--shadow-lg);
  transition: transform 0.3s, top 0.4s;
  position: absolute;
  top: 100px;
  transform: scale(0.1);
}

.allBox h2 {
  text-align: center;
  margin: 16px 12px;
  letter-spacing: 0.03rem;
  word-spacing: 4px;
  font-size: 1.4rem;
}
.allBox p {
    font-size: 20px;
  }

@media (max-width: 500px) {
  .allBox {
    width: 23rem;
  }
  .allBox p {
    font-size: 16px;
  }
}
@media (max-width: 400px) {
  .allBox {
    width: 21rem;
  }
}


/* Below code is not refactored ------------------------- */

#footer h4 {
  font-weight: 400;
  font-size: 19px;
  padding: 4px;
  text-align: center;
  border: 2px solid black;
  color: white;
  background-color: black;
}

/* modal for  */
/* desing the popup of login panel */

.LoginForms {
  display: flex;
  align-items: center;
  justify-content: center;
}

#LoginForm {
  margin-left: 13px;
  padding: 1px;
}

#emailId label,
#emailId label {
  font-size: 1.1rem;
}

#emailId #addEmail {
  text-align: left;

  /*border: 1px solid rgb(187, 181, 181);
  border-radius: 5px;
  */
  padding: 5px 9px;
  background-color: #f2f2f2;
  margin: 10px 0px 15px 0px;
  width: 93%;

  border: 1px solid rgb(121, 119, 116);
  border-radius: 3px;
}

#password #addPass {
  text-align: left;

  border: 1px solid rgb(187, 181, 181);
  border-radius: 5px;
  padding: 5px 9px;
  background-color: #f2f2f2;
  margin: 10px 15px 43px 0px;
  width: 93%;
}

#password hr {
  margin: 0px;
}

#password {
  margin-top: 5px;
}

#Bottons {
  margin: 15px 30px 15px 0px;
  display: flex;
  float: right;
}

#CloseBtn {
  color: white;
  margin-right: 10px;
  border: none;
  background: grey;
  border-radius: 5px;
  padding: 4px 20px;
  font-size: 1.2rem;
  cursor: pointer;
}

#GoBtn {
  color: white;
  margin-left: 10px;
  border: none;
  background: blueviolet;
  border-radius: 5px;
  padding: 4px 20px;
  font-size: 1.2rem;
  cursor: pointer;
}

#CloseBtn:hover,
#GoBtn:hover {
  transform: scale(1.05);
}

#CloseBtn:active,
#GoBtn:active {
  transform: scale(0.9999);
}

::placeholder {
  font-size: 0.9rem;
}

.open-popup {
  transform: scale(1);
  top: 35px;
  visibility: visible;
}

.active {
  /*filter: blur(4px);
  */
  opacity: 0.5;
  pointer-events: none;
  user-select: none;
}

.images {
  border: 1px solid rgb(208, 16, 83);
  display: block;
  margin: auto;
  margin-bottom: 15px;
  width: 100px;
  border-radius: 50%;
}

#openingWeb {
  z-index: 5;
  height: 0vh;
  top: 2px;
  display: flex;
}

#openLeft {
  z-index: 5;
  position: relative;
  top: 0px;
  /* 0 to -50 */
  background-color: white;
  height: 150vh;
  top: -200px;
  right: 0vw;
  width: 52vw;
  transition: 1.5s 0.1s all;
}

#openRight {
  z-index: 5;
  position: relative;
  background-color: white;
  height: 150vh;
  top: -200px;
  left: 0vw;
  width: 52vw;
  transition: 1.5s 0.1s all;
}

.leftBox {
  right: 52vw;
  visibility: hidden;
  height: 0px;
}

.rightBox {
  left: 52vw;
  visibility: hidden;
  height: 0px;
}


/* ---- bootstrap theme overrides (make buttons/inputs match our colors) ---- */
.btn-primary {
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-bg: var(--primary-dark);
  --bs-btn-hover-border-color: var(--primary-dark);
  --bs-btn-active-bg: var(--primary-dark);
  --bs-btn-active-border-color: var(--primary-dark);
  --bs-btn-disabled-bg: var(--primary);
  --bs-btn-disabled-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 255, 90, 31;
}
.btn-outline-success {
  --bs-btn-color: var(--success);
  --bs-btn-border-color: var(--success);
  --bs-btn-hover-bg: var(--success);
  --bs-btn-hover-border-color: var(--success);
  --bs-btn-active-bg: var(--success);
}
.form-control:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 0.2rem rgba(255, 90, 31, 0.2);
}