@charset "utf-8";
/* =====================================================================
   ARCULAT — 2026-10-28
   ---------------------------------------------------------------------
   Ez a réteg a style.css UTÁN töltődik be, és felülírja a megjelenést.
   A szerkezethez és az osztálynevekhez nem nyúl: minden PHP-sablon
   változatlanul működik, csak másképp néz ki.

   MIÉRT KÜLÖN FÁJL

   A style.css hatvanhét kilobájt, és minden oldal ebből él. Ha bele-
   írnánk, egy elrontott kapcsos zárójel az egész oldalt viszi. Külön
   rétegként a legrosszabb eset az, hogy visszakapjuk a régi kinézetet.

   AZ IRÁNY

   Világos, levegős lap, amin SZÍNES FÉNY mozog. A szín a tartalomból
   jön — kategória, szezon, kedvezmény —, nem egyetlen narancsból.
   A mozgás lassú és egy helyen van: a lap tetején. Minden más mozgás
   válasz valamire, amit a látogató csinál.
   ===================================================================== */

:root{
  /* Hideg papír a krém helyett: a színek élesebbek rajta. */
  --papir:#f4f6fb;
  --papir-arny:#e3e8f3;
  --lap:#ffffff;

  /* Jelzőszínek — ezek eddig is megvoltak, csak nem használtuk őket. */
  --rez:#ff5a1f;
  --rozsa:#ff2d6f;
  --menta:#16c79a;
  --arany:#f6c445;
  --kek:#3d8bff;
  --lila:#7c5cff;

  /* A szezon színe; az inc/szezon.php állítja oldalanként. */
  --szezon:var(--rez);

  --iv:24px;
  --iv-kicsi:14px;
  --arny:0 1px 2px rgba(16,24,40,.05), 0 10px 26px -16px rgba(16,24,40,.22);
  --arny-nagy:0 2px 6px rgba(16,24,40,.07), 0 26px 56px -26px rgba(16,24,40,.38);
}

/* A VILÁGOS TÉMA ALAPSZÍNEI
   A style.css a body hátterét a --tinta változóból veszi, nem a
   --papir-ból. A krémet itt cseréljük hideg papírra, és a vonal is
   hűvösebb lesz, különben a régi meleg szegély elüt az új színektől. */
html[data-tema="vilagos"],html:not([data-tema]){
  --tinta:#f4f6fb;
  --tinta-2:#ffffff;
  --tinta-3:#eef1f8;
  --vonal:#e2e6f0;
  --papir:#f4f6fb;
  --papir-arny:#e3e8f3;
  --lap:#ffffff;
  --szoveg:#101322;
  --szoveg-2:#5b6478;
}

html[data-tema="sotet"]{
  --papir:#0b0e14;
  --papir-arny:#161c28;
  --lap:#141a26;
  --arny:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -16px rgba(0,0,0,.6);
  --arny-nagy:0 2px 6px rgba(0,0,0,.5), 0 26px 56px -26px rgba(0,0,0,.8);
}

body{background:var(--papir)}

/* =====================================================================
   1. A LAP TETEJE — TELÍTETT SZÍNMEZŐ, AMI DOLGOZIK
   =====================================================================
   Nem pasztell fátyol és nem üres óriásfelirat: egy erős színmező,
   benne a kereső, a kategóriák és a piacok élő ideje. Ez az első
   képernyő, tehát itt legyen minden, amivel a látogató kezdeni akar
   valamit — és itt legyen a lap egyetlen magától induló mozgása.
   ===================================================================== */

.cimer{
  position:relative;
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(24px,3vw,48px);
  align-items:center;
  padding:clamp(30px,5vw,58px) clamp(20px,4vw,52px) clamp(32px,5vw,52px);
  border-radius:var(--iv);
  overflow:hidden;
  isolation:isolate;
  color:#fff;
  background:
    linear-gradient(118deg,
      color-mix(in srgb, var(--szezon) 92%, #000 8%) 0%,
      var(--rozsa) 46%,
      var(--lila) 100%);
  box-shadow:0 30px 60px -40px color-mix(in srgb, var(--rozsa) 70%, transparent);
}

/* A mozgó fény: két nagy folt sodródik a színmező fölött. Lassú,
   nem villog, és reduced-motion esetén megáll. */
.cimer::before{
  content:"";position:absolute;inset:-40% -25%;z-index:-1;
  background:
    radial-gradient(34% 40% at 18% 26%, rgba(255,255,255,.42) 0%, transparent 66%),
    radial-gradient(30% 34% at 82% 74%, color-mix(in srgb, var(--arany) 70%, transparent) 0%, transparent 68%),
    radial-gradient(26% 30% at 62% 8%,  color-mix(in srgb, var(--menta) 55%, transparent) 0%, transparent 70%);
  filter:blur(30px);
  animation:fenysodras 30s ease-in-out infinite alternate;
}

/* Finom rács a színmezőn: ettől lesz „felület", nem lapos festék. */
.cimer::after{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.14;
  background-image:
    linear-gradient(rgba(255,255,255,.6) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.6) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(74% 80% at 50% 40%, #000 0%, transparent 78%);
}

@keyframes fenysodras{
  0%  {transform:translate3d(-2%,-1%,0) scale(1.00)}
  50% {transform:translate3d(3%, 2%,0)  scale(1.07)}
  100%{transform:translate3d(-1%,3%,0)  scale(1.03)}
}

.cimer-torzs{position:relative;z-index:1;min-width:0;text-align:left}

.cimer h1{
  margin:0;
  font-size:clamp(30px,4.6vw,54px);
  line-height:1.02;
  letter-spacing:-.035em;
  font-weight:800;
  color:#fff;
  text-wrap:balance;
  text-shadow:0 2px 24px rgba(0,0,0,.18);
}

.cimer p{
  margin:12px 0 0;
  text-align:left;
  max-width:50ch;
  font-size:clamp(15px,1.4vw,18px);
  line-height:1.55;
  color:rgba(255,255,255,.92);
}

/* A kereső a hős közepén: ez a lap legfontosabb művelete. */
.cimer-kereso{margin-top:22px;max-width:560px;display:flex;gap:8px}
.cimer-kereso input{flex:1;min-width:0}
.cimer-kereso input{
  background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.5);
  color:#101322;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.6);
}
.cimer-kereso input::placeholder{color:#6b7488}
.cimer-kereso button{
  background:#101322;color:#fff;border:0;
  box-shadow:0 18px 40px -24px rgba(0,0,0,.8);
}
.cimer-kereso button:hover{background:#000}

/* Kategóriapirulák a hősön: áttetsző, nem rikító. */
.cimer-kat{margin-top:14px;display:flex;flex-wrap:wrap;gap:8px}
.cimer-kat .szuro{
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.26);
  color:#fff;
  backdrop-filter:blur(6px);
}
.cimer-kat .szuro:hover{background:rgba(255,255,255,.28)}
.cimer-kat .szuro s{color:rgba(255,255,255,.7);text-decoration:none}

/* =====================================================================
   2. PIACSÁV — ÉLŐ ADAT, AMI EGYBEN NAVIGÁCIÓ
   =====================================================================
   Minden pirula egy piac: ott a helyi idő, és ahol van előrejelzés, a
   hőmérséklet. A kattintás az adott piac kuponjaira visz.
   ===================================================================== */

.idosav{
  position:relative;z-index:1;text-align:left;
  padding:18px;border-radius:calc(var(--iv) - 8px);
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.22);
  backdrop-filter:blur(10px);
  box-shadow:0 24px 50px -36px rgba(0,0,0,.7);
}
.idosav-cim{
  margin:0 0 12px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:rgba(255,255,255,.78);
}
.idosav ul{margin:0;padding:0;list-style:none;display:grid;gap:2px}
.idosav li + li{border-top:1px solid rgba(255,255,255,.14)}
.idosav a{
  display:grid;grid-template-columns:22px 1fr auto auto;
  align-items:center;gap:10px;
  padding:9px 8px;border-radius:9px;
  color:#fff;text-decoration:none;font-size:14px;
  transition:background .16s;
}
.idosav a:hover{background:rgba(255,255,255,.16)}
.idosav b{font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idosav .ido-zaszlo{font-size:17px;line-height:1}
.idosav .ido-ora{font-variant-numeric:tabular-nums;color:rgba(255,255,255,.76)}
.idosav .ido-fok{
  font-variant-numeric:tabular-nums;font-weight:600;
  min-width:34px;text-align:right;
}

/* =====================================================================
   3. A KÉT FŐ IRÁNY
   =====================================================================
   Kupon és sport. Világos lapok, de mindegyiknek saját színe van, és
   a sarkában ott világít a hozzá tartozó fény.
   ===================================================================== */

.fo-valaszto{gap:16px;margin-top:16px}

.fo-valaszto-elem{
  position:relative;overflow:hidden;
  border:1px solid var(--vonal);
  border-radius:var(--iv);
  padding:22px 24px;
  background:var(--lap);
  box-shadow:var(--arny);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s;
}
.fo-valaszto-elem::before{
  content:"";position:absolute;inset:0;z-index:0;
  background:radial-gradient(64% 120% at 92% 10%, var(--fv-szin) 0%, transparent 60%);
  opacity:.16;
}
.fo-valaszto-elem>*{position:relative;z-index:1}
.fo-valaszto-elem.kupon{--fv-szin:var(--rez)}
.fo-valaszto-elem.sport{--fv-szin:var(--menta)}
.fo-valaszto-elem:hover{transform:translateY(-3px);box-shadow:var(--arny-nagy)}
.fo-valaszto-elem .fv-ikon{filter:drop-shadow(0 8px 16px rgba(16,24,40,.18))}

/* =====================================================================
   4. KÁRTYÁK — MÉLYSÉG ÉS KATEGÓRIASZÍN
   =====================================================================
   Eddig minden kártya ugyanaz a fehér doboz volt, ugyanazzal a
   hajszálvonallal. Most van árnyéka, és megemelkedik, ha ráviszed az
   egeret — ez a mozgás VÁLASZ, nem dísz.
   ===================================================================== */

.jegy,.hirkartya,.recept,.tipp,.termek,.transzfer{
  border-radius:var(--iv-kicsi);
  background:var(--lap);
  box-shadow:var(--arny);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), box-shadow .2s;
}
.jegy:hover,.hirkartya:hover,.recept:hover,.termek:hover{
  transform:translateY(-3px);
  box-shadow:var(--arny-nagy);
}

/* A kedvezmény értéke színátmenettel — ez a kártya legfontosabb száma. */
.jegy-ertek{
  background:linear-gradient(135deg,var(--rez),var(--rozsa));
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  font-weight:800;letter-spacing:-.02em;
}

/* Kódos kupon: világító jelző. */
.jegy-jelzo.hot{
  background:linear-gradient(135deg,var(--rez),var(--rozsa));
  color:#fff;border:0;
  box-shadow:0 8px 20px -10px var(--rozsa);
}

/* Ami ma lejár, az lüktet — de csak az. */
.jegy-jelzo.uj{animation:lüktet 2.6s ease-in-out infinite}
@keyframes lüktet{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--rozsa) 45%, transparent)}
  50%    {box-shadow:0 0 0 7px transparent}
}

/* =====================================================================
   5. GOMBOK ÉS SZEMCÍMEK
   ===================================================================== */

.gomb,button.btn,.btn{border-radius:12px}
.gomb:not(.halk){
  background:linear-gradient(135deg,var(--rez),#ff7f45);
  border:0;color:#fff;
  box-shadow:0 12px 26px -16px var(--rez);
}
.gomb:not(.halk):hover{filter:brightness(1.05);transform:translateY(-1px)}

/* A rovatcímek alá színes vonal kerül — a lap ettől tagolt lesz. */
.szemcim h2{position:relative;padding-bottom:10px}
.szemcim h2::after{
  content:"";position:absolute;left:0;bottom:0;
  width:52px;height:4px;border-radius:99px;
  background:linear-gradient(90deg,var(--rez),var(--rozsa));
}

/* =====================================================================
   6. MOZGÁS — KIKAPCSOLHATÓ
   ===================================================================== */

@media (prefers-reduced-motion:reduce){
  .cimer::before,.jegy-jelzo.uj{animation:none}
  *,*::before,*::after{transition-duration:.01ms !important}
}

/* =====================================================================
   7. MOBIL
   ===================================================================== */

@media (max-width:720px){
  .cimer{padding:28px 18px 34px;border-radius:18px;margin-top:6px}
  .cimer h1{font-size:clamp(32px,10.5vw,52px)}
  .idosav{gap:6px}
  .idosav a{padding:7px 11px;font-size:13px}
  .fo-valaszto{grid-template-columns:1fr}
}

/* =====================================================================
   FUTÓSOR — AMI MOZOG, AZT MONDJA IS
   =====================================================================
   A hamarabb lejáró kuponok vonulnak át a lapon. Egérrel fölé állva
   megáll (különben nem lehet rákattintani), és aki kikapcsolta a
   mozgást a gépén, annak álló listaként jelenik meg.
   ===================================================================== */

.futosor{
  position:relative;
  margin:14px 0 4px;
  padding:10px 0;
  overflow:hidden;
  border-block:1px solid var(--vonal);
  background:var(--lap);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.futosor-palya{display:flex;width:max-content;animation:futas 54s linear infinite}
.futosor:hover .futosor-palya{animation-play-state:paused}
.futosor-lista{display:flex;align-items:center;gap:10px;margin:0;padding:0 5px;list-style:none}

.futosor a{
  display:inline-flex;align-items:center;gap:9px;
  padding:7px 14px 7px 8px;border-radius:99px;
  background:var(--tinta-3);
  border:1px solid var(--vonal);
  color:var(--szoveg);text-decoration:none;
  font-size:14px;white-space:nowrap;
  transition:border-color .16s, transform .16s;
}
.futosor a:hover{border-color:var(--rozsa);transform:translateY(-1px)}
.futosor b{font-weight:600}

.futosor-ertek{
  display:inline-block;padding:3px 9px;border-radius:99px;
  background:linear-gradient(110deg,var(--rozsa),var(--lila));
  color:#fff;font-weight:700;font-size:13px;
  font-variant-numeric:tabular-nums;
}
.futosor-ido{font-size:12.5px;color:var(--szoveg-2)}
.futosor-ido.surgos{color:var(--rozsa);font-weight:600}

@keyframes futas{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}

@media (prefers-reduced-motion:reduce){
  .futosor-palya{animation:none;width:100%;overflow-x:auto}
  .futosor-lista[aria-hidden="true"]{display:none}
}

/* Élő állapotsor a keresőben — a lüktető pont a lap pulzusa. */
.elo-sor{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:16px 0 0;
  font-size:13.5px;color:rgba(255,255,255,.82);
  text-align:left;
}
.elo-pont{
  width:8px;height:8px;border-radius:50%;
  background:var(--menta);
  box-shadow:0 0 0 0 color-mix(in srgb, var(--menta) 60%, transparent);
  animation:pulzus 2.4s ease-out infinite;
}
.elo-valaszto{opacity:.5}
@keyframes pulzus{
  0%  {box-shadow:0 0 0 0   color-mix(in srgb, var(--menta) 60%, transparent)}
  70% {box-shadow:0 0 0 9px color-mix(in srgb, var(--menta) 0%,  transparent)}
  100%{box-shadow:0 0 0 0   color-mix(in srgb, var(--menta) 0%,  transparent)}
}
@media (prefers-reduced-motion:reduce){ .elo-pont{animation:none} }

/* A kereső gombja kövesse a mező ívét. */
.cimer-kereso input,
.cimer-kereso button{border-radius:12px}
.cimer-kereso button{padding-inline:20px;font-weight:600}

/* =====================================================================
   MOBIL  —  EGY HASÁB, DE UGYANAZ AZ INFORMÁCIÓ
   =====================================================================
   A színmező kétoszlopos rácsa 390 képpontnál összenyomta mindkét
   oldalt: a kategóriapirulák kétsorosra törtek, a piacpanelből meg
   kilógtak az országnevek. Itt egymás alá kerülnek, és a piacok
   vízszintesen görgethető sorrá válnak — így mind a nyolc elfér.
   ===================================================================== */
@media (max-width:860px){
  /* A színmező a keret peremén belül marad: a .keret 18px-es oldal-
     margóját NEM írjuk felül, csak a belső térközt adjuk hozzá. */
  .cimer{
    grid-template-columns:1fr;
    gap:18px;
    padding:24px 16px 22px;
    /* ⚠ A .keret width:100%-ot ad. Oldalmargót CSAK width:auto mellett
       szabad adni neki, különben 100% + 32px lesz, és a színmező
       kilóg a képernyő jobb szélén. Ezt mértük mobilon. */
    width:auto;
    margin-inline:16px;
  }
  .cimer,.cimer > *{min-width:0}
  /* A bevezető mondat mobilon is kell: ez mondja meg, hol jár. */
  .cimer p{display:block;font-size:14.5px}
  .cimer h1{font-size:clamp(28px,8.4vw,40px)}
  .cimer p{font-size:15px}

  .cimer-kereso{flex-wrap:nowrap;max-width:none}
  .cimer-kereso button{padding-inline:16px;white-space:nowrap}

  /* A kategóriák egy sorban, oldalra húzva — nem tornyosulnak. */
  .cimer-kat{
    flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;
  }
  .cimer-kat::-webkit-scrollbar{display:none}
  .cimer-kat .szuro{white-space:nowrap;flex:0 0 auto}

  /* A piacok vízszintes sorrá válnak: zászló, óra, fok. */
  .idosav{padding:12px}
  .idosav ul{
    display:flex;gap:8px;overflow-x:auto;
    scrollbar-width:none;
  }
  .idosav ul::-webkit-scrollbar{display:none}
  .idosav li + li{border-top:0}
  .idosav a{
    flex:0 0 auto;
    grid-template-columns:none;
    display:inline-flex;align-items:center;gap:7px;
    padding:7px 11px;border-radius:99px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.2);
  }
  .idosav b{max-width:96px}
  .idosav .ido-fok{min-width:0}

  .futosor a{font-size:13px;padding:6px 12px 6px 7px}
}

/* A bolt emblémája a futósorban — saját kép, nem díszfotó. */
.futosor-logo{
  width:22px;height:22px;border-radius:5px;
  object-fit:contain;background:#fff;padding:2px;
  flex:0 0 auto;
}