/* ==========================================================================
   سبد خرید — آکادمی رقص الماسیان
   زبان طراحی یکسان با صفحات عمومی (academy-base.css): کارت‌های سفید روی
   پس‌زمینه‌ی روشن، گوشه‌های نرم، هایلایت بنفش، دکمه‌های گرادیانی.
   ========================================================================== */

.spx-cart-page {
    --apc-primary: #6c2bd9;
    --apc-primary-strong: #5a21bd;
    --apc-primary-soft: #efe7fd;
    --apc-blue: #7fb5ff;
    --apc-ink: #14101f;
    --apc-ink-soft: #3a3350;
    --apc-muted: #6f6893;
    --apc-border: #e3ddf5;
    --apc-bg: #eef4ff;
    --apc-surface: #fff;
    --apc-soft: #f7f3fe;
    --apc-success: #16a05d;
    --apc-gradient: linear-gradient(135deg, #6c2bd9 0%, #7fb5ff 100%);
    --apc-shadow-sm: 0 8px 22px rgba(76, 42, 165, .08);
    --apc-shadow-md: 0 16px 40px rgba(76, 42, 165, .12);
    --apc-radius: 18px;
    --apc-radius-lg: 26px;
    --apc-pill: 999px;
    --apc-transition: 280ms cubic-bezier(.2, .8, .2, 1);
    width: 100%;
    padding: 0px 10px 20px !important;
    background: transparent !important;
    box-sizing: border-box;
    color: var(--apc-ink);
}
.spx-cart-pending { visibility: hidden }

/* ---------- هیرو ---------- */
.spx-cart-heading {
    position: relative;
    display: flex; align-items: flex-end; justify-content: space-between; gap: 20px;
    overflow: hidden;
    margin-bottom: 26px; padding: 40px 44px 38px;
    border-radius: var(--apc-radius-lg);
    background: linear-gradient(125deg, #21113e 0%, #4f20ae 57%, #6e5fe7 100%);
    color: #fff;
    box-shadow: 0 25px 55px rgba(57, 29, 120, .2);
}
.spx-cart-heading::after {
    content: ""; position: absolute; left: -100px; bottom: -130px;
    width: 340px; height: 340px; border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: 0 0 0 36px rgba(255, 255, 255, .035), 0 0 0 72px rgba(255, 255, 255, .025);
    pointer-events: none;
}
.spx-cart-heading > * { position: relative; z-index: 1 }
.spx-cart-heading .spx-eyebrow { color: #a9d8ff; font-size: 13px; font-weight: 900 }
.spx-cart-heading h1 { margin: 12px 0 10px; font-size: clamp(21px, 4.6vw, 26px); line-height: 1.3; letter-spacing: -1px }
.spx-cart-heading p { margin: 0; max-width: 540px; color: #f1ecff; font-size: 15px; line-height: 2 }
.spx-cart-count {
    display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
    padding: 11px 20px; border: 1px solid rgba(255, 255, 255, .28); border-radius: var(--apc-pill);
    background: rgba(255, 255, 255, .1); color: #fff; font-size: 13px; font-weight: 800;
    backdrop-filter: blur(6px);
}

/* ---------- چیدمان ---------- */
.spx-cart-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start;
}
.spx-cart-products-column { min-width: 0 }
.spx-cart-summary {
    position: sticky; top: 24px; min-width: 0;
    padding: 26px 26px 24px; border: 1px solid var(--apc-border); border-radius: var(--apc-radius-lg);
    background: var(--apc-surface); box-shadow: var(--apc-shadow-md);
}

/* ---------- سربرگ ستون دوره‌ها ---------- */
.spx-cart-products-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; margin-bottom: 16px }
.spx-cart-products-heading h2 { margin: 0; font-size: 21px }
.spx-cart-products-heading span { color: var(--apc-muted); font-size: 12px }

.spx-cart-notice, .spx-coupon-notice { min-height: 18px; margin: 7px 0; color: #b45309; font-size: 12px; font-weight: 700 }

/* ---------- ردیف دوره ---------- */
.spx-cart-items { display: grid; gap: 14px }
.spx-cart-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 18px;
    padding: 18px 20px; border: 1px solid var(--apc-border); border-radius: var(--apc-radius);
    background: var(--apc-surface); box-shadow: var(--apc-shadow-sm);
    transition: transform var(--apc-transition), box-shadow var(--apc-transition), border-color var(--apc-transition);
}
.spx-cart-row:hover { transform: translateY(-3px); border-color: #d9c8f7; box-shadow: var(--apc-shadow-md) }
.spx-cart-product { display: flex; align-items: center; gap: 15px; min-width: 0 }
.spx-cart-product-link { display: flex; flex: 0 0 82px; width: 82px; height: 82px }
.spx-cart-thumb {
    display: flex; align-items: center; justify-content: center;
    flex: 0 0 82px; width: 82px; height: 82px; overflow: hidden;
    border-radius: 14px; object-fit: cover; background: var(--apc-soft); color: #b9aed8;
}
.spx-cart-thumb img { width: 100%; height: 100%; object-fit: cover }
.spx-cart-product > div { min-width: 0 }
.spx-cart-item-title { overflow: hidden; font-size: 15px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap }
.spx-cart-item-title a { color: inherit; text-decoration: none }
.spx-cart-item-title a:hover { color: var(--apc-primary) }
.spx-cart-item-price { margin-top: 7px; color: var(--apc-muted); font-size: 12px }

.spx-cart-qty { display: flex; align-items: center; gap: 13px; padding: 6px 9px; border: 1px solid var(--apc-border); border-radius: 12px; background: var(--apc-soft) }
.spx-cart-qty strong { min-width: 24px; font-size: 14px; text-align: center }
.spx-qty-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 9px;
    background: #fff; color: var(--apc-primary); font-size: 19px; line-height: 1; cursor: pointer;
    transition: background var(--apc-transition), color var(--apc-transition);
}
.spx-qty-button:hover { background: var(--apc-primary); color: #fff }
.spx-cart-line-total { min-width: 110px; font-size: 15px; font-weight: 800; text-align: center }
.spx-remove {
    padding: 8px 12px; border: 1px solid transparent; border-radius: 10px;
    background: transparent; color: #c2410c; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
    transition: background var(--apc-transition), border-color var(--apc-transition);
}
.spx-remove:hover { background: #fff2ec; border-color: #f5d8c8 }

/* ---------- خلاصه سفارش ---------- */
.spx-cart-summary-heading {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding-bottom: 18px; border-bottom: 1px solid var(--apc-border);
}
.spx-cart-summary-heading span { font-size: 18px; font-weight: 850 }
.spx-cart-summary-heading small { color: var(--apc-muted); font-size: 11px }
.spx-cart-summary-lines { display: grid; gap: 14px; padding: 19px 0; border-bottom: 1px solid var(--apc-border) }
.spx-cart-summary-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--apc-muted); font-size: 13px }
.spx-cart-summary-lines strong { color: var(--apc-ink); font-size: 13px }
.spx-cart-summary-lines .spx-cart-discount-row strong { color: var(--apc-success) }
.spx-cart-grand-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 0; font-size: 14px; font-weight: 800 }
.spx-cart-grand-total strong { font-size: 20px; background: var(--apc-gradient); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent }

/* دکمه ادامه پرداخت — گرادیان الماسیان */
.spx-cart-page .spx-checkout-link {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; box-sizing: border-box; padding: 14px 20px;
    border: 0; border-radius: var(--apc-pill);
    background: var(--apc-gradient); color: #fff !important; text-decoration: none;
    font: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
    box-shadow: var(--apc-shadow-sm);
    transition: transform var(--apc-transition), box-shadow var(--apc-transition);
}
.spx-cart-page .spx-checkout-link:hover { transform: translateY(-2px); box-shadow: var(--apc-shadow-md) }
.spx-cart-page .spx-checkout-link span { font-size: 19px; line-height: 1 }
.spx-cart-page .spx-checkout-link.is-disabled { pointer-events: none; opacity: .45 }

/* ---------- کد تخفیف ---------- */
.spx-coupon-form { margin-top: 20px; padding-top: 18px; border-top: 1px dashed #d9c8f7 }
.spx-coupon-form label { display: block; margin-bottom: 9px; font-size: 13px; font-weight: 800 }
.spx-coupon-form > div { display: flex; gap: 8px }
.spx-coupon-form input {
    min-width: 0; flex: 1; box-sizing: border-box; padding: 11px 13px;
    border: 1px solid var(--apc-border); border-radius: 12px; background: #fbfaff;
    color: var(--apc-ink); font: inherit; font-size: 13px; outline: none;
    transition: border-color var(--apc-transition), box-shadow var(--apc-transition);
}
.spx-coupon-form input:focus { border-color: var(--apc-primary); box-shadow: 0 0 0 4px var(--apc-primary-soft) }
.spx-coupon-form button {
    padding: 0 18px; border: 0; border-radius: 12px;
    background: var(--apc-primary-soft); color: var(--apc-primary-strong);
    font: inherit; font-size: 12px; font-weight: 800; cursor: pointer;
    transition: background var(--apc-transition), color var(--apc-transition);
}
.spx-coupon-form button:hover { background: var(--apc-primary); color: #fff }
.spx-coupon-message { min-height: 18px; margin: 8px 0 0; color: #b45309; font-size: 12px; font-weight: 700; line-height: 1.8 }

/* ---------- حالت خالی ---------- */
.spx-cart-page .spx-empty-state {
    display: grid; gap: 10px; justify-items: center; text-align: center;
    grid-column: 1 / -1; padding: 74px 24px;
    border: 1.5px dashed #d9c8f7; border-radius: var(--apc-radius-lg); background: var(--apc-surface);
    color: var(--apc-muted);
}
.spx-cart-page .spx-empty-state strong { color: var(--apc-ink); font-size: 20px }
.spx-cart-page.is-empty .spx-cart-summary { display: none }
.spx-cart-page.is-empty .spx-cart-layout { grid-template-columns: 1fr }

/* ---------- واکنش‌گرایی ---------- */
@media (max-width: 1024px) {
    .spx-cart-layout { grid-template-columns: 1fr }
    .spx-cart-summary { position: static; order: 2 }
	.spx-remove {padding: 0; margin: 0; text-align: right;}
}
@media (max-width: 900px) {
    .spx-cart-heading { padding: 32px 30px }
}
@media (max-width: 620px) {
    .spx-cart-page { padding: 22px 0 55px }
    .spx-cart-heading { align-items: stretch; flex-direction: column; margin-bottom: 20px; padding: 28px 22px }
    .spx-cart-heading h1 { font-size: 27px }
    .spx-cart-count { align-self: flex-start }
    .spx-cart-products-heading { align-items: flex-start; flex-direction: column; gap: 5px }
    .spx-cart-row { grid-template-columns: minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px }
    .spx-cart-product { grid-column: 1 / -1 }
    .spx-cart-line-total { min-width: 0; text-align: right }
    .spx-cart-remove { justify-self: end }
    .spx-cart-qty { justify-self: start }
    .spx-cart-summary { padding: 20px }
}