@font-face {
  font-family: "Resolve Light";
  src: url(../fonts/Resolve-Light.otf);
}

@font-face {
  font-family: "Cabrion Light";
  src: url(../fonts/Cabrion-Light.otf);
}

body {
  width: 100%;
  margin: 0;
  font-family: sans-serif;

  /* background-color: #f9f9f9;  */
  background-color: #fffeed;
  /* #E7E6E2 */
  /* #eae9e6 */

  /*  */
  /* overflow: hidden; */
}







/*  */

/*  */






.preloader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;

  transition: opacity 0.6s ease, visibility 0.6s ease;
  overflow: hidden;

}

.preloader.hidden {
  opacity: 0;
  visibility: hidden;
}

/* @keyframes fadeOutScreen {
  to {
    opacity: 0;
    visibility: hidden;
  }
} */



.preloader-logo {
  /* width: 120px; */

  height: 40px;
  animation: fadeInUp 0.6s ease forwards;
}



@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}





.left-line {
  position: fixed;
  top: 0%;
  left: 0%;
  z-index: -1;
  height: 100%;
  width: 20px;
  background-color: #EDC5AA;
}

.right-line {
  position: fixed;
  top: 0%;
  right: 0%;
  z-index: -1;
  height: 100%;
  width: 20px;
  background-color: #EDC5AA;
}


/* хедер */

.header {
  position: relative;
}

.site-header {
  height: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid #3c3c3c;
  padding: 15px;
  position: relative;
  z-index: 1000;
}

.site-header a {
  padding: 0;
  text-decoration: none;
}

.logo {
  height: 20px;
}

.header-nav-button {
  font-family: "Cabrion Light";
  font-weight: 600;
  font-size: 16px;
  cursor: pointer;

  position: relative;
  /* transition: color 0.2s ease; */
  padding: 5px 0;
}

.header-nav-button::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EDC5AA;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* Наведение на десктопах */
@media (hover: hover) {
  .header-nav-button:hover::after {
    transform: scaleX(1);
  }
}

/* Активное состояние */
.header-nav-button.active::after {
  transform: scaleX(1);
}

.all-menus {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.lang-select {
  display: flex;
  align-items: center;
}

.language-icon {
  margin-left: 4px;
  height: 19px;
}



/* навигация по меню и языкам */

.site-nav-back {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 80;
  transition: opacity 0.3s ease;
}

.site-nav-back.hidden {

  opacity: 0;
  pointer-events: none;
}


.site-nav {
  font-family: "Cabrion Light";
  font-weight: 600;
  position: absolute;
  top: 61px;
  /* Хедер 30px + padding 15px сверху и снизу = 30 + 15 + 15 + 1(border) = 61px */
  left: 0;
  right: 0;
  transform: translateY(-20px);
  /* Скрываем чуть выше */
  opacity: 0;
  background-color: #fff;
  pointer-events: none;
  transition: transform 0.4s ease, opacity 0.2s ease;
}

.site-nav.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}



.site-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;

  display: flex;
  flex-direction: column;
  justify-content: space-around;
  padding: 12px 15px;
  /* transition: height 0.3s ease; */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.site-nav-menus ul {
  align-items: center;
  /* height: 170px; */

}


.site-nav-lang ul {
  align-items: end;

}

.site-nav li {
  position: relative;
  font-size: 15px;
  margin: 10px 0;
  /* transition: opacity 0.2s ease, color 0.2s ease; */
  cursor: pointer;
  padding: 5px 0;
}


.site-nav li::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #EDC5AA;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
  will-change: transform;
}

/* При наведении (десктоп) */
@media (hover: hover) {
  .site-nav li:hover::after {
    transform: scaleX(1);
  }
}

.site-nav li.active::after {
  transform: scaleX(1);
}


.site-nav a {
  text-decoration: none;
  color: black;
  padding: 5px 0;
}


/* навигация по категориям */

/* .main-nav-container {
  position: sticky;
  top: 0;
} */

.navigation-container {

  position: sticky;
  top: 0;
  background-color: #fff;
  z-index: 70;
  padding: 10px 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05); */

  border-bottom: 1px solid #c2c2c2;
}

.nav-categories {
  height: 40px;
  /* padding: 0 0 5px 0; */
  /* border-bottom: 1px solid #c2c2c2; */
}

.nav-categories,
.nav-subcategories {

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  /* margin: 5px auto; */
}

.category-btn {
  font-size: 0.85rem;
}


.category-btn,
.subcategory-btn {
  font-family: "Resolve Light";
  font-weight: 600;
  padding: 9px 7px;
  border: none;
  background-color: #eee;
  color: #333;
  /* font-size: 1rem; */
  cursor: pointer;
  border-radius: 12px;
  transition: background-color 0.5s;
}

.category-btn.active,
.subcategory-btn.active {
  background-color: #EDC5AA;
  color: #333;
}




/* .nav-subcategories-wrapper {
  position: relative;
  max-height: 100px;
  transition: max-height 0.2s ease;

  border-top: 1px solid #c2c2c2;
  margin-top: 10px;
} */



/* .nav-subcategories-wrapper.hidden {
  max-height: 0px;
  
  border: none;
  margin-top: 0px;
} */




/*  */



.nav-subcategories {
  position: absolute;
  top: 61px;
  left: 0;
  right: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 20;

  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);

  padding: 0 20px;
  /* transform: translateY(-10px);
  transition: opacity 0.2s ease, transform 0.4s ease; */
}

.nav-subcategories.active {
  /* position: relative; */
  opacity: 1;
  /* transform: translateY(0); */
  pointer-events: auto;

  padding: 10px 20px;
}

/* Анимация появления кнопок */
.subcategory-btn {
  font-size: 0.8rem;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

/* Активные кнопки будут анимироваться */
.subcategory-btn.show {
  opacity: 1;
  transform: translateY(0);
}




/*  */






.subcategory-section {
  margin: 0px 0px 50px 0px;

}

.cards-wrapper {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  gap: 25px;
  padding: 0 30px;
  /* align-items: flex-start */

}


.main-category-title {
  font-family: "Resolve Light";
  margin: 20px 0px 18px 0px;
  font-size: 1.8rem;
  text-align: center;
}

.subcategory-title {
  font-family: "Resolve Light";
  text-align: center;
  font-size: 1.3rem;
  margin: 0px;
  color: #3d3d3d;
  /* #555 */
}


/* карточка блюда */
.container {
  max-width: 100%;
  /* padding: 0 30px; */
  /* margin: 18px 0 40px 0px; */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  /* margin-right: auto; */
}

.dish-card {
  font-family: "Cabrion Light";
  display: flex;
  flex-direction: column;
  background-color: #fff;
  /* border-top: 2px solid #ccc; */
  /* border-bottom: 2px solid #ccc; */
  /* border: 1px solid #ccc; */
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
  border-radius: 16px;
  overflow: hidden;
  padding: 12px;
  width: 100%;
  max-width: 550px;
  box-sizing: border-box;
}

/* Верхняя часть: фото + текст */
.dish-main {
  display: flex;
  align-items: center;
}

/* Фото */


.dish-image {
  width: 30%;

  aspect-ratio: 1 / 1;

  object-fit: cover;
  border-radius: 12px;

  cursor: pointer;

  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.2);
}




/* Текст справа */
.dish-text {
  align-self: stretch;
  flex: 1;
  padding-left: 15px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 5px;
  justify-content: space-between;
}

.dish-text-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


.dish-name {
  /* font-weight: 900; */
  font-size: 0.9rem;
  margin: 0;
}

.dish-short {
  font-size: 0.8rem;
  color: #555;
  margin: 6px 0 0 0;
}

.dish-view {
  align-self: flex-end;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 15px;
  /* background-color: #EDC5AA; */
  background-color: transparent;
  border: 2px #EDC5AA solid;
  border-radius: 10px;
  cursor: pointer;

  /* color: #EDC5AA; */

  /* text-decoration: underline; */
}



/* Нижняя часть: разделитель и кнопка */


.overlay-dish-separator {
  width: 90%;
  border: none;
  border-top: 1px solid #ccc;
  /* margin-bottom: 8px; */
  margin: 5px 0px;
}




.overlay-dish-allergens {
  font-size: 0.85rem;
  color: #555;
  text-align: center;
  /*margin-bottom: 8px;*/
}

.overlay-dish-description {
  font-size: 0.95rem;
  color: #333;
  text-align: start;
  margin: 12px;
  
  max-height: 100%;
  overflow-y: auto;
  
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.overlay-dish-description.active {
  opacity: 1;
  transform: translateX(0);
}

/* расшифровка аллергий */

.allergen {
  text-decoration: underline;
  cursor: pointer;
  margin: 0 4px;
  position: relative;
}

.tooltip-box {
  position: absolute;
  background-color: #333;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  white-space: nowrap;
  z-index: 1000;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}







/* раскрытие изображения */

.image-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /*height: 100%;*/
  height: 100dvh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  transition: opacity 0.3s ease;
  
  /*overflow: hidden;*/
}



.image-overlay.hidden {

  opacity: 0;
  pointer-events: none;
}

.overlay-content {
  position: relative;
  width: 295px;
  height: 90%;
  /*overflow-y: auto;*/
}

.overlay-image-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  padding: 8px 8px 10px 8px;
  border-radius: 10px;
  background-color: #eee;
  /* f3f3f3*/
  max-height: 100%;
}

.overlay-dish-name {
  font-family: "Cabrion Light";
  color: #333;
  font-size: 1.1em;
  margin: 10px 0px 0px 0px;
}

.carousel-container {
  width: 100%;
  overflow: hidden;
  border-radius: 10px;
}

.carousel-track {
  display: flex;
  transition: transform 0.3s ease;
  will-change: transform;
}

.carousel-track img {
  width: 279px;
  height: 279px;
  border-radius: 10px;
  flex-shrink: 0;
  object-fit: cover;
}



.close-overlay {
  position: absolute;
  top: -40px;
  right: 0;
  font-size: 2.3rem;
  color: #fff;
  cursor: pointer;

}

.nav-button {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.8rem;
  background: none;
  color: white;
  border: none;
  cursor: pointer;
  padding: 0 6px;
  user-select: none;
}

.prev-button {
  left: -35px;
}

.next-button {
  right: -35px;
}




/* Для мобильных экранов — уменьшаем отступ стрелок */


/* @media (max-width: 389px) {

  .nav-subcategories-wrapper {
    height: auto;
    max-height: 100px;
    
  }
} */

@media (max-width: 380px) {


  .preloader-logo {
    height: 34px;
  }

  .site-header {
    padding: 12px;
  }

  .logo {
    height: 18px;
  }

  /* .language-icon {
    height: 18px;
  } */

  .site-nav {
    top: 55px;
  }

  .site-nav ul {
    padding: 10px 12px;
  }

  .site-nav li {
    margin: 8px 0px;
  }


  .category-btn {
    font-size: 0.8rem;
  }


  .dish-name {
    font-size: 0.9rem;
  }




  .overlay-content {
    width: 275px;
  }

  .carousel-track img {
    width: 259px;
    height: 259px;

  }

}

@media (min-width: 630px) {

  .dish-card {
    padding: 15px;
  }

  .dish-name {
    font-size: 1.1rem;
  }

  .dish-short {
    font-size: 0.9rem;
  }

  .dish-view {
    font-size: 0.8rem;
    padding: 4px 18px;
  }
}


@media (min-width: 768px) {

  .site-header {
    padding: 18px 30px;
  }

  .logo {
    height: 25px;
  }

  .language-icon {
    margin-left: 5px;
    height: 21px;
  }


  .header-nav-button {
    font-size: 18px;
  }


  .site-nav {
    top: 67px;
  }

  .site-nav ul {
    padding: 15px 30px;
  }


  .site-nav li {
    font-size: 17px;
  }


  .nav-categories,
  .nav-subcategories {
    gap: 9px;
  }

  .category-btn {
    font-size: 1.2rem
  }

  .subcategory-btn {
    font-size: 1.1rem
  }

  /* .dish-name {
    font-size: 1.3rem;
  }

  .dish-short {
    font-size: 1rem;
  }

  .dish-view {
    font-size: 0.8rem;
  } */

  .overlay-content {
    width: 305px;
  }

  .carousel-track img {
    width: 289px;
    height: 289px;

  }

  .nav-button {
    font-size: 2rem;
    padding: 0 10px;
  }

  .prev-button {
    left: -40px;
  }

  .next-button {
    right: -40px;
  }

}


@media (min-width: 1024px) {



  .site-header {
    padding: 20px 50px;
  }

  .logo {
    height: 30px;
  }

  .language-icon {
    margin-left: 5px;
    height: 23px;
  }


  .header-nav-button {
    font-size: 18px;
  }


  .site-nav {
    top: 71px;
  }

  .site-nav ul {
    padding: 15px 50px;
  }


  .site-nav li {
    font-size: 17px;
  }


  .cards-wrapper {
    flex-direction: row;
    justify-content: center;
    flex-wrap: wrap;
    align-items: flex-start
  }

  /* .container {
    align-self: stretch;
  } */


  .dish-card {
    min-width: 550px;
  }




  .nav-categories,
  .nav-subcategories {
    gap: 12px;
  }



  .overlay-content {
    width: 325px;
  }

  .carousel-track img {
    width: 309px;
    height: 309px;

  }

  .nav-button {
    font-size: 2.3rem;
    /* padding: 0 12px; */
  }

  .prev-button {
    left: -45px;
  }

  .next-button {
    right: -45px;
  }
}