/* چرخش حول مرکز */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* وقتی ستاره‌ای لودینگ شد */
.post-rating .star.loading svg {
  animation: spin 0.9s linear infinite;
  opacity: 0.85;
  pointer-events: none; /* خودِ ستاره‌ای که لود می‌کنه، غیرقابل کلیک */
  transform-origin: 50% 50%; /* بسیار مهم برای چرخش مرکزی */
  display: block;
}

/* غیرفعال کردن سایر ستاره‌ها در طول لود (ظاهر و جلوگیری از کلیک) */
.post-rating .star.disabled {
  pointer-events: none;
  opacity: 0.6;
}

/* اگر می‌خواهی فقط ستاره‌های غیرلوده کمی مات شوند، از این هم استفاده کن */
.post-rating .star:not(.loading).disabled svg {
  opacity: 0.6;
}

.rating-average { 

}

/* بقیهٔ استایل‌ها (اگر از قبل داری، نگه دار) */
.post-rating {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  direction: rtl;
  flex-wrap: wrap;
  text-align: center;
}

.post-rating .star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.post-rating .star svg {
  display: block;
}

/* مسیر رنگ ستاره */
.post-rating .star svg path {
  fill: #F2D1A8;
  transition: fill 0.3s;
}

.post-rating .star.highlighted svg path,
.post-rating .star:hover svg path {
  fill: #E85A24;
}