/* Sun Inn Automata Szolárium – webshop-specifikus kiegészítések az alap design rendszerhez. */

.footer-copy a { color: #adb5bd; text-decoration: underline; }
.page { min-height: calc(100vh - 320px); }
.breadcrumb { color: var(--gray-500); font-size: 0.9rem; margin-bottom: 16px; }
.breadcrumb a { color: var(--gray-500); }
.stack > * + * { margin-top: 16px; }
.muted { color: var(--gray-500); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.center { text-align: center; }

/* ---- Kedvezményjelvény a bérletkártyán ---- */

/* A kedvezményjelvény a kártyaképre ül rá — így nem tol lejjebb mindent. */

.summary-image,
.order-pass-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(33, 37, 41, 0.14);
  margin-bottom: 16px;
}
.order-pass-image { max-width: 260px; }

/* ---- A bérlet kedvezményének doboza az összegzőkben (ajándékdoboz-ikonnal) ---- */
.gift-icon { width: 1em; height: 1em; flex-shrink: 0; }
.gift-box {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 12px;
  padding: 13px 15px;
  border: 2px solid var(--neon);
  border-radius: 12px;
  background: linear-gradient(115deg, #0d2b2c 0%, #3b1530 52%, #0d2b2c 100%);
  color: var(--neon-vilagos);
}
.gift-box-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--neon);
  color: var(--white);
  box-shadow: 0 3px 10px rgba(76, 175, 130, 0.45);
}
.gift-box-icon .gift-icon { width: 22px; height: 22px; }
.gift-box-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.gift-box-amount { font-size: 1.3rem; font-weight: 800; letter-spacing: -0.5px; }
.gift-box-label {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  opacity: 0.85;
}
.gift-box-note { font-size: 0.84rem; opacity: 0.8; margin-top: 3px; }

/* Lassan átfutó fénycsík — a szem odatalál, de nem villog. */
.gift-box::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 40%;
  height: 220%;
  transform: rotate(18deg);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  animation: gift-shine 5s ease-in-out infinite;
}
@keyframes gift-shine {
  0%, 62% { left: -70%; }
  100% { left: 130%; }
}
@media (prefers-reduced-motion: reduce) {
  .gift-box::after { display: none; }
  
}

/* ---- Űrlapok ---- */
.form-card {
  background: var(--felulet);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 32px;
}
.field { margin-bottom: 20px; }
.field label { display: block; font-weight: 500; margin-bottom: 6px; }
.field .hint { display: block; color: var(--gray-500); font-size: 0.85rem; margin-top: 4px; }
.input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-family: var(--font);
  font-size: 1rem;
  background: var(--felulet);
  color: var(--gray-800);
}
.input:focus { outline: 2px solid var(--neon); outline-offset: 0; border-color: var(--neon); }
.input::placeholder { color: #6f6180; }
/* A fájlválasztó gombja a böngészőé; sötét alapon külön színt kell kapnia. */
.input[type="file"] { padding: 9px 12px; color: var(--gray-500); }
.input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 8px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  background: var(--gray-100);
  color: var(--gray-800);
  font-family: var(--font);
  cursor: pointer;
}
textarea.input { min-height: 90px; resize: vertical; }
.check {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 14px;
  line-height: 1.5;
}
.check input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
/*
 * Az űrlap Enterre elsülő alapgombja (lásd checkout_adatok.ejs). Nem `hidden`:
 * a ki nem rajzolt gombot nem minden böngésző fogadja el alapgombnak.
 */
.lathatatlan-gomb { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.retry-box {
  background: var(--felulet);
  border: 2px solid var(--neon);
  border-radius: var(--radius);
  padding: 22px 24px;
  margin-bottom: 24px;
}
.btn-lg { padding: 15px 30px; font-size: 1.02rem; }

/* ---- Lépésjelző a pénztárban ---- */
.steps-bar {
  display: flex;
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  gap: 8px;
  counter-reset: none;
}
.steps-bar li {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--gray-100);
  color: var(--gray-500);
  font-size: 0.95rem;
  min-width: 0;
}
.steps-bar li.current { background: var(--neon-halvany); color: var(--neon-vilagos); font-weight: 600; }
.steps-bar li.done { background: var(--neon-halvany); color: var(--neon-vilagos); }
.steps-bar-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--gray-200);
  color: var(--gray-500);
  display: grid;
  place-items: center;
  font-size: 0.85rem;
  font-weight: 700;
}
.steps-bar li.current .steps-bar-num,
.steps-bar li.done .steps-bar-num { background: var(--neon); color: var(--white); }
.steps-bar-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 560px) {
  .steps-bar li { padding: 10px; }
  .steps-bar-label { display: none; }
  .steps-bar li.current .steps-bar-label { display: inline; }
}

.step-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }
/*
 * A lépésgombok korábban `flex: 1; min-width: 140px`-szel osztoztak a soron.
 * Szűk kijelzőn ez 140px-re préselte őket, amiből a `.btn` 32px-es oldalsó
 * belső margói után ~76px maradt a feliratnak: a hosszabb szó tördelődött, és
 * ki is lógott a tartalomdobozból — így a szöveg középre igazítva is
 * félrecsúszottnak látszott.
 *
 * Most inkább ÚJ SORBA törnek, mint hogy összepréselődjenek: ha nem fér ki két
 * 240px-es gomb egymás mellé, egymás alá kerülnek teljes szélességben, ahol a
 * felirat egy sorba fér. Maga a gomb flex-doboz, tehát a felirat vízszintesen
 * és függőlegesen is a közepén ül akkor is, ha mégis két sorba törik.
 */
.step-nav .btn {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 20px;
  padding-right: 20px;
}

.pay-option {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: var(--transition);
}
.pay-option:hover { border-color: var(--neon); }
.pay-option:has(input:checked) { border-color: var(--neon); background: var(--neon-halvany); }
.pay-option input { margin-top: 3px; width: 18px; height: 18px; flex-shrink: 0; }
.pay-note { display: block; color: var(--gray-500); font-size: 0.88rem; margin-top: 3px; line-height: 1.45; }
/* Teszt fizetés (myPOS tesztkörnyezet): a vásárló lássa, hogy valódi kártyával még nem fizethet. */
.pay-note--teszt {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: #2b220d;
  border: 1px solid #6b5419;
  color: #f39bff;
  font-size: 0.86rem;
  line-height: 1.45;
}

/* ---- Összegzés / adatdobozok ---- */
.summary {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.summary-title {
  font-size: 1.05rem;
  font-weight: 650;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gray-200);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 9px 0;
}
.summary-row + .summary-row { border-top: 1px solid var(--gray-200); }
.summary-row .label { color: var(--gray-500); flex-shrink: 0; }
.summary-row .value { font-weight: 500; text-align: right; word-break: break-word; }
.summary-total { font-size: 1.1rem; font-weight: 700; color: var(--neon-vilagos); }
.summary + .summary { margin-top: 16px; }

.bank-box {
  border: 2px solid var(--neon);
  border-radius: var(--radius);
  padding: 24px;
  background: var(--felulet);
}
.bank-box h3 { margin-bottom: 12px; }
.bank-ref {
  background: var(--neon-halvany);
  border-radius: 8px;
  padding: 14px 16px;
  margin-top: 8px;
}
.bank-ref .value { font-size: 1.2rem; font-weight: 700; }

.identifier-box {
  border: 2px solid var(--neon);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
  background: var(--felulet);
}
.identifier-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 2px;
  word-break: break-all;
}

/* ---- Visszajelzések ---- */
.alert { border-radius: 8px; padding: 14px 18px; margin-bottom: 24px; line-height: 1.5; }
.alert-success { background: var(--neon-halvany); color: var(--neon-vilagos); border: 1px solid var(--neon); }
.alert-error { background: #2a1016; color: #ff8b9c; border: 1px solid #6d2333; }
.alert-info { background: #141d33; color: #9db8ff; border: 1px solid #2c3f6b; }
.alert ul { margin: 6px 0 0 18px; }

/* ---- Állapotjelzők ---- */
.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-awaiting_payment { background: #2c0f33; color: #e85cf7; }
.badge-paid { background: #141d33; color: #9db8ff; }
.badge-fulfilled { background: var(--neon-halvany); color: var(--neon-vilagos); }
.badge-cancelled { background: var(--gray-200); color: var(--gray-500); }
.badge-sent { background: var(--neon-halvany); color: var(--neon-vilagos); }
.badge-pending { background: #2c0f33; color: #e85cf7; }
.badge-failed { background: #2a1016; color: #ff8b9c; }

/* ---- Folyamatjelző ---- */
.steps { list-style: none; margin: 24px 0; }
.steps li {
  position: relative;
  padding: 0 0 24px 36px;
  border-left: 2px solid var(--gray-200);
  color: var(--gray-500);
}
.steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.steps li::before {
  content: "";
  position: absolute;
  left: -9px;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--felulet);
  border: 2px solid var(--gray-200);
}
.steps li.done { color: var(--gray-800); }
.steps li.done::before { background: var(--neon); border-color: var(--neon); }
.steps li.current { color: var(--gray-800); font-weight: 600; }
.steps li.current::before { border-color: var(--neon); box-shadow: 0 0 0 4px var(--neon-halvany); }
.steps .step-title { display: block; }
.steps .step-note { display: block; font-size: 0.9rem; font-weight: 400; color: var(--gray-500); margin-top: 2px; }

/* ---- Gombok ---- */
.btn-secondary {
  background: var(--felulet);
  color: var(--gray-800);
  border: 1px solid var(--gray-200);
}
.btn-secondary:hover { border-color: var(--neon); color: var(--neon-vilagos); }
.btn-danger { background: #2a1016; color: #ff8b9c; border: 1px solid #6d2333; }
.btn-danger:hover { background: #b02a3d; color: var(--white); }
.btn-sm { padding: 8px 16px; font-size: 0.9rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---- Admin ---- */
.admin-bar { background: #120b19; color: var(--white); padding: 12px 0; border-bottom: 1px solid var(--gray-200); }
.admin-bar .container { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.admin-bar a { color: #ced4da; font-weight: 500; }
.admin-bar a:hover, .admin-bar a.active { color: var(--white); }
.admin-bar .spacer { margin-left: auto; }
.admin-bar form { display: inline; }
.admin-bar button {
  background: none;
  border: 1px solid #495057;
  color: #ced4da;
  padding: 6px 14px;
  border-radius: 6px;
  cursor: pointer;
  font-family: var(--font);
}
.admin-bar button:hover { border-color: var(--white); color: var(--white); }

.filter-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 20px; }
.filter-tab {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--gray-200);
  color: var(--gray-500);
  font-size: 0.9rem;
  font-weight: 500;
}
.filter-tab.active { background: var(--neon); border-color: var(--neon); color: var(--white); }

.table-wrap { overflow-x: auto; border: 1px solid var(--gray-200); border-radius: var(--radius); background: var(--felulet); }
table.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
table.data th, table.data td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--gray-200); white-space: nowrap; }

/*
 * Az admin táblák sok oszloposak, ezért néha szélesebbek a képernyőnél. A
 * `.table-wrap` eddig is görgethető volt, csak Windowson a rálebegő csúszka
 * nem látszik — így úgy tűnt, a sor vége egyszerűen levágódik. Ezért kap
 * állandóan látható, vékony csúszkát: a levágott szél így nem néma hiba,
 * hanem látható folytatás.
 *
 * A vízszintes helyet ezen felül két apróság szabadítja fel: szűkebb
 * cellamargó (kilenc oszlopnál a 16px-es oldalanként ~290px-et vitt el), és
 * a gombfeliratok tördelésének tiltása.
 */
.table-wrap { scrollbar-width: thin; scrollbar-color: var(--gray-200) transparent; }
.table-wrap::-webkit-scrollbar { height: 10px; }
.table-wrap::-webkit-scrollbar-track { background: transparent; }
.table-wrap::-webkit-scrollbar-thumb { background: var(--gray-200); border-radius: 999px; }
.table-wrap::-webkit-scrollbar-thumb:hover { background: var(--neon-halvany); }

/* „Megnyitás" ne törjön „Megnyitá / s"-re a szűk műveletoszlopban. */
table.data .btn { white-space: nowrap; }

/*
 * A rendeléslista rögzített oszlopszélességgel dolgozik, hogy vízszintes
 * csúszka nélkül elférjen. A cellák tördelhetnek, a hosszú e-mail címet pedig
 * levágjuk — a teljes cím a sor fölé húzva látszik.
 */
table.data-orders { table-layout: fixed; font-size: 0.9rem; }
table.data-orders th, table.data-orders td {
  padding: 10px 12px;
  white-space: normal;
  vertical-align: middle;
  overflow-wrap: anywhere;
}
table.data-orders td.nowrap, table.data-orders th.nowrap { white-space: nowrap; }
table.data-orders .num, table.data-orders th.num { text-align: right; }
table.data-orders .right { text-align: right; }
table.data-orders .small { font-size: 0.82rem; }
table.data-orders .trunc {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.data-orders .mono { font-size: 0.85rem; }
table.data-orders .badge { white-space: nowrap; }
table.data-orders .btn-sm { padding: 6px 10px; font-size: 0.82rem; }

/* Szűk kijelzőn a csúszka a kisebbik rossz — ott inkább görgethető marad. */
@media (max-width: 1100px) {
  table.data-orders { table-layout: auto; min-width: 860px; }
}
table.data th { background: var(--gray-100); font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.4px; color: var(--gray-500); }
table.data tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--gray-100); }
table.data td.wrap { white-space: normal; }
/* Törhető cellán belül egy egyben maradó rész (pl. dátum: „2026-10-19”). */
table.data td.wrap .nowrap { white-space: nowrap; }

.panel {
  background: var(--felulet);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 24px;
  margin-bottom: 24px;
}
.panel h2 { font-size: 1.1rem; margin-bottom: 16px; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; align-items: start; }

/* Az admin bérletcsomag-szerkesztőjében a csomag kártyaképe (services/pass-image.js). */
.product-image-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 4px; }
.product-image-preview {
  width: 200px;
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(33, 37, 41, 0.16);
}

.login-wrap { max-width: 420px; margin: 80px auto; }

/* ---- Vásárlói fiók: fejléc, belépés, profil ---- */

/*
 * A style.css 480px alatt elrejti a .nav-links-et, és a .hamburger gombbal
 * nyitná vissza — a webshop fejlécében viszont nincs hamburger, így telefonon
 * az egész menü eltűnt (a Belépés és a Regisztráció is).
 *
 * Itt kevés menüpont van, ezért nem gombot teszünk alá, hanem hagyjuk tördelni:
 * kevesebb kattintás, és nem kell hozzá JavaScript.
 */
@media (max-width: 480px) {
  /*
   * A .nav magassága fixen 68px, ezért tördeléskor a második sornak nem lenne
   * helye, és a menü vízszintesen kilógna. Itt a magasság a tartalomhoz igazodik.
   */
  .header .nav {
    height: auto;
    min-height: 60px;
    flex-wrap: wrap;
    justify-content: center;
    padding-top: 10px;
    padding-bottom: 10px;
    /* A sorkoz nagyobb, mint az oszlopkoz: a logo-zar es a menusor kozott
       legyen levego, de a menupontok maradjanak szorosan egymas mellett. */
    gap: 13px 6px;
  }
  /* Saját sorba kerül a logó alá, és ott tördelődik. */
  .header .nav-links {
    flex: 0 0 100%;
    display: flex;
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 4px 6px;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
  }
  .header .nav-links li { display: flex; }
  .header .nav-links li a {
    display: block;
    padding: 6px 9px;
    font-size: 0.9rem;
  }
  .header .nav-cta { padding: 6px 13px; }
}

.container-auth { max-width: 480px; }
.auth-alt { margin-top: 16px; }
.nav-cta {
  background: var(--neon);
  color: var(--white) !important;
  padding: 8px 16px;
  border-radius: 8px;
}
.nav-cta:hover { background: var(--neon-vilagos); }

.input-static { background: var(--gray-100); color: var(--gray-500); }
.profil-cim { font-size: 1.25rem; font-weight: 650; margin: 32px 0 16px; }
.profil-cim-kicsi { font-size: 1.05rem; font-weight: 650; margin-bottom: 14px; }

.panel-alcim { font-size: 1.05rem; margin: 24px 0 12px; padding-top: 18px; border-top: 1px solid var(--gray-200); }
.panel-alcim-kicsi { margin-top: 16px; font-size: 0.88rem; }
.reset-lista { margin: 6px 0 0 18px; font-size: 0.88rem; color: var(--gray-500); }

/* Vásárlás a fiókból — az egész kártya egy link a pénztárba. */
.vasarlas-sav { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.vasarlas-kartya {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 16px;
  background: var(--felulet);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), transform var(--transition);
}
.vasarlas-kartya:hover { border-color: var(--neon); transform: translateY(-2px); }
.vasarlas-kep {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 4px 14px rgba(33, 37, 41, 0.14);
  margin-bottom: 8px;
}
.vasarlas-nev { font-weight: 650; }
.vasarlas-ar { font-size: 1.3rem; font-weight: 800; color: var(--neon-vilagos); letter-spacing: -0.5px; }
.vasarlas-ajandek {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--neon-vilagos);
  background: var(--neon-halvany);
  border-radius: 8px;
  padding: 5px 9px;
  align-self: flex-start;
}
.vasarlas-ajandek .gift-icon { width: 15px; height: 15px; }

.vasarlas-gomb { margin-top: 10px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  .vasarlas-kartya:hover { transform: none; }
}

/* ---- Fejléc: bejelentkezett felhasználó lenyíló menüje ----
 *
 * <details> elemre épül, nem JavaScriptre: natívan működik érintéssel és
 * billentyűzettel is, és a CSP amúgy sem enged inline szkriptet.
 */
/*
 * A style.css .nav-links flexboxa nem ad align-items-et, ezért az elemek
 * nyújtva vannak: a sima szöveges linkek a saját soruk tetejére kerülnek,
 * miközben a magasabb fiókgomb középen áll — ettől csúszik el a fejléc.
 */
.header .nav-links { align-items: center; }
.header .nav-links li { display: flex; align-items: center; }

.nav-user { position: relative; }
.user-menu { position: relative; }

.user-menu-gomb {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 6px 12px 6px 6px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--felulet);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: border-color var(--transition), background var(--transition);
}
.user-menu-gomb::-webkit-details-marker { display: none; }
.user-menu-gomb:hover { border-color: var(--neon); }
.user-menu[open] .user-menu-gomb { border-color: var(--neon); background: var(--neon-halvany); }

.user-menu-avatar {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--neon);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.user-menu-nev {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gray-800);
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-menu-nyil {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--gray-500);
  transition: transform var(--transition);
}
.user-menu[open] .user-menu-nyil { transform: rotate(180deg); }

.user-menu-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 200;
  min-width: 250px;
  background: var(--felulet);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(33, 37, 41, 0.16);
  overflow: hidden;
}
.user-menu-fej {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--gray-100);
  border-bottom: 1px solid var(--gray-200);
}
.user-menu-cimke {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--neon-vilagos);
}
.user-menu-email {
  font-size: 0.88rem;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-menu-lista { display: flex; flex-direction: column; padding: 6px 0; }
.user-menu-elem {
  padding: 10px 16px;
  font-size: 0.93rem;
  color: var(--gray-800);
  transition: background var(--transition), color var(--transition);
}
.user-menu-elem:hover { background: var(--gray-100); color: var(--neon-vilagos); }
.user-menu-elem.aktiv {
  font-weight: 650;
  color: var(--neon-vilagos);
  box-shadow: inset 3px 0 0 var(--neon);
}

/* A pénztárban jelezzük, hogy az előre kitöltött adatok szerkeszthetők. */
.elokitoltes-jelzes {
  margin: -8px 0 18px;
  padding: 10px 12px;
  background: var(--gray-100);
  border-left: 3px solid var(--neon);
  border-radius: 0 6px 6px 0;
  /* A sötét skálán nincs --gray-600: a tartalék #495057 a sötét háttéren alig olvasható volt. */
  color: var(--gray-500);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* A törlés visszafordíthatatlan, ezért a menüben is elkülönül. */
.user-menu-veszely {
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200);
  color: var(--red, #dc3545) !important;
}
.user-menu-veszely:hover { background: #2a1016; color: #ff8b9c !important; }
.user-menu-veszely.aktiv { box-shadow: inset 3px 0 0 var(--red, #dc3545); font-weight: 650; }

.user-menu-kilepes { border-top: 1px solid var(--gray-200); }
.user-menu-kilepes button {
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--gray-500);
}
.user-menu-kilepes button:hover { background: var(--gray-100); color: var(--gray-800); }

/*
 * ---- A fiók menülistája (a /fiok lap tartalma) ----
 *
 * Nem telefon-specifikus: a lap teljes tartalma ez a lista, asztali gépen is.
 * Telefonon az alsó sáv „Profilom" gombja vezet ide, asztali gépen a fejléc
 * név-csippje kínálja ugyanezeket — lásd views/partials/profil_menu.ejs.
 */
.profil-menu {
  margin: 6px 0 0;
  background: var(--felulet);
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  overflow: hidden;
}
.profil-menu-gomb {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px;
}
.profil-menu-avatar {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--neon, #22e3f0);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 700;
}
/* A hosszú e-mail cím ne tolja szét a sort, hanem érjen véget hármas ponttal. */
.profil-menu-fej { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.profil-menu-cimke {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--neon-vilagos);
}
.profil-menu-email {
  font-size: 0.86rem;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.profil-menu-lista {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--gray-200);
}
.profil-menu-elem {
  /* Kényelmes koppintási felület: a WCAG 44 képpontot ajánl. */
  padding: 14px;
  font-size: 0.95rem;
  color: var(--gray-800);
  border-bottom: 1px solid var(--gray-200);
  transition: background var(--transition), color var(--transition);
}
.profil-menu-elem:hover { background: var(--gray-100); color: var(--neon-vilagos); }
.profil-menu-veszely { color: var(--red, #dc3545); }
.profil-menu-veszely:hover { background: #2a1016; color: #ff8b9c; }

.profil-menu-kilepes button {
  width: 100%;
  padding: 14px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gray-500);
}
.profil-menu-kilepes button:hover { background: var(--gray-100); color: var(--gray-800); }

/*
 * ---- Vissza a fiók menüjéhez (telefonra) ----
 *
 * Csak telefonon: ott a fejléc menüsora rejtve van, így a listához nincs más
 * út. Asztali gépen a név-csipp mindig kéznél van.
 */
.profil-vissza { display: none; }

@media (max-width: 700px) {
  .profil-vissza {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 14px 0 0;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--gray-200);
    border-radius: 999px;
    color: var(--gray-500, #7fa5a1);
    font-size: 0.88rem;
    font-weight: 600;
  }
  .profil-vissza svg { width: 17px; height: 17px; }

  /*
   * A `.section` alap 80 képpontos felső margója a vissza gomb alatt üresen
   * tátongana. Telefonon ez a lap tetején sok — a gomb után rögtön jöjjön a
   * tartalom.
   */
  .profil-vissza-sav + .section { padding-top: 18px; }

  /* Ugyanez a fiók listalapján: a cím ne csússzon a képernyő közepére. */
  .section--tomor { padding-top: 18px; }
}

.jelszo-blokk {
  padding: 14px 0;
  border-top: 1px solid var(--gray-200);
}
.jelszo-blokk:first-of-type { border-top: none; padding-top: 6px; }
.jelszo-cim { display: block; margin-bottom: 4px; font-size: 0.95rem; }
.jelszo-blokk .small { font-size: 0.86rem; margin-bottom: 10px; }
.jelszo-blokk .field { margin-bottom: 12px; }

.profil-lablec { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

@media (max-width: 480px) {
  /* Keskeny kijelzőn a panel a fejléc teljes szélességét kapja. */
  .user-menu-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    min-width: 240px;
    max-width: calc(100vw - 32px);
  }
  .user-menu-nev { max-width: 110px; }
}

/* Visszafordíthatatlan műveletek — vizuálisan is elkülönítve. */
.veszelyzona { border: 2px solid var(--red, #dc3545); }
.veszelyzona h2 { color: var(--red, #dc3545); }
.veszelyzona-lista {
  margin: 14px 0 18px 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--gray-800);
}
.btn-veszely {
  background: var(--red, #dc3545);
  color: var(--white);
  border: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.btn-veszely:hover { background: #b02a37; }

.grid-szoros { gap: 0 16px; }
.szamlazas-mentes {
  padding: 12px 14px;
  background: var(--gray-100);
  border-radius: 10px;
  margin-bottom: 18px;
  line-height: 1.45;
}

/* Az online elállás lapján a szövegközi hivatkozás látszódjon (az alapstílus nem jelöli). */
.elallas-funkcio a:not(.btn) { color: var(--neon-vilagos); text-decoration: underline; text-underline-offset: 3px; }

/* Online elállás: a nyilatkozat szövege idézetként (shop/elallas_funkcio.ejs). */
.elallas-nyilatkozat {
  margin: 18px 0;
  padding: 14px 16px;
  background: var(--gray-100);
  border-left: 3px solid var(--neon);
  border-radius: 0 8px 8px 0;
  line-height: 1.55;
}

/* ---- Címjegyzék (profil_cimjegyzek.ejs, partials/cimkartya.ejs) ---- */

/* A pénztár legördülője. A „Kitöltés" gomb csak szkript nélkül látszik. */
.cimjegyzek-valaszto { padding-bottom: 18px; border-bottom: 1px dashed var(--gray-200); }
.cimjegyzek-valaszto-sor { display: flex; gap: 10px; align-items: stretch; }
.cimjegyzek-valaszto-sor select { flex: 1; min-width: 0; }

.cimjegyzek-szakasz { margin-top: 36px; scroll-margin-top: 90px; }
.cimjegyzek-cim { font-size: 1.15rem; font-weight: 650; margin: 0 0 6px; }
.cimjegyzek-magyarazat { color: var(--gray-500); font-size: 0.88rem; line-height: 1.5; margin: 0 0 14px; }

.cimkartyak {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
}
.cimkartya {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  padding: 16px 18px 14px;
  background: var(--felulet);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow-wrap: anywhere;
}
.cimkartya--alap { border-color: var(--neon); box-shadow: var(--shadow); }
.cimkartya-fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-height: 26px;
  margin-bottom: 4px;
}
.cimkartya-cimke { color: var(--gray-500); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; }
.cimkartya-fo { font-size: 1.02rem; }
.cimkartya-sor { font-size: 0.92rem; line-height: 1.45; }
/* A műveletek a kártya aljára kerülnek: egy sorban a kártyák alja egy vonalba esik. */
.cimkartya-lab {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 16px;
  margin-top: auto;
  padding-top: 14px;
}
.cimkartya-lab form { margin: 0; }
/* A három művelet egyformán aláhúzott; a törlés halvány (btn-link-torles). */
.cimkartya-link,
.cimkartya-gomb {
  color: var(--neon-vilagos);
  font-size: 0.88rem;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cimkartya-gomb {
  padding: 0;
  background: none;
  border: none;
  font-family: var(--font);
  cursor: pointer;
}
.cimkartya-lab .btn-link-torles { text-underline-offset: 3px; }
.cimkartya-link:hover,
.cimkartya-gomb:hover { color: var(--white); }

/* Új bejegyzés: szaggatott keretes kártya, nagy pluszjellel (mint a TME-nél). */
.cimkartya--uj {
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 170px;
  border-style: dashed;
  color: var(--neon-vilagos);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  transition: border-color var(--transition), background var(--transition);
}
.cimkartya--uj:hover { border-color: var(--neon); background: var(--neon-halvany); }
.cimkartya-plusz {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1;
}
/* Telefonon egy oszlopban állnak: az „új” kártya ott alacsonyabb, sorba rendezve. */
@media (max-width: 600px) {
  .cimkartya--uj { flex-direction: row; min-height: 0; padding: 18px; }
  .cimkartya-plusz { width: 44px; height: 44px; font-size: 1.7rem; }
}

/* Feltöltés: a cél bérlet kiemelése a pénztárban és a választóban. */
.feltoltes-cel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
  padding: 18px 20px;
  background: var(--neon-halvany);
  border: 2px solid var(--neon);
  border-radius: var(--radius);
  margin-bottom: 20px;
}
.feltoltes-cel-sor { display: flex; flex-direction: column; gap: 3px; }
.feltoltes-lead { margin-bottom: 20px; }
.feltoltes-jovairas { font-size: 0.9rem; font-weight: 650; color: var(--neon-vilagos); }
/* Kipótlás (profil_kipotlas.ejs). 1. lépés: a vásárolható bérletcsomagok listája, alul gomb a
   kipótlásra; 2. lépés: letisztult űrlap középen, egyetlen beírható forintösszeggel. */
.egyeni-most { margin: 0 0 14px; }
.kipotlas-csomagok-cim { margin: 0 0 10px; }
.kipotlas-csomag-lista { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.kipotlas-csomag-lista a {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px;
  padding: 12px 14px; border: 1px solid var(--gray-200); border-radius: var(--radius);
  background: var(--felulet); text-decoration: none; color: inherit;
}
.kipotlas-csomag-lista a:hover { border-color: var(--neon); }
.kipotlas-csomag-nev { font-weight: 600; }
.kipotlas-csomag-ar { color: var(--neon-vilagos); font-weight: 600; }
.kipotlas-csomag-megt { flex-basis: 100%; font-size: 0.85rem; color: var(--gray-500); }
.kipotlas-tovabb { margin: 4px 0 8px; }
.kipotlas-nincs { margin: 4px 0 8px; color: var(--gray-500); }
.kipotlas-vissza { margin: 14px 0 0; text-align: center; font-size: 0.9rem; }
.egyeni-urlap--kozep {
  max-width: 360px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  background: var(--felulet);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
}
.egyeni-cimke { display: block; font-weight: 600; margin-bottom: 10px; }

/* A szám pontosan középen; az egység (Ft) mellette áll, a középvonalat nem tolja el. */
.egyeni-ertek { position: relative; width: 130px; max-width: 60%; margin: 0 auto; }
.egyeni-ertek .egyeni-egyseg { position: absolute; left: calc(100% + 8px); top: 50%; transform: translateY(-50%); }
.egyeni-ertek--ft { margin: 0 auto 8px; }
.egyeni-mezo {
  width: 100%;
  font-size: 2rem; font-weight: 700; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.egyeni-mezo::-webkit-outer-spin-button,
.egyeni-mezo::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.egyeni-egyseg { font-weight: 600; }
.egyeni-osszeg { margin-bottom: 12px; text-align: left; }
/* A beírható összeg határai a mező alatt, halkan. */
.egyeni-hatar { margin: 0 0 14px; font-size: 0.85rem; color: var(--gray-500); }
/* A legkisebb csomag árától a bérletcsomag éri meg (azzal kedvezmény is jár). */
.egyeni-tipp { margin: 0 0 14px; font-size: 0.85rem; line-height: 1.5; color: var(--gray-500); text-align: left; }

/* A kosárban a kipótlás összegének mezője szélesebb, mint egy darabszám. */
.kosar-egyeni { max-width: 120px; }
/* QR-oldal, kevés egyenlegnél: kisebb QR-kód, és alatta görgetés nélkül látszik a feltöltés
   gombja (a telefonos alsó sáv fölött). A kód kisebben is jól beolvasható (9 számjegy, 21×21 modul). */
.qr-lap--kicsi { padding: 14px 14px 10px; margin-bottom: 12px; }
.qr-lap--kicsi .qr-kep { max-width: 180px; }
.qr-lap--kicsi .qr-kod { margin-top: 6px; font-size: 1.1rem; letter-spacing: 2px; }
.qr-feltoltes {
  margin: 0 0 14px;
  padding: 12px 14px 10px;
  background: var(--neon-halvany);
  border: 1px solid var(--neon);
  border-radius: var(--radius);
  text-align: center;
}
.qr-feltoltes-szoveg { margin: 0 0 10px; }
.qr-feltoltes-hint { margin: 6px 0 0; font-size: 0.82rem; color: var(--gray-500); }
/* QR-oldal: a kipótlás saját gombja, ha az egyenleg nem kevés (a QR-kód alatt). Feltűnő (a megrendelő
   kérése, 2026-10-20): telt neon, nagyobb betű, „+” ikon, izzás, és időnként átfutó fénycsík. */
.qr-kipotlas-gomb {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 16px 20px;
  font-size: 1.08rem;
  font-weight: 700;
  box-shadow: 0 0 0 1px var(--neon-vilagos), 0 8px 28px var(--neon-izzas);
}
.qr-kipotlas-ikon {
  flex: none;
  width: 28px;
  height: 28px;
  padding: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
}
.qr-kipotlas-gomb::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -70%;
  width: 40%;
  height: 220%;
  transform: rotate(18deg);
  pointer-events: none;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
  animation: gift-shine 5s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
  .qr-kipotlas-gomb::after { display: none; }
}
/* A feltöltés oldalon: hivatkozás a kipótlás oldalra. */
.kipotlas-hivatkozas {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 24px; padding: 14px 16px; border: 1px solid var(--gray-200); border-radius: var(--radius);
}

/* Feltöltésnél az összegzés fölött: melyik meglévő bérletre kerül a jóváírás. */
.feltoltes-jelzo {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--neon-halvany);
  border-radius: 10px;
  color: var(--neon-vilagos);
  font-size: 0.9rem;
}
.feltoltes-jelzo strong { font-size: 1rem; }
.feltoltes-jelzo .mono { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.5px; }

/* Bérletkártyák a profilban */
.berlet-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; }
.berlet-kartya {
  background: var(--felulet);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
}
.berlet-fej { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.berlet-fej-jelek { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px; }
.berlet-kod { font-size: 1.15rem; font-weight: 700; letter-spacing: 1px; }
.berlet-egyenleg {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 12px 14px;
  background: var(--neon-halvany);
  border-radius: 10px;
  margin-bottom: 14px;
}
.berlet-egyenleg-label { color: var(--neon-vilagos); font-size: 0.88rem; font-weight: 600; }
.berlet-egyenleg-ertek { font-size: 1.35rem; font-weight: 800; color: var(--neon-vilagos); letter-spacing: -0.5px; }
.berlet-egyenleg-ertek-kicsi { font-size: 1.1rem; font-weight: 700; }
.berlet-adatok { margin: 0; flex: 1; }
.berlet-adatok > div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: 0.9rem; }
.berlet-adatok dt { color: var(--gray-500); }
.berlet-adatok dd { margin: 0; text-align: right; }
.berlet-megjegyzes { font-size: 0.85rem; margin: 10px 0 0; }
.berlet-muveletek { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }

.berlet-osszegzo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
  background: var(--felulet);
  border: 2px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 20px 22px;
}
.berlet-osszegzo-tetel { display: flex; flex-direction: column; gap: 4px; }

/* ---- Automatáról szinkronizált bérletek ---- */
.admin-section { padding-top: 32px; }
.admin-lead { margin-bottom: 20px; }
.container-narrow { max-width: 900px; }
.admin-lead code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: var(--gray-100);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Az automaták szinkronállapota — egy pillantással látszik, ha valamelyik lemaradt. */
.sync-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.sync-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 999px;
  background: var(--felulet);
  font-size: 0.88rem;
}
.sync-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sync-dot.live { background: var(--neon); box-shadow: 0 0 0 3px var(--neon-halvany); }
.sync-dot.stale { background: #e0a800; box-shadow: 0 0 0 3px #2c0f33; }

/* Rendezhető oszlopfejléc: az egész fejléc kattintható, a nyíl mutatja az irányt. */
.rendez-fej {
  display: inline-block;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}
.rendez-fej:hover { color: var(--neon-vilagos); text-decoration: underline; }
.rendez-aktiv { color: var(--neon-vilagos); font-weight: 700; }

.filter-input { max-width: 280px; }
.filter-select { max-width: 160px; }
.filter-count { margin-left: auto; font-size: 0.9rem; }
.filter-active { display: flex; flex-wrap: wrap; gap: 14px; align-items: baseline; }
.filter-active a { text-decoration: underline; }
.pager { margin-top: 20px; align-items: center; }
.panel-count { font-weight: 400; font-size: 0.9rem; }
.detail-actions { margin-top: 18px; }
.block { display: block; }

table.data-berletek td, table.data-esemenyek td { vertical-align: middle; }
table.data-berletek .trunc, table.data-esemenyek .trunc {
  display: block;
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
table.data-berletek .num, table.data-berletek th.num,
table.data-esemenyek .num, table.data-esemenyek th.num { text-align: right; }
table.data-berletek .right { text-align: right; }
table.data-berletek .small, table.data-esemenyek .small { font-size: 0.85rem; }
/* A jóváírás szövege törhet, de ne legyen keskenyebb egy szónál. */
table.data-esemenyek .esemeny-jovairas { min-width: 170px; max-width: 240px; }

/*
 * A vendég eseménylistája (profil) telefonon kártyasorokká alakul: öt oszlop
 * nem fér el, és a lényeg — az egyenleg utána és a jóváírás — oldalra
 * görgetve elveszne. Fent az esemény és az egyenleg, alatta az idő és a gép,
 * legalul a jóváírás (ha van).
 */
@media (max-width: 600px) {
  table.esemeny-lista thead { display: none; }
  table.esemeny-lista, table.esemeny-lista tbody { display: block; }
  table.esemeny-lista tr {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas: "tipus egyenleg" "ido gep" "jovairas jovairas";
    gap: 4px 12px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--gray-200);
  }
  table.esemeny-lista tr:last-child { border-bottom: 0; }
  table.esemeny-lista td { display: block; padding: 0; border: 0; text-align: left; white-space: normal; }
  table.esemeny-lista .esemeny-tipus { grid-area: tipus; }
  table.esemeny-lista .esemeny-tipus .block { display: inline; margin-left: 6px; }
  table.esemeny-lista .esemeny-egyenleg { grid-area: egyenleg; text-align: right; white-space: nowrap; }
  table.esemeny-lista .esemeny-ido { grid-area: ido; color: var(--gray-500); }
  table.esemeny-lista .esemeny-gep { grid-area: gep; text-align: right; color: var(--gray-500); }
  table.esemeny-lista .esemeny-gep::before { content: "Gép "; }
  table.esemeny-lista .esemeny-jovairas {
    grid-area: jovairas;
    min-width: 0;
    max-width: none;
    text-align: left;
    color: var(--neon-vilagos);
  }
  table.esemeny-lista .esemeny-ures { display: none; }
}
table.data-esemenyek td.wrap { white-space: normal; max-width: 320px; }
table.data-berletek a, table.data-esemenyek a { color: var(--neon-vilagos); text-decoration: underline; }

@media (max-width: 480px) {
  .form-card, .panel { padding: 20px; }
  
}

/* ---- Fejléc: kosár ---- */
.nav-kosar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
}
.nav-kosar-ikon { flex-shrink: 0; }
.nav-kosar-jelzo {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--neon);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 20px;
  text-align: center;
}
/* Szűk kijelzőn csak az ikon fér el — a felirat a képernyőolvasónak megmarad. */
@media (max-width: 560px) {
  .nav-kosar-szoveg { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
}

/* ---- Termékrács ---- */
.termek-racs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/*
 * A bérletek sorában kevés (jellemzően három-négy) csempe van, ezért
 * `auto-fit`: ez összecsukja az üresen maradó oszlopokat, és a meglévő csempék
 * széthúzódnak a teljes szélességre. (Az `auto-fill` megtartaná az üres
 * sávokat, és a sor fele üresen maradna.)
 */
.termek-racs--szeles {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.termek-kartya {
  background: var(--felulet);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}
.termek-kartya:hover { box-shadow: var(--shadow); transform: translateY(-3px); }
/*
 * A csempe képdoboza. Az alap négyzetes; a bérlet fekvő kártyaképének arányát
 * a .termek-kep--berlet adja.
 */
.termek-media { display: block; position: relative; background: var(--gray-100); }
/* contain: a kép sosem vágódik le. */
.termek-kep {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  padding: 12px;
}
/*
 * A bérlet kártyalapja fekvő (480×303), ezért a képdoboz is ezt az arányt
 * veszi fel a négyzetes helyett. Szélesebb csempénél így nem keletkezik üres
 * sáv a kártya fölött és alatt.
 */
.termek-kep--berlet {
  aspect-ratio: 480 / 303;
  padding: 20px 18px;
  filter: drop-shadow(0 8px 18px rgba(33, 37, 41, 0.2));
  transition: transform var(--transition);
}
.termek-kartya:hover .termek-kep--berlet { transform: translateY(-2px) scale(1.02); }
/* A bérletcsempe neon keretet kap. */
.termek-kartya--berlet { border-color: var(--neon); }

.termek-torzs { display: flex; flex-direction: column; flex: 1; padding: 16px 18px 18px; }
.termek-marka {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--neon-vilagos);
  margin-bottom: 4px;
}
.termek-nev { font-size: 1rem; font-weight: 600; line-height: 1.35; margin: 0 0 4px; }
.termek-nev a { color: var(--gray-800); text-decoration: none; }
.termek-nev a:hover { color: var(--neon); }

.termek-leiras {
  font-size: 0.88rem;
  color: var(--gray-500);
  line-height: 1.5;
  margin: 10px 0 0;
  flex: 1;
}
.termek-lablec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.termek-ar { font-size: 1.25rem; font-weight: 700; color: var(--neon-vilagos); white-space: nowrap; }
.termek-ar span { font-size: 0.85rem; font-weight: 500; color: var(--gray-500); }
.termek-kosar-urlap { margin: 0; }

/* Szó vagy dátum, ami nem törhet el („2027-03-17”). */
.nem-torik { white-space: nowrap; }

/* ---- Terméklap ---- */
/*
 * A két hasáb AZONOS magasságú (nincs `align-items: start`), a kép pedig
 * függőlegesen középen áll a saját paneljében.
 *
 * Enélkül a képdoboz a szöveghasáb tetejéhez tapadt, és mivel a szöveg jóval
 * lejjebb ér, alatta nagy üres rész maradt — ettől úgy tűnt, mintha a kép
 * felfelé el lenne csúszva a szöveghez képest.
 */
.termeklap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; }
@media (max-width: 760px) { .termeklap { grid-template-columns: 1fr; gap: 24px; } }
.termeklap-kep-doboz {
  background: var(--gray-100);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.termeklap-nev { font-size: 1.8rem; line-height: 1.2; margin: 4px 0 8px; }

.termeklap-leiras { margin: 16px 0 24px; line-height: 1.65; }
.termeklap-urlap { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }

.termeklap-reszletek { max-width: 760px; margin: 40px 0 24px; }
.termeklap-reszletek h2 { font-size: 1.3rem; margin-bottom: 16px; }
.termeklap-reszletek h3 {
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--neon-vilagos);
  margin: 22px 0 6px;
}
.termeklap-reszletek p { line-height: 1.65; margin: 0; color: var(--gray-800); }

/* ---- Kosár ---- */
.kosar-elrendezes { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 32px; align-items: start; }
@media (max-width: 860px) { .kosar-elrendezes { grid-template-columns: 1fr; } }

.kosar-tetel {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr) auto;
  gap: 20px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--gray-200);
}
@media (max-width: 560px) {
  .kosar-tetel { grid-template-columns: 72px minmax(0, 1fr); }
  .kosar-ar { grid-column: 2; text-align: left; }
}
.kosar-kep-link { display: block; background: var(--gray-100); border-radius: 10px; overflow: hidden; }
.kosar-kep { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; padding: 8px; }
.kosar-nev { font-size: 1.05rem; font-weight: 600; margin: 0 0 4px; line-height: 1.35; }
.kosar-nev a { color: var(--gray-800); text-decoration: none; }
.kosar-nev a:hover { color: var(--neon); }
.kosar-megjegyzes { font-size: 0.88rem; color: var(--gray-500); margin: 0 0 4px; }
.kosar-ajandek { color: var(--neon-vilagos); font-weight: 600; }
.kosar-muveletek { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.kosar-db-urlap { display: flex; align-items: flex-end; gap: 8px; margin: 0; }
.kosar-db-cimke { font-size: 0.85rem; color: var(--gray-500); align-self: center; }
.kosar-db { width: 74px; }
.kosar-ar { text-align: right; display: flex; flex-direction: column; gap: 2px; }
.kosar-sorosszeg { font-size: 1.15rem; font-weight: 700; white-space: nowrap; }

.kosar-also-sav { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 20px; }
.kosar-also-sav form { margin: 0; margin-left: auto; }

.btn-link-torles {
  background: none;
  border: none;
  padding: 0;
  color: var(--gray-500);
  font-size: 0.88rem;
  text-decoration: underline;
  cursor: pointer;
}
.btn-link-torles:hover { color: #a4272a; }

.ures-kosar { text-align: center; padding: 40px 0 60px; }
.ures-kosar-gombok { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ---- Pénztár összegzés: tételsorok ---- */
.summary-items { list-style: none; margin: 0 0 12px; padding: 0; }
.summary-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 0.9rem;
}
.summary-item + .summary-item { border-top: 1px solid var(--gray-200); }
.summary-item-kep {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  object-fit: contain;
  background: var(--gray-100);
  border-radius: 6px;
}
.summary-item-nev { flex: 1; min-width: 0; line-height: 1.35; }

.summary-item-ar { font-weight: 600; white-space: nowrap; }
.summary-row--total { border-top: 2px solid var(--neon); }

/* ---- Admin: a rendelés tételei ---- */

table.data-tetelek { font-size: 0.9rem; margin-bottom: 12px; }
table.data-tetelek th, table.data-tetelek td { padding: 8px 10px; }
table.data-tetelek .num { text-align: right; }

/* ---- Bérlet részletező oldal ---- */

/* A kártyakép fekvő: a dobozban vízszintesen középre kerül. */
.berlet-kep-doboz { justify-content: center; }
.berlet-kep {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 24px rgba(33, 37, 41, 0.22));
}

/*
 * A kedvezmény a bérlet lényege: a befizetett összeg, a kedvezmény és a végül
 * jóváírt egyenleg egymás alatt, számlaszerűen — ez mondja el egy pillantásra,
 * hogy miért éri meg.
 */
.kedvezmeny-doboz {
  border: 2px solid var(--neon);
  border-radius: var(--radius);
  background: var(--felulet);
  padding: 4px 18px 14px;
  margin: 0 0 24px;
}
.kedvezmeny-doboz--sima { border-color: var(--gray-200); }

.kedvezmeny-sor {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
}
.kedvezmeny-sor + .kedvezmeny-sor { border-top: 1px solid var(--gray-200); }
.kedvezmeny-cimke { color: var(--gray-500); display: inline-flex; align-items: center; gap: 7px; }
.kedvezmeny-ertek { font-size: 1.15rem; font-weight: 600; white-space: nowrap; }

.kedvezmeny-sor--ajandek .kedvezmeny-cimke,
.kedvezmeny-sor--ajandek .kedvezmeny-ertek { color: var(--neon-vilagos); }
.kedvezmeny-ikon { display: inline-flex; color: var(--neon-vilagos); }
.kedvezmeny-ikon .gift-icon { width: 17px; height: 17px; }

.kedvezmeny-sor--osszeg {
  border-top: 2px solid var(--neon);
  padding-bottom: 4px;
}
.kedvezmeny-sor--osszeg .kedvezmeny-cimke { color: var(--gray-800); font-weight: 600; }
.kedvezmeny-sor--osszeg .kedvezmeny-ertek {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--neon-vilagos);
  letter-spacing: -0.5px;
}

.kedvezmeny-magyarazat {
  margin: 10px 0 0;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--gray-500);
}
/* A jóváírt összeg a sor jobb szélén. */
.kedvezmeny-ertek-blokk { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.15; }

/* Az összehasonlító táblázatban az éppen nézett bérlet sora kiemelve. */
.berlet-tabla-aktualis { background: var(--neon-halvany); }
.berlet-tabla-aktualis:hover { background: var(--neon-halvany); }
.berlet-tabla-ajandek { color: var(--neon-vilagos); font-weight: 600; }
/* Telefonon a cellák szorosabbak — így a négy oszlop oldalra görgetés nélkül olvasható. */
@media (max-width: 520px) {
  table.berlet-tabla th, table.berlet-tabla td { padding: 9px 7px; font-size: 0.84rem; }
  table.berlet-tabla th { font-size: 0.68rem; letter-spacing: 0; }
}

/* ---- Figyelmeztetések ---- */

/* A kosárban: a kipótlás összege nem fér a keretbe, vagy előbb dönteni kell a feltöltésről. */
.kosar-figyelmeztetes {
  margin: 6px 0 0;
  font-size: 0.85rem;
  line-height: 1.45;
  color: #a12fb5;
}

/* Admin, felhasználó lap: a fiók ideiglenes zárolása (túl sok sikertelen bérlethozzáadás). */
.tiltas-jelzes { font-weight: 600; color: #a4272a; }

/* A csempén a Kosárba gomb rövid visszajelzése hozzáadás után. */
.btn-kosarban {
  background: var(--neon-vilagos);
  border-color: var(--neon-vilagos);
  color: var(--white);
  cursor: default;
}

/* Horgonyra ugráskor maradjon levegő a rács fölött. */
.termek-racs[id] { scroll-margin-top: 24px; }

/* =========================================================================
   Főoldali információs tábla (hero)
   ========================================================================= */

/*
 * A szakasz szándékosan NEM `hero` osztályt visel: azt a style.css alap
 * rendszere már használja 100 képpontos belső margóval és saját háttérrel —
 * attól keletkezett üres sáv a tábla fölött és alatt.
 */
.infotabla-sav { padding: 28px 0 0; }

/*
 * Szkript nélkül a három lap egymás alatt olvasható; a `js-karuszel` osztályt
 * a szkript teszi rá, és onnantól egyszerre csak egy látszik.
 *
 * A tábla a `container`-en belül él, ezért a széle pontosan a szélső
 * termékcsempékkel egy vonalban van.
 */
.hero-tabla {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
}
.hero-tabla.js-karuszel { display: grid; }
.hero-tabla.js-karuszel .hero-lap { grid-area: 1 / 1; }

.hero-lap {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 300px;
  padding: 44px 0;
  background-color: #040b0a;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  color: var(--white);
  overflow: hidden;
}
/*
 * A fájlnév a verzió hordozója. A CSS-ből hivatkozott képek URL-je nem kapja
 * meg a `?v=` bélyeget (azt a nézetek teszik a hivatkozásokra), a statikus
 * fájlokat viszont a szerver egy hétig gyorsítótárazhatónak jelöli — vagyis
 * azonos néven a látogató még napokig a RÉGI képet látná. Kép cseréjekor
 * ezért új nevet kell adni.
 */

/* A szöveg mögé sötétítés, hogy a felirat a háttérrajz fölött is olvasható legyen. */
.hero-lap::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(8, 22, 17, 0.88) 0%, rgba(8, 22, 17, 0.72) 42%, rgba(8, 22, 17, 0.18) 78%, rgba(8, 22, 17, 0.05) 100%);
}

.hero-tabla.js-karuszel .hero-lap {
  opacity: 0;
  visibility: hidden;
  transition: opacity 600ms ease;
}
.hero-tabla.js-karuszel .hero-lap.aktiv { opacity: 1; visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .hero-tabla.js-karuszel .hero-lap { transition: none; }
}

.hero-belso {
  position: relative;
  width: 100%;
  padding: 0 44px;
}
/* A sorhossz olvashatóság miatt korlátozott, a háttérrajz így is látszik. */
.hero-belso > * { max-width: 560px; }

.hero-cimke {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(34, 227, 240, 0.22);
  color: #ffd6ec;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 16px;
}

.hero-cim {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.5px;
  margin: 0 0 14px;
  color: var(--white);
}

.hero-szoveg {
  font-size: 1.02rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  margin: 0 0 24px;
}
.hero-szoveg strong { color: var(--white); }

/* Telefonra szánt rövid mondat — asztali gépen a bővebb szöveg áll. */

.hero-lap .btn-lg { padding: 15px 30px; font-size: 1rem; }

/* Lapozópontok */

@media (max-width: 640px) {
  .hero-lap { min-height: 280px; padding: 36px 0 52px; }
  .hero-belso { padding: 0 24px; }
  .hero-lap::before {
    background: linear-gradient(180deg, rgba(8, 22, 17, 0.86) 0%, rgba(8, 22, 17, 0.8) 60%, rgba(8, 22, 17, 0.62) 100%);
  }
}

/* ---- A szolárium fotói a főoldalon ---- */
.helyszin { padding: 8px 0 56px; }

.helyszin-cim { margin: 0; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.3px; }

/* 4:5-re vágva: a 3:4-es álló fotó teljes magasságban túl hosszú csempe lenne. */

/* A felirat a kép alján, sötét átmeneten — a világos fotón is olvasható. */

/*
 * Telefonon (2026-10-19, a megrendelő kérése) a fotósor nem kell: rejtve. A
 * képek lustán töltődnek (loading="lazy"), így rejtve le sem töltődnek.
 */
@media (max-width: 700px) {
  .helyszin { display: none; }
}

/*
 * A pénztár lépésgombjai a lap legalján, az összegzés alatt: a vásárló előbb
 * lássa, mit fizet, és csak utána lépjen tovább.
 */
.step-nav--also {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--gray-200);
}

/* ---- Fizetési módok: a myPOS logója a láblécben és a pénztárban (partials/kartyas_logo.ejs) ---- */

/* A pénztárban a kártyás opcióban ül, ott kisebb (.fizetesi-modok--penztar). */
.fizetesi-modok {
  display: flex;
  align-items: center;
  gap: 4px 14px;
  flex-wrap: wrap;
}

.fizetesi-modok-cim {
  font-size: 0.85rem;
  color: var(--gray-500, #9aa0aa);
}

.fizetesi-modok--penztar { margin: 0; }

/* A kereskedő országa és ügyfélszolgálata a végösszeg alatt (partials/checkout_summary.ejs). */
.summary-kereskedo { margin: 6px 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--gray-500, #9aa0aa); }

/* A myPOS logója (a myPOS weboldaláról, módosítatlanul; fehér változat a sötét háttérhez),
   arányosan méretezve, körülötte szabad hellyel (myPOS: „let the logo breathe"). */
.mypos-logo-link { display: inline-flex; align-items: center; }
.mypos-logo { display: block; width: auto; height: 44px; margin: 8px 4px; }
.fizetesi-modok--penztar .mypos-logo { height: 36px; margin: 6px 4px 6px 0; }

/* ---- Lablec elrendezes ----
 *
 * A style.css .footer-inner-je space-between-tel ket elemre keszult (logo es
 * jogi sor). A fizetesi blokk harmadikkent szethuzta volna a sort, ezert a
 * lablec ket sav: felul a logo es a fizetesi modok, alatta - vekony
 * elvalasztoval - a szerzoi jogi sor.
 */
.footer .footer-inner { display: block; }

.footer-fo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
}

.footer .footer-copy {
  margin: 18px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

/* Elérhetőség a logó és a fizetési módok alatt; telefonon tördelődik. */
.footer-kapcsolat {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 18px;
  margin: 16px 0 0;
  font-style: normal;
  font-size: 0.88rem;
  color: #adb5bd;
}

.footer-kapcsolat a { color: #adb5bd; text-decoration: underline; }

.footer-kapcsolat-cim {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--gray-500, #9aa0aa);
}

@media (max-width: 760px) {
  .footer-fo {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  /*
   * A style.css 768px alatt kozepre igazitja a lablecet. A fizetesi blokk es a
   * logo viszont balra all, igy a kozepre zart jogi sor kilogna a sorbol -
   * egyseges balra igazitas rendezettebb.
   */
  .footer .footer-inner { text-align: left; }
}

/* ---- Kosar: netto/afa bontas ---- */

/*
 * A "Fizetendo" ALATT ul, halvanyabban: a vasarlo szamara a brutto vegosszeg a
 * lenyeg, a bontas csak tajekoztatas (es a szamlan ugyanez all).
 */
.afa-bontas {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed rgba(255, 255, 255, 0.10);
  font-size: 0.82rem;
  color: var(--gray-500, #9aa0aa);
}

.afa-sor {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}

/* ---- "Az arak brutto" jelzes ---- */

/*
 * Szandekosan visszafogott: apro, halvany, a tartalom ala simulva. A vasarlonak
 * tudnia kell, hogy a kiirt ar a fizetendo - de nem ez az uzenet lenyege.
 */
.brutto-jelzes {
  font-size: 0.78rem;
  color: var(--gray-500, #8b919b);
  margin: 6px 0 0;
}

/* ---- Berlet QR-kod oldal ----
 *
 * A QR feher alapon ul: a leolvasok sotet-vilagos kontrasztra vannak hangolva,
 * a lap sotet hattere onmagaban rontana a beolvasast.
 */
.qr-lap {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 20px 18px;
  text-align: center;
  margin-bottom: 20px;
}

.qr-kep {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 320px;
  height: auto;
  image-rendering: pixelated;   }

.qr-kod {
  margin: 14px 0 0;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: #0a1918;
}

.qr-adatok { margin-bottom: 16px; }

.qr-tipp {
  font-size: 0.86rem;
  color: var(--gray-500, #9aa0aa);
  line-height: 1.55;
  margin-bottom: 20px;
}

.qr-gombok { display: flex; gap: 10px; flex-wrap: wrap; }

@media (max-width: 480px) {
  .qr-gombok .btn { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   Telefonos alkalmazás-élmény: indítócsempék + alsó navigációs sáv
   --------------------------------------------------------------------------- */

/*
 * Asztali gépen egyik sem kell: ott a felső menü kényelmes, a lap pedig
 * elbírja az egybefüggő kínálatot. Alapból tehát rejtve vannak, és csak
 * telefonméretben kapcsolnak be.
 */
.indito { display: none; }
.also-nav { display: none; }

@media (max-width: 700px) {
  .indito { display: block; padding: 12px 0 4px; }

  /*
   * Teljes szélességű csempék, egymás alatt. Egy oszlopban a leghosszabb
   * felirat is bőven elfér, tehát a betűméretet sem kell a képernyőhöz
   * igazítani — és a sorforma (ikon balra, szöveg mellette) nem hagy üres
   * helyet a csempén belül.
   */
  .indito-racs {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .indito-csempe {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 15px;
    align-items: center;
    min-height: 76px;
    padding: 14px 16px;
    border-radius: 16px;
    border: 1px solid var(--gray-200, #1d3533);
    background: var(--felulet, #0a1918);
    color: inherit;
    text-decoration: none;
  }
  .indito-csempe:active { border-color: var(--neon, #22e3f0); }
  /* Az ikon a bal oszlopban áll, a cím és az alcím mellett — ezért fogja át
     mindkét sort. */
  .indito-csempe svg {
    grid-row: 1 / span 2;
    width: 30px;
    height: 30px;
    color: var(--neon, #22e3f0);
  }
  .indito-cim { font-weight: 700; font-size: 1.05rem; }
  /* A magyarázó sor több soros is lehet — a csempe magassága követi. */
  .indito-alcim { font-size: 0.86rem; line-height: 1.38; color: var(--gray-500, #7fa5a1); }

  /* Kötőjeles szó, ami nem törhet el (pl. „e-mailben"). */
  .nem-torik { white-space: nowrap; }

  /* A kezdőképernyős lap bevezetője telefonon elmarad: ott a lépések a
     lényeg, és fölöttük már áll egy rövid magyarázat. */
  .app-bevezeto { display: none; }

  /*
   * A csempék alatt SZÁNDÉKOSAN marad üres terület: a lábléc (myPOS-logó,
   * ÁSZF, adatkezelés) csak görgetésre bukkanjon elő, hogy az indítóképernyő
   * tiszta maradjon. A 100vh biztosan több, mint a látható magasság, tehát a
   * lábléc mindig a képernyő alsó széle alatt kezdődik.
   */
  .fooldal { min-height: 100vh; }

  /*
   * Telefonon a FŐOLDAL csak a csemperács: a képes karusszel és a teljes
   * kínálat elrejtve. A tartalom a HTML-ben marad (a keresők látják), csak a
   * telefonos indítóképernyő nem ezzel nyit — oda a csempék vezetnek.
   *
   * A `.fooldal` jelölő NÉLKÜLÖZHETETLEN: enélkül a szabály minden oldalon
   * elrejtené a fő szakaszt, és a kategórialapok üresen jönnének be.
   * Ugyanígy a karusszel saját jelölője: az alkalmazás-ajánló ugyanezt az
   * osztályt viseli, azt viszont épp telefonon kell megmutatni.
   */
  .fooldal > .section { display: none; }

  /*
   * A magyarázó sáv telefonon is látszik, de VÉKONYAN: a csempék fölött ül,
   * és csak felvezet — a gomb elmarad belőle, mert közvetlenül alatta ott a
   * csempe, ami ugyanoda visz.
   */
  
  
  
  
  /* A címke és a bővebb szöveg elmarad: a cím és egy rövid mondat elég
     felvezetőnek, a részletek úgyis egy koppintásra vannak a csempén. */
  
  
  
  
  
  
  
  

  /*
   * A kezdőképernyős ajánló nagy csempéje is elmarad: telefonon már a rácsban
   * van a helye. Asztali gépen viszont ott marad, mert ott nincs rács.
   */
  .fooldal ~ .infotabla-sav { display: none; }

  /*
   * A fejléc menüsora telefonon teljesen elmarad: a kosár, a profil és a
   * belépés az alsó navigációs sávban van, a regisztráció pedig a belépés
   * lapjáról érhető el. Így a fejlécben csak a logó marad, és semmi sem
   * ismétlődik.
   */
  /* `.header` nélkül nem érne célt: fentebb, a 480 képpontos blokkban van egy
     `.header .nav-links { display: flex }`, ami két osztállyal erősebb. */
  .header .nav-links { display: none; }

  /* Kosárjelző az alsó sávban. */
  .also-nav-ikon { position: relative; display: inline-flex; }
  .also-nav-jelzo {
    position: absolute;
    top: -5px;
    right: -8px;
    min-width: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--neon, #22e3f0);
    color: #fff;
    font-size: 0.62rem;
    line-height: 16px;
    text-align: center;
    font-weight: 700;
  }

  /* ---- Alsó navigációs sáv ---- */
  .also-nav {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    /* A tartalom fölött, de a ragadós fejléc (100) és a felhasználói menü (200) alatt. */
    z-index: 55;
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
    background: rgba(21, 18, 28, 0.96);
    border-top: 1px solid var(--gray-200, #1d3533);
  }

  /* A fix sáv eltakarná a lap alját — hagyunk neki helyet. */
  body { padding-bottom: 82px; }

  .also-nav-elem {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    flex: 1;
    /* Kényelmes koppintási felület: a WCAG 44 képpontot ajánl. */
    min-height: 48px;
    color: var(--gray-500, #7fa5a1);
    text-decoration: none;
    font-size: 0.7rem;
    font-weight: 600;
  }
  .also-nav-elem svg { width: 23px; height: 23px; }
  .also-nav-elem.aktiv { color: var(--white, #fff); }

  /* A QR középen, kiemelve: az automatánál ez a leggyakoribb művelet. */
  .also-nav-elem--qr {
    color: #ffffff;
    background: var(--neon, #22e3f0);
    border-radius: 14px;
    margin: -2px 8px;
    max-width: 108px;
    box-shadow: 0 4px 14px rgba(34, 227, 240, 0.35);
  }
}

/*
 * ---- „Kezdőképernyőre" csempe: ha már kint van, nem kell ----
 *
 * A `display-mode` a böngésző saját jelzése arról, hogy a lapot a
 * kezdőképernyős ikonról nyitották-e meg. Ez STÍLUSSZABÁLY, nem szkript:
 * a csempe így már az első kirajzoláskor sincs ott, nem villan fel.
 *
 * A `.app-modban` a régebbi iPhone-okra való, ahol a `display-mode` még nem
 * működik — ott az app.js teszi ki az osztályt a `navigator.standalone`
 * alapján. Ott egy pillanatra felvillanhat a csempe; ezt vállaljuk, mert a
 * beágyazott szkriptet a CSP nem engedi (csak külső fájl futhat).
 */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .indito-csempe--app { display: none; }
}
.app-modban .indito-csempe--app { display: none; }

/* ---- Bérletválasztó a QR-kódhoz ---- */
.qr-valaszto { display: flex; flex-direction: column; gap: 12px; }

.qr-valaszto-tetel {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 18px;
  border: 1px solid var(--gray-200, #1d3533);
  border-radius: 14px;
  background: var(--felulet, #0a1918);
  color: inherit;
  text-decoration: none;
}
.qr-valaszto-tetel:active { border-color: var(--neon, #22e3f0); }

.qr-valaszto-fej {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.qr-valaszto-kod { font-size: 1.05rem; font-weight: 700; letter-spacing: 0.5px; }

.qr-valaszto-egyenleg {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--neon-vilagos, #ff8ac4);
  line-height: 1.1;
}

.qr-valaszto-also {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  font-size: 0.88rem;
  color: var(--gray-500, #7fa5a1);
}

/* ---- Az alkalmazás oldala: iPhone telepítési lépések ---- */
.app-lepesek {
  margin: 0;
  padding-left: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  line-height: 1.6;
}
.app-lepesek li::marker { color: var(--neon, #22e3f0); font-weight: 700; }

/* ---- iPhone: böngészőválasztó fülek ---- */
.app-fulek {
  display: flex;
  gap: 6px;
  padding: 5px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--gray-100, #201b2a);
  /* A „Válasszon másik böngészőt" ide görget — a ragadós fejléc ne takarja. */
  scroll-margin-top: 80px;
}
.app-ful {
  flex: 1;
  /* Enélkül a fül nem lehet keskenyebb a feliratánál, és három fül 320 px-en
     kilógna a sávból. */
  min-width: 0;
  padding: 10px 12px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--gray-500, #7fa5a1);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.app-ful.aktiv {
  background: var(--neon, #22e3f0);
  color: #ffffff;
}
/* Keskeny telefonon (iPhone SE, nagyított nézet) a három fül csak így fér el. */
@media (max-width: 360px) {
  .app-ful { padding: 10px 4px; font-size: 0.9rem; }
}

/* ---- iPhone: hol a Megosztás gomb ---- */
.app-lepes-hol {
  display: block;
  margin-top: 4px;
  font-size: 0.86rem;
  color: var(--gray-500, #7fa5a1);
}

/*
 * ---- Felismert böngésző jelzése és a visszaút ----
 *
 * A lap felismeri, melyik böngészőből nyitották meg, és csak annak a lépéseit
 * mutatja (public/app.js). Ez a sor mondja meg, miért épp azokat látja, a
 * gomb pedig átvált a másikra, ha mégis melléfogtunk.
 */
.app-bongeszo-jelzes {
  margin: 0 0 14px;
  font-size: 0.9rem;
}
.app-masik-sor {
  margin: 16px 0 0;
  font-size: 0.88rem;
}
.app-linkgomb {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--neon-vilagos, #8ff4fa);
  text-decoration: underline;
}

/*
 * ---- Telepítés gomb, amíg a böngésző nem engedi ----
 *
 * Tiltva is rózsaszín volt, tehát aktívnak látszott: a látogató nyomkodta, és
 * nem történt semmi. Szürkén egyértelmű, hogy még nem lehet megnyomni.
 *
 * Szándékosan csak erre a gombra szól: a kosár gombja beküldés közben szintén
 * tiltott, de ott a „Kosárban ✓" visszajelzés saját színe kell, hogy látsszon.
 */
#app-telepites:disabled,
#app-telepites:disabled:hover {
  background: var(--gray-200, #1e3d3b);
  color: var(--gray-500, #8fb5b1);
  cursor: default;
  transform: none;
  box-shadow: none;
}

/* ---- Az alkalmazás lap (/alkalmazas) ---- */

/* Androidos Firefox: a telepítés gomb helyett a menü lépései. */
.app-android-firefox { margin-top: 18px; text-align: left; }
/* Ha a szkript Firefoxot ismert fel, a gomb és a Chrome-os út eltűnik, és
   ez a blokk közvetlenül a címsor alá kerül. */
.app-android-firefox--egyedul { margin-top: 0; }

/* Androidon: a feltételes mondat (az ikon sütije megvan) és a megerősített
   „már megvan" jelzés doboza. */
.app-mar-telepitve {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--gray-200, #1e3d3b);
  font-size: 0.9rem;
  line-height: 1.5;
  text-align: left;
}

/*
 * ---- Beépített böngésző (Facebook, Instagram, …) ----
 *
 * Innen nem lehet telepíteni, ezért ez a panel a rendes böngészőbe vezet.
 * A keret neon, mert ilyenkor ez az EGYETLEN teendő a lapon.
 */
.app-beepitett { border-color: var(--neon, #22e3f0); }
.app-beepitett h2 { margin: 0 0 6px; }
.app-beepitett-ok { margin: 0 0 16px; line-height: 1.5; }
.app-beepitett-kezi { margin: 12px 0 0; font-size: 0.88rem; line-height: 1.5; }
.app-beepitett .app-lepesek { margin-bottom: 4px; }

.app-masolas {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--gray-200, #1e3d3b);
}
.app-masolas-cim { margin: 0 0 8px; font-size: 0.86rem; }
.app-masolas-sor { display: flex; gap: 8px; }
.app-masolas-mezo {
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--gray-200, #1e3d3b);
  background: var(--gray-100, #102625);
  color: var(--gray-800, #eefaf8);
  font: inherit;
  font-size: 0.88rem;
}
.app-masolas-jelzes { margin: 8px 0 0; font-size: 0.86rem; }

/* ---- Belépés: a regisztráció hangsúlyos blokkja ---- */
.auth-regisztracio {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--gray-200, #1d3533);
  text-align: center;
}
.auth-regisztracio-cim {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
}
.auth-regisztracio-szoveg {
  margin: 0 0 16px;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--gray-500, #7fa5a1);
}
.auth-regisztracio-szoveg strong { color: var(--white, #fff); }

/*
 * Telefonon a bejárat fotója teljes szélességben a lap TETEJÉN áll (16:9, a
 * portál felirata a kép felső részén), alatta váltakozik a rövid szöveg. A
 * fenti tömör sáv szabályai (min-height: 0, padding: 0) után kell jönnie.
 */

/* A kézzel feltöltött, hatályos jogi PDF beágyazva (views/legal/pdf_dokumentum.ejs).
   A keretet a public/app.js teszi a lapra, csak egérrel kezelt, 700 px-nél szélesebb
   képernyőn; a rejtés itt csak arra az esetre marad, ha az ablakot utólag szűkítik. */
.jogi-pdf-nezo {
  display: block;
  width: 100%;
  height: 80vh;
  min-height: 480px;
  margin-top: 20px;
  border: 1px solid var(--gray-200);
  border-radius: 12px;
  background: #fff;
}
@media (max-width: 700px) {
  .jogi-pdf-nezo { display: none; }
}
/* A feltöltött jogi PDF szövege HTML-ben (048): olvasható, a beépített jogi lapokhoz hasonló szedés. */
.jogi-pdf-szoveg { margin-top: 20px; line-height: 1.65; }
.jogi-pdf-szoveg > * + * { margin-top: 10px; }
.jogi-pdf-szoveg h2 { font-size: 1.15rem; margin-top: 4px; }
.jogi-pdf-szoveg h3 { font-size: 1.02rem; margin-top: 26px; padding-top: 14px; border-top: 1px solid var(--gray-200); }
.jogi-pdf-szoveg p { overflow-wrap: anywhere; }

/* ---- Elállás és korai kezdés (ÁSZF 12–13) ---- */
/* Az admin menüjében a feldolgozatlan elállási nyilatkozatok száma. */
.admin-jelzes {
  display: inline-block; min-width: 20px; padding: 1px 6px; margin-left: 4px;
  border-radius: 10px; background: #6d2333; color: #ffd5dc; font-size: 0.75rem; font-weight: 700; text-align: center;
}
/* Figyelmeztetés (pl. a feltöltendő bérlet a jóváírás előtt lejár). */
.alert-figyelem { background: #2a2110; color: #f39bff; border: 1px solid #6b5220; }

/* A jogi dokumentumok linkjei a pénztár jelölőinél: kattinthatónak kell látszaniuk. */
.check a.jogi-link { color: var(--neon-vilagos); text-decoration: underline; text-underline-offset: 2px; }
.check a.jogi-link:hover { color: var(--white); }
/* A korai kezdés kötelező választása (két, előre ki nem jelölt lehetőség). */
.korai-valasztas { border: 1px solid var(--gray-200); border-radius: 8px; padding: 12px 14px 2px; margin: 4px 0 14px; }
.korai-valasztas legend { padding: 0 6px; font-weight: 600; }