/* === Alap reset + globális beállítások === */
body, html {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  scroll-behavior: smooth; /* sima görgetés az #anchor linkekre (pl. index.php#kapcsolat) */
}

/* === Fejléc-navigáció (partials/header.php) === */
/* MEGJEGYZÉS: ezt a "nav" szabályt lentebb, a fájl végén (a :root/szín-változós
   blokk mellett) még egyszer felüldefiniáljuk position:sticky-vel és eltérő
   z-index-szel. A böngésző a KÉSŐBBI (lentebbi) szabályt alkalmazza, tehát a
   nav ténylegesen position:sticky lesz, ez a "fixed" itt gyakorlatilag felülíródik.
   Két korábbi CSS-verzió összefésüléséből maradt itt duplikáció — érdemes lenne
   egyetlen "nav" blokká összevonni, hogy ne kelljen tudni, melyik "nyer". */
nav {
  position: fixed;
  top: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 10;
}
nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  margin: 0;
  padding: 1rem;
  justify-content: center;
}
nav a {
  color: white;
  text-decoration: none;
  font-size: 1.2rem;
}
nav a.active {
  color: var(--color-primary, #facc15); /* aktív oldal menüpontjának kiemelése */
}

/* === "Fellépők" legördülő almenü === */
nav li.has-dropdown {
  position: relative;
}
nav .caret {
  font-size: 0.8rem;
  opacity: 0.8;
}
nav .dropdown {
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 180px;
  background: rgba(0,0,0,0.95);
  border-radius: 6px;
  display: none; /* alapból rejtve; asztali gépen hoverre, mobilon .open osztályra nyílik */
  z-index: 20;
}
nav .dropdown li { display: block; }
nav .dropdown a {
  display: block;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  white-space: nowrap;
}
nav .dropdown a:hover { background: rgba(255,255,255,0.08); }

/* Asztali gépen: egérrel rávitelre nyílik a legördülő */
@media screen and (min-width: 769px) {
  nav li.has-dropdown:hover .dropdown {
    display: block;
  }
}
/* Mobilon/érintőn: a js/main.js által kapcsolt .open osztályra nyílik */
nav li.has-dropdown.open .dropdown {
  display: block;
  position: static;   /* a lenyílt mobil-menüben ne lebegjen, hanem a helyén nyíljon meg */
  background: rgba(255,255,255,0.05);
  margin-top: 0.4rem;
  border-radius: 6px;
}

/* === Kompakt kereső a fejlécben === */
.nav-search-item-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-search-toggle {
  background: none;
  border: none;
  color: var(--color-text, #fff);
  font-size: 1.2rem;        /* megegyezik a "nav a" betűméretével */
  font-family: inherit;     /* megegyezik az oldal alap betűtípusával (Staatliches) */
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.nav-search-wrap {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.6rem;
  background: rgba(0,0,0,0.95);
  border: 1px solid #333;
  border-radius: 8px;
  padding: 0.6rem;
  width: 260px;
  z-index: 30;
}
.nav-search-wrap.open {
  display: block;
}
.nav-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5rem 0.7rem;
  border-radius: 6px;
  border: 1px solid #444;
  background: #0d0d0d;
  color: var(--color-text, #fff);
  font-size: 0.95rem;
}
.nav-search-results {
  margin-top: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
}
.nav-search-group-label {
  font-size: 0.7rem;
  opacity: 0.55;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0.6rem 0 0.2rem;
}
.nav-search-group-label:first-child {
  margin-top: 0;
}
.nav-search-item {
  display: block;
  padding: 0.4rem 0.3rem;
  color: var(--color-text, #fff);
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 4px;
}
.nav-search-item:hover {
  background: rgba(255,255,255,0.08);
}
.nav-search-empty {
  opacity: 0.6;
  font-size: 0.85rem;
  padding: 0.4rem 0.3rem;
}

/* Keresésből (vagy más mélylinkből) ide ugorva ez a rövid, elhalványuló
   kiemelés jelzi, melyik hír/fellépő-sor a találat — a beállított téma
   elsődleges színével (nem hardcode-olt sárgával). */
.search-highlight {
  animation: search-highlight-fade 2.5s ease-out;
  border-radius: 10px;
}
@keyframes search-highlight-fade {
  0%   { box-shadow: 0 0 0 3px var(--color-primary, #facc15); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media screen and (max-width: 768px) {
  .nav-search-wrap {
    position: static;
    width: 100%;
    margin-top: 0.6rem;
  }
}

/* A hamburger-gomb csak mobil nézetben látszik (ld. lejjebb a media query-ben) */
nav .menu-toggle {
  display: none;
  background: none;
  border: none;
  color: white;
  font-size: 2rem;
  position: absolute;
  right: 1rem;
  top: 1rem;
}

/* === Nyitóképernyő (háttérvideó + cím) === */
.hero {
  position: relative;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
}
.hero video {
  width: 100%;
  height: auto;
  display: block;
}
.hero-content {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  text-align: center;
  width: 100%;
  padding: 0 10px;
  z-index: 2;
}
.hero-content h1 {
  font-size: 6vw;
  margin: 0;
}
.hero-content p {
  font-size: 3vw;
  margin: 0.5em 0;
}

/* Minden <section> egységes belső térköze + középre igazított szövege */
section {
  padding: 2.5rem 1rem;
  text-align: center;
}
/* A szalag közvetlenül utána következő szekciója (Visszaszámláló vagy az
   első tartalmi blokk) kevesebb felső térközt kapjon, hogy ne legyen
   feleslegesen nagy, "üres" hely a szalag és a tartalom között. */
.artist-marquee + section {
  padding-top: 1.5rem;
}
iframe {
  max-width: 100%;
}

/* === Mobil nézet (768px alatt) === */
@media screen and (max-width: 768px) {
  nav > ul {
    flex-direction: column;
    background-color: rgba(0,0,0,0.95);
    padding-bottom: 1rem;
    /* JAVÍTVA — VALÓDI HIBA: korábban "display:none/flex"-fel villant elő/el
       a menü, ami nem tud animálni (nincs átmenet a display-en), és a
       swipe-gesztus is csak hirtelen tűnt el, nem "húzódott" láthatóan. Most
       transform+opacity animál, ami sima, látható mozgást ad. */
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: transform .3s ease, opacity .25s ease;
    z-index: 20;
  }
  /* JAVÍTVA — VALÓDI, ISMÉTLŐDŐ HIBA: a "Fellépők" almenü korábban egy
     koppintásra nyíló/csukódó JS-interakción múlt, ami többször is
     megbízhatatlannak bizonyult (nem reagált koppintásra, vagy nem
     látszott). Mobilon most EGYSZERŰEN MINDIG NYITVA van — nincs mit
     elrontani, nem függ semmilyen JS-eseménykezelőtől. */
  nav li.has-dropdown .dropdown {
    display: none;
  }
  nav li.has-dropdown.open .dropdown {
    display: block !important;
    position: relative;
    z-index: 1;
    background: rgba(255,255,255,0.05);
    margin-top: 0.4rem;
    border-radius: 6px;
  }
  nav > ul.active {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  /* A "bárhova koppintva/húzva bezáródik" viselkedést mostantól tisztán
     JS-ből, egy dokumentum-szintű eseményfigyelővel oldjuk meg (lásd
     js/main.js) — NEM egy külön DOM-elemmel, mert az korábban megzavarta a
     nav flex-elrendezését (a hamburger-gomb a bal oldalra csúszott és
     kilógott a képernyőből). */
  /* Vékony, csak mobilon látszó elválasztó a menüpontok közt — balról
     zárt (nem lóg ki), de nem húzódik a sor teljes szélességéig.
     JAVÍTVA — VALÓDI HIBA: a ">" (közvetlen gyermek) nélkül ez a szabály a
     BEÁGYAZOTT "Fellépők" almenü elemeire is ráment, és a rájuk kényszerített
     78%-os szélesség eltakarta/levágta az almenü-linkek szövegét. */
  nav > ul.active > li:not(:last-child) {
    width: 78%;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary, #facc15) 35%, transparent);
    padding-bottom: 0.5rem;
    margin-bottom: 0.3rem;
  }
  nav .menu-toggle {
    display: block;
    /* JAVÍTVA — VALÓDI, SÚLYOS HIBA: itt korábban "position: relative"-re
       állítottam a gombot (hogy "mindig felül maradjon"), de ez felülírta a
       helyes "position: absolute"-ot (ami a 180. sor körüli alap-szabályból
       jött), miközben az OTT megadott "right: 1rem" érték továbbra is
       érvényben maradt. Relatív pozicionálásnál a "right" a NORMÁL
       (dokumentum-folyásbeli) helyéhez képest tolja el az elemet balra — ez
       kitolta a gombot a látható területen kívülre, és emiatt vált az EGÉSZ
       OLDAL balra húzhatóvá (horizontális túlcsordulás). A z-index önmagában
       is elég ahhoz, hogy a gomb a lenyíló menü FÖLÖTT maradjon — nincs
       szükség a position megváltoztatására. */
    z-index: 30;
  }
  .hero-content h1 {
    font-size: 8vw;
  }
  .hero-content p {
    font-size: 4vw;
  }
}


/* === Zenekarok görgetős szalagcím (marquee) a főoldalon === */
.artist-marquee {
  width: 100%;
  overflow: hidden;
  background: var(--color-bg);
  color: var(--color-text);
  padding: 1rem 0 0;
  position: relative;
  white-space: nowrap;
  box-sizing: border-box;
}

.artist-track {
  display: inline-flex;    /* a két .artist-track-copy egymás mellett, a doboz szélessége a kettő összege */
  width: max-content;
  will-change: transform;
  /* JAVÍTVA — VALÓDI HIBA: korábban itt egy CSS "animation" mozgatta a
     szalagot, de ez néhány mobil böngészőn (főleg álló nézetben) leállt/
     eltűnt, és csak tájolás-váltásra "ébredt fel" — vagyis a korábbi
     "javításom" valójában csak ugyanazt a lépést reprodukálta, amivel a
     felhasználó helyrehozta, nem a valódi okot oldotta meg. Mostantól a
     js/marquee.js egy requestAnimationFrame-alapú, ELTELT VALÓDI IDŐ szerint
     számoló hurokkal mozgatja (inline style="transform"), ami nem függ a
     böngésző CSS-animáció motorjától, és nem "ragadhat be" ugyanígy.
  */
}

.artist-track-copy {
  padding-right: 3rem;      /* térköz a két ismétlődő másolat között */
  font-size: 1.2rem;
  letter-spacing: 1px;
  white-space: nowrap;
}


/* === Színpaletta CSS-változókban ===
   Ezeket írja felül futásidőben a js/theme.js, az admin felület RGB
   picker-ével elmentett értékek alapján (data/theme.json -> api/theme.php). */
:root {
  --color-primary: #facc15;  /* fő/akcent szín — ezt írja át az admin RGB picker */
  --color-bg: #111111;
  --color-text: #ffffff;
}

body {
  font-family: 'Staatliches', sans-serif; /* felülírja a fájl elején beállított "sans-serif"-et */
}

/* A visszaszámláló (logwork.com) külső widget, saját betűtípust hoz magával —
   itt kényszerítjük rá az oldal alap betűtípusát (!important, mert a widget
   valószínűleg inline style-lal vagy saját stíluslappal állítja be a sajátját).
   A #ctdwn a widget körüli div, minden leszármazottjára ráterjesztjük. */
#ctdwn, #ctdwn * {
  font-family: 'Staatliches', sans-serif !important;
}

/* Lásd a fájl elején lévő "nav" szabályt és a hozzá fűzött megjegyzést —
   EZ a később olvasott, ténylegesen érvényesülő verzió.
   JAVÍTVA — VALÓDI, MÉLYEN REJTETT HIBA: a "position: sticky" a beágyazott
   "position: absolute" legördülő almenüvel kombinálva egy Chromium-specifikus
   hit-teszt hibát okozott — az almenü linkjei LÁTHATÓAK voltak, helyes
   méretűek, de a böngésző a kattintást/koppintást a <html> gyökérelemre
   irányította át, nem a linkre (mintha "láthatatlan valami" lenne fölöttük).
   Ezt egy elszigetelt Playwright-teszttel sikerült konkrétan reprodukálni és
   bebizonyítani: "position: fixed"-re cserélve a hiba azonnal megszűnt. */
nav {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
}
/* "position: fixed" kiveszi a nav-ot a normál dokumentum-folyásból (nem
   foglal helyet), ezért az oldal tartalmának teteje enélkül a nav ALÁ
   csúszna — ezt a body felső paddingjével pótoljuk. */
body {
  padding-top: 68px;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
}

a:link,
a:visited {
  color: var(--color-primary);      /* sima szöveg színe */
  text-decoration: none;
}

/* === Kapcsolat: térkép + infó-szöveg === */
.kapcsolat-info-map {
  max-width: 700px;
  margin: 1.5rem auto 0;
  text-align: left;
}
.kapcsolat-map-box {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 18px rgba(0,0,0,0.35);
  margin-bottom: 1rem;
}
.kapcsolat-map-box iframe {
  display: block;
  /* A Google Maps egyszerű (API-kulcs nélküli) embed-je nem támogat natív
     sötét témát, ezért egy CSS-szűrővel szimuláljuk: invertáljuk a színeket,
     majd visszaforgatjuk a színárnyalatot, hogy a víz/zöld ne legyen furcsa. */
  filter: invert(92%) hue-rotate(180deg) brightness(0.95) contrast(0.9);
}
.kapcsolat-map-caption {
  margin: 0;
  padding: 0.6rem 1rem;
  background: rgba(0,0,0,0.35);
  font-size: 0.95rem;
  font-weight: bold;
}
.kapcsolat-info-text {
  line-height: 1.6;
  text-align: center;
  font-size: 1.1rem;
}

/* === Egyedi szekciók: kép-galéria ===
   FLEXBOX-alapú, nem CSS Grid — a --gal-basis CSS-változót az index.php
   állítja be inline style-ban, kép-számhoz igazítva (lásd render_section_gallery()).
   A flex-grow miatt a hiányos utolsó sor (pl. 4 képnél a 4.) is automatikusan
   kitölti a rendelkezésre álló szélességet, nem marad "árván" kis méretű. */
.custom-section-text {
  max-width: 700px;
  margin: 0 auto 1.2rem;
  text-align: left;
  line-height: 1.5;
}
.section-gallery {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 900px;
  margin: 0 auto 1.2rem;
}
.gallery-thumb {
  flex: 1 1 var(--gal-basis, 220px);
  min-width: 0;               /* flexbox-fix: ne akadályozza a zsugorodást az eredeti képméret */
  box-sizing: border-box;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .15s;
}
/* Egyetlen kép esetén magasabb, "banner"-szerű megjelenés, ne egy alacsony csík legyen */
.section-gallery-single .gallery-thumb {
  height: 420px;
  max-height: 60vh;
}
.gallery-thumb:hover {
  transform: scale(1.02);
}
@media screen and (max-width: 600px) {
  .gallery-thumb { height: 160px; }
  .section-gallery-single .gallery-thumb { height: 260px; }
}

/* === Lightbox (nagyított, léptethető kép-nézet) === */
#gallery-lightbox {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.92);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}
#gallery-lightbox.open {
  display: flex;
}
.gallery-lightbox-img {
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  /* FONTOS: flex-konténerben egy <img> alapértelmezett min-width/min-height-je
     az eredeti (natúr) képmérethez igazodna, ami felülírhatja a fenti
     max-width/max-height-et, és a kép "kilóghat" a képernyőről. A min-width/
     min-height 0-ra állítása ezt a klasszikus flexbox-hibát küszöböli ki. */
  min-width: 0;
  min-height: 0;
}
.gallery-close, .gallery-prev, .gallery-next {
  position: absolute;
  background: rgba(0,0,0,0.5);
  border: none;
  color: #fff;
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
  width: 48px;
  height: 48px;
}
.gallery-close { top: 16px; right: 16px; }
.gallery-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.gallery-next { right: 16px; top: 50%; transform: translateY(-50%); }



/* === Emlékeztető-idő választó panel (lineup.php) === */
#reminder-picker {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.75);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  padding: 1rem;
  box-sizing: border-box;
}
#reminder-picker.open {
  display: flex;
}
.reminder-picker-box {
  background: var(--color-bg, #111);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 1.4rem;
  width: 100%;
  max-width: 340px;
  text-align: center;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
}
.reminder-picker-title {
  margin: 0 0 0.8rem;
  font-size: 1.05rem;
}
.reminder-picker-name {
  color: var(--color-primary, #facc15);
  font-weight: bold;
}
.reminder-picker-value {
  margin: 0 0 0.6rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: var(--color-primary, #facc15);
}
.reminder-picker-slider {
  width: 100%;
  margin: 0.4rem 0 1.2rem;
  accent-color: var(--color-primary, #facc15);
}
.reminder-picker-btns {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
}
.reminder-picker-btns button {
  flex: 1;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  border: none;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.95rem;
}
.reminder-picker-cancel {
  background: rgba(255,255,255,0.1);
  color: var(--color-text, #fff);
}
.reminder-picker-ok {
  background: var(--color-primary, #facc15);
  color: var(--color-bg, #111);
}

/* === "Kedvenceim megtekintése" gomb (lineup.php) — EGYBEN AZ EGÉSZ OLDAL
   KANONIKUS GOMB-STÍLUSA is: mindenhol ezt (vagy a .favorites-btn-secondary
   párját) kell használni sima inline style-osított gomb helyett, hogy tényleg
   egységes legyen minden gomb a site-on. === */
.favorites-btn {
  display: inline-block;
  text-decoration: none;
  background: transparent;
  border: 2px solid var(--color-primary, #facc15);
  color: var(--color-primary, #facc15);
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: bold;
  font-size: 1rem;
  cursor: pointer;
  font-family: inherit;
  transition: background-color .2s ease, color .2s ease, transform .15s ease, box-shadow .2s ease;
}
.favorites-btn:hover {
  background: var(--color-primary, #facc15);
  color: var(--color-bg, #111);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--color-primary, #facc15) 25%, transparent);
}
.favorites-btn:active {
  transform: translateY(0) scale(0.97);
  box-shadow: none;
}
.favorites-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
/* Kompakt változat szűkebb helyekhez (admin kis gombok, lista-sorok) */
.favorites-btn-sm {
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
}

/* === lineup.php fejléc alatti gombsor === */
.lineup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 1.4rem;
}
.favorites-btn-secondary {
  border-color: rgba(255,255,255,0.35);
  color: var(--color-text, #fff);
}
.favorites-btn-secondary:hover {
  background: rgba(255,255,255,0.12);
  color: var(--color-text, #fff);
}

/* === "Kedvenceim" panel === */
/* === kedvenceim.php — a sorok/lista-elemek stílusa (js/favorites.js tölti fel) === */
#kedvenceim-oldal {
  max-width: 600px;
  margin: 0 auto;
}
.favorites-page-list {
  text-align: left;
  background: var(--color-bg, #111);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
  padding: 0.4rem 1.2rem;
  margin-top: 1.5rem;
}
.favorites-page-loading,
.favorites-page-empty {
  opacity: 0.6;
  font-size: 0.95rem;
  text-align: center;
  padding: 1.5rem 0.5rem;
}
.favorites-panel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.favorites-panel-row:last-child {
  border-bottom: none;
}
.favorites-panel-name {
  font-weight: bold;
  font-size: 1.05rem;
}
.favorites-panel-meta {
  font-size: 0.85rem;
  opacity: 0.7;
  margin-top: 0.2rem;
}
.favorites-panel-remove {
  flex-shrink: 0;
  background: rgba(248,113,113,0.15);
  color: #f87171;
  border: 1px solid rgba(248,113,113,0.4);
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.85rem;
}
.favorites-panel-remove:hover {
  background: rgba(248,113,113,0.3);
}

/* === kedvenceim.php — reggeli összefoglaló, iOS-stílusú kapcsoló === */
.daily-summary-toggle {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  max-width: 600px;
  margin: 1.5rem auto 0;
  text-align: left;
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1.4;
}
.switch {
  position: relative;
  display: inline-block;
  width: 46px;
  height: 26px;
  flex-shrink: 0;
}
.switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.switch-slider {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  transition: background-color .2s;
  cursor: pointer;
}
.switch-slider::before {
  content: "";
  position: absolute;
  height: 20px;
  width: 20px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.switch input:checked + .switch-slider {
  background: var(--color-primary, #facc15);
}
.switch input:checked + .switch-slider::before {
  transform: translateX(20px);
}
.switch input:disabled + .switch-slider {
  opacity: 0.5;
  cursor: not-allowed;
}
.daily-summary-label {
  flex: 1;
}
.daily-summary-status {
  max-width: 600px;
  margin: 0.5rem auto 0;
  text-align: left;
  font-size: 0.85rem;
  opacity: 0.75;
  min-height: 1.2em;
}

/* === kedvenceim.php — megosztható kártya === */
.share-card-section {
  max-width: 600px;
  margin: 2rem auto 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}
.share-card-section h2 {
  margin-bottom: 0.3rem;
  color: var(--color-primary, #facc15);
}
.share-card-section p {
  opacity: 0.8;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}
.share-card-preview {
  margin-top: 1.2rem;
}
.share-card-image {
  width: 100%;
  max-width: 320px;
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.5);
  display: block;
  margin: 0 auto;
}
.share-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  justify-content: center;
  margin-top: 1rem;
}

/* === mymotorock.php === */
#mymotorock-oldal {
  max-width: 700px;
  margin: 0 auto;
}
.mymotorock-soon {
  font-size: 1.1rem;
  opacity: 0.85;
  line-height: 1.6;
  margin: 0.5rem 0 2rem;
}

/* === #mymotorock galéria + feltöltés (közös blokk, lásd
   partials/mymotorock_gallery_block.php) === */
.mymotorock-upload-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px;
  padding: 1.2rem;
  margin-top: 1.5rem;
  text-align: left;
}
.mymotorock-upload-box label {
  display: block;
  margin: 0.8rem 0 0.3rem;
  font-size: 0.9rem;
  opacity: 0.85;
}
.mymotorock-upload-box input[type=file],
.mymotorock-upload-box input[type=text] {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55rem;
  border-radius: 6px;
  border: 1px solid #444;
  background: #0d0d0d;
  color: var(--color-text, #fff);
  font-size: 0.95rem;
}
.mymotorock-moderation-note {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
  font-size: 0.85rem;
  margin: 0 0 0.5rem;
}
.consent-label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.85rem !important;
  line-height: 1.4;
  margin: 1rem 0 !important;
  cursor: pointer;
}
.consent-label input {
  margin-top: 0.2rem;
  width: auto !important;
  flex-shrink: 0;
}
#mymotorock-upload-status {
  font-size: 0.85rem;
  margin-top: 0.6rem;
  min-height: 1.2em;
}
.mymotorock-gallery-section {
  margin-top: 2.5rem;
  text-align: left;
}
.mymotorock-gallery-section h2 {
  text-align: center;
}
.mymotorock-gallery-empty {
  opacity: 0.6;
  font-size: 0.9rem;
  text-align: center;
  padding: 1.5rem 0;
}
.mymotorock-gallery-item {
  position: relative;
  /* A flex-alapú méretezés (--gal-basis) erre a BURKOLÓ elemre kerül, mert a
     képhez Instagram-címkét is hozzáadunk, így az img már nem közvetlen
     gyereke a .section-gallery flex konténernek. */
  flex: 1 1 var(--gal-basis, 220px);
  min-width: 0;
  box-sizing: border-box;
}
.mymotorock-gallery-item .gallery-thumb {
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 8px;
  cursor: pointer;
  display: block;
}
.mymotorock-gallery-ig {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 0.7rem;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  pointer-events: none;
}
.mymotorock-top-btn-wrap {
  margin: 1rem 0 0.5rem;
}

/* === Értesítés-promó kártya (index.php, Hírek szekció alatt) === */
.notif-promo-card {
  margin-top: 1.5rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 10px;
  text-align: center;
  background: rgba(255,255,255,0.04);
}
.notif-promo-card p {
  margin: 0 0 0.7rem;
  font-size: 0.95rem;
}

/* ============================================================
   EGYSÉGES DIZÁJN-RENDSZER — checkbox, feltöltő-gomb, görgetéses
   megjelenés-animáció. A cél, hogy MINDEN checkbox/kapcsoló/gomb
   ugyanúgy nézzen ki a site egészén, ne oldalanként másképp.
   ============================================================ */

/* --- Egységes, szép checkbox (a .switch kapcsolóktól KÜLÖN — azok
   be/ki állapotot jelentenek, EZ sima "elfogadom" jellegű checkbox-okhoz) --- */
input[type="checkbox"]:not(.switch input) {
  appearance: none;
  -webkit-appearance: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 2px solid rgba(255,255,255,0.35);
  border-radius: 5px;
  background: rgba(255,255,255,0.04);
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  transition: background-color .15s ease, border-color .15s ease, transform .1s ease;
}
input[type="checkbox"]:not(.switch input):hover {
  border-color: var(--color-primary, #facc15);
}
input[type="checkbox"]:not(.switch input):checked {
  background: var(--color-primary, #facc15);
  border-color: var(--color-primary, #facc15);
}
input[type="checkbox"]:not(.switch input):checked::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--color-bg, #111);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
input[type="checkbox"]:not(.switch input):active {
  transform: scale(0.92);
}

/* --- Fájl-feltöltő "gomb" — a natív <input type=file> csúnya és
   böngészőnként más kinézetű; ehelyett egy .file-upload-btn OSZTÁLYÚ
   <label>-be kell csomagolni a (vizuálisan elrejtett) input-ot, hogy
   ugyanúgy nézzen ki, mint a többi gomb a site-on. Használat:
   <label class="favorites-btn file-upload-btn">Szöveg
     <input type="file" class="file-upload-input" ...>
   </label> --- */
.file-upload-btn {
  position: relative;
  overflow: hidden;
}
.file-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

/* --- Görgetéses megjelenés-animáció: a .scroll-reveal osztályú elemek
   halványan/lentről csúszva jelennek meg, amint a nézetbe érnek (nem
   induláskor egyszerre mind) — ezt egy apró JS (js/scroll-reveal.js)
   kapcsolja be az IntersectionObserver API-val. --- */
.scroll-reveal {
  opacity: 0;
  transform: translateY(70px) scale(0.9);
  transition: opacity .7s ease, transform .7s cubic-bezier(.16,.84,.44,1);
}
.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
/* Jobbról beúszó változat (fellépő-kártyák) */
.scroll-reveal-right {
  opacity: 0;
  transform: translateX(90px) scale(0.92);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.44,1);
}
.scroll-reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0) scale(1);
}
/* Fentről beúszó változat */
.scroll-reveal-top {
  opacity: 0;
  transform: translateY(-70px) scale(0.9);
  transition: opacity .6s ease, transform .6s cubic-bezier(.16,.84,.44,1);
}
.scroll-reveal-top.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* Finom, egységes "lebegés" hover-re a kártya-jellegű elemeken */
.notif-section, .loc-box, .notif-promo-card {
  transition: transform .2s ease, box-shadow .2s ease;
}

html {
  scroll-behavior: smooth;
}
/* Biztonsági háló: az oldal SOSE legyen vízszintesen elhúzható/görgethető,
   bármilyen jövőbeli elrendezési hiba (pl. egy elem kicsúszása) miatt sem —
   ez akadályozta volna meg a mostani hamburger-hibából adódó, egész oldalra
   kiterjedő balra-húzhatóságot is. */
html, body {
  overflow-x: hidden;
  max-width: 100vw;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-reveal, .favorites-btn, html { transition: none !important; scroll-behavior: auto !important; }
}

/* === Cookie-tájékoztató sáv (csak első megnyitáskor, lásd js/cookie-consent.js) === */
.cookie-consent-banner {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
  background: rgba(10,10,10,0.97);
  border-top: 1px solid var(--color-primary, #facc15);
  padding: 0.9rem 1.2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transform: translateY(100%);
  transition: transform .35s ease;
}
.cookie-consent-banner.show {
  transform: translateY(0);
}
.cookie-consent-banner p {
  margin: 0;
  font-size: 0.85rem;
  opacity: 0.9;
  text-align: center;
}
.cookie-consent-banner a {
  color: var(--color-primary, #facc15);
}

/* === Toast-értesítés (js/toast.js) === */
.toast-container {
  position: fixed;
  bottom: 5.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
  pointer-events: none;
}
.toast {
  background: rgba(15,15,15,0.95);
  border: 1px solid rgba(255,255,255,0.2);
  color: #fff;
  padding: 0.6rem 1.1rem;
  border-radius: 999px;
  font-size: 0.85rem;
  box-shadow: 0 6px 20px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .25s ease, transform .25s ease;
  white-space: nowrap;
}
.toast.show {
  opacity: 1;
  transform: translateY(0);
}
.toast-success { border-color: #16a34a; }
.toast-error { border-color: #7f1d1d; }
.toast-info { border-color: var(--color-primary, #facc15); }

/* === Hover-ragyogás a fellépő-logókon === */
/* JAVÍTVA: korábban csak a pontos 48px-es <img>-re kellett hoverelni, ami
   sok esetben (elemek egymásra rétegződése, kis célterület) nem váltott ki
   látható reakciót. Most az EGÉSZ SORRA (.lineup-row) hoverelve/érintve
   reagál a benne lévő kép — sokkal nagyobb, megbízhatóbb célterület — és a
   sor maga is finoman megemelkedik/kiemelkedik. */
.lineup-row {
  transition: transform .35s cubic-bezier(.16,.84,.44,1), background-color .2s ease, opacity .6s ease;
  cursor: default;
}
.lineup-row img {
  transition: filter .25s ease, transform .25s ease;
}
.lineup-row:hover,
.lineup-row:active {
  transform: translateY(-2px);
  background-color: color-mix(in srgb, var(--color-primary, #facc15) 6%, transparent) !important;
}
.lineup-row:hover img,
.lineup-row:active img {
  filter: brightness(1.2) drop-shadow(0 0 10px color-mix(in srgb, var(--color-primary, #facc15) 60%, transparent));
  transform: scale(1.08);
}

/* === Szkeleton betöltő-animáció === */
.skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,0.06) 25%, rgba(255,255,255,0.12) 37%, rgba(255,255,255,0.06) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
  border-radius: 8px;
}
@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* ============================================================
   HÁTTÉR-EFFEKTEK (admin/theme.php-n választható) — MINDEGYIK
   kizárólag a --color-primary / --color-bg CSS-változóktól függ,
   nincs bennük kemény-kódolt szín. A body kap egy osztályt
   (js/theme.js állítja be), ami alapján az alábbiak közül aktiválódik
   valamelyik (vagy semelyik), plusz a fényes csík külön, bármelyikre
   ráépíthető.
   ============================================================ */

/* 2. Finom rácsminta */
body.bg-style-grid {
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-primary, #facc15) 8%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-primary, #facc15) 8%, transparent) 1px, transparent 1px);
  background-size: 42px 42px;
}

/* 3. Radiális "spotlight" a lap tetején */
body.bg-style-spotlight {
  background-image: radial-gradient(
    ellipse 1100px 650px at 50% -5%,
    color-mix(in srgb, var(--color-primary, #facc15) 32%, transparent),
    transparent 65%
  );
  background-repeat: no-repeat;
}

/* 4. Lassan úszó "aurora" folt — két, egymástól eltérő tempóban lebegő,
   elmosott folt, KIZÁRÓLAG az elsődleges szín különböző erősségű
   változataiból, animálva. */
body.bg-style-aurora {
  position: relative;
}
body.bg-style-aurora::before,
body.bg-style-aurora::after {
  content: "";
  position: fixed;
  /* Fix pixel-alapú méret ÉS pozíció (nem vmax) — így nagy (desktop)
     képernyőn sem eshet ki teljesen a látható területről egyik folt sem,
     és a blur() költsége is kiszámítható/korlátos marad. */
  width: 420px;
  height: 420px;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.28;
  pointer-events: none;
}
body.bg-style-aurora::before {
  background: var(--color-primary, #facc15);
  top: -120px;
  left: -80px;
  animation: aurora-drift-1 13s ease-in-out infinite alternate;
}
body.bg-style-aurora::after {
  background: color-mix(in srgb, var(--color-primary, #facc15) 55%, white);
  bottom: -140px;
  right: -100px;
  animation: aurora-drift-2 15s ease-in-out infinite alternate;
}
@keyframes aurora-drift-1 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(120px, 90px); }
}
@keyframes aurora-drift-2 {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-100px, -110px); }
}

/* 5. Váltakozó szekció-árnyalat — minden páros <section> egy hajszálnyival
   világosabb árnyalatot kap a háttérszínből, hogy görgetéskor érezhető
   legyen a tagolás. */
body.bg-style-sections section:nth-of-type(even) {
  background-color: color-mix(in srgb, var(--color-bg, #111111) 92%, white);
}

/* + Diagonális fényes csík — BÁRMELYIK fenti stílusra ráépíthető, egymástól
   függetlenül kapcsolható. Egy vékony, elforgatott fénysáv úszik át
   időnként a háttéren, mint egy fémfelület csillanása. */
body.bg-shine-sweep {
  position: relative;
  overflow-x: clip;
}
html.bg-shine-sweep::before {
  content: "";
  position: fixed;
  top: -50vh;
  left: -20vw;
  width: 40vw;
  height: 200vh;
  background: linear-gradient(
    100deg,
    transparent 40%,
    color-mix(in srgb, var(--color-primary, #facc15) 22%, transparent) 50%,
    transparent 60%
  );
  transform: translateX(0) rotate(8deg);
  animation: shine-sweep 9s ease-in-out infinite;
  pointer-events: none;
  will-change: transform;
}
@keyframes shine-sweep {
  /* JAVÍTVA — VALÓDI HIBA (lag): korábban a "left" CSS-tulajdonságot
     animáltuk, ami minden egyes képkockán KÉNYSZERÍTETT ELRENDEZÉS-
     ÚJRASZÁMOLÁST (layout reflow) okoz a böngészőben — ez az egyik
     legdrágább művelet, amit lehet, és folyamatosan futott (9 mp-enként
     ismétlődve, végtelenül). A "transform" tulajdonság ezzel szemben a
     GPU-n, elrendezés-újraszámolás nélkül animálható — ugyanaz a vizuális
     hatás, töredéknyi terheléssel. */
  0%   { transform: translateX(0) rotate(8deg); }
  35%  { transform: translateX(140vw) rotate(8deg); }
  100% { transform: translateX(140vw) rotate(8deg); }
}

@media (prefers-reduced-motion: reduce) {
  body.bg-style-aurora::before,
  body.bg-style-aurora::after,
  html.bg-shine-sweep::before {
    animation: none !important;
  }
}

/* A "Hol vagytok?"/#mymotorock oldalakon már bevált, átlátszó kártya-nézet
   (rgba(255,255,255,.04) háttér, halvány fehér szegély) kiterjesztve a
   főoldal és más oldalak tartalmi szekcióira is, hogy egységes legyen az
   egész site — a hero (videó) és a visszaszámláló-widget kivételével,
   azoknak saját, speciális megjelenésük van. */
/* JAVÍTVA: korábban EZ a szabály minden szekcióra rátette a kártya-hátteret,
   de a "Hol vagytok?"/#mymotorock/fellépő-lista oldalakon már VOLT saját,
   beágyazott kártya-nézet (.loc-box, .notif-section, stb.) — a kettő
   egymásba ágyazva "sok üveg" (kettős átlátszó keret) hatást adott. Most ez
   csak OPT-IN, kizárólag a főoldalon, admin/theme.php kapcsolójával. */
body.homepage-section-cards section:not(.hero):not(#countdown) {
  max-width: 900px;
  margin: 1.5rem auto;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 14px;
}

/* Mobilon a 420px-es aurora-folt aránytalanul nagy volt a kis képernyőhöz
   képest — kisebb, arányosabb méret. */
@media screen and (max-width: 768px) {
  body.bg-style-aurora::before,
  body.bg-style-aurora::after {
    width: 240px;
    height: 240px;
    filter: blur(40px);
  }
  body.bg-style-aurora::before { top: -70px; left: -50px; }
  body.bg-style-aurora::after { bottom: -80px; right: -60px; }
}