/* =========================================
   DM Advanced Reviews — Core Style
   موتور چیدمانِ خودِ افزونه (گرید، کارت، دکمه، فرم) به‌علاوهٔ استایلِ نمایش دیدگاه‌ها.
   عمداً به بوت‌استرپِ قالبِ سایت وابسته نیست؛ همه‌چیز پایین‌تر در همین فایل تعریف شده
   و زیر ریشهٔ ‎.dm-reviews-wrapper‎ محدود است تا روی بقیهٔ صفحه نشت نکند.
   ========================================= */

/*.dm-reviews-wrapper .flex-wrap {*/
/*    flex-wrap: wrap !important;*/
/*}*/

/*.dm-reviews-wrapper .flex-column {*/
/*    flex-direction: column !important;*/
/*}*/

/*.dm-reviews-wrapper .align-items-center {*/
/*    align-items: center !important;*/
/*}*/

/*.dm-reviews-wrapper .justify-content-between {*/
/*    justify-content: space-between !important;*/
/*}*/

/*.dm-reviews-wrapper .justify-content-center {*/
/*    justify-content: center !important;*/
/*}*/

/*.dm-reviews-wrapper .flex-row-reverse {*/
/*    flex-direction: row-reverse !important;*/
/*}*/

/* =========================================================================
   پایه‌های نبوده. هرکدام یک شکافِ واقعی بود که با ممیزیِ «هر کلاسِ چاپ‌شده قاعده دارد؟»
   پیدا شد.
   ========================================================================= */

/* ⚠ این کلاس را قالبِ سایت تعریف می‌کند، نه هستهٔ وردپرس. روی قالبی که تعریفش نکرده باشد،
   برچسب‌های مخصوص صفحه‌خوان وسطِ فرم دیده می‌شوند. خودمان تعریفش می‌کنیم. */
.dm-reviews-wrapper .screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* اسپینرِ بارگذاری: بدون این قاعده، هیچ‌چیز دیده نمی‌شد. */
.dm-reviews-wrapper .spinner-border {
    display: inline-block;
    width: 2rem;
    height: 2rem;
    vertical-align: middle;
    border: 2.5px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: dm-spin .8s linear infinite;
}

@keyframes dm-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .dm-reviews-wrapper .spinner-border {
        animation-duration: 2.4s;
    }
}

/* ابزارک‌های فاصله‌ای که در مارک‌آپ استفاده شده‌اند ولی تعریف نداشتند. */
.dm-reviews-wrapper .d-block { display: block !important; }
.dm-reviews-wrapper .mt-1 { margin-top: .25rem !important; }
.dm-reviews-wrapper .mx-auto { margin-inline: auto !important; }
.dm-reviews-wrapper .py-2 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.dm-reviews-wrapper .py-3 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.dm-reviews-wrapper .py-5 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
.dm-reviews-wrapper .col-12 { flex: 0 0 auto; width: 100%; }
.dm-reviews-wrapper .border-0 { border: 0 !important; }
.dm-reviews-wrapper .text-decoration-none { text-decoration: none !important; }

/* ظرف‌های شبکه‌ای باید بتوانند کوچک‌تر از محتوایشان شوند، وگرنه ستون سرریز می‌کند. */
.dm-reviews-wrapper .dm-proscons-col,
.dm-reviews-wrapper .dm-tagfield {
    min-width: 0;
}

/* =========================================================================
   لایهٔ دیزاینِ ۳٫۸ — ستاره‌ها، خلاصهٔ امتیاز، نقاط قوت و ضعف، رأی، فرمِ مودال.
   همه زیر ریشهٔ پیشونددار. آیکون‌ها برداریِ درون‌خط‌اند: نه ایموجی، نه فونتِ آیکون.
   رنگ‌ها از متغیرهایی می‌آیند که تنظیماتِ ظاهر مقداردهی‌شان می‌کند، پس تغییر در پنل
   همچنان زنده اعمال می‌شود.
   ========================================================================= */

/* جاوااسکریپت وضعیتِ فلش‌های ناوبریِ کاروسل را با صفتِ hidden کنترل می‌کند؛ بدون این
   قاعده، صفتِ 0-1-0 در برابرِ هر کلاسِ display می‌بازد و چیزی که باید مخفی شود دیده
   می‌ماند. */
.dm-reviews-wrapper [hidden] {
    display: none !important;
}

.dm-reviews-wrapper .dm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
}

/* اندازهٔ آیکون‌ها از تنظیمات می‌آید و جدا برای هر قالب مقداردهی می‌شود
   (Assets::generate_dynamic_css فقط عددِ درستِ قالبِ فعال را در همین متغیرها می‌ریزد). */
.dm-reviews-wrapper .dm-icon-vote svg {
    width: var(--dm-icon-vote-size, 15px) !important;
    height: var(--dm-icon-vote-size, 15px) !important;
}

.dm-reviews-wrapper .dm-star-bg svg,
.dm-reviews-wrapper .dm-star-fg svg,
.dm-reviews-wrapper .dm-bar-star-icon svg {
    width: var(--dm-icon-rating-size, 16px) !important;
    height: var(--dm-icon-rating-size, 16px) !important;
}

.dm-reviews-wrapper .dm-star-rating-lg .stars,
.dm-reviews-wrapper .dm-star-interactive:not(.dm-star-interactive-sm) {
    font-size: var(--dm-icon-modal-star-size, 28px) !important;
}

/* ---------- ستارهٔ فقط‌خواندنی (میانگین) ---------- */

.dm-reviews-wrapper .dm-stars-display {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    direction: ltr;
}

.dm-reviews-wrapper .dm-star-unit {
    position: relative;
    display: inline-flex;
    line-height: 0;
}

.dm-reviews-wrapper .dm-star-bg {
    color: #dcdde3;
}

/* نیم‌ستاره با برشِ افقی ساخته می‌شود، نه با آیکونِ جداگانه. */
.dm-reviews-wrapper .dm-star-fg {
    position: absolute;
    inset: 0;
    color: var(--dm-star-color, #ffc107);
    overflow: hidden;
    width: var(--dm-star-fill, 0%);
}

/* ---------- خلاصهٔ امتیاز ---------- */

.dm-reviews-wrapper .dm-rating-summary,
.dm-reviews-wrapper .dm-rating-summary-dk {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0;
}

.dm-reviews-wrapper .dm-rating-overall,
.dm-reviews-wrapper .dm-rating-overall-dk {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
}

.dm-reviews-wrapper .dm-rating-score {
    font-size: 34px;
    font-weight: 800;
    line-height: 1.1;
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-rating-total {
    font-size: 12px;
    color: var(--dm-text-muted, #6c757d);
}

.dm-reviews-wrapper .dm-rating-bars,
.dm-reviews-wrapper .dm-rating-bars-dk {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    background: var(--dm-card-bg, #ffffff);
    border: 1px solid var(--dm-border, #eeeeee);
    border-radius: var(--dm-radius-tl, 14px) var(--dm-radius-tr, 14px) var(--dm-radius-br, 14px) var(--dm-radius-bl, 14px);
}

.dm-reviews-wrapper .dm-bar-row,
.dm-reviews-wrapper .dm-bar-row-dk {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* برچسبِ ردیف: عدد + آیکون ستاره، به‌جای نوشتنِ کلمهٔ «ستاره» در هر ردیف. */
.dm-reviews-wrapper .dm-bar-label,
.dm-reviews-wrapper .dm-bar-label-dk {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    width: auto;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1;
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-bar-star-num {
    min-width: 9px;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.dm-reviews-wrapper .dm-bar-star-icon {
    color: var(--dm-star-color, #ffc107);
}

.dm-reviews-wrapper .dm-bar-track,
.dm-reviews-wrapper .dm-bar-track-dk {
    position: relative;
    flex: 1 1 auto;
    height: 9px;
    background: #eef0f5;
    border-radius: 99px;
    overflow: hidden;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .06);
}

.dm-reviews-wrapper .dm-bar-fill,
.dm-reviews-wrapper .dm-bar-fill-dk {
    display: block;
    height: 100%;
    border-radius: 99px;
    /* رنگِ تخت اول به‌عنوانِ پشتیبان برای مرورگرهایی که color-mix را نمی‌شناسند؛
       قاعدهٔ دوم (اگر پشتیبانی شود) رویش می‌نشیند و گرادیانِ ظریف را اضافه می‌کند. */
    background: var(--dm-star-color, #ffc107);
    background: linear-gradient(90deg, var(--dm-star-color, #ffc107), color-mix(in srgb, var(--dm-star-color, #ffc107) 75%, #fff));
    transition: width .4s ease;
}

.dm-reviews-wrapper .dm-bar-count,
.dm-reviews-wrapper .dm-bar-count-dk {
    flex: 0 0 auto;
    min-width: 26px;
    text-align: start;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
    color: var(--dm-text-muted, #6c757d);
}

/* ---------- نشان‌های کارت دیدگاه ---------- */

.dm-reviews-wrapper .dm-variant-text {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--dm-text-muted, #6c757d);
}

.dm-reviews-wrapper .dm-variant-name {
    color: var(--dm-text, #212529);
    font-weight: 600;
}

.dm-reviews-wrapper .dm-rec-row {
    /* از نشانِ بالای خودش (خریدار تأیید شده) همان‌قدر فاصله بگیرد که از محتوای پایین */
    margin-top: 10px;
    margin-bottom: 12px;
}

.dm-reviews-wrapper .dm-rec {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 11px;
    border-radius: 99px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid transparent;
}

.dm-reviews-wrapper .dm-rec-yes {
    color: #1f7a4d;
    background: rgba(31, 122, 77, .09);
    border-color: rgba(31, 122, 77, .22);
}

.dm-reviews-wrapper .dm-rec-no {
    color: #c0334d;
    background: rgba(192, 51, 77, .09);
    border-color: rgba(192, 51, 77, .22);
}

/* ---------- نقاط قوت و ضعف در کارت دیدگاه ---------- */

.dm-reviews-wrapper .dm-proscons {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 14px;
    margin-bottom: 14px;
    padding: 14px 16px;
    background: var(--dm-card-bg, #ffffff);
    border: 1px solid var(--dm-border, #eeeeee);
    border-radius: var(--dm-radius-tl, 14px) var(--dm-radius-tr, 14px) var(--dm-radius-br, 14px) var(--dm-radius-bl, 14px);
    box-shadow: 0 1px 2px rgba(20, 20, 30, .03);
}

.dm-reviews-wrapper .dm-proscons-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 9px;
    padding: 0 0 8px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    border-bottom: 1px dashed rgba(0, 0, 0, .08);
}

.dm-reviews-wrapper .dm-proscons-pros .dm-proscons-title {
    color: #1f7a4d;
}

.dm-reviews-wrapper .dm-proscons-cons .dm-proscons-title {
    color: #c0334d;
}

/* هر نقطهٔ قوت/ضعف یک کارتِ کوچکِ مستقل، مینیمال و کمی سه‌بعدی است (سایهٔ نرم به‌جای
   بوردرِ صرف) نه خطی با یک بولت رویِ متن. متنِ خودِ کارت هم‌رنگِ همان دستهٔ قوت/ضعف
   است، نه رنگِ خنثیِ عمومیِ متن، تا در نگاهِ اول مشخص باشد کدام مثبت و کدام منفی است.
   چیدمانِ flex-wrap یعنی موارد کوتاه کنار هم جا می‌گیرند و فضا هدر نمی‌رود؛ حتی اگر
   کاربر ده‌ها مورد بنویسد، بعد از یک ارتفاعِ مشخص خودش اسکرول می‌گیرد. */
.dm-reviews-wrapper .dm-proscons-list {
    margin: 0;
    /* فاصلهٔ داخلیِ کم، پیل‌ها را به لبهٔ جعبه و به هم می‌چسباند */
    padding: 2px;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 10px;
    max-height: 168px;
    overflow-y: auto;
}

.dm-reviews-wrapper .dm-proscons-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    max-width: 100%;
    padding: 9px 14px;
    border-radius: 10px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.7;
    border: 1px solid transparent;
    overflow-wrap: anywhere;
    transition: transform .15s ease, box-shadow .15s ease;
}

.dm-reviews-wrapper .dm-proscons-list li::before {
    content: '';
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    margin-top: .55em;
    border-radius: 50%;
}

.dm-reviews-wrapper .dm-proscons-pros .dm-proscons-list li {
    color: #1f7a4d;
    background: linear-gradient(180deg, rgba(31, 122, 77, .07), rgba(31, 122, 77, .035));
    border-color: rgba(31, 122, 77, .16);
    box-shadow: 0 1px 0 rgba(31, 122, 77, .05), 0 2px 6px rgba(31, 122, 77, .06);
}

.dm-reviews-wrapper .dm-proscons-pros .dm-proscons-list li:hover {
    box-shadow: 0 3px 10px rgba(31, 122, 77, .12);
    transform: translateY(-1px);
}

.dm-reviews-wrapper .dm-proscons-pros .dm-proscons-list li::before {
    background: #1f7a4d;
}

.dm-reviews-wrapper .dm-proscons-cons .dm-proscons-list li {
    color: #c0334d;
    background: linear-gradient(180deg, rgba(192, 51, 77, .07), rgba(192, 51, 77, .035));
    border-color: rgba(192, 51, 77, .16);
    box-shadow: 0 1px 0 rgba(192, 51, 77, .05), 0 2px 6px rgba(192, 51, 77, .06);
}

.dm-reviews-wrapper .dm-proscons-cons .dm-proscons-list li:hover {
    box-shadow: 0 3px 10px rgba(192, 51, 77, .12);
    transform: translateY(-1px);
}

.dm-reviews-wrapper .dm-proscons-cons .dm-proscons-list li::before {
    background: #c0334d;
}

/* اسکرول‌بارِ باریک برای همین جعبه، فقط وقتی محتوا از سقفِ ارتفاع رد شود. */
.dm-reviews-wrapper .dm-proscons-list::-webkit-scrollbar {
    width: 6px;
}

.dm-reviews-wrapper .dm-proscons-list::-webkit-scrollbar-thumb {
    background: var(--dm-border, #e5e5e5);
    border-radius: 10px;
}

/* ---------- دکمه‌های رأی ---------- */

.dm-reviews-wrapper .dm-vote-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dm-reviews-wrapper .dm-vote-question {
    font-size: 12px;
    color: var(--dm-text-muted, #6c757d);
    margin-inline-end: 2px;
}

.dm-reviews-wrapper .dm-vote-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border: 1px solid #e3e5ea;
    border-radius: var(--dm-vote-radius, 99px);
    background: #fff;
    color: var(--dm-text-muted, #6c757d);
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    box-shadow: none;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.dm-reviews-wrapper .dm-vote-btn:hover {
    border-color: #cfd3db;
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-vote-btn.is-active.dm-vote-up {
    color: #1f7a4d;
    border-color: rgba(31, 122, 77, .35);
    background: rgba(31, 122, 77, .07);
}

.dm-reviews-wrapper .dm-vote-btn.is-active.dm-vote-down {
    color: #c0334d;
    border-color: rgba(192, 51, 77, .35);
    background: rgba(192, 51, 77, .07);
}

.dm-reviews-wrapper .dm-vote-btn:focus-visible,
.dm-reviews-wrapper .dm-tag-remove:focus-visible,
.dm-reviews-wrapper .dm-tag-add:focus-visible {
    outline: 2px solid var(--dm-primary, #ffc107);
    outline-offset: 2px;
}

/* =========================================================================
   فرمِ ثبت دیدگاه داخل پنجره — ساختار بخش‌بندی‌شده با فاصله‌های یکنواخت.
   ========================================================================= */

.dm-reviews-wrapper .dm-modal-body {
    padding: 0;
    max-height: 68vh;
    overflow-y: auto;
}

.dm-reviews-wrapper .dm-modal-grid {
    display: flex;
    align-items: stretch;
    gap: 0;
}

.dm-reviews-wrapper .dm-modal-product-info-col {
    flex: 0 0 176px;
    width: 176px;
    padding: 22px 18px;
    text-align: center;
    background: #fafbfc;
    border-inline-end: 1px solid #eceef3;
}

.dm-reviews-wrapper .dm-modal-thumb {
    max-width: 108px;
    height: auto;
    border-radius: 10px;
    margin-bottom: 10px;
}

.dm-reviews-wrapper .dm-modal-product-title {
    margin: 0;
    padding: 0;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.9;
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-modal-form-col {
    flex: 1 1 auto;
    min-width: 0;
    padding: 6px 22px 22px;
}

/* هر بخش یک واحدِ مستقل با مرزِ نرم؛ قبلاً همه‌چیز بدون فاصله پشت هم می‌چسبید. */
.dm-reviews-wrapper .dm-form-section {
    padding: 18px 0;
    border-bottom: 1px solid #f0f1f4;
}

.dm-reviews-wrapper .dm-form-section:last-child {
    border-bottom: 0;
    padding-bottom: 4px;
}

.dm-reviews-wrapper .dm-form-legend {
    margin: 0 0 12px;
    padding: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
}

.dm-reviews-wrapper .dm-field-full {
    grid-column: 1 / -1;
}

.dm-reviews-wrapper .dm-field-label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-req {
    color: #c0334d;
}

.dm-reviews-wrapper .dm-field-hint {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.9;
    color: var(--dm-text-muted, #6c757d);
}

.dm-reviews-wrapper .dm-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid #e3e5ea;
    border-radius: var(--dm-radius-tl, 9px) var(--dm-radius-tr, 9px) var(--dm-radius-br, 9px) var(--dm-radius-bl, 9px);
    background: #fff;
    font-family: inherit;
    font-size: 13px;
    line-height: 1.7;
    color: var(--dm-text, #212529);
    box-shadow: none;
}

.dm-reviews-wrapper .dm-input:focus {
    border-color: var(--dm-primary, #ffc107);
    outline: 2px solid rgba(0, 0, 0, .04);
    outline-offset: 0;
    box-shadow: none;
}

.dm-reviews-wrapper .dm-textarea {
    resize: vertical;
    min-height: 96px;
}

.dm-reviews-wrapper .dm-file {
    padding: 7px 10px;
    font-size: 12px;
}

/* --- ستارهٔ ورودی --- */

.dm-reviews-wrapper .dm-star-rating-input .stars {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    direction: rtl;
    font-size: 22px;
    color: #dcdde3;
}

/* رنگِ ستارهٔ خالی؛ رنگِ پرشده در Assets::generate_dynamic_css از رنگِ اصلیِ تنظیمات
   می‌آید (با !important، چون قبلاً جاوااسکریپت این رنگ را درون‌خطی و ثابت می‌گذاشت). */
.dm-reviews-wrapper .dm-star-btn.dashicons-star-empty {
    color: #e0e0e0;
}

.dm-reviews-wrapper .dm-rate-section {
    text-align: center;
}

.dm-reviews-wrapper .dm-star-rating-lg .stars {
    gap: 9px;
    font-size: 30px;
}

.dm-reviews-wrapper .dm-criteria-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-reviews-wrapper .dm-criteria-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 9px 12px;
    background: #fafbfc;
    border: 1px solid #f0f1f4;
    border-radius: 9px;
}

.dm-reviews-wrapper .dm-criteria-label {
    font-size: 12.5px;
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-criteria-row .stars {
    font-size: 18px;
    gap: 4px;
}

/* --- برچسب‌های نقاط قوت و ضعف در فرم --- */

.dm-reviews-wrapper .dm-tagfield-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.dm-reviews-wrapper .dm-label-pro {
    color: #1f7a4d;
}

.dm-reviews-wrapper .dm-label-con {
    color: #c0334d;
}

.dm-reviews-wrapper .dm-tag-input-row {
    display: flex;
    align-items: stretch;
    gap: 6px;
}

.dm-reviews-wrapper .dm-tag-add {
    flex: 0 0 auto;
    width: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #e3e5ea;
    border-radius: 9px;
    background: #fff;
    color: var(--dm-text-muted, #6c757d);
    cursor: pointer;
    box-shadow: none;
}

.dm-reviews-wrapper .dm-tag-add:hover {
    border-color: var(--dm-primary, #ffc107);
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 9px;
}

.dm-reviews-wrapper .dm-tag-list:empty {
    margin-top: 0;
}

.dm-reviews-wrapper .dm-tag-limit-hint {
    margin: 6px 0 0;
    font-size: 11px;
    color: #c0334d;
}

.dm-reviews-wrapper .dm-tag-limit-hint:empty {
    display: none;
}

.dm-reviews-wrapper .dm-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 100%;
    padding: 5px 6px 5px 10px;
    border-radius: 99px;
    font-size: 12px;
    line-height: 1.6;
    border: 1px solid transparent;
}

.dm-reviews-wrapper .dm-tag-text {
    overflow-wrap: anywhere;
}

.dm-reviews-wrapper .dm-tag-pro {
    color: #1f7a4d;
    background: rgba(31, 122, 77, .1);
    border-color: rgba(31, 122, 77, .22);
}

.dm-reviews-wrapper .dm-tag-con {
    color: #c0334d;
    background: rgba(192, 51, 77, .1);
    border-color: rgba(192, 51, 77, .22);
}

.dm-reviews-wrapper .dm-tag-remove {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(0, 0, 0, .07);
    color: inherit;
    cursor: pointer;
    box-shadow: none;
}

.dm-reviews-wrapper .dm-tag-remove:hover {
    background: rgba(0, 0, 0, .16);
}

/* --- چک‌باکس‌های سفارشی --- */

.dm-reviews-wrapper .dm-check-section {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}

.dm-reviews-wrapper .dm-check {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    cursor: pointer;
}

.dm-reviews-wrapper .dm-check input {
    position: absolute;
    inset-inline-start: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    opacity: 0;
    margin: 0;
    cursor: pointer;
}

.dm-reviews-wrapper .dm-check-box {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    border: 1.5px solid #d5d8de;
    border-radius: 5px;
    background: #fff;
    position: relative;
    transition: background-color .15s ease, border-color .15s ease;
}

.dm-reviews-wrapper .dm-check-box::after {
    content: '';
    position: absolute;
    inset-inline-start: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    opacity: 0;
}

.dm-reviews-wrapper .dm-check input:checked + .dm-check-box {
    background: var(--dm-primary, #ffc107);
    border-color: var(--dm-primary, #ffc107);
}

.dm-reviews-wrapper .dm-check input:checked + .dm-check-box::after {
    opacity: 1;
}

.dm-reviews-wrapper .dm-check input:focus-visible + .dm-check-box {
    outline: 2px solid var(--dm-primary, #ffc107);
    outline-offset: 2px;
}

/* --- سربرگ و پانوشتِ پنجره --- */

.dm-reviews-wrapper .dm-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    border-bottom: 1px solid #eceef3;
}

.dm-reviews-wrapper .dm-modal-title {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--dm-text, #212529);
}

.dm-reviews-wrapper .dm-modal-step {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: var(--dm-text-muted, #6c757d);
}

.dm-reviews-wrapper .dm-modal-close {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #f2f3f6;
    color: var(--dm-text, #212529);
    cursor: pointer;
    box-shadow: none;
}

.dm-reviews-wrapper .dm-modal-close::before {
    content: none;
}

.dm-reviews-wrapper .dm-modal-close:hover {
    background: #e7e9ee;
}

.dm-reviews-wrapper .dm-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 14px 22px;
    border-top: 1px solid #eceef3;
    background: #fafbfc;
}

.dm-reviews-wrapper .dm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 22px;
    border: 1px solid transparent;
    border-radius: var(--dm-radius-tl, 9px) var(--dm-radius-tr, 9px) var(--dm-radius-br, 9px) var(--dm-radius-bl, 9px);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    box-shadow: none;
    text-decoration: none;
}

.dm-reviews-wrapper .dm-btn-ghost {
    background: #fff;
    border-color: #e3e5ea;
    color: var(--dm-text-muted, #6c757d);
}

.dm-reviews-wrapper .dm-btn-ghost:hover {
    color: var(--dm-text, #212529);
    border-color: #cfd3db;
}

.dm-reviews-wrapper .dm-btn-next {
    background: #ef394e;
    color: #fff;
}

.dm-reviews-wrapper .dm-btn-submit {
    background: #1f7a4d;
    color: #fff;
}

.dm-reviews-wrapper .dm-btn:focus-visible {
    outline: 2px solid var(--dm-primary, #ffc107);
    outline-offset: 2px;
}

.dm-reviews-wrapper .dm-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
}

@media (max-width: 700px) {
    .dm-reviews-wrapper .dm-modal-grid {
        flex-direction: column;
    }

    .dm-reviews-wrapper .dm-modal-product-info-col {
        flex: 0 0 auto;
        width: 100%;
        border-inline-end: 0;
        border-bottom: 1px solid #eceef3;
        padding: 14px;
    }

    .dm-reviews-wrapper .dm-modal-form-col {
        padding: 4px 16px 16px;
    }

    .dm-reviews-wrapper .dm-criteria-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}

/* بازوبستهٔ فرم دیدگاه — جایگزین کلاس collapse بوت‌استرپ که افزونه را به قالب سایت وابسته می‌کرد. */
.dm-reviews-wrapper .dm-collapse {
    display: none;
}

.dm-reviews-wrapper .dm-collapse.is-open {
    display: block;
}

.dm-reviews-wrapper .gap-1 {
    gap: 0.25rem !important;
}

.dm-reviews-wrapper .gap-2 {
    gap: 0.5rem !important;
}

.dm-reviews-wrapper .gap-3 {
    gap: 1rem !important;
}

/* Spacing */
.dm-reviews-wrapper .m-0 {
    margin: 0 !important;
}

.dm-reviews-wrapper .mt-2 {
    margin-top: 0.5rem !important;
}

.dm-reviews-wrapper .mt-3 {
    margin-top: 1rem !important;
}

.dm-reviews-wrapper .mt-4 {
    margin-top: 1.5rem !important;
}

.dm-reviews-wrapper .my-5 {
    margin-top: 3rem !important;
    margin-bottom: 3rem !important;
}

.dm-reviews-wrapper .mb-1 {
    margin-bottom: 0.25rem !important;
}

.dm-reviews-wrapper .mb-2 {
    margin-bottom: 0.5rem !important;
}

.dm-reviews-wrapper .mb-3 {
    margin-bottom: 1rem !important;
}

.dm-reviews-wrapper .mb-4 {
    margin-bottom: 1.5rem !important;
}

.dm-reviews-wrapper .p-0 {
    padding: 0 !important;
}

.dm-reviews-wrapper .p-2 {
    padding: 0.5rem !important;
}

.dm-reviews-wrapper .p-3 {
    padding: 1rem !important;
}

.dm-reviews-wrapper .pb-2 {
    padding-bottom: 0.5rem !important;
}

.dm-reviews-wrapper .pb-3 {
    padding-bottom: 1rem !important;
}

.dm-reviews-wrapper .pt-2 {
    padding-top: 0.5rem !important;
}

.dm-reviews-wrapper .px-2 {
    padding-right: 0.5rem !important;
    padding-left: 0.5rem !important;
}

.dm-reviews-wrapper .px-4 {
    padding-right: 1.5rem !important;
    padding-left: 1.5rem !important;
}

/*!* Visuals *!*/
/*.dm-reviews-wrapper .border {*/
/*    border: 1px solid #dee2e6 !important;*/
/*}*/

/*.dm-reviews-wrapper .border-top {*/
/*    border-top: 1px solid #dee2e6 !important;*/
/*}*/

/*.dm-reviews-wrapper .border-bottom {*/
/*    border-bottom: 1px solid #dee2e6 !important;*/
/*}*/

/*.dm-reviews-wrapper .border-start {*/
/*    border-right: 1px solid #dee2e6 !important;*/
/*}*/

.dm-reviews-wrapper .rounded {
    border-radius: 0.375rem !important;
}

/*.dm-reviews-wrapper .shadow-sm {*/
/*    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;*/
/*}*/

/*.dm-reviews-wrapper .bg-light {*/
/*    background-color: #f8f9fa !important;*/
/*}*/

/*.dm-reviews-wrapper .bg-white {*/
/*    background-color: #fff !important;*/
/*}*/

/*.dm-reviews-wrapper .img-fluid {*/
/*    max-width: 100%;*/
/*    height: auto;*/
/*}*/

/*.dm-reviews-wrapper .sticky-top {*/
/*    position: sticky;*/
/*    top: 20px;*/
/*    z-index: 1020;*/
/*}*/

/*!* Text *!*/
/*.dm-reviews-wrapper .text-center {*/
/*    text-align: center !important;*/
/*}*/

/*.dm-reviews-wrapper .text-end {*/
/*    text-align: left !important;*/
/*}*/

/*.dm-reviews-wrapper .fw-bold {*/
/*    font-weight: 700 !important;*/
/*}*/

/*.dm-reviews-wrapper .small {*/
/*    font-size: 0.875em !important;*/
/*}*/

/*.dm-reviews-wrapper .text-muted {*/
/*    color: #6c757d !important;*/
/*}*/

/*.dm-reviews-wrapper .text-dark {*/
/*    color: #212529 !important;*/
/*}*/

/*.dm-reviews-wrapper .text-success {*/
/*    color: #198754 !important;*/
/*}*/

/*.dm-reviews-wrapper .text-danger {*/
/*    color: #dc3545 !important;*/
/*}*/

/*.dm-reviews-wrapper .text-warning {*/
/*    color: #ffc107 !important;*/
/*}*/

/*.dm-reviews-wrapper .text-secondary {*/
/*    color: #6c757d !important;*/
/*}*/

/*.dm-reviews-wrapper .text-break {*/
/*    word-wrap: break-word !important;*/
/*    word-break: break-word !important;*/
/*}*/

/*!* --- 4. Components --- *!*/
/*.dm-reviews-wrapper .btn {*/
/*    display: inline-block;*/
/*    font-weight: 400 !important;*/
/*    line-height: 1.5;*/
/*    text-align: center;*/
/*    vertical-align: middle;*/
/*    cursor: pointer;*/
/*    user-select: none;*/
/*    border: 1px solid transparent !important;*/
/*    padding: 0.375rem 0.75rem !important;*/
/*    font-size: 1rem !important;*/
/*    border-radius: 0.25rem !important;*/
/*    transition: color .15s ease-in-out, background-color .15s ease-in-out;*/
/*}*/

/*.dm-reviews-wrapper .btn-sm {*/
/*    padding: 0.25rem 0.5rem;*/
/*    font-size: .875rem;*/
/*    border-radius: .2rem;*/
/*}*/

/*.dm-reviews-wrapper .btn-link {*/
/*    font-weight: 400;*/
/*    color: #0d6efd;*/
/*    text-decoration: none;*/
/*    border: none;*/
/*    background: none;*/
/*}*/

/*.dm-reviews-wrapper .btn-link:hover {*/
/*    color: #0a58ca;*/
/*}*/

/*.dm-reviews-wrapper .btn-danger {*/
/*    color: #fff;*/
/*    background-color: #dc3545;*/
/*    border-color: #dc3545;*/
/*}*/

/*.dm-reviews-wrapper .btn-success {*/
/*    color: #fff;*/
/*    background-color: #198754;*/
/*    border-color: #198754;*/
/*}*/

/*.dm-reviews-wrapper .btn-secondary {*/
/*    color: #fff;*/
/*    background-color: #6c757d;*/
/*    border-color: #6c757d;*/
/*}*/

/*.dm-reviews-wrapper .btn-outline-secondary {*/
/*    color: #6c757d;*/
/*    border-color: #6c757d;*/
/*    background: transparent;*/
/*}*/

/*.dm-reviews-wrapper .btn-outline-secondary:hover {*/
/*    color: #fff;*/
/*    background-color: #6c757d;*/
/*}*/

/*.dm-reviews-wrapper .btn-outline-danger {*/
/*    color: #dc3545;*/
/*    border-color: #dc3545;*/
/*    background: transparent;*/
/*}*/

/*.dm-reviews-wrapper .w-100 {*/
/*    width: 100% !important;*/
/*}*/

/*.dm-reviews-wrapper .form-control {*/
/*    display: block;*/
/*    width: 100%;*/
/*    padding: 0.375rem 0.75rem;*/
/*    font-size: 1rem;*/
/*    font-weight: 400;*/
/*    line-height: 1.5;*/
/*    color: #212529;*/
/*    background-color: #fff;*/
/*    background-clip: padding-box;*/
/*    border: 1px solid #ced4da;*/
/*    border-radius: 0.25rem;*/
/*    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;*/
/*}*/

/*.dm-reviews-wrapper .form-control:focus {*/
/*    border-color: #86b7fe;*/
/*    outline: 0;*/
/*    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);*/
/*}*/

/*.dm-reviews-wrapper .form-control-sm {*/
/*    min-height: calc(1.5em + .5rem + 2px);*/
/*    padding: .25rem .5rem;*/
/*    font-size: .875rem;*/
/*    border-radius: .2rem;*/
/*}*/

/*.dm-reviews-wrapper .form-select {*/
/*    display: block;*/
/*    width: 100%;*/
/*    padding: .375rem 2.25rem .375rem .75rem;*/
/*    font-size: 1rem;*/
/*    font-weight: 400;*/
/*    line-height: 1.5;*/
/*    color: #212529;*/
/*    background-color: #fff;*/
/*    border: 1px solid #ced4da;*/
/*    border-radius: .25rem;*/
/*}*/

/*.dm-reviews-wrapper .form-label {*/
/*    margin-bottom: .5rem;*/
/*}*/

/*.dm-reviews-wrapper .alert {*/
/*    position: relative;*/
/*    padding: 1rem 1rem;*/
/*    margin-bottom: 1rem;*/
/*    border: 1px solid transparent;*/
/*    border-radius: .25rem;*/
/*}*/

/*.dm-reviews-wrapper .alert-secondary {*/
/*    color: #41464b;*/
/*    background-color: #e2e3e5;*/
/*    border-color: #d3d6d8;*/
/*}*/

/*.dm-reviews-wrapper .alert-warning {*/
/*    color: #664d03;*/
/*    background-color: #fff3cd;*/
/*    border-color: #ffecb5;*/
/*}*/

/*.dm-reviews-wrapper .alert-light {*/
/*    color: #636464;*/
/*    background-color: #fefefe;*/
/*    border-color: #fdfdfe;*/
/*}*/

/*.dm-reviews-wrapper .card {*/
/*    position: relative;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*    min-width: 0;*/
/*    word-wrap: break-word;*/
/*    background-color: #fff;*/
/*    background-clip: border-box;*/
/*    border: 1px solid rgba(0, 0, 0, .125);*/
/*    border-radius: .25rem;*/
/*}*/

/*.dm-reviews-wrapper .card-body {*/
/*    flex: 1 1 auto;*/
/*    padding: 15px;*/
/*}*/

/*.dm-reviews-wrapper .badge {*/
/*    display: inline-block;*/
/*    padding: .35em .65em;*/
/*    font-size: .75em;*/
/*    font-weight: 700;*/
/*    line-height: 1;*/
/*    color: #000;*/
/*    text-align: center;*/
/*    white-space: nowrap;*/
/*    vertical-align: baseline;*/
/*    border-radius: .25rem;*/
/*}*/

/*.dm-reviews-wrapper .btn-close {*/
/*    box-sizing: content-box;*/
/*    width: 1em;*/
/*    height: 1em;*/
/*    padding: .25em .25em;*/
/*    color: #000;*/
/*    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;*/
/*    border: 0;*/
/*    border-radius: .25rem;*/
/*    opacity: .5;*/
/*    cursor: pointer;*/
/*}*/

/*!* =========================================*/
/*   5. Star Rating System (Updated)*/
/*   ========================================= *!*/
/*.dm-star-interactive {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*    direction: ltr !important; !* فیکس جهت ستاره‌ها *!*/
/*    gap: 2px;*/
/*}*/

/*.dm-star-interactive .dashicons {*/
/*    font-family: "dashicons";*/
/*    font-size: inherit;*/
/*    width: auto;*/
/*    height: auto;*/
/*    line-height: 1;*/
/*    cursor: pointer;*/
/*    transition: transform 0.1s ease, color 0.2s;*/
/*    vertical-align: middle;*/
/*}*/

/*.dm-star-interactive .dashicons:hover {*/
/*    transform: scale(1.2);*/
/*}*/

/*!* ستاره‌های فقط نمایش (Read-only) *!*/
/*.dm-stars-display {*/
/*    display: inline-flex;*/
/*    direction: ltr !important;*/
/*    gap: 1px;*/
/*}*/

/*.dm-stars-display .dashicons {*/
/*    font-size: inherit;*/
/*    width: auto;*/
/*    height: auto;*/
/*    line-height: 1;*/
/*}*/

/*!* =========================================*/
/*   6. Core Modal Styles*/
/*   ========================================= *!*/
/*.dm-modal {*/
/*    display: none;*/
/*    position: fixed;*/
/*    z-index: 100050;*/
/*    left: 0;*/
/*    top: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*    overflow-x: hidden;*/
/*    overflow-y: auto;*/
/*    outline: 0;*/
/*}*/

/*.dm-modal-backdrop {*/
/*    position: fixed;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100vw;*/
/*    height: 100vh;*/
/*    background-color: rgba(0, 0, 0, 0.5);*/
/*    z-index: 100051;*/
/*}*/

/*.dm-modal-content {*/
/*    position: relative;*/
/*    background-color: #fff;*/
/*    margin: 30px auto;*/
/*    border-radius: 8px;*/
/*    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);*/
/*    width: 95%;*/
/*    max-width: 700px;*/
/*    z-index: 100052;*/
/*    display: flex;*/
/*    flex-direction: column;*/
/*}*/

/*!* Responsive Modal *!*/
/*@media (min-width: 576px) {*/
/*    .dm-modal-content {*/
/*        margin: 50px auto;*/
/*    }*/
/*}*/

/*.dm-reviews-wrapper .dashicons,*/
/*.dm-reviews-wrapper .dashicons-before::before {*/
/*    font-family: 'dashicons' !important;*/
/*    font-weight: normal !important;*/
/*    font-style: normal !important;*/
/*    line-height: 1 !important;*/
/*    -webkit-font-smoothing: antialiased;*/
/*    -moz-osx-font-smoothing: grayscale;*/
/*}*/

/*.dm-reviews-wrapper .dashicons-star-half {*/
/*    transform: scaleX(-1);*/
/*    display: inline-block;*/
/*}*/


.dm-reviews-wrapper {
    direction: rtl;
    text-align: right;
    font-family: inherit;
    line-height: 1.6;
    box-sizing: border-box;
    width: 100%;
    color: #333333;
}

.dm-reviews-wrapper *,
.dm-reviews-wrapper *::before,
.dm-reviews-wrapper *::after {
    box-sizing: border-box !important;
}

.dm-reviews-wrapper ul,
.dm-reviews-wrapper li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.dm-reviews-wrapper a {
    text-decoration: none !important;
    box-shadow: none !important;
}

.dm-reviews-wrapper .row {
    display: flex;
    flex-wrap: wrap;
    margin-right: -12px;
    margin-left: -12px;
}

.dm-reviews-wrapper .row > * {
    padding-right: 12px;
    padding-left: 12px;
    width: 100%;
    max-width: 100%;
}

.dm-reviews-wrapper .col-6 {
    width: 50%;
}

@media (min-width: 768px) {
    .dm-reviews-wrapper .col-md-4 {
        width: 33.333333%;
    }

    .dm-reviews-wrapper .col-md-6 {
        width: 50%;
    }

    .dm-reviews-wrapper .col-md-8 {
        width: 66.666667%;
    }

    .dm-reviews-wrapper .d-md-block {
        display: block !important;
    }
}

@media (min-width: 992px) {
    /* یک پله از عرضِ ستونِ خلاصه/فرم کم و به ستونِ دیدگاه‌ها اضافه شد؛ فقط در دسکتاپ. */
    .dm-reviews-wrapper .col-lg-3 {
        width: 30%;
    }

    .dm-reviews-wrapper .col-lg-9 {
        width: 70%;
    }
}

.dm-reviews-wrapper .d-flex {
    display: flex !important;
}

.dm-reviews-wrapper .d-none {
    display: none !important;
}

.dm-reviews-wrapper .flex-wrap {
    flex-wrap: wrap !important;
}

.dm-reviews-wrapper .flex-column {
    flex-direction: column !important;
}

.dm-reviews-wrapper .align-items-center {
    align-items: center !important;
}

.dm-reviews-wrapper .justify-content-between {
    justify-content: space-between !important;
}

.dm-reviews-wrapper .justify-content-center {
    justify-content: center !important;
}

.dm-reviews-wrapper .m-0 {
    margin: 0 !important;
}

.dm-reviews-wrapper .mt-2 {
    margin-top: 8px !important;
}

.dm-reviews-wrapper .mt-4 {
    margin-top: 24px !important;
}

.dm-reviews-wrapper .my-5 {
    margin-top: 40px !important;
    margin-bottom: 40px !important;
}

.dm-reviews-wrapper .mb-1 {
    margin-bottom: 4px !important;
}

.dm-reviews-wrapper .mb-2 {
    margin-bottom: 8px !important;
}

.dm-reviews-wrapper .mb-3 {
    margin-bottom: 16px !important;
}

.dm-reviews-wrapper .mb-4 {
    margin-bottom: 24px !important;
}

.dm-reviews-wrapper .pb-4 {
    padding-bottom: 24px !important;
}

.dm-reviews-wrapper .mb-5 {
    margin-bottom: 32px !important;
}

.dm-reviews-wrapper .p-4 {
    padding: 24px !important;
}

.dm-reviews-wrapper .px-2 {
    padding-right: 8px !important;
    padding-left: 8px !important;
}

.dm-reviews-wrapper .px-5 {
    padding-right: 32px !important;
    padding-left: 32px !important;
}

.dm-reviews-wrapper .pb-3 {
    padding-bottom: 16px !important;
}

.dm-reviews-wrapper .display-1 {
    font-size: 48px;
    font-weight: 900;
    line-height: 1.2;
    color: #111111;
}

.dm-reviews-wrapper .fw-bold {
    font-weight: 800 !important;
}

.dm-reviews-wrapper .small {
    font-size: 13px !important;
}

.dm-reviews-wrapper .text-center {
    text-align: center !important;
}

.dm-reviews-wrapper .text-end {
    text-align: left !important;
}

.dm-reviews-wrapper .text-muted {
    color: #888888 !important;
}

.dm-reviews-wrapper .text-danger {
    color: #ef4444 !important;
}

.dm-reviews-wrapper .text-success {
    color: #10b981 !important;
}

.dm-reviews-wrapper .border-bottom {
    border-bottom: 1px solid #f0f0f0 !important;
}

.dm-reviews-wrapper .border-start {
    border-right: 1px solid #f0f0f0 !important;
}

.dm-reviews-wrapper .sticky-top {
    position: sticky;
    top: 24px;
    z-index: 10;
}

.dm-reviews-wrapper .card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: var(--dm-radius-tl, 16px) var(--dm-radius-tr, 16px) var(--dm-radius-br, 16px) var(--dm-radius-bl, 16px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.dm-reviews-wrapper .card-body {
    padding: 24px;
    flex: 1 1 auto;
}

/* جعبهٔ خلاصه/فرمِ سمتِ راست و کارت‌های نظراتِ سمتِ چپ هر دو فرزندِ همان .row فلکسی‌اند
   (پیش‌فرضِ flex یعنی align-items:stretch)، پس دو ستون از قبل هم‌ارتفاع‌اند. آنچه کم بود
   پرکردنِ همان ارتفاع توسط خودِ کارت بود؛ height:100% روی پدرِ بدونِ ارتفاعِ معین اثری
   ندارد (auto می‌شود)، پس این قاعده فقط جایی که واقعاً کشیده شده اثر می‌کند. */
.dm-reviews-wrapper .dm-summary-card {
    height: 100%;
}

.dm-reviews-wrapper .dm-summary-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.dm-reviews-wrapper .dm-summary-cta {
    margin-top: auto;
}

.dm-reviews-wrapper .bg-light {
    background-color: #fff !important;
}

.dm-reviews-wrapper .form-label {
    display: block;
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: 700;
    color: #333333;
}

.dm-reviews-wrapper .form-control {
    width: 100%;
    padding: 12px 16px;
    font-size: 14px;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #444444;
    border-radius: 12px;
    transition: all 0.3s ease;
    font-family: inherit;
    outline: none;
}

.dm-reviews-wrapper .form-control:focus {
    border-color: var(--dm-primary);
    box-shadow: 0 0 0 3px #2f8f8a1f;
}

.dm-reviews-wrapper textarea.form-control {
    resize: vertical;
    min-height: 120px;
}

.dm-reviews-wrapper input[type="file"].form-control {
    padding: 10px 16px;
    font-size: 12px;
    color: #888888;
}

.dm-reviews-wrapper .input-group {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.dm-reviews-wrapper .input-group .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-left: none;
}

.dm-reviews-wrapper .input-group .btn {
    margin: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    background: #fbfbfb;
    border: 1px solid #e5e5e5;
    padding: 0 16px;
}

.dm-reviews-wrapper .btn-outline-success {
    color: #10b981;
    border-color: #e5e5e5;
}

.dm-reviews-wrapper .btn-outline-danger {
    color: #ef4444;
    border-color: #e5e5e5;
}

.dm-reviews-wrapper .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    font-size: 14px;
    font-weight: 800;
    border-radius: 12px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    font-family: inherit;
}

.dm-reviews-wrapper .btn-sm {
    padding: 8px 16px;
    font-size: 12px;
}

.dm-reviews-wrapper .btn-primary {
    background: var(--dm-primary);
    color: #ffffff;
}

.dm-reviews-wrapper .btn-primary:hover {
    opacity: 0.9;
}

.dm-reviews-wrapper .btn-group {
    display: flex;
    gap: 8px;
    width: 100%;
}

.dm-reviews-wrapper .btn-check {
    display: none;
}

.dm-reviews-wrapper .btn-group label.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    background: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: var(--dm-recommend-radius, 10px);
    color: #666666;
    padding: 12px 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease;
}

.dm-reviews-wrapper .btn-check:checked + label.btn-outline-success {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10b981;
    color: #10b981;
}

.dm-reviews-wrapper .btn-check:checked + label.btn-outline-secondary {
    background: #f0f0f0;
    border-color: #aaaaaa;
    color: #333333;
}

.dm-reviews-wrapper .btn-check:checked + label.btn-outline-danger {
    background: rgba(239, 68, 68, 0.1);
    border-color: #ef4444;
    color: #ef4444;
}

.dm-reviews-wrapper .form-check {
    display: flex;
    align-items: center;
    gap: 8px;
}

.dm-reviews-wrapper .form-check-input {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
}

.dm-reviews-wrapper .alert {
    padding: 16px;
    border-radius: 12px;
    margin-bottom: 24px;
    font-size: 14px;
    font-weight: 700;
}

.dm-reviews-wrapper .alert-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid #10b981;
    color: #10b981;
}

.dm-reviews-wrapper .dm-stars-display {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    direction: rtl !important;
    font-size: 24px;
}

.dm-reviews-wrapper .dm-star-interactive {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    direction: ltr;
    color: #e0e0e0;
    font-size: 28px;
    cursor: pointer;
}

.dm-reviews-wrapper .dm-star-interactive-sm {
    font-size: 20px;
}

/* ستاره‌ها دکمهٔ واقعی‌اند تا با صفحه‌کلید کار کنند؛ این قاعده ظاهرِ پیش‌فرضِ دکمه را
   برمی‌دارد تا دقیقاً مثل قبل (span) دیده شوند. */
.dm-reviews-wrapper .dm-star-btn {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    color: inherit;
    font-size: inherit;
    line-height: 1;
    width: auto;
    height: auto;
    min-width: 0;
    min-height: 0;
    cursor: pointer;
    box-shadow: none;
    text-shadow: none;
}

.dm-reviews-wrapper .dm-star-btn:focus-visible {
    outline: 2px solid var(--dm-primary, #ffc107);
    outline-offset: 2px;
    border-radius: 3px;
}

.dm-reviews-wrapper .dashicons,
.dm-reviews-wrapper .dashicons-before::before {
    font-family: 'dashicons' !important;
    font-weight: normal !important;
    font-style: normal !important;
    line-height: 1 !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.dm-reviews-wrapper .dashicons-star-half {
    transform: scaleX(-1);
    display: inline-block;
}

#dm-review-filters .btn {
    background: #ffffff;
    border: 1px solid #e5e5e5;
    color: #888888;
    border-radius: 10px;
}

#dm-review-filters .btn.active {
    background: var(--dm-primary);
    color: #ffffff;
    border-color: var(--dm-primary);
}


/* ============================================================
   DARK MODE OVERRIDES (Using Global Variables)
   ============================================================ */
body.theme-dark .dm-reviews-wrapper {
    color: var(--dm-text) !important;
}

body.theme-dark .dm-reviews-wrapper .card {
    background-color: var(--dm-card-bg) !important;
    border-color: var(--dm-border) !important;
}

body.theme-dark .dm-reviews-wrapper .bg-light {
    background-color: var(--dm-bg-soft) !important;
}

body.theme-dark .dm-reviews-wrapper .border-bottom,
body.theme-dark .dm-reviews-wrapper .border-start {
    border-color: var(--dm-border) !important;
}

body.theme-dark .dm-reviews-wrapper .text-muted {
    color: var(--dm-text-muted) !important;
}

body.theme-dark .dm-reviews-wrapper .display-1,
body.theme-dark .dm-reviews-wrapper h4,
body.theme-dark .dm-reviews-wrapper h5,
body.theme-dark .dm-reviews-wrapper .form-label {
    color: var(--dm-text) !important;
}

body.theme-dark .dm-reviews-wrapper .form-control {
    background-color: var(--dm-border) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text) !important;
}

body.theme-dark .dm-reviews-wrapper .form-control:focus {
    border-color: var(--dm-primary) !important;
    box-shadow: 0 0 0 3px rgba(242, 167, 5, 0.15) !important;
}

body.theme-dark .dm-reviews-wrapper .input-group .btn {
    background-color: var(--dm-card-bg) !important;
    border-color: var(--dm-border) !important;
}

body.theme-dark .dm-reviews-wrapper .btn-primary {
    background-color: var(--dm-primary) !important;
    color: var(--dm-action-text, #ffffff) !important;
}

body.theme-dark .dm-reviews-wrapper .btn-group label.btn {
    background-color: var(--dm-bg-soft) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
}

body.theme-dark .dm-reviews-wrapper .btn-check:checked + label.btn-outline-success {
    background-color: var(--dm-success-bg) !important;
    border-color: var(--dm-success-border) !important;
    color: var(--dm-success-color) !important;
}

body.theme-dark .dm-reviews-wrapper .btn-check:checked + label.btn-outline-secondary {
    background-color: var(--dm-border) !important;
    border-color: var(--dm-text-muted) !important;
    color: var(--dm-text) !important;
}

body.theme-dark .dm-reviews-wrapper .alert-success {
    background-color: var(--dm-success-bg) !important;
    border-color: var(--dm-success-border) !important;
    color: var(--dm-success-color) !important;
}

body.theme-dark .dm-reviews-wrapper .dm-star-interactive {
    color: var(--dm-border) !important;
}

body.theme-dark #dm-review-filters .btn {
    background-color: var(--dm-card-bg) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text-muted) !important;
    padding: 6px !important;
}

body.theme-dark #dm-review-filters .btn.active {
    background-color: var(--dm-primary) !important;
    border-color: var(--dm-primary) !important;
    color: var(--dm-action-text, #ffffff) !important;
}

/* ============================================================
   بخش نمودار نظرات (Rating Summary) - دو ستونه
   ============================================================ */

.dm-rating-summary {
    display: flex;
    gap: 20px;
    align-items: center;
    border-radius: 16px; /* هماهنگ با کارت‌های شما */
    background: var(--dm-bg-base);
    margin-bottom: 24px;
}

/* flex:1 وقتی والد چیدمانِ ردیفی نباشد هیچ اثری ندارد و جعبه به عرضِ محتوایش جمع
   می‌شود — همان چیزی که در پوستهٔ مدرن دیده می‌شد. عرضِ صریح این وابستگی را حذف می‌کند. */
.dm-rating-bars {
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

.dm-bar-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.dm-bar-count {
    font-size: 12px;
    font-weight: 700;
    width: 20px;
    color: var(--dm-text);
}

.dm-bar-label {
    font-size: 11px;
    width: 50px;
    color: var(--dm-text-muted);
    white-space: nowrap;
}

.dm-bar-track {
    flex: 1;
    height: 8px;
    background: var(--dm-border);
    border-radius: 4px;
    overflow: hidden;
}

.dm-bar-fill {
    height: 100%;
    background: var(--dm-primary);
    border-radius: 4px;
    transition: width 0.5s ease-out;
}

.dm-rating-overall {
    text-align: center;
    min-width: 100px;
}

.dm-rating-avg {
    font-size: 36px;
    font-weight: 900;
    line-height: 1;
    color: var(--dm-text);
}

.dm-rating-stars {
    color: var(--dm-primary);
    font-size: 16px;
    margin: 4px 0;
}

.dm-rating-total {
    font-size: 12px;
    color: var(--dm-text-muted);
}

/* تنظیم استایل ستاره‌های بخش میانگین */
body .dm-rating-stars {
    display: inline-flex;
    direction: rtl !important; /* جهت نمایش صحیح ستاره‌های نیمه */
    gap: 2px;
}

body .dm-rating-stars .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ریسپانسیو برای موبایل */
@media (max-width: 576px) {
    .dm-rating-summary {
        flex-direction: column-reverse;
        gap: 15px;
    }
    .dm-rating-bars { width: 100%; }
}

/* تنظیمات اختصاصی برای تم دارک (در صورت نیاز به اعمال دستی) */
body.theme-dark .dm-rating-summary {
    border-color: var(--dm-border);
}

body.theme-dark .dm-reviews-wrapper .btn-sm {
    background-color: var(--dm-border);
}

/* ============================================================
   استایل باکس پاسخ مدیریت (قالب مدرن)
   ============================================================ */

/* باکس اصلی پاسخ */
.dm-reviews-wrapper .dm-admin-reply-box {
    background-color: #f4f6f8; /* رنگ پس‌زمینه لایت */
    border: 1px solid #eeeeee;
    border-radius: var(--dm-radius-tl, 12px) var(--dm-radius-tr, 12px) var(--dm-radius-br, 12px) var(--dm-radius-bl, 12px);
    padding: 16px !important; /* جایگزین p-3 */
    margin: 16px 0 !important; /* جایگزین mt-3 */
    position: relative;
}

/* برای ایجاد یک فلش کوچک بالای باکس (مثل حباب چت) - اختیاری برای زیبایی */
.dm-reviews-wrapper .dm-admin-reply-box::before {
    content: "";
    position: absolute;
    top: -6px;
    right: 25px; /* در حالت راست‌چین */
    width: 10px;
    height: 10px;
    background-color: inherit;
    border-top: 1px solid #eeeeee;
    border-right: 1px solid #eeeeee;
    transform: rotate(-45deg);
}

/* بج "پاسخ" */
.dm-reviews-wrapper .dm-admin-badge {
    background-color: var(--dm-primary, var(--dm-primary));
    color: #ffffff;
    padding: 9px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

/* نام پاسخ‌دهنده (ادمین) */
.dm-reviews-wrapper .dm-admin-name {
    font-size: 13px;
    font-weight: 800 !important; /* جایگزین fw-bold */
    color: #333333;
}

/* متن پاسخ */
.dm-reviews-wrapper .dm-admin-text {
    font-size: 13px;
    line-height: 1.8;
    color: #555555;
    margin-top: 8px !important;
}

/* ============================================================
   تطبیق یکپارچه پاسخ ادمین با تم تاریک (Dark Theme)
   ============================================================ */

body.theme-dark .dm-reviews-wrapper .dm-admin-reply-box {
    background-color: var(--dm-bg-soft, #1e293b); /* استفاده از متغیر دارک پس‌زمینه */
    border-color: var(--dm-border, #334155);
}

body.theme-dark .dm-reviews-wrapper .dm-admin-reply-box::before {
    border-top-color: var(--dm-border, #334155);
    border-right-color: var(--dm-border, #334155);
}

body.theme-dark .dm-reviews-wrapper .dm-admin-badge {
    color: var(--dm-action-text, #ffffff) !important;
}

body.theme-dark .dm-reviews-wrapper .dm-admin-name {
    color: var(--dm-text, #ffffff) !important;
}

body.theme-dark .dm-reviews-wrapper .dm-admin-text {
    color: var(--dm-text-muted, #94a3b8) !important;
}

/* ============================================================
   فلش‌های ناوبریِ کاروسل — روی هر دو لبه، با پوششِ گرادیانِ ظریف پشتِ آیکون.
   منطقِ نمایش/پنهانی و جهتِ اسکرول در جاوااسکریپت است؛ اینجا فقط ظاهر.
   ============================================================ */
.dm-carousel-shell {
    position: relative;
}

.dm-carousel-nav {
    position: absolute;
    top: 0;
    bottom: 26px; /* هم‌ارتفاع با پدینگِ پایینِ کاروسل، تا روی اسکرول‌بار ننشیند */
    width: 68px;
    display: flex;
    align-items: center;
    border: 0;
    background: transparent;
    padding: 0;
    cursor: pointer;
    z-index: 5;
}

/* «بعدی» روی لبهٔ چپ می‌نشیند (در راست‌به‌چپ = پایانِ منطقی)، «قبلی» روی لبهٔ راست. */
.dm-carousel-nav-next {
    inset-inline-end: 0;
    justify-content: flex-end;
}

.dm-carousel-nav-prev {
    inset-inline-start: 0;
    right: -10px;
    justify-content: flex-start;
}

.dm-carousel-nav-fade {
    position: absolute;
    inset: 0;
    opacity: .9;
    pointer-events: none;
}

/* رنگ از یک متغیرِ خودمان می‌آید (--dm-nav-fade)، نه از --dm-bg-base که هیچ‌جا واقعاً
   مقداردهی نمی‌شد و فقط فال‌بکِ نامنظم داشت؛ حالا از تنظیماتِ ظاهر قابل‌تغییر است و
   واقعاً با پس‌زمینهٔ سایت یکی می‌شود. جهتِ گرادیان فیزیکی نوشته شده (نه منطقی) چون
   رابط کاربریِ این افزونه همیشه راست‌به‌چپ است. */
.dm-carousel-nav-next .dm-carousel-nav-fade {
    background: linear-gradient(to right, var(--dm-nav-fade, #ffffff) 25%, rgba(255, 255, 255, 0) 100%);
}

.dm-carousel-nav-prev .dm-carousel-nav-fade {
    background: linear-gradient(to left, var(--dm-nav-fade, #ffffff) 25%, rgba(255, 255, 255, 0) 100%);
}

.dm-carousel-nav-icon {
    position: relative;
    z-index: 1;
    width: 40px;
    height: 40px;
    margin: 0 14px;
    border-radius: 50%;
    background: var(--dm-card-bg, #ffffff);
    border: 1px solid var(--dm-border, #eeeeee);
    box-shadow: 0 3px 10px rgba(0, 0, 0, .08);
    color: var(--dm-text, #212529);
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.dm-carousel-nav:hover .dm-carousel-nav-icon {
    background: var(--dm-primary, #ffc107);
    border-color: var(--dm-primary, #ffc107);
    color: #fff;
}

.dm-carousel-nav:focus-visible .dm-carousel-nav-icon {
    outline: 2px solid var(--dm-primary, #ffc107);
    outline-offset: 2px;
}

/* دایرهٔ آیکون کمی از لبه بیرون می‌زند تا روی خطِ کارت‌ها شناور به‌نظر برسد. */
.dm-carousel-nav-prev .dm-carousel-nav-icon {
    margin-right: -10px;
}

.dm-carousel-nav-next .dm-carousel-nav-icon {
    margin-left: -10px;
}

@media (max-width: 700px) {
    .dm-carousel-nav {
        width: 48px;
    }

    .dm-carousel-nav-icon {
        width: 34px;
        height: 34px;
        margin: 0 8px;
    }
}

/* ⚠ این بلوک عمداً بعد از بلوکِ ۷۰۰px آمده: آن بلوک روی .dm-carousel-nav-icon یک
   margin کوتاه‌نویسی (هر چهار ضلع) می‌گذارد که مقادیرِ چپ/راستِ اینجا را پاک می‌کرد
   اگر زودتر می‌آمد. زیرِ ۷۰۰px هر دو رسانه هم‌زمان درست‌اند؛ آخرین تعریف در کدِ منبع
   برای هر خصوصیت برنده می‌شود. */
@media (max-width: 992px) {
    .dm-carousel-nav-prev {
        margin-right: -10px;
    }

    .dm-carousel-nav-prev .dm-carousel-nav-icon {
        margin-right: -5px;
    }

    .dm-carousel-nav-next {
        margin-left: -10px;
    }

    .dm-carousel-nav-next .dm-carousel-nav-icon {
        margin-left: -5px;
    }
}

body.theme-dark .dm-carousel-nav-icon {
    background: var(--dm-card-bg, #0f172a);
    border-color: var(--dm-border, #334155);
    color: var(--dm-text, #e2e8f0);
}

body.theme-dark .dm-carousel-nav-next .dm-carousel-nav-fade {
    background: linear-gradient(to right, var(--dm-nav-fade, #0b1220) 25%, rgba(11, 18, 32, 0) 100%);
}

body.theme-dark .dm-carousel-nav-prev .dm-carousel-nav-fade {
    background: linear-gradient(to left, var(--dm-nav-fade, #0b1220) 25%, rgba(11, 18, 32, 0) 100%);
}

/* ============================================================
   کانتینر اسکرول افقی کارت‌های نظرات (قالب مدرن)
   ============================================================ */
.dm-carousel-wrapper {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 20px !important;
    padding: 10px 5px 25px 5px !important;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    align-items: stretch;

    /* ⚠⚠ ضامنِ ضدِ سرریزِ افقی (اندازه‌گیری‌شدهٔ زنده روی یک لندینگِ مشابه: نوارِ
       افقی ۱۴۴۶px در دیدِ ۳۹۰px و body.scrollWidth عددِ ۹۲۹).

       چرا: کارت‌های این ریل flex:0 0 با عرضِ ثابت‌اند و هرگز جمع نمی‌شوند، پس
       min-content کلِ نوار برابرِ مجموعِ کارت‌هاست. آن عدد تا بالا در زنجیرهٔ
       والدها منتشر می‌شود؛ اگر قالبِ میزبان جایی یک آیتمِ فلکس/گرید با
       min-width:auto داشته باشد (مثلِ بلوکِ گروهِ گوتنبرگ که align-items:center
       دارد)، آن آیتم مجبور می‌شود به همان اندازه باز شود و عرضِ کلِ صفحه می‌شکند.
       روی قالبی که همه‌جا عرض را سخت مهار کرده اتفاق نمی‌افتد — پس باگ «فقط روی
       بعضی سایت‌ها» دیده می‌شود.

       ⚠ خودِ overflow-x:auto کافی نیست: اسکرول‌کانتینر بودن، سهمِ min-content این
       عنصر را برای اندازه‌گیریِ والدها صفر نمی‌کند (این را زنده آزمودم؛ min-width:0
       و max-width:100% هیچ اثری نداشتند). contain:inline-size صریحاً اعلام می‌کند
       «عرضِ من به محتوایم وابسته نیست» و همان انتشار را قطع می‌کند. اسکرولِ افقیِ
       داخلیِ خودِ ریل کاملاً دست‌نخورده می‌مانَد. */
    min-width: 0;
    contain: inline-size;
}

/* سفارشی‌سازی اسکرول‌بار */
.dm-carousel-wrapper::-webkit-scrollbar {
    height: 8px;
}
.dm-carousel-wrapper::-webkit-scrollbar-track {
    background: var(--dm-bg-base, #f9fafb);
    border-radius: 10px;
}
.dm-carousel-wrapper::-webkit-scrollbar-thumb {
    background: var(--dm-border, #e5e5e5);
    border-radius: 10px;
}
.dm-carousel-wrapper::-webkit-scrollbar-thumb:hover {
    background: var(--dm-text-muted, #9ca3af);
}

/* حذف ساختار کانتینر میانی برای قرارگیری مستقیم کارت‌ها در ردیف (ترفند اصلی).
   ⚠ فقط داخلِ کاروسل (قالبِ دیجی‌کالا). قالبِ مدرن یک لیستِ عمودیِ ساده است و
   #dm-reviews-container آنجا خودش باید یک جعبهٔ واقعی بماند، نه محو شود. */
.dm-carousel-wrapper #dm-reviews-container {
    display: contents !important;
}

/* استایل کارت‌های نظرات در حالتِ اسکرولِ افقی — فقط داخلِ کاروسل (دیجی‌کالا). */
.dm-carousel-wrapper .dm-review-item {
    flex: 0 0 360px !important; /* عرض ثابت کارت در دسکتاپ */
    max-width: 100% !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    background: var(--dm-card-bg, #ffffff) !important;
    border: 1px solid var(--dm-border, #eeeeee) !important;
    border-radius: var(--dm-radius-tl, 16px) var(--dm-radius-tr, 16px) var(--dm-radius-br, 16px) var(--dm-radius-bl, 16px) !important;
    padding: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03) !important;
    transition: box-shadow 0.3s ease;
}

.dm-carousel-wrapper .dm-review-item:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06) !important;
}

/* محدودکردنِ ارتفاعِ متن، فقط داخلِ کاروسل — چون آنجا کارت‌ها هم‌ارتفاع باید بمانند.
   در لیستِ عمودیِ قالبِ مدرن متن کامل می‌ماند، چیزی جایش را تنگ نمی‌کند. */
.dm-carousel-wrapper .dm-review-item .text-break p {
    display: -webkit-box !important;
    -webkit-line-clamp: 4 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    line-height: 1.8em;
}

/* ============================================================
   لیستِ عمودیِ نظرات (قالبِ مدرن) — بدونِ اسکرولِ افقی، بدونِ عرضِ ثابت.
   ساختارِ اصلیِ همین قالب از اول همین بود؛ اینجا فقط ظاهرش تمیز شده.
   ============================================================ */
.dm-reviews-wrapper .dm-reviews-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.dm-reviews-wrapper .dm-reviews-list .dm-review-item {
    width: 100%;
    max-width: 100%;
    margin: 0 !important;
    background: var(--dm-card-bg, #ffffff) !important;
    border: 1px solid var(--dm-border, #eeeeee) !important;
    border-radius: var(--dm-radius-tl, 16px) var(--dm-radius-tr, 16px) var(--dm-radius-br, 16px) var(--dm-radius-bl, 16px) !important;
    padding: 0 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .03) !important;
    transition: box-shadow .2s ease, border-color .2s ease;
}

/* پدینگِ بیرونی صفر شد؛ برای اینکه محتوا به لبه نچسبد، همین مقدار روی card-body
   داخلیِ همان کارت گذاشته می‌شود (خودِ ReviewRenderer یک لایهٔ card-body چاپ نمی‌کند،
   پس این کلاس مستقیماً روی ریشهٔ کارت اثر می‌گذارد و محتوای داخلی خودش padding دارد). */
.dm-reviews-wrapper .dm-reviews-list .dm-review-item > * {
    padding-inline: 20px;
}

.dm-reviews-wrapper .dm-reviews-list .dm-review-item > *:first-child {
    padding-top: 20px;
}

.dm-reviews-wrapper .dm-reviews-list .dm-review-item > *:last-child {
    padding-bottom: 20px;
}

/* ستونِ خلاصهٔ قالبِ مدرن: استیکی‌بودن و فاصله از بالا از تنظیمات می‌آید. */
.dm-reviews-wrapper .dm-summary-box {
    position: var(--dm-sidebar-position, sticky);
    top: var(--dm-sidebar-top, 20px);
}

.dm-reviews-wrapper .dm-reviews-list .dm-review-item:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, .06) !important;
}

/* دکمهٔ «مشاهده بیشتر» به شکلِ یک دکمهٔ سادهٔ تمام‌عرض زیرِ لیست، نه یک کارتِ انتهایِ ردیف. */
.dm-reviews-wrapper .dm-load-more-plain {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 6px;
    padding: 12px;
    border: 1px solid var(--dm-border, #eeeeee);
    border-radius: var(--dm-radius-md, 10px);
    background: var(--dm-card-bg, #ffffff);
    color: var(--dm-text-muted, #6c757d);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition: color .15s ease, border-color .15s ease;
}

.dm-reviews-wrapper .dm-load-more-plain:hover {
    color: var(--dm-primary, #ffc107);
    border-color: var(--dm-primary, #ffc107);
}

.dm-reviews-wrapper .dm-load-more-plain:disabled {
    opacity: .6;
    cursor: not-allowed;
}

.dm-reviews-wrapper .dm-load-more-plain .dm-icon svg {
    transition: transform .15s ease;
}

/* ============================================================
   استایل دکمه کارت‌مانند "مشاهده بیشتر" (دسکتاپ)
   ============================================================ */
.dm-desktop-load-more-card {
    flex: 0 0 160px !important; /* عرض دکمه */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--dm-bg-base, #fbfbfb) !important;
    border: 2px dashed var(--dm-border, #eeeeee) !important;
    border-radius: var(--dm-radius-tl, 16px) var(--dm-radius-tr, 16px) var(--dm-radius-br, 16px) var(--dm-radius-bl, 16px) !important;
    color: var(--dm-text-muted, #888888) !important;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 0 !important;
    scroll-snap-align: start;
}

.dm-desktop-load-more-card:hover {
    border-color: var(--dm-primary, var(--dm-primary)) !important;
    color: var(--dm-primary, var(--dm-primary)) !important;
    background: var(--dm-card-bg, #ffffff) !important;
}

.dm-desktop-load-more-card .icon-circle {
    width: 50px;
    height: 50px;
    border: 2px solid currentColor;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.dm-desktop-load-more-card:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================================
   هماهنگی با تم تاریک (Dark Theme)
   ============================================================ */
body.theme-dark .dm-carousel-wrapper::-webkit-scrollbar-track {
    background: var(--dm-bg-base);
}
body.theme-dark .dm-carousel-wrapper::-webkit-scrollbar-thumb {
    background: var(--dm-border);
}

body.theme-dark .dm-desktop-load-more-card {
    background: var(--dm-bg-soft, #1e293b) !important;
    border-color: var(--dm-border, #334155) !important;
    color: var(--dm-text-muted, #94a3b8) !important;
}

body.theme-dark .dm-desktop-load-more-card:hover {
    border-color: var(--dm-primary, var(--dm-primary)) !important;
    color: var(--dm-primary, var(--dm-primary)) !important;
    background: var(--dm-card-bg, #0f172a) !important;
}

/* ============================================================
   ریسپانسیو (موبایل)
   ============================================================ */
@media (max-width: 992px) {
    .dm-carousel-wrapper .dm-review-item {
        flex: 0 0 85% !important; /* در موبایل 85 درصد صفحه را بگیرد */
    }
}

/* تنظیمات کرسر و رفتار اسکرول در حالت عادی */
.dm-carousel-wrapper {
    cursor: grab;
    scroll-behavior: smooth;
}

/* استایل‌ها هنگام کشیدن با موس (درگ شدن) */
.dm-carousel-wrapper.dm-dragging {
    cursor: grabbing !important;
    scroll-snap-type: none !important; /* غیرفعال کردن اسنپ برای حرکت نرم‌تر */
    scroll-behavior: auto !important; /* حذف انیمیشن smooth حین درگ */
}

/* جلوگیری از کلیک تصادفی روی کارت‌ها و متن‌ها هنگام درگ */
.dm-carousel-wrapper.dm-dragging .dm-review-item,
.dm-carousel-wrapper.dm-dragging .dm-desktop-load-more-card {
    pointer-events: none;
    user-select: none;
}

.dm-review-item .author-name {
    font-size: 14px;
    font-weight: bold;
}

.dm-review-item .author-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 160px;
}

/* ==========================================================================
   Simple comments (posts & pages) — Bootstrap-free
   ========================================================================== */
.dm-simple-comments {
    margin: 40px 0;
    font-family: inherit;
}
.dm-simple-comments .dm-sc-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eee;
}
.dm-simple-comments .dm-sc-notice {
    background: #e6f6ec;
    border: 1px solid #198754;
    color: #14683f;
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 20px;
}
.dm-simple-comments .dm-sc-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
}
.dm-simple-comments .dm-sc-list .children {
    list-style: none;
    margin: 0;
    padding-inline-start: 28px;
}
.dm-simple-comments .dm-sc-list li.comment {
    padding: 16px 0;
    border-bottom: 1px solid #f0f0f1;
}
.dm-simple-comments .dm-sc-empty,
.dm-simple-comments .dm-sc-closed {
    color: #6c757d;
    padding: 16px 0;
}
.dm-simple-comments .dm-sc-form-wrap {
    margin-top: 24px;
    background: #fafafa;
    border: 1px solid #eee;
    border-radius: 10px;
    padding: 20px;
}
.dm-simple-comments .dm-sc-form-title {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 16px;
}
.dm-simple-comments .dm-sc-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.dm-simple-comments .dm-sc-input,
.dm-simple-comments .dm-sc-textarea {
    width: 100%;
    flex: 1;
    min-width: 180px;
    padding: 10px 12px;
    border: 1px solid #dcdcde;
    border-radius: 8px;
    font-family: inherit;
    font-size: 14px;
    box-sizing: border-box;
}
.dm-simple-comments .dm-sc-textarea {
    margin-bottom: 12px;
    resize: vertical;
}
.dm-simple-comments .dm-sc-submit {
    background: var(--dm-primary, #ffc107);
    color: #1d2327;
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-weight: 700;
    cursor: pointer;
}
.dm-simple-comments .dm-sc-submit:disabled {
    opacity: .55;
    cursor: not-allowed;
}

/* Review item badges (moved off inline styles) */
.dm-review-item .dm-rating-badge {
    background: var(--dm-primary);
    color: #fff;
    border-radius: 4px;
    font-weight: bold;
    font-size: 13px;
}
.dm-review-item .dm-buyer-badge {
    font-size: 11px;
    padding: 2px 6px;
    border: 1px solid #198754;
    color: #198754;
    border-radius: 4px;
}
.dm-review-item .dm-variant-text {
    font-size: 11px;
}
.dm-review-item .dm-variant-icon {
    font-size: 14px;
    width: 14px;
    height: 14px;
    vertical-align: middle;
}
.dm-review-item .dm-rec-icon {
    font-size: 14px;
    vertical-align: middle;
}
/* ⚠ قبلاً به --dk-text-light وابسته بود، متغیری که فقط شیوه‌نامهٔ قالبِ دیجی‌کالا
   تعریفش می‌کند؛ روی قالبِ مدرن این متغیر اصلاً بارگذاری نمی‌شد و رنگ نامعتبر می‌ماند.
   حالا از تنظیماتِ خودِ افزونه می‌آید، مشترک و درست در هر دو قالب. */
.dm-reviews-wrapper .dm-toggle-reply-btn {
    color: var(--dm-reply-btn-color, #6c757d) !important;
    background-color: var(--dm-reply-btn-bg, #f8f9fa) !important;
    border-style: solid !important;
    border-width: var(--dm-reply-btn-border-width, 1px) !important;
    border-color: var(--dm-reply-btn-border, #e5e7eb) !important;
    border-radius: var(--dm-radius-tl, 6px) var(--dm-radius-tr, 6px) var(--dm-radius-br, 6px) var(--dm-radius-bl, 6px) !important;
    padding: 5px 12px !important;
    font-size: 12px;
    text-decoration: none !important;
}

.dm-reviews-wrapper .dm-toggle-reply-btn:hover {
    color: var(--dm-primary, #ffc107) !important;
    border-color: var(--dm-primary, #ffc107) !important;
}
.dm-review-item .dm-reply-form {
    display: none;
}
.dm-reviews-template-error {
    color: #dc3545;
}
/* آیکن‌های SVG درون‌خطی (جایگزین ایموجی) — ایموجی به فونت سیستم کاربر وابسته است
   و روی ویندوز قدیمی/فونت محدود به‌جای آیکن «مربع شکسته» نشان می‌دهد. */
.dm-vote-icon,
.dm-close-icon {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    line-height: 0;
    vertical-align: middle;
}
.dm-vote-icon svg,
.dm-close-icon svg { display: block; }
.dm-vote-btn { display: inline-flex; align-items: center; gap: 5px; }

/* حالتِ بارگذاریِ فیلتر: فهرست سرِ جایش می‌مانَد و فقط کم‌رنگ و غیرفعال می‌شود.
   خالی کردنِ ریل، ارتفاع و عرضِ قابلِ اسکرول را می‌شکست و موقعیتِ اسکرول را بی‌مرجع می‌کرد. */
.dm-reviews-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .15s ease;
}

/* نام نویسنده و نشانش زیر هم، تا نشان به تاریخِ سمتِ مقابل نچسبد */
.dm-review-item .dm-author-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
}

/* ── نوار فیلترها ─────────────────────────────────────────── */
.dm-review-filters {
    /* از عنوانِ بالای خودش فاصله بگیرد */
    margin-top: 10px;
}

@media (max-width: 768px) {
    /* روی موبایل با زیاد شدنِ فیلترها، شکستنِ چندردیفه به‌هم‌ریخته می‌شود؛
       به‌جایش یک ردیفِ افقیِ قابلِ اسکرول با اسکرول‌بارِ پنهان. */
    .dm-review-filters {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 8px;
        margin-top: 14px;
        padding-bottom: 6px;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .dm-review-filters::-webkit-scrollbar {
        display: none;
    }
    .dm-review-filters .dm-filter-btn {
        flex: 0 0 auto;
        white-space: nowrap;
    }
    /* در پوستهٔ دیجی‌کالا نوار کنارِ عنوان می‌نشیند؛ روی موبایل تمام‌عرضِ سطرِ خودش شود */
    .dm-reviews-head-row .dm-review-filters {
        flex-basis: 100%;
        width: 100%;
    }
}

/* ── نشان خریدار تأیید شده ────────────────────────────────── */
.dm-review-item .dm-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: #e7f5ee;
    color: #0f7a4d;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.8;
}
.dm-review-item .dm-verified-icon {
    flex: none;
    display: block;
    color: #12a35f;
}
.dm-review-item .dm-verified-text { white-space: nowrap; }

/* ── گالری تصاویر دیدگاه ──────────────────────────────────── */
.dm-review-media {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 14px;
}
.dm-review-media-item {
    display: block;
    width: 72px;
    height: 72px;
    padding: 0;
    border: 1px solid #e6e6e6;
    border-radius: 8px;
    background: none;
    overflow: hidden;
    cursor: zoom-in;
    transition: border-color .18s;
}
.dm-review-media-item:hover,
.dm-review-media-item:focus-visible {
    border-color: #9a9a9a;
}
.dm-review-media-item img,
.dm-review-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── نمایش بزرگ تصویر ─────────────────────────────────────── */
/* ⚠ صفت hidden وزن کمی دارد و هر قاعده‌ای که display بدهد آن را می‌بازد؛
   بدون این خط، لایتباکس از همان لحظهٔ بارگذاری صفحه باز می‌ماند. */
.dm-media-lightbox[hidden] { display: none !important; }
.dm-media-lightbox {
    position: fixed;
    inset: 0;
    z-index: 100050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    background-color: rgba(0, 0, 0, .78);
}
.dm-media-lightbox img {
    max-width: 100%;
    max-height: 90vh;
    border-radius: 10px;
    object-fit: contain;
}
.dm-media-lightbox-close {
    position: absolute;
    top: 16px;
    inset-inline-end: 16px;
    display: flex;
    padding: 8px;
    border: none;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .16);
    color: #fff;
    cursor: pointer;
}
.dm-media-lightbox-close:hover { background-color: rgba(255, 255, 255, .3); }

/* پیام راهنمای ویجت‌ها داخل ادیتور المنتور (روی سایت واقعی چاپ نمی‌شود) */
.dm-el-notice {
    padding: 20px;
    text-align: center;
    border: 1px dashed #c9cbd8;
    border-radius: 10px;
    color: #7a7d99;
    direction: rtl;
}