/* ============================================================
   components/rating-stars.css
   5-star rating display / input
   ============================================================ */

.rating { display: inline-flex; align-items: center; gap: 2px; }
.rating__star { width: 20px; height: 20px; color: var(--primary); fill: currentColor; }
.rating__star--empty { color: var(--border); }
.rating__value {
  margin-left: var(--space-2);
  font-weight: 700;
  font-size: var(--font-base);
  color: var(--text);
}

.rating-input {
  display: inline-flex;
  flex-direction: row-reverse;
  gap: var(--space-1);
}
.rating-input input[type="radio"] { display: none; }
.rating-input label { cursor: pointer; font-size: 28px; color: var(--border); transition: color .1s; }
.rating-input input:checked ~ label,
.rating-input label:hover,
.rating-input label:hover ~ label { color: var(--primary); }

.rating-bar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.rating-bar__label {
  flex: 0 0 auto;
  font-size: var(--font-sm);
  color: var(--text-mid);
  min-width: 180px;
}
.rating-bar__track {
  flex: 1;
  height: 8px;
  background: var(--bg-muted);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.rating-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary-light), var(--primary));
  border-radius: inherit;
  transition: width .3s;
}
.rating-bar__value {
  flex: 0 0 auto;
  font-weight: 700;
  color: var(--primary);
  font-size: var(--font-sm);
  min-width: 36px;
  text-align: right;
}