/* ══════════════════════════════
   Star Rating — Frontend CSS
   ══════════════════════════════ */

.sr-wrap{
    position:   relative;
    display:    flex;
    align-items: stretch;
    font-family: 'IRANYekan','Vazirmatn',Tahoma,sans-serif;
    direction:  rtl;
    background: #0f0f10;
    border-radius: 12px;
    overflow:   hidden;
    padding:    40px 48px 40px 48px;
    max-width:  700px;
}

/* خط تزئینی عمودی */
.sr-side-line{
    position:   absolute;
    top:        15%;
    bottom:     15%;
    width:      3px;
    background: #c9a84c;
    border-radius: 2px;
    flex-shrink: 0;
}

/* RTL: خط سمت راست، محتوا از راست شروع میشه */
.sr-wrap[dir="rtl"] .sr-side-line{
    right: 0;
    left:  auto;
}
.sr-wrap[dir="rtl"]{
    padding-right: 28px;  /* فاصله کم بین محتوا و خط */
}

/* LTR: خط سمت چپ، محتوا از چپ شروع میشه */
.sr-wrap[dir="ltr"] .sr-side-line{
    left:  0;
    right: auto;
}
.sr-wrap[dir="ltr"]{
    padding-left: 28px;
}

.sr-content{
    flex:           1;
    width:          100%;
    display:        flex;
    flex-direction: column;
    align-items:    flex-start; /* در RTL این = راست‌چین */
    gap:            20px;
}

/* ── تراز محتوا در RTL ── */
.sr-wrap[dir="rtl"].sr-align-right  .sr-content { align-items: flex-start; } /* راست در RTL = flex-start */
.sr-wrap[dir="rtl"].sr-align-center .sr-content { align-items: center;     }
.sr-wrap[dir="rtl"].sr-align-left   .sr-content { align-items: flex-end;   } /* چپ در RTL = flex-end */

.sr-wrap[dir="rtl"].sr-align-right  .sr-texts { text-align: right; width:100%; }
.sr-wrap[dir="rtl"].sr-align-center .sr-texts { text-align: center; }
.sr-wrap[dir="rtl"].sr-align-left   .sr-texts { text-align: left;  width:100%; }

.sr-wrap[dir="rtl"].sr-align-right  .sr-count { text-align: right; width:100%; }
.sr-wrap[dir="rtl"].sr-align-center .sr-count { text-align: center; }
.sr-wrap[dir="rtl"].sr-align-left   .sr-count { text-align: left;  width:100%; }

/* ── تراز ستاره‌ها در RTL ── */
.sr-wrap[dir="rtl"].sr-align-right  .sr-stars { justify-content: flex-start; } /* راست در RTL = flex-start */
.sr-wrap[dir="rtl"].sr-align-center .sr-stars { justify-content: center;     }
.sr-wrap[dir="rtl"].sr-align-left   .sr-stars { justify-content: flex-end;   }

/* ── تراز محتوا در LTR ── */
.sr-wrap[dir="ltr"].sr-align-right  .sr-content { align-items: flex-end;   }
.sr-wrap[dir="ltr"].sr-align-center .sr-content { align-items: center;     }
.sr-wrap[dir="ltr"].sr-align-left   .sr-content { align-items: flex-start; }

.sr-wrap[dir="ltr"].sr-align-right  .sr-texts { text-align: right; width:100%; }
.sr-wrap[dir="ltr"].sr-align-center .sr-texts { text-align: center; }
.sr-wrap[dir="ltr"].sr-align-left   .sr-texts { text-align: left;  width:100%; }

.sr-wrap[dir="ltr"].sr-align-right  .sr-stars { justify-content: flex-end;   }
.sr-wrap[dir="ltr"].sr-align-center .sr-stars { justify-content: center;     }
.sr-wrap[dir="ltr"].sr-align-left   .sr-stars { justify-content: flex-start; }

/* ── عنوان / زیرعنوان ── */
.sr-texts{
    text-align: center;
    display:    flex;
    flex-direction: column;
    gap: 10px;
}
.sr-title{
    margin:      0;
    font-size:   1.6rem;
    font-weight: 800;
    color:       #f5f3ef;
    line-height: 1.4;
}
.sr-subtitle{
    margin:    0;
    font-size: 1rem;
    color:     rgba(245,243,239,.55);
}

/* ── ستاره‌ها ── */
.sr-stars{
    display:        flex;
    align-items:    center;
    gap:            14px;
    direction:      ltr;
    flex-direction: row;
    width:          100%;   /* لازمه تا justify-content کار کنه */
}

/* RTL: ستاره ۱ سمت راست، ستاره ۵ سمت چپ */
.sr-wrap[dir="rtl"] .sr-stars{
    flex-direction: row-reverse;
}

/* تراز ستاره‌ها با محتوا */
.sr-wrap.sr-align-right  .sr-stars { justify-content: flex-end;   }
.sr-wrap.sr-align-center .sr-stars { justify-content: center;     }
.sr-wrap.sr-align-left   .sr-stars { justify-content: flex-start; }

.sr-star{
    background: none;
    border:     none;
    padding:    0;
    cursor:     pointer;
    line-height: 1;
    display:    flex;
    transition: transform .15s ease;
    outline:    none;
}
.sr-star:not([disabled]):hover{
    transform: scale(1.15);
}
.sr-star[disabled]{
    cursor: default;
}

.sr-star svg{
    width:      40px;
    height:     40px;
    stroke:     rgba(245,243,239,.35);
    fill:       transparent;
    transition: stroke .15s ease, fill .15s ease;
}

/* ── حالت‌های ستاره ── */

/* پر شده (رأی ثبت‌شده) */
.sr-star.is-filled svg{
    stroke: #e8b84b;
    fill:   #e8b84b;
}

/* هاور: همه ستاره‌ها تا اینجا روشن بشن */
.sr-stars:not(.sr-voted):hover .sr-star svg{
    stroke: rgba(245,243,239,.2);
    fill:   transparent;
}
.sr-stars:not(.sr-voted) .sr-star.in-range svg{
    stroke: #e8b84b;
    fill:   #e8b84b;
}

/* ── تعداد رأی ── */
.sr-count{
    margin:    0;
    font-size: .82rem;
    color:     rgba(245,243,239,.4);
    direction: rtl;
}

/* ── پاپ‌آپ ── */
.sr-popup{
    position:   absolute;
    bottom:     18px;
    left:       50%;
    transform:  translateX(-50%) translateY(8px);
    background: #1e1e1e;
    color:      #3ecf8e;
    border:     1px solid rgba(62,207,142,.3);
    border-radius: 30px;
    padding:    10px 22px;
    font-size:  .9rem;
    font-weight: 600;
    display:    flex;
    align-items: center;
    gap:        8px;
    white-space: nowrap;
    opacity:    0;
    transition: opacity .3s ease, transform .3s ease;
    pointer-events: none;
    direction:  rtl;
    box-shadow: 0 8px 24px rgba(0,0,0,.4);
}
.sr-popup.sr-show{
    opacity:   1;
    transform: translateX(-50%) translateY(0);
}
.sr-popup svg{ flex-shrink:0; }

/* مخفی */
.sr-hidden{ display:none !important; }

/* ── واکنش‌گرا ── */
@media(max-width:480px){
    .sr-wrap{ padding:28px 24px; }
    .sr-title{ font-size:1.25rem; }
    .sr-star svg{ width:32px; height:32px; }
    .sr-stars{ gap:10px; }
}