/* ==================================================================
   LAP TETEJÉRE GOMB: központi, önhordó stílus (2026-10-18)
   ------------------------------------------------------------------
   A komponens: resources/views/components/ns-lap-tetejere.blade.php,
   a viselkedés: public/js/ns-lap-tetejere.js. Minden weboldalon
   UGYANOTT és UGYANÚGY jelenik meg (user-kérés 2026-10-18); a korábbi
   két külön megoldást (custom.js + custom.css `#scroll-to-top`, és a
   Pénzügyilab saját `.pl-top-gomb`-ja) ez váltja.

   Egyetlen állítható érték a gomb színe: a weboldal a saját CSS-ében
   megadhatja a `--ns-lap-tetejere-hatter` változót (pl. a Pénzügyilab
   a márkaszínét); alapból semleges, áttetsző sötét.
   ================================================================== */
.ns-lap-tetejere{
  position:fixed; right:24px; bottom:24px; z-index:1070;
  width:44px; height:44px; padding:0; border:none; border-radius:50%;
  background:var(--ns-lap-tetejere-hatter, rgba(0,0,0,.6));
  color:#fff; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(0,0,0,.22);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .25s ease, transform .25s ease, visibility .25s, filter .18s ease;
}
.ns-lap-tetejere.lathato{ opacity:.9; visibility:visible; transform:none; }
.ns-lap-tetejere:hover,
.ns-lap-tetejere:focus-visible{ opacity:1; filter:brightness(1.12); }
.ns-lap-tetejere:focus-visible{ outline:2px solid #fff; outline-offset:2px; }
.ns-lap-tetejere svg{ display:block; }

/* Telefonon kisebb és a sarokhoz közelebb, hogy kevesebb szöveget takarjon */
@media (max-width:640px){
  .ns-lap-tetejere{ right:12px; bottom:12px; width:38px; height:38px; }
  .ns-lap-tetejere.lathato{ opacity:.82; }
}
@media (prefers-reduced-motion:reduce){
  .ns-lap-tetejere{ transition:none; }
}
@media print{
  .ns-lap-tetejere{ display:none !important; }
}