/* Huni terméktöltő — 3. kör: SORREND és KIEMELÉS-HIERARCHIA.
   Roland kérése alapján a felépítés MINDHÁROM verzióban ugyanaz:

     bal:    fő kép + galéria
     közép:  Készletező (HALK, csak a terméknév emelkedik ki)
             → ✦ AI besorolás (HANGOS, minden mező fontos)
             → Munkatárs által megerősítendő (HANGOS)
     jobb:   ✦ AI szövegek (HALK) → ✦ AI SEO (HALK)
             → AI VÉLEMÉNY (zöld / sárga / piros)

   A három verzió abban tér el, hogy MITŐL lesz valami „hangos" vagy „halk":
     V7 jelenléttől (van-e egyáltalán kártya)  ·  V8 mezőnkénti kiemeléstől  ·
     V9 mélységtől (kiemelkedik vagy besüllyed). */

:root{
  --kek:#415695; --narancs:#ff6600;
  --kek-900:#2b3a66; --kek-700:#3a4d84; --kek-600:#51689f;
  --kek-100:#dfe5f3; --kek-50:#eef1f8; --kek-25:#f6f8fc;
  --zold:#177537; --zold-50:#e8f4ec; --zold-200:#b9dcc6;
  --sarga:#946100; --sarga-50:#fdf4e3; --sarga-200:#efd9a8;
  --piros:#b3261e; --piros-50:#fdecea; --piros-200:#f3c4c0;
  --lap:#fff; --papir:#f4f6fa; --papir-2:#e9edf5;
  --szoveg:#131a2c; --halvany:#5f6880; --halvanyabb:#8b93a7;
  --keret:#e2e6f0; --keret-2:#d3d9e8;
  --arny-1:0 1px 2px rgba(19,26,44,.05);
  --arny-2:0 3px 12px rgba(19,26,44,.08);
  --arny-3:0 12px 34px rgba(19,26,44,.16);
}

*{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--papir);color:var(--szoveg);
  font-family:Poppins,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:13px;line-height:1.45;-webkit-font-smoothing:antialiased;
  display:grid;grid-template-rows:46px 1fr 56px}
button{font:inherit;color:inherit;cursor:pointer}
img{display:block;max-width:100%}

/* ── prezenter-sáv ─────────────────────────────────────────────────── */
.valto{position:fixed;left:50%;transform:translateX(-50%);top:8px;z-index:90;
  display:flex;align-items:center;gap:3px;padding:4px;background:rgba(19,26,44,.9);
  backdrop-filter:blur(10px);border-radius:999px;box-shadow:var(--arny-3);white-space:nowrap}
.valto a{display:block !important;padding:6px 13px;border-radius:999px;text-decoration:none;
  color:rgba(255,255,255,.6);font-size:12px;font-weight:600}
.valto a:hover{color:#fff}
.valto a.itt{background:#fff;color:var(--szoveg)}
.valto b{padding:0 8px 0 10px;color:rgba(255,255,255,.4);font-size:10px;font-weight:600;
  letter-spacing:.6px;text-transform:uppercase}

/* ── fejléc ────────────────────────────────────────────────────────── */
.fej{display:flex;align-items:center;gap:11px;padding:0 14px;background:var(--lap);
  border-bottom:1px solid var(--keret);min-width:0}
.fej h1{margin:0;font-size:15px;letter-spacing:-.2px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:34%;flex:none}
.fej .azon{color:var(--halvanyabb);font-size:11.5px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis}
.fej .jobb{margin-left:auto;display:flex;align-items:center;gap:10px;flex:none}
.fej .hany{font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--halvany)}
.fej .sin{width:88px;height:4px;border-radius:99px;background:var(--papir-2);overflow:hidden}
.fej .sin i{display:block;height:100%;background:var(--kek);transition:width .25s}

/* ── váz ───────────────────────────────────────────────────────────── */
.fal{display:grid;gap:9px;padding:9px;min-height:0;
  grid-template-columns:minmax(290px,1.02fr) minmax(300px,1.08fr) minmax(340px,1.32fr)}
.oszlop{display:flex;flex-direction:column;gap:9px;min-height:0;min-width:0}

/* ── galéria ───────────────────────────────────────────────────────── */
.kepkartya{background:var(--lap);border:1px solid var(--keret);border-radius:12px;
  padding:8px;display:flex;flex-direction:column;flex:1;min-height:0;box-shadow:var(--arny-1)}
.fokep{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}
.fokep img{max-width:100%;max-height:100%;object-fit:contain}
.fokep .jel{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:999px;
  background:rgba(65,86,149,.92);color:#fff;font-size:10.5px;font-weight:600}
.fokep .szam{position:absolute;right:8px;bottom:8px;padding:3px 9px;border-radius:999px;
  background:rgba(19,26,44,.7);color:#fff;font-size:11px;font-variant-numeric:tabular-nums}
.csik{display:flex;gap:5px;margin-top:8px;flex:none}
.csik img{width:calc((100% - 25px)/6);height:42px;object-fit:cover;border-radius:7px;
  border:2px solid transparent;cursor:pointer;flex:none}
.csik img:hover{border-color:var(--keret-2)}
.csik img.itt{border-color:var(--kek)}
.kepgombok{display:flex;gap:6px;margin-top:7px;flex:none}
.kepgombok .g{flex:1}

/* ── blokk-alap (a KIEMELÉST minden verzió maga oldja meg) ─────────── */
.b{border-radius:12px;padding:10px 13px;display:flex;flex-direction:column;
  min-height:0;min-width:0}
.bf{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;flex:none}
.bf .c{display:inline-flex;align-items:center;gap:5px;padding:2px 8px;border-radius:999px;
  font-size:10.5px;font-weight:600}
.bf em{font-style:normal;margin-left:auto;font-size:10.5px;text-align:right}

/* ⭐ MAGYAR / ANGOL kapcsoló az AI-blokkok fejlécében (Roland, 2026-09-03).
   A blokk-fejléc jobb szélén ül, hogy a cím és a nyelv egy sorban legyen. */
.anyelv{margin-left:auto;display:inline-flex;gap:2px;background:var(--papir-2);
  border-radius:999px;padding:2px}
.anyelv button{border:0;background:none;border-radius:999px;padding:3px 9px;
  font-size:10.5px;font-weight:600;color:var(--halvany);cursor:pointer;
  font-family:inherit;line-height:1.5}
.anyelv button.itt{background:var(--lap);color:var(--kek);box-shadow:var(--arny-1)}
.anyelv button:focus-visible{outline:2px solid var(--kek);outline-offset:1px}
.aures{font-size:11.5px;color:var(--halvany);background:var(--papir-2);
  border-radius:8px;padding:7px 10px;margin-bottom:6px;line-height:1.45}

.s{display:grid;grid-template-columns:86px 1fr;gap:8px;padding:3px 0;align-items:baseline}
.s>i{font-style:normal;font-size:11.5px}
.s>span{min-width:0}
.ird{display:block;border:1px solid transparent;border-radius:5px;padding:1px 5px;
  margin:-1px -5px;cursor:text}
.ird:hover{border-color:var(--keret-2)}
.ird:focus{outline:0;border-color:var(--kek);background:var(--lap)}

/* ── megerősítendő vezérlők ────────────────────────────────────────── */
.tipus{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.tipus button{padding:8px 6px;border:1.5px solid var(--keret-2);border-radius:8px;
  background:var(--lap);font-size:12.5px;font-weight:600;color:var(--halvany)}
.tipus button.be{border-color:var(--kek);background:var(--kek-50);color:var(--kek-900)}
.tipus.hianyzik button{border-color:var(--piros);animation:rez .3s}
@keyframes rez{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}

.pipak{display:flex;flex-wrap:wrap;gap:5px}
.pipa{display:inline-flex;align-items:center;gap:6px;padding:5px 9px;border:1px solid var(--keret-2);
  border-radius:999px;background:var(--lap);font-size:11.5px;user-select:none}
.pipa:hover{border-color:var(--kek-600)}
.pipa i{width:13px;height:13px;border-radius:3.5px;border:1.5px solid var(--keret-2);
  display:grid;place-items:center;flex:none}
.pipa.be{border-color:var(--kek);background:var(--kek-50);color:var(--kek-900);font-weight:600}
.pipa.be i{background:var(--kek);border-color:var(--kek)}
.pipa.be i::after{content:"";width:7px;height:3.5px;border-left:2px solid #fff;
  border-bottom:2px solid #fff;transform:rotate(-45deg) translate(1px,-1px)}

/* ── AI-vélemény: a lap egyetlen színes eleme ─────────────────────── */
.velemeny{border-radius:12px;padding:11px 13px;flex:none}
.velemeny .vf{display:flex;align-items:center;gap:8px;margin-bottom:6px}
/* ⭐ Ha nincs mondanivaló (minden rendben), a doboz EGY SOR — nem foglal
   helyet magyarázattal, amit senki nem olvas el másodszor. */
.velemeny.halk{padding:8px 13px}
.velemeny.halk .vf{margin-bottom:0}
.velemeny .vf b{font-size:12.5px}
.velemeny .lampa{width:11px;height:11px;border-radius:50%;flex:none}
.velemeny .vsz{font-size:12px;line-height:1.45}
.velemeny.zold {background:var(--zold-50); border:1px solid var(--zold-200)}
.velemeny.sarga{background:var(--sarga-50);border:1px solid var(--sarga-200)}
.velemeny.piros{background:var(--piros-50);border:1px solid var(--piros-200)}
.velemeny.zold  .lampa{background:var(--zold)}
.velemeny.sarga .lampa{background:#d79c1a}
.velemeny.piros .lampa{background:var(--piros)}
.velemeny.zold  .vf b{color:var(--zold)}
.velemeny.sarga .vf b{color:var(--sarga)}
.velemeny.piros .vf b{color:var(--piros)}
.velemeny.zold  .vsz{color:#1c4c30}
.velemeny.sarga .vsz{color:#6d4a06}
.velemeny.piros .vsz{color:#7d2822}
.velemeny .ai{margin-left:auto;font-size:10px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--halvanyabb);font-weight:600}

/* ── gombok, alsó sáv ──────────────────────────────────────────────── */
.g{display:inline-flex;align-items:center;justify-content:center;gap:7px;padding:9px 16px;
  border:1px solid var(--keret-2);border-radius:10px;background:var(--lap);font-size:13px;
  font-weight:600;box-shadow:var(--arny-1);transition:border-color .15s,box-shadow .15s,transform .05s}
.g:hover{border-color:var(--kek-600);box-shadow:var(--arny-2)}
.g:active{transform:translateY(1px)}
.g.fo{background:var(--zold);border-color:var(--zold);color:#fff}
.g.fo:hover{background:#13612e;border-color:#13612e}
.g.kici{padding:6px 11px;font-size:12px}

.alja{display:flex;align-items:center;gap:10px;padding:0 14px;background:var(--lap);
  border-top:1px solid var(--keret)}
.alja .sugo{color:var(--halvanyabb);font-size:11.5px}
.alja .sugo kbd{display:inline-block;padding:0 5px;border:1px solid var(--keret-2);
  border-bottom-width:2px;border-radius:4px;background:var(--papir);font:inherit;
  font-size:10.5px;font-weight:600;color:var(--halvany)}
.alja .gombok{margin-left:auto;display:flex;gap:8px}

/* ── értesítés ─────────────────────────────────────────────────────── */
.pirit{position:fixed;right:18px;bottom:70px;z-index:120;display:flex;align-items:center;gap:10px;
  padding:10px 15px;border-radius:11px;background:var(--szoveg);color:#fff;font-size:12.5px;
  box-shadow:var(--arny-3);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .2s,transform .2s}
.pirit.latszik{opacity:1;transform:none}
.pirit b{font-weight:600}
.pirit span{color:rgba(255,255,255,.65)}

/* ⭐ KATEGÓRIA: KÉT MEZŐ, ÉLŐ JAVASLATOKKAL (Roland, 2026-09-03).
   Két kicsi mező egymás mellett — így egyértelmű, mit szerkeszt az ember —,
   alattuk a boltból jövő javaslatok. */
.katsor{display:flex;gap:8px;margin-bottom:2px;align-items:flex-end}


.katmezo{flex:1;min-width:0;position:relative}
.javtarto{position:relative}
.katmezo label{display:block;font-size:10px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--halvanyabb);margin:0 0 3px}
.katmezo label em{font-style:normal;text-transform:none;letter-spacing:0;
  font-weight:500;color:var(--halvanyabb);opacity:.85}
.katmezo input{width:100%;box-sizing:border-box;border:1px solid var(--keret);
  border-radius:9px;padding:7px 9px;font-size:13px;font-family:inherit;
  color:var(--szoveg);background:var(--lap)}
.katmezo input:focus{outline:none;border-color:var(--kek);
  box-shadow:0 0 0 3px rgba(65,86,149,.12)}
.katlista{display:none;position:absolute;left:0;right:0;top:100%;margin-top:3px;
  z-index:30;background:var(--lap);border:1px solid var(--keret-2);
  border-radius:10px;box-shadow:var(--arny-2);max-height:210px;overflow-y:auto;
  padding:4px;scrollbar-width:none}
/* ⛔ 2026-10-14: Windowson a lista mellett látható görgetősáv állt (Roland szabálya: görgetősáv sehol) */
.katlista::-webkit-scrollbar{display:none}
.katlista.nyit{display:block}
.katlista button{display:block;width:100%;text-align:left;border:0;
  background:none;border-radius:7px;padding:6px 8px;font-size:12.5px;
  color:var(--szoveg);cursor:pointer;font-family:inherit;line-height:1.35}
.katlista button:hover,.katlista button:focus-visible{background:var(--papir-2);
  outline:none}
.katures{display:block;padding:6px 8px;font-size:12px;color:var(--halvany)}
/* A jelzés a Fő kategória CÍMKÉJÉBEN ül (2026-09-04), az pedig nagybetűsít —
   ezt itt vissza kell venni, különben „MENTETT LISTA" lesz belőle. */
.katjel{margin-left:6px;font-size:10px;font-weight:600;color:var(--sarga);
  background:var(--sarga-50);border-radius:999px;padding:1px 7px;
  text-transform:none;letter-spacing:0}
.katjel.piros{color:var(--piros);background:var(--piros-50)}
/* ⭐ Roland (2026-09-04): jóváhagyáskor a HIÁNYZÓ kategória-mező pirosan
   jelez — ugyanazzal a rezzenéssel, mint a hiányzó terméktípus. Az első
   gépelésre lekerül (katIras → katHibaTorol). */
/* ⭐ TÖBB alkategória (István, 2026-09-08 · Roland, 2026-09-09: két külön sor): a
   kiválasztottak chipként a beviteli mezővel EGY keretben (címkéző mező), × a levételhez. */
.katmezo + .katmezo{margin-top:7px}
.kattag{display:flex;flex-wrap:wrap;gap:4px;align-items:center;width:100%;box-sizing:border-box;
  min-height:34px;border:1px solid var(--keret);border-radius:9px;padding:3px 6px;background:var(--lap);cursor:text}
.kattag:focus-within{border-color:var(--kek);box-shadow:0 0 0 3px rgba(65,86,149,.12)}
.katmezo .kattag input{flex:1 1 150px;min-width:150px;width:auto;border:0;background:none;
  padding:4px 3px;font-size:13px;font-family:inherit;color:var(--szoveg)}
.katmezo .kattag input:focus{outline:none;box-shadow:none;border:0}
.katmezo.hianyzik .kattag{border-color:var(--piros);box-shadow:0 0 0 3px rgba(179,38,30,.15);animation:rez .3s}
.katchip{display:inline-flex;align-items:center;gap:4px;max-width:100%;
  padding:3px 4px 3px 9px;border-radius:999px;font-size:11.5px;font-weight:600;
  background:var(--kek-50,#e8eefc);color:var(--kek-800,#25407a);border:1px solid var(--kek,#4156a5)}
.katchip button{border:0;background:none;color:inherit;font:inherit;font-size:13px;
  line-height:1;padding:0 4px;cursor:pointer;opacity:.7;border-radius:999px}
.katchip button:hover{opacity:1;background:rgba(0,0,0,.08)}
/* ⭐⭐ TÖBB fő kategória (Edit + Roland, 2026-09-15): a fő kategória chipje telt kék, hogy
   elváljon az alkategóriáktól; több fő kategóriánál az alkategória-chipen és a javaslat-
   listában a fő neve halkan elöl áll. */
.katfochip{background:var(--kek,#4156a5);color:#fff}
.katfochip button{color:#fff}
.katchipfo{font-weight:500;opacity:.65;margin-right:3px}
.katmezo.hianyzik label{color:var(--piros)}

.katmezo.hianyzik input{border-color:var(--piros);
  box-shadow:0 0 0 3px rgba(179,38,30,.15);animation:rez .3s}
.katmezo.hianyzik input::placeholder{color:var(--piros);opacity:.65}

/* ── FELUGRÓ: bezáró gomb (István 9. pontja, 2026-09-21) ────────────────
   A felirat 2,6 mp-ig élt, megállítani nem lehetett. Most az egér megállítja,
   és van „×" is. A gomb nem tolhatja el a szöveget, ezért a résbe ül. */
.pirit .piritX{margin-left:2px;border:0;background:none;padding:0 2px;
  color:rgba(255,255,255,.55);font:inherit;font-size:16px;line-height:1;cursor:pointer}
.pirit .piritX:hover{color:#fff}