/* DM Gold — استایل جدول قیمت‌ها و مودال (فرانت) */

.dm-gold-upgrade-badge {
    display: inline-block;
    background: #f0b849;
    color: #4a3600;
    font-size: 12px;
    padding: 3px 10px;
    border-radius: 3px;
}

.dm-gold-wrapper {
    max-width: 600px;
    margin: 0 auto;
    font-family: inherit;
    direction: rtl;
}

/* ویجت نمایش مستقیم (المنتور) — آیتم‌ها در یک خط، هرکدام جدا */
.dm-gold-inline-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 18px;
    align-items: center;
    direction: rtl;
}

.dm-gold-inline-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.dm-gold-inline-name {
    color: #777;
}

.dm-gold-inline-price {
    font-weight: bold;
    color: #222;
}

.dm-gold-header {
    text-align: center;
    font-size: 0.85rem;
    color: #777;
    margin-bottom: 15px;
}

.dm-gold-section {
    margin-bottom: 25px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
}

.dm-gold-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
}

.dm-gold-table th {
    background: #fff;
    color: #888;
    font-weight: normal;
    font-size: 0.9em;
    padding: 10px;
    border-bottom: 2px solid #f0f0f0;
}

.dm-gold-table td {
    padding: 12px 10px;
    border-bottom: 1px solid #f9f9f9;
    color: #444;
}

.dm-gold-table tr:last-child td {
    border-bottom: none;
}

.dm-gold-table .dm-empty-row {
    text-align: center;
    color: #999;
}

.dm-name {
    font-weight: 500;
    text-align: right !important;
}

.dm-price {
    font-weight: bold;
    color: #222;
    font-size: 1.05em;
    letter-spacing: 0.5px;
}

.dm-time {
    color: #aaa;
    font-size: 0.8em;
}

/* ==========================================================================
   جدولِ لیستِ قیمت (شورت‌کد + مودال + ویجتِ سراسریِ المنتور + پیش‌نمایشِ ادمین)
   ⚠ همهٔ قاعده‌ها زیرِ ریشهٔ .dm-gold-pt اسکوپ شده‌اند؛ اختیاری نیست:
   شیوه‌نامهٔ سازندهٔ جدول در پیشخوان از قبل صاحبِ همین نام‌هاست
   (.dm-gold-pt-section / -section-head / -section-title) و در صفحهٔ سازنده هر دو
   شیوه‌نامه با هم بار می‌شوند. بدونِ این اسکوپ، پیش‌نمایش و سازنده استایلِ هم را می‌خورند.
   ========================================================================== */

.dm-gold-pt {
    --dm-gold-pt-ink: #1c1c28;
    --dm-gold-pt-ink-soft: #5c6072;
    --dm-gold-pt-ink-faint: #9297aa;
    --dm-gold-pt-surface: #fff;
    --dm-gold-pt-surface-alt: #f7f8fb;
    --dm-gold-pt-line: #e6e8f0;
    --dm-gold-pt-line-soft: #f1f2f7;
    --dm-gold-pt-gold: #c8963c;
    --dm-gold-pt-sell: #17805a;
    --dm-gold-pt-buy: #b8365a;
    --dm-gold-pt-spread: #4a5568;
    /* چهار ستون در یک مودالِ باریک جا می‌شوند فقط اگر اندازه‌ها با عرضِ صفحه نفس بکشند.
       کفِ clamp عمداً زیر ۱۲ پیکسل نمی‌رود تا در گوشی هم خوانا بماند. */
    --dm-gold-pt-size-sell: clamp(0.78rem, 2.5vw, 0.98rem);
    --dm-gold-pt-size-buy: clamp(0.78rem, 2.5vw, 0.98rem);
    --dm-gold-pt-size-name: clamp(0.76rem, 2.3vw, 0.9rem);
    --dm-gold-pt-size-spread: clamp(0.72rem, 2.1vw, 0.84rem);
    --dm-gold-pt-cell-pad-y: 9px;
    --dm-gold-pt-cell-pad-x: 8px;
    /* فاصلهٔ لبه‌های جدول جدا از فاصلهٔ میان‌سلولی است: میان‌سلولی می‌تواند در صفحهٔ باریک
       تا ۳ پیکسل جمع شود، ولی ستونِ اول نباید به دیوارهٔ کارت بچسبد. */
    --dm-gold-pt-edge-pad: 14px;

    direction: rtl;
    color: var(--dm-gold-pt-ink);
}

.dm-gold-pt .dm-gold-pt-num {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: var(--dm-gold-pt-num-tracking, 0);
    /* عدد هرگز وسطِ خودش نمی‌شکند؛ ستون باید با عدد سازگار شود نه برعکس. */
    white-space: nowrap;
}

.dm-gold-pt .dm-gold-pt-unit {
    font-size: 0.74em;
    color: var(--dm-gold-pt-ink-faint);
    font-weight: 500;
    margin-inline-start: 3px;
}

.dm-gold-pt .dm-gold-pt-stamp {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 0.82rem;
    color: var(--dm-gold-pt-ink-soft);
    margin-bottom: 14px;
}

.dm-gold-pt .dm-gold-pt-stamp-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--dm-gold-pt-sell);
    flex: 0 0 auto;
}

.dm-gold-pt .dm-gold-pt-section {
    background: var(--dm-gold-pt-surface);
    border: 1px solid var(--dm-gold-pt-line);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(20, 22, 40, .04), 0 6px 18px rgba(20, 22, 40, .05);
    overflow: hidden;
    margin-bottom: 18px;
    padding: 0;
}

.dm-gold-pt .dm-gold-pt-section-head {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    margin: 0;
    background: var(--dm-gold-pt-surface-alt);
    border-bottom: 1px solid var(--dm-gold-pt-line);
    font-weight: 700;
    font-size: 0.97rem;
}

.dm-gold-pt .dm-gold-pt-section-icon {
    color: var(--dm-gold-pt-gold);
    flex: 0 0 auto;
}

.dm-gold-pt .dm-gold-pt-section-title {
    flex: 0 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 0.97rem;
    color: var(--dm-gold-pt-ink);
}

.dm-gold-pt .dm-gold-pt-section-count {
    margin-inline-start: auto;
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--dm-gold-pt-ink-faint);
}

.dm-gold-pt .dm-gold-pt-table {
    width: 100%;
    border-collapse: collapse;
    margin: 0;
    /* عرضِ ستون‌ها ثابت است تا بخش‌های مختلفِ جدول روی یک خطِ عمودی بنشینند و با
       عوض‌شدنِ طولِ اعداد نلغزند. */
    table-layout: fixed;
}

.dm-gold-pt .dm-gold-pt-table th {
    font-weight: 500;
    font-size: clamp(0.68rem, 1.9vw, 0.78rem);
    line-height: 1.5;
    color: var(--dm-gold-pt-ink-faint);
    padding: 8px var(--dm-gold-pt-cell-pad-x);
    border-bottom: 1px solid var(--dm-gold-pt-line);
    text-align: center;
    background: none;
}

.dm-gold-pt .dm-gold-pt-table th:first-child,
.dm-gold-pt .dm-gold-pt-table td:first-child {
    padding-inline-start: var(--dm-gold-pt-edge-pad);
}

.dm-gold-pt .dm-gold-pt-table th:last-child,
.dm-gold-pt .dm-gold-pt-table td:last-child {
    padding-inline-end: var(--dm-gold-pt-edge-pad);
}

/* سه ستونِ عددی عمداً هم‌عرض‌اند و ستونِ اختلاف باریک‌تر، چون فقط یک درصدِ کوتاه دارد. */
.dm-gold-pt .dm-gold-pt-table-cols-4 th:nth-child(1) {
    width: 34%;
}

.dm-gold-pt .dm-gold-pt-table-cols-4 th:nth-child(2),
.dm-gold-pt .dm-gold-pt-table-cols-4 th:nth-child(3) {
    width: 25%;
}

.dm-gold-pt .dm-gold-pt-table-cols-4 th:nth-child(4) {
    width: 16%;
}

.dm-gold-pt .dm-gold-pt-table-cols-2 th:nth-child(1) {
    width: 55%;
}

.dm-gold-pt .dm-gold-pt-table-cols-2 th:nth-child(2) {
    width: 45%;
}

.dm-gold-pt .dm-gold-pt-table td {
    padding: var(--dm-gold-pt-cell-pad-y) var(--dm-gold-pt-cell-pad-x);
    border-bottom: 1px solid var(--dm-gold-pt-line-soft);
    text-align: center;
}

.dm-gold-pt .dm-gold-pt-table tr:last-child td {
    border-bottom: none;
}

.dm-gold-pt .dm-gold-pt-table tbody tr:hover {
    background: var(--dm-gold-pt-surface-alt);
}

.dm-gold-pt .dm-gold-pt-cell-name {
    text-align: start;
    font-weight: 600;
    font-size: var(--dm-gold-pt-size-name);
    line-height: 1.6;
    /* نامِ بلند می‌شکند تا ستونِ عددی را هل ندهد؛ عددها هرگز نمی‌شکنند. */
    overflow-wrap: anywhere;
}

.dm-gold-pt .dm-gold-pt-cell-sell {
    font-size: var(--dm-gold-pt-size-sell);
    font-weight: 600;
    color: var(--dm-gold-pt-sell);
}

.dm-gold-pt .dm-gold-pt-cell-buy {
    font-size: var(--dm-gold-pt-size-buy);
    font-weight: 600;
    color: var(--dm-gold-pt-buy);
}

/* ستونِ اختلاف: فقط درصد. عنوانش در سرِ جدول است، پس داخلِ ردیف هیچ کلمه‌ای نمی‌آید. */
.dm-gold-pt .dm-gold-pt-cell-spread {
    font-size: var(--dm-gold-pt-size-spread);
    font-weight: 600;
    color: var(--dm-gold-pt-spread);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* سلولِ بی‌مقدار (ردیفی که قیمتِ خرید ندارد). خط‌تیره جای عدد را نگه می‌دارد تا ستون‌ها
   هم‌تراز بمانند و خواننده نپرسد این عدد مالِ کدام ستون است. */
.dm-gold-pt .dm-gold-pt-cell-none {
    font-size: var(--dm-gold-pt-size-spread);
    font-weight: 500;
    color: var(--dm-gold-pt-ink-faint);
}

.dm-gold-pt .dm-gold-pt-empty {
    text-align: center;
    color: var(--dm-gold-pt-ink-faint);
}

/* ⚠ اینجا عمداً هیچ حالتِ کارتی وجود ندارد. جدول در همهٔ عرض‌ها جدول می‌ماند و به‌جای
   تغییرِ چیدمان، فقط فشرده می‌شود: فاصله‌ها کم و اندازه‌ها با clamp کوچک می‌شوند. */

@media (max-width: 600px) {
    .dm-gold-pt {
        --dm-gold-pt-cell-pad-y: 8px;
        --dm-gold-pt-cell-pad-x: 5px;
        --dm-gold-pt-edge-pad: 11px;
    }

    .dm-gold-pt .dm-gold-pt-section {
        border-radius: 12px;
        margin-bottom: 12px;
    }

    .dm-gold-pt .dm-gold-pt-section-head {
        padding: 9px 10px;
    }
}

@media (max-width: 400px) {
    .dm-gold-pt {
        --dm-gold-pt-cell-pad-x: 3px;
        --dm-gold-pt-edge-pad: 9px;
        /* آخرین پلهٔ فشرده‌سازی: ارقام کمی جمع‌تر می‌شوند تا عددِ هشت‌رقمی بدونِ شکستن
           در ستونِ باریک بنشیند. */
        --dm-gold-pt-num-tracking: -0.02em;
    }

    /* در باریک‌ترین حالت، ستونِ عنوان کمی از عرضش را به ستون‌های عددی می‌دهد: نام
       می‌تواند به خطِ بعد برود، عدد نمی‌تواند. */
    .dm-gold-pt .dm-gold-pt-table-cols-4 th:nth-child(1) {
        width: 30%;
    }

    .dm-gold-pt .dm-gold-pt-table-cols-4 th:nth-child(2),
    .dm-gold-pt .dm-gold-pt-table-cols-4 th:nth-child(3) {
        width: 27%;
    }
}

/* جدول مشخصات طلا در صفحه محصول */
.dm-gold-meta-box {
    background: #f9f9f9;
    padding: 15px;
    margin: 10px 0;
    border-radius: 5px;
    border: 1px solid #eee;
}

.dm-gold-meta-title {
    margin: 0 0 10px 0;
    font-size: 14px;
}

.dm-gold-info-table {
    width: 100%;
    font-size: 13px;
    color: #555;
    border-collapse: collapse;
}

.dm-gold-info-table .dm-gold-label {
    padding: 3px 0;
}

.dm-gold-info-table .dm-gold-value {
    text-align: left;
    font-weight: bold;
}

.dm-gold-unit {
    font-size: 0.85em;
    color: #999;
}

/* باکس قیمت همکار */
.dm-gold-partner-box {
    background: #fff3cd;
    border: 1px solid #ffeeba;
    color: #856404;
    padding: 15px;
    margin: 15px 0;
    border-radius: 5px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dm-gold-alert {
    text-align: center;
    color: #999;
    padding: 15px;
}

/* دکمه بازکننده مودال
   رنگ‌ها متغیرِ سفارشی‌اند و مقدارشان از تنظیمات روی خودِ عنصر می‌نشیند. تنظیم‌نشده = همان
   عقب‌گردِ زیر = دقیقاً ظاهرِ نسل قبل، پس به‌روزرسانی هیچ سایتِ موجودی را عوض نمی‌کند. */
.dm-gold-modal-trigger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--dmg-tbtn-bg, transparent);
    border: var(--dmg-tbtn-border-width, 0) solid var(--dmg-tbtn-border-color, currentColor);
    cursor: pointer;
    padding: 4px;
    color: var(--dmg-tbtn-color, inherit);
}

/* فاصله و گوشه فقط وقتی دکمه «جعبه» شده باشد — یعنی پس‌زمینه یا حاشیه دارد.
   بدون هیچ‌کدام، همان آیکنِ لختِ نسل قبل می‌ماند. */
.dm-gold-modal-trigger.has-box {
    padding: 8px 14px;
    border-radius: var(--dmg-tbtn-radius, 8px);
}

.dm-gold-modal-trigger svg {
    fill: currentColor;
}

.dm-gold-modal-trigger-svg,
.dm-gold-modal-trigger-icon {
    color: var(--dmg-tbtn-icon, inherit);
    flex: 0 0 auto;
}

.dm-gold-modal-trigger-svg {
    fill: currentColor;
}

.dm-gold-modal-trigger-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 18px;
}

/* تصویرِ آپلودی: ارتفاعِ مهارشده تا یک فایلِ بزرگ چیدمان را نشکند */
.dm-gold-modal-trigger-img {
    max-height: 24px;
    width: auto;
    height: auto;
    flex: 0 0 auto;
}

/* تصویرِ SVG در حالتِ «رنگِ آیکن»: خودِ فایل ماسک می‌شود و رنگ از پس‌زمینه می‌آید، پس
   شکل هرگز داخلِ صفحه پارس نمی‌شود. contain یعنی شکلِ غیرمربع کشیده نمی‌شود. */
.dm-gold-modal-trigger-img.is-mask {
    display: inline-block;
    width: 24px;
    height: 24px;
    max-height: none;
    background-color: var(--dmg-tbtn-icon, currentColor);
    -webkit-mask-image: var(--dmg-tbtn-mask);
    mask-image: var(--dmg-tbtn-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

.dm-gold-modal-trigger-text {
    font-size: inherit;
    line-height: 1.6;
}

/* مودال — کاملاً مستقل از بوت‌استرپ؛ همهٔ کلاس‌ها پیشونددارِ افزونه‌اند */
.dm-gold-modal {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.5);
    overflow-y: auto;
    padding: 16px 8px;
}

.dm-gold-modal.show {
    display: block;
}

.dm-gold-modal-dialog {
    /* کمی پهن‌تر از قبل: جدول حالا چهار ستون دارد و این عرض همان چیزی است که ستونِ
       اختلاف را بدونِ فشردنِ بقیه جا می‌دهد. */
    max-width: 560px;
    margin: auto;
    min-height: calc(100% - 32px);
    display: flex;
    align-items: center;
}

.dm-gold-modal-content {
    background: #fff;
    border-radius: 8px;
    width: 100%;
    padding: 12px;
}

.dm-gold-modal-header {
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    margin-bottom: 10px;
}

@media (max-width: 480px) {
    .dm-gold-modal {
        padding: 12px 6px;
    }

    .dm-gold-modal-content {
        padding: 10px 8px;
    }
}

.dm-gold-modal-title {
    margin: 0;
    font-size: 1rem;
}

.dm-gold-modal-close {
    background: transparent;
    border: 0;
    font-size: 1.4rem;
    line-height: 1;
    cursor: pointer;
    color: #555;
}

/* --- جعبهٔ باندل روی صفحهٔ محصول --- */
.dm-gold-bundle-box {
    margin: 14px 0;
}

.dm-gold-bundle-compare .dm-gold-bundle-sum {
    text-decoration: line-through;
    opacity: .75;
}

.dm-gold-bundle-compare .dm-gold-bundle-saving {
    font-weight: 700;
}

.dm-gold-bundle-title {
    margin: 12px 0 8px;
    font-size: 1rem;
}

.dm-gold-bundle-members {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dm-gold-bundle-member {
    flex: 0 1 110px;
}

.dm-gold-bundle-member-link {
    display: block;
    text-align: center;
    text-decoration: none;
    color: inherit;
}

.dm-gold-bundle-member-thumb img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    display: block;
}

.dm-gold-bundle-member-name {
    display: block;
    margin-top: 6px;
    font-size: .82rem;
    line-height: 1.4;
}

.dm-gold-bundle-member-qty {
    display: block;
    font-size: .78rem;
    opacity: .7;
}

/* زیرنویسِ قیمت («قیمت بر اساس ...»).
   ⚠ نامِ کلاس و همهٔ مقادیر عیناً همان چیزی است که قالب از قبل داشت، تا جابه‌جایی این
   قابلیت از قالب به افزونه هیچ تغییرِ دیدنی‌ای نداشته باشد. قاعدهٔ خودِ قالب — که زیرِ
   پوشش‌اش تعریف شده — خاص‌تر است و هرجا باشد برنده می‌ماند؛ چون مقادیر یکی‌اند، تفاوتی
   دیده نمی‌شود و این قاعده فقط جایی کار می‌کند که کدِ کوتاه بیرونِ آن پوشش استفاده شود.
   ⚠ متغیرِ رنگ با همان مقدارِ پشتیبانِ قالب می‌آید تا سایتی که آن را تعریف نکرده هم
   رنگِ درست بگیرد. */
.dm-sp-price-subtitle {
    font-size: 13px;
    color: var(--dm-ink-3, #888888);
    /* ⚠ قالب `right` نوشته بود. روی سایتِ راست‌به‌چپ این دو دقیقاً یکی‌اند، ولی `start`
       روی یک فروشگاهِ چپ‌به‌راست هم به ابتدای خط می‌چسبد نه به انتهای آن — همان چیزی که
       نویسندهٔ اصلی می‌خواسته. ظاهرِ این سایت ذره‌ای عوض نمی‌شود. */
    text-align: start;
    font-weight: 500;
    margin-bottom: 10px;
}