/* SalonBuilder – onboarding-varázsló (F-08). CSAK a tokenek.css változóira épül (docs/04_DIZAJN_TERV.md).
   Egyoszlopos, telefonra tervezett. A lakk szín egy képernyőn csak a „Tovább” / „Szalon létrehozása” gombon van. */

.varazslo {
    max-width: 36rem;
    margin: 0 auto;
}

.varazslo h1 {
    font-size: var(--meret-2xl);
    margin-bottom: var(--ter-2);
}

.varazslo .bevezeto {
    color: var(--fust);
    margin-bottom: var(--ter-5);
}

/* ---------- Lépésjelző (valódi sorrend, ezért számozott) ---------- */
.lepesjelzo {
    display: flex;
    gap: var(--ter-2);
    margin: 0 0 var(--ter-3);
    padding: 0;
    list-style: none;
}

.lepes-pont {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    border-radius: var(--sugar-blokk);
    background: var(--feher);
    box-shadow: inset 0 0 0 1px var(--hatar);
    color: var(--fust);
    font-family: var(--betu-cim);
    font-variant-numeric: tabular-nums;
    font-weight: 700;
}

.lepes-kesz {
    background: var(--zsalya);
    box-shadow: none;
    color: var(--tinta);
}

.lepes-aktualis {
    background: var(--tinta);
    box-shadow: none;
    color: var(--porcelan);
}

.lepes-szamlalo {
    margin: 0 0 var(--ter-5);
    color: var(--fust);
    font-size: var(--meret-s);
}

/* ---------- Űrlap ---------- */
.varazslo-urlap {
    max-width: none;
    gap: var(--ter-5);
}

.varazslo .mezo select {
    width: 100%;
    min-height: 44px;
    padding: var(--ter-2) var(--ter-3);
    border: 1px solid var(--fust);
    border-radius: var(--sugar);
    background: var(--feher);
    color: var(--tinta);
    font: inherit;
}

.varazslo .mezo select[aria-invalid="true"],
.varazslo .mezo input[type="file"][aria-invalid="true"] {
    border: 2px solid var(--lakk);
}

.varazslo .mezo input[type="file"] {
    padding: var(--ter-3);
}

.mezo-segito {
    margin: 0;
    color: var(--fust);
    font-size: var(--meret-s);
}

.reszcim {
    margin: var(--ter-3) 0 0;
    font-size: var(--meret-xl);
}

.urlap-hiba {
    margin: 0 0 var(--ter-5);
}

/* Jelölőnégyzetek: legalább 44 px magas érintési felület */
.jelolo {
    display: flex;
    align-items: center;
    gap: var(--ter-3);
    min-height: 44px;
    cursor: pointer;
}

.jelolo input {
    flex: 0 0 auto;
    width: 1.5rem;
    height: 1.5rem;
    margin: 0;
    accent-color: var(--tinta);
}

.hozzajarulasok {
    display: grid;
    gap: var(--ter-2);
}

.mezo-jelolo .mezo-hiba {
    margin-top: var(--ter-1);
}

/* ---------- Webcím ---------- */
.slug-sor {
    display: flex;
    align-items: stretch;
    gap: var(--ter-2);
}

.slug-sor input {
    flex: 1 1 8rem;
    min-width: 0;
}

.slug-vegzodes {
    display: inline-flex;
    align-items: center;
    max-width: 55%;
    color: var(--fust);
    overflow-wrap: anywhere;
}

.slug-allapot {
    min-height: 1.55em;
    margin: 0;
    font-weight: 600;
}

.slug-allapot.slug-szabad {
    padding-left: var(--ter-3);
    border-left: 3px solid var(--zsalya);
}

.slug-allapot.slug-hiba {
    padding-left: var(--ter-3);
    border-left: 3px solid var(--lakk);
}

.elonezet {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ---------- Nyitvatartás ---------- */
.napok {
    margin: 0;
    padding: 0;
    border: 0;
}

.nap-sor {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--ter-2) var(--ter-3);
    padding: var(--ter-3) 0;
    border-top: 1px solid var(--hatar);
}

.nap-sor:last-child {
    border-bottom: 1px solid var(--hatar);
}

.nap-nev {
    font-weight: 600;
}

.nap-sor .jelolo {
    grid-column: 2;
    grid-row: 1;
}

.nap-idok {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: var(--ter-2);
}

.nap-idok input {
    flex: 1 1 0;
    min-width: 0;
    min-height: 44px;
    padding: var(--ter-2) var(--ter-3);
    border: 1px solid var(--fust);
    border-radius: var(--sugar);
    background: var(--feher);
    color: var(--tinta);
    font: inherit;
    font-variant-numeric: tabular-nums;
}

.nap-idok input[aria-invalid="true"] {
    border: 2px solid var(--lakk);
}

.nap-sor:has(.zarva-jelolo:checked) .nap-idok {
    opacity: 0.45;
}

.nap-hiba {
    grid-column: 1 / -1;
    grid-row: 3;
}

/* ---------- Ismétlődő sorok (szolgáltatás, munkatárs) ---------- */
.sorok {
    display: grid;
}

.sor {
    display: grid;
    gap: var(--ter-3);
    padding: var(--ter-4) 0;
    border-top: 1px solid var(--hatar);
}

.sor:last-child {
    border-bottom: 1px solid var(--hatar);
}

.sor-ketto {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ter-3);
}

.link-gomb {
    justify-self: start;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--tinta);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 0.2em;
    cursor: pointer;
}

.szolg-valaszto {
    margin: 0;
    padding: 0;
    border: 0;
}

.szolg-valaszto legend {
    padding: 0;
    font-weight: 600;
}

[data-sor-hozzaad] {
    justify-self: start;
}

/* ---------- Arculat és belépés ---------- */
.osszegzo {
    display: grid;
    gap: var(--ter-1);
    margin: 0;
    padding: var(--ter-4);
    border-radius: var(--sugar);
    background: var(--pir);
}

.osszegzo div {
    display: grid;
    grid-template-columns: 6.5rem 1fr;
    gap: var(--ter-1) var(--ter-3);
}

.osszegzo dt {
    color: var(--fust);
}

.osszegzo dd {
    margin: 0;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.szinek {
    display: grid;
    gap: var(--ter-3);
    margin: 0;
    padding: 0;
    border: 0;
}

.szinek legend {
    padding: 0;
    font-weight: 600;
}

.szin-lista {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--ter-2);
}

.szin-valaszto {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ter-1);
    min-height: 44px;
    padding: var(--ter-2);
    border-radius: var(--sugar);
    cursor: pointer;
    text-align: center;
}

.szin-valaszto input {
    position: absolute;
    opacity: 0;
    inset: 0;
    margin: 0;
    cursor: pointer;
}

.szin-minta {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    box-shadow: inset 0 0 0 2px var(--feher), 0 0 0 1px var(--fust);
}

.szin-valaszto input:checked ~ .szin-minta {
    box-shadow: inset 0 0 0 2px var(--feher), 0 0 0 3px var(--tinta);
}

.szin-valaszto input:checked ~ .szin-nev {
    font-weight: 600;
}

.szin-valaszto input:focus-visible ~ .szin-minta {
    outline: var(--fokusz);
    outline-offset: var(--fokusz-eltolas);
}

.szin-nev {
    font-size: var(--meret-s);
}

/* A hexek a SzinPaletta.Lista (C#) értékei; a kettőnek együtt kell változnia. */
.szin-0 { background: #1F3A5F; }
.szin-1 { background: #7A2E6B; }
.szin-2 { background: #2F6B4F; }
.szin-3 { background: #B4532A; }
.szin-4 { background: #6B4FA3; }
.szin-5 { background: #B02F6B; }

/* ---------- Navigációs gombok ---------- */
.varazslo-gombok {
    display: flex;
    flex-wrap: wrap-reverse;
    justify-content: space-between;
    gap: var(--ter-3);
    margin-top: var(--ter-3);
}

.varazslo-gombok .gomb {
    flex: 1 1 10rem;
}

.varazslo-gombok .gomb:only-child {
    flex-basis: 100%;
}

.varazslo-urlap .gomb[disabled] {
    opacity: 0.7;
    cursor: progress;
}

/* ---------- „Kész” oldal ---------- */
.kesz h2 {
    margin-top: var(--ter-6);
    font-size: var(--meret-xl);
}

.kesz-lepesek {
    margin: 0 0 var(--ter-5);
    padding: 0 0 0 var(--ter-5);
}

.kesz-lepesek li {
    margin-bottom: var(--ter-3);
    padding-left: var(--ter-1);
}

.kesz-cim {
    overflow-wrap: anywhere;
}

@media (min-width: 40rem) {
    .nap-sor {
        grid-template-columns: 8rem 1fr auto;
    }

    .nap-idok {
        grid-column: 2;
        grid-row: 1;
    }

    .nap-sor .jelolo {
        grid-column: 3;
    }

    .szin-lista {
        grid-template-columns: repeat(6, 1fr);
    }

    .varazslo-gombok {
        flex-wrap: nowrap;
    }

    .varazslo-gombok .gomb {
        flex: 0 1 auto;
        min-width: 10rem;
    }

    .varazslo-gombok .gomb:only-child {
        flex-basis: auto;
        margin-left: auto;
    }
}