:root {
  --clrBodyMs: #f1f1f1;
  --direction: rtl;

  --menuItemClrF: #fff;
  --menuItemClr5: #555;
  --menuItemActiveBg: #ffc400;
  --menuItemBg: #333;
  --menuItemTextSize: 14.4px;

  --gridItemBg: #fff;
  --gridItemNameFontSize: 16px;
  --gridItemNameFontClr: #555;
  --gridItemDetailsSize: 14.4px;
  --gridItemDetailsClr: #555;
  --gridItemPriceSize: 12.8px;
  --gridItemPriceClr: #555;

  --itemHeaderBg: #ffc400;
  --itemHeaderFontSize: 16px;
  --itemHeaderClr: #333;

  --backLinkBg: #333;
  --backLinkFontSize: 12.8px;
  --backLinkTextClr: #fff;
  /* new items */
  --menuBg: #fff;
  --menuNameSize: 19px;
  --menuNameClr: #333333;
  --menuPriceSize: 17px;
  --menuPriceClr: #555555;
  --menuSizeBorder: #e8e8e8;
  --menuSizeClr: #333333;
  --menuSizeTextSize: 12.9px;
  --menuSizeActiveBg: #333;
  --menuSizeActiveClr: #fff;
  --menuRecTextSize: 14.2px;
  --menuRecTextClr: #333;
  --menuStarClr: #333;
  --menuStarBorderClr: #333;
}
body,
html {
  background-color: var(--clrBodyMs);
}
nav {
  position: fixed;
  left: 0;
  height: 100dvh;
  background-color: var(--menuItemBg);
  width: 80px;
  z-index: 900;
  direction: var(--direction);
}
.backLink {
  height: 50px;
  color: var(--backLinkTextClr);
  justify-content: center;
  font-size: var(--backLinkFontSize);
  gap: 3px;
  width: 100%;
  padding-right: 10px;
  background-color: var(--backLinkBg);
}
.backLink:hover {
  background-color: var(--whiteClr20);
}
.navItemList {
  height: calc(100dvh - 50px);
  max-width: calc(100dvh - 50px);
  overflow-y: auto;
  scroll-behavior: smooth;
}
.navItemBtn {
  padding: 10px 0;
  align-items: center;
  gap: 3px;
  background-color: var(--menuItemBg);
  min-height: fit-content;
  transition: background-color 0.4s;
}
.navItemBtn:hover {
  background-color: var(--whiteClr20);
}
.navItemBtn.activeNavBtn {
  background-color: var(--menuItemActiveBg);
}
.navItemText {
  color: var(--menuItemClrF);
  font-size: var(--menuItemTextSize);
  font-weight: 500;
  transition: color 0.4s;
}
.navItemImg {
  width: 60px;
  height: 60px;
  transition: filter 0.4s;
}
.navItemBtn.activeNavBtn .navItemImg {
  filter: invert();
}
.navItemBtn.activeNavBtn .navItemText {
  color: var(--menuItemClr5);
  font-weight: 600;
}

@media screen and (min-width: 868px) {
  nav {
    width: 110px;
  }
}
/* menuContent */
.menuContent {
  width: calc(100% - 80px);
  margin-left: 90px;
  direction: var(--direction);
}
.menuItem {
  padding-top: 20px;
}
.menuItem:first-child {
  padding-top: 0;
}
.menuItemTitle {
  background-color: var(--itemHeaderBg);
  height: 50px;
  position: sticky;
  top: 0;
  font-weight: 600;
  padding: 0 5px;
  color: var(--itemHeaderClr);
  font-size: var(--itemHeaderFontSize);
  z-index: 100;
}
.menuItemTitleImg {
  width: 35px;
  height: 35px;
  filter: invert();
}
.menuGrid {
  gap: 10px;
  padding: 0 15px;
  margin-top: 15px;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
.menuGridItem {
  background-color: var(--gridItemBg);
  box-shadow: 0 0 15px var(--blackOp12);
  padding: 10px;
  border-radius: 7px;
  cursor: pointer;
}
.menuGridItemImg {
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 5px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.menuItemGridInfoDiv {
  padding: 0 7px;
}
.menuGridItemName {
  font-size: var(--gridItemNameFontSize);
  color: var(--gridItemNameFontClr);
  font-weight: 600;
  margin-top: 10px;
}
.menuItemGridDetails {
  font-size: var(--gridItemDetailsSize);
  color: var(--gridItemDetailsClr);
  line-height: 1.36em;
  margin-top: 5px;
}
.menuItemPrice {
  font-size: var(--gridItemPriceSize);
  color: var(--gridItemPriceClr);
  font-weight: 400;
  margin: 10px auto 0 0;
  gap: 5px;
}
.menuItemPrice .bold {
  font-weight: 600;
  font-size: 1.15em;
}
/* new list item */
.menuListItem {
  width: 100%;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  background-color: var(--menuBg);
  padding: 15px;
  border-radius: 12px;
  font-family: "Yekan", Arial, Helvetica, sans-serif;
}
.menuImgDiv {
  width: 120px;
  height: fit-content;
  aspect-ratio: 1/1;
  border-radius: 10px;
  overflow: hidden;
  transition:
    width 0.3s,
    height 0.3s,
    transform 0.3s;
  margin-right: auto;
}
.ltr .menuImgDiv {
  margin-right: unset;
  margin-left: auto;
}
.menuListItem.expand .menuImgDiv {
  width: 100%;
}
.imgSlider {
  width: 100%;
}
.sliderImg {
  width: 100%;
  height: auto;
  aspect-ratio: 1/1;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
}
.paginationDiv {
  position: absolute;
  width: 100%;
  bottom: 10px;
  z-index: 10;
  gap: 5px;
}
.paginationDiv span {
  margin: 0 !important;
}
.menuItemInfoDiv {
  animation: all 3s ease;
  width: 100%;
  margin-top: -125px;
}
.menuBasicInfoDiv {
  padding-left: 140px;
}
.expand .menuBasicInfoDiv {
  padding-left: 0;
}
.expand .menuItemInfoDiv {
  margin-top: 0;
}
.menuItemName {
  font-size: var(--menuNameSize);
  font-weight: 600;
  color: var(--menuNameClr);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 27px;
}
.menuItemPrice {
  font-size: var(--menuPriceSize);
  font-weight: 600;
  color: var(--menuPriceClr);
  margin-top: 1px;
}
.sizesDiv {
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  gap: 10px;
  width: 100%;
  padding: 3px 0;
}
.sizeItem {
  color: var(--menuSizeClr);
  font-size: var(--menuSizeTextSize);
  font-weight: 500;
  border-radius: 10px;
  border: 1px solid var(--menuSizeBorder);
  padding: 3px 12px;
  font-family: "yekan", Arial, Helvetica, sans-serif;
}
.sizeItem.activeSizeItem {
  background-color: var(--menuSizeActiveBg);
  color: var(--menuSizeActiveClr);
}
.menuItemRecipe,
.menuItemShortRecipe {
  font-size: var(--menuRecTextSize);
  font-weight: 500;
  color: var(--menuRecTextClr);
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: none;
  margin-top: 5px;
}
.expand .menuItemRecipe {
  display: -webkit-flex;
  display: flex;
}
.menuItemShortRecipe {
  display: block;
}
.expand .menuItemShortRecipe {
  display: none;
}
.seeItemBtn {
  font-size: var(--menuTextSize2);
  font-weight: 500;
  color: var(--menuTextClr2);
  margin-top: -10px;
  width: 100%;
  justify-content: flex-end;
}
.expand .seeItemBtn {
  margin-top: 10px;
  width: fit-content;
}
.listItemFooter {
  width: 100%;
  margin-top: 5px;
}
.seeDetails {
  font-weight: 600;
  gap: 5px;
  font-size: var(--menuRecTextSize);
  color: var(--menuRecTextClr);
}
.expand .seeDetails {
  display: none;
}
.hideDetails {
  display: none;
}
.expand .hideDetails {
  display: -webkit-flex;
  display: flex;
}
.detailsLink {
  font-size: var(--menuRecTextSize);
  font-weight: 500;
  color: var(--menuRecTextClr);
  margin-top: 10px;
  display: none;
}
.expand .detailsLink {
  display: -webkit-flex;
  display: flex;
}
.menuItemRateDiv {
  width: 100%;
}
.menuItemRateHandler {
  width: 125px;
}
.menuItemRangeInput {
  position: absolute;
  left: 0;
  top: 0;
  width: 125px;
  height: 100%;
  z-index: 10;
  opacity: 0;
}
.menuItemStarDiv {
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  width: 125px;
  margin-top: 5px;
}
.menuItemStarDiv svg {
  width: 100%;
  height: 25px;
  color: transparent;
}
.rateItemText {
  font-size: calc(var(--menuTexSize2) + 5px);
  font-weight: 500;
  color: var(--menuTextClr2);
  gap: 5px;
}
.menuItemStarDiv.one .star1,
.menuItemStarDiv.two .star1,
.menuItemStarDiv.three .star1,
.menuItemStarDiv.four .star1,
.menuItemStarDiv.five .star1 {
  color: var(--menuStarClr);
}
.menuItemStarDiv.two .star2,
.menuItemStarDiv.three .star2,
.menuItemStarDiv.four .star2,
.menuItemStarDiv.five .star2 {
  color: var(--menuStarClr);
}
.menuItemStarDiv.three .star3,
.menuItemStarDiv.four .star3,
.menuItemStarDiv.five .star3 {
  color: var(--menuStarClr);
}
.menuItemStarDiv.four .star4,
.menuItemStarDiv.five .star4 {
  color: var(--menuStarClr);
}
.menuItemStarDiv.five .star5 {
  color: var(--menuStarClr);
}
.starBorderSvg {
  color: var(--menuStarBorderClr);
}
@media screen and (min-width: 450px) {
  .menuImgDiv {
    width: 100%;
  }
  .menuItemInfoDiv {
    padding-left: 0;
    margin-top: 0;
  }
  .menuBasicInfoDiv {
    padding: 0;
  }
  .menuItemRecipe,
  .detailsLink {
    display: -webkit-flex;
    display: flex;
  }
  .menuItemShortRecipe,
  .seeItemBtn {
    display: none;
  }
  .listItemFooter {
    justify-content: flex-end;
  }
}
@media screen and (min-width: 700px) {
  .menuListItem {
    width: calc(100% / 2 - 20px / 2);
  }
}
@media screen and (min-width: 868px) {
  .menuContent {
    width: calc(100% - 110px);
    margin-left: 90px;
  }
  .menuListItem {
    width: calc(100% / 3 - 20px / 3);
  }
  body:has(.settingModal.showSettingModal) .menuListItem {
    width: calc(100% / 2 - 20px / 2);
  }
}
@media screen and (min-width: 1100px) {
  .menuListItem {
    width: calc(100% / 4 - 20px / 4);
  }
  body:has(.settingModal.showSettingModal) .menuListItem {
    width: calc(100% / 3 - 20px / 3);
  }
}
@media screen and (min-width: 1400px) {
  .menuGrid {
    max-width: 1440px;
    margin: 15px auto;
  }
  .menuListItem {
    width: calc(100% / 5 - 20px / 5);
  }
  body:has(.settingModal.showSettingModal) .menuListItem {
    width: calc(100% / 4 - 20px / 4);
  }
}