/* =========================================
   1. CSS VARIABLES & DEFAULTS
   ========================================= */
:root {
    /* Colors (Dynamic from PHP) */
    --dm-scm-primary: #3e68ff;
    --dm-scm-secondary: #5a85ff;
    --dm-scm-bg: #ffffff;
    --dm-scm-font: inherit;
    --dm-scm-btn-hover: #ef3e63;
    --dm-scm-btn-hover-text: #ffffff;
    --dm-scm-btn-cont-bg: #f0f0f0;
    --dm-scm-btn-cont-text: #333333;
    --dm-scm-icon-w: 60px;
    --dm-scm-icon-bg: #008000;
    --dm-scm-icon-color: #ffffff;
    --dm-scm-upsell-bg: #ebefff;
    --dm-scm-upsell-border: #ebefff;
    --dm-scm-badge-up-bg: #3e68ff;
    --dm-scm-badge-up-text: #ffffff;
    --dm-scm-badge-ad-bg: #ebefff;
    --dm-scm-badge-ad-text: #3e68ff;
    --dm-scm-tooltip-bg: #f5f5f5;
    --dm-scm-tooltip-text: #333333;
    --dm-scm-price-sale: #d32f2f;
    --dm-scm-price-reg: #555555;
    --dm-scm-prog-text-col: #444444;

    /* Spacing & Radius (4-Directional - Dynamic from PHP) */
    --dm-scm-modal-pad: 20px 20px 20px 20px;
    --dm-scm-modal-mar: 0 0 0 0;
    --dm-scm-modal-rad: 20px 20px 20px 20px;
    
    --dm-scm-header-pad: 0 0 0 0;
    --dm-scm-header-mar: 0 0 20px 0;
    
    --dm-scm-prodbox-pad: 15px 15px 15px 15px;
    --dm-scm-prodbox-mar: 0 0 20px 0;
    --dm-scm-prodbox-rad: 10px 10px 10px 10px;
    --dm-scm-prodimg-rad: 8px 8px 8px 8px;
    
    --dm-scm-addons-pad: 0 0 0 0;
    --dm-scm-addons-mar: 0 0 0 0;
    
    --dm-scm-addonitem-pad: 10px 12px 10px 12px;
    --dm-scm-addonitem-mar: 0 0 0 0;
    --dm-scm-addonitem-rad: 0 0 0 0;
    
    --dm-scm-prog-pad: 0 0 0 0;
    --dm-scm-prog-mar: 15px 0 0 0;
    
    --dm-scm-proglbl-pad: 0 0 0 0;
    --dm-scm-proglbl-mar: 0 0 55px 0;
    
    --dm-scm-footer-pad: 10px 0 0 0;
    --dm-scm-footer-mar: 70px 0 0 0;
    
    --dm-scm-btn-pad: 15px 15px 15px 15px;
    --dm-scm-btn-mar: 0 0 0 0;
    --dm-scm-btn-rad: 10px 10px 10px 10px;

    /* Font Sizes (Dynamic from PHP) */
    --dm-scm-fs-modal-title: 18px;
    --dm-scm-fs-prod-title: 14px;
    --dm-scm-fs-prod-price: 14px;
    --dm-scm-fs-addon-title: 14px;
    --dm-scm-fs-addon-price: 14px;
    --dm-scm-fs-prog-text: 13px;
    --dm-scm-fs-footer-total: 16px;
    --dm-scm-fs-btn: 16px;
    --dm-scm-fs-badge: 10px;
}

/* =========================================
   2. OVERLAY & MODAL CONTAINER
   ========================================= */
.dm-scm-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 99999;
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(3px);
}

.dm-scm-overlay.dm-scm-hidden {
    display: none;
}

.dm-scm-confirm-overlay {
    z-index: 100000;
}

.dm-scm-modal {
    background: var(--dm-scm-bg);
    width: 90%;
    max-width: 500px;
    border-radius: var(--dm-scm-modal-rad);
    padding: var(--dm-scm-modal-pad);
    margin: var(--dm-scm-modal-mar);
    position: relative;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    font-family: var(--dm-scm-font);
    direction: rtl;
    text-align: right;
    max-height: 90vh;
    overflow-y: auto;
    overflow-x: hidden;
}

.dm-scm-modal * {
    font-family: var(--dm-scm-font) !important;
    box-sizing: border-box;
}

/* ⚠ رنگ این دکمه قبلاً هاردکدِ #999 بود = ۲٫۸۵ به ۱ روی پس‌زمینهٔ سفیدِ مدال، یعنی
   زیرِ حدِ ۴٫۵. چون یک مقدارِ ثابت بود نه توکن، قالبِ میزبان هم نمی‌توانست بدونِ
   جنگِ specificity عوضش کند (کلاسِ برهنه در برابر کلاسِ برهنه مساوی می‌شود و بعد
   ترتیبِ بارگذاری تصمیم می‌گیرد، و این استایل‌شیت بعد از قالب می‌آید). حالا یک
   متغیرِ ارث‌بر است: مصرف‌کننده مقدار را می‌گذارد، نه اینکه رنگ را دوباره اعلام کند.
   پیش‌فرضِ #595959 روی سفید ۷٫۰ به ۱ می‌دهد. */
.dm-scm-close {
    position: absolute;
    top: 15px;
    left: 15px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--dm-scm-close-ink, #595959);
    line-height: 1;
    z-index: 10;
}

/* =========================================
   3. HEADER & ICONS
   ========================================= */
.dm-scm-header {
    text-align: center;
    padding: var(--dm-scm-header-pad);
    margin: var(--dm-scm-header-mar);
}

.dm-scm-header h3 {
    margin: 0;
    font-size: var(--dm-scm-fs-modal-title);
    color: #333;
}

.dm-scm-icon-container {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.icon-success {
    width: var(--dm-scm-icon-w);
    height: var(--dm-scm-icon-w);
    background: var(--dm-scm-icon-bg);
    color: var(--dm-scm-icon-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: calc(var(--dm-scm-icon-w) / 2.5);
}

.dm-custom-icon {
    width: var(--dm-scm-icon-w);
    height: var(--dm-scm-icon-w);
    object-fit: contain;
    background: var(--dm-scm-icon-bg);
    border-radius: 50%;
    padding: 8px;
    box-sizing: border-box;
}

/* =========================================
   4. PRODUCT SUMMARY
   ========================================= */
#dm-scm-product-summary {
    background: #f9f9f9;
    padding: var(--dm-scm-prodbox-pad);
    margin: var(--dm-scm-prodbox-mar);
    border-radius: var(--dm-scm-prodbox-rad);
    display: flex;
    align-items: center;
    gap: 15px;
}

.dm-scm-img img {
    width: var(--dm-scm-modal-img-size, 60px);
    height: var(--dm-scm-modal-img-size, 60px);
    object-fit: cover;
    border-radius: var(--dm-scm-modal-img-radius, var(--dm-scm-prodimg-rad));
}

.dm-scm-details h4 {
    margin: 0 0 5px;
    font-size: var(--dm-scm-fs-prod-title);
    color: #333;
}

/* گزینه‌های وریشن زیرِ نام (رنگ/سایز). رنگ از توکن تا قالب بتواند بپوشاندش. */
.dm-scm-variation {
    display: block;
    margin: 0 0 6px;
    font-size: var(--dm-scm-fs-variation, 13px);
    color: var(--dm-scm-variation-ink, #555);
}

.dm-scm-base-price {
    font-weight: bold;
    color: var(--dm-scm-price-reg);
    font-size: var(--dm-scm-fs-prod-price);
}

/* =========================================
   5. ADDONS LIST & UPSELL
   ========================================= */
#dm-scm-addons-list {
    padding: var(--dm-scm-addons-pad);
    margin: var(--dm-scm-addons-mar);
}

.dm-scm-addons-section h4 {
    font-size: 14px;
    margin-bottom: 10px;
    color: #666;
}

/* دکمهٔ حذفِ یک افزودنیِ تکی، داخلِ متای قلمِ سبد.
   ⚠ فقط href/class/title دارد: خروجیِ این نقطه از wp_kses_post رد می‌شود و
   ویژگی‌های data-* آن‌جا حذف می‌شوند. */
.dm-scm-item-addon-remove {
    display: inline-block;
    margin-inline-start: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    border: 1px solid currentColor;
    font-size: 11px;
    line-height: 1.7;
    text-decoration: none;
    color: #ef3e63;
    vertical-align: middle;
}

.dm-scm-item-addon-remove:hover,
.dm-scm-item-addon-remove:focus-visible {
    color: #ffffff;
    background: #ef3e63;
    border-color: #ef3e63;
}

/* سرتیترِ گروهِ یک فیچرِ چندبخشی داخلِ فهرستِ مودال. */
.dm-scm-addon-group-title {
    margin: 10px 0 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--dm-scm-price-reg, #555555);
}

.dm-scm-addon-group-title:first-child {
    margin-top: 0;
}

.dm-scm-addon-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--dm-scm-addonitem-pad);
    margin: var(--dm-scm-addonitem-mar);
    border-radius: var(--dm-scm-addonitem-rad);
    border-bottom: 1px solid #eee;
    cursor: pointer;
}

.dm-scm-addon-row:last-child {
    border-bottom: none;
}

.dm-scm-addon-info {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.dm-scm-addon-info span {
    font-size: var(--dm-scm-fs-addon-title);
}

.dm-scm-addon-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--dm-scm-primary);
}

/* --- Upsell --- */
.dm-scm-upsell-row {
    background: var(--dm-scm-upsell-bg);
    border: 1px solid var(--dm-scm-upsell-border);
    margin-top: 7px;
}

.dm-scm-upsell-row img {
    border-radius: 8px;
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.dm-upsell-meta {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

/* --- Badges --- */
.dm-scm-badge {
    background: var(--dm-scm-badge-ad-bg);
    color: var(--dm-scm-badge-ad-text);
    font-size: var(--dm-scm-fs-badge) !important;
    padding: 2px 6px;
    border-radius: 4px;
    margin-right: 5px;
}

.dm-scm-upsell-row .dm-scm-badge {
    background: var(--dm-scm-badge-up-bg) !important;
    color: var(--dm-scm-badge-up-text) !important;
    align-self: flex-start;
    margin: 0;
}

/* --- Select & Price --- */
.dm-scm-select-wrapper {
    margin-right: 10px;
}

.dm-scm-var-select {
    max-width: 140px;
    min-width: 100px;
    padding: 2px 5px;
    font-size: 11px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #444;
    cursor: pointer;
}

.dm-scm-var-select:focus {
    outline: none;
    border-color: var(--dm-scm-primary);
}

.dm-scm-price-box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.2;
}

.dm-scm-price-box del {
    color: #999;
    font-size: calc(var(--dm-scm-fs-addon-price) - 2px);
    text-decoration: line-through;
}

.dm-scm-price-box ins {
    color: var(--dm-scm-price-sale);
    text-decoration: none;
    font-weight: bold;
    font-size: var(--dm-scm-fs-addon-price);
}

.dm-scm-addon-price {
    color: var(--dm-scm-price-reg);
    font-size: var(--dm-scm-fs-addon-price);
}

/* =========================================
   6. PROGRESS BAR & MILESTONES
   ========================================= */
.dm-scm-progress-wrapper {
    padding: var(--dm-scm-prog-pad);
    margin: var(--dm-scm-prog-mar);
    text-align: center;
}

.dm-scm-progress-label {
    font-size: var(--dm-scm-fs-prog-text);
    padding: var(--dm-scm-proglbl-pad);
    margin: var(--dm-scm-proglbl-mar);
    color: var(--dm-scm-prog-text-col);
    min-height: 20px;
    display: block;
}

.dm-scm-progress-bar {
    background: #e0e0e0;
    height: 8px;
    border-radius: 10px;
    position: relative;
    margin: 0 15px;
    direction: ltr;
}

#dm-scm-progress-fill {
    background: linear-gradient(90deg, var(--dm-scm-primary), var(--dm-scm-secondary));
    height: 100%;
    width: 0;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

/* Dots & Labels */
.dm-scm-milestone-dot {
    position: absolute;
    top: 50%;
    left: var(--dm-scm-dot-pos, 0);
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background: #fff;
    border: 3px solid #ccc;
    border-radius: 50%;
    z-index: 2;
    transition: all 0.3s;
}

.dm-scm-milestone-dot.reached {
    border-color: var(--dm-scm-primary);
    background: var(--dm-scm-primary);
    box-shadow: 0 0 0 3px rgb(62 104 255 / 30%);
}

.dm-milestone-label-visible {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dm-scm-tooltip-bg);
    border: 1px solid #eee;
    padding: 2px 5px;
    border-radius: 6px;
    color: var(--dm-scm-tooltip-text);
    font-size: 10px;
    line-height: 1.4;
    text-align: center;
    white-space: normal;
    width: 170px;
    max-height: 60px;
    z-index: 10;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

.dm-scm-milestone-dot:nth-child(odd) .dm-milestone-label-visible {
    top: 20px;
    bottom: auto;
    border-top: 2px solid var(--dm-scm-badge-up-bg) !important;
}

.dm-scm-milestone-dot:nth-child(even) .dm-milestone-label-visible {
    top: auto;
    bottom: 20px;
    border-bottom: 2px solid var(--dm-scm-primary);
}

.dm-milestone-label-visible::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    pointer-events: none;
}

.dm-scm-milestone-dot:nth-child(odd) .dm-milestone-label-visible::after {
    top: -12px;
    border-color: transparent transparent var(--dm-scm-badge-up-bg) transparent;
}

.dm-scm-milestone-dot:nth-child(even) .dm-milestone-label-visible::after {
    bottom: -12px;
    border-color: var(--dm-scm-primary) transparent transparent transparent;
}

.dm-scm-milestone-dot:last-child .dm-milestone-label-visible {
    left: -70px;
}
 
.dm-scm-milestone-dot:last-child .dm-milestone-label-visible::after {
    left: 94% !important;
}

/* Tooltips */
.dm-milestone-tooltip {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    background: #333;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 10px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
    visibility: hidden;
    z-index: 20;
}

.dm-scm-milestone-dot:hover .dm-milestone-tooltip {
    opacity: 1;
    visibility: visible;
    bottom: 25px;
}

/* =========================================
   7. FOOTER & ACTIONS
   ========================================= */
.dm-scm-footer {
    border-top: 1px solid #eee;
    padding: var(--dm-scm-footer-pad);
    margin: var(--dm-scm-footer-mar);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.dm-scm-total {
    display: flex;
    justify-content: space-between;
    font-size: var(--dm-scm-fs-footer-total);
    font-weight: bold;
    color: #333;
}

.dm-scm-btn-wrapper {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
}

.dm-scm-btn-primary,
.dm-scm-btn-continue {
    border: none !important;
    padding: var(--dm-scm-btn-pad) !important;
    margin: var(--dm-scm-btn-mar) !important;
    border-radius: var(--dm-scm-btn-rad) !important;
    font-size: var(--dm-scm-fs-btn) !important;
    font-weight: bold !important;
    cursor: pointer !important;
    transition: 0.2s;
    flex: 1;
    text-align: center;
    text-decoration: none !important;
}

.dm-scm-btn-primary {
    background: var(--dm-scm-primary) !important;
    color: #fff !important;
}

.dm-scm-btn-continue {
    background: var(--dm-scm-btn-cont-bg);
    color: var(--dm-scm-btn-cont-text);
}

.dm-scm-btn-primary:hover {
    background: var(--dm-scm-btn-hover);
    color: var(--dm-scm-btn-hover-text) !important;
}

.dm-scm-btn-continue:hover {
    background: var(--dm-scm-btn-hover);
    color: var(--dm-scm-btn-hover-text) !important;
}

.dm-scm-btn-primary.loading,
.dm-scm-btn-continue.loading {
    opacity: 0.7;
    pointer-events: none;
}

/* =========================================
   8. LOADING & QUANTITY UTILITIES
   ========================================= */
body.dm-scm-loading .add_to_cart_button,
body.dm-scm-loading .single_add_to_cart_button {
    pointer-events: none !important;
    opacity: 0.6 !important;
    cursor: wait !important;
}

.dm-scm-qty-control {
    display: none;
    align-items: center;
    gap: 5px;
    margin-right: auto;
    margin-left: 10px;
    background: #fdfdfd;
    padding: 2px;
    border-radius: 6px;
}

.dm-scm-addon-control {
    display: flex;
    align-items: center;
}

.dm-scm-addon-control.is-qty {
    width: 100%;
}

.dm-scm-addon-thumb-mini {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
}

.dm-scm-addon-thumb-emoji {
    font-size: 18px;
    margin-right: 8px;
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
}

.dm-scm-addon-label {
    margin-right: 8px;
    color: #333;
}

.dm-scm-qty-btn {
    width: 26px;
    height: 26px;
    border: 1px solid #ddd;
    background: #f5f5f5;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #444;
}

.dm-scm-qty-input {
    width: 38px;
    height: 26px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 0;
    font-size: 13px;
    background: #fff;
    color: #333;
    box-shadow: none;
}

/* =========================================
   9. RESPONSIVE
   ========================================= */
@media (max-width: 480px) {
    .dm-scm-modal {
        width: 95%;
        padding-bottom: 40px;
    }

    /* ⚠ دو دکمهٔ فوتر در یک ردیف می‌مانند (زیر هم، مودال را بلند و شلوغ می‌کرد).
       علتِ شکستنِ متن و نابرابریِ ارتفاع قبلاً این بود که «مشاهده سبد و تسویه» روی ۳۷۵ دو خط می‌شد؛
       حالا متن تک‌خطی است، فونت و فاصلهٔ داخلی کمی کوچک‌تر، و «ادامه خرید» فقط به اندازهٔ متنش جا می‌گیرد. */
    .dm-scm-btn-wrapper {
        flex-direction: row;
        align-items: stretch;
        gap: 8px;
    }

    .dm-scm-btn-wrapper > .dm-scm-btn-continue,
    .dm-scm-btn-wrapper > .dm-scm-btn-primary {
        min-width: 0;
        padding: 12px 14px !important;
        font-size: 13px !important;
        white-space: nowrap;
    }
    .dm-scm-btn-wrapper > .dm-scm-btn-continue { flex: 0 0 auto; }
    .dm-scm-btn-wrapper > .dm-scm-btn-primary { flex: 1 1 auto; }
    .dm-milestone-label-visible {
        width: 155px;
        font-size: 9px;
    }
    .dm-scm-milestone-dot:last-child .dm-milestone-label-visible {
        left: 60px;
    }
    .dm-scm-milestone-dot:last-child .dm-milestone-label-visible::after {
            left: 94% !important;
    }
}

/* =========================================
   10. CART PAGE STYLES (Zhaket Style)
   ========================================= */
tr.cart_item.dm-child-item td {
    border-top: none !important;
    background-color: #fafafa;
    padding-top: 5px;
    padding-bottom: 5px;
}

tr.cart_item.dm-child-item td.product-thumbnail {
    position: relative;
}

tr.cart_item.dm-child-item td.product-thumbnail::before {
    content: '';
    position: absolute;
    top: -30px;
    left: 50%;
    bottom: 50%;
    border-left: 2px dashed #ccc;
    z-index: 1;
}

tr.cart_item.dm-child-item td.product-thumbnail::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    border-top: 2px dashed #ccc;
    z-index: 1;
}

.dm-addon-thumbnail {
    position: relative;
    z-index: 2;
    background: #fff !important;
    border: 1px solid #eee;
}

.dm-addon-title {
    font-size: 0.9em;
    color: #666;
}

/* =========================================
   11. MINI CART DRAWER (LEFT/RIGHT SIDE)
   ========================================= */
.dm-scm-float-btn {
    position: fixed;
    z-index: 99990;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    background: var(--dm-scm-primary, #3e68ff);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dm-scm-float-btn.dm-pos-bottom-left {
    bottom: 20px;
    left: 20px;
}

.dm-scm-float-btn.dm-pos-bottom-right {
    bottom: 20px;
    right: 20px;
}

/*
 * ⚠ این کنترل از لنگرِ `href="#"` به `<button type="button">` تغییر کرد (نشانه‌گذاریِ درست برای
 * چیزی که مقصدی ندارد و فقط کشو را باز می‌کند). دکمه سبکِ پیش‌فرضِ مرورگر را می‌گیرد — پس‌زمینهٔ
 * خاکستری، کادر، و قلمِ فرمی — پس بدونِ این خنثی‌سازی، همان تغییرِ درستِ نشانه‌گذاری روی هر
 * فروشگاهی یک دکمهٔ خاکستریِ زشت می‌ساخت. تغییرِ نشانه‌گذاری و خنثی‌سازی‌اش یک بسته‌اند.
 */
.dm-scm-trigger-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    cursor: pointer;
    color: #fff;
    /*box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);*/
    text-decoration: none;
    position: relative;
    transition: transform 0.2s ease;
}

.dm-scm-trigger-btn:hover {
    transform: scale(1.1);
    color: #fff;
}

.dm-scm-trigger-btn img {
    width: var(--dm-scm-minicart-icon-size, 27px);
    height: var(--dm-scm-minicart-icon-size, 27px);
    object-fit: contain;
}

.dm-scm-icon-img {
    width: var(--dm-scm-minicart-icon-size, 27px);
    height: var(--dm-scm-minicart-icon-size, 27px);
    object-fit: contain;
}

.dm-scm-icon-svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--dm-scm-minicart-icon-color, #fff);
}

.dm-scm-icon-svg svg {
    width: var(--dm-scm-minicart-icon-size, 27px);
    height: var(--dm-scm-minicart-icon-size, 27px);
}

.dm-scm-icon-svg svg * {
    fill: currentColor !important;
}

.dm-scm-trigger-btn .dashicons {
    font-size: 28px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/*
 * ⚠ SKINNABLE + the accessibility floor. Two things were wrong here and both were invisible.
 *
 * 1. The colours were literals, so a host theme could only fight them with a bare
 *    `.dm-scm-count-badge` rule of its OWN — which ties on specificity (0-1-0 vs 0-1-0) and then
 *    loses on load order, because this stylesheet is enqueued after the theme's. MEASURED on a
 *    real site: the theme set its brand tokens here and NOTHING applied, on every page.
 *    They are custom properties now, with the previous literals as fallbacks, so nothing changes
 *    for an existing install and a theme can finally reach them.
 *
 * 2. ⚠ VISIBLE CHANGE, deliberate: the text was 11px on #EF3E63, measuring 3.79:1 against white —
 *    under the 4.5:1 needed at that size, and under the 12px floor. The size is now 12px and the
 *    badge is a pill with a minimum width instead of a fixed 15px circle, so a two-digit count no
 *    longer overflows its own box. A single-digit badge grows by 1px.
 */
.dm-scm-count-badge {
    position: absolute;
    top: -6px;
    right: 1px;
    color: var(--dm-scm-count-ink, #fff);
    font-size: var(--dm-scm-count-size, 12px);
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--dm-scm-count-bg, #EF3E63);
}

/* ۲٫۳۳٫۰ — نشانِ شمارنده تا رسیدنِ عددِ واقعی خالی است؛ «۰»ِ موقت روی سبدِ پر نمی‌پرد. */
.dm-scm-count-badge:empty {
    display: none;
}

/*
 * ⚠ overflow: hidden عمدی و لازم است.
 * پنلِ درونی وقتی بسته است با translateX کاملاً بیرونِ صفحه پارک می‌شود
 * (اندازه‌گیری‌شده: x = -350px). بدونِ برشِ والد، آن ۳۵۰ پیکسل محتوا بیرونِ
 * ویوپورت زندگی می‌کند. هر دو پیاده‌سازیِ دیگرِ همین الگو در این کدبیس
 * (آفکنواسِ مگامنو و آفکنواسِ خودِ قالب) این برش را دارند؛ فقط همین یکی نداشت.
 */
.dm-scm-drawer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 99999;
    visibility: hidden;
    opacity: 0;
    transition: all 0.3s ease;
    pointer-events: none;
}

.dm-scm-drawer.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.dm-scm-drawer-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    transition: opacity 0.3s;
}

/*
 * ⚠ برگردانده شد به چپ — نوبتِ قبل این‌جا را با استدلالِ «سایت فارسی است پس
 * کشو باید از راست بیاید» به راست منتقل کرده بودم، بدونِ اینکه محلِ واقعیِ
 * آیکونِ محرک را روی خودِ سایت اندازه بگیرم. اندازه‌گیریِ مستقیم (هم موبایل
 * هم دسکتاپ، سایتِ زنده) نشان داد آیکونِ سبد در .header-actions/.dm-scm-
 * trigger-wrapper دقیقاً روی لبهٔ چپِ صفحه می‌نشیند (x≈0 در ۱۳۸۵px هم در
 * ۳۹۰px) — چیدمانِ خودِ این سایت، نه یک قاعدهٔ کلیِ RTL. کشویی که از سمتِ
 * مخالفِ آیکونش باز شود گمراه‌کننده است، مستقل از جهتِ زبان. قاعدهٔ درست:
 * کشو از همان سمتی باز شود که محرکش آنجاست — اینجا چپ.
 *
 * سایه هم برگشت به حالتِ اول (سایه به سمتِ راست/داخلِ صفحه برای پنلِ چسبیده‌
 * به‌چپ)، وگرنه بیرونِ صفحه می‌افتد و دیده نمی‌شود.
 */
.dm-scm-drawer-content {
    position: absolute;
    top: 0;
    left: 0 !important;
    right: auto !important;
    width: 350px;
    max-width: 90%;
    height: 100%;
    background: #fff;
    display: flex;
    flex-direction: column;
    box-shadow: 5px 0 25px rgba(0, 0, 0, 0.1);
    direction: rtl;
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: var(--dm-scm-font);
}

.dm-scm-drawer-content * {
    font-family: var(--dm-scm-font) !important;
}

.dm-scm-drawer.open .dm-scm-drawer-content {
    transform: translateX(0);
}

.dm-scm-drawer-header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: #fff;
}

.dm-scm-drawer-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.dm-scm-drawer-close {
    background: var(--dm-scm-drawer-close-bg, transparent);
    border: none;
    border-radius: var(--dm-scm-drawer-close-radius, 0);
    font-size: 24px;
    cursor: pointer;
    color: var(--dm-scm-drawer-close-color, #999);
    padding: 0;
    line-height: 1;
    transition: color 0.2s, background-color 0.2s;
}

.dm-scm-drawer-close:hover {
    /* اگر رنگ اختصاصی این دکمه ست نشده باشد، به همان تنظیم عمومیِ «رنگ دکمه‌ها (هاور)» برمی‌گردد
       — قبلاً این دکمه هیچ‌کدام از این دو را نمی‌خواند و رنگ هاورش کاملاً هاردکد بود. */
    color: var(--dm-scm-drawer-close-hover-color, var(--dm-scm-btn-hover, #ff5b5b));
    background: var(--dm-scm-drawer-close-hover-bg, transparent);
}

.dm-scm-drawer-progress {
    padding: 15px 20px;
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
}

.dm-scm-mini-msg {
    margin: 0 0 8px;
    font-size: 13px;
    text-align: center;
    color: #555;
}

.dm-scm-mini-bar {
    height: 6px;
    background: #e0e0e0;
    border-radius: 3px;
    overflow: hidden;
    direction: ltr;
}

.dm-scm-mini-fill {
    height: 100%;
    background: var(--dm-scm-primary);
    width: var(--dm-scm-mini-progress, 0);
    transition: width 0.5s ease;
}

.dm-scm-drawer-rewards {
    padding: 0 20px;
}

.dm-scm-drawer-rewards:empty {
    padding: 0;
}

.dm-scm-mini-rewards {
    background: #fff9ec;
    border: 1px dashed #f0c14b;
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 15px;
}

.dm-scm-mini-rewards-title {
    display: block;
    font-size: 13px;
    margin-bottom: 6px;
}

.dm-scm-mini-reward-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 12px;
    color: #555;
    padding: 3px 0;
}

.dm-scm-mini-reward-row b {
    color: var(--dm-scm-primary);
    font-weight: 700;
}

.dm-scm-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    background: #fff;
}

.dm-scm-cart-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dm-scm-cart-item {
    display: flex;
    gap: 15px;
    padding-bottom: 15px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eee;
    position: relative;
}

.dm-scm-cart-item:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.dm-scm-cart-item.dm-scm-is-addon {
    padding-right: 30px;
    background: #fdfdfd;
    border-bottom: none;
    margin-bottom: 5px;
    padding-bottom: 5px;
}

.dm-scm-connector {
    position: absolute;
    right: 12px;
    top: -25px;
    bottom: 25px;
    width: 10px;
    border-right: 2px dashed #ccc;
    border-bottom: 2px dashed #ccc;
    border-bottom-right-radius: 8px;
    pointer-events: none;
}

.dm-scm-item-thumb img,
.dm-addon-thumb-icon {
    width: var(--dm-scm-thumb-img-size, 50px);
    height: var(--dm-scm-thumb-img-size, 50px);
    border-radius: var(--dm-scm-thumb-img-radius, 6px);
    object-fit: cover;
    flex-shrink: 0;
}

.dm-addon-thumb-icon {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #aaa;
    border: 1px solid #eee;
    line-height: normal;
}

.dm-scm-item-thumb img.dm-scm-addon-thumb-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

.dm-scm-item-details {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

/* تعدادِ خطِ عنوان از تنظیمات می‌آید (دسکتاپ و موبایل جدا؛ مقدارِ موبایل در مدیای
 * پایین‌ترِ همین فایل ست می‌شود). یک خط = همان رفتارِ قبلی. بیشتر از یک خط با
 * -webkit-line-clamp بریده می‌شود که همهٔ مرورگرهای امروزی — از جمله فایرفاکس —
 * پشتیبانی می‌کنند.
 * ⚠ white-space باید normal باشد؛ nowrap اجازهٔ شکستنِ خط نمی‌دهد و clamp بی‌اثر
 * می‌شود، یعنی تنظیمِ «دو خطی» بی‌سروصدا کار نمی‌کرد. */
.dm-scm-item-title {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 4px;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--dm-scm-title-lines, 1);
    line-clamp: var(--dm-scm-title-lines, 1);
    white-space: normal;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dm-scm-item-price {
    font-size: 13px;
    color: #777;
}

.dm-scm-remove-item {
    position: absolute;
    top: -5px;
    left: -10px;
    color: var(--dm-scm-remove-item-color, #FFF);
    background: var(--dm-scm-remove-item-bg, #ff5b5b);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dm-scm-rm-item-size, auto);
    height: var(--dm-scm-rm-item-size, auto);
    font-size: var(--dm-scm-rm-item-icon-size, 18px);
    line-height: 1;
    padding: 0px 5px;
    transition: color 0.2s, background-color 0.2s;
    border-radius: var(--dm-scm-remove-item-radius, 50px);
}

.dm-scm-remove-item:hover {
    color: var(--dm-scm-remove-item-hover-color, #d63638);
    background: var(--dm-scm-remove-item-hover-bg, var(--dm-scm-remove-item-bg, #ff5b5b));
}

/* ⚠ این دکمه تا الان همان متغیرهای دکمهٔ «حذف محصول» را می‌خواند، یعنی عوض‌کردنِ
 * رنگِ یکی، آن یکی را هم عوض می‌کرد و جدا تنظیم‌شدنی نبود. حالا متغیرهای مستقلِ
 * خودش را دارد و مقدارِ پشتیبانش همان ظاهرِ قبلی است، پس هیچ سایتی با آپدیت
 * ظاهرش تغییر نمی‌کند. */
.dm-scm-remove-addon-item {
    color: var(--dm-scm-rm-addon-color, #ff5b5b);
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--dm-scm-rm-addon-size, auto);
    height: var(--dm-scm-rm-addon-size, auto);
    font-size: var(--dm-scm-rm-addon-icon-size, 18px);
    line-height: 1;
    padding: 5px;
    text-decoration: none;
    background: var(--dm-scm-rm-addon-bg, #fdfdfd);
    border-radius: var(--dm-scm-rm-addon-radius, 0);
    transition: color 0.2s, background-color 0.2s;
}

.dm-scm-remove-addon-item:hover {
    color: var(--dm-scm-rm-addon-hover-color, #d63638);
    background: var(--dm-scm-rm-addon-hover-bg, var(--dm-scm-rm-addon-bg, #fdfdfd));
}

.dm-scm-drawer-footer {
    padding: 20px;
    border-top: 1px solid #eee;
    background: #fff;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.02);
}

.dm-scm-subtotal {
    display: flex;
    justify-content: space-between;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 15px;
    color: #333;
}

.dm-scm-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dm-scm-btn-block {
    width: 100%;
    display: block;
    text-align: center;
}

/* ⚠ رنگ و پدینگِ این دکمه قبلاً هاردکد بود (#f0f0f0 / #333 / 12px) و برخلافِ دکمهٔ
   اصلی به هیچ متغیری وصل نبود — یعنی حتی بدونِ تداخلِ قالب هم تنظیماتِ ظاهری رویش
   اثر نداشت. حالا از همان متغیرهای مشترکِ دکمه‌ها می‌خواند: رنگ از «دکمهٔ ادامه خرید»
   و پدینگ/مارجین/رادیوس از همان سه تنظیمِ چهارطرفهٔ مشترک.

   !important لازم است: با اینکه کلاسِ `button` از مارک‌آپ حذف شد، این عنصر هنوز
   `wc-forward` دارد و بعضی قالب‌ها روی همان هم استایلِ دکمه می‌گذارند. */
.dm-scm-btn-secondary {
    background: var(--dm-scm-btn-cont-bg, #f0f0f0) !important;
    color: var(--dm-scm-btn-cont-text, #333) !important;
    border: none !important;
    padding: var(--dm-scm-btn-pad, 12px) !important;
    margin: var(--dm-scm-btn-mar, 0) !important;
    border-radius: var(--dm-scm-btn-rad, 8px) !important;
    font-size: var(--dm-scm-fs-btn) !important;
    text-align: center !important;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    box-sizing: border-box;
    text-decoration: none !important;
    display: block;
}

.dm-scm-btn-secondary:hover {
    background: var(--dm-scm-btn-hover, #e0e0e0) !important;
    color: var(--dm-scm-btn-hover-text, #000) !important;
}

.dm-scm-empty-cart {
    text-align: center;
    color: #777;
    margin-top: 50px;
    font-size: 14px;
}

/* =========================================
   12. CONFIRM DELETE MODAL
   ========================================= */
.dm-scm-confirm-popup {
    background: #fff;
    width: 90%;
    max-width: 400px;
    padding: 25px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    animation: fadeInScale 0.3s ease;
    font-family: var(--dm-scm-font, inherit);
}

.dm-scm-confirm-popup h3 {
    margin-top: 0;
    margin-bottom: 10px;
    color: #333;
}

.dm-scm-confirm-popup p {
    color: #666;
    margin-bottom: 25px;
    font-size: 14px;
}

.dm-scm-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.dm-scm-confirm-actions .button {
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    border: none;
    font-family: inherit;
}

#dm-scm-confirm-no {
    background: #f0f0f0;
    color: #333;
}

#dm-scm-confirm-yes {
    background: #d32f2f;
    color: #fff;
}

#dm-scm-confirm-yes:hover {
    background: #b71c1c;
}

@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* بخش «فست‌چک‌اوت» پیشین از این فایل حذف شد: نشانه‌گذاری دست‌سازِ درگاه‌ها که این
   قواعد به آن وصل بودند دیگر تولید نمی‌شود و جای آن را فرم رسمی تسویه‌ی ووکامرس
   گرفته که استایلش در فایل صفحه‌ی سبد خرید است. */

/* ویجت المنتوری «دکمه سبد خرید کشویی» — بیس مینیمال؛ رنگ/سایز/فاصله همه از کنترل‌های
   Style-tab خودِ ویجت می‌آید (سلکتورهای {{WRAPPER}}). .dm-scm-count-badge از قبل تعریف
   شده (بالاتر در همین فایل) و مشترک است، اینجا فقط دوباره تعریف نمی‌شود. */
.dm-scm-el-trigger-btn {
    display: inline-flex;
    align-items: center;
    position: relative;
    text-decoration: none;
    cursor: pointer;
}

.dm-scm-el-trigger-icon-wrap {
    position: relative;
    display: inline-flex;
}

.dm-scm-el-trigger-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

.dm-scm-el-trigger-icon svg {
    display: block;
}