﻿/* =========================================================
   Cart.css — Redesign
   تم: سرمه‌ای / سفید / طلایی
   نکته مهم: هیچ کلاس/آیدی‌ای که در Cart.cshtml یا جاوااسکریپت
   به آن وصل شده حذف یا تغییرنام داده نشده. فقط ظاهر و چیدمان
   (از طریق CSS Grid/Flex) بازطراحی شده است.
   ========================================================= */

.cart {
    --navy: #0f2138;
    --navy-2: #16324f;
    --navy-soft: #eef2f6;
    --gold: #c9a35c;
    --gold-light: #e7cd93;
    --gold-tint: #faf3e3;
    --paper: #ffffff;
    --text: #1c2530;
    --text-muted: #7a8291;
    --border: #e3e7ee;
    --success: #2f8f5b;
    --danger: #c0392b;
    --shadow: 0 10px 30px rgba(16, 35, 61, .08);
    --shadow-sm: 0 2px 10px rgba(16, 35, 61, .06);
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    color: var(--text);
    background: var(--navy-soft);
    margin-top: 18px;
    margin-bottom: 30px;
    border-radius: 18px;
    padding: 28px;
    min-height: 450px;
}

    .cart .row > div.header {
        position: relative;
        margin: 0 0 26px;
        padding-right: 4px;
        width: auto;
        float: none;
    }

    .cart .header .title {
        font-size: 20px;
        font-weight: 700;
        color: var(--navy);
        padding-right: 58px;
        line-height: 46px;
    }
        .cart .header .title:before {
            content: "";
            width: 40px;
            height: 40px;
            right: 0;
            top: 3px;
            position: absolute;
            border-radius: 10px;
            background-image: url('Image/Icons/shopping.png'), linear-gradient(135deg, var(--navy), var(--navy-2));
            background-repeat: no-repeat, no-repeat;
            background-position: center, center;
            background-size: 50%, 100%;
        }
    .cart .header .next, .cart .footer .next {
        float: left;
        margin-left: 10px;
    }

    /* ---------- چیدمان کلی: محصولات راست/برجسته، مراحل خرید چپ ---------- */
    .cart .row {
        position: relative;
        display: grid;
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-areas:
            "header  header"
            "products checkout";
        gap: 24px;
        align-items: start;
        direction: rtl;
    }

        .cart .row:after, .cart .row:before {
            content: none;
        }

        .cart .row .details.pLeft {
            grid-area: products;
            float: none;
            width: auto;
            padding-right: 0;
        }

        .cart .row .pRight {
            grid-area: checkout;
            float: none;
            width: auto;
            padding-left: 0;
        }

            .cart .row .pRight > div {
                width: 100%;
                height: auto;
                padding-bottom: 0;
                margin-bottom: 16px;
            }

    .cart .footer {
        grid-area: footer;
        position: relative;
        margin: 0;
        width: 100%;
        height: 100%;
        float: none;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    /* ---------- جدول محصولات → تبدیل به ردیف‌های کارتی ---------- */
    .cart table {
        width: 100%;
        table-layout: fixed;
        font-family: iranNum, 'Vazirmatn', Tahoma, sans-serif;
        border-collapse: separate;
        border-spacing: 0 12px;
    }

        .cart table thead {
            background-color: transparent;
        }

            .cart table thead td {
                color: var(--gold-light);
                background-color: var(--navy);
                border: none;
                padding: 14px 12px;
                font-size: 13px;
                font-weight: 700;
            }
                .cart table thead td.tedCart,
                .cart table thead td.priVahedCart,
                .cart table thead td.priCart {
                    text-align: center;
                }

                .cart table thead td:first-child {
                    border-radius: 0 12px 12px 0;
                }

                .cart table thead td:last-child {
                    border-radius: 12px 0 0 12px;
                }

        .cart table tbody td {
            border: none;
            border-top: 1px solid var(--border);
            border-bottom: 1px solid var(--border);
            background-color: var(--paper);
            padding: 22px 10px;
            font-size: 13px;
            box-shadow: var(--shadow-sm);
        }

            .cart table tbody td:first-child {
                border-right: 1px solid var(--border);
                border-radius: 0 14px 14px 0;
            }

            .cart table tbody td:last-child {
                border-left: 1px solid var(--border);
                border-radius: 14px 0 0 14px;
            }

            .cart table tbody td.delCart {
                width: 34px;
                vertical-align: middle;
                text-align: center;
                cursor: pointer;
                position: relative;
                color: transparent;
                font-size: 0;
            }

                .cart table tbody td.delCart > * {
                    opacity: 0;
                }

                .cart table tbody td.delCart:before {
                    content: "";
                    position: absolute;
                    inset: 0;
                    margin: auto;
                    width: 18px;
                    height: 18px;
                    pointer-events: none;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: contain;
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a8291' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6'%3E%3C/path%3E%3Cpath d='M14 11v6'%3E%3C/path%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'%3E%3C/path%3E%3C/svg%3E");
                }

                .cart table tbody td.delCart:hover:before {
                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'%3E%3C/polyline%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'%3E%3C/path%3E%3Cpath d='M10 11v6'%3E%3C/path%3E%3Cpath d='M14 11v6'%3E%3C/path%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'%3E%3C/path%3E%3C/svg%3E");
                }

        .cart table thead td.delCart {
            border-left: none;
        }
        .cart table thead td.nameCart {
            color: var(--gold-light);
        }
        .cart table td.nameCart {
            width: 42%;
            font-weight: 600;
            color: var(--navy);
            word-break: break-word;
        }
        .cart table tbody td.nameCart {
    text-align: right;
    vertical-align: middle;
}

    .cart table tbody td.nameCart .colpro {
        display: flex;
        align-items: center;
        gap: 14px;
    }

    .cart table tbody td.nameCart .calim {
        flex: 0 0 64px;
        width: 64px;
        height: 64px;
        border-radius: 10px;
        overflow: hidden;
        border: 1px solid var(--border);
        background: var(--navy-soft);
    }

        .cart table tbody td.nameCart .calim img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
        }

    .cart table tbody td.nameCart .calname {
        flex: 1 1 auto;
        min-width: 0;
        font-weight: 600;
        color: var(--navy);
    }

        .cart table tbody td.nameCart .calname:empty {
            display: none;
        }
        .cart table thead td.nameCart {
            border-right: none;
        }

        .cart table td.tedCart, .cart table td.priVahedCart, .cart table td.priCart {
            display: table-cell;
            width: 18%;
            vertical-align: middle;
            color: var(--text-muted);
        }

        .cart table td.priCart {
            width: 20%;
        }

        .cart table tbody td.tedCart, .cart table tbody td.priVahedCart, .cart table tbody td.priCart {
            text-align: center;
        }

        .cart table tbody td.tedCart {
            padding-right: 1.5%;
        }

        .cart table td.priCart {
            min-width: inherit;
            max-width: inherit;
            display: table-cell;
            font-weight: 700;
            color: var(--navy);
        }

        /* دکمه‌های افزایش/کاهش تعداد → کپسول مدرن */
        .cart table tbody td.tedCart {
            text-align: center;
            white-space: nowrap;
        }

        .cart table td.tedCart .btn3 {
            display: inline-block;
            vertical-align: middle;
            width: 28px;
            height: 28px;
            line-height: 1;
            color: transparent;
            font-weight: bold;
            font-size: 0;
            border-radius: 50%;
            background-color: var(--paper);
            box-shadow: var(--shadow-sm);
            position: relative;
            transition: background-color .15s, transform .1s;
        }

                .cart table td.tedCart .btn3:hover {
                    background-color: var(--gold-tint);
                }

                .cart table td.tedCart .btn3:active {
                    transform: scale(.92);
                }

                .cart table td.tedCart .btn3.pos, .cart table td.tedCart .btn3.min {
                    background-image: none;
                }

                    .cart table td.tedCart .btn3.pos:after,
                    .cart table td.tedCart .btn3.min:after {
                        content: "+";
                        position: absolute;
                        inset: 0;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 16px;
                        font-weight: 700;
                        color: var(--gold);
                    }

                    .cart table td.tedCart .btn3.min:after {
                        content: "−";
                    }

            .cart table td.tedCart span {
                color: transparent;
            }

        .cart table td.tedCart .textVal2 {
            display: inline-block;
            vertical-align: middle;
            width: 44px;
            text-align: center;
            border: none;
            background: transparent;
            font-family: IranNum, iranNum, sans-serif;
            font-size: 16px;
            line-height: 29px;
            color: var(--navy);
            font-weight: 700;
        }

    /* ---------- جمع سبد خرید (Total) ---------- */
    .cart .total {
        width: 100%;
        max-width: 380px;
        float: left;
        margin-top: 6px;
        border: 1px solid var(--border);
        border-top: 3px solid var(--gold);
        border-radius: 14px;
        padding: 18px 20px;
        background: var(--paper);
        box-shadow: var(--shadow-sm);
        font-family: iranNum, 'Vazirmatn', sans-serif;
    }

        .cart .total .cart-subtotal {
            padding: 6px 0;
            font-size: 14px;
            color: var(--text-muted);
        }

    .cart .mini-cart-subtotal {
        font-weight: 700;
        font-size: 14px;
        margin-bottom: 0;
    }

.mini-cart-subtotal .cart-subtotal:last-child {
    color: var(--navy);
    font-size: 18px;
    border-top: 1px dashed var(--border);
    padding-top: 10px;
    margin-top: 4px;
    display: block;
}

    .mini-cart-subtotal .cart-subtotal:last-child:before {
        color: var(--gold);
    }

.cart .row > div.details .address {
    padding: 12px 14px;
    width: 100%;
    font-size: 14px;
    font-weight: 600;
    color: var(--success);
    background: #f2f9f5;
    border: 1px solid #d8ecdf;
    border-radius: 10px;
    margin-top: 14px;
    display: inline-block;
    line-height: 22px;
}
    .cart .row > div.details .address:empty {
        display: none;
        padding: 0;
        margin: 0;
        border: none;
        background: transparent;
    }
/* ---------- ستون سبدآدرس/ورود/ارسال/پرداخت — کارت‌های Wizard ---------- */
.cart .row > div > div > div.title {
    font-size: 14px;
    line-height: 22px;
    background: linear-gradient(90deg, var(--navy), var(--navy-2));
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    font-weight: 700;
    height: auto;
    padding: 14px 52px 14px 16px;
    border-radius: 14px 14px 0 0;
    position: relative;
    color: var(--gold-light);
}

    .cart .row > div > div > div.title:before {
        content: "";
        height: 30px;
        width: 30px;
        position: absolute;
        display: inline-block;
        background-size: 55%;
        background-repeat: no-repeat;
        background-position: center;
        background-color: rgba(255, 255, 255, .12);
        border-radius: 8px;
        right: 12px;
        top: 50%;
        margin-top: -15px;
    }

.cart .row > div > div.BoxLogin > div.title:before {
    background-image: url('Image/icons/Level1.png');
}

.cart .row > div > div.BoxAddress > div.title:before {
    background-image: url('Image/icons/Level2.png');
}

.cart .row > div > div.BoxShipping > div.title:before {
    background-image: url('Image/icons/Level3.png');
}

.cart .row > div > div.BoxPayment > div.title:before {
    background-image: url('Image/icons/Level4.png');
}

.cart .row .title a {
    float: left;
    margin-left: 0;
    color: var(--gold-light);
    font-size: 12px;
    text-decoration: underline;
}

.cart .row > div.pRight > div {
    background: var(--paper);
    border-radius: 14px;
    box-shadow: var(--shadow);
    overflow: visible;
}
    .cart .row > div.pRight > div > div.title {
        border-radius: 14px 14px 0 0;
    }

.cart .row .items {
    float: none;
    width: 100%;
    max-height: none;
    border: none;
    min-height: initial;
    padding: 18px;
    margin-top: 0;
    margin-right: 0;
}

.cart .row .BoxLogin .items .item:last-child {
    text-align: center;
}

/* هر آیتم فرم: لیبل بالای فیلد */
.cart .row .items .item {
    width: 100%;
    margin-bottom: 14px;
    display: block;
}

    .cart .row .items .item .lbl {
        float: none;
        width: auto;
        display: block;
        text-align: right;
        font-size: 13px;
        font-weight: 600;
        color: var(--navy);
        margin-bottom: 6px;
    }

    .cart .row .items .item .cnl {
        float: none;
        width: 100%;
        text-align: right;
        padding-right: 0;
        padding-left: 0;
    }

.cart .row .items .error {
    color: var(--danger);
    background: #fdecea;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 10px;
    font-size: 13px;
    display: none;
}

.cart .row .error {
    color: var(--danger);
    padding-right: 0;
    margin-top: 10px;
    font-size: 13px;
}

.cart .row .items .oldAddr {
    float: none;
    display: inline-block;
    margin: 0 0 12px;
    cursor: pointer;
    color: var(--gold);
    font-weight: 600;
    font-size: 13px;
    text-decoration: underline;
}

/* ورودی‌ها */
.cart .items input[type="text"], .cart .items input[type="password"] {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    line-height: 38px;
    color: var(--text);
    background-color: var(--paper);
    background-image: none;
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

.cart .row .items input[type="text"]:hover, .cart .row .items input[type="password"]:hover {
    border-color: #c7ccd4;
}

.cart .row .items input[type="text"]:focus, .cart .row .items input[type="password"]:focus {
    border-color: var(--gold);
    outline: 0;
    box-shadow: 0 0 0 3px rgba(201, 163, 92, .18);
}

.cart .row .items textarea {
    display: block;
    width: 100%;
    height: 84px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--text);
    background-color: var(--paper);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: none;
    transition: border-color .15s, box-shadow .15s;
}

    .cart .row .items textarea:focus {
        border-color: var(--gold);
        outline: 0;
        box-shadow: 0 0 0 3px rgba(201, 163, 92, .18);
    }

/* دکمه‌های اصلی (ثبت آدرس / ثبت ارسال / پرداخت و ...) */
.cart .row .btns {
    text-align: center;
    margin-top: 8px;
    display: block;
}

    .cart .row .btns a {
        display: inline-block;
        padding: 11px 30px;
        font-size: 13px;
        font-weight: 700;
        line-height: 1;
        cursor: pointer;
        border-radius: 24px;
        background: linear-gradient(90deg, var(--gold), #b98d3f);
        color: var(--navy);
        box-shadow: 0 6px 16px rgba(201, 163, 92, .35);
        transition: transform .1s, box-shadow .15s;
    }

        .cart .row .btns a:hover {
            transform: translateY(-1px);
            box-shadow: 0 8px 20px rgba(201, 163, 92, .45);
        }

.cart .header .back {
    position: absolute;
    top: 0;
    left: 0;
}

    .cart .header .back a {
        display: inline-block;
        padding: 8px 20px;
        color: var(--navy);
        background: var(--navy-soft);
        border: 1px solid var(--border);
        border-radius: 24px;
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

        .cart .header .back a:hover {
            border-color: var(--gold);
            color: var(--gold);
            background: var(--gold-tint);
        }

.cart .footer .next a {
    background-color: var(--gold);
    color: var(--navy);
}

.cart .btnCart a {
    background-color: var(--gold);
    color: var(--navy);
}

/* dropdown (اگر جایی استفاده شود) */
.cart .row .items .cnl {
    position: relative;
}

    .cart .row .items .cnl .dropdown-menu {
        width: 100%;
        border-radius: 10px;
        overflow: hidden;
    }

        .cart .row .items .cnl .dropdown-menu li {
            padding: 8px 12px;
            font-size: 13px;
            cursor: pointer;
        }

/* آدرس‌های ذخیره‌شده (دیالوگ SubAddr) */
.SubAddr .Addr:after, .SubAddr .Addr:before {
    display: table;
    clear: both;
    content: "";
}

.SubAddr .Addr > div {
    float: right;
    width: 50%;
    font-size: 13px;
    padding: 6px 10px;
}

    .SubAddr .Addr > div:first-child, .SubAddr .Addr > div:nth-last-child(-n+2) {
        width: 100%;
    }

.SubAddr .Addr {
    background-color: var(--navy-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
    margin-bottom: 8px;
    padding: 10px;
}

    .SubAddr .Addr > div:last-child {
        text-align: left;
        margin-bottom: 5px;
    }

        .SubAddr .Addr > div:last-child span {
            padding: 6px 18px;
            cursor: pointer;
            background-color: var(--navy);
            color: var(--gold-light);
            border-radius: 18px;
            font-size: 12px;
        }

/* ---------- روش ارسال ---------- */
.BoxShipping .items {
    padding: 18px;
    width: auto !important;
}

    .BoxShipping .items > div {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 12px 14px;
        font-size: 13px;
        cursor: pointer;
        border: 1px solid var(--border);
        border-radius: 10px;
        margin-bottom: 10px;
        transition: border-color .15s, background-color .15s;
    }

        .BoxShipping .items > div:hover {
            border-color: var(--gold);
        }

        .BoxShipping .items > div.active {
            border-color: var(--gold);
            background: var(--gold-tint);
            box-shadow: 0 0 0 1px var(--gold) inset;
        }

        .BoxShipping .items > div:after, .BoxShipping .items > div:before {
            content: "";
            display: table;
            clear: both;
        }

        .BoxShipping .items > div > div:first-child {
            float: right;
        }

        .BoxShipping .items > div > div:last-child {
            float: left;
        }

        .BoxShipping .items > div > input {
            display: inline-block;
            margin-top: 0;
            margin-left: 8px;
        }

        .BoxShipping .items > div > div {
            display: inline-block;
            font-size: 13px;
            font-weight: 600;
            color: var(--navy);
        }

    .BoxShipping .items .spay {
        text-align: center;
        float: none;
        display: block;
        font-size: 13px;
        font-weight: 700;
        color: var(--navy);
        padding: 10px 4px 0;
    }

        .BoxShipping .items .spay span:first-child {
            margin-left: 6px;
            color: var(--gold);
        }

    .BoxShipping .items .fi {
        display: none;
    }

/* ---------- روش پرداخت ---------- */
.BoxPayment {
    width: 100%;
}

    .BoxPayment .items {
        padding: 18px;
    }

    .BoxPayment .payItem {
        border: 1px solid var(--border);
        border-radius: 10px;
        margin: 0 0 12px;
        position: relative;
        transition: border-color .15s, background-color .15s;
    }

        .BoxPayment .payItem.active, .BoxPayment .payItem:hover {
            border-color: var(--gold);
        }

        .BoxPayment .payItem > div.Rpay {
            width: 30px;
            padding-right: 10px;
            margin-top: -8px;
            position: absolute;
            display: inline-block;
            right: 0;
            top: 50%;
        }

            .BoxPayment .payItem > div.Rpay input[type=radio] {
                margin: 0;
                accent-color: var(--gold);
                width: 16px;
                height: 16px;
            }

        .BoxPayment .payItem > div.pays {
            width: auto;
            min-height: 44px;
            line-height: 44px;
            margin-right: 34px;
            border-right: 1px solid var(--border);
            padding-right: 12px;
        }

        .BoxPayment .payItem .payTitle {
            font-weight: 700;
            margin-right: 10px;
            color: var(--navy);
            font-size: 13px;
        }

    .BoxPayment .Coupon, .BoxPayment .payItem {
    }

        .BoxPayment .Coupon:after, .BoxPayment .Coupon:before, .BoxPayment .payItem:after, .BoxPayment .payItem:before {
            content: "";
            display: table;
            clear: both;
        }

    .BoxPayment .Coupon {
        min-height: auto;
        border: 1px dashed var(--border);
        border-radius: 10px;
        padding: 12px 14px;
        margin-bottom: 16px;
    }

        .BoxPayment .Coupon > div {
            float: right;
            margin-top: 0;
        }

            .BoxPayment .Coupon > div:first-child {
                margin-left: 5px;
                font-size: 13px;
                font-weight: 600;
                color: var(--navy);
                margin-right: 0;
                display: inline-flex;
                align-items: center;
                margin-top: 0;
            }

                .BoxPayment .Coupon > div:first-child * {
                    display: inline-block;
                }

                .BoxPayment .Coupon > div:first-child input[type=checkbox] {
                    accent-color: var(--gold);
                    width: 16px;
                    height: 16px;
                    margin-left: 6px;
                }

            .BoxPayment .Coupon > div > div {
                float: right;
            }

            .BoxPayment .Coupon > div:last-child {
                width: 100% !important;
                margin-top: 12px;
            }

                .BoxPayment .Coupon > div:last-child input {
                    border-color: var(--border);
                    height: 38px;
                    border-radius: 10px 0 0 10px;
                }

            .BoxPayment .Coupon > div > div.cnl {
                padding-left: 0 !important;
                width: calc(100% - 110px) !important;
            }

            .BoxPayment .Coupon > div > div a {
                padding: 9px 20px;
                font-size: 12px;
                line-height: 1;
                cursor: pointer;
                border-radius: 0 10px 10px 0;
                background: var(--navy);
                color: var(--gold-light);
                display: inline-block;
            }

/* ---------- سبد خالی ---------- */
.CartEmpty {
    margin-top: 10px;
    position: relative;
    background: var(--paper);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

    .CartEmpty .row {
        display: block;
        text-align: center;
        padding: 90px 20px 60px;
        font-size: 16px;
        color: var(--text-muted);
        grid-template-columns: unset;
    }

    .CartEmpty:before {
        content: "";
        width: 96px;
        height: 96px;
        right: 50%;
        margin-right: -48px;
        top: -10px;
        position: absolute;
        background-color: var(--navy-soft);
        border-radius: 50%;
        background-image: url('Image/Icons/shopping.png');
        background-repeat: no-repeat;
        background-position: center;
        background-size: 45%;
    }

    .CartEmpty a {
        display: inline-block;
        margin-top: 20px;
        padding: 12px 32px;
        font-size: 13px;
        font-weight: 700;
        cursor: pointer;
        border-radius: 24px;
        background: linear-gradient(90deg, var(--gold), #b98d3f);
        color: var(--navy);
        box-shadow: 0 6px 16px rgba(201, 163, 92, .35);
    }

/* ---------- نتیجه پرداخت ---------- */
.resultPay {
    text-align: center;
    font-size: 15px;
    line-height: 1.9;
    min-height: 300px;
    padding-top: 60px;
    background: var(--paper);
    border-radius: 16px;
    box-shadow: var(--shadow);
}

    .resultPay a {
        color: var(--gold);
        font-weight: 600;
    }

    .resultPay .Error .imgR img, .resultPay .accept .imgR img {
        width: auto;
    }

/* ---------- مودال انتقال به درگاه ---------- */
.CartPay {
    position: fixed;
    width: 340px;
    height: 260px;
    top: 50%;
    left: 50%;
    z-index: 99999999;
    margin-left: -170px;
    margin-top: -130px;
    background-color: var(--paper);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(16, 35, 61, .25);
}

    .CartPay > div:first-child {
        height: 90px;
        margin-top: 24px;
    }

    .CartPay > div:nth-child(2) {
        margin-top: 20px;
        color: var(--navy);
        font-weight: 600;
    }

    .CartPay > div {
        text-align: center;
        height: 40px;
        width: 100%;
        font-size: 14px;
        margin-top: 10px;
        color: var(--text-muted);
    }

        .CartPay > div img {
            height: 100%;
            width: auto;
        }

/* ---------- سایر عناصر عمومی ---------- */
.Card a {
    pointer-events: none;
}

.Card:hover .header-cart-hover-message, .header-cart-hover-message:hover {
    display: none !important;
}

.cart br {
    margin-bottom: 0;
}

.cart .input-group {
    display: block;
}

.cart .input-group-addon:first-child, .cart .input-group-btn {
    display: none;
}

.cart .input-group input.form-control {
    border-radius: 10px !important;
    float: none;
}

.cart .child.c .radio input {
    display: none;
}

.cart .multiselect.btn {
    border: 1px solid var(--border);
    background-color: var(--paper);
    box-shadow: none;
    height: 40px;
    line-height: 38px;
    padding: 0 12px;
    width: 100%;
    border-radius: 10px;
    color: var(--text);
}

.cart .caret {
    float: left;
    margin-top: 4px;
    background: url('Image/icons/Down.png');
    background-size: cover;
    height: 12px;
    width: 12px;
    color: transparent;
    border: none;
}

.cart .btn-group.open .caret {
    background: url('Image/icons/up.png');
    background-size: cover;
}

.cart .btn-group.open .multiselect.btn {
    border-bottom: none;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

/* ---------- لیست کشویی استان / شهر (bootstrap-multiselect) ---------- */
.cart .btn-group {
    width: 100%;
    display: block;
}

.cart .multiselect.btn {
    text-align: right;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row-reverse;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.cart .multiselect-container {
    width: 100%;
    min-width: 100%;
    margin-top: 4px;
    padding: 6px;
    direction: rtl;
    text-align: right;
    background: var(--paper);
    border: 1px solid var(--gold);
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(16, 35, 61, .18);
    z-index: 1000;
    /* اسکرول */
    max-height: 280px;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

    /* اسکرول‌بار سفارشی */
    .cart .multiselect-container::-webkit-scrollbar {
        width: 6px;
    }

    .cart .multiselect-container::-webkit-scrollbar-track {
        background: var(--navy-soft);
        border-radius: 6px;
    }

    .cart .multiselect-container::-webkit-scrollbar-thumb {
        background: var(--gold);
        border-radius: 6px;
    }

.cart .multiselect-container {
    scrollbar-width: thin;
    scrollbar-color: var(--gold) var(--navy-soft);
}

    /* آیتم‌ها */
    .cart .multiselect-container > li {
        list-style: none;
        margin: 0;
    }

        .cart .multiselect-container > li > a {
            display: block;
            padding: 0;
            border-radius: 8px;
            transition: background-color .15s;
        }

            .cart .multiselect-container > li > a > label {
                display: flex;
                align-items: center;
                gap: 8px;
                width: 100%;
                margin: 0;
                padding: 9px 12px;
                font-size: 13px;
                font-weight: 500;
                line-height: 1.5;
                color: var(--text);
                cursor: pointer;
                text-align: right;
                white-space: normal;
            }

                .cart .multiselect-container > li > a > label > input[type="checkbox"],
                .cart .multiselect-container > li > a > label > input[type="radio"] {
                    position: static;
                    margin: 0;
                    accent-color: var(--gold);
                }

            .cart .multiselect-container > li:hover > a,
            .cart .multiselect-container > li > a:focus {
                background: var(--gold-tint);
            }

        .cart .multiselect-container > li.active > a,
        .cart .multiselect-container > li.active > a > label {
            background: var(--navy);
            color: var(--gold-light);
            font-weight: 700;
        }

        /* عنوان گروه‌ها (optgroup) */
        .cart .multiselect-container > li.multiselect-group > a > label,
        .cart .multiselect-container > li.multiselect-group label {
            font-weight: 700;
            color: var(--navy);
            background: var(--navy-soft);
        }

        /* کادر جستجو بالای لیست — ثابت می‌مونه موقع اسکرول */
        .cart .multiselect-container > li.multiselect-filter {
            position: sticky;
            top: -6px;
            z-index: 2;
            background: var(--paper);
            padding: 6px 0 8px;
            margin: -6px -6px 4px;
            padding-left: 6px;
            padding-right: 6px;
        }

            .cart .multiselect-container > li.multiselect-filter .input-group {
                display: flex;
                width: 100%;
            }

            .cart .multiselect-container > li.multiselect-filter input.multiselect-search {
                width: 100%;
                height: 36px;
                padding: 0 12px;
                font-size: 13px;
                color: var(--text);
                background: var(--paper);
                border: 1px solid var(--border);
                border-radius: 10px !important;
                box-shadow: none;
                direction: rtl;
            }

                .cart .multiselect-container > li.multiselect-filter input.multiselect-search:focus {
                    border-color: var(--gold);
                    outline: 0;
                    box-shadow: 0 0 0 3px rgba(201, 163, 92, .18);
                }

            .cart .multiselect-container > li.multiselect-filter .input-group-btn,
            .cart .multiselect-container > li.multiselect-filter .input-group-addon {
                display: none;
            }

/* =========================================================
   واکنش‌گرا (موبایل)
   ========================================================= */
@media (max-width: 980px) {
    .cart {
        padding: 16px;
        border-radius: 12px;
    }

        .cart .row {
            grid-template-columns: 1fr;
            grid-template-areas:
                "header"
                "products"
                "checkout";
            gap: 18px;
        }

            .cart .row > div.header {
                flex-wrap: wrap;
                padding: 10px 12px;
            }

        .cart .header .title {
            font-size: 17px;
        }

        .cart .header .back a {
            padding: 7px 14px;
            font-size: 11px;
        }

        .cart .row .pRight, .cart .row .details.pLeft {
            width: auto;
            position: static;
            margin: 0;
            float: none;
        }

        .cart .total {
            max-width: none;
            float: none;
            margin: 16px 0 0;
        }
    @media (max-width: 700px) {
        .cart table thead {
            display: none;
        }

        .cart table, .cart table tbody {
            display: block;
            width: 100% !important;
        }

            .cart table tbody tr {
                display: grid;
                grid-template-columns: 70px minmax(0, 140px) 1fr 36px;
                grid-template-rows: 1fr 1fr;
                grid-template-areas:
                    "img name price del"
                    "img qty  price del";
                column-gap: 12px;
                row-gap: 8px;
                align-items: center;
                width: 100%;
                margin-bottom: 14px;
                padding: 12px;
                background: var(--paper);
                border-radius: 14px !important;
                box-shadow: var(--shadow-sm);
            }

            .cart table tbody td {
                display: block;
                width: auto !important;
                border: none !important;
                padding: 0;
                background: transparent;
                box-shadow: none;
            }

                .cart table tbody td.nameCart {
                    display: contents;
                }

                    .cart table tbody td.nameCart .colpro {
                        display: contents;
                    }
                    .cart table tbody td.nameCart .calim {
                        grid-area: img;
                        align-self: center;
                        width: 70px;
                        height: 70px;
                        border-radius: 10px;
                        overflow: hidden;
                        border: 1px solid var(--border);
                        background: var(--navy-soft);
                    }

                        .cart table tbody td.nameCart .calim img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            display: block;
                        }

                    .cart table tbody td.nameCart .calname {
                        grid-area: name;
                        text-align: right;
                        font-size: 14.5px;
                        line-height: 22px;
                        font-weight: 700;
                        color: var(--navy);
                    }

                        .cart table tbody td.nameCart .calname:empty {
                            display: none;
                        }

                .cart table tbody td.tedCart {
                    grid-area: qty;
                    text-align: right;
                    white-space: nowrap;
                }
                .cart table tbody td.priCart {
                    grid-area: price;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    align-self: stretch;
                    text-align: center;
                    font-size: 15px;
                    font-weight: 700;
                    color: var(--navy);
                }

                .cart table tbody td.priVahedCart {
                    display: none;
                }

                .cart table tbody td.delCart {
                    grid-area: del;
                    position: relative;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    align-self: stretch;
                    border-right: 1px solid var(--border);
                }

                    .cart table tbody td.delCart:before {
                        width: 16px;
                        height: 16px;
                    }
    }

    /* کارت‌های محصول برای موبایل (در صورت وجود مارک‌آپ ItemsCart از سمت CMS) */
    .ItemsCart {
        margin-top: 0;
        padding: 0;
    }

        .ItemCart:after, .ItemsCart:before {
            clear: both;
            content: "";
            display: block;
        }

    .ItemCart {
        border: 1px solid var(--border);
        border-radius: 14px;
        margin-top: 12px;
        padding-bottom: 15px;
        height: auto;
        position: relative;
        background: var(--paper);
        box-shadow: var(--shadow-sm);
        overflow: hidden;
    }

        .ItemCart .im {
            width: 120px;
            top: 10px;
            position: absolute;
            height: 120px;
            right: 10px;
            border: 1px solid var(--border);
            border-radius: 10px;
            overflow: hidden;
        }

            .ItemCart .im img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

        .ItemCart .Item {
            margin-right: 140px;
            height: 100%;
            padding-right: 10px;
            padding-top: 10px;
        }

            .ItemCart .Item .Ctitle {
                font-size: 15px;
                line-height: 30px;
                color: var(--navy);
                font-weight: 700;
            }

        .ItemCart .addCard .btnright {
            border-radius: 0 8px 8px 0;
            background-color: var(--paper);
            background-image: none;
        }

        .ItemCart .addCard .btnleft {
            border-radius: 8px 0 0 8px;
            background-color: var(--paper);
            background-image: none;
        }

        .ItemCart .btn2 {
            display: inline-block;
            margin-bottom: 0;
            width: 44px;
            height: 36px;
            border: 1px solid var(--border);
            text-align: center;
            vertical-align: middle;
            cursor: pointer;
            background-image: none;
            white-space: nowrap;
            padding-top: 5px !important;
            font-size: 16px;
            line-height: 1.4;
            user-select: none;
            color: var(--gold);
            font-weight: 700;
        }

        .ItemCart .textVal {
            width: 54px;
            text-align: center;
            vertical-align: middle;
            border: 1px solid var(--border);
            border-left: none;
            border-right: none;
            height: 36px;
            font-family: IranNum, iranNum, sans-serif;
            font-size: 18px;
            line-height: 36px;
            color: var(--navy);
            font-weight: 700;
        }

        .ItemCart .CAdd {
            margin-top: 10px;
            margin-right: 100px;
        }

        .ItemCart .CPrice {
            line-height: 44px;
            margin-right: 40px;
            text-align: center;
            width: 300px;
        }

        .ItemCart .galleryPrice .pfirst2 {
            font-size: 15px;
            color: var(--navy);
            font-weight: 700;
            display: inline-block;
            font-family: iranNum, sans-serif;
            padding-right: 4px;
        }

        .ItemCart .galleryPrice .all {
            color: var(--gold);
        }

        .ItemCart .galleryPrice .takh {
            text-decoration: line-through;
            color: var(--text-muted);
        }

        .ItemCart .product-remove-icon {
            float: left;
            margin-left: 20px;
            margin-top: 10px;
            color: var(--danger);
        }
}

@media (max-width: 860px) {
    .ItemCart .Item .Ctitle {
        font-size: 14px;
        line-height: 26px;
    }
}

@media (max-width: 700px) {
    .SubAddr .Addr > div {
        font-size: 12px;
    }

    .ItemCart .CPrice {
        line-height: 30px;
    }

    .ItemCart .CAdd {
        margin-top: 7px;
    }
}

@media (max-width: 600px) {
    .cart {
        padding: 12px 8px;
    }

        .cart .header .title {
            font-size: 18px;
        }

    .BoxShipping .items .spay {
        font-size: 13px;
    }

    .resultPay {
        font-size: 13px;
    }

    .BoxShipping .items > div > div {
        font-size: 12px;
    }

    .ItemCart .Item .Ctitle {
        font-size: 13px;
        line-height: 26px;
    }
}

@media (max-width: 500px) {
    .ItemCart .im {
        width: 100px;
        height: 100px;
    }

    .ItemCart .Item .Ctitle {
        font-size: 12px;
        line-height: 22px;
    }

    .ItemCart .Item {
        margin-right: 115px;
    }

    .ItemCart .CPrice {
        margin-right: 0;
    }

    .ItemCart .CAdd {
        margin-right: 60px;
    }
}

@media (max-width: 430px) {
    .SubAddr .Addr > div {
        font-size: 10px;
        padding: 5px;
    }

    .cart .items input[type="text"], .cart .items input[type="password"] {
        font-size: 12px;
    }

    .BoxShipping .items .spay {
        font-size: 12px;
    }

    .resultPay {
        font-size: 12px;
    }

    .ItemCart .btn2 {
        width: 34px;
        height: 30px;
    }

    .ItemCart .textVal {
        width: 42px;
        height: 30px;
        font-size: 14px;
        line-height: 30px;
    }

    .ItemCart .CPrice {
        width: auto;
    }

    .ItemCart .CAdd {
        margin-right: 30px;
    }

    .ItemCart .im {
        width: 90px;
        height: 90px;
        right: 5px;
    }

    .ItemCart .Item {
        margin-right: 95px;
    }
}

@media (max-width: 370px) {
    .ItemCart .CAdd {
        margin-right: 30px;
    }

    .ItemCart .product-remove-icon {
        float: left;
        margin-left: 5px;
        margin-top: 4px;
    }
}
@media (max-width: 700px) {
    .BoxAddress .items {
        display: grid;
        grid-template-columns: 1fr 1fr;
        column-gap: 12px;
    }

        .BoxAddress .items .item {
            margin-bottom: 14px;
        }

            /* ردیف‌های تمام‌عرض */
            .BoxAddress .items .item.error,
            .BoxAddress .items .item:has(.oldAddr),
            .BoxAddress .items .item:has(#FName),
            .BoxAddress .items .item:has(#Address),
            .BoxAddress .items .item.btns {
                grid-column: 1 / -1;
            }

            /* ترتیب: خطا / آدرس‌های ذخیره‌شده / نام کامل / استان-شهر / تلفن-کدپستی / آدرس / دکمه */
            .BoxAddress .items .item.error {
                order: 1;
            }

            .BoxAddress .items .item:has(.oldAddr) {
                order: 2;
            }

            .BoxAddress .items .item:has(#FName) {
                order: 3;
            }

            .BoxAddress .items .item:has(#Ostan) {
                order: 4;
            }

            .BoxAddress .items .item:has(#Shahr) {
                order: 5;
            }

            .BoxAddress .items .item:has(#tel) {
                order: 6;ّ
            }

            .BoxAddress .items .item:has(#CodePost) {
                order: 7;
            }

            .BoxAddress .items .item:has(#Address) {
                order: 8;
            }

            .BoxAddress .items .item.btns {
                order: 9;
            }
}
