/* ==========================================================================
   Step indicator — canonical multi-step progress UI for forms i wizard flows.
   Replaces ad-hoc .step-indicator + .step-item + .step-number klase koje
   su živele u my-ads.css za /my-ads/new / edit / images.

   Anatomy:
     .step-indicator                  — container (horizontal flex row)
       .step-indicator__item          — single step (auto-grow flex 1)
         .step-indicator__num         — circle sa brojem ili check ikonom
         .step-indicator__label       — caption tekst

   Modifiers (na __item):
     --active     — trenutni korak (terracotta accent, ink label)
     --completed  — prethodni korak (terracotta filled num sa check)
     --upcoming   — budući korak (hairline num, taupe label)
   ========================================================================== */

.step-indicator {
    display: flex;
    align-items: stretch;
    gap: 0;
    margin: 0 0 clamp(20px, 3vw, 32px);
    background: var(--warm-white);
    border: 1px solid var(--hairline);
    border-radius: 0;
}

.step-indicator__item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px 18px;
    position: relative;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--taupe);
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s, background-color 0.2s;
}

/* Hairline divider između step-ova (osim poslednjeg) */
.step-indicator__item + .step-indicator__item {
    border-left: 1px solid var(--hairline);
}

/* --- Numeral circle ---------------------------------------------------- */
.step-indicator__num {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--hairline-strong);
    color: var(--taupe);
    font-family: var(--font-display);
    font-feature-settings: "tnum" 1;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
    font-size: 0.95rem;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.step-indicator__label {
    line-height: 1.2;
}

/* --- States ------------------------------------------------------------ */

/* Active = current step */
.step-indicator__item--active {
    color: var(--ink);
    border-bottom-color: var(--terracotta);
    background: var(--cream);
}

.step-indicator__item--active .step-indicator__num {
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: var(--warm-white);
}

/* Completed = past step */
.step-indicator__item--completed {
    color: var(--terracotta);
    border-bottom-color: var(--terracotta);
}

.step-indicator__item--completed .step-indicator__num {
    background: var(--terracotta);
    border-color: var(--terracotta);
    color: var(--warm-white);
}

/* Upcoming = future step (default, but explicit selector for clarity) */
.step-indicator__item--upcoming {
    color: var(--taupe);
}

.step-indicator__item--upcoming .step-indicator__num {
    background: transparent;
    border-color: var(--hairline-strong);
    color: var(--taupe);
}

/* --- Responsive -------------------------------------------------------- */
@media (max-width: 560px) {
    .step-indicator {
        flex-direction: column;
    }

    .step-indicator__item + .step-indicator__item {
        border-left: none;
        border-top: 1px solid var(--hairline);
    }

    .step-indicator__item {
        justify-content: flex-start;
    }
}