.cart-table {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.cart-row {
    display: grid;
    grid-template-columns: 80px 1fr auto auto auto;
    align-items: center;
    gap: var(--space-sm);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm);
}

.cart-row__image {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

.cart-row__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cart-row__name {
    font-weight: 700;
}

.cart-row__variation {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-text-light);
    font-size: 0.8rem;
}

.cart-variation-swatch {
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    flex-shrink: 0;
}

.cart-variation-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: var(--radius-sm);
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    font-size: 0.75rem;
    line-height: 1.6;
}

.cart-row__price {
    color: var(--color-text-light);
    font-size: 0.85rem;
}

.cart-row__quantity-form {
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

.cart-row__quantity-label {
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.cart-row__quantity-input {
    width: 60px;
    padding: 4px 6px;
    text-align: center;
}

.cart-row__subtotal {
    font-weight: 700;
    color: var(--color-primary-dark);
    white-space: nowrap;
}

.cart-row__remove {
    color: var(--color-danger);
    font-size: 1.1rem;
}

.discount-panel {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

/*
 * موقع درخواست AJAX (اعمال/حذف کد تخفیف، تغییر روش ارسال - cart-ajax.js)
 * روی پنل مربوطه و روی خلاصه‌ی سبد کلاس is-loading اضافه می‌شه: محتوا
 * کمی کمرنگ و غیرقابل‌کلیک می‌شه تا معلوم باشه درخواست در حال پردازشه،
 * بدون این‌که کل صفحه رفرش بشه.
 */
.discount-panel.is-loading,
.cart-summary.is-loading {
    opacity: 0.55;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.discount-panel__form {
    display: flex;
    gap: var(--space-sm);
}

.discount-panel__form .form-control {
    flex: 1;
}

.discount-panel__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

.cart-summary {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-md);
}

.cart-summary__lines {
    display: flex;
    flex-direction: column;
    gap: 6px;
    color: var(--color-text-light);
    font-size: 0.9rem;
}

.cart-summary__line {
    display: flex;
    justify-content: space-between;
}

.cart-summary__line--discount {
    color: var(--color-danger);
    font-weight: 700;
}

.cart-summary__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
}

.cart-actions {
    display: flex;
    justify-content: space-between;
    gap: var(--space-sm);
}

.checkout-layout {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: var(--space-lg);
    align-items: start;
}

.checkout-form-wrapper {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
}

/* انتخاب روش پرداخت: هر روش یک کارت جدا با آیکون بالا و متن پایین است.
   با کلیک روی هر کدوم، رادیوی مخفی داخلش checked می‌شه و جاوااسکریپت
   (payment-method-select.js) کلاس is-selected رو جابه‌جا می‌کنه تا فقط
   دور کارت انتخاب‌شده رنگی بشه. */
.payment-gateways {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.payment-gateway-option {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 108px;
    padding: 14px 10px;
    border: 2px solid var(--color-border);
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.payment-gateway-option:hover {
    border-color: var(--color-primary);
}

.payment-gateway-option.is-selected {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(20, 20, 20, 0.15);
}

.payment-gateway-option__input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    pointer-events: none;
}

.payment-gateway-option__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--color-text-light);
}

.payment-gateway-option.is-selected .payment-gateway-option__icon {
    color: var(--color-primary);
}

.payment-gateway-option__icon svg,
.payment-gateway-option__icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.payment-gateway-option__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-text);
}

.payment-gateway-option.is-selected .payment-gateway-option__label {
    color: var(--color-primary-dark);
}

.payment-gateway-option__input:focus-visible ~ .payment-gateway-option__icon {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

.form-hint {
    font-size: 0.8rem;
    color: var(--color-text-light);
    margin-top: 4px;
}

.checkout-summary {
    background-color: var(--color-surface);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    padding: var(--space-md);
    position: sticky;
    top: 90px;
}

.checkout-summary__row {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: var(--color-text-light);
}

.checkout-summary__total {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.1rem;
    border-top: 1px solid var(--color-border);
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
    color: var(--color-primary-dark);
}

.checkout-summary__row--discount {
    color: var(--color-danger);
    font-weight: 700;
}

.discount-panel--checkout {
    box-shadow: none;
    padding: var(--space-sm) 0;
    margin-bottom: 0;
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    border-radius: 0;
}

.checkout-success {
    text-align: center;
    max-width: 560px;
    margin: 0 auto;
}

.checkout-success__icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
}

.checkout-success__items {
    text-align: right;
    margin: var(--space-md) 0;
}

@media (max-width: 900px) {
    .checkout-layout {
        grid-template-columns: 1fr;
    }

    .cart-row {
        grid-template-columns: 60px 1fr;
        grid-template-areas:
            "image info"
            "image quantity"
            "image subtotal"
            "image remove";
    }

    /*
        The rule above names 5 grid areas, but nothing assigned any child
        to them - browsers ignore the names without a matching grid-area,
        so children fell back to implicit auto-placement (2 columns,
        filled row by row) instead of the intended "image column stays
        put, everything else stacks beside it" layout. Wiring these up so
        the mobile cart row actually renders as designed.
    */
    .cart-row__image { grid-area: image; }
    .cart-row__info { grid-area: info; }
    .cart-row__quantity-form { grid-area: quantity; }
    .cart-row__subtotal { grid-area: subtotal; }
    .cart-row__remove-form { grid-area: remove; }
}