/* =========================================================
   AniLog — ввод и вывод рейтинга
   ========================================================= */

.rating-output {
  padding: 4px 9px;
  border: 1px solid rgba(251, 191, 36, 0.13);
  border-radius: 999px;
  background: rgba(251, 191, 36, 0.07);
  color: var(--amber);
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.2;
}

.rating-input {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 2px;
}

.rating-stars {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.rating-star-label {
  position: relative;
  display: grid;
  width: clamp(22px, 3vw, 29px);
  height: clamp(22px, 3vw, 29px);
  cursor: pointer;
  place-items: center;
}

.rating-star-label input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.rating-star {
  display: block;
  width: 76%;
  height: 76%;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  background: rgba(255, 255, 255, 0.12);
  transition:
    background 0.16s ease,
    transform 0.16s var(--ease-out),
    filter 0.16s ease;
}

.rating-star-label:hover .rating-star {
  transform: scale(1.14);
}

.rating-star-label.is-filled .rating-star {
  background: linear-gradient(135deg, #ffe9a3, #fbbf24 62%, #f59e0b);
  filter: drop-shadow(0 0 5px rgba(251, 191, 36, 0.3));
}

.rating-star-label.is-hover .rating-star {
  background: linear-gradient(135deg, #fff3c4, #fcd34d);
}

.rating-star-label:has(input:focus-visible) .rating-star {
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.9));
  transform: scale(1.13);
}

.rating-clear {
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted-2);
  font-size: 10px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.rating-clear:hover {
  color: var(--text-soft);
}

.form-error {
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(251, 113, 133, 0.2);
  border-radius: 10px;
  background: rgba(251, 113, 133, 0.075);
  color: #fecdd3;
  font-size: 11.5px;
  line-height: 1.45;
}