/* Árukereső belső oldal — elsősorban telefonra (a user mobilon nézi), világos és sötét módban. */
:root {
  --hatter: #f4f6f8; --kartya: #ffffff; --szoveg: #1d2733; --halvany: #6b7785; --vonal: #dfe4ea;
  --kiemelt: #1f5f8b; --jo: #1e8e4e; --jo-hat: #e3f5ea; --rossz: #c0392b; --rossz-hat: #fbe7e5;
  --fut: #b36b00; --fut-hat: #fff1d9; --semleges: #55616e; --semleges-hat: #eceff2;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hatter: #11161c; --kartya: #1a222b; --szoveg: #e6ebf0; --halvany: #95a1ad; --vonal: #2c3743;
    --kiemelt: #6fb3e0; --jo: #52c486; --jo-hat: #173524; --rossz: #f07a6e; --rossz-hat: #3d1d1a;
    --fut: #f0b35a; --fut-hat: #3a2b12; --semleges: #aab4be; --semleges-hat: #26303a;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--hatter); color: var(--szoveg);
       font: 16px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { max-width: 960px; margin: 0 auto; padding: 12px 16px 32px; }
h1 { font-size: 1.5rem; margin: 0 0 4px; }
h2 { font-size: 1.15rem; margin: 0 0 10px; }
h3 { font-size: 1rem; margin: 14px 0 8px; }
a { color: var(--kiemelt); }

.fejlec { position: sticky; top: 0; z-index: 10; display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
          background: var(--kiemelt); color: #fff; padding: 8px 16px; }
.fejlec a { color: #fff; text-decoration: none; padding: 8px 10px; border-radius: 8px; }
.fejlec a.aktiv { background: rgba(255,255,255,.2); font-weight: 600; }
.fejlec .logo { font-weight: 700; margin-right: auto; }
.fejlec form { margin: 0; }
.kilep { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.5); border-radius: 8px;
         padding: 7px 10px; font: inherit; cursor: pointer; }

.kartya { background: var(--kartya); border: 1px solid var(--vonal); border-radius: 12px; padding: 14px 16px; margin: 12px 0; }
.halvany { color: var(--halvany); font-size: .9rem; }
.kozep { text-align: center; }

.cimke { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: .85rem; font-weight: 600; white-space: nowrap; }
.cimke.jo { background: var(--jo-hat); color: var(--jo); }
.cimke.rossz { background: var(--rossz-hat); color: var(--rossz); }
.cimke.fut { background: var(--fut-hat); color: var(--fut); }
.cimke.semleges { background: var(--semleges-hat); color: var(--semleges); }

.gepek { list-style: none; margin: 0; padding: 0; }
.gepek li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 8px 0; border-top: 1px solid var(--vonal); }
.gepek li:first-child { border-top: 0; }
.gepek .halvany { flex-basis: 100%; padding-left: 22px; }
.pont { width: 14px; height: 14px; border-radius: 50%; flex: none; }
.pont.jo { background: var(--jo); } .pont.rossz { background: var(--rossz); }

.gorgeto { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--vonal); white-space: nowrap; vertical-align: top; }
th { color: var(--halvany); font-weight: 600; font-size: .85rem; }
.hibaszoveg { white-space: normal; color: var(--rossz); font-size: .85rem; max-width: 60ch; }

.szeletek { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.szelet { border-radius: 10px; padding: 8px; border: 1px solid var(--vonal); font-size: .9rem; }
.szelet .szam { font-weight: 700; font-size: 1.1rem; }
.szelet.jo { background: var(--jo-hat); } .szelet.fut { background: var(--fut-hat); }
.szelet.rossz { background: var(--rossz-hat); } .szelet.semleges { background: var(--semleges-hat); }

.ket-oszlop { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 640px) { .ket-oszlop { grid-template-columns: 1fr 1fr; } }
.elozmeny, .kodok { list-style: none; margin: 0; padding: 0; }
.elozmeny li { display: grid; grid-template-columns: 4.5em 1fr auto; gap: 8px; padding: 5px 0; border-top: 1px solid var(--vonal); }
.kodok li { padding: 5px 0; }
details summary { cursor: pointer; color: var(--kiemelt); padding: 8px 0; }

.belepes { max-width: 380px; margin: 12vh auto 0; }
.belepes form { display: grid; gap: 10px; margin-top: 16px; }
input[type=password] { font: inherit; padding: 12px; border-radius: 10px; border: 1px solid var(--vonal);
                       background: var(--hatter); color: var(--szoveg); }
input[type=submit] { font: inherit; font-weight: 600; padding: 12px; border: 0; border-radius: 10px;
                     background: var(--kiemelt); color: #fff; cursor: pointer; }
.uzenet { padding: 10px 12px; border-radius: 10px; }
.uzenet.rossz { background: var(--rossz-hat); color: var(--rossz); }

/* Paraméterek */
.gombsor { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gomb { display: inline-block; padding: 9px 14px; border-radius: 10px; border: 1px solid var(--vonal); text-decoration: none;
        background: var(--kartya); color: var(--kiemelt); font-weight: 600; }
.gomb.fo { background: var(--kiemelt); color: #fff; border-color: var(--kiemelt); margin-left: auto; }
.gomb.tiltott { color: var(--halvany); font-weight: 400; }
.kereso { display: flex; gap: 8px; margin: 10px 0; }
.kereso input[type=search] { flex: 1; min-width: 0; }
input[type=search], input[type=text], select { font: inherit; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--vonal);
       background: var(--hatter); color: var(--szoveg); width: 100%; }
.kereso input[type=submit] { width: auto; }
a.sor-kartya { display: block; text-decoration: none; color: var(--szoveg); padding: 10px 14px; margin: 8px 0; }
a.sor-kartya div { overflow-wrap: anywhere; }
.urlap { display: grid; gap: 6px; }
.urlap label { font-weight: 600; margin-top: 8px; }
.urlap input[type=submit] { margin-top: 14px; }
.torles { margin-top: 18px; width: 100%; font: inherit; padding: 11px; border-radius: 10px; border: 1px solid var(--rossz);
          background: transparent; color: var(--rossz); cursor: pointer; }
.uzenet.jo { background: var(--jo-hat); color: var(--jo); }
.valtozas { margin: 6px 0 0; padding-left: 18px; overflow-wrap: anywhere; }
.valtozas del { color: var(--rossz); } .valtozas ins { color: var(--jo); text-decoration: none; }

/* Telefonon a fejléc egy sorban marad: a felirat eltűnik, a gombok szükség esetén oldalra görgethetők. */
@media (max-width: 480px) {
  .fejlec { flex-wrap: nowrap; overflow-x: auto; gap: 2px; padding: 6px 8px; }
  .fejlec .logo { display: none; }
  .fejlec a, .kilep { padding: 8px 9px; white-space: nowrap; }
  .fejlec form { margin-left: auto; }
}

/* Hibajegyek */
textarea { font: inherit; padding: 11px 12px; border-radius: 10px; border: 1px solid var(--vonal); background: var(--hatter);
           color: var(--szoveg); width: 100%; resize: vertical; }
.elore-formazott { white-space: pre-wrap; overflow-wrap: anywhere; }
.csoportcim { margin: 22px 4px 6px; font-size: 1.05rem; color: var(--halvany); text-transform: uppercase; letter-spacing: .04em; }
input[disabled] { opacity: .7; }
.fejlec .ki { color: rgba(255,255,255,.85); font-size: .9rem; padding: 0 6px; white-space: nowrap; }
.fo-gomb { display: block; text-align: center; text-decoration: none; box-sizing: border-box; width: 100%; font: inherit; font-weight: 600; padding: 14px; border: 0; border-radius: 10px;
           background: var(--kiemelt); color: #fff; cursor: pointer; margin: 14px 0 6px; }