/* ============================================================================
   کشوی سبد خرید — مشترکِ همهٔ قالب‌ها.

   عمداً هیچ کلاسی از هیچ قالبی را قرض نمی‌گیرد و هیچ کلاسِ قالب را هم بازنویسی
   نمی‌کند: همهٔ نام‌ها با `cdrw-` شروع می‌شوند. یک قالب اگر خواست ظاهرش را عوض
   کند، کافی است همین چند متغیرِ زیر را در CSSِ خودش دوباره تعریف کند — نه اینکه
   فایل را کپی کند.

   سایت راست‌چین است، پس کشو از **چپ** می‌آید (همان سمتی که آیکنِ سبد در هدر
   است). این خواستهٔ فروشنده بود، نه پیش‌فرضِ بوت‌استرپ.
   ========================================================================== */

:root {
    --cdrw-width: 380px;
    --cdrw-bg: #fff;
    --cdrw-fg: #1b1b1b;
    --cdrw-muted: #7a7a7a;
    --cdrw-line: #ececec;
    --cdrw-accent: #e0322d;
    --cdrw-accent-fg: #fff;
    --cdrw-radius: 10px;
    /* هدرها در این قالب‌ها تا 100001 بالا می‌روند و استوری‌مودال تا
       2147483000. کشو یک دیالوگِ مودال است، پس باید از همه بالاتر بنشیند —
       با 10050 زیرِ هدر می‌رفت. */
    --cdrw-z: 2147483001;
}

.cdrw-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: calc(var(--cdrw-z) - 1);
}

.cdrw-panel {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--cdrw-width);
    max-width: 92vw;
    background: var(--cdrw-bg);
    color: var(--cdrw-fg);
    display: flex;
    flex-direction: column;
    /* بیرونِ صفحه پارک می‌شود، نه display:none — وگرنه انیمیشن ندارد و
       صفحه‌خوان هم محتوای بسته را می‌خواند. */
    transform: translateX(-100%);
    transition: transform .28s cubic-bezier(.22, .61, .36, 1);
    z-index: var(--cdrw-z);
    box-shadow: 0 0 40px rgba(0, 0, 0, .18);
    direction: rtl;
}

.cdrw-open .cdrw-overlay { opacity: 1; visibility: visible; }
.cdrw-open .cdrw-panel { transform: translateX(0); }

/* وقتی کشو باز است صفحهٔ زیرش نباید اسکرول شود. */
body.cdrw-lock { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
    .cdrw-panel, .cdrw-overlay { transition: none; }
}

/* ── حفاظ در برابرِ CSSِ قالب ─────────────────────────────────────────────
   قالب‌ها روی نامِ تگ استایل می‌دهند (`header { position: fixed; height: 13rem }`
   در سه قالبِ همین پروژه) و کلاس‌های عمومی هم دارند. مارک‌آپِ کشو برای همین
   فقط `div` است، ولی یک قالبِ اختصاصیِ بعدی می‌تواند `.cdrw-*` را هم ندیده
   بگیرد و چیزِ دیگری را جابه‌جا کند. این سه خط ستونِ فقراتِ چیدمان را تثبیت
   می‌کنند: هر سه تکه باید در جریانِ فلکسِ پنل بمانند، نه شناور.
   ────────────────────────────────────────────────────────────────────── */
.cdrw-head, .cdrw-body, .cdrw-foot {
    position: relative;
    inset: auto;
    float: none;
    height: auto;
    width: auto;
    max-width: none;
    min-width: 0;
}

/* ── سر ───────────────────────────────────────────────────────────────── */
.cdrw-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cdrw-line);
    flex: 0 0 auto;
}

.cdrw-title { font-size: 15px; font-weight: 700; margin: 0; }
.cdrw-title span { color: var(--cdrw-muted); font-weight: 400; font-size: 13px; }

.cdrw-close {
    border: 0;
    background: transparent;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: var(--cdrw-muted);
    padding: 4px 8px;
    border-radius: 6px;
}
.cdrw-close:hover { background: var(--cdrw-line); color: var(--cdrw-fg); }

/* ── فهرست ────────────────────────────────────────────────────────────── */
.cdrw-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.cdrw-item {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cdrw-line);
    align-items: start;
}

.cdrw-thumb {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border: 1px solid var(--cdrw-line);
    border-radius: var(--cdrw-radius);
    background: #fafafa;
}

.cdrw-name {
    font-size: 13px;
    line-height: 1.6;
    color: inherit;
    text-decoration: none;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cdrw-name:hover { color: var(--cdrw-accent); }

.cdrw-variant { font-size: 11px; color: var(--cdrw-muted); margin-top: 3px; }
.cdrw-variant b { font-weight: 600; color: var(--cdrw-fg); }

.cdrw-price { font-size: 13px; font-weight: 700; margin-top: 6px; white-space: nowrap; }
.cdrw-price small { font-weight: 400; color: var(--cdrw-muted); }

/* ── تعداد ────────────────────────────────────────────────────────────── */
.cdrw-qty {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--cdrw-line);
    border-radius: 999px;
    overflow: hidden;
}

.cdrw-qty button {
    border: 0;
    background: transparent;
    width: 28px;
    height: 28px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    color: var(--cdrw-fg);
}
.cdrw-qty button:hover:not(:disabled) { background: var(--cdrw-line); }
.cdrw-qty button:disabled { opacity: .35; cursor: default; }
.cdrw-qty output { min-width: 26px; text-align: center; font-size: 13px; font-weight: 600; }

.cdrw-side { display: flex; flex-direction: column; align-items: center; gap: 8px; }

.cdrw-remove {
    border: 0;
    background: transparent;
    color: var(--cdrw-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 2px 4px;
}
.cdrw-remove:hover { color: var(--cdrw-accent); }

/* ── حالتِ خالی ───────────────────────────────────────────────────────── */
.cdrw-empty { padding: 48px 20px; text-align: center; color: var(--cdrw-muted); font-size: 13px; }
.cdrw-empty i { font-size: 44px; display: block; margin-bottom: 12px; opacity: .35; }

/* ── پا ───────────────────────────────────────────────────────────────── */
.cdrw-foot { flex: 0 0 auto; border-top: 1px solid var(--cdrw-line); padding: 14px 16px; }

.cdrw-row { display: flex; justify-content: space-between; font-size: 13px; margin-bottom: 8px; }
.cdrw-row.is-total { font-size: 15px; font-weight: 700; }
.cdrw-row.is-discount { color: var(--cdrw-accent); }

.cdrw-actions { display: flex; gap: 8px; margin-top: 12px; }

.cdrw-btn {
    flex: 1 1 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 11px 10px;
    border-radius: var(--cdrw-radius);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--cdrw-line);
    color: var(--cdrw-fg);
    background: #fff;
    cursor: pointer;
}

.cdrw-btn.is-primary { background: var(--cdrw-accent); border-color: var(--cdrw-accent); color: var(--cdrw-accent-fg); }
.cdrw-btn:hover { filter: brightness(.96); }

/* در حالِ به‌روزرسانی، کلِ کشو نیمه‌فعال می‌شود تا دو کلیکِ پشتِ هم دو درخواست
   نفرستد و عددها با هم نجنگند. */
.cdrw-busy .cdrw-body, .cdrw-busy .cdrw-foot { opacity: .55; pointer-events: none; }