/* ==========================================================================
   Order status badge — storefront
   Coloured pill + icon per order status, used in the account order list
   and order detail pages.
   ========================================================================== */

.order-status-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem 1.1rem;
    border-radius: 999px;
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: .01em;
    white-space: nowrap;
    border: 1px solid transparent;
}

.order-status-badge > i {
    font-size: 1.1rem;
}

/* Pending — awaiting handling */
.order-status-badge--pending {
    background: #fff4e0;
    color: #a6650a;
    border-color: #f4d19a;
}

/* Confirmed / Processing — in progress */
.order-status-badge--confirmed,
.order-status-badge--processing {
    background: #e6f0fb;
    color: #1a5fa8;
    border-color: #b9d5f0;
}

/* Shipped — on its way */
.order-status-badge--shipped {
    background: #eae6fb;
    color: #5b3fb0;
    border-color: #ccc0ef;
}

/* Delivered — done */
.order-status-badge--delivered {
    background: #e4f5ea;
    color: #1f7a44;
    border-color: #b5e0c5;
}

/* Cancelled / Refunded — stopped */
.order-status-badge--cancelled,
.order-status-badge--refunded {
    background: #fce8e6;
    color: #b02a1f;
    border-color: #f2c1bc;
}