/* ============================================================
   step-tracker.css — نوار وضعیت سفارش (پنل مشتری، بعداً چک‌اوت)
   نسخه‌ی کارکردی؛ پولیش گرافیک نهایی بعداً انجام می‌شه.
   ============================================================ */

.step-tracker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    direction: rtl;
}

.step-pill {
    position: relative;
    z-index: calc(20 - var(--i));
    margin-inline-start: -18px;
    padding: 10px 26px;
    border-radius: 999px;
    background: #e7e7e7;
    color: #6b6b6b;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    cursor: default;
    transition: background .25s ease, color .25s ease, transform .2s ease;
}

.step-pill:first-child {
    margin-inline-start: 0;
}

.step-pill--done {
    background: #1a9c5c;
    color: #fff;
}

.step-pill--current.step-pill--green {
    background: #1a9c5c;
    color: #fff;
}

.step-pill--current.step-pill--yellow {
    background: #e0a800;
    color: #241c00;
}

.step-pill--current.step-pill--red {
    background: #d93025;
    color: #fff;
}

.step-pill--future {
    background: #e7e7e7;
    color: #8a8a8a;
}

.step-pill--clickable {
    cursor: pointer;
}

.step-pill--clickable:hover {
    transform: translateY(-2px);
}

.step-pill__text {
    display: block;
    transition: opacity .2s ease, transform .2s ease;
}

.step-pill__text--hover {
    display: none;
}

.step-pill--clickable:hover .step-pill__text--normal {
    display: none;
}

.step-pill--clickable:hover .step-pill__text--hover {
    display: block;
}

.step-tracker__reveal {
    flex-basis: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .25s ease;
}

.step-tracker__reveal.is-open {
    max-height: 60px;
    margin-top: 10px;
}

.step-tracker__code {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 10px;
    background: #f2f2f2;
    font-size: 13px;
}

.step-tracker--cancelled {
    display: inline-block;
    padding: 10px 20px;
    border-radius: 10px;
    background: #d93025;
    color: #fff;
    font-size: 13px;
}