/* ============================================================
   A könyvkötő könyvesboltja — közös stílus
   Antikvárium hangulat: sötét, barnás, fa hatás
   ============================================================ */

:root {
  /* --- Antikvárium paletta (sötét, barnás, fa) --- */
  --fa-sotet:        #1c1410;  /* legmélyebb háttér */
  --fa-kozep:        #2a1d14;  /* fő háttér */
  --fa-vilagos:      #3a2818;  /* kártya / panel */
  --fa-vilagosabb:   #4a3520;  /* emelt panel */
  --bor:             #5c3a21;  /* keret, gerinc barna */
  --bor-vilagos:     #7a4f30;

  --arany:           #c9a25e;  /* arany kiemelés */
  --arany-vilagos:   #e3c389;
  --arany-melyebb:   #a87f3e;
  --rez:             #b08d57;

  --pergamen:        #f3e7cf;  /* világos szöveg, "papír" */
  --pergamen-halvany:#d8c7a3;
  --pergamen-tompa:  #a8987a;

  --voros:           #8b3a2f;  /* mély bordó akcent */
  --voros-vilagos:   #a64b3c;
  --zold-patina:     #5a6b4d;  /* patinás zöld */

  /* Tipográfia */
  --betu-cim: "Playfair Display", "Georgia", serif;
  --betu-szoveg: "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --betu-ui: "Cormorant Garamond", "Georgia", serif;

  /* Méretek */
  --radius: 4px;
  --radius-nagy: 8px;
  --arnyek: 0 6px 24px rgba(0,0,0,.45);
  --arnyek-mely: 0 12px 40px rgba(0,0,0,.6);

  /* Fa textúra szín (CSS gradiens alap) */
  --fa-csik-1: #2a1d14;
  --fa-csik-2: #241810;

  /* Fejléc-csíkok (a fejléc hátteréhez, témánként cserélhető) */
  --fejlec-csik-1: #3a2818;
  --fejlec-csik-2: #341f12;
  /* Általános szövegszín (világos témánál sötétre vált) */
  --szoveg-szin: var(--pergamen);
}

/* ============================================================
   SZÍNTÉMÁK — a felhasználó a fejléc színválasztójával vált.
   Mindegyik csak a CSS-változókat írja felül; az oldal többi
   része változatlan marad, mert mindenhol ezeket használja.
   Alapértelmezett (téma nélkül): "Világos pergamen".
   ============================================================ */

/* 5 · VILÁGOS PERGAMEN — ez az alapértelmezett (data-tema nélkül is) */
:root,
[data-tema="pergamen"] {
  --fa-sotet:        #e7dcc6;
  --fa-kozep:        #f4ecdc;
  --fa-vilagos:      #fbf6ea;
  --fa-vilagosabb:   #fffdf6;
  --bor:             #cbb48c;
  --bor-vilagos:     #b89a6a;

  --arany:           #9a6b2f;
  --arany-vilagos:   #6e4a1f;
  --arany-melyebb:   #b8893f;
  --rez:             #9a6b2f;

  --pergamen:        #3a2f22;
  --pergamen-halvany:#5a4a37;
  --pergamen-tompa:  #8a7a60;

  --voros:           #8b3a2f;
  --voros-vilagos:   #a64b3c;
  --zold-patina:     #6a7a4d;

  --arnyek: 0 6px 22px rgba(80,60,30,.18);
  --arnyek-mely: 0 12px 36px rgba(80,60,30,.26);

  --fa-csik-1: #f4ecdc;
  --fa-csik-2: #efe5d1;
  --fejlec-csik-1: #ece3d2;
  --fejlec-csik-2: #e6dcc6;
  --szoveg-szin: var(--pergamen);
}

/* 1 · ÉJKÉK & ARANY */
[data-tema="ejkek"] {
  --fa-sotet:        #0c0f17;
  --fa-kozep:        #141927;
  --fa-vilagos:      #1c2336;
  --fa-vilagosabb:   #283150;
  --bor:             #2f3a55;
  --bor-vilagos:     #445273;

  --arany:           #d4af6a;
  --arany-vilagos:   #ecd29a;
  --arany-melyebb:   #b08d4e;
  --rez:             #c2a567;

  --pergamen:        #e8ebf3;
  --pergamen-halvany:#c7cde0;
  --pergamen-tompa:  #9aa3bd;

  --voros:           #7d4a3e;
  --voros-vilagos:   #9a5d4d;
  --zold-patina:     #5a6b8d;

  --arnyek: 0 6px 24px rgba(0,0,0,.5);
  --arnyek-mely: 0 12px 40px rgba(0,0,0,.65);

  --fa-csik-1: #141927;
  --fa-csik-2: #11151f;
  --fejlec-csik-1: #161c2c;
  --fejlec-csik-2: #10141f;
  --szoveg-szin: var(--pergamen);
}

/* 2 · SMARAGD & RÉZ */
[data-tema="smaragd"] {
  --fa-sotet:        #0b1410;
  --fa-kozep:        #12211c;
  --fa-vilagos:      #1a2e27;
  --fa-vilagosabb:   #244036;
  --bor:             #2d4a3f;
  --bor-vilagos:     #406254;

  --arany:           #c98a4b;
  --arany-vilagos:   #e6b780;
  --arany-melyebb:   #a87138;
  --rez:             #bd8348;

  --pergamen:        #e6efe9;
  --pergamen-halvany:#c2d4ca;
  --pergamen-tompa:  #92a89c;

  --voros:           #8a5a2b;
  --voros-vilagos:   #a76e38;
  --zold-patina:     #5a8b6d;

  --arnyek: 0 6px 24px rgba(0,0,0,.45);
  --arnyek-mely: 0 12px 40px rgba(0,0,0,.6);

  --fa-csik-1: #12211c;
  --fa-csik-2: #0f1c18;
  --fejlec-csik-1: #15281f;
  --fejlec-csik-2: #0f1a16;
  --szoveg-szin: var(--pergamen);
}

/* 3 · TISZTA FEHÉR (világos háttér, fekete betű) */
[data-tema="bordo"] {
  --fa-sotet:        #ececec;
  --fa-kozep:        #f7f7f7;
  --fa-vilagos:      #ffffff;
  --fa-vilagosabb:   #ffffff;
  --bor:             #d2d2d2;
  --bor-vilagos:     #bcbcbc;

  --arany:           #2a2a2a;
  --arany-vilagos:   #000000;
  --arany-melyebb:   #555555;
  --rez:             #2a2a2a;

  --pergamen:        #111111;
  --pergamen-halvany:#333333;
  --pergamen-tompa:  #666666;

  --voros:           #444444;
  --voros-vilagos:   #222222;
  --zold-patina:     #555555;

  --arnyek: 0 6px 22px rgba(0,0,0,.10);
  --arnyek-mely: 0 12px 36px rgba(0,0,0,.16);

  --fa-csik-1: #ffffff;
  --fa-csik-2: #f4f4f4;
  --fejlec-csik-1: #f2f2f2;
  --fejlec-csik-2: #e8e8e8;
  --szoveg-szin: var(--pergamen);
}

/* 4 · PALAKÉK & KRÉM */
[data-tema="palakek"] {
  --fa-sotet:        #161c22;
  --fa-kozep:        #222b33;
  --fa-vilagos:      #2c3742;
  --fa-vilagosabb:   #384753;
  --bor:             #3f4d5a;
  --bor-vilagos:     #56697a;

  --arany:           #d8a657;
  --arany-vilagos:   #ecc684;
  --arany-melyebb:   #b6873f;
  --rez:             #c79a52;

  --pergamen:        #eef2f5;
  --pergamen-halvany:#cdd7df;
  --pergamen-tompa:  #9fb0bd;

  --voros:           #5a7a8c;
  --voros-vilagos:   #6e92a6;
  --zold-patina:     #5a8b7d;

  --arnyek: 0 6px 24px rgba(0,0,0,.45);
  --arnyek-mely: 0 12px 40px rgba(0,0,0,.6);

  --fa-csik-1: #222b33;
  --fa-csik-2: #1e262d;
  --fejlec-csik-1: #283139;
  --fejlec-csik-2: #1b2228;
  --szoveg-szin: var(--pergamen);
}

/* --- Alap reset --- */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--betu-szoveg);
  font-size: 1.16rem;
  line-height: 1.72;
  color: var(--pergamen);
  background-color: var(--fa-kozep);
  /* Finom fa-erezet a háttéren */
  background-image:
    repeating-linear-gradient(
      90deg,
      var(--fa-csik-1) 0px,
      var(--fa-csik-1) 38px,
      var(--fa-csik-2) 38px,
      var(--fa-csik-2) 40px
    ),
    radial-gradient(ellipse at top, var(--bor-vilagos), transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--arany); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--arany-vilagos); }

/* ============================================================
   FEJLÉC
   ============================================================ */
.fejlec {
  background:
    linear-gradient(180deg, rgba(0,0,0,.18), transparent),
    repeating-linear-gradient(90deg, var(--fejlec-csik-1) 0, var(--fejlec-csik-1) 60px, var(--fejlec-csik-2) 60px, var(--fejlec-csik-2) 62px);
  border-bottom: 3px solid var(--bor);
  box-shadow: 0 4px 20px rgba(0,0,0,.5);
  padding: 1.4rem 1rem 1.6rem;
  text-align: center;
  position: relative;
}
.fejlec::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px; height: 3px;
  background: linear-gradient(90deg, transparent, var(--arany), transparent);
  opacity: .6;
}

.fejlec-logo {
  display: inline-flex;
  align-items: center;
  gap: .85rem;
  color: var(--arany-vilagos);
}
.fejlec-logo svg { flex: none; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

.bolt-cim {
  font-family: var(--betu-cim);
  font-weight: 700;
  font-size: clamp(1.8rem, 1rem + 3.2vw, 3.4rem);
  letter-spacing: .5px;
  margin: 0;
  color: var(--arany-vilagos);
  text-shadow: 0 2px 6px rgba(0,0,0,.6), 0 0 1px var(--arany);
  line-height: 1.1;
}
.bolt-alcim {
  font-family: var(--betu-ui);
  font-size: clamp(.72rem, .55rem + .7vw, .95rem);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: var(--pergamen-tompa);
  margin: .45rem 0 0;
  line-height: 1.6;
}

/* Navigáció */
.fo-nav {
  margin-top: 1rem;
  display: flex;
  justify-content: center;
  gap: 1.4rem;
  flex-wrap: wrap;
}
.fo-nav a {
  font-family: var(--betu-ui);
  font-size: 1.15rem;
  letter-spacing: 1px;
  color: var(--pergamen-halvany);
  padding: .25rem .6rem;
  border-bottom: 2px solid transparent;
}
.fo-nav a:hover, .fo-nav a.aktiv {
  color: var(--arany-vilagos);
  border-bottom-color: var(--arany);
}

/* ============================================================
   KÖZÖS ELEMEK
   ============================================================ */
.tartalom { max-width: 1240px; margin: 0 auto; padding: 2rem 1.1rem 4rem; }

.szekcio-cim {
  font-family: var(--betu-cim);
  font-size: clamp(1.5rem, 1rem + 2vw, 2.2rem);
  color: var(--arany-vilagos);
  text-align: center;
  margin: 2.2rem 0 1.4rem;
  position: relative;
}
.szekcio-cim::after {
  content: "❧";
  display: block;
  color: var(--arany-melyebb);
  font-size: 1.3rem;
  margin-top: .3rem;
}

/* Pergamen panel */
.panel {
  background:
    linear-gradient(180deg, rgba(243,231,207,.04), transparent),
    var(--fa-vilagos);
  border: 1px solid var(--bor);
  border-radius: var(--radius-nagy);
  box-shadow: var(--arnyek);
}

/* Gombok */
.gomb {
  display: inline-block;
  font-family: var(--betu-ui);
  font-size: 1.1rem;
  letter-spacing: .5px;
  color: var(--fa-sotet);
  background: linear-gradient(180deg, var(--arany-vilagos), var(--arany-melyebb));
  border: 1px solid var(--arany-melyebb);
  border-radius: var(--radius);
  padding: .5rem 1.3rem;
  cursor: pointer;
  text-align: center;
  box-shadow: 0 3px 8px rgba(0,0,0,.4);
  transition: transform .15s ease, box-shadow .2s ease, filter .2s ease;
}
.gomb:hover { filter: brightness(1.08); transform: translateY(-1px); color: var(--fa-sotet); box-shadow: 0 5px 14px rgba(0,0,0,.5); }
.gomb:active { transform: translateY(0); }

.gomb-vonal {
  background: transparent;
  color: var(--arany-vilagos);
  border: 1px solid var(--bor-vilagos);
}
.gomb-vonal:hover { background: rgba(201,162,94,.12); color: var(--arany-vilagos); }

/* ============================================================
   PLAKÁTOK (beharangozó sor)
   ============================================================ */
.plakat-sor { margin-top: .5rem; }
/* A plakát színt------ALAP (sötét témákhoz). Világos témáknál
   ezeket a változókat felülirjuk (lásd lentebb), hogy a két felső
   doboz olvasható maradjon. */
.plakat {
  --plakat-overlay-1: rgba(28,20,16,.35);
  --plakat-overlay-2: rgba(28,20,16,.85);
  --plakat-tonus:     rgba(28,20,16,.7);
  position: relative;
  min-height: 220px;
  border: 2px solid var(--bor);
  border-radius: var(--radius-nagy);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.6rem;
  color: var(--pergamen);
  box-shadow: var(--arnyek);
  background-size: cover;
  background-position: center;
}
.plakat::before {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--plakat-overlay-1) 0%, var(--plakat-overlay-2) 100%);
}
.plakat-1 {
  background-image:
    linear-gradient(135deg, rgba(92,58,33,.5), var(--plakat-tonus)),
    radial-gradient(circle at 30% 30%, var(--voros), transparent 60%);
}
.plakat-2 {
  background-image:
    linear-gradient(135deg, rgba(90,107,77,.4), var(--plakat-tonus)),
    radial-gradient(circle at 70% 30%, var(--arany-melyebb), transparent 60%);
}
/* Világos témák (pergamen + Tiszta fehér): világos plakát-háttér,
   sötét/olvasható szöveg — csak ezeket a változókat és a szövegszíneket
   érinti, az oldal többi részét nem. */
[data-tema="pergamen"] .plakat,
[data-tema="bordo"] .plakat {
  --plakat-overlay-1: rgba(255,255,255,.10);
  --plakat-overlay-2: rgba(255,255,255,.45);
  --plakat-tonus:     rgba(255,255,255,.55);
}
[data-tema="pergamen"] .plakat-fo,
[data-tema="bordo"] .plakat-fo { text-shadow: none; }
[data-tema="pergamen"] .plakat-szoveg,
[data-tema="bordo"] .plakat-szoveg { color: var(--pergamen); }
.plakat > * { position: relative; z-index: 1; }
.plakat-cimke {
  font-family: var(--betu-ui);
  text-transform: uppercase;
  letter-spacing: 2px;
  font-size: .9rem;
  color: var(--arany-vilagos);
}
.plakat-fo {
  font-family: var(--betu-cim);
  font-size: clamp(1.4rem, 1rem + 1.8vw, 2rem);
  margin: .3rem 0;
  color: var(--pergamen);
  text-shadow: 0 2px 6px rgba(0,0,0,.7);
}
.plakat-szoveg { font-size: 1rem; color: var(--pergamen-halvany); margin: 0; }

/* Kattintható akció-plakát (data-hashtag) */
.plakat-akcio { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.plakat-akcio:hover, .plakat-akcio:focus-visible {
  transform: translateY(-3px);
  box-shadow: var(--arnyek-mely);
  border-color: var(--arany);
  outline: none;
}
.plakat-akcio:focus-visible { box-shadow: 0 0 0 3px rgba(201,162,94,.45), var(--arnyek-mely); }
.plakat-akcio-jel {
  display: inline-block;
  margin-top: .8rem;
  font-family: var(--betu-ui);
  font-size: 1rem;
  letter-spacing: 1px;
  color: var(--arany-vilagos);
  border-bottom: 1px solid var(--arany-melyebb);
  padding-bottom: 2px;
  transition: gap .18s ease;
}
.plakat-akcio:hover .plakat-akcio-jel { color: var(--arany); }

/* ============================================================
   KIEMELT KÖNYVEK (4 db)
   ============================================================ */
.kiemelt-kartya {
  background: var(--fa-vilagos);
  border: 1px solid var(--bor);
  border-radius: var(--radius-nagy);
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: var(--arnyek);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  cursor: pointer;
}
.kiemelt-kartya:hover {
  transform: translateY(-4px);
  box-shadow: var(--arnyek-mely);
  border-color: var(--arany-melyebb);
}
.kiemelt-borito {
  aspect-ratio: 2/3;
  width: 100%;
  object-fit: cover;
  background: var(--fa-sotet);
  border-bottom: 2px solid var(--bor);
}
.kiemelt-test { padding: .85rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .35rem; flex: 1; }
.kiemelt-konyv-cim {
  font-family: var(--betu-cim);
  font-size: 1.2rem;
  color: var(--arany-vilagos);
  margin: 0;
  line-height: 1.2;
}
.kiemelt-mufaj { font-size: .98rem; color: var(--pergamen-tompa); margin: 0; }

/* ============================================================
   KERESŐ
   ============================================================ */
.kereso-doboz {
  background:
    linear-gradient(180deg, rgba(243,231,207,.03), transparent),
    var(--fa-vilagos);
  border: 2px solid var(--bor);
  border-radius: var(--radius-nagy);
  box-shadow: var(--arnyek);
  padding: 1.4rem 1.4rem 1.6rem;
  margin-top: 1rem;
}
.kereso-fejlec { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; }
.kereso-szabad {
  display: flex; gap: .6rem; flex-wrap: wrap; margin: .4rem 0 1.4rem;
}
.kereso-input {
  flex: 1 1 240px;
  font-family: var(--betu-szoveg);
  font-size: 1.05rem;
  color: var(--pergamen);
  background: var(--fa-sotet);
  border: 1px solid var(--bor-vilagos);
  border-radius: var(--radius);
  padding: .55rem .9rem;
}
.kereso-input::placeholder { color: var(--pergamen-tompa); }
.kereso-input:focus { outline: none; border-color: var(--arany); box-shadow: 0 0 0 2px rgba(201,162,94,.25); }

/* Egy keresősor — nyitható/csukható (natív <details>) */
.kereso-sor { margin-bottom: 1.1rem; }
.kereso-sor:last-child { margin-bottom: 0; }
.kereso-sor-cimke {
  font-family: var(--betu-ui);
  font-size: 1.05rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--arany);
  margin: 0;
  display: flex; align-items: center; gap: .5rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
}
.kereso-sor-cimke::-webkit-details-marker { display: none; }
.kereso-sor-cimke::marker { content: ""; }
.kereso-sor-cimke::before {
  content: "";
  width: 18px; height: 1px; background: var(--arany-melyebb); display: inline-block;
  flex: 0 0 auto;
}
.kereso-sor-felirat { flex: 1; }
/* Saját nyíl jelző a jobb szélen — zárt: lefelé */
.kereso-nyil {
  flex: 0 0 auto;
  width: 0; height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid var(--arany-melyebb);
  transition: transform .2s ease;
}
.kereso-sor[open] > .kereso-sor-cimke .kereso-nyil { transform: rotate(180deg); }
.kereso-sor-cimke:hover .kereso-sor-felirat { color: var(--arany-vilagos); }
.badge-sor { display: flex; flex-wrap: wrap; gap: .45rem; }
.kereso-sor[open] > .badge-sor { margin-top: .6rem; animation: kkBadgeBe .2s ease; }
@keyframes kkBadgeBe { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }

/* Badge-ek */
.kereso-badge {
  font-family: var(--betu-ui);
  font-size: .98rem;
  letter-spacing: .3px;
  padding: .28rem .75rem;
  border-radius: var(--radius-nagy);
  border: 1px solid var(--bor-vilagos);
  background: var(--fa-vilagosabb);
  color: var(--pergamen-halvany);
  cursor: pointer;
  transition: all .18s ease;
  white-space: nowrap;
}
.kereso-badge:hover { background: var(--bor); color: var(--arany-vilagos); border-color: var(--arany-melyebb); transform: translateY(-1px); }
.kereso-badge.aktiv {
  background: linear-gradient(180deg, var(--arany-vilagos), var(--arany-melyebb));
  color: var(--fa-sotet);
  border-color: var(--arany);
  font-weight: 600;
}
/* badge színváltozatok – egymáshoz alkalmazkodó tónusok */
.badge-t1 { border-color:#7a4f30; }
.badge-t2 { border-color:#6b5a3a; }
.badge-t3 { border-color:#5a6b4d; }
.badge-t4 { border-color:#8b5a3a; }

/* ============================================================
   TALÁLATI LISTA
   ============================================================ */
.talalat-fejlec {
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.5rem;
  margin: 1.6rem 0 .8rem; padding-bottom:.5rem; border-bottom:1px solid var(--bor);
}
.talalat-cim { font-family: var(--betu-cim); font-size:1.4rem; color: var(--arany-vilagos); margin:0; }
.talalat-szam { font-family: var(--betu-ui); color: var(--pergamen-tompa); font-size:1.05rem; }

.talalat-kartya {
  display: flex;
  gap: 1rem;
  background: var(--fa-vilagos);
  border: 1px solid var(--bor);
  border-radius: var(--radius-nagy);
  padding: .9rem;
  box-shadow: var(--arnyek);
  height: 100%;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.talalat-kartya:hover { transform: translateY(-3px); box-shadow: var(--arnyek-mely); border-color: var(--arany-melyebb); }
.talalat-borito {
  width: 92px; flex: none;
  aspect-ratio: 2/3;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--bor);
  background: var(--fa-sotet);
}
.talalat-info { display:flex; flex-direction:column; gap:.3rem; min-width:0; flex:1; }
.talalat-sorszam {
  font-family: var(--betu-ui); font-size:.85rem; letter-spacing:1px;
  color: var(--pergamen-tompa); text-transform:uppercase;
}
.talalat-konyv-cim { font-family: var(--betu-cim); font-size:1.25rem; color: var(--arany-vilagos); margin:0; line-height:1.2; }
.talalat-iro { font-style: italic; color: var(--pergamen-halvany); margin:0; }
.talalat-also { margin-top:auto; padding-top:.5rem; }

/* Üres állapot */
.ures-allapot {
  text-align:center; padding: 3rem 1rem; color: var(--pergamen-tompa);
  font-family: var(--betu-ui); font-size:1.2rem;
}
.ures-allapot .nagy-ikon { font-size: 3rem; display:block; margin-bottom:.6rem; opacity:.6; }

/* Állapotjelző / hibasáv */
.allapot-sav {
  font-family: var(--betu-ui);
  font-size: 1rem;
  text-align:center;
  padding:.7rem 1rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}
.allapot-info { background: rgba(90,107,77,.2); border:1px solid var(--zold-patina); color: var(--pergamen-halvany); }
.allapot-hiba { background: rgba(139,58,47,.25); border:1px solid var(--voros); color: var(--pergamen); }

/* Excel feltöltő sáv */
.feltolto-sav {
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  background: var(--fa-vilagosabb);
  border: 1px dashed var(--bor-vilagos);
  border-radius: var(--radius-nagy);
  padding: .9rem 1.2rem;
  margin-bottom: 1.4rem;
}
.feltolto-sav .felirat { font-family: var(--betu-ui); color: var(--pergamen-halvany); font-size:1.05rem; }
.feltolto-sav .felirat strong { color: var(--arany-vilagos); }

/* Lábléc */
.lablec {
  text-align:center;
  padding: 2rem 1rem;
  border-top: 2px solid var(--bor);
  color: var(--pergamen-tompa);
  font-family: var(--betu-ui);
  font-size: 1rem;
  background: rgba(0,0,0,.2);
}

/* Formázott szöveg (Excel-ből: sortörés, félkövér, emoji) */
.formazott { white-space: pre-wrap; }
.formazott strong { color: var(--arany-vilagos); font-weight: 700; }

/* ============================================================
   SZÍNVÁLASZTÓ (fejléc jobb felső sarka)
   ============================================================ */
.szinvalaszto {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  display: flex;
  align-items: center;
  gap: .5rem;
  z-index: 20;
}
.szinvalaszto-felirat {
  font-family: var(--betu-ui);
  font-size: .92rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--pergamen-tompa);
}
.szinvalaszto-gombok { display: flex; gap: .4rem; }
.szin-pont {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(127,127,127,.4);
  cursor: pointer;
  padding: 0;
  transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  position: relative;
}
.szin-pont:hover { transform: scale(1.15); }
.szin-pont.aktiv {
  border-color: var(--arany-vilagos);
  box-shadow: 0 0 0 2px var(--arany), 0 2px 6px rgba(0,0,0,.4);
}
.szin-pont:focus-visible { outline: 2px solid var(--arany-vilagos); outline-offset: 2px; }
/* A pontok színe (a témák fő háttér + arany párosítása) */
.szin-pont[data-tema="pergamen"] { background: linear-gradient(135deg, #f4ecdc 50%, #9a6b2f 50%); }
.szin-pont[data-tema="ejkek"]    { background: linear-gradient(135deg, #141927 50%, #d4af6a 50%); }
.szin-pont[data-tema="smaragd"]  { background: linear-gradient(135deg, #12211c 50%, #c98a4b 50%); }
.szin-pont[data-tema="bordo"]    { background: linear-gradient(135deg, #ffffff 50%, #111111 50%); }
.szin-pont[data-tema="palakek"]  { background: linear-gradient(135deg, #222b33 50%, #d8a657 50%); }

/* ============================================================
   RESZPONZÍV
   ============================================================ */
@media (max-width: 575px) {
  .talalat-kartya { flex-direction: row; }
  .talalat-borito { width: 78px; }
  .fo-nav { gap: .9rem; }
  .fo-nav a { font-size: 1.05rem; }
}
/* A színválasztó mobilon: a felirat elrejtődik, a pontok kisebbek,
   és a fejléc tetején maradnak (nem törik a címet). */
@media (max-width: 720px) {
  .szinvalaszto-felirat { display: none; }
  .szinvalaszto { top: .6rem; right: .6rem; gap: .3rem; }
  .szin-pont { width: 22px; height: 22px; }
  .fejlec { padding-top: 2.6rem; }
}

/* ============================================================
   LAPOZÓ (találatok lapozása)
   ============================================================ */
.lapozo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .4rem;
  margin: 2rem 0 .5rem;
}
.lapozo:empty { margin: 0; }
.lapozo-gomb {
  min-width: 42px;
  height: 42px;
  padding: 0 .7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--pergamen);
  background: var(--fa-vilagos);
  border: 1px solid var(--arany-melyebb);
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s, box-shadow .15s;
}
.lapozo-gomb:hover:not(:disabled):not(.aktiv) {
  background: var(--fa-vilagosabb);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--arnyek);
}
.lapozo-gomb.aktiv {
  background: var(--arany);
  border-color: var(--arany-vilagos);
  color: var(--fa-sotet);
  cursor: default;
  box-shadow: 0 0 0 2px var(--arany-melyebb), 0 2px 8px var(--arnyek);
}
.lapozo-gomb:disabled {
  opacity: .4;
  cursor: not-allowed;
}
.lapozo-gomb:focus-visible {
  outline: 2px solid var(--arany-vilagos);
  outline-offset: 2px;
}
.lapozo-nyil { font-size: 1.4rem; line-height: 1; }
.lapozo-pont {
  color: var(--pergamen-tompa);
  padding: 0 .2rem;
  user-select: none;
}
@media (max-width: 575px) {
  .lapozo-gomb { min-width: 38px; height: 38px; font-size: .95rem; padding: 0 .5rem; }
}