/* Стили для звездного рейтинга в форме */
.custom-rating-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  gap: 5px;
  font-size: 30px;
}

.custom-rating-rating input[type="radio"] {
  display: none;
}

.custom-rating-rating label {
  cursor: pointer;
  color: lightgrey; /* Цвет пустой звезды */
  font-size: 30px;
}

.custom-rating-rating label:before {
  content: '★'; /* Символ звезды */
  font-family: Arial, sans-serif;
}

.custom-rating-rating input:checked ~ label {
  color: gold; /* Цвет активных звезд */
}

.custom-rating-rating label:hover,
.custom-rating-rating label:hover ~ label {
  color: gold; /* Подсветка при наведении */
}

/* Стили для отображения среднего рейтинга */
.custom-rating-average {
  display: flex;
  gap: 5px;
  font-size: 30px;
}

.custom-rating-average .star {
  font-size: 30px;
  color: lightgrey; /* Пустая звезда по умолчанию */
}

.custom-rating-average .star.full {
  color: gold; /* Полная звезда */
}

.custom-rating-average .star.empty {
  color: lightgrey; /* Пустая звезда */
}

/* Стили для половины звезды */
.custom-rating-average .star.half {
  background: linear-gradient(to right, gold 50%, lightgrey 50%); /* Золотая половина и светлая половина */
  -webkit-background-clip: text;
  color: transparent;
}

/* Контейнер для рейтинга в карточке товара */
.rating-wrapper-container {
  position: relative; /* Контекст позиционирования для рейтинга внутри блока */
}

/* Изменения для позиционирования рейтинга поверх изображения */
.rating-wrapper {
  position: absolute; /* Абсолютное позиционирование рейтинга */
  top: 10px; /* Расстояние от верхнего края */
  right: 10px; /* Расстояние от правого края */
  background: rgba(255, 255, 255, 0.8); /* Белый фон с прозрачностью */
  padding: 5px 10px; /* Внутренние отступы для рейтинга */
  border-radius: 5px; /* Закругленные углы */
  z-index: 10; /* Поверх других элементов */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Легкая тень */
}

/* Стили для позиционирования рейтинга поверх изображения */
.hed2-cent {
  position: relative; /* Контекст для абсолютного позиционирования рейтинга */
}

.product-rating {
  position: absolute;
  top: 10px; /* Расстояние от верхнего края изображения */
  right: 10px; /* Расстояние от правого края изображения */
  padding: 5px 10px;
  border-radius: 5px;
  color: #333; /* Цвет текста рейтинга */
  font-size: 12px; /* Размер шрифта */
  z-index: 5; /* Поверх изображения */
}