/* ============================================================
   reviews.css
   ============================================================
   مودال ثبت نظر (reviews-modal.js). لیست خودِ نظرها داخل بخش
   «نظر مشتری‌ها»ی fa/products/product.php رندر می‌شود — همان
   اسکلت/کلاس‌های قالب (dsn-testimonials)، نه کلاس‌های این فایل؛
   دکمه‌ی «ثبت نظر» هم عمداً inline-style است (نه کلاس این‌جا) تا
   ظاهرش به بارگذاری این فایل وابسته نباشد.

   ⚠️ همان زبان طراحی مودال پیکربندی (configurator.css: cfg-scrim/
   cfg-panel) عمداً این‌جا هم تکرار شده تا مودال‌های سایت یک‌دست به
   نظر برسند — ولی با متغیرهای مستقل (rv-*) تا به بارگذاری آن فایل
   وابسته نباشد.
   ============================================================ */

:root {
    --rv-green: #b3de4f;
    --rv-ink:   #22300c;
    --rv-line:  #dcdcdc;
    --rv-mute:  #5c5c5c;
    --rv-panel: #ffffff;
    --rv-scrim: rgba(34, 34, 30, .42);
}

@keyframes rv-fade { from { opacity: 0 } to { opacity: 1 } }
@keyframes rv-rise { from { opacity: 0; transform: translateY(18px) scale(.985) } to { opacity: 1; transform: none } }

/* ============ مودال ثبت نظر ============ */

.rv-scrim {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 18px;
    background: var(--rv-scrim);
    backdrop-filter: blur(3px);
    animation: rv-fade .2s ease;
}

.rv-panel {
    position: relative;
    width: min(480px, 100%);
    max-height: 92vh;
    overflow-y: auto;
    background: var(--rv-panel);
    border-radius: 20px;
    padding: 26px 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
    animation: rv-rise .24s ease;
    direction: rtl;
    font-family: "sf", sans-serif;
}

@media (prefers-reduced-motion: reduce) {
    .rv-scrim, .rv-panel { animation: none }
}

.rv-close {
    position: absolute;
    top: 16px;
    left: 16px;
    width: 34px;
    height: 34px;
    border-radius: 999px;
    border: 1px solid var(--rv-line);
    background: transparent;
    color: var(--rv-mute);
    font-size: 14px;
    cursor: pointer;
}

.rv-close:hover { color: #000; border-color: var(--rv-mute) }

.rv-title {
    margin: 0 0 20px;
    font: 500 18px/1.5 "sf", sans-serif;
    color: #000;
    padding-left: 40px;
}

.rv-field { margin-bottom: 14px; }

.rv-field label {
    display: block;
    font-size: 12px;
    color: var(--rv-mute);
    margin-bottom: 6px;
}

.rv-field input[type="text"],
.rv-field input[type="tel"],
.rv-field textarea {
    width: 100%;
    border: 1px solid var(--rv-line);
    border-radius: 10px;
    padding: 11px 13px;
    font: 400 14px "sf", sans-serif;
    background: #fff;
    color: #000;
}

.rv-field textarea { resize: vertical; min-height: 90px; }

/* امتیاز — رادیوهای پنهان + لیبل‌های ستاره، راست‌به‌چپ */

.rv-stars {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 4px;
}

.rv-stars input { position: absolute; opacity: 0; width: 0; height: 0; }

.rv-stars label {
    cursor: pointer;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.rv-stars label svg { width: 22px; fill: #dcdcdc; transition: fill .12s; }

.rv-stars input:checked ~ label svg,
.rv-stars label:hover svg,
.rv-stars label:hover ~ label svg {
    fill: var(--rv-green);
}

.rv-submit-btn,
.rv-verify-btn {
    width: 100%;
    padding: 13px;
    border-radius: 999px;
    border: none;
    background: var(--rv-ink);
    color: #fff;
    font: 500 14px "sf", sans-serif;
    cursor: pointer;
    margin-top: 6px;
}

.rv-submit-btn:disabled,
.rv-verify-btn:disabled { opacity: .5; cursor: not-allowed; }

.rv-verify-wrap {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    transition: .35s;
}

.rv-verify-wrap.open {
    max-height: 300px;
    opacity: 1;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--rv-line);
}

.rv-edit-mobile {
    display: block;
    width: 100%;
    text-align: center;
    background: none;
    border: none;
    color: var(--rv-mute);
    font-size: 12px;
    margin-top: 10px;
    cursor: pointer;
    text-decoration: underline;
}

.rv-msg {
    font-size: 12.5px;
    color: #b3261e;
    margin: -6px 0 14px;
    min-height: 1em;
}

.rv-success {
    text-align: center;
    padding: 20px 0;
    font: 500 15px "sf", sans-serif;
}