﻿/* دکمه بستن — سمت چپ باکس (دسکتاپ و موبایل) */
.cart-summary-close {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 30;
    width: 32px;
    height: 32px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    border-radius: 50%;
    background: color-mix(in srgb, var(--C6, #333) 8%, transparent);
    color: var(--C6, #333);
    box-shadow: none;
    cursor: pointer;
    transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cart-summary-close i {
    font-size: 1.05rem;
    line-height: 1;
}

.cart-summary-box.visible .cart-summary-close,
.cart-summary-sheet.is-showing .cart-summary-close,
.cart-summary-sheet.is-open .cart-summary-close,
.cart-summary-sheet.is-closing .cart-summary-close {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cart-summary-close:hover,
.cart-summary-close:focus-visible {
    background: color-mix(in srgb, var(--C6, #333) 14%, transparent);
    color: var(--C6, #333);
    transform: scale(1.05);
    outline: none;
}

:root[data-bs-theme="dark"] .cart-summary-close,
[data-bs-theme="dark"] .cart-summary-close {
    background: rgba(255, 255, 255, 0.08);
    color: var(--C6, #fff);
    border-color: rgba(255, 255, 255, 0.1);
}

:root[data-bs-theme="dark"] .cart-summary-close:hover,
:root[data-bs-theme="dark"] .cart-summary-close:focus-visible,
[data-bs-theme="dark"] .cart-summary-close:hover,
[data-bs-theme="dark"] .cart-summary-close:focus-visible {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

/* روی هدر رنگی خلاصه سبد */
.cart-summary-box:has(.cart-summary-header) .cart-summary-close {
    background: rgba(255, 255, 255, 0.18);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cart-summary-box:has(.cart-summary-header) .cart-summary-close:hover,
.cart-summary-box:has(.cart-summary-header) .cart-summary-close:focus-visible {
    background: rgba(255, 255, 255, 0.28);
    color: #fff;
}

/* خلاصه سبد — محتوای مشترک دسکتاپ و موبایل (منبع واحد UI) */
.cart-summary-content {
    --cs-panel-bg: #fff;
    --cs-panel-border: rgba(0, 0, 0, 0.08);
    --cs-body-bg: #fff;
    --cs-footer-bg: #f8f9fa;
    --cs-item-hover: rgba(0, 0, 0, 0.04);
    --cs-text: var(--C6, #333);
    --cs-text-muted: #6c757d;
    --cs-divider: rgba(0, 0, 0, 0.08);
    --cs-img-bg: rgba(0, 0, 0, 0.04);
    --cs-shadow: 0 24px 48px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1);
    --cs-pending-accent: #d97706;
    --cs-pending-bg: rgba(245, 158, 11, 0.1);
    --cs-pending-text: #92400e;
    --cs-pending-strong: #b45309;
    direction: rtl;
    text-align: right;
    color: var(--cs-text);
}

:root[data-bs-theme="dark"] .cart-summary-content,
[data-bs-theme="dark"] .cart-summary-content {
    --cs-panel-bg: var(--C4);
    --cs-panel-border: rgba(255, 255, 255, 0.12);
    --cs-body-bg: var(--C1);
    --cs-footer-bg: color-mix(in srgb, var(--C1) 72%, var(--C4));
    --cs-item-hover: rgba(255, 255, 255, 0.06);
    --cs-text: var(--C6);
    --cs-text-muted: var(--C5);
    --cs-divider: rgba(255, 255, 255, 0.1);
    --cs-img-bg: rgba(255, 255, 255, 0.06);
    --cs-shadow: 0 24px 48px rgba(0, 0, 0, 0.45), 0 8px 16px rgba(0, 0, 0, 0.28);
    --cs-pending-bg: rgba(245, 158, 11, 0.14);
    --cs-pending-text: #fcd34d;
    --cs-pending-strong: #fbbf24;
}

.cart-summary-content .cart-summary-inner,
.cart-summary-content .cart-summary-combined,
.cart-summary-content .cart-summary-empty {
    background: var(--cs-body-bg);
}

.cart-summary-content .cart-summary-header {
    padding: 14px 18px 14px 48px;
}

.cart-summary-content .cart-summary-inner:not(.cart-summary-inner--pending) .cart-summary-header {
    background: var(--gradient-brand);
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.cart-summary-content .cart-summary-inner--pending .cart-summary-header--pending {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff;
}

.cart-summary-content .cart-summary-title {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.92rem;
    font-weight: 600;
}

.cart-summary-content .cart-summary-count-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    height: 1.35rem;
    padding: 0 0.35rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.22);
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
}

.cart-summary-content .cart-summary-items {
    padding: 8px 0;
    scrollbar-width: thin;
    /* از توکن‌های خود پنل — نه --C سراسری صفحه پروفایل/سبد */
    scrollbar-color: color-mix(in srgb, var(--cs-text-muted, #6c757d) 85%, var(--cs-text, #333)) color-mix(in srgb, var(--cs-divider, rgba(0,0,0,.08)) 70%, transparent);
}

.cart-summary-content .cart-summary-items::-webkit-scrollbar { width: 6px; }
.cart-summary-content .cart-summary-items::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--cs-text-muted, #6c757d) 75%, var(--cs-text, #333));
    border-radius: 999px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
.cart-summary-content .cart-summary-items::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--cs-text, #333) 70%, var(--cs-text-muted, #6c757d));
}
.cart-summary-content .cart-summary-items::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--cs-divider, rgba(0,0,0,.08)) 55%, transparent);
    border-radius: 999px;
}

.cart-summary-content .cart-summary-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 18px;
    border-bottom: 1px solid var(--cs-divider);
    position: relative;
    transition: background 0.2s;
}
.cart-summary-content .cart-summary-item:last-child { border-bottom: none; }
.cart-summary-content .cart-summary-item:hover { background: var(--cs-item-hover) !important; }

.cart-summary-content .cart-summary-item-link {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
    text-decoration: none;
    color: inherit;
}

.cart-summary-content .cart-summary-item-info {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.cart-summary-content .cart-summary-item-img-wrap {
    position: relative;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: var(--cs-img-bg);
    border: 1px solid var(--cs-divider);
}

.cart-summary-content .cart-summary-item-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 0;
}

.cart-summary-content .cart-summary-discount-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #dc3545;
    color: #fff;
    font-size: 0.65rem;
    padding: 2px 5px;
    border-radius: 4px;
}

.cart-summary-content .cart-summary-item-name {
    display: block;
    font-weight: 600;
    font-size: 0.84rem;
    color: var(--cs-text) !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cart-summary-content .cart-summary-item-meta {
    font-size: 0.75rem;
    color: var(--cs-text-muted) !important;
    line-height: 1.35;
    margin-top: 2px;
}

.cart-summary-content .cart-summary-item-name .text-muted {
    color: var(--cs-text-muted) !important;
    font-weight: 400;
}

.cart-summary-content .cart-summary-remove {
    flex-shrink: 0;
    background: none;
    border: none;
    padding: 6px;
    color: #dc3545;
    border-radius: 8px;
    cursor: pointer;
    opacity: 0.72;
    transition: opacity 0.2s, background 0.2s;
}
.cart-summary-content .cart-summary-remove:hover {
    opacity: 1;
    background: rgba(220, 53, 69, 0.08);
}
.cart-summary-content .cart-summary-remove:disabled { opacity: 0.4; cursor: not-allowed; }

.cart-summary-content .cart-summary-footer {
    padding: 14px 18px;
    border-top: 1px solid var(--cs-divider);
    background: var(--cs-footer-bg) !important;
}

.cart-summary-content .cart-summary-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: 0.95rem;
}

.cart-summary-content .cart-summary-total span { color: var(--cs-text) !important; font-weight: 600; }
.cart-summary-content .cart-summary-total strong { color: var(--C1); font-size: 1.05rem; }
:root[data-bs-theme="dark"] .cart-summary-content .cart-summary-total strong,
[data-bs-theme="dark"] .cart-summary-content .cart-summary-total strong { color: var(--C3) !important; }

.cart-summary-content .cart-summary-actions {
    display: flex;
    gap: 8px;
}

.cart-summary-content .cart-summary-btn {
    flex: 1;
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 11px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.88rem;
    line-height: 1.25;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s, background 0.2s, border-color 0.2s;
}

.cart-summary-content .cart-summary-btn--primary {
    background: var(--gradient-cta);
    color: var(--on-accent) !important;
    border: 1px solid transparent;
}
.cart-summary-content .cart-summary-btn--primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--cta-shadow);
    color: var(--on-accent) !important;
}

.cart-summary-content .cart-summary-btn--secondary {
    background: var(--cs-body-bg);
    color: var(--C1) !important;
    border: 1px solid var(--cs-divider);
}
.cart-summary-content .cart-summary-btn--secondary:hover {
    background: var(--cs-item-hover);
    color: var(--C1) !important;
}
:root[data-bs-theme="dark"] .cart-summary-content .cart-summary-btn--secondary,
[data-bs-theme="dark"] .cart-summary-content .cart-summary-btn--secondary {
    background: transparent;
    color: var(--C6) !important;
    border-color: rgba(255, 255, 255, 0.16);
}

.cart-summary-content .cart-summary-empty {
    padding: 28px 20px;
    text-align: center;
    color: var(--cs-text-muted);
}

.cart-summary-content .cart-summary-inner--pending .cart-summary-header--pending { color: #fff; }
.cart-summary-content .cart-summary-pending-hint {
    color: var(--cs-text-muted) !important;
    border-bottom: 1px solid var(--cs-divider);
    line-height: 1.55;
    padding-bottom: 10px !important;
}
.cart-summary-content .cart-summary-pending-order { border-bottom-color: var(--cs-divider) !important; }
.cart-summary-content .cart-summary-pending-order-head {
    background: var(--cs-pending-bg) !important;
    color: var(--cs-pending-text) !important;
    padding: 8px 18px;
    margin: 0;
}
.cart-summary-content .cart-summary-pending-order-head strong { color: var(--cs-pending-strong) !important; }
.cart-summary-content .cart-summary-pending-more {
    border-top-color: var(--cs-divider) !important;
    color: var(--cs-text-muted) !important;
}
.cart-summary-content .cart-summary-footer--pending { background: var(--cs-footer-bg) !important; }
.cart-summary-content .cart-summary-total--pending strong { color: var(--cs-pending-strong) !important; }

.cart-summary-content .cart-summary-pending-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 0;
    padding: 7px 8px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.76rem;
    line-height: 1.2;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background 0.2s, box-shadow 0.2s, border-color 0.2s;
    white-space: nowrap;
}
.cart-summary-content .cart-summary-pending-actions { display: flex; flex-direction: column; gap: 6px; }
.cart-summary-content .cart-summary-pending-actions-row { display: flex; gap: 6px; }
.cart-summary-content .cart-summary-pending-btn--pay {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #fff !important;
    border-color: #d97706;
}
.cart-summary-content .cart-summary-pending-btn--details {
    background: var(--cs-body-bg) !important;
    border-color: color-mix(in srgb, var(--cs-pending-accent) 45%, var(--cs-divider)) !important;
    color: var(--cs-pending-strong) !important;
}
.cart-summary-content .cart-summary-pending-btn--cancel {
    width: 100%;
    flex: none;
    background: transparent;
    border-color: var(--cs-divider) !important;
    color: var(--cs-text-muted) !important;
    font-weight: 500;
}

.cart-summary-content .cart-summary-link-secondary { color: var(--cs-text-muted) !important; }
.cart-summary-content .cart-summary-link-secondary:hover { color: var(--cs-text) !important; }

.cart-summary-content .cart-summary-combined .cart-summary-inner--pending-compact {
    border-bottom: 2px solid color-mix(in srgb, var(--cs-pending-accent) 40%, var(--cs-divider));
}

.cart-summary-content .cart-summary-combined .cart-summary-inner:not(.cart-summary-inner--pending) .cart-summary-items,
.cart-summary-content .cart-summary-inner--pending:not(.cart-summary-inner--pending-compact) .cart-summary-items {
    max-height: calc(2 * 4.25rem + 1.25rem);
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
}

.cart-summary-content .cart-summary-saved-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    margin: 1rem 0 0.25rem;
    padding: 0.75rem 0.85rem;
    text-align: right;
    border-radius: 0.75rem;
    background: color-mix(in srgb, var(--C3) 9%, var(--cs-body-bg));
    border: 1px solid color-mix(in srgb, var(--C3) 22%, var(--cs-divider));
}
.cart-summary-content .cart-summary-saved-hint__icon {
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 0.55rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--C3) 16%, var(--cs-body-bg));
    color: var(--C3);
    font-size: 1rem;
}
.cart-summary-content .cart-summary-saved-hint__text {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--cs-text);
    line-height: 1.45;
}
.cart-summary-content .cart-summary-saved-hint__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--C3);
    text-decoration: none;
}

@media (max-width: 992px) {
    .cart-summary-sheet .cart-summary-content .cart-summary-inner,
    .cart-summary-sheet .cart-summary-content .cart-summary-combined {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
        overflow: hidden;
    }

    .cart-summary-sheet .cart-summary-content .cart-summary-inner .cart-summary-header,
    .cart-summary-sheet .cart-summary-content .cart-summary-inner .cart-summary-footer,
    .cart-summary-sheet .cart-summary-content .cart-summary-pending-hint {
        flex-shrink: 0;
    }

    .cart-summary-sheet .cart-summary-content .cart-summary-items {
        flex: 0 1 auto;
        min-height: 0;
        /* حدود ۴ ردیف آیتم؛ بعد اسکرول */
        max-height: calc(4 * 4.35rem + 0.5rem);
        overflow-y: auto;
        overflow-x: hidden;
    }

    .cart-summary-sheet .cart-summary-content .cart-summary-combined .cart-summary-inner--pending-compact {
        flex: 0 1 auto;
        max-height: 46%;
        min-height: 0;
        overflow: hidden;
    }

    .cart-summary-sheet .cart-summary-content .cart-summary-combined .cart-summary-inner:not(.cart-summary-inner--pending) {
        flex: 1;
        min-height: 0;
    }

    .cart-summary-sheet .cart-summary-content .cart-summary-inner--pending-compact .cart-summary-pending-compact-body {
        overflow-y: auto;
        overflow-x: hidden;
        min-height: 0;
        max-height: 5.5rem;
    }
}

/* دسکتاپ — فقط ظاهر باکس شناور هدر */
@media (min-width: 993px) {
    .cart-summary-box {
        background: var(--cs-panel-bg, #fff) !important;
        border-color: var(--cs-panel-border, rgba(0, 0, 0, 0.08)) !important;
        box-shadow: var(--cs-shadow, 0 24px 48px rgba(0, 0, 0, 0.15), 0 8px 16px rgba(0, 0, 0, 0.1)) !important;
    }

    .cart-summary-content .cart-summary-items {
        max-height: 280px;
        overflow-y: auto;
    }
}
