/* =============================================================
   COMPONENT / ORDER-STATUS-LIST
   
   Горизонтальный трекер статусов заказа.
   Шесть шагов, соединённых полоской с точками.
   ============================================================= */

section.order-status-list {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    background-color: var(--bg-page);
    margin: 0 calc(-1 * var(--space-5)) var(--space-5);
    z-index: var(--z-dropdown);
}

section.order-status-list div {
    display: grid;
    grid-template-rows: 40px 36px 28px;
    text-align: center;
}

section.order-status-list status * {
    width: -webkit-fill-available;
}

section.order-status-list :is(status, time, small) {
    display: block;
    place-content: center;
}

section.order-status-list status {
    position: relative;
    border-bottom: .275rem solid var(--border-default);
}

section.order-status-list status.isset {
    border-bottom: .275rem solid;
}

/* Точка на линии */
section.order-status-list status::after {
    position: absolute;
    content: '';
    bottom: -10px;
    left: calc(50% - 8px);
    width: 16px;
    height: 16px;
    background-color: var(--bg-page);
    border: .275rem solid var(--border-default);
    border-radius: var(--radius-full);
}

section.order-status-list status.isset::after {
    border: .275rem solid;
}

/* Отмена — на всю ширину */
section.order-status-list canceled {
    display: flex;
    gap: var(--space-5);
    width: 100%;
    grid-column: 1 / end;
    color: var(--red-900);
    background-color: var(--red-300);
    border: 1px solid var(--red-500);
    padding: var(--space-4);
}