/* ==========================================================================
   تسویه حساب — آکادمی رقص الماسیان
   دو ستون: فرم گام‌به‌گام + خلاصه سفارش چسبان. همان DNA بصری سبد خرید.
   ========================================================================== */

.spx-checkout-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-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%;
    max-width: 1180px !important;
    padding: 0px 10px 10px !important;
}
.spx-checkout-pending { visibility: hidden }
.spx-payment-setup-warning { color: #b45309; font-size: 12px }
.spx-payment-option.is-disabled { opacity: .55; cursor: not-allowed }

/* ---------- هیرو ---------- */
.spx-checkout-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-checkout-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-checkout-heading > * { position: relative; z-index: 1 }
.spx-checkout-heading .spx-eyebrow { color: #a9d8ff; font-size: 13px; font-weight: 900 }
.spx-checkout-heading h1 { margin: 12px 0 10px; font-size: clamp(21px, 4.6vw, 25px); line-height: 1.3; letter-spacing: -1px }
.spx-checkout-heading p { margin: 0; color: #f1ecff; font-size: 15px; line-height: 2 }
.spx-checkout-back {
    display: inline-flex; align-items: center; 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: 12.5px; font-weight: 800; text-decoration: none;
    backdrop-filter: blur(6px);
    transition: background var(--apc-transition), transform var(--apc-transition);
}
.spx-checkout-back:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px) }

/* ---------- پیام‌های وضعیت ---------- */
.spx-checkout-message.is-error {
    margin-bottom: 18px; padding: 15px 19px;
    border-right: 4px solid #db4b4b; border-radius: 12px;
    background: #fff2f2; color: #ad2525; font-size: 13px; font-weight: 600; line-height: 1.9;
}
.spx-checkout-message.is-error a { color: var(--apc-primary-strong); font-weight: 800 }

/* ---------- چیدمان ---------- */
.spx-checkout-layout {
    display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 24px; align-items: start;
}
.spx-checkout-details { min-width: 0 }
.spx-checkout-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: #fff; box-shadow: var(--apc-shadow-md);
}

/* ---------- بخش‌های گام‌به‌گام ---------- */
.spx-checkout-section {
    margin-bottom: 18px; padding: 26px;
    border: 1px solid var(--apc-border); border-radius: var(--apc-radius);
    background: #fff; box-shadow: var(--apc-shadow-sm);
}
.spx-checkout-section-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 24px }
.spx-step-number {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--apc-gradient); color: #fff; font-size: 14px; font-weight: 800;
    box-shadow: var(--apc-shadow-sm);
}
.spx-checkout-section-heading h2 { margin: 0; font-size: 18px }
.spx-checkout-section-heading p { margin: 4px 0 0; color: var(--apc-muted); font-size: 12px }

/* ---------- فرم ---------- */
.spx-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px }
.spx-checkout label { display: block; margin: 0 0 18px; color: var(--apc-ink); font-size: 13px; font-weight: 700 }
.spx-checkout input, .spx-checkout select, .spx-checkout textarea {
    display: block; width: 100%; box-sizing: border-box; margin-top: 8px; padding: 13px 15px;
    border: 1px solid var(--apc-border); border-radius: 12px; background: #fbfaff;
    color: var(--apc-ink); font: inherit; font-size: 13.5px; outline: none;
    transition: border-color var(--apc-transition), box-shadow var(--apc-transition);
}
.spx-checkout select { appearance: auto; cursor: pointer }
.spx-checkout-select { position: relative; height: 47px; margin-top: 8px }
.spx-checkout .spx-form-grid > label > input, .spx-checkout .spx-form-grid > label > .spx-checkout-select { height: 47px !important; min-height: 47px !important; max-height: 47px !important }
.spx-checkout .spx-form-grid > label > .spx-checkout-select { display: block !important; box-sizing: border-box !important; overflow: visible }
.spx-checkout-select > select { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: 0 !important; opacity: 0 !important; pointer-events: none !important }
.spx-checkout-select-button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; height: 47px; min-height: 47px; box-sizing: border-box;
    margin: 0 !important; padding: 0 15px !important;
    border: 1px solid var(--apc-border); border-radius: 12px; background: #fbfaff;
    color: var(--apc-ink); font: inherit; font-size: 13.5px; line-height: 1.4; text-align: right; cursor: pointer;
}
.spx-checkout-select-button:after { content: "⌄"; color: var(--apc-muted); font-size: 18px }
.spx-checkout-select-menu {
    position: absolute; z-index: 30; top: calc(100% + 7px); right: 0; left: 0;
    max-height: 260px; overflow: auto; padding: 7px;
    border: 1px solid var(--apc-border); border-radius: 13px; background: #fff;
    box-shadow: 0 16px 35px rgba(76, 42, 165, .18);
}
.spx-checkout-select-menu[hidden] { display: none !important }
.spx-checkout-select-option {
    display: block; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px;
    background: transparent; color: var(--apc-ink); font: inherit; font-size: 12.5px; text-align: right; cursor: pointer;
}
.spx-checkout-select-option:hover { background: var(--apc-primary-soft); color: var(--apc-primary-strong) }
.spx-checkout textarea { resize: none; min-height: 130px }
.spx-checkout input:focus, .spx-checkout select:focus, .spx-checkout textarea:focus {
    border-color: var(--apc-primary); box-shadow: 0 0 0 4px var(--apc-primary-soft);
}
/* فیلدهای لاتین (موبایل/ایمیل/تلگرام): عدد و متن از چپ شروع شود اما لیبل و کادر راست‌چین بماند */
.spx-checkout .spx-input-ltr { direction: ltr; text-align: left; unicode-bidi: plaintext }
.spx-field-error { display: block; min-height: 16px; margin-top: 5px; color: #c2410c; font-size: 10.5px; font-weight: 500; line-height: 1.6 }
.spx-checkout label.has-error input, .spx-checkout label.has-error select, .spx-checkout label.has-error textarea { border-color: #e5484d; background: #fffafa }
.spx-checkout label.has-error input:focus, .spx-checkout label.has-error select:focus, .spx-checkout label.has-error textarea:focus { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, .1) }

/* ---------- روش پرداخت ---------- */
.spx-payment-options { display: grid; gap: 12px }
/* تراز ستون فرم: تلگرام و توضیحات سفارش هم‌راستا با بقیه فیلدها */
.spx-checkout-section .spx-form-grid > label { margin-bottom: 0 }
.spx-checkout-section .spx-form-grid { align-items: start }
.spx-payment-option {
    position: relative; display: flex !important; align-items: center; gap: 13px;
    margin: 0 !important; padding: 17px 16px;
    border: 1px solid var(--apc-border); border-radius: 14px; background: #fff; cursor: pointer;
    transition: border-color var(--apc-transition), background var(--apc-transition), box-shadow var(--apc-transition);
}
.spx-payment-option input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none }
.spx-payment-option.is-selected, .spx-payment-option:has(input:checked) {
    border-color: var(--apc-primary); background: var(--apc-soft); box-shadow: 0 0 0 3px var(--apc-primary-soft);
}
.spx-payment-radio {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 19px;
    width: 19px; height: 19px; box-sizing: border-box;
    border: 1px solid #b9aed8; border-radius: 50%;
}
.spx-payment-option input:checked + .spx-payment-radio {
    border-color: var(--apc-primary); background: var(--apc-primary); box-shadow: inset 0 0 0 4px #fff;
}
.spx-payment-option strong, .spx-payment-option small { display: block }
.spx-payment-option strong { font-size: 13px; color: var(--apc-ink) }
.spx-payment-option small { margin-top: 4px; color: var(--apc-muted); font-size: 11px; font-weight: 400 }

/* ---------- دکمه ثبت ---------- */
.spx-checkout-submit {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%; box-sizing: border-box; padding: 15px 20px;
    border: 0; border-radius: var(--apc-pill);
    background: var(--apc-gradient); color: #fff; 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-checkout-submit:hover { transform: translateY(-2px); box-shadow: var(--apc-shadow-md) }
.spx-checkout-submit:disabled { opacity: .5; cursor: not-allowed; transform: none }
.spx-checkout-submit span { font-size: 19px; line-height: 1 }
.spx-checkout-message { min-height: 20px; margin-top: 12px; color: var(--apc-primary-strong); font-size: 12.5px }

/* ---------- خلاصه سفارش ---------- */
.spx-checkout-summary-heading {
    display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
    padding-bottom: 18px; border-bottom: 1px solid var(--apc-border);
}
.spx-checkout-summary-heading span { font-size: 18px; font-weight: 850 }
.spx-checkout-summary-heading small { color: var(--apc-muted); font-size: 11px }
.spx-checkout-items { display: grid; gap: 13px; padding: 18px 0; border-bottom: 1px solid var(--apc-border) }
.spx-checkout-item { display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 11px }
.spx-checkout-item-image {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; overflow: hidden;
    border-radius: 11px; object-fit: cover; background: var(--apc-soft);
    color: #b9aed8; font-size: 9px;
}
.spx-checkout-item-image img { width: 100%; height: 100%; object-fit: cover }
.spx-checkout-item-info { min-width: 0 }
.spx-checkout-item-title { overflow: hidden; font-size: 12px; font-weight: 800; text-overflow: ellipsis; white-space: nowrap }
.spx-checkout-item-meta { margin-top: 4px; color: var(--apc-muted); font-size: 11px }
.spx-checkout-item-total { font-size: 12px; font-weight: 800; white-space: nowrap }
.spx-checkout-summary-lines { display: grid; gap: 14px; padding: 19px 0; border-bottom: 1px solid var(--apc-border) }
.spx-checkout-summary-lines > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--apc-muted); font-size: 13px }
.spx-checkout-summary-lines strong { color: var(--apc-ink); font-size: 13px }
.spx-checkout-summary-lines .spx-checkout-discount-row strong { color: var(--apc-success) }
.spx-checkout-total { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 19px 0; font-size: 14px; font-weight: 800 }
.spx-checkout-grand-total {
    font-size: 20px; background: var(--apc-gradient);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.spx-checkout-page.is-empty .spx-checkout-layout { display: none }

/* ---------- واکنش‌گرایی ---------- */
@media (max-width: 1024px) {
    .spx-checkout-layout { grid-template-columns: 1fr }
    .spx-checkout-summary { position: static; order: 2 }
}
@media (max-width: 900px) {
    .spx-checkout-heading { padding: 32px 30px }
}
@media (max-width: 620px) {
    .spx-checkout-page { padding: 22px 0 55px }
    .spx-checkout-heading { align-items: stretch; flex-direction: column; margin-bottom: 20px; padding: 28px 22px }
    .spx-checkout-heading h1 { font-size: 27px }
    .spx-checkout-back { align-self: flex-start }
    .spx-checkout-section { padding: 20px }
    .spx-form-grid { grid-template-columns: 1fr }
    .spx-checkout-summary { padding: 20px }
}