/* Színvilág: a sötét (Mélyzöld) alapértékek és a közös felülírások; az admin Megjelenés oldalán váltható témák ezt írják felül. */
/* Leltem.hu — közös publikus arculat: a jóváhagyott főoldali terv („Mélyzöld”) minden publikus oldalra kiterjesztve.
   A tokenek adják az alapot (minden komponens ezeket használja); a fejléc, kártya, lábléc és társaik szabályai a
   fooldal-premium.css közös részéből származnak. Az admin felület nem tölti be. */
:root{
  --oldal-alap:#f6f2e9;
  --hatter:#132a23;
  --hatter-melegh:#0c201b;
  --hatter-blokk:#18352c;
  --kep-hatter:#f8f7f3;
  --szoveg:#f1f5ed;
  --szoveg-halvany:#a9bfb1;
  --szoveg-finom:#95ad9c;
  --keret:#ffffff19;
  --keret-eros:#ffffff38;
  --akcent:#95edb5;
  --akcent-sotet:#c3f6d1;
  --akcent-halvany:#95edb515;
  --gomb-szoveg:#143626;
  --ar:#f8fbf4;
  --figyelem:#f6c98a;
  --figyelem-halvany:#f6c98a1f;
  --hiba:#ffb3b3;
  --hiba-halvany:#ffb3b31f;
  --lap-piros:#e0445a;
  --sk-oldal:#0c201b;
  --sk-fejlec:#0d241d;
  --sk-hero:#102c22;
  --sk-lap:#173d2b;
  --sk-pill:#17442f;
  --sk-panel:#173f33;
  --arnyek:0 6px 24px #03100b24;
  --arnyek-modal:0 28px 70px #02100b99;
  --fedo:#ffffff0f;
  --sk-lablec:var(--sk-oldal);
  --sk-ablak:linear-gradient(125deg,oklch(from #3b605246 l c calc(h + var(--tema-hue-s,0))),oklch(from #183e3061 l c calc(h + var(--tema-hue-s,0))));
  --sk-ablak-keret:oklch(from #cce8cf45 l c calc(h + var(--tema-hue-s,0)));
  --m-oldal:var(--sk-oldal);
  --m-kartya:var(--hatter-blokk);
  --m-belso:var(--hatter-melegh);
  --m-keret:var(--keret-eros);
  --m-halk:var(--szoveg-halvany);
  --m-jel:#ff9a9a;
  --m-ki:var(--akcent);
  --m-ki-szoveg:var(--gomb-szoveg);
  --m-ki-hang:var(--gomb-szoveg);
  /* mobilfelület: a sötét témák alapértékei (a világos témák a Tema.php tokenjeivel írják felül) */
}
html,
body{
  background:var(--oldal-alap);
}
body{
  min-height:100vh;
}
main{
  background:none;
}
::selection{
  background:color-mix(in srgb,var(--akcent) 40%,transparent);
  color:#fff;
}
select option{
  background:var(--hatter);
  color:var(--szoveg);
}
input::placeholder,
textarea::placeholder{
  color:var(--szoveg-finom);
}
@media (max-width:1000px){
  .fejlec-kereso input{
    background:#ffffff0a;
    border-color:var(--keret-eros);
    color:var(--szoveg);
  }
}
/* beviteli mezők: világos, besüllyesztett felület a panelen */
.be,
.ar-mezok input{
  background:var(--pr-mezo);
  border-color:var(--pr-mezo-keret);
  box-shadow:inset 0 2px 4px color-mix(in srgb,var(--szoveg) 10%,transparent);
  color:var(--szoveg);
}
@media (max-width:1000px){
  .belepo-urlap input,
  .belepo-urlap textarea{
    background:var(--pr-mezo);
    border-color:var(--pr-mezo-keret);
    box-shadow:inset 0 2px 4px color-mix(in srgb,var(--szoveg) 10%,transparent);
    color:var(--szoveg);
  }
}
@media (min-width:1001px){
  .belepo-urlap input:where(:not(.fejlec--shoppy,.fejlec--shoppy *)),
  .belepo-urlap textarea:where(:not(.fejlec--shoppy,.fejlec--shoppy *)){
    background:var(--pr-mezo);
    border-color:var(--pr-mezo-keret);
    box-shadow:inset 0 2px 4px color-mix(in srgb,var(--szoveg) 10%,transparent);
    color:var(--szoveg);
  }
}
/* a fejléc sötét belépő panelén a mezők is sötétek (a fejléc helyi tokenjei világos betűt adnak) */
@media (max-width:1000px){
  .fejlec .belepo-urlap input,
  .fejlec .belepo-urlap textarea{
    background:var(--hatter-melegh);
    border-color:var(--keret-eros);
    box-shadow:none;
  }
}
.felugro::backdrop{
  background:rgba(2,16,11,.66);
  backdrop-filter:blur(3px);
}
.bolt{
  background:var(--hatter);
  border-color:var(--keret);
}
/* prémium panelek: az egész felhasználói oldalon egységes, világos taupe lap vékony világos éllel és puha árnyékkal */
.felugro,
.kat,
.kat-focsoport,
.fiok-szakasz,
.profil-kartya,
.ossze-hero,
.ossze-valaszto,
.ossze-egyetlen,
.lf-funkcio,
.csomag-ar-kartya,
.csomag-banner,
.plus-ajanlo{
  background:var(--pr-lap);
  border-color:var(--pr-keret);
  box-shadow:inset 0 1px 0 var(--pr-el),var(--pr-arnyek);
}
/* beágyazott mezők: egy árnyalattal sötétebb, besüllyesztett felület */
.ossze-slot,
.kat-fa,
.ujsagok-ures,
.lista-uj,
.arfigyelo-urlap,
.ujsag-ertesites,
.ertesites-kapcsolo,
.csomag-idosor,
.beall-szakasz{
  background:var(--pr-lap-mely);
  border-color:color-mix(in srgb,var(--szoveg) 14%,transparent);
  box-shadow:inset 0 2px 5px color-mix(in srgb,var(--szoveg) 10%,transparent);
}
@media (max-width:1000px){
  .belepo-panel{
    border:1px solid oklch(from #4d9a80 l c calc(h + var(--tema-hue-s,0)));
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:var(--arnyek-modal);
  }
}
@media (min-width:1001px){
  .belepo-panel:where(:not(.fejlec--shoppy,.fejlec--shoppy *)){
    border:1px solid oklch(from #4d9a80 l c calc(h + var(--tema-hue-s,0)));
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:var(--arnyek-modal);
  }
}
@media (max-width:1000px){
  .belepo-fulek{
    background:var(--hatter-melegh);
  }
}
@media (min-width:1001px){
  .belepo-fulek:where(:not(.fejlec--shoppy,.fejlec--shoppy *)){
    background:var(--hatter-melegh);
  }
}
@media (max-width:1000px){
  .belepo-fulek>[aria-selected="true"],
  .belepo-fulek>[aria-current]{
    background:var(--hatter-blokk);
    color:var(--szoveg);
  }
}
@media (min-width:1001px){
  .belepo-fulek>[aria-selected="true"]:where(:not(.fejlec--shoppy,.fejlec--shoppy *)),
  .belepo-fulek>[aria-current]:where(:not(.fejlec--shoppy,.fejlec--shoppy *)){
    background:var(--hatter-blokk);
    color:var(--szoveg);
  }
}
/* A fejléc, a lábléc és a sötét kártyák (kiemelt ajánlat, újságsáv, Plusz-bemutató, asszisztens-fejléc) az admin oldalsávjának
   csokoládé–narancs palettáját kapják. A helyi tokenek a belső elemekre is érvényesek, az oldal többi részére nem. */
.lf-kiemelt,
.plusz-bemutato,
.la-fej{
  --sk-fejlec:#2e201a;
  --sk-panel:#38271f;
  --sk-pill:#483124;
  --hatter:#38271f;
  --hatter-melegh:#241914;
  --hatter-blokk:#443027;
  --szoveg:#f4e8da;
  --szoveg-halvany:#d5c0ad;
  --szoveg-finom:#c1ab98;
  --cim-szin:var(--szoveg);
  --link-szin:var(--akcent);
  --keret:#604536;
  --keret-eros:#876044;
  --akcent:#f4a044;
  --akcent-sotet:#ffc176;
  --akcent-halvany:#f4a0441f;
  --gomb-szoveg:#2b1b10;
  --jelzo:var(--akcent);
  --jelzo-szoveg:var(--gomb-szoveg);
  --ar:var(--szoveg);
  --hiba:#ffb3b3;
  --hiba-halvany:#ffb3b31f;
  --fedo:#ffffff0a;
  --pr-akcent-gomb:linear-gradient(180deg,color-mix(in srgb,var(--akcent) 80%,#fff) 0%,var(--akcent) 100%);
  --pr-akcent-gomb-fent:linear-gradient(180deg,var(--akcent) 0%,var(--akcent-sotet) 100%);
  --pr-akcent-arnyek:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent),0 5px 12px color-mix(in srgb,var(--akcent) 38%,transparent);
  --sk-ablak:color-mix(in srgb,var(--hatter) 94%,transparent);
  --sk-ablak-keret:var(--keret-eros);
  --arnyek-modal:0 24px 64px #160d0966;
  color-scheme:dark;
  color:var(--szoveg);
}
@media (max-width:1000px){
  .fejlec{
    --sk-fejlec:#2e201a;
    --sk-panel:#38271f;
    --sk-pill:#483124;
    --hatter:#38271f;
    --hatter-melegh:#241914;
    --hatter-blokk:#443027;
    --szoveg:#f4e8da;
    --szoveg-halvany:#d5c0ad;
    --szoveg-finom:#c1ab98;
    --cim-szin:var(--szoveg);
    --link-szin:var(--akcent);
    --keret:#604536;
    --keret-eros:#876044;
    --akcent:#f4a044;
    --akcent-sotet:#ffc176;
    --akcent-halvany:#f4a0441f;
    --gomb-szoveg:#2b1b10;
    --jelzo:var(--akcent);
    --jelzo-szoveg:var(--gomb-szoveg);
    --ar:var(--szoveg);
    --hiba:#ffb3b3;
    --hiba-halvany:#ffb3b31f;
    --fedo:#ffffff0a;
    --pr-akcent-gomb:linear-gradient(180deg,color-mix(in srgb,var(--akcent) 80%,#fff) 0%,var(--akcent) 100%);
    --pr-akcent-gomb-fent:linear-gradient(180deg,var(--akcent) 0%,var(--akcent-sotet) 100%);
    --pr-akcent-arnyek:inset 0 1px 0 color-mix(in srgb,#fff 45%,transparent),0 5px 12px color-mix(in srgb,var(--akcent) 38%,transparent);
    --sk-ablak:color-mix(in srgb,var(--hatter) 94%,transparent);
    --sk-ablak-keret:var(--keret-eros);
    --arnyek-modal:0 24px 64px #160d0966;
    color-scheme:dark;
    color:var(--szoveg);
    background:linear-gradient(90deg,#241914 0%,#38271f 52%,#503827 100%);
    border-top-color:#241914;
  }
}
.lablec .marka{
  position:relative;
  isolation:isolate;
}
@media (max-width:1000px){
  .fejlec .marka{
    position:relative;
    isolation:isolate;
  }
}
@media (max-width:1000px){
  .fejlec .marka-mobil{
    display:none;
  }
}
.marka-mobil-ikon{
  position:relative;
  isolation:isolate;
  display:grid;
  place-items:center;
  width:36px;
  height:38px;
  flex:none;
}
.marka-mobil-ikon::before{
  content:"";
  position:absolute;
  inset:3px;
  background:#f4a044;
  opacity:.182;
  filter:blur(12px);
  border-radius:5px;
  pointer-events:none;
}
.marka-mobil-ikon img{
  position:relative;
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 2px 2px #10090599);
}
.marka-mobil-felirat{
  position:relative;
  isolation:isolate;
  display:inline-flex;
  align-items:baseline;
  font-size:28px;
  line-height:1.15;
  font-weight:800;
  letter-spacing:-1.1px;
  white-space:nowrap;
}
.marka-mobil-felirat::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:3px -2px 0;
  background:radial-gradient(ellipse at center,rgba(244,160,68,.28),transparent 72%);
  filter:blur(7px);
  pointer-events:none;
}
.marka-mobil-nev{
  color:#ffd88b;
  background:linear-gradient(180deg,#fff1cc 10%,#ffd88b 48%,#efa044 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 #9e511d);
}
.marka-mobil-hu{
  margin-left:1px;
  font-size:.65em;
  letter-spacing:-.3px;
  color:#f4a044;
}
.lablec .marka-mobil{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:44px;
  flex:none;
}
.lablec .marka-mobil-ikon,
.lablec .marka-mobil-ikon img{
  width:43px;
  height:43px;
}
.lablec .marka-mobil-felirat{
  font-size:35px;
}
@media (max-width:1000px){
  .fejlec .marka::before{
    content:"";
    position:absolute;
    z-index:-1;
    inset:-5px;
    pointer-events:none;
    background:radial-gradient(ellipse at center,rgba(255,224,170,.56) 0%,rgba(244,160,68,.16) 50%,rgba(244,160,68,0) 72%);
    filter:blur(8px);
  }
}
.lablec .marka::before{
  content:"";
  position:absolute;
  z-index:-1;
  inset:-5px;
  pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(255,224,170,.56) 0%,rgba(244,160,68,.16) 50%,rgba(244,160,68,0) 72%);
  filter:blur(8px);
}
@media (max-width:1000px){
  .fejlec .fejlec-kereso{
    min-width:0;
  }
}
@media (max-width:1000px){
  .fejlec .fejlec-kereso input{
    background:transparent;
  }
}
@media (max-width:1000px){
  .fejlec .fejlec-pill--kiemelt{
    background:var(--pr-gomb-feny),var(--akcent);
    color:var(--gomb-szoveg);
    border-color:var(--akcent);
    box-shadow:var(--pr-akcent-arnyek);
  }
}
@media (max-width:1000px){
  .fejlec .fejlec-pill--kiemelt svg{
    color:currentColor;
  }
}
@media (max-width:1000px){
  .fejlec .fejlec-pill--kiemelt:hover,
  .fejlec .fejlec-pill--kiemelt.aktiv{
    background:var(--pr-gomb-feny),var(--akcent-sotet);
    color:var(--gomb-szoveg);
  }
}
@media (max-width:1000px){
  .fejlec .belepo-panel{
    border-color:var(--keret-eros);
  }
}
.lablec-csoport summary{
  color:var(--akcent);
}
.lablec li a:hover,
.lablec li a:focus-visible{
  color:var(--akcent-sotet);
}
/* ---------- a főoldali terv közös részei ---------- */
@media (max-width:1000px){
  .fejlec .marka .marka-logo{
    height:var(--logo-m,64px);
    max-width:none;
    filter:drop-shadow(0 0 1px rgba(255,244,218,.85)) drop-shadow(0 1px 5px rgba(255,211,143,.45));
  }
}
@media (max-width:1000px){
  .fejlec-fiok{
    padding:5px 8px;
  }
}
@media (max-width:1000px){
  body .belepo-panel{
    background:var(--sk-panel);
  }
}
@media (min-width:1001px){
  body .belepo-panel:where(:not(.fejlec--shoppy,.fejlec--shoppy *)){
    background:var(--sk-panel);
  }
}
@media (max-width:1000px){
  body .belepo-panel--oldal{
    background:var(--pr-lap);
    border-color:var(--pr-keret);
    box-shadow:inset 0 1px 0 var(--pr-el),var(--pr-arnyek-nagy);
  }
}
@media (min-width:1001px){
  body .belepo-panel--oldal:where(:not(.fejlec--shoppy,.fejlec--shoppy *)){
    background:var(--pr-lap);
    border-color:var(--pr-keret);
    box-shadow:inset 0 1px 0 var(--pr-el),var(--pr-arnyek-nagy);
  }
}
@media (max-width:1100px){
  @media (max-width:1000px){
    .fejlec .marka .marka-logo{
      height:calc(var(--logo-m,64px) * .85);
    }
  }
}
@media (max-width:760px){
  .fejlec .marka .marka-logo{
    height:calc(var(--logo-m,64px) * .68);
  }
  .kartya-torzs{
    padding:11px;
  }
  .kartya-arsor .ar{
    font-size:25px;
  }
  .lablec{
    padding-bottom:85px;
  }
}
@media (max-width:380px){
  .kartya-torzs{
    padding:10px;
  }
  .kartya-arsor .ar{
    font-size:23px;
  }
}
/* Mézfény: mobilon olvasható felirat és a beállított favicon.
   A fény a tényleges ikon/felirat méretét követi, nem a fejléc kitöltött rácscelláját. */
@media (max-width:700px){
  .fejlec .marka,
  .lablec .marka{
    width:fit-content;
    max-width:100%;
    justify-self:start;
  }
  .fejlec .marka::before,
  .lablec .marka::before{
    content:none;
  }
  .fejlec .marka .marka-logo,
  .lablec .marka .marka-logo{
    display:none;
  }
  .fejlec .marka-mobil,
  .lablec .marka-mobil{
    display:inline-flex;
    align-items:center;
    gap:7px;
    min-height:44px;
    flex:none;
  }
}
@media (max-width:370px){
  .fejlec .marka-mobil{
    gap:5px;
  }
  .fejlec .marka-mobil-ikon,
  .fejlec .marka-mobil-ikon img{
    width:30px;
    height:32px;
  }
  .fejlec .marka-mobil-felirat{
    font-size:24px;
  }
}
/* ---------- bolti oldalak és csempék: a bolt saját színeivel ---------- */
.bolt-oldal-logo .bolt-logo{
  width:150px;
  height:72px;
  border-radius:0;
  padding:0;
}
.bolt-oldal-ujsag span,
.bolt-oldal-ujsag i{
  color:#ffffffc8;
}
a.bolt-oldal-ujsag:hover{
  background:#ffffff38;
  border-color:#fff;
}
.bolt-oldal-ujsag--aktualis{
  background:#fff;
  border-color:#fff;
  color:var(--bolt-szin);
  box-shadow:0 8px 20px rgba(0,0,0,.25);
}
.bolt-oldal-ujsag--aktualis span,
.bolt-oldal-ujsag--aktualis i,
.bolt-oldal-ujsag--aktualis b{
  color:var(--bolt-szin);
}
.bolt-oldal-ujsag--ures i,
.bolt-oldal-ujsag--ures span{
  color:#ffffffa0;
}
/* bolti logó a bolt saját színű csempéjén (a style="--bolt-szin:…" adja a színt) */
.bolt-szines{
  border:0;
  background:var(--bolt-szin);
  box-shadow:0 6px 16px rgba(0,0,0,.22);
}
a.bolt-szines:hover{
  box-shadow:0 12px 26px rgba(0,0,0,.32);
}
.bolt-szines .bolt-logo img{
  filter:none;
}
.bolt--csak-logo:hover{
  transform:translateY(-3px);
}
.bolt--nagy-logo{
  min-width:200px;
  min-height:120px;
}
.bolt--nagy-logo .bolt-logo{
  width:150px;
  height:72px;
}
.bolt--csak-logo[style*="--bolt-szin"] .bolt-logo{
  width:100px;
  height:44px;
}
.bolt--nagy-logo[style*="--bolt-szin"] .bolt-logo{
  width:150px;
  height:72px;
}
@media (max-width:760px){
  .bolt-oldal-bevezeto{
    grid-template-columns:1fr;
    justify-items:start;
    gap:var(--t4);
  }
  .bolt-oldal-logo .bolt-logo{
    width:120px;
    height:56px;
  }
  .bolt--nagy-logo{
    min-width:calc(50% - 8px);
    min-height:100px;
    flex:1 1 calc(50% - 8px);
  }
  .bolt--nagy-logo[style*="--bolt-szin"] .bolt-logo{
    width:110px;
    height:52px;
  }
}
/* Belépés és funkcióoldalak: lágy akcent-fény a közös krémszínű alap felett. */
.belepes-hatter,
.funkciok-hero{
  background:radial-gradient(640px 420px at 85% 15%,color-mix(in srgb,var(--akcent) 16%,transparent),transparent 70%),radial-gradient(520px 380px at 12% 90%,color-mix(in srgb,#fff 22%,transparent),transparent 70%);
}
/* kategóriaképek: önálló ikonok, háttér és keret nélkül */
.kat-foto--ikon{
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  overflow:visible;
  display:grid;
  place-items:center;
}
.kat-foto--ikon img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 2px 3px rgba(2,16,11,.45));
}