﻿#rate-from-5 {
    padding-top: 0.5vw;
}

#rating-display-container {
    padding-top: 0.5vw;
}

.rating-display {
    direction: rtl; /* راست به چپ */
    display: inline-flex;
    position: relative;
    vertical-align: middle;
}

.stars-container {
    position: relative;
    display: flex;
    align-items: center;
}

.rating-stars-empty, .rating-stars-filled {
    display: flex;
    gap: 0.5vw; /* فاصله بین ستاره‌ها */
    align-items: center;
}

.star-svg {
    width: 1.5vw; /* اندازه ستاره‌ها */
    height: 1.5vw;
    min-width: 1.5vw; /* حداقل اندازه برای نمایش مناسب */
    min-height: 1.5vw;
    transform: scale(1.1);
}

/* ستاره‌های خالی (پس‌زمینه) */
.rating-stars-empty .star-svg {
    color: white;
    stroke: #b0b0b0; /* border خاکستری تیره‌تر */
    stroke-width: 2.5;
    /* سایه داخلی برای ایجاد عمق */
    filter: drop-shadow(0 0 0.1vw rgba(0,0,0,0.4)) drop-shadow(inset 0 0 0.3vw rgba(0,0,0,0.1)) blur(0.03vw);
}

/* ستاره‌های پر شده (جلوه) */
.rating-stars-filled {
    color: #ffba00; 
    position: absolute;
    top: 0;
    right: 0;
    overflow: hidden;
    width: 0; /* با jQuery تنظیم می‌شود */
    white-space: nowrap;
    z-index: 10; /* بالا بودن روی ستاره‌های خالی */
    /* گرادیان رنگی برای زیبایی بیشتر */
    background: linear-gradient(45deg, #FFD700, #FFA500);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

    .rating-stars-filled .star-svg {
        stroke: #8B6508; /* border قهوه‌ای طلایی */
        stroke-width: 3.5; /* border ضخیم‌تر برای گردی بیشتر */
        filter: 
        contrast(1.2); /* افزایش کنتراست */
    }

/* انیمیشن درخشش ملایم برای ستاره‌های پر شده */
@keyframes star-glow {
    0% {
        filter: drop-shadow(0 0 0.2vw rgba(139, 101, 8, 0.6)) drop-shadow(0 0 0.08vw rgba(255, 215, 0, 0.3)) blur(0.06vw) brightness(1.05) contrast(1.15);
    }

    100% {
        filter: drop-shadow(0 0 0.3vw rgba(139, 101, 8, 0.8)) drop-shadow(0 0 0.15vw rgba(255, 215, 0, 0.6)) drop-shadow(0 0 0.08vw rgba(255, 255, 255, 0.4)) blur(0.1vw) brightness(1.15) contrast(1.3);
    }
}
