/* assets/css/ux.css – élő előnézet, keresési mód, lépésjelző, árazás, Rendeléseim */

/* ---- Keresési mód választó (bárhol / elején / végén) ------- */
.mod-valaszto {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin-top: .6rem;
    font-size: .9rem;
}
.mod-valaszto .mod-cimke { opacity: .8; margin-right: .2rem; }
.mod-valaszto input { position: absolute; opacity: 0; pointer-events: none; }
.mod-valaszto label {
    cursor: pointer;
    padding: .25rem .8rem;
    border-radius: 999px;
    border: 1px solid rgba(15, 39, 68, .25);
    background: #fff;
    color: #0f2744;
    line-height: 1.4;
    user-select: none;
}
.mod-valaszto input:checked + label {
    background: var(--dk-blue, #1d4ed8);
    border-color: var(--dk-blue, #1d4ed8);
    color: #fff;
}
.mod-valaszto input:focus-visible + label { outline: 3px solid rgba(29, 78, 216, .45); outline-offset: 2px; }

/* Sötét (hero) háttéren */
.hero-section .mod-valaszto { color: #fff; }
.hero-section .mod-valaszto label { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.35); color: #fff; }
.hero-section .mod-valaszto input:checked + label { background: #fff; border-color: #fff; color: #0f2744; }

/* ---- Élő előnézet a mező alatt ----------------------------- */
.elonezet-doboz {
    min-height: 1.6rem;
    margin-top: .45rem;
    font-size: .95rem;
    text-align: left;
}
.elonezet-doboz:empty { min-height: 1.6rem; }
.elonezet-halvany { color: #64748b; }
.elonezet-ok      { color: #047857; }
.elonezet-figy    { color: #92400e; }
.elonezet-tul     { color: #b91c1c; }
.hero-section .elonezet-doboz           { color: rgba(255,255,255,.85); text-align: center; }
.hero-section .elonezet-ok              { color: #a7f3d0; }
.hero-section .elonezet-figy            { color: #fde68a; }
.hero-section .elonezet-tul             { color: #fecaca; }
.hero-section .elonezet-halvany         { color: rgba(255,255,255,.7); }

/* ---- Lépésjelző ------------------------------------------- */
.lepesjelzo ol {
    display: flex;
    list-style: none;
    margin: 0 0 1.5rem;
    padding: 0;
    counter-reset: none;
}
.lepesjelzo li {
    flex: 1 1 0;
    position: relative;
    text-align: center;
    color: #94a3b8;
    font-size: .85rem;
}
.lepesjelzo li::before {                 /* összekötő vonal */
    content: '';
    position: absolute;
    top: 1rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: #e2e8f0;
    z-index: 0;
}
.lepesjelzo li:first-child::before { display: none; }
.lepesjelzo .lepes-jel {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 2px solid #cbd5e1;
    background: #fff;
    font-weight: 700;
    color: #64748b;
}
.lepesjelzo .lepes-nev { display: block; margin-top: .3rem; }
.lepesjelzo li.kesz { color: #047857; }
.lepesjelzo li.kesz .lepes-jel { background: #047857; border-color: #047857; color: #fff; }
.lepesjelzo li.kesz::before, .lepesjelzo li.aktiv::before, .lepesjelzo li.hiba::before { background: #047857; }
.lepesjelzo li.aktiv { color: #0f2744; font-weight: 600; }
.lepesjelzo li.aktiv .lepes-jel { border-color: var(--dk-blue, #1d4ed8); background: var(--dk-blue, #1d4ed8); color: #fff; }
.lepesjelzo li.hiba { color: #b91c1c; font-weight: 600; }
.lepesjelzo li.hiba .lepes-jel { border-color: #b91c1c; background: #b91c1c; color: #fff; }

/* ---- Javaslat chipek ("Mások ezt keresték", hasonló szavak) - */
.chip-sor { display: flex; flex-wrap: wrap; gap: .5rem; }
.chip-sor a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .3rem .85rem;
    border-radius: 999px;
    border: 1px solid #cbd5e1;
    background: #fff;
    color: #0f2744;
    text-decoration: none;
    font-size: .9rem;
}
.chip-sor a:hover { border-color: var(--dk-blue, #1d4ed8); color: var(--dk-blue, #1d4ed8); }
.chip-sor .chip-db { color: #64748b; font-size: .8rem; }
.chip-sor .chip-mod { color: #64748b; font-size: .75rem; }

/* ---- Árazás oldal ----------------------------------------- */
.arazas-tabla th, .arazas-tabla td { vertical-align: middle; }
.arazas-tabla td.ar { font-weight: 700; white-space: nowrap; }
.arazas-tabla tr.kiemelt td { background: #eff6ff; }
.arazas-kalkulator { max-width: 28rem; }
.arazas-kalkulator output { font-size: 1.4rem; font-weight: 700; }

/* ---- Rendeléseim ------------------------------------------ */
.rendeles-kartya + .rendeles-kartya { margin-top: 1rem; }
.rendeles-kartya .badge { font-weight: 600; }
.honeypot { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; }

/* Hero: a dekorációs réteg ne takarja a keresőt (a theme.css-ben is szerepel) */
.hero-section::before { pointer-events: none; z-index: 0; }
.hero-section > .container { position: relative; z-index: 1; }

/* SEO aloldal: morzsamenü sötét háttéren */
.hero-section .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,.55); }