.rating-container {
  background-color: var(--bbb2);
  display: flex;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  width: auto;
  border-radius: 5px;
  padding: 5px 10px 5px 10px;
  box-sizing: border-box;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  justify-content: flex-start;
  user-select: none;
}

.rating-button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .2s ease-in-out;
}

.rating-extra-container {
  display: flex;
  width: 100%;
  gap: 20px;
  justify-content: space-between;
}

.shared {
  font-size: 10px;
  white-space: nowrap;
  padding: 5px 10px 5px 10px;
  align-items: center;
  display: flex;
  gap: 5px;
  text-decoration: none;
  background-color: var(--bbb2);
  color: #ffffff;
  border-radius: 5px;
  transition: all .2s ease-in-out;
  margin: 0;
  position: relative;
  cursor: pointer;
  user-select: none;
}

.shared:after {
  content: attr(sharetxt); /* Подсказка будет содержать текст, указанный в title */
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px) scale(0.85);
  background: rgb(17, 17, 17);
  color: #fff;
  font-size: 0.75rem;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  white-space: pre;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.shared:hover {
  background-color: var(--ddark);
}

.shared:active {
  background-color: var(--darklite);
}

.shared:hover:after {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}

.rating-button-con {
  display: flex;
  gap: 15px;
}

.rat-left::after {
  content: "";
  background: rgba(255, 255, 255, 0.2);
  height: 100%;
  width: 1.05px;
  margin-left: 5px;
}


.likes {
  color: white;
  text-decoration: none;
}

.rating-button:hover .icon {
  transform: scale(1.1);
  opacity: 0.8;
  transition: all .2s ease-in-out;
}

.icon {
  width: 18px;
  height: 18px;
  font-size: 18px;
  color: #ccc;
  fill: #ccc; /* Стандартный цвет */
  transition: all .2s ease-in-out;
}

.rating-button:hover .icon-like {
  fill: #ff9292; /* Цвет при наведении или активации */
  color: #ff9292;
  filter: url(#glow-filter);
}

.rating-button:hover .icon-dislike {
  fill: #92bbff; /* Цвет при наведении или активации */
  color: #92bbff;
  filter: url(#glow-filter);
  text-shadow: 0px 0px 2px #92bbff;
}

/* Стили для активной кнопки лайка */
.rating-button.active .icon-like {
  fill: #ff9292; /* Цвет для активной кнопки лайка */
  color: #ff9292;
}

/* Стили для активной кнопки дизлайка */
.rating-button.active .icon-dislike {
  fill: #92bbff; /* Цвет для активной кнопки дизлайка */
  color: #92bbff;
}

/* Наведение на активную кнопку лайка */
.rating-button.active:hover .icon-like {
  fill: #b46969; /* Более насыщенный цвет для лайка при наведении */
  filter: url(#glow-filter);
  color: #b46969;
  text-shadow: 0px 0px 2px #b46969;
}

/* Наведение на активную кнопку дизлайка */
.rating-button.active:hover .icon-dislike {
  fill: #6986b4; /* Более насыщенный цвет для дизлайка при наведении */
  filter: url(#glow-filter);
}


.rating-display {
  font-weight: bold;
  color: #ffffff;
  min-width: 50px;
  text-align: center;
}

.update-effect {
  animation: pop .2s ease-in-out;
}

/* Ключевые кадры для анимации */
@keyframes pop {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.2);
  }
  100% {
      transform: scale(1);
  }
}