/* =========================================
   STARMOODA CHECKOUT STEPPER
   SOFT PREMIUM VERSION
========================================= */
/* فقط دسکتاپ */
@media (min-width: 1024px) {

    .spx-bc-wrap {
        margin-top: 40px;
    }

}

.spx-bc-wrap {
    margin-bottom: 14px;

    position: relative;

    border-radius: 22px;

    overflow: hidden;

    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .96),
            rgba(248, 250, 252, .98)
    );

    border: 1px solid rgba(226, 232, 240, .75);

    box-shadow: 0 2px 10px rgba(15, 23, 42, .03);
}

/* subtle top line */
.spx-bc-wrap::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 1px;

    background: linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, .9),
            transparent
    );

    z-index: 3;
}

/* =========================================
   GRID
========================================= */

.spx-bc {
    position: relative;

    display: grid;
    grid-template-columns:repeat(3, 1fr);

    isolation: isolate;
}

/* active area */
.spx-bc-progress {
    position: absolute;

    inset-block: 0;

    width: 33.333%;

    border-radius: 18px;

    background: linear-gradient(
            180deg,
            rgba(15, 23, 42, .03),
            rgba(15, 23, 42, .015)
    );

    transition: .28s ease;

    z-index: 0;
}

/* =========================================
   STEP
========================================= */

.spx-bc-step {
    position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 16px 6px;

    text-align: center;

    transition: .2s ease;
}

/* divider */
.spx-bc-step:not(:last-of-type)::after {
    content: "";

    position: absolute;

    inset-inline-end: 0;
    top: 50%;

    width: 1px;
    height: 36%;

    transform: translateY(-50%);

    background: linear-gradient(
            to bottom,
            transparent,
            rgba(203, 213, 225, .55),
            transparent
    );
}

/* =========================================
   ICON
========================================= */

.spx-bc-icon {
    width: 40px;
    height: 40px;

    border-radius: 13px;

    display: flex;
    align-items: center;
    justify-content: center;

    background: linear-gradient(
            180deg,
            rgba(248, 250, 252, .95),
            rgba(241, 245, 249, .95)
    );

    border: 1px solid rgba(226, 232, 240, .9);

    color: #64748b;

    transition: transform .2s ease,
    background .2s ease,
    color .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

/* icon size */
.spx-bc-icon > div {
    width: 18px;
    height: 18px;
}

/* =========================================
   TEXT
========================================= */

.spx-bc-text {
    margin: 0;

    font-size: 11px;
    font-weight: 700;

    line-height: 1.5;

    color: #64748b;

    transition: .2s ease;
}

/* =========================================
   DONE
========================================= */

.spx-bc-step--done .spx-bc-icon {
    background: linear-gradient(
            180deg,
            rgba(241, 245, 249, .96),
            rgba(248, 250, 252, .96)
    );

    border-color: rgba(203, 213, 225, .85);

    color: #475569;
}

.spx-bc-step--done .spx-bc-text {
    color: #475569;
}

/* =========================================
   ACTIVE
========================================= */

.spx-bc-step--active .spx-bc-icon {
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .98),
            rgba(248, 250, 252, .96)
    );

    border-color: rgba(148, 163, 184, .28);

    color: #0f172a;

    box-shadow: 0 6px 16px rgba(15, 23, 42, .05);
}

.spx-bc-step--active .spx-bc-text {
    color: #0f172a;

    font-weight: 800;
}

/* hover */
.spx-bc-step:hover .spx-bc-icon {
    transform: translateY(-1px);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 640px) {

    .spx-bc-wrap {
        border-radius: 18px;
    }

    .spx-bc-step {
        padding: 14px 4px;

        gap: 6px;
    }

    .spx-bc-icon {
        width: 36px;
        height: 36px;

        border-radius: 11px;
    }

    .spx-bc-icon > div {
        width: 16px;
        height: 16px;
    }

    .spx-bc-text {
        font-size: 10px;
    }
}

/* =========================================
   DARK MODE
========================================= */

.dark .spx-bc-wrap {
    background: linear-gradient(
            180deg,
            rgba(15, 23, 42, .96),
            rgba(17, 24, 39, .98)
    );

    border-color: rgba(255, 255, 255, .05);

    box-shadow: 0 10px 30px rgba(0, 0, 0, .20);
}

.dark .spx-bc-progress {
    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .03),
            rgba(255, 255, 255, .015)
    );
}

.dark .spx-bc-step:not(:last-of-type)::after {
    background: linear-gradient(
            to bottom,
            transparent,
            rgba(255, 255, 255, .05),
            transparent
    );
}

.dark .spx-bc-icon {
    background: linear-gradient(
            180deg,
            rgba(30, 41, 59, .92),
            rgba(15, 23, 42, .92)
    );

    border-color: rgba(255, 255, 255, .05);

    color: rgba(226, 232, 240, .72);
}

.dark .spx-bc-text {
    color: rgba(226, 232, 240, .68);
}

.dark .spx-bc-step--done .spx-bc-icon,
.dark .spx-bc-step--active .spx-bc-icon {
    color: #f8fafc;
}

.dark .spx-bc-step--done .spx-bc-text,
.dark .spx-bc-step--active .spx-bc-text {
    color: #ffffff;
}

/*/////////////////////////////////////// بخش بالایی صفحه پرداخت//////////////////////*/
/* ================= CHECKOUT PAYMENT ================= */


/* ================= HEADER ================= */

.sp-checkout-header {

    padding-bottom: 6px;

    margin-bottom: 10px;

    border-bottom: 1px solid rgba(15, 23, 42, 0.06);
}

.sp-checkout-title {

    font-size: 17px;

    font-weight: 900;

    color: #0f172a;
}

/* ==============================
   FLOATING TOAST NOTIFICATIONS (RTL PRO)
   ============================== */

.sp-toast-container {

    position: fixed;

    top: 38%;

    right: 24px;

    left: 12px; /* ⬅️ فاصله از چپ اضافه شد */

    display: flex;
    flex-direction: column;
    gap: 10px;

    z-index: 9999;

    pointer-events: none;
}

/* ================= BASE TOAST ================= */

.sp-toast {

    min-width: 260px;
    max-width: 340px;

    padding: 12px 14px;

    border-radius: 14px;

    font-size: 13px;
    line-height: 1.7;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    backdrop-filter: blur(14px);

    box-shadow: 0 20px 50px rgba(15, 23, 42, .12);

    border: 1px solid rgba(15, 23, 42, .08);

    position: relative;

    overflow: hidden;

    pointer-events: auto;

    text-align: right; /* ⬅️ متن راست‌چین */

    direction: rtl; /* ⬅️ RTL واقعی */

    animation: spToastIn 0.35s ease forwards,
    spToastOut 0.5s ease 5.5s forwards;
}

/* subtle top glow strip */
.sp-toast::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
            90deg,
            #dc2626, /* ⬅️ قرمزتر */ #ef4444 /* ⬅️ قرمز روشن */
    );
}

/* ================= ICON DOT ================= */

.sp-toast::before {

    content: "";

    width: 9px;
    height: 9px;

    border-radius: 50%;

    flex-shrink: 0;
}

/* ================= ERROR ================= */

.sp-toast-error {

    background: rgba(254, 226, 226, 0.98); /* ⬅️ قرمزتر و واضح‌تر */

    color: #7f1d1d; /* ⬅️ تیره‌تر و جدی‌تر */

    border-color: rgba(220, 38, 38, 0.35);
}

.sp-toast-error::before {

    background: #dc2626;
}

/* ================= SUCCESS ================= */

.sp-toast-success {

    background: rgba(240, 253, 244, 0.96);

    color: #166534;

    border-color: rgba(34, 197, 94, 0.3);
}

.sp-toast-success::before {

    background: #22c55e;
}

/* ================= DEFAULT ================= */

.sp-toast-default {

    background: rgba(248, 250, 252, 0.96);

    color: #334155;
}

.sp-toast-default::before {

    background: #2563eb;
}

/* ================= ANIMATION (RTL FIXED) ================= */

/* ================= ANIMATION (RTL FIXED - SMOOTH ENTRY) ================= */

/* ================= ANIMATION (SMOOTH PRO FIX) ================= */

@keyframes spToastIn {

    0% {
        transform: translateX(80px) scale(0.96); /* ⬅️ شروع از بیرون‌تر */
        opacity: 0;
    }

    60% {
        transform: translateX(-6px) scale(1.01); /* ⬅️ یک overshoot خیلی نرم */
        opacity: 1;
    }

    100% {
        transform: translateX(0) scale(1);
        opacity: 1;
    }
}

@keyframes spToastOut {

    to {
        transform: translateX(90px) scale(0.98);
        opacity: 0;
    }
}

/* ================= MOBILE ================= */

@media (max-width: 640px) {

    .sp-toast-container {

        right: 12px;
        left: 12px;

        top: 25%;
    }

    .sp-toast {

        width: 100%;
        max-width: none;
    }
}

/* ================= METHODS ================= */

.sp-checkout-methods {

    display: grid;
    padding-bottom: 10px;
    gap: 8px;
}

/* ================= RADIO ================= */

.sp-checkout-radio {

    display: none;
}

/* ================= OPTION CARD ================= */

.sp-checkout-option {

    position: relative;

    display: block;

    cursor: pointer;

    overflow: hidden;

    padding: 16px 52px 16px 16px;

    border-radius: 18px;

    background: rgba(255, 255, 255, .96);

    border: 1px solid rgba(15, 23, 42, 0.08);

    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04);

    transition: all .22s ease;
}

/* Hover */

.sp-checkout-option:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

/* ================= RADIO CIRCLE ================= */

.sp-checkout-option::after {

    content: "";

    position: absolute;

    right: 16px;

    top: 16px;

    width: 20px;

    height: 20px;

    border-radius: 50%;

    border: 2px solid #cbd5e1;

    background: #ffffff;

    transition: all .2s ease;
}

/* ================= SELECTED ================= */

.sp-checkout-radio:checked + .sp-checkout-option {

    border-color: rgba(37, 99, 235, 0.22);

    background: linear-gradient(
            180deg,
            rgba(37, 99, 235, 0.05),
            rgba(255, 255, 255, 1)
    );

    box-shadow: 0 16px 34px rgba(15, 23, 42, .07),
    0 0 0 2px rgba(37, 99, 235, .08);
}

/* soft accent glow (very subtle orange + blue mix) */

.sp-checkout-radio:checked + .sp-checkout-option::before {

    content: "";

    position: absolute;

    width: 90px;

    height: 90px;

    top: -40px;

    right: -40px;

    border-radius: 50%;

    background: radial-gradient(
            circle,
            rgba(249, 115, 22, 0.10),
            rgba(37, 99, 235, 0.08),
            transparent 70%
    );

    pointer-events: none;
}

/* selected circle */

.sp-checkout-radio:checked + .sp-checkout-option::after {

    border-color: #2563eb;

    background: radial-gradient(
            circle,
            #2563eb 45%,
            #ffffff 46%
    );

    box-shadow: 0 0 0 3px rgba(37, 99, 235, .10);
}

/* ================= TOP ================= */

.sp-checkout-option-top {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 6px;
}

/* ================= TITLE ================= */

.sp-checkout-option-title {

    font-size: 15px;

    font-weight: 800;

    color: #0f172a;
}

/* credit title subtle accent */

.sp-checkout-option-title-credit {

    color: #0f172a;

    display: flex;

    align-items: center;

    gap: 6px;
}

/* ================= BADGE ================= */

.sp-checkout-option-badge {

    padding: 4px 8px;

    border-radius: 999px;

    font-size: 10px;

    font-weight: 700;

    color: #2563eb;

    background: rgba(37, 99, 235, .08);

    border: 1px solid rgba(37, 99, 235, .10);
}

.sp-checkout-badge-installment {
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    color: #f97316;
    background: rgba(249, 115, 22, 0.12);
    border: 1px solid rgba(249, 115, 22, 0.20);
}

/* ================= DESCRIPTION ================= */

.sp-checkout-option-desc {

    margin-top: 8px;

    font-size: 13px;

    line-height: 1.8;

    color: #64748b;
}

/* ================= CREDIT INFO ================= */

.sp-checkout-credit-info {

    margin-top: 10px;

    padding-top: 10px;

    border-top: 1px dashed rgba(15, 23, 42, .08);

    display: flex;

    justify-content: space-between;

    align-items: center;

    font-size: 13px;

    color: #64748b;
}

.sp-checkout-credit-info strong {

    color: #f97316;

    font-size: 14px;

    font-weight: 900;
}

/* ================= DISABLED ================= */

.sp-checkout-disabled {

    opacity: .55;

    pointer-events: none;
}

.sp-checkout-disabled .sp-checkout-option {

    background: #fafafa;
}

/* ================= MOBILE ================= */

@media (max-width: 640px) {

    .sp-checkout-payment {

        padding-bottom: 10px;
    }

    .sp-checkout-option {

        padding: 14px 48px 14px 14px;

        border-radius: 16px;
    }

    .sp-checkout-title {

        font-size: 15px;
    }

    .sp-checkout-option-title {

        font-size: 14px;
    }

    .sp-checkout-option-desc {

        font-size: 12px;
    }

    .sp-checkout-credit-info {

        font-size: 12px;
    }
}


/* ==============================
   FIXED CHECKOUT BAR (MATCHED UI)
   ============================== */

#payment-form .checkout-bar {

    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;

    z-index: 999;

    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(14px);

    border-top: 1px solid rgba(15, 23, 42, 0.06);

    box-shadow: 0 -8px 25px rgba(15, 23, 42, 0.06);

    padding: 12px 16px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;
}

/* subtle top accent (very light like your cards) */
#payment-form .checkout-bar::before {

    content: "";

    position: absolute;

    top: 0;
    left: 0;
    right: 0;

    height: 2px;

    background: linear-gradient(
            90deg,
            rgba(37, 99, 235, 0.8),
            rgba(249, 115, 22, 0.5)
    );
}

/* ================= SUMMARY ================= */

#payment-form .checkout-summary {

    display: flex;
    flex-direction: column;

    gap: 4px;

    font-size: 13px;

    color: #64748b;
}

#payment-form .checkout-summary .row {

    display: flex;
    justify-content: space-between;

    gap: 24px;

    min-width: 240px;
}

/* total row emphasis */
#payment-form .checkout-summary .row:last-child {

    font-weight: 900;

    color: #0f172a;
}

/* ================= BUTTON ================= */

#payment-form .checkout-btn {

    background: linear-gradient(135deg, #2563eb, #1d4ed8);

    color: #fff;

    font-weight: 800;

    border-radius: 14px;

    padding: 11px 18px;

    min-width: 200px;

    text-align: center;

    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.18);

    transition: all 0.2s ease;

    white-space: nowrap;

    position: relative;

    overflow: hidden;
}

/* subtle orange accent (not dominant) */
#payment-form .checkout-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(
            circle at top right,
            rgba(249, 115, 22, 0.18),
            transparent 65%
    );

    opacity: 0;

    transition: 0.2s ease;
}

#payment-form .checkout-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 28px rgba(37, 99, 235, 0.22);
}

#payment-form .checkout-btn:hover::before {

    opacity: 1;
}

/* ================= MOBILE ================= */

@media (max-width: 768px) {

    #payment-form .checkout-bar {

        flex-direction: column;

        align-items: stretch;

        padding: 10px 12px;
    }

    #payment-form .checkout-summary .row {

        min-width: auto;
    }

    #payment-form .checkout-btn {

        width: 100%;

        min-width: auto;
    }
}


/* =========================================
   STARMOODA CHECKOUT PAYMENT
   POLISH + DARK MODE
========================================= */


/* =========================================
   HEADER
========================================= */

.sp-checkout-payment .sp-checkout-header {
    padding-bottom: 10px;
    margin-bottom: 12px;

    border-bottom: 1px solid #edf1f5;
}

.sp-checkout-payment .sp-checkout-title {
    margin: 0;

    color: #1e293b;

    font-size: 16px;
    font-weight: 850;

    line-height: 1.6;
}


/* =========================================
   PAYMENT METHODS
========================================= */

.sp-checkout-payment .sp-checkout-methods {
    display: grid;

    gap: 10px;

    padding-bottom: 10px;
}


/* =========================================
   PAYMENT OPTION
========================================= */

.sp-checkout-payment .sp-checkout-option {
    position: relative;

    display: block;

    padding: 15px 50px 15px 15px;

    overflow: hidden;

    border: 1px solid #e7ecf2;

    border-radius: 16px;

    background: #fff;

    color: inherit;

    cursor: pointer;

    box-shadow: 0 5px 18px rgba(15, 23, 42, .035);

    transition: transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


@media (hover: hover) {

    .sp-checkout-payment
    .sp-checkout-option:hover {
        transform: translateY(-1px);

        border-color: #dbe3ec;

        box-shadow: 0 9px 24px rgba(15, 23, 42, .06);
    }

}


/* =========================================
   RADIO CIRCLE
========================================= */

.sp-checkout-payment
.sp-checkout-option::after {
    content: "";

    position: absolute;

    top: 16px;
    right: 16px;

    width: 18px;
    height: 18px;

    border: 2px solid #cbd5e1;

    border-radius: 50%;

    background: #fff;

    box-sizing: border-box;

    transition: border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


/* =========================================
   SELECTED PAYMENT METHOD
========================================= */

.sp-checkout-payment
.sp-checkout-radio:checked
+ .sp-checkout-option {
    border-color: rgba(37, 99, 235, .30);

    background: linear-gradient(
            180deg,
            rgba(37, 99, 235, .055),
            rgba(255, 255, 255, 1)
    );

    box-shadow: 0 7px 22px rgba(37, 99, 235, .07),
    0 0 0 2px rgba(37, 99, 235, .055);
}


.sp-checkout-payment
.sp-checkout-radio:checked
+ .sp-checkout-option::after {
    border-color: #2563eb;

    background: radial-gradient(
            circle,
            #2563eb 0,
            #2563eb 42%,
            #fff 45%,
            #fff 100%
    );

    box-shadow: 0 0 0 3px rgba(37, 99, 235, .09);
}


/* glow */

.sp-checkout-payment
.sp-checkout-radio:checked
+ .sp-checkout-option::before {
    content: "";

    position: absolute;

    top: -42px;
    right: -42px;

    width: 95px;
    height: 95px;

    border-radius: 50%;

    background: radial-gradient(
            circle,
            rgba(37, 99, 235, .09),
            transparent 68%
    );

    pointer-events: none;
}


/* =========================================
   OPTION TOP
========================================= */

.sp-checkout-payment
.sp-checkout-option-top {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;
}


/* =========================================
   TITLE
========================================= */

.sp-checkout-payment
.sp-checkout-option-title {
    min-width: 0;

    color: #1e293b;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.7;
}


.sp-checkout-payment
.sp-checkout-option-title-credit {
    display: flex;

    align-items: center;

    gap: 6px;

    color: #1e293b;
}


/* =========================================
   BADGES
========================================= */

.sp-checkout-payment
.sp-checkout-option-badge {
    flex-shrink: 0;

    padding: 4px 8px;

    border: 1px solid rgba(37, 99, 235, .10);

    border-radius: 999px;

    background: rgba(37, 99, 235, .07);

    color: #2563eb;

    font-size: 9.5px;
    font-weight: 750;

    line-height: 1.5;
}


.sp-checkout-payment
.sp-checkout-badge-installment {
    flex-shrink: 0;

    padding: 4px 8px;

    border: 1px solid rgba(249, 115, 22, .15);

    border-radius: 999px;

    background: rgba(249, 115, 22, .08);

    color: #ea580c;

    font-size: 9.5px;
    font-weight: 750;
}


/* =========================================
   DESCRIPTION
========================================= */

.sp-checkout-payment
.sp-checkout-option-desc {
    margin-top: 7px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.9;
}


/* =========================================
   CREDIT INFO
========================================= */

.sp-checkout-payment
.sp-checkout-credit-info {
    min-height: 36px;

    margin-top: 10px;

    padding-top: 10px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 10px;

    border-top: 1px dashed rgba(148, 163, 184, .30);

    color: #64748b;

    font-size: 11.5px;
}


.sp-checkout-payment
.sp-checkout-credit-info strong {
    color: #f97316;

    font-size: 13px;
    font-weight: 900;
}


/* =========================================
   DISABLED METHOD
========================================= */

.sp-checkout-payment
.sp-checkout-disabled {
    opacity: .55;

    pointer-events: none;
}


.sp-checkout-payment
.sp-checkout-disabled
.sp-checkout-option {
    background: #f8fafc;

    box-shadow: none;
}


/* =========================================
   TOAST CONTAINER
========================================= */

.sp-toast-container {
    position: fixed;

    top: 38%;
    right: 20px;

    width: min(340px, calc(100vw - 40px));

    display: flex;
    flex-direction: column;

    gap: 9px;

    z-index: 9999;

    pointer-events: none;
}


/* =========================================
   TOAST
========================================= */

.sp-toast {
    position: relative;

    width: 100%;
    min-width: 0;
    max-width: none;

    display: flex;

    align-items: center;

    gap: 9px;

    padding: 12px 13px;

    overflow: hidden;

    border-radius: 13px;

    border: 1px solid rgba(15, 23, 42, .07);

    font-size: 12px;

    line-height: 1.8;

    direction: rtl;

    text-align: right;

    pointer-events: auto;

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow: 0 14px 38px rgba(15, 23, 42, .12);

    animation: spToastIn .32s ease forwards,
    spToastOut .45s ease 5.5s forwards;
}


/* dot */

.sp-toast::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;
}


/* top accent */

.sp-toast::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 2px;
}


/* Error */

.sp-toast-error {
    background: rgba(254, 242, 242, .97);

    border-color: rgba(239, 68, 68, .18);

    color: #991b1b;
}

.sp-toast-error::before {
    background: #ef4444;
}

.sp-toast-error::after {
    background: linear-gradient(
            90deg,
            #dc2626,
            #f87171
    );
}


/* Success */

.sp-toast-success {
    background: rgba(240, 253, 244, .97);

    border-color: rgba(34, 197, 94, .18);

    color: #166534;
}

.sp-toast-success::before {
    background: #22c55e;
}

.sp-toast-success::after {
    background: linear-gradient(
            90deg,
            #16a34a,
            #4ade80
    );
}


/* Default */

.sp-toast-default {
    background: rgba(248, 250, 252, .97);

    color: #334155;
}

.sp-toast-default::before {
    background: #3b82f6;
}

.sp-toast-default::after {
    background: linear-gradient(
            90deg,
            #2563eb,
            #60a5fa
    );
}


/* =========================================
   FIXED CHECKOUT BAR
========================================= */

#payment-form .checkout-bar {
    position: fixed;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 999;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 11px 16px calc(11px + env(safe-area-inset-bottom));

    background: rgba(255, 255, 255, .96);

    border-top: 1px solid rgba(226, 232, 240, .85);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-shadow: 0 -8px 30px rgba(15, 23, 42, .07);
}


/* accent */

#payment-form .checkout-bar::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 2px;

    background: linear-gradient(
            90deg,
            #2563eb,
            rgba(37, 99, 235, .25),
            #f97316
    );

    opacity: .70;
}


/* =========================================
   CHECKOUT SUMMARY
========================================= */

#payment-form .checkout-summary {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 3px;

    color: #64748b;

    font-size: 11.5px;
}


#payment-form
.checkout-summary
.row {
    min-width: 230px;

    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 22px;
}


#payment-form
.checkout-summary
.row:last-child {
    color: #1e293b;

    font-size: 12.5px;
    font-weight: 850;
}


/* =========================================
   CHECKOUT BUTTON
========================================= */

#payment-form .checkout-btn {
    min-width: 200px;
    min-height: 48px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding: 10px 18px;

    overflow: hidden;

    position: relative;

    border: 0;

    border-radius: 13px;

    background: #2563eb;

    color: #fff;

    font-size: 13px;
    font-weight: 850;

    text-align: center;

    white-space: nowrap;

    box-shadow: 0 8px 20px rgba(37, 99, 235, .20);

    transition: transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


#payment-form .checkout-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(
            circle at top right,
            rgba(255, 255, 255, .14),
            transparent 55%
    );

    opacity: 0;

    transition: opacity .2s ease;
}


#payment-form .checkout-btn:hover {
    background: #1d4ed8;

    transform: translateY(-1px);

    box-shadow: 0 11px 25px rgba(37, 99, 235, .25);
}


#payment-form .checkout-btn:hover::before {
    opacity: 1;
}


#payment-form .checkout-btn:active {
    transform: scale(.985);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    .sp-checkout-payment {
        padding-bottom: 10px;
    }


    .sp-checkout-payment
    .sp-checkout-header {
        margin-bottom: 10px;
    }


    .sp-checkout-payment
    .sp-checkout-title {
        font-size: 14px;
    }


    .sp-checkout-payment
    .sp-checkout-option {
        padding: 13px 46px 13px 13px;

        border-radius: 14px;
    }


    .sp-checkout-payment
    .sp-checkout-option::after {
        top: 14px;
        right: 14px;

        width: 17px;
        height: 17px;
    }


    .sp-checkout-payment
    .sp-checkout-option-title {
        font-size: 13px;
    }


    .sp-checkout-payment
    .sp-checkout-option-desc {
        font-size: 11px;
    }


    .sp-checkout-payment
    .sp-checkout-credit-info {
        font-size: 11px;
    }


    /* Toast */
    .sp-toast-container {
        top: 22%;

        right: 12px;
        left: 12px;

        width: auto;
    }


    .sp-toast {
        width: 100%;

        padding: 11px 12px;

        font-size: 11.5px;

        border-radius: 12px;
    }


    /* Checkout bar */
    #payment-form .checkout-bar {
        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    }


    #payment-form
    .checkout-summary {
        width: 100%;
    }


    #payment-form
    .checkout-summary
    .row {
        width: 100%;

        min-width: 0;

        gap: 12px;
    }


    #payment-form .checkout-btn {
        width: 100%;

        min-width: 0;
        min-height: 48px;
    }

}


/* =========================================
   DARK MODE
========================================= */

.dark
.sp-checkout-payment
.sp-checkout-header {
    border-bottom-color: rgba(255, 255, 255, .06);
}


.dark
.sp-checkout-payment
.sp-checkout-title {
    color: #f1f5f9;
}


/* Option */

.dark
.sp-checkout-payment
.sp-checkout-option {
    background: #172033;

    border-color: rgba(255, 255, 255, .07);

    box-shadow: 0 6px 20px rgba(0, 0, 0, .13);
}


.dark
.sp-checkout-payment
.sp-checkout-option::after {
    background: #1e293b;

    border-color: #64748b;
}


/* Selected */

.dark
.sp-checkout-payment
.sp-checkout-radio:checked
+ .sp-checkout-option {
    background: linear-gradient(
            180deg,
            rgba(37, 99, 235, .14),
            #172033
    );

    border-color: rgba(96, 165, 250, .32);

    box-shadow: 0 7px 22px rgba(0, 0, 0, .16),
    0 0 0 2px rgba(59, 130, 246, .08);
}


.dark
.sp-checkout-payment
.sp-checkout-radio:checked
+ .sp-checkout-option::after {
    border-color: #60a5fa;

    background: radial-gradient(
            circle,
            #60a5fa 0,
            #60a5fa 42%,
            #172033 45%,
            #172033 100%
    );
}


/* Title */

.dark
.sp-checkout-payment
.sp-checkout-option-title,
.dark
.sp-checkout-payment
.sp-checkout-option-title-credit {
    color: #f1f5f9;
}


/* Description */

.dark
.sp-checkout-payment
.sp-checkout-option-desc {
    color: #94a3b8;
}


/* Badge */

.dark
.sp-checkout-payment
.sp-checkout-option-badge {
    background: rgba(59, 130, 246, .13);

    border-color: rgba(96, 165, 250, .14);

    color: #93c5fd;
}


.dark
.sp-checkout-payment
.sp-checkout-badge-installment {
    background: rgba(249, 115, 22, .12);

    border-color: rgba(251, 146, 60, .15);

    color: #fb923c;
}


/* Credit */

.dark
.sp-checkout-payment
.sp-checkout-credit-info {
    border-top-color: rgba(255, 255, 255, .07);

    color: #94a3b8;
}


.dark
.sp-checkout-payment
.sp-checkout-credit-info strong {
    color: #fb923c;
}


/* Disabled */

.dark
.sp-checkout-payment
.sp-checkout-disabled
.sp-checkout-option {
    background: #151d2c;
}


/* =========================================
   DARK TOAST
========================================= */

.dark .sp-toast-error {
    background: rgba(69, 10, 10, .94);

    border-color: rgba(248, 113, 113, .18);

    color: #fecaca;
}


.dark .sp-toast-success {
    background: rgba(20, 50, 35, .95);

    border-color: rgba(74, 222, 128, .17);

    color: #bbf7d0;
}


.dark .sp-toast-default {
    background: rgba(23, 32, 51, .96);

    border-color: rgba(255, 255, 255, .07);

    color: #e2e8f0;
}


/* =========================================
   DARK FIXED CHECKOUT BAR
========================================= */

.dark
#payment-form
.checkout-bar {
    background: rgba(23, 32, 51, .96);

    border-top-color: rgba(255, 255, 255, .07);

    box-shadow: 0 -10px 32px rgba(0, 0, 0, .24);
}


.dark
#payment-form
.checkout-summary {
    color: #94a3b8;
}


.dark
#payment-form
.checkout-summary
.row:last-child {
    color: #f1f5f9;
}


.dark
#payment-form
.checkout-btn {
    background: #2563eb;

    color: #fff;

    box-shadow: 0 8px 20px rgba(37, 99, 235, .22);
}


.dark
#payment-form
.checkout-btn:hover {
    background: #3b82f6;
}

/*//////////////////////////////////////////////////////انتخاب روش پرداخت ////////////////////////////*/

/*/////////////////////////////  کد تخفیف کاربر/////////////////////////////////////////////////////////////*/

/* ==============================
   FIXED CHECKOUT PANEL (ALL DEVICES)
   ============================== */

#payment-form .checkout-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;

    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);

    border-top: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 -10px 25px rgba(0, 0, 0, 0.08);

    padding: 14px 18px;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* سمت اطلاعات */
#payment-form .checkout-summary {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 13px;
    color: #444;
}

#payment-form .checkout-summary .row {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    min-width: 260px;
}

/* دکمه پرداخت */
#payment-form .checkout-btn {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff;
    font-weight: 700;
    border-radius: 14px;
    padding: 12px 20px;

    min-width: 220px;
    text-align: center;

    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.25);

    transition: all 0.25s ease;
    white-space: nowrap;
}

#payment-form .checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 32px rgba(79, 70, 229, 0.35);
}

/* موبایل */
@media (max-width: 768px) {
    #payment-form .checkout-bar {
        flex-direction: column;
        align-items: stretch;
        padding: 12px;
    }

    #payment-form .checkout-summary .row {
        min-width: auto;
    }

    #payment-form .checkout-btn {
        width: 100%;
    }
}

/* =========================================
   FIXED CHECKOUT PANEL
   POLISH + DARK MODE
   Scoped only to #payment-form
========================================= */


/* =========================================
   CHECKOUT BAR
========================================= */

#payment-form .checkout-bar {
    position: fixed;

    right: 0;
    bottom: 0;
    left: 0;

    z-index: 999;

    width: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 16px;

    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));

    background: rgba(255, 255, 255, .96);

    border-top: 1px solid rgba(226, 232, 240, .9);

    box-shadow: 0 -8px 28px rgba(15, 23, 42, .07);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    box-sizing: border-box;
}


/* خط ظریف بالای پنل */

#payment-form .checkout-bar::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 2px;

    background: linear-gradient(
            90deg,
            #2563eb,
            rgba(59, 130, 246, .35),
            #f97316
    );

    opacity: .7;

    pointer-events: none;
}


/* =========================================
   SUMMARY
========================================= */

#payment-form .checkout-summary {
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 4px;

    color: #64748b;

    font-size: 12px;

    line-height: 1.6;
}


#payment-form
.checkout-summary
.row {
    min-width: 250px;

    display: flex;

    align-items: baseline;
    justify-content: space-between;

    gap: 28px;
}


/* آخرین ردیف = مبلغ نهایی */

#payment-form
.checkout-summary
.row:last-child {
    margin-top: 2px;

    padding-top: 5px;

    border-top: 1px dashed rgba(148, 163, 184, .35);

    color: #1e293b;

    font-size: 13px;
    font-weight: 850;
}


/* اگر مبلغ داخل strong باشد */

#payment-form
.checkout-summary
.row:last-child strong {
    color: #f97316;

    font-size: 14px;
    font-weight: 900;
}


/* =========================================
   CHECKOUT BUTTON
========================================= */

#payment-form .checkout-btn {
    min-width: 210px;
    min-height: 48px;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 7px;

    padding: 10px 18px;

    position: relative;

    overflow: hidden;

    border: 0;

    border-radius: 13px;

    background: #2563eb;

    color: #fff;

    font-size: 13px;
    font-weight: 850;

    line-height: 1.5;

    text-align: center;
    text-decoration: none;

    white-space: nowrap;

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(37, 99, 235, .20);

    transition: transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


/* Highlight روی دکمه */

#payment-form .checkout-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(
            circle at top right,
            rgba(255, 255, 255, .18),
            transparent 58%
    );

    opacity: 0;

    transition: opacity .2s ease;

    pointer-events: none;
}


#payment-form .checkout-btn:hover {
    background: #1d4ed8;

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 11px 26px rgba(37, 99, 235, .25);
}


#payment-form .checkout-btn:hover::before {
    opacity: 1;
}


#payment-form .checkout-btn:active {
    transform: scale(.985);

    box-shadow: 0 6px 16px rgba(37, 99, 235, .18);
}


#payment-form .checkout-btn:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .22);

    outline-offset: 3px;
}


/* اگر آیکون داخل دکمه باشد */

#payment-form .checkout-btn svg {
    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    color: currentColor;

    stroke: currentColor;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 768px) {

    #payment-form .checkout-bar {
        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        padding: 9px 12px calc(9px + env(safe-area-inset-bottom));
    }


    #payment-form .checkout-summary {
        width: 100%;

        gap: 2px;

        font-size: 11px;
    }


    #payment-form
    .checkout-summary
    .row {
        width: 100%;

        min-width: 0;

        min-height: 25px;

        gap: 12px;
    }


    #payment-form
    .checkout-summary
    .row:last-child {
        min-height: 31px;

        padding-top: 4px;

        font-size: 12px;
    }


    #payment-form
    .checkout-summary
    .row:last-child strong {
        font-size: 13.5px;
    }


    #payment-form .checkout-btn {
        width: 100%;

        min-width: 0;
        min-height: 48px;

        border-radius: 13px;

        font-size: 13px;
    }

}


/* =========================================
   DARK MODE
========================================= */

.dark
#payment-form
.checkout-bar {
    background: rgba(23, 32, 51, .97);

    border-top-color: rgba(255, 255, 255, .07);

    box-shadow: 0 -10px 32px rgba(0, 0, 0, .24);
}


/* خط بالایی در دارک */

.dark
#payment-form
.checkout-bar::before {
    background: linear-gradient(
            90deg,
            #3b82f6,
            rgba(96, 165, 250, .35),
            #fb923c
    );

    opacity: .8;
}


/* Summary */

.dark
#payment-form
.checkout-summary {
    color: #94a3b8;
}


.dark
#payment-form
.checkout-summary
.row:last-child {
    border-top-color: rgba(255, 255, 255, .08);

    color: #f1f5f9;
}


.dark
#payment-form
.checkout-summary
.row:last-child strong {
    color: #fb923c;
}


/* Pay button */

.dark
#payment-form
.checkout-btn {
    background: #2563eb;

    color: #fff;

    box-shadow: 0 8px 20px rgba(37, 99, 235, .22);
}


.dark
#payment-form
.checkout-btn:hover {
    background: #3b82f6;

    box-shadow: 0 11px 25px rgba(37, 99, 235, .26);
}


.dark
#payment-form
.checkout-btn:active {
    background: #1d4ed8;
}

/*////////////////////////////////////////////// صفحه آدرس و انتخاب نوع ارسال     ////////////////////////*/

/* ================= ADDRESS (PRO MATCHED UI) ================= */

.sp-address {
    margin: 18px 0;
    direction: rtl;
}

/* ================= HEADER ================= */

.sp-address-head {
    margin-bottom: 10px;
}

.sp-address-title {
    font-size: 16px;
    font-weight: 900;
    color: #0f172a;
    display: flex;
    align-items: center;
    gap: 10px;
}

/* small accent line like hero */
.sp-address-title::before {

    content: "";

    width: 10px;
    height: 10px;

    border-radius: 50%;

    background: linear-gradient(135deg, #f97316, #2563eb);
}

/* ================= WRAPPER ================= */

.sp-address-body {

    position: relative;
}

/* ================= CARD ================= */

.sp-address-card {

    position: relative;

    padding: 18px 18px 16px;

    border-radius: 22px;

    background: linear-gradient(
            180deg,
            rgba(255, 255, 255, .98),
            rgba(248, 250, 252, .92)
    );

    border: 1px solid rgba(15, 23, 42, 0.06);

    box-shadow: 0 18px 45px rgba(15, 23, 42, 0.06),
    0 2px 0 rgba(249, 115, 22, 0.05);

    overflow: hidden;

    transition: all .25s ease;
}

/* HERO-LIKE GLOW */
.sp-address-card::before {

    content: "";

    position: absolute;

    top: -60px;
    right: -60px;

    width: 140px;
    height: 140px;

    background: radial-gradient(
            circle,
            rgba(249, 115, 22, 0.18),
            rgba(37, 99, 235, 0.10),
            transparent 70%
    );

    filter: blur(2px);
}

/* TOP ACCENT LINE */
.sp-address-card::after {

    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 3px;

    background: linear-gradient(
            90deg,
            #f97316,
            #2563eb
    );
}

/* ================= CONTENT ================= */

.sp-address-content {

    display: flex;

    flex-direction: column;

    gap: 10px;

    font-size: 13px;

    line-height: 1.9;

    color: #475569;

    position: relative;
    z-index: 2;
}

/* ================= LOCATION ================= */

.sp-address-location {

    font-size: 14px;

    font-weight: 900;

    color: #0f172a;

    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* ================= TEXT ================= */

.sp-address-text {

    color: #64748b;
}

/* ================= META ================= */

.sp-address-meta {

    display: flex;

    gap: 10px;

    font-size: 12px;

    color: #64748b;
}

/* ================= FOOTER ================= */

.sp-address-footer {

    margin-top: 14px;

    padding-top: 12px;

    border-top: 1px dashed rgba(15, 23, 42, 0.08);

    display: flex;

    align-items: center;

    justify-content: space-between;

    position: relative;
    z-index: 2;
}

/* ================= NAME ================= */

.sp-address-name {

    font-size: 13px;

    font-weight: 800;

    color: #0f172a;
}

/* ================= BUTTON (MATCH HERO STYLE) ================= */

.sp-address-btn {

    display: inline-flex;

    align-items: center;

    gap: 6px;

    padding: 9px 14px;

    border-radius: 14px;

    font-size: 12.5px;

    font-weight: 800;

    color: #fff;

    background: linear-gradient(135deg, #f97316, #f59e0b);

    box-shadow: 0 10px 25px rgba(249, 115, 22, 0.25);

    transition: all .25s ease;

    position: relative;
    overflow: hidden;
}

/* subtle shine like hero cards */
.sp-address-btn::before {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
            120deg,
            transparent 30%,
            rgba(255, 255, 255, .25),
            transparent 70%
    );

    transform: translateX(-100%);
    transition: .4s ease;
}

.sp-address-btn:hover {

    transform: translateY(-2px);

    box-shadow: 0 14px 35px rgba(249, 115, 22, 0.35);
}

.sp-address-btn:hover::before {

    transform: translateX(100%);
}

/* ================= ERROR ================= */

.sp-address-error,
.sp-address-error-msg {

    color: #dc2626;

    font-weight: 700;
}

/* ================= MOBILE ================= */

/* ================= MOBILE FIX: BUTTON POSITION ================= */

@media (max-width: 640px) {

    .sp-coupon-box {
        flex-direction: row-reverse; /* دکمه میره سمت چپ، input سمت راست */
    }

    .sp-coupon-btn {
        flex-shrink: 0;
    }

    .sp-coupon-input {
        text-align: right;
    }
}

/* ================= SHIPPING METHOD (PRO UI) ================= */

.sp-shipping {
    margin-top: 10px;
}

/* HEADER */
.sp-shipping__header {
    margin-bottom: 10px;
}

.sp-shipping__title {
    font-size: 16px;
    font-weight: 800;
    color: #0f172a;
}

/* GRID (DESKTOP) */
.sp-shipping__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

/* CARD */
.sp-shipping__card {
    display: block;
    cursor: pointer;

    padding: 14px;

    border-radius: 16px;

    border: 1px solid rgba(15, 23, 42, 0.08);

    background: rgba(255, 255, 255, 0.96);

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.05);

    transition: all .25s ease;

    min-height: 110px;
}

/* hover */
.sp-shipping__card:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.08);
}

/* selected */
.sp-shipping__radio:checked + .sp-shipping__card {
    border-color: rgba(37, 99, 235, 0.25);
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08),
    0 0 0 2px rgba(37, 99, 235, 0.08);
}

/* TOP */
.sp-shipping__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* NAME */
.sp-shipping__name {
    font-size: 14px;
    font-weight: 800;
    color: #0f172a;
}

/* LOGO */
.sp-shipping__logo {
    width: 44px;
    height: auto;
    object-fit: contain;
}

/* PRICE */
.sp-shipping__price {
    margin-top: 14px;
    color: #2563eb;
    font-weight: 900;
}

.sp-shipping__currency {
    font-size: 12px;
    font-weight: 600;
    color: #64748b;
}

/* ================= MOBILE (IMPORTANT PART) ================= */

@media (max-width: 640px) {

    /* کنار هم در یک خط (نه لیست عمودی) */
    .sp-shipping__grid {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* کارت کوچکتر */
    .sp-shipping__card {
        padding: 12px;
        min-height: 96px;
        border-radius: 14px;
    }

    .sp-shipping__logo {
        width: 38px;
    }

    .sp-shipping__name {
        font-size: 13px;
    }

    .sp-shipping__price {
        margin-top: 10px;
    }
}

/* =========================================
   CHECKOUT ADDRESS + SHIPPING
   POLISH + DARK MODE
   Scoped only to .sp-address / .sp-shipping
========================================= */


/* =========================================
   ADDRESS
========================================= */

.sp-address {
    margin: 18px 0;
    direction: rtl;
}


/* Header */

.sp-address .sp-address-head {
    margin-bottom: 10px;
}


.sp-address .sp-address-title {
    display: flex;
    align-items: center;

    gap: 8px;

    margin: 0;

    color: #1e293b;

    font-size: 15px;
    font-weight: 850;

    line-height: 1.6;
}


/* Accent */

.sp-address .sp-address-title::before {
    content: "";

    width: 8px;
    height: 8px;

    flex: 0 0 8px;

    border-radius: 50%;

    background: #2563eb;

    box-shadow: 0 0 0 4px rgba(37, 99, 235, .08);
}


/* =========================================
   ADDRESS CARD
========================================= */

.sp-address .sp-address-card {
    position: relative;

    overflow: hidden;

    padding: 17px 17px 15px;

    border: 1px solid #e8edf3;

    border-radius: 18px;

    background: #fff;

    box-shadow: 0 7px 24px rgba(15, 23, 42, .045);

    transition: border-color .2s ease,
    box-shadow .2s ease,
    transform .2s ease;
}


/* Glow */

.sp-address .sp-address-card::before {
    content: "";

    position: absolute;

    top: -65px;
    right: -65px;

    width: 140px;
    height: 140px;

    border-radius: 50%;

    background: radial-gradient(
            circle,
            rgba(37, 99, 235, .08),
            transparent 68%
    );

    pointer-events: none;
}


/* Top accent */

.sp-address .sp-address-card::after {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: 0;

    height: 2px;

    background: linear-gradient(
            90deg,
            #2563eb,
            #60a5fa,
            #f97316
    );

    opacity: .75;
}


/* =========================================
   ADDRESS CONTENT
========================================= */

.sp-address .sp-address-content {
    position: relative;

    z-index: 2;

    display: flex;
    flex-direction: column;

    gap: 8px;

    color: #64748b;

    font-size: 12.5px;

    line-height: 1.9;
}


/* City / province */

.sp-address .sp-address-location {
    display: flex;
    flex-wrap: wrap;

    gap: 5px;

    color: #1e293b;

    font-size: 14px;
    font-weight: 850;
}


/* Address text */

.sp-address .sp-address-text {
    color: #64748b;

    overflow-wrap: anywhere;
}


/* Meta */

.sp-address .sp-address-meta {
    display: flex;
    flex-wrap: wrap;

    gap: 5px 12px;

    color: #94a3b8;

    font-size: 11.5px;
}


/* =========================================
   ADDRESS FOOTER
========================================= */

.sp-address .sp-address-footer {
    position: relative;

    z-index: 2;

    margin-top: 13px;

    padding-top: 12px;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 12px;

    border-top: 1px dashed rgba(148, 163, 184, .32);
}


.sp-address .sp-address-name {
    min-width: 0;

    color: #334155;

    font-size: 12.5px;
    font-weight: 800;

    overflow-wrap: anywhere;
}


/* =========================================
   ADDRESS BUTTON
========================================= */

.sp-address .sp-address-btn {
    min-height: 38px;

    flex-shrink: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    padding: 8px 12px;

    position: relative;

    overflow: hidden;

    border: 0;

    border-radius: 11px;

    background: #2563eb;

    color: #fff;

    font-size: 11.5px;
    font-weight: 800;

    text-decoration: none;

    box-shadow: 0 6px 16px rgba(37, 99, 235, .18);

    transition: transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.sp-address .sp-address-btn svg {
    width: 15px;
    height: 15px;

    flex: 0 0 15px;

    stroke: currentColor;
}


.sp-address .sp-address-btn::before {
    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(
            120deg,
            transparent 30%,
            rgba(255, 255, 255, .18),
            transparent 70%
    );

    transform: translateX(-110%);

    transition: transform .4s ease;

    pointer-events: none;
}


@media (hover: hover) {

    .sp-address .sp-address-btn:hover {
        background: #1d4ed8;

        color: #fff;

        transform: translateY(-1px);

        box-shadow: 0 9px 21px rgba(37, 99, 235, .23);
    }


    .sp-address .sp-address-btn:hover::before {
        transform: translateX(110%);
    }

}


.sp-address .sp-address-btn:active {
    transform: scale(.97);
}


/* =========================================
   ADDRESS ERROR
========================================= */

.sp-address .sp-address-error,
.sp-address .sp-address-error-msg {
    color: #dc2626;

    font-size: 12px;
    font-weight: 700;
}


/* =========================================
   SHIPPING
========================================= */

.sp-shipping {
    margin-top: 16px;
}


.sp-shipping .sp-shipping__header {
    margin-bottom: 10px;
}


.sp-shipping .sp-shipping__title {
    margin: 0;

    color: #1e293b;

    font-size: 15px;
    font-weight: 850;

    line-height: 1.6;
}


/* =========================================
   SHIPPING GRID
========================================= */

.sp-shipping .sp-shipping__grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
}


/* =========================================
   SHIPPING CARD
========================================= */

.sp-shipping .sp-shipping__card {
    position: relative;

    min-width: 0;
    min-height: 105px;

    display: block;

    padding: 13px;

    overflow: hidden;

    border: 1px solid #e8edf3;

    border-radius: 15px;

    background: #fff;

    cursor: pointer;

    box-shadow: 0 6px 20px rgba(15, 23, 42, .04);

    transition: transform .2s ease,
    border-color .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


/* radio indicator */

.sp-shipping .sp-shipping__card::after {
    content: "";

    position: absolute;

    top: 11px;
    right: 11px;

    width: 16px;
    height: 16px;

    border: 2px solid #cbd5e1;

    border-radius: 50%;

    background: #fff;

    box-sizing: border-box;

    transition: .2s ease;
}


@media (hover: hover) {

    .sp-shipping .sp-shipping__card:hover {
        transform: translateY(-1px);

        border-color: #dce4ed;

        box-shadow: 0 9px 25px rgba(15, 23, 42, .065);
    }

}


/* =========================================
   SELECTED SHIPPING
========================================= */

.sp-shipping
.sp-shipping__radio:checked
+ .sp-shipping__card {
    border-color: rgba(37, 99, 235, .30);

    background: linear-gradient(
            180deg,
            rgba(37, 99, 235, .05),
            #fff
    );

    box-shadow: 0 7px 22px rgba(37, 99, 235, .065),
    0 0 0 2px rgba(37, 99, 235, .055);
}


.sp-shipping
.sp-shipping__radio:checked
+ .sp-shipping__card::after {
    border-color: #2563eb;

    background: radial-gradient(
            circle,
            #2563eb 0,
            #2563eb 42%,
            #fff 45%,
            #fff 100%
    );

    box-shadow: 0 0 0 3px rgba(37, 99, 235, .08);
}


/* =========================================
   SHIPPING TOP
========================================= */

.sp-shipping .sp-shipping__top {
    min-width: 0;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 8px;

    padding-right: 24px;
}


.sp-shipping .sp-shipping__name {
    min-width: 0;

    color: #1e293b;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.6;
}


.sp-shipping .sp-shipping__logo {
    width: 40px;
    max-height: 30px;

    flex: 0 0 40px;

    object-fit: contain;
}


/* =========================================
   SHIPPING PRICE
========================================= */

.sp-shipping .sp-shipping__price {
    margin-top: 13px;

    color: #2563eb;

    font-size: 14px;
    font-weight: 900;
}


.sp-shipping .sp-shipping__currency {
    margin-right: 3px;

    color: #94a3b8;

    font-size: 10.5px;
    font-weight: 600;
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 640px) {

    .sp-address {
        margin: 15px 0;
    }


    .sp-address .sp-address-title,
    .sp-shipping .sp-shipping__title {
        font-size: 14px;
    }


    .sp-address .sp-address-card {
        padding: 15px 14px 14px;

        border-radius: 16px;
    }


    .sp-address .sp-address-location {
        font-size: 13px;
    }


    .sp-address .sp-address-text {
        font-size: 11.5px;
    }


    .sp-address .sp-address-meta {
        font-size: 10.5px;
    }


    .sp-address .sp-address-footer {
        gap: 8px;
    }


    .sp-address .sp-address-name {
        font-size: 11.5px;
    }


    .sp-address .sp-address-btn {
        min-height: 36px;

        padding: 7px 10px;

        border-radius: 10px;

        font-size: 10.5px;
    }


    /* Shipping stays two columns */
    .sp-shipping .sp-shipping__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }


    .sp-shipping .sp-shipping__card {
        min-height: 94px;

        padding: 11px;

        border-radius: 13px;
    }


    .sp-shipping .sp-shipping__card::after {
        top: 10px;
        right: 10px;

        width: 15px;
        height: 15px;
    }


    .sp-shipping .sp-shipping__top {
        padding-right: 22px;

        gap: 5px;
    }


    .sp-shipping .sp-shipping__name {
        font-size: 11.5px;
    }


    .sp-shipping .sp-shipping__logo {
        width: 32px;
        max-height: 25px;

        flex-basis: 32px;
    }


    .sp-shipping .sp-shipping__price {
        margin-top: 10px;

        font-size: 12.5px;
    }


    .sp-shipping .sp-shipping__currency {
        font-size: 9px;
    }

}


/* =========================================
   DARK MODE - ADDRESS
========================================= */

.dark .sp-address .sp-address-title {
    color: #f1f5f9;
}


.dark .sp-address .sp-address-title::before {
    background: #3b82f6;

    box-shadow: 0 0 0 4px rgba(59, 130, 246, .12);
}


.dark .sp-address .sp-address-card {
    background: #172033;

    border-color: rgba(255, 255, 255, .07);

    box-shadow: 0 8px 26px rgba(0, 0, 0, .15);
}


.dark .sp-address .sp-address-card::before {
    background: radial-gradient(
            circle,
            rgba(59, 130, 246, .10),
            transparent 68%
    );
}


.dark .sp-address .sp-address-card::after {
    background: linear-gradient(
            90deg,
            #3b82f6,
            #60a5fa,
            #fb923c
    );
}


.dark .sp-address .sp-address-content {
    color: #cbd5e1;
}


.dark .sp-address .sp-address-location {
    color: #f1f5f9;
}


.dark .sp-address .sp-address-text {
    color: #cbd5e1;
}


.dark .sp-address .sp-address-meta {
    color: #94a3b8;
}


.dark .sp-address .sp-address-footer {
    border-top-color: rgba(255, 255, 255, .07);
}


.dark .sp-address .sp-address-name {
    color: #e2e8f0;
}


.dark .sp-address .sp-address-btn {
    background: #2563eb;

    color: #fff;

    box-shadow: 0 6px 16px rgba(37, 99, 235, .20);
}


.dark .sp-address .sp-address-btn:hover {
    background: #3b82f6;
}


.dark .sp-address .sp-address-error,
.dark .sp-address .sp-address-error-msg {
    color: #f87171;
}


/* =========================================
   DARK MODE - SHIPPING
========================================= */

.dark .sp-shipping .sp-shipping__title {
    color: #f1f5f9;
}


.dark .sp-shipping .sp-shipping__card {
    background: #172033;

    border-color: rgba(255, 255, 255, .07);

    box-shadow: 0 6px 20px rgba(0, 0, 0, .13);
}


.dark .sp-shipping .sp-shipping__card::after {
    background: #1e293b;

    border-color: #64748b;
}


.dark
.sp-shipping
.sp-shipping__radio:checked
+ .sp-shipping__card {
    background: linear-gradient(
            180deg,
            rgba(37, 99, 235, .14),
            #172033
    );

    border-color: rgba(96, 165, 250, .30);

    box-shadow: 0 7px 22px rgba(0, 0, 0, .15),
    0 0 0 2px rgba(59, 130, 246, .07);
}


.dark
.sp-shipping
.sp-shipping__radio:checked
+ .sp-shipping__card::after {
    border-color: #60a5fa;

    background: radial-gradient(
            circle,
            #60a5fa 0,
            #60a5fa 42%,
            #172033 45%,
            #172033 100%
    );

    box-shadow: 0 0 0 3px rgba(59, 130, 246, .10);
}


.dark .sp-shipping .sp-shipping__name {
    color: #f1f5f9;
}


.dark .sp-shipping .sp-shipping__price {
    color: #60a5fa;
}


.dark .sp-shipping .sp-shipping__currency {
    color: #94a3b8;
}

/*//////////////////////////////// کلید پرداخت //////////////////////*/

/* ======================================
   SUMMARY DESKTOP CARD
====================================== */

.spx-summary-card {
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border-radius: 20px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
    border-top: 1px solid rgba(15, 23, 42, 0.06);
}

/* LIST */
.spx-summary-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ROW */
.spx-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
}

/* LABEL */
.spx-summary-label {
    font-size: 13px;
    color: #475569;
}

/* VALUE */
.spx-summary-value {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.spx-summary-num {
    font-weight: 800;
    color: #0f172a;
}

.spx-summary-unit {
    font-size: 11px;
    color: #64748b;
}

/* TOTAL */
.spx-summary-row--total {
    border-top: 1px dashed rgba(148, 163, 184, 0.4);
    padding-top: 14px;
    margin-top: 6px;
}

.spx-summary-value--primary .spx-summary-num {
    color: #f97316;
}

/* BUTTON */
.spx-summary-btn {
    margin-top: 16px;
    width: 100%;
    padding: 12px;
    border-radius: 12px;
    background: linear-gradient(180deg, #0f172a, #111827);
    color: #fff;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: 0.25s ease;
    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}

.spx-summary-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(180deg, #111827, #0f172a);
    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.25);
}

/* ======================================
   MOBILE FIXED BAR
====================================== */

.spx-summary-mobile {
    position: fixed;
    bottom: 0;
    inset-inline: 0;

    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(14px);

    border-top: 1px solid rgba(226, 232, 240, 0.8);

    padding: 12px 14px;

    z-index: 50;
}

/* MOBILE LIST */
.spx-summary-mobile-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 10px;
}

/* ROW */
.spx-summary-mobile-row {
    display: flex;
    justify-content: space-between;
    font-size: 12.5px;
    color: #334155;
}

/* TOTAL */
.spx-summary-mobile-row--total {
    font-weight: 800;
    color: #0f172a;
}

.spx-summary-mobile-btn {
    width: 100%;
    padding: 10px;
    border-radius: 12px;
    background: linear-gradient(180deg, #0f172a, #111827);
    color: #fff;
    font-weight: 800;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

/* SMALL TEXT */
.spx-summary-mobile small {
    font-size: 10px;
    color: #64748b;
}


/* =========================================
   SUMMARY CARD + MOBILE BAR
   POLISH + DARK MODE
   Scoped only to spx-summary
========================================= */


/* =========================================
   DESKTOP SUMMARY CARD
========================================= */

.spx-summary-card {
    background: #ffffff;

    border: 1px solid #e9eef5;

    border-radius: 18px;

    padding: 18px;

    box-shadow: 0 8px 26px rgba(15, 23, 42, .045);
}


/* LIST */

.spx-summary-card .spx-summary-list {
    display: flex;
    flex-direction: column;

    gap: 0;
}


/* ROW */

.spx-summary-card .spx-summary-row {
    min-height: 44px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 14px;

    padding: 8px 0;

    border-bottom: 1px solid #f0f3f7;
}


.spx-summary-card .spx-summary-row:last-child {
    border-bottom: 0;
}


/* LABEL */

.spx-summary-card .spx-summary-label {
    color: #64748b;

    font-size: 12px;
    font-weight: 500;
}


/* VALUE */

.spx-summary-card .spx-summary-value {
    min-width: 0;

    display: flex;
    align-items: baseline;

    gap: 4px;
}


.spx-summary-card .spx-summary-num {
    color: #1e293b;

    font-size: 14px;
    font-weight: 800;

    line-height: 1.5;
}


.spx-summary-card .spx-summary-unit {
    color: #94a3b8;

    font-size: 10.5px;
    font-weight: 500;
}


/* =========================================
   TOTAL
========================================= */

.spx-summary-card
.spx-summary-row--total {
    min-height: 50px;

    margin-top: 6px;

    padding-top: 13px;

    border-top: 1px dashed rgba(148, 163, 184, .45);

    border-bottom: 0;
}


.spx-summary-card
.spx-summary-row--total
.spx-summary-label {
    color: #334155;

    font-size: 13px;
    font-weight: 800;
}


.spx-summary-card
.spx-summary-value--primary
.spx-summary-num {
    color: #f97316;

    font-size: 17px;
    font-weight: 900;
}


.spx-summary-card
.spx-summary-value--primary
.spx-summary-unit {
    color: #64748b;
}


/* =========================================
   DESKTOP BUTTON
========================================= */

.spx-summary-card
.spx-summary-btn {
    width: 100%;

    min-height: 48px;

    margin-top: 15px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 14px;

    border: 1px solid rgba(255, 255, 255, .07);

    border-radius: 13px;

    background: #172033;

    color: #fff;

    font-size: 13px;
    font-weight: 800;

    cursor: pointer;

    box-shadow: 0 8px 20px rgba(15, 23, 42, .15);

    transition: transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


.spx-summary-card
.spx-summary-btn:hover {
    background: #1e293b;

    transform: translateY(-1px);

    box-shadow: 0 11px 26px rgba(15, 23, 42, .20);
}


.spx-summary-card
.spx-summary-btn:active {
    transform: scale(.985);
}


/* =========================================
   MOBILE FIXED SUMMARY
========================================= */

@media (max-width: 767px) {

    .spx-summary-mobile {
        position: fixed;

        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;

        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));

        background: rgba(255, 255, 255, .96);

        border-top: 1px solid rgba(226, 232, 240, .9);

        box-shadow: 0 -8px 30px rgba(15, 23, 42, .08);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        z-index: 50;
    }


    /* List */
    .spx-summary-mobile
    .spx-summary-mobile-list {
        display: flex;
        flex-direction: column;

        gap: 0;

        margin-bottom: 9px;
    }


    /* Row */
    .spx-summary-mobile
    .spx-summary-mobile-row {
        min-height: 29px;

        display: flex;
        align-items: center;
        justify-content: space-between;

        gap: 12px;

        color: #64748b;

        font-size: 11.5px;
    }


    /* Total */
    .spx-summary-mobile
    .spx-summary-mobile-row--total {
        min-height: 35px;

        margin-top: 3px;

        padding-top: 6px;

        border-top: 1px dashed rgba(148, 163, 184, .4);

        color: #1e293b;

        font-size: 13px;
        font-weight: 800;
    }


    /* Small */
    .spx-summary-mobile small {
        color: #94a3b8;

        font-size: 9.5px;
    }


    /* Mobile button */
    .spx-summary-mobile
    .spx-summary-mobile-btn {
        width: 100%;

        min-height: 48px;

        display: flex;
        align-items: center;
        justify-content: center;

        padding: 10px 14px;

        border: 0;

        border-radius: 13px;

        background: #172033;

        color: #fff;

        font-size: 13px;
        font-weight: 800;

        box-shadow: 0 7px 18px rgba(15, 23, 42, .16);

        transition: transform .2s ease,
        background .2s ease;
    }


    .spx-summary-mobile
    .spx-summary-mobile-btn:active {
        background: #0f172a;

        transform: scale(.985);
    }

}


/* =========================================
   DARK MODE - DESKTOP
========================================= */

.dark .spx-summary-card {
    background: #172033;

    border-color: rgba(255, 255, 255, .07);

    box-shadow: 0 10px 28px rgba(0, 0, 0, .15);
}


.dark
.spx-summary-card
.spx-summary-row {
    border-bottom-color: rgba(255, 255, 255, .055);
}


.dark
.spx-summary-card
.spx-summary-label {
    color: #94a3b8;
}


.dark
.spx-summary-card
.spx-summary-num {
    color: #f1f5f9;
}


.dark
.spx-summary-card
.spx-summary-unit {
    color: #8494aa;
}


/* Total */

.dark
.spx-summary-card
.spx-summary-row--total {
    border-top-color: rgba(148, 163, 184, .25);

    border-bottom: 0;
}


.dark
.spx-summary-card
.spx-summary-row--total
.spx-summary-label {
    color: #e2e8f0;
}


.dark
.spx-summary-card
.spx-summary-value--primary
.spx-summary-num {
    color: #fb923c;
}


.dark
.spx-summary-card
.spx-summary-value--primary
.spx-summary-unit {
    color: #94a3b8;
}


/* Button */

.dark
.spx-summary-card
.spx-summary-btn {
    background: #2563eb;

    border-color: rgba(255, 255, 255, .06);

    color: #fff;

    box-shadow: 0 8px 20px rgba(37, 99, 235, .20);
}


.dark
.spx-summary-card
.spx-summary-btn:hover {
    background: #3b82f6;
}


/* =========================================
   DARK MODE - MOBILE
========================================= */

@media (max-width: 767px) {

    .dark .spx-summary-mobile {
        background: rgba(23, 32, 51, .96);

        border-top-color: rgba(255, 255, 255, .07);

        box-shadow: 0 -10px 32px rgba(0, 0, 0, .25);

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }


    .dark
    .spx-summary-mobile
    .spx-summary-mobile-row {
        color: #94a3b8;
    }


    .dark
    .spx-summary-mobile
    .spx-summary-mobile-row--total {
        color: #f1f5f9;

        border-top-color: rgba(255, 255, 255, .08);
    }


    .dark
    .spx-summary-mobile
    small {
        color: #8494aa;
    }


    .dark
    .spx-summary-mobile
    .spx-summary-mobile-btn {
        background: #2563eb;

        color: #fff;

        box-shadow: 0 7px 18px rgba(37, 99, 235, .20);
    }


    .dark
    .spx-summary-mobile
    .spx-summary-mobile-btn:active {
        background: #1d4ed8;
    }

}

/*//////////////////////////////////    سبد خرید /////////////////////////*/

/* ======================================
   PAY BUTTON (CHECKOUT PRIMARY ACTION)
====================================== */

.spx-summary-btn-pay {
    margin-top: 16px;
    width: 100%;
    padding: 12px 14px;

    border-radius: 14px;

    background: linear-gradient(180deg, #0f172a, #111827);

    color: #fff;
    font-weight: 800;

    border: 1px solid rgba(255, 255, 255, 0.06);

    cursor: pointer;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    text-decoration: none;

    transition: 0.25s ease;

    box-shadow: 0 10px 25px rgba(15, 23, 42, 0.18);
}

/* hover state */
.spx-summary-btn-pay:hover {
    transform: translateY(-2px);

    background: linear-gradient(180deg, #111827, #0f172a);

    box-shadow: 0 16px 35px rgba(15, 23, 42, 0.25);
}

/* active click feel */
.spx-summary-btn-pay:active {
    transform: translateY(0px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

/* focus accessibility */
.spx-summary-btn-pay:focus-visible {
    outline: 2px solid rgba(148, 163, 184, 0.6);
    outline-offset: 2px;
}

/* ======================================
   MOBILE PAY BUTTON (CHECKOUT PRIMARY)
====================================== */

.spx-summary-mobile-btn-pay {
    width: 100%;
    padding: 11px 14px;

    border-radius: 14px;

    background: linear-gradient(180deg, #0f172a, #111827);

    color: #fff;
    font-weight: 800;

    border: 1px solid rgba(255, 255, 255, 0.06);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;

    text-decoration: none;

    transition: 0.25s ease;

    box-shadow: 0 10px 22px rgba(15, 23, 42, 0.18);
}

/* hover */
.spx-summary-mobile-btn-pay:hover {
    transform: translateY(-1px);
    background: linear-gradient(180deg, #111827, #0f172a);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.25);
}

/* active click feel */
.spx-summary-mobile-btn-pay:active {
    transform: translateY(0px);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.18);
}

/* focus accessibility */
.spx-summary-mobile-btn-pay:focus-visible {
    outline: 2px solid rgba(148, 163, 184, 0.6);
    outline-offset: 2px;
}

.spx-summary-mobile--pb-extra {
    padding-bottom: 180px; /* هرچقدر خواستی بیشتر کن */
}


/* =========================================
   CHECKOUT PAY BUTTONS
   POLISH + DARK MODE
   Scoped only to summary pay buttons
========================================= */


/* =========================================
   DESKTOP PAY BUTTON
========================================= */

.spx-summary-btn-pay {
    width: 100%;
    min-height: 48px;

    margin-top: 16px;

    padding: 10px 14px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    border: 0;
    border-radius: 13px;

    background: #172033;

    color: #fff;

    font-size: 13px;
    font-weight: 800;

    line-height: 1.5;

    text-decoration: none;

    cursor: pointer;

    box-sizing: border-box;

    box-shadow: 0 8px 20px rgba(15, 23, 42, .16);

    transition: transform .2s ease,
    background .2s ease,
    box-shadow .2s ease;
}


/* icon */
.spx-summary-btn-pay svg {
    width: 17px;
    height: 17px;

    flex: 0 0 17px;

    stroke: currentColor;
}


/* Hover */
.spx-summary-btn-pay:hover {
    background: #1e293b;

    color: #fff;

    transform: translateY(-1px);

    box-shadow: 0 11px 26px rgba(15, 23, 42, .21);

    text-decoration: none;
}


/* Active */
.spx-summary-btn-pay:active {
    transform: scale(.985);

    box-shadow: 0 6px 16px rgba(15, 23, 42, .16);
}


/* Keyboard accessibility */
.spx-summary-btn-pay:focus-visible {
    outline: 3px solid rgba(59, 130, 246, .20);
    outline-offset: 3px;
}


/* =========================================
   MOBILE PAY BUTTON
========================================= */

@media (max-width: 767px) {

    .spx-summary-mobile-btn-pay {
        width: 100%;

        min-height: 48px;

        padding: 10px 14px;

        display: flex;
        align-items: center;
        justify-content: center;

        gap: 7px;

        border: 0;
        border-radius: 13px;

        background: #172033;

        color: #fff;

        font-size: 13px;
        font-weight: 800;

        line-height: 1.5;

        text-decoration: none;

        box-sizing: border-box;

        box-shadow: 0 7px 18px rgba(15, 23, 42, .16);

        transition: transform .2s ease,
        background .2s ease,
        box-shadow .2s ease;
    }


    /* icon */
    .spx-summary-mobile-btn-pay svg {
        width: 17px;
        height: 17px;

        flex: 0 0 17px;

        stroke: currentColor;
    }


    .spx-summary-mobile-btn-pay:hover {
        background: #1e293b;

        color: #fff;

        text-decoration: none;
    }


    .spx-summary-mobile-btn-pay:active {
        background: #0f172a;

        transform: scale(.985);

        box-shadow: 0 5px 14px rgba(15, 23, 42, .16);
    }


    .spx-summary-mobile-btn-pay:focus-visible {
        outline: 3px solid rgba(59, 130, 246, .20);
        outline-offset: 3px;
    }


    /* =========================================
       SPACE FOR FIXED MOBILE SUMMARY
    ========================================= */
    .spx-summary-mobile--pb-extra {
        padding-bottom: calc(180px + env(safe-area-inset-bottom));
    }

}


/* =========================================
   DARK MODE - DESKTOP PAY
========================================= */

.dark .spx-summary-btn-pay {
    background: #2563eb;

    color: #fff;

    box-shadow: 0 8px 20px rgba(37, 99, 235, .20);
}


.dark .spx-summary-btn-pay:hover {
    background: #3b82f6;

    color: #fff;

    box-shadow: 0 11px 26px rgba(37, 99, 235, .25);
}


.dark .spx-summary-btn-pay:active {
    background: #1d4ed8;
}


/* =========================================
   DARK MODE - MOBILE PAY
========================================= */

@media (max-width: 767px) {

    .dark .spx-summary-mobile-btn-pay {
        background: #2563eb;

        color: #fff;

        box-shadow: 0 7px 18px rgba(37, 99, 235, .20);
    }


    .dark .spx-summary-mobile-btn-pay:hover {
        background: #3b82f6;

        color: #fff;
    }


    .dark .spx-summary-mobile-btn-pay:active {
        background: #1d4ed8;
    }

}

/*////////////////////////   سبد خرید خالی               ///////////////////////////*/

/* ======================================
   EMPTY CART STATE (PREMIUM)
====================================== */

.spx-empty-cart-wrap {
    width: 100%;
}

/* CARD */
.spx-empty-cart-card {
    min-height: 320px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 40px 20px;

    background: linear-gradient(180deg, #ffffff, #f8fafc);
}

/* CONTENT */
.spx-empty-cart-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    gap: 14px;

    text-align: center;
}

/* IMAGE */
.spx-empty-cart-img {
    width: 300px;
    height: 300px;

    object-fit: contain;

    filter: drop-shadow(0 12px 30px rgba(15, 23, 42, 0.12));

    transition: transform 0.3s ease;
}

/* hover micro effect */
.spx-empty-cart-card:hover .spx-empty-cart-img {
    transform: translateY(-4px) scale(1.02);
}

/* TEXT */
.spx-empty-cart-text {
    font-size: 15px;
    font-weight: 700;
    color: #475569;
}

/* ================= MOBILE ================= */
@media (max-width: 640px) {

    .spx-empty-cart-card {
        min-height: 240px;
        padding: 28px 14px;
    }

    .spx-empty-cart-img {
        width: 220px;
        height: 220px;
    }

    .spx-empty-cart-text {
        font-size: 13px;
    }
}

/*//////////////////////////////////////////////////////////*/

/* =========================================
   ORDER SUMMARY DETAILS - DARK MODE
   Scoped only to .sp-order-summary-box
========================================= */

.dark .sp-order-summary-box {
    color: #e2e8f0;
}


/* =========================================
   POINTS CARD
========================================= */

.dark
.sp-order-summary-box
.bg-white {
    background: #172033 !important;

    border-color:
        rgba(255, 255, 255, .07) !important;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .13);
}


/* عنوان امتیاز */

.dark
.sp-order-summary-box
.text-gray-700 {
    color: #cbd5e1 !important;
}


/* مقدار امتیاز */

.dark
.sp-order-summary-box
.text-primary {
    color: #60a5fa !important;
}


/* =========================================
   ITEMS ACCORDION
========================================= */

.dark
.sp-order-summary-box
[data-accordion-item] {
    background: #172033 !important;

    border-color:
        rgba(255, 255, 255, .07) !important;

    box-shadow:
        0 6px 20px rgba(0, 0, 0, .13);
}


/* Accordion button */

.dark
.sp-order-summary-box
[data-accordion-button] {
    color: #e2e8f0;
}


.dark
.sp-order-summary-box
[data-accordion-button]:active {
    background:
        rgba(255, 255, 255, .025);
}


/* عنوان لیست کالاها */

.dark
.sp-order-summary-box
[data-accordion-button]
.text-gray-800 {
    color: #f1f5f9 !important;
}


/* فلش */

.dark
.sp-order-summary-box
[data-accordion-chevron] {
    color: #64748b !important;
}


/* =========================================
   PRODUCT ITEMS
========================================= */

.dark
.sp-order-summary-box
[data-accordion-content]
li {
    background: #1e293b !important;

    border-color:
        rgba(255, 255, 255, .06) !important;
}


/* Product image */

.dark
.sp-order-summary-box
[data-accordion-content]
li img {
    background: #243247;
}


/* Product name */

.dark
.sp-order-summary-box
[data-accordion-content]
.text-gray-800 {
    color: #f1f5f9 !important;
}


/* quantity */

.dark
.sp-order-summary-box
[data-accordion-content]
.text-gray-500 {
    color: #94a3b8 !important;
}


/* size / color */

.dark
.sp-order-summary-box
[data-accordion-content]
.text-gray-400 {
    color: #8494aa !important;
}


/* Product price */

.dark
.sp-order-summary-box
[data-accordion-content]
.text-primary {
    color: #60a5fa !important;
}


/* =========================================
   DISCOUNT BOX
========================================= */

.dark
.sp-order-summary-box
.invoice-discount-box {
    background:
        rgba(34, 197, 94, .10);

    border-color:
        rgba(74, 222, 128, .15);

    box-shadow: none;
}


.dark
.sp-order-summary-box
.invoice-discount-title {
    color: #cbd5e1;
}


.dark
.sp-order-summary-box
.invoice-discount-icon {
    color: #4ade80;
}


.dark
.sp-order-summary-box
.invoice-discount-value {
    color: #4ade80;
}


.dark
.sp-order-summary-box
.invoice-discount-unit {
    color: #94a3b8;
}


/* =========================================
   SHIPPING
========================================= */

/* متن هزینه ارسال */

.dark
.sp-order-summary-box
.text-gray-600 {
    color: #94a3b8 !important;
}


/* مبلغ ارسال */

.dark
.sp-order-summary-box
.text-gray-800 {
    color: #e2e8f0 !important;
}


/* =========================================
   TOTAL CARD
========================================= */

.dark
.sp-order-summary-box
.bg-gray-50 {
    background: #1b283b !important;

    border-color:
        rgba(255, 255, 255, .07) !important;
}


/* خط بالا */

.dark
.sp-order-summary-box
.border-gray-200 {
    border-color:
        rgba(255, 255, 255, .08) !important;
}


/* عنوان مبلغ */

.dark
.sp-order-summary-box
.bg-gray-50
.text-gray-700 {
    color: #e2e8f0 !important;
}


/* مبلغ قبلی */

.dark
.sp-order-summary-box
.bg-gray-50
.text-red-500 {
    color: #f87171 !important;
}


/* مبلغ نهایی */

.dark
.sp-order-summary-box
.bg-gray-50
.text-primary {
    color: #60a5fa !important;
}


/* =========================================
   COMMON BORDER FIX
========================================= */

.dark
.sp-order-summary-box
.border-gray-100 {
    border-color:
        rgba(255, 255, 255, .07) !important;
}