/* =============================================================================
   far360 — JELENTKEZÉSI VARÁZSLÓ: lépésjelző és résztvevő-sorok.

   A lépésjelző ÜVEG-pirula-sor: ez kezelőszerv-jellegű állapotjelzés, a rendszer
   egyik kevés (3-4) megengedett üvegrétege egy nézetben. A sorszámok DM Mono.
   Maga a varázsló munkafelület — dekoratív formák IDE NEM kerülnek (DESIGN.md).
   ============================================================================= */
.f-wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    list-style: none;
    padding: 0;
    margin: 0 0 2.5rem;
}

.f-wizard-steps li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    min-height: 40px;
    padding: 0.3rem 1rem 0.3rem 0.3rem;
    border-radius: var(--f-radius-chip);
    background: var(--glass-secondary);
    border: 1px solid var(--glass-line-soft);
    backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
    -webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(var(--glass-saturate));
    box-shadow: inset 0 1px 0 var(--glass-edge), var(--glass-depth-1);
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--f-grey);
    transition: background-color .2s var(--f-ease), border-color .2s var(--f-ease),
                color .2s var(--f-ease);
}

.f-wizard-steps .f-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--f-light);
    border: 2px solid var(--f-border);
    font-family: var(--f-font-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--f-grey);
}

.f-wizard-steps li.aktiv {
    color: var(--f-ink);
    background: rgba(58, 43, 214, .10);
    border-color: rgba(58, 43, 214, .40);
}
.f-wizard-steps li.aktiv .f-step-num {
    background: var(--f-primary);
    border-color: var(--f-primary);
    color: var(--f-white);
}

.f-wizard-steps li.kesz {
    color: var(--f-ink);
    border-color: var(--glass-line-soft);
}
.f-wizard-steps li.kesz .f-step-num {
    background: var(--f-black);
    border-color: var(--f-black);
    color: var(--f-white);
}

/* Az elválasztó dekoratív (aria-hidden a jelölésben) — nem üveg, csak vonal. */
.f-wizard-steps .f-step-elvalaszto {
    width: 32px;
    height: 2px;
    min-height: 0;
    padding: 0;
    flex-shrink: 0;
    background: var(--f-border);
    border: 0;
    border-radius: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
   Résztvevő-sorok (2. lépés és a kézi felvitel)
   ----------------------------------------------------------------------------- */
.f-resztvevo-sor {
    position: relative;
    margin-bottom: 1rem;
    padding: 1.25rem;
    background: var(--f-light);
    border: 1px solid var(--f-border);
    border-radius: var(--f-radius-md);
}
.f-resztvevo-sor__cim {
    margin-bottom: 1rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--f-ink);
}
.f-resztvevo-sor__torles {
    position: absolute;
    top: 1rem;
    right: 1rem;
}

/* -----------------------------------------------------------------------------
   TELEFONOS ALAK (merve 2026-09-26, 375x812).

   V-1 — A lepesjelzo masodik soraban egy sehova nem vezeto osszekoto vonal logott:
   a .f-wizard-steps doboza 343x90 px, az elso elvalaszto x=258-nal, az ELSO SOR
   VEGEN, az ures helyen allt (az „1 Szerzodo adatai" pirula 163, a „2 Resztvevok"
   135, a „3 Osszegzes" 131 px — 429 px nem fer el 343-ban). Nem eleg az elvalasztot
   elrejteni: a harom pirula igy is ket sorba tordelodne, csak vonal nelkul. A
   flex: 1 1 100% harom, egymas alatti, teljes szelessegu pirulat ad — ugyanaz a
   vizualis logika, mint asztali gepen, csak fuggolegesen.
   A _LepesJelzo.cshtml jelolese NEM valtozik (az aria-hidden="true" elvalaszto
   display:none-nal is helyesen viselkedik a felolvasonal).

   V-5 — Az elsodleges „Tovabb" gomb 102x44 px volt a lap aljan. A column-reverse
   szandekos: telefonon az elsodleges muvelet keruljon FELULRE, a hüvelykujjhoz
   kozelebb, a „Vissza" ala. Miert itt es nem a buttons.css-ben: a buttons.css 194
   sor (a 200-as korlat alatt 6 sor a tartalek), es ez a varazslo sajat
   gomb-viselkedese, nem altalanos gombszabaly.
   ----------------------------------------------------------------------------- */
@media (max-width: 560px) {
    .f-wizard-steps {
        justify-content: flex-start;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }
    .f-wizard-steps .f-step-elvalaszto { display: none; }
    .f-wizard-steps li { flex: 1 1 100%; }

    .f-wizard-muveletek {
        display: flex;
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    .f-wizard-muveletek .btn-f,
    .f-wizard-muveletek .btn-f-outline { width: 100%; }
}