/* Shared purchase progress for Cart and Classic Checkout.
 * This file is intentionally the single visual source of truth for both pages.
 */
.msc-purchase-steps {
    display: grid !important;
    grid-template-columns: 1fr minmax(28px, 64px) 1fr minmax(28px, 64px) 1fr !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 14px 22px 22px !important;
    border-bottom: 1px solid var(--msc-border, #e6e9ef) !important;
    direction: rtl;
}

.msc-purchase-steps .msc-step {
    appearance: none;
    -webkit-appearance: none;
    border: 0 !important;
    margin: 0 !important;
    padding: 6px !important;
    min-width: 0;
    background: transparent !important;
    color: #8b8f98 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    font: inherit;
    font-size: 12px !important;
    line-height: 1.5 !important;
    text-align: center;
    transition: color .2s ease;
}

.msc-purchase-steps button.msc-step,
.msc-purchase-steps a.msc-step {
    cursor: pointer;
}

.msc-purchase-steps .msc-step-icon {
    display: grid !important;
    place-items: center !important;
    width: 27px !important;
    height: 27px !important;
    flex: 0 0 27px;
    color: inherit;
}

.msc-purchase-steps .msc-step-icon svg {
    display: block;
    width: 23px !important;
    height: 23px !important;
    max-width: none !important;
    max-height: none !important;
}

.msc-purchase-steps .msc-step.is-active {
    color: var(--msc-text, #17191f) !important;
    font-weight: 700 !important;
}

.msc-purchase-steps .msc-step.is-active .msc-step-icon,
.msc-purchase-steps .msc-step.is-complete .msc-step-icon {
    color: var(--msc-primary, #0f4cff) !important;
}

.msc-purchase-steps .msc-step.is-complete {
    color: var(--msc-primary, #0f4cff) !important;
    font-weight: 600 !important;
}

.msc-purchase-steps a.msc-step:hover {
    color: var(--msc-primary, #0f4cff) !important;
}

.msc-purchase-steps .msc-step-line {
    display: block !important;
    width: 100%;
    height: 1px !important;
    margin: 0 !important;
    border: 0 !important;
    border-top: 1px dashed #c8cbd3 !important;
    transition: border-color .2s ease;
}

.msc-purchase-steps .msc-step-line.is-complete {
    border-top-color: var(--msc-primary, #0f4cff) !important;
}

@media (max-width: 640px) {
    .msc-purchase-steps {
        grid-template-columns: 1fr minmax(18px, 40px) 1fr minmax(18px, 40px) 1fr !important;
        gap: 3px !important;
        padding: 14px 12px !important;
    }

    .msc-purchase-steps .msc-step {
        padding-inline: 1px !important;
        font-size: 10px !important;
    }

    .msc-purchase-steps .msc-step-icon {
        width: 25px !important;
        height: 25px !important;
        flex-basis: 25px;
    }

    .msc-purchase-steps .msc-step-icon svg {
        width: 21px !important;
        height: 21px !important;
    }
}