/* Colors */
:root {
  --blue: rgb(44, 62, 80);
  --gold: rgb(243, 156, 18);
  --golda: rgb(243, 156, 18, 0.86);
  --white: rgb(242, 242, 242);
  --grey: rgb(127, 140, 141);
}

.menuDiv {
  max-width: 800px;
  margin: 16px auto;
  margin-bottom: 86px;
  padding: 0 8px;
  position: relative;
  font-family: 'Roboto', sans-serif;
  font-weight: 300;
  font-style: italic;
}

.menuDiv i {
  display: none;
}

@media (max-width: 800px) {
  .menuDiv i {
    font-size: 1.6rem;
  }
}

.menuDiv i:hover {
  color: var(--gold);
  transition: 0.3s;
  cursor: pointer;
  transform: scale(1.1);
}

.category {
  margin-bottom: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.category:hover {
  background-color: var(--white);
}

.category h2 {
  display: flex;
  align-items: center;
  /* Vertikalno centriranje */
  justify-content: center;
  /* Horizontalno centriranje */
  background-size: cover;
  /* Prilagodite sliku pozadini */
  background-position: center;
  background-repeat: no-repeat;
  color: var(--white);
  padding: 10px;
  border-radius: 10px;
  margin: 0;
  text-transform: uppercase;
  font-size: 1.6rem;
  transition: transform 0.3s;
  font-weight: bold;
  height: 124px;
  text-align: center;
}

.dishes {
  display: none;
  overflow: hidden;
  cursor: default;
}

.dish {
  display: flex;
  align-items: flex-start;
  /* Poravnava slike i teksta */
  background-color: var(--white);
  border: 1px solid var(--grey);
  border-radius: 10px;
  margin: 10px 0;
  padding: 15px;
  opacity: 0;
  transform: translateY(-20px);
  transition: all 0.5s ease-in-out;
  overflow: hidden;
  /* Sprečava horizontalni scroll */
}

.dish.show {
  opacity: 1;
  transform: translateY(0);
}

.dish.hide {
  opacity: 0;
  transform: translateY(-20px);
}

.dish img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  /* Zadržava proporcije slike */
  margin-right: 15px;
  border-radius: 10px;
  flex-shrink: 0;
  /* Sprečava smanjivanje slike */
}

.dish-info {
  flex: 1;
  /* Tekst zauzima preostali prostor */
  display: flex;
  flex-direction: column;
  /* Prikazuje tekst u koloni */
  justify-content: space-between;
  /* Ravnomerno raspoređuje sadržaj */
}

.dish-info h3 {
  margin: 0;
  color: black;
  font-size: 1.2rem;
  font-weight: bold;
}

.dish-info p {
  margin: 5px 0;
  color: var(--grey);
  word-break: break-word;
  /* Sprečava prelivanje dugih reči */
}

.price {
  font-weight: bold;
  color: var(--gold) !important;
  padding-bottom: 36px;
}

.fade {
  opacity: 0;
  /* Početno stanje: nevidljiv */
  transform: scale(0);
  /* Početno stanje: skroz smanjen */
  transition: opacity 0.5s ease, transform 0.5s ease;
  /* Animacija za opacity i transformaciju */
}

.show {
  opacity: 1;
  transform: scale(1);
  /* Puni prikaz kada se prikaže */
}

.hidden {
  display: none;
  /* Element je potpuno sakriven */
}

.menuBttn {
  position: fixed !important;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  width: 186px !important;
  height: 56px !important;
  margin: 0 !important;
  transition: 0.3s;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  background-color: var(--gold);
  color: var(--white);
  font-weight: bold;
  box-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset;
}

.menuBttn:hover {
  cursor: pointer;
  transition: 0.3s;
  box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px;
}

.quantity {
  padding-bottom: 30px;
}

.addToCartBtn {
  border-radius: 10px;
  margin-top: 8px !important;
  margin-bottom: 30px !important;
  margin-left: 10px !important;
  max-width: 264px !important;
  width: 80% !important;
  height: 36px !important;
  transition: 0.1s;
  background-color: var(--white);
  color: black;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
}

.addToCartBtn:active {
  transition: 0.1s;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.decrease {
  border-radius: 10px;
  transition: 0.1s;
  width: 36px !important;
  height: 20px !important;
  background-color: var(--white);
  color: black;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  margin-left: 10px !important;
  margin-right: 16px !important;
}

.decrease:active {
  transition: 0.1s;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}

.increase {
  border-radius: 10px;
  transition: 0.1s;
  width: 36px !important;
  height: 20px !important;
  background-color: var(--white);
  color: black;
  border: none;
  outline: none;
  cursor: pointer;
  box-shadow: rgba(0, 0, 0, 0.07) 0px 1px 1px, rgba(0, 0, 0, 0.07) 0px 2px 2px, rgba(0, 0, 0, 0.07) 0px 4px 4px, rgba(0, 0, 0, 0.07) 0px 8px 8px, rgba(0, 0, 0, 0.07) 0px 16px 16px;
  margin-left: 16px !important;
  margin-right: 10px !important;
}

.increase:active {
  transition: 0.1s;
  box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
}