/*.bg-image {
	background-image: var(--bg-image);
	background-size: cover; Растягивает изображение, сохраняя пропорции 
	background-position: center;  Центрирование 
	background-repeat: no-repeat;  Запрещает повторение 
	background-attachment: fixed;  Фиксируем фон 
	height: 100vh;  Высота на весь экран 
	margin: 0;
}*/
.shadow-button {
  -webkit-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  -moz-box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
  box-shadow: 0px 5px 10px 2px rgba(34, 60, 80, 0.2);
}
/*
@font-face {
	font-family: 'Pacifico-Regular';
	src:
		url('/static/fonts/Pacifico-Regular.woff2') format('woff2'),
		url('/static//fonts/Pacifico-Regular.woff')
			format('woff'),
		url('/static//fonts/Pacifico-Regular.ttf')
			format('truetype'); 
	font-weight: normal; 
	font-style: normal;
}
*/
@font-face {
  font-family: "NunitoSans-Bold"; /* Название шрифта */
  src:
    url("/static/fonts/NunitoSans-Bold.woff2") format("woff2"),
    /* Современные браузеры */ url("/static/fonts/Pacifico-Regular.woff")
      format("woff"),
    /* Большинство браузеров */ url("/static/fonts/Pacifico-Regular.ttf")
      format("truetype"); /* Старые браузеры */
  font-weight: normal; /* Насыщенность шрифта */
  font-style: normal; /* Стиль шрифта */
}
.my-fonts {
  font-family: "NunitoSans-Bold";
  text-shadow: 2px 2px 4px rgb(0, 0, 0);
  line-height: 1em;
}

/* ------- Кнопка в корзину -------*/
.selected-prod {
  background-color: rgb(119, 199, 73);
}
.selected-prod:hover {
  background-color: rgb(79, 136, 46);
}
.un-selected-prod {
  background-color: rgb(235, 219, 208);
}
.un-selected-prod:hover {
  background-color: rgb(252, 232, 218);
}
/* ------- конец Кнопка в корзину -------*/

/* ------- Кнопка переключения языка -------*/

.lang-btn {
  height: 30px;
  width: 30px;
  border-radius: 25%;
  border: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(195, 145, 253, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  z-index: 10000; /* чтобы была поверх чата */
}

.lang-btn:hover {
  background: rgba(171, 110, 241, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.lang-btn:active {
  transform: scale(0.95);
}
/* ------- конец Кнопка переключения языка -------*/

/* ------- Окно для указания рейтинга -------*/
.star {
  transition:
    transform 0.2s,
    color 0.2s;
}

.star:hover {
  transform: scale(1.2);
}

#feedbackContent {
  animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ------- конец Окно для указания рейтинга -------*/

/* ------- Стили для прогресс бара -------*/
@keyframes shimmer {
  0% {
    background-position: 0% 100%;
  }
  50% {
    background-position: 0% 0%;
  }
  100% {
    background-position: 0% 100%;
  }
}

.shimmer-bar {
  background: linear-gradient(
    to top,
    #3b82f6 0%,
    #8b5cf6 25%,
    #ec4899 50%,
    #8b5cf6 75%,
    #3b82f6 100%
  );
  background-size: 100% 200%;
  animation: shimmer 2.5s ease-in-out infinite;
}

@keyframes glow {
  0% {
    background: linear-gradient(
      90deg,
      rgba(59, 130, 246, 0.6) 0%,
      rgba(236, 72, 153, 0.8) 50%,
      rgba(59, 130, 246, 0.6) 100%
    );
    background-size: 200% 100%;
    background-position: 0% 0%;
  }
  100% {
    background: linear-gradient(
      90deg,
      rgba(59, 130, 246, 0.6) 0%,
      rgba(236, 72, 153, 0.8) 50%,
      rgba(59, 130, 246, 0.6) 100%
    );
    background-size: 200% 100%;
    background-position: 200% 0%;
  }
}

#progressBar {
  animation: glow 2.5s ease-in-out infinite;
}

/* Плавное появление меню */
.side-menu {
  transition:
    transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.35s ease;
}
#sideMenu {
  display: none;
}
.vertical-text {
  /*writing-mode: vertical-lr;*/
  writing-mode: sideways-lr;

  /* text-orientation: mixed; */ /* можно убрать, для vertical-lr это значение по умолчанию */
}
.rotated-text {
  transform: rotate(180deg); /* или другое значение */
  /* writing-mode в этом случае не нужен */
}
/* ------- конец Стили для прогресс бара -------*/