.rating-widget {
  display: flex;
  align-items: center;
  font-family: system-ui, sans-serif;
  gap: 6px;
}

.stars {
  position: relative;
  display: inline-block;
  font-size: 1.3rem;
  color: #ccc; /* gray base stars */
  line-height: 1;
}

.stars::before {
  content: "★★★★★"; /* background layer */
}

.stars::after {
  content: "★★★★★"; /* foreground layer */
  position: absolute;
  left: 0;
  top: 0;
  width: calc(4.7 / 5 * 100%); /* fill % for rating */
  color: #FFD700; /* gold stars */
  overflow: hidden;
}

.rating-value {
  font-weight: 600;
  font-size: 1rem;
  color: #333;
}

.rating-count {
  font-size: 0.85rem;
  color: #777;
}