/*
 * گروهِ «خرید» — سبد، ثبتِ سفارش، رهگیری، درگاهِ آزمایشی و خریدِ اقساطی.
 *
 * قالبِ «مهرگان» برای این صفحه‌ها نشانه‌گذاری دارد (`mg-cart-page`،
 * `mg-checkout-*`، `mg-thankyou`، `mg-eac-*`، `mg-vo-*`) ولی تکه‌هایی که دادهٔ
 * ما دارد و قالب ندارد — کارتِ آدرس، گزینهٔ ارسال، فهرستِ کالاهای سفارش،
 * ردیفِ کدِ تخفیف، خطِ زمانِ رهگیری، فرمِ ضمانتِ اقساطی — با پیشوندِ `xco-`
 * این‌جا ساخته شده‌اند.
 *
 * قاعده‌ها:
 *   - `main.css` و `commerce-suite.css` نسخهٔ دست‌نخوردهٔ قالب‌اند؛ هر اصلاحی
 *     روی کلاس‌های قالب فقط زیرِ `.xco` (ریشهٔ همین صفحه‌ها) نوشته می‌شود تا
 *     جای دیگری از قالب عوض نشود.
 *   - فقط متغیرهای قالب (`--mg-*`)؛ هیچ رنگِ آبی/بنفشِ پیش‌فرضِ قالب نمی‌ماند.
 *   - موبایل‌اول، راست‌به‌چپ با ویژگی‌های منطقی (inline-start / inline-end).
 *   - بدونِ آدرسِ بیرونی و بدونِ @import.
 */

/* ── ریشه ── */
.xco { --xco-pad: 1.1rem; }
@media (min-width: 601px) {
    .xco { --xco-pad: 1.5rem; }
}

/* ============================================
   اجزای مشترک
   ============================================ */

/* پیام‌ها (نتیجهٔ آخرین تغییر، خطا، هشدارِ سبد) */
.xco-notices > .mg-cart-notice:first-child { margin-top: 1.25rem; }
.xco-notices > :last-child { margin-bottom: 1.25rem; }
.xco-notices--top > .mg-cart-notice:first-child { margin-top: 2rem; }
.xco .mg-cart-notice p { margin: 0; }
.xco .mg-cart-notice p + p { margin-top: .25rem; }
.xco .mg-cart-notice { line-height: 1.8; }

/* پیامِ «اطلاع» قالب آبی است؛ روی ویترین هم‌رنگِ برند می‌شود */
.xco .mg-cart-notice--info {
    background: rgba(var(--mg-primary-rgb), .07);
    color: var(--mg-primary-dark, var(--mg-primary));
    border: 1px solid rgba(var(--mg-primary-rgb), .2);
}
/* `x-pages.css` برای هشدار فقط رنگِ حاشیه داده؛ خودِ حاشیه این‌جا */
.xco .mg-cart-notice--warning { border-width: 1px; border-style: solid; }

/* برچسب و ورودی — همان ظاهرِ `.mg-form-group input` قالب */
.xco-label {
    display: block;
    margin-bottom: .45rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--mg-text);
}
.xco-input {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: .65rem 1rem;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius);
    background: var(--mg-bg, #fff);
    color: var(--mg-text);
    font-family: inherit;
    font-size: .95rem;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.xco-input::placeholder { color: var(--mg-text-muted); opacity: .7; }
.xco-input:focus {
    outline: none;
    border-color: var(--mg-primary);
    box-shadow: 0 0 0 3px rgba(var(--mg-primary-rgb), .12);
}

/* متن‌های کمکی */
.xco-text {
    margin: 0;
    font-size: .9rem;
    line-height: 2;
    color: var(--mg-text-muted);
}
.xco-hint {
    margin: .5rem 0 0;
    font-size: .78rem;
    line-height: 1.8;
    color: var(--mg-text-muted);
}
.xco-hint--center { text-align: center; }
.xco-hint a { color: var(--mg-primary); font-weight: 600; }
.xco-section-foot { margin: 1rem 0 0; }

/* برچسبِ کوچکِ گرد */
.xco-pill {
    display: inline-flex;
    align-items: center;
    padding: .15rem .65rem;
    border-radius: var(--mg-radius-full, 999px);
    background: rgba(var(--mg-primary-rgb), .1);
    color: var(--mg-primary);
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.7;
    white-space: nowrap;
}
.xco-pill--warn {
    background: rgba(var(--mg-accent-rgb), .18);
    color: color-mix(in srgb, var(--mg-accent) 62%, #000);
}

/* دکمهٔ متنی (برداشتنِ کدِ تخفیف) */
.xco-link-btn {
    appearance: none;
    padding: .2rem .35rem;
    border: 0;
    border-radius: var(--mg-radius-sm);
    background: none;
    color: var(--mg-primary);
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
.xco-link-btn:hover { text-decoration: underline; }
.xco-link-btn--danger { color: var(--mg-error, #ef4444); }

/* دکمهٔ خطرناک (انصراف) — بر پایهٔ `.mg-btn` قالب */
.xco-btn-danger {
    background: transparent;
    color: var(--mg-error, #ef4444);
    border: 1px solid rgba(239, 68, 68, .35);
}
.xco-btn-danger:hover {
    background: rgba(239, 68, 68, .08);
    border-color: rgba(239, 68, 68, .55);
}

/* مبلغ + نشانِ تومان کنارِ هم */
.xco-money {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}
.xco-money .mg-toman-icon { height: 1.4rem; }

/* شناسه/کدِ فنی (لاتین، تک‌فاصله) */
.xco-code {
    min-width: 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8rem;
    overflow-wrap: anywhere;
    text-align: end;
}

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

/* دایرهٔ پشتِ نمادِ سبدِ خالی — بدونِ این، `fill` پیش‌فرضِ SVG سیاه است */
.xco .mg-ec-icon { color: var(--mg-primary); }
.xco-ec-disc { fill: rgba(var(--mg-primary-rgb), .08); }

/* خطی که قابلِ خرید نیست (ناموجود/بی‌قیمت) */
.xco .mg-cp-row--item.is-blocked .mg-cp-col--img,
.xco .mg-cp-row--item.is-blocked .mg-cp-product-name { opacity: .55; }

/* پرچمِ زیرِ نامِ کالا */
.xco-line-flag {
    margin: .3rem 0 0;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.6;
}
.xco-line-flag--muted { color: var(--mg-text-muted); }
.xco-line-flag--warn { color: #b4553f; }

/* فرمِ تعداد: شمارنده + دکمهٔ «به‌روزرسانی» */
.xco-qty-form {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .4rem;
    margin: 0;
}
@media (max-width: 480px) {
    .xco-qty-form { align-items: flex-start; }
}
/* همان ظاهرِ `.mg-btn-secondary` در اندازهٔ کوچک */
.xco-qty-apply {
    appearance: none;
    padding: .3rem .75rem;
    border: 1px solid rgba(var(--mg-primary-rgb), .18);
    border-radius: var(--mg-radius-sm);
    background: rgba(var(--mg-primary-rgb), .08);
    color: var(--mg-primary-dark, var(--mg-primary));
    font-family: inherit;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: background .15s, border-color .15s;
}
.xco-qty-apply:hover {
    background: rgba(var(--mg-primary-rgb), .14);
    border-color: rgba(var(--mg-primary-rgb), .28);
}
/* با JS شمارنده خودش ارسال می‌کند (`data-autosubmit`)؛ دکمه فقط برای حالتِ بی‌JS است */
body.mg-loaded .xco-qty-apply { display: none; }

/* دکمهٔ حذف: قالب آن را برای <a> نوشته؛ این‌جا <button> است و بدونِ این
   بازنشانی، مربعِ خاکستریِ مرورگر با ضربدرِ تقریباً نامرئی (رنگِ حاشیه) دیده می‌شد */
.xco .mg-cp-col--del form { margin: 0; }
.xco .mg-cp-remove {
    appearance: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mg-text);
    cursor: pointer;
}
.xco .mg-cp-remove:hover,
.xco .mg-cp-remove:focus-visible {
    background: rgba(239, 68, 68, .08);
    color: var(--mg-error, #ef4444);
}
.xco .mg-cp-remove svg {
    display: block;
    flex: none;
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

/* کدِ تخفیف */
.xco-coupon { margin-bottom: 1.25rem; }
.xco-coupon-row {
    display: flex;
    align-items: stretch;
    gap: .5rem;
}
.xco-coupon-row .xco-input { flex: 1 1 auto; min-width: 0; }
/* قالب زیرِ ۵۷۶px همهٔ `.mg-btn`ها را تمام‌عرض می‌کند؛ این‌جا کنارِ ورودی می‌ماند */
.xco-coupon-row .mg-btn {
    flex: 0 0 auto;
    width: auto;
    min-height: 44px;
    padding-inline: 1rem;
    white-space: nowrap;
}
.xco-coupon-applied {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    padding: .55rem .85rem;
    border: 1px dashed rgba(var(--mg-primary-rgb), .35);
    border-radius: var(--mg-radius-sm);
    background: rgba(var(--mg-primary-rgb), .05);
    font-size: .85rem;
    color: var(--mg-text);
}
.xco-coupon-applied strong { color: var(--mg-primary); letter-spacing: .03em; }

/* یادداشت‌های خلاصهٔ سبد */
.xco-gap-note,
.xco-earn-note { margin: 0 0 1rem; }
.xco .mg-loyalty-toggle--cart { margin-bottom: 1rem; }

/* ============================================
   ثبتِ سفارش
   ============================================ */

/* قالب در موبایل هم ۲rem فاصله می‌دهد؛ در صفحهٔ باریک زیاد است */
.xco .mg-checkout-form-section { padding: 1.25rem var(--xco-pad); }
@media (min-width: 768px) {
    .xco .mg-checkout-form-section { padding: 2rem; }
}
.xco .mg-checkout-forms { min-width: 0; }

/* کارت‌های آدرس */
.xco-address-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: .75rem;
}
.xco-address { margin: 0; min-width: 0; }
.xco-address-label {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    height: 100%;
    padding: .9rem 1rem;
    border: 1.5px solid var(--mg-border);
    border-radius: var(--mg-radius);
    background: var(--mg-bg, #fff);
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color .15s, background .15s;
}
.xco-address-label:hover { border-color: rgba(var(--mg-primary-rgb), .45); }
.xco-address.is-selected .xco-address-label,
.xco-address-label:has(input:checked) {
    border-color: var(--mg-primary);
    background: rgba(var(--mg-primary-rgb), .05);
}
.xco-address-label input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: .2rem 0 0;
    accent-color: var(--mg-primary);
    cursor: pointer;
}
.xco-address-body {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    min-width: 0;
}
.xco-address-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .4rem .5rem;
    font-size: .9rem;
    color: var(--mg-text);
}
.xco-address-name { font-size: .84rem; color: var(--mg-text); }
.xco-address-line {
    font-size: .8rem;
    line-height: 1.8;
    color: var(--mg-text-muted);
    overflow-wrap: anywhere;
}
.xco-address noscript .mg-btn,
.xco-address > .mg-btn { margin-top: .5rem; }

/* گزینهٔ ارسال (کارتِ رادیومانند؛ فعلاً فقط نمایشی) */
.xco-option {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .9rem 1rem;
    border: 1.5px solid var(--mg-border);
    border-radius: var(--mg-radius);
    background: var(--mg-bg, #fff);
}
.xco-option.is-selected {
    border-color: var(--mg-primary);
    background: rgba(var(--mg-primary-rgb), .05);
}
.xco-option-mark {
    flex: none;
    width: 20px;
    height: 20px;
    border: 2px solid var(--mg-border);
    border-radius: 50%;
    background: var(--mg-bg, #fff);
    box-sizing: border-box;
}
.xco-option.is-selected .xco-option-mark {
    border-color: var(--mg-primary);
    background: var(--mg-primary);
    box-shadow: inset 0 0 0 3px var(--mg-bg, #fff);
}
.xco-option-body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    gap: .15rem;
    min-width: 0;
    font-size: .9rem;
    color: var(--mg-text);
}
.xco-option-note { font-size: .78rem; color: var(--mg-text-muted); }
.xco-option-price {
    flex: none;
    font-size: .88rem;
    font-weight: 700;
    color: var(--mg-primary);
    white-space: nowrap;
}

/* فهرستِ کالاهای سفارش */
.xco-items {
    margin: 0;
    padding: 0;
    list-style: none;
}
.xco-item {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .75rem 0;
    border-bottom: 1px solid var(--mg-border);
}
.xco-item:first-child { padding-top: 0; }
.xco-item:last-child { border-bottom: 0; padding-bottom: 0; }
@media (min-width: 481px) {
    .xco-item { grid-template-columns: 56px minmax(0, 1fr) auto; gap: .9rem; }
}
.xco-item-thumb {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: var(--mg-radius-sm);
    overflow: hidden;
    background-color: var(--mg-surface);
}
.xco-item-thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.xco-item-body {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    min-width: 0;
}
.xco-item-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    font-size: .88rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--mg-text);
}
.xco-item-meta { font-size: .76rem; color: var(--mg-text-muted); }
.xco-item-total {
    font-size: .88rem;
    font-weight: 700;
    color: var(--mg-text);
    white-space: nowrap;
}
.xco-item-total small {
    font-size: .72rem;
    font-weight: 500;
    color: var(--mg-text-muted);
}

/* دکمهٔ ثبت در ستونِ خلاصه */
.xco-place-form { margin: 1rem 0 0; }

/* ============================================
   رهگیریِ سفارش
   ============================================ */
.xco-narrow { max-width: 820px; }

/* قالب سرِ نوار را برای h3 نوشته؛ این صفحه h2 دارد */
.xco-track .mg-order-tracking-head { flex-wrap: wrap; }
.xco-track .mg-order-tracking-head h2 {
    margin: 0;
    font-size: 1rem;
    color: var(--mg-text);
}
.xco-track .mg-order-tracking--stopped { flex-wrap: wrap; }
.xco-track .mg-order-tracking--stopped span { color: var(--mg-text-muted); font-size: .85rem; }
.xco-track-code { margin: 0 0 1.5rem; }
.xco-track-code strong { overflow-wrap: anywhere; }
.xco-track-timeline .mg-cart-notice { margin-bottom: 0; }

/* خطِ زمانِ رویدادها */
.xco-timeline {
    margin: 0;
    padding: 0;
    list-style: none;
}
.xco-timeline-item {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: .1rem;
    padding-inline-start: 1.75rem;
    padding-bottom: 1.15rem;
}
.xco-timeline-item:last-child { padding-bottom: 0; }
/* نقطه */
.xco-timeline-item::before {
    content: '';
    position: absolute;
    top: .45rem;
    inset-inline-start: .2rem;
    width: .75rem;
    height: .75rem;
    border: 2px solid var(--mg-secondary);
    border-radius: 50%;
    background: var(--mg-bg, #fff);
    box-sizing: border-box;
}
/* خطِ رابط تا نقطهٔ بعدی */
.xco-timeline-item::after {
    content: '';
    position: absolute;
    top: 1.3rem;
    bottom: .1rem;
    inset-inline-start: calc(.575rem - 1px);
    width: 2px;
    border-radius: 2px;
    background: var(--mg-border);
}
.xco-timeline-item:last-child::after { display: none; }
.xco-timeline-item.is-current::before {
    border-color: var(--mg-primary);
    background: var(--mg-primary);
    box-shadow: 0 0 0 4px rgba(var(--mg-primary-rgb), .14);
}
.xco-timeline-label {
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.7;
    color: var(--mg-text);
}
.xco-timeline-item.is-current .xco-timeline-label { color: var(--mg-primary); }
.xco-timeline-date {
    font-size: .76rem;
    color: var(--mg-text-muted);
    white-space: nowrap;
}
@media (min-width: 601px) {
    .xco-timeline-item {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
    }
}

/* ============================================
   درگاهِ آزمایشی (پرداخت / خریدِ اقساطی)
   ============================================ */
/* کارت خودش وسط‌چین است؛ برچسبِ «محیط آزمایشی» یک خطِ جدا بالای نماد */
.xco-pay-sim .mg-ty-card > .xco-pill { margin-bottom: 1.25rem; }
.xco-ty-icon { color: var(--mg-primary); }
.xco-pay-sim .mg-ty-title { font-size: clamp(1.2rem, 4vw, 1.6rem); line-height: 1.6; }
.xco-pay-sim .mg-ty-detail-label { flex-shrink: 0; }
/* `.mg-btn-outline` قالب برای زمینهٔ تیره (متنِ سفید) است؛ روی کارتِ سفید دیده نمی‌شد */
.xco-pay-sim .mg-btn-outline {
    border: 1.5px solid rgba(var(--mg-primary-rgb), .35);
    background: transparent;
    color: var(--mg-primary-dark, var(--mg-primary));
}
.xco-pay-sim .mg-btn-outline:hover {
    border-color: var(--mg-primary);
    background: rgba(var(--mg-primary-rgb), .06);
    color: var(--mg-primary-dark, var(--mg-primary));
}

/* ============================================
   خریدِ اقساطی (بخشی از صفحهٔ سفارش)
   ============================================ */
.xco-credit { margin-block: 1.25rem; }
.xco-credit > .mg-eac-section-desc { line-height: 1.9; }
.xco-credit > .mg-eac-section-desc:last-child { margin-bottom: var(--xco-pad); }
.xco-credit .mg-eac-section-header { flex-wrap: wrap; }

/* برچسبِ وضعیت در انتهای سرِ بخش */
.xco-credit-status { margin-inline-start: auto; }

/* کارت‌های خلاصه (مبلغ کل، پیش‌پرداخت، ضمانت) */
.xco-credit-cards { margin: 1rem var(--xco-pad) 0; }
.xco-credit-cards .mg-vo-card { flex-basis: 150px; }
.xco-card-note {
    font-size: .72rem;
    line-height: 1.6;
    color: var(--mg-text-muted);
}

/* یادداشت‌های تصمیم/ردِ ضمانت */
.xco-credit-notes { margin: 1rem var(--xco-pad) 0; }
.xco-credit-notes .mg-cart-notice { margin-bottom: .5rem; }
.xco-credit-notes .mg-cart-notice:last-child { margin-bottom: 0; }

/* نوعِ ضمانت — fieldset بدونِ قابِ پیش‌فرضِ مرورگر */
.xco-fieldset {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}
.xco-fieldset legend {
    float: none;
    padding: 0;
    margin-bottom: .35rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--mg-text);
}
.xco-radio-list {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.xco-radio {
    display: flex;
    flex: 1 1 220px;
    align-items: center;
    gap: .55rem;
    padding: .65rem .85rem;
    border: 1.5px solid var(--mg-border);
    border-radius: var(--mg-radius-sm);
    background: var(--mg-bg, #fff);
    font-size: .85rem;
    line-height: 1.7;
    color: var(--mg-text);
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.xco-radio:hover { border-color: rgba(var(--mg-primary-rgb), .45); }
.xco-radio:has(input:checked) {
    border-color: var(--mg-primary);
    background: rgba(var(--mg-primary-rgb), .05);
}
.xco-radio input[type="radio"] {
    flex: none;
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--mg-primary);
}

/* خطای فیلد */
.xco-field-error {
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.6;
    color: var(--mg-error, #ef4444);
}

/* دکمه‌های بخش */
.xco-credit-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    padding: 0 var(--xco-pad) var(--xco-pad);
}
.xco-credit > .mg-eac-section-desc + .xco-credit-actions { padding-top: 1rem; }

/* پیش‌نمایشِ اقساط */
.xco-credit-preview { padding: 1rem var(--xco-pad) var(--xco-pad); }
.xco-credit-preview .mg-eac-hint { margin: .5rem 0 0; }
.xco-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--mg-border);
    border-radius: var(--mg-radius-sm);
    -webkit-overflow-scrolling: touch;
}
.xco-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .84rem;
    font-variant-numeric: tabular-nums;
}
.xco-table th,
.xco-table td {
    padding: .6rem .85rem;
    border-bottom: 1px solid var(--mg-border);
    text-align: start;
    white-space: nowrap;
}
.xco-table thead th {
    background: var(--mg-surface);
    font-size: .76rem;
    font-weight: 700;
    color: var(--mg-text-muted);
}
.xco-table tbody tr:last-child td { border-bottom: 0; }
.xco-table td:last-child { font-weight: 700; color: var(--mg-text); }

/* انصراف — جدا از دکمه‌های اصلی، با خطِ بالا */
.xco-credit-cancel {
    margin: 0 var(--xco-pad);
    padding: 1rem 0 var(--xco-pad);
    border-top: 1px solid var(--mg-border);
}

/* ── جمعِ سفارش در صفحهٔ پرداخت: قالب «تومان» را فقط زیرِ `.mg-cp-summary` (سبد) می‌گذارد ── */
.mg-checkout-sidebar .mg-cp-summary-rows .woocommerce-Price-amount::after {
    content: ' تومان';
    margin-inline-start: .25rem;
    font-size: .85em;
    font-weight: inherit;
}

/* ── پیامِ «اطلاع» در همهٔ ویترین با پالتِ سبز، نه آبیِ پیش‌فرضِ قالب (حساب، سفارش، اقساط) ── */
.mg-cart-notice--info { background: rgba(var(--mg-primary-rgb), .07); color: var(--mg-primary); border: 1px solid rgba(var(--mg-primary-rgb), .22); }