/* =====================================================================
   MAGMA — GLOBÁLIS FELÜLETI SZABÁLYOK

   Ez a fájl MINDEN oldalon betöltődik, és azokat a viselkedéseket
   egységesíti, amiknek platformtól függetlenül azonosnak kell lenniük:
   Android, iOS, iPadOS, macOS, Windows.

   Miért közös fájl és nem oldalankénti javítás: a hibák (kék villanás,
   görgethető háttér, kemény animáció) MINDEN felületen jelentkeztek.
   Fájlonként foltozva előbb-utóbb kimaradna egy — így egy helyen
   karbantartható, és a böngésző gyorsítótárazza.

   Készült: 2026-08-19
   ===================================================================== */

/* ---------------------------------------------------------------------
   1. A KÉK VILLANÁS MEGSZÜNTETÉSE

   Android Chrome (és régebbi iOS Safari) minden koppintásra kirajzol egy
   féláttetsző kék téglalapot. Ez a rendszer saját visszajelzése, de a
   sötét, prémium felületen olcsónak hat — és a MAGMA-nak saját, finomabb
   visszajelzései vannak (elmozdulás, fény).

   MINDEN elemre kell, nem csak a gombokra: a kártyák, listasorok és
   címkék is kaptak villanást.
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;          /* iOS: hosszú nyomásra ne ugorjon fel a menü */
}

/* A szövegkijelölést viszont MEG KELL hagyni ott, ahol értelme van —
   e-mail-cím, azonosító, telefonszám másolása. */
input, textarea, [contenteditable],
.cazon, .vzdata, .mono, code, kbd, samp {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* ---------------------------------------------------------------------
   2. GÖRGETÉS-ZÁR NYITOTT MENÜNÉL / MODÁLNÁL

   Eddig a felugró kártya alatt tovább lehetett görgetni a lapot. Ez
   zavaró: a felhasználó azt hiszi, a kártyát mozgatja, közben a háttér
   csúszik el alatta.

   A `position: fixed` a body-n azért kell, mert iOS Safariban az
   `overflow: hidden` ÖNMAGÁBAN NEM elég — a lap attól még gördül. A
   görgetési pozíciót a JS menti és állítja vissza (ui-global.js).
   --------------------------------------------------------------------- */
html.mg-lock {
  overflow: hidden;
  overscroll-behavior: none;
}
html.mg-lock body {
  position: fixed;
  width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

/* A felugró elem TARTALMA viszont görgethető maradjon (hosszú menü,
   magas modál), és a görgetése ne "szivárogjon át" a háttérre. */
html.mg-lock .overlay,
html.mg-lock .vzov,
html.mg-lock .menudrop,
html.mg-lock .mmenu,
html.mg-lock .pmodal,
html.mg-lock .vzcard {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------
   3. LÁGYABB, LASSABB MEGJELENÉS

   A korábbi animációk `ease` görbével, 0.2-0.25s alatt futottak — ettől
   "kapcsolószerűnek" hatottak. A prémium érzethez lassabb, kifutó görbe
   kell: gyorsan indul, lágyan érkezik meg.

   Az !important SZÁNDÉKOS: a portálok beágyazott <style> blokkjai
   ugyanilyen specifikus szabályokat tartalmaznak, és a betöltési sorrend
   fájlonként eltér. Enélkül nem lenne kiszámítható, melyik nyer.
   --------------------------------------------------------------------- */
:root {
  --mg-gorbe: cubic-bezier(.16, 1, .3, 1);   /* kifutó — érkezéshez */
  --mg-gorbe-ki: cubic-bezier(.4, 0, .2, 1); /* egyenletes — távozáshoz */
  --mg-ido: .38s;
  --mg-ido-ki: .28s;
}

/* Lenyíló menü */
.menudrop {
  transition: opacity var(--mg-ido-ki) var(--mg-gorbe-ki),
              transform var(--mg-ido-ki) var(--mg-gorbe-ki),
              visibility 0s linear var(--mg-ido-ki) !important;
}
.menudrop.open {
  transition: opacity var(--mg-ido) var(--mg-gorbe),
              transform var(--mg-ido) var(--mg-gorbe),
              visibility 0s !important;
}

/* Felugró kártyák háttere — finomabb, mélyebb elhomályosodás */
.overlay {
  background: rgba(0, 0, 0, .68) !important;
  -webkit-backdrop-filter: blur(14px) saturate(.9) !important;
  backdrop-filter: blur(14px) saturate(.9) !important;
  transition: opacity var(--mg-ido-ki) var(--mg-gorbe-ki),
              visibility 0s linear var(--mg-ido-ki) !important;
}
.overlay.open {
  transition: opacity var(--mg-ido) var(--mg-gorbe),
              visibility 0s !important;
}

/* Teljes képernyős mobilmenü */
.mmenu {
  transition: opacity var(--mg-ido) var(--mg-gorbe),
              transform var(--mg-ido) var(--mg-gorbe),
              visibility 0s linear var(--mg-ido) !important;
}
.mmenu.open {
  transition: opacity var(--mg-ido) var(--mg-gorbe),
              transform var(--mg-ido) var(--mg-gorbe),
              visibility 0s !important;
}

/* A hamburger vonalai is lágyabban forduljanak X-be */
.menubtn span, .ham span {
  transition: transform var(--mg-ido) var(--mg-gorbe),
              opacity var(--mg-ido-ki) var(--mg-gorbe-ki),
              background var(--mg-ido-ki) ease !important;
}

/* ---------------------------------------------------------------------
   4. EGYSÉGES ÉRINTÉSI CÉLPONTOK

   Az irányelvek 44 képpontot ajánlanak. Ez alatt a hüvelykujj gyakran
   mellényúl — különösen listákban, ahol a sorok közel vannak.
   Csak MOBILON érvényes: asztali egérrel a kisebb célpont is pontos.
   --------------------------------------------------------------------- */
@media (max-width: 768px) and (pointer: coarse) {
  .menuitem, .mmenu a, .menudrop a, .menudrop button {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
}

/* ---------------------------------------------------------------------
   5. CSÖKKENTETT MOZGÁS

   Aki a rendszerében kikapcsolta az animációkat (mozgásérzékenység,
   akadálymentesség), annál a mozgás elmarad — de a felület MŰKÖDIK,
   csak azonnal vált.
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .menudrop, .menudrop.open,
  .overlay, .overlay.open,
  .mmenu, .mmenu.open,
  .menubtn span, .ham span {
    transition-duration: .01s !important;
  }
}

/* ---------------------------------------------------------------------
   6. A MAGAS FELUGRÓ KÁRTYÁK NE VÁGÓDJANAK LE

   EZ VOLT A „Biztonság menüpontnál nem látszódik az egész oldal" HIBA.

   Mi történt: a felugró réteg `position:fixed; inset:0` volt, és
   `display:flex; align-items:center`-rel középre igazította a kártyát.
   Amíg a kártya belefér a képernyőbe, ez tökéletes. Ha viszont MAGASABB
   (a Biztonság-kártyán QR-kód + kulcs + beviteli mező van), a középre
   igazítás a kártyát FELÜL IS ALUL IS kilógatja — a tetejét pedig
   böngészőben nem lehet visszagörgetni. Telefonon ez a leggyakoribb,
   mert ott a legkisebb a magasság.

   A javítás a bevált recept:
     - a réteg felül kezd (`flex-start`) és görgethető (`overflow-y:auto`),
     - a kártya `margin: auto`-t kap — így AMÍG BEFÉR, továbbra is
       pontosan középen áll, amikor pedig nem fér be, felül kezdődik és
       végiggörgethető. Semmi nem vágódik le.
   A `padding` a képernyő pereme és a kártya közt hagy levegőt, alul a
   telefonos kezelősáv (safe-area) magasságával megnövelve.
   --------------------------------------------------------------------- */
.overlay,
.vzov {
  align-items: flex-start !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 20px !important;
  padding-top: calc(20px + env(safe-area-inset-top)) !important;
  padding-bottom: calc(20px + env(safe-area-inset-bottom)) !important;
}
.overlay > *,
.vzov > * {
  margin: auto !important;   /* befér: középen · nem fér be: görgethető */
  flex-shrink: 0;            /* iOS Safari máskülönben összenyomná */
}

/* ---------------------------------------------------------------------
   7. AZONOS MAGASSÁGÚ MEZŐ ÉS GOMB

   EZ VOLT az androidos „a kitölthető sáv és a gomb egyenlőtlen" hiba.

   Mi történt: a beviteli sáv magassága rögzített (58 képpont), a gombé
   viszont a betűmagasságból + belső térközből jött ki. A betű magasságát
   minden rendszer kicsit másképp számolja — Androidon jóval alacsonyabb
   lett a gomb, mint a fölötte lévő mező, és a kettő nem passzolt.

   A javítás: a gomb ugyanazt a RÖGZÍTETT magasságot kapja, mint a mező,
   és a felirat benne középre kerül. Így minden rendszeren azonos.
   --------------------------------------------------------------------- */
.vzgo {
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
}