/* Panaszkezelesi lap (/hu/panaszkezeles, /complaints) sajat stiluslapja.
   Generator, reszletek es indoklas: tools/make_complaints_page.py
   A visszaeles-bejelentesi lap (tools/make_whistleblowing_page.py) ugyanezt
   hasznalja (lapfej, panelek, GYIK): ha itt a .pz-top, .pz-wrap, .pz-way,
   .pz-faq vagy .pz-dl szabalya valtozik, mindket generatort ujra kell
   futtatni.

   2026-09-30: a tulajdonos szerint a dokumentumszeru lap "tul sok szoveg, nem
   nez ki jol". Uj szerkezet (eloszor a visszaeles-bejelentesi lapon, a
   tulajdonos jovahagyasaval atveve ide): a site sajat ketoszlopos lapfeje
   (cim | egy mondat + gomb), a csatornak szurke panelekben ikon nelkul, a
   reszletek lenyilo GYIK-ban (a site plusz/minusz ikonjaival, nativ
   <details>-szel - a site .faq-ja billentyuzettel nem nyithato).

   2026-09-29: a lap a site blogcikk-sablonjara all (body.blog-post,
   .post-container > .col-div > .post-content, blog-post.css), ugyanugy, mint a
   GYIK-szabalyzatok. A tulajdonos szerint a korabbi landing-szerkezet
   (szemoldokcimkek, ikoncsempek, kartyaracs, sotet sav, szamcsempek) "tul
   AI-s" volt; 21 bank/fintech/kripto panaszlapjabol 3 hasznalt ikonos
   kartyat, a tobbi dokumentumszeru. Ez a fajl ezert CSAK harom dolgot tud:
   a lapfej igazitasa, a vonalas definicios lista, es az urlap.

   HATOKOR ES KASZKAD - ezt olvasd el, mielott szabalyt irsz ide
   -------------------------------------------------------------
   A keret (service-paused) a core.min.css-t, az all.css-t es a cookie.css-t
   a <nav>-ba agyazott preload-dal tolti, vagyis EZ a fajl es a blog-post.css
   (a <head>-ben) ELOBB toltodik be. Azonos fajsulynal tehat a keret nyer.
   Mert utkozesek:

     core.min.css  a { all: unset; ... }            (0,0,1) - minden linket
                                                    lecsupaszit
     core.min.css  .blog-post .post-content a[href] (0,3,1) - sotet szoveg,
                                                    2 px narancs alahuzas
     blog-post.css .blog-post .post-content p/ul/a  (0,2,1) - 18 px, 24 px ter
     blog-post.css iframe { margin: 48px auto }     - a reCAPTCHA jelvenyet is
     all.css       section { padding: 6rem 4rem }   - a hasabban NINCS section
     all.css       .page-headline .title            (0,2,0) max 627 px
     core.min.css  .button.button-m                 (0,2,0)
     inline        input:focus-visible { outline: 2px solid #FF7700 }
                                                    - feheren 2,66:1

   Ezert minden szabaly `.panasz` elotaggal all, az urlap pedig a
   .post-content TESTVERE (.pz-formwrap), hogy a blog-post.css p/ul/a
   szabalyai ne szivarogjanak a mezokbe.

   SZINEK - csak a core.min.css :root tokenjei, uj szin nincs
     grey-600 #282828  szoveg, fokuszgyuru (feheren 14,7:1)
     grey-500 #535353  mezokeret (7,69:1), segedszoveg
     grey-200 #D9D9D9  dekorativ elvalaszto vonal (inputhoz NEM: 1,41:1)
     grey-100 #F2F2F2  a nyilo al-panel es a "nem elerheto" doboz
     status-error      CSAK keret/sav; a hibaszoveg #282828
     orange            csak a hr.orange es a site linkalahuzasa. Szoveg soha.

   NBSP-t nem hasznalunk (a Gotham NBSP-je 0 px): ahol valami nem torhet,
   ott .pz-nw. */

.panasz [hidden] {
  display: none !important;
}

/* ===== lapfej: cim balra, mondat + gomb jobbra (a site sajat mintaja) ===== */

.panasz .pz-top {
  padding-bottom: 56px;
  margin-bottom: 0;
}
.panasz .pz-top .page-headline-content {
  max-width: 1040px;
  align-items: flex-end;
}
/* A cim a sajat szelessegeben all (egy sorban), a leiras kitolti a maradekot. */
.panasz .pz-top .title {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  max-width: none;
}
.panasz .pz-top .description {
  flex: 1 1 0;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  max-width: 30rem;
}
.panasz .pz-top .description p {
  margin: 0;
}
.panasz .pz-top .pz-aside {
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-500);
}
.panasz hr.pz-rule {
  max-width: min(1040px, calc(100% - 128px));
}

/* ===== torzs: szakaszok, panelek, GYIK ==================================== */

.panasz .pz-wrap {
  box-sizing: content-box;
  max-width: 1040px;
  margin: 0 auto;
  padding: 56px 64px 96px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  color: var(--color-grey-600);
}
.panasz .pz-sec + .pz-sec {
  margin-top: 72px;
}
.panasz .pz-sec > .pz-h2 {
  padding-bottom: 20px;
}
.panasz .pz-intro {
  max-width: 68ch;
  margin: 0 0 24px;
  font-size: 18px;
  line-height: 140%;
}
/* A site linkmintaja a .post-content-en kivul is (a core `a { all: unset }`
   utan): sotet szoveg, narancs alahuzas. A gombra nem vonatkozik. */
.panasz .pz-wrap a:not(.button),
.panasz .pz-top a:not(.button) {
  color: var(--color-grey-600);
  text-decoration: underline;
  text-decoration-color: var(--color-orange-600);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  overflow-wrap: anywhere;
}

/* A bejelentesi/panaszteteli modok: egyforma szurke panelek, ikon nelkul. */
.panasz .pz-ways {
  display: grid;
  grid-template-columns: repeat(var(--pz-cols, 3), minmax(0, 1fr));
  gap: 16px;
}
.panasz .pz-ways--4 {
  --pz-cols: 4;
}
.panasz .pz-way {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: 16px;
  background: var(--color-grey-100);
}
.panasz .pz-way h3 {
  margin: 0 0 4px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 110%;
  color: var(--color-grey-600);
}
.panasz .pz-way p {
  margin: 0;
  font-size: 16px;
  line-height: 140%;
}
.panasz .pz-way .pz-small {
  color: var(--color-grey-500);
}
.panasz .pz-way .pz-go {
  margin-top: auto;
  padding-top: 8px;
  font-weight: 500;
}
.panasz .pz-wrap .pz-after {
  margin: 16px 0 0;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-500);
}

/* GYIK: a site mintaja (vonalak, plusz/minusz), nativ <details>-szel. */
.panasz .pz-faq {
  border-bottom: 1px solid var(--color-grey-200);
}
.panasz .pz-faq > details {
  border-top: 1px solid var(--color-grey-200);
}
.panasz .pz-faq > details > summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  color: var(--color-grey-600);
  cursor: pointer;
  list-style: none;
}
.panasz .pz-faq > details > summary::-webkit-details-marker {
  display: none;
}
.panasz .pz-faq summary .icon {
  flex: none;
}
.panasz .pz-faq details[open] > summary .faq-close,
.panasz .pz-faq details:not([open]) > summary .faq-open {
  display: none;
}
.panasz .pz-faq .pz-a {
  max-width: 68ch;
  padding: 0 40px 24px 0;
  font-size: 16px;
  line-height: 140%;
}
.panasz .pz-faq .pz-a p {
  margin: 0;
}
.panasz .pz-faq .pz-a p + p,
.panasz .pz-faq .pz-a p + h3 {
  margin-top: 12px;
}
.panasz .pz-faq .pz-a h3 {
  margin: 20px 0 4px;
  padding: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
}
.panasz .pz-faq .pz-a .pz-dl {
  margin: 8px 0;
}
.panasz .pz-docs {
  margin: 24px 0 0;
  padding: 0 0 0 20px;
  font-size: 16px;
  line-height: 140%;
}
.panasz .pz-wrap .pz-fine {
  margin: 32px 0 0;
  font-size: 14px;
  line-height: 140%;
  color: var(--color-grey-500);
}

/* ===== hasab ============================================================= */

/* A blog-post.css 42/32 px-es cimsorai egy tomor szabalyozoi lapon tul
   hangosak: a DS Heading 3 / Heading 5 (32 / 20 px). */
.panasz .post-content h2,
.panasz .pz-h2 {
  margin: 0;
  padding: 0 0 16px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 32px;
  line-height: 110%;
  letter-spacing: 0;
  color: var(--color-grey-600);
}
.panasz .post-content h2:not(:first-child) {
  margin-top: 40px;
}
.panasz .post-content h3,
.panasz .pz-h3 {
  margin: 0;
  padding: 32px 0 8px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 110%;
  color: var(--color-grey-600);
}
.panasz .post-content > h2 + p + h3 {
  padding-top: 16px;
}
.panasz .post-content > h2 + h3 {
  padding-top: 8px;
}
/* A blog-post.css listaszine fekete (#000), a bekezdese #282828. */
.panasz .post-content ul,
.panasz .post-content ol {
  color: var(--color-grey-600);
}
.panasz .post-content a[href] {
  font: inherit;
}

/* A vonalas definicios lista: csatornak, szervek, siker-adatok. */
.panasz .pz-dl {
  align-self: stretch;
  margin: 0 0 24px;
  padding: 0;
  border-bottom: 1px solid var(--color-grey-200);
}
.panasz .pz-dl-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 4px 24px;
  padding: 14px 0;
  border-top: 1px solid var(--color-grey-200);
}
.panasz .pz-dl dt {
  margin: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 140%;
  color: var(--color-grey-600);
}
.panasz .pz-dl dd {
  margin: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 140%;
  color: var(--color-grey-600);
  overflow-wrap: anywhere;
}
.panasz .pz-dl .pz-note {
  display: block;
  margin-top: 4px;
  font-size: 16px;
  color: var(--color-grey-500);
}
/* A szervek elerhetosegei kisebbek, a cimke szurke. */
.panasz .pz-dl--s {
  margin-bottom: 8px;
}
.panasz .pz-dl--s .pz-dl-row {
  padding: 10px 0;
}
.panasz .pz-dl--s dt {
  font-weight: 400;
  font-size: 16px;
  color: var(--color-grey-500);
}
.panasz .pz-dl--s dd {
  font-size: 16px;
}
.panasz .post-content p.pz-xlink {
  padding-bottom: 8px;
}
.panasz .post-content p.pz-court {
  padding-top: 32px;
}
.panasz .post-content p.pz-fine,
.panasz .post-content .pz-meta {
  font-size: 16px;
  color: var(--color-grey-500);
}

/* ===== linkek, kiemeles, segedosztalyok ================================== */

/* A core.min.css `a { all: unset }` szabalya utan a .post-content-en kivuli
   linkbol csak a szin maradna. A site mintaja: sotet szoveg, narancs
   alahuzas (a .post-content-ben a core.min.css adja). */
.panasz .pz-formwrap a:not(.button) {
  color: var(--color-grey-600);
  text-decoration: underline;
  text-decoration-color: var(--color-orange-600);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  cursor: pointer;
  overflow-wrap: anywhere;
}
.panasz .pz-strong {
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
}
.panasz .pz-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.panasz .pz-nw,
.panasz a[href^="tel:"] {
  white-space: nowrap;
}

/* Egyseges fokuszgyuru: #282828 (14,7:1). A keret inline szabalya narancsot
   adna (2,66:1). */
.panasz a:focus-visible,
.panasz button:focus-visible,
.panasz input:focus-visible,
.panasz textarea:focus-visible,
.panasz summary:focus-visible,
.panasz [tabindex]:focus-visible {
  outline: 2px solid var(--color-grey-600);
  outline-offset: 2px;
  border-radius: 2px;
}

/* A keret navigacioja position:fixed (1440 px-en 8-92, 375 px-en 0-84 px):
   minden fokuszalhato elem ennyivel a nav alatt alljon meg (WCAG 2.4.11). */
.panasz input,
.panasz textarea,
.panasz button,
.panasz summary,
.panasz a,
.panasz #pz-urlap,
.panasz .pz-field,
.panasz .pz-success,
.panasz #pz-success-title {
  scroll-margin-top: 140px;
  scroll-margin-bottom: 24px;
}

/* A blog-post.css globalis iframe-margoja a reCAPTCHA jelvenyet is eltolna. */
.grecaptcha-badge iframe {
  margin: 0;
}

/* ===== urlap ============================================================= */

.panasz .pz-formwrap {
  width: 100%;
  max-width: 800px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
}
.panasz .pz-formwrap p {
  margin: 0;
}
.panasz .pz-formwrap .pz-req-note {
  margin: 0 0 24px;
  color: var(--color-grey-500);
}

.panasz .pz-fs {
  min-width: 0;
  margin: 0;
  padding: 32px 0 8px;
  border: 0;
  border-top: 1px solid var(--color-grey-200);
}
.panasz .pz-form > .pz-fs:first-of-type {
  padding-top: 0;
  border-top: 0;
}
/* A kapcsoloval nyilo reszszekciok (1.b, 2.a, 2.b) szurke belso panelben:
   latszik, hogy a kapcsolohoz tartoznak. A 2.a-n belul a 2.b feher. */
.panasz .pz-fs--sub {
  margin: 8px 0 16px;
  padding: 24px;
  border: 0;
  border-radius: 16px;
  background: var(--color-grey-100);
}
.panasz .pz-fs--sub .pz-fs--sub {
  background: var(--color-white);
  border: 1px solid var(--color-grey-200);
}
/* A legend lebegtetve viselkedik rendes blokkelemkent (kulonben a keretbe
   ul, es a margoja nem hat). A kovetkezo elem torli a lebegest. */
.panasz .pz-legend {
  float: left;
  width: 100%;
  margin: 0 0 20px;
  padding: 0;
}
.panasz .pz-legend + * {
  clear: both;
}
.panasz .pz-legend .pz-h3 {
  display: block;
  padding: 0;
}
.panasz .pz-fs--sub .pz-legend .pz-h3 {
  font-size: 18px;
}
.panasz .pz-legend--group {
  float: none;
  margin: 0 0 8px;
  padding: 0;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
}
.panasz .pz-group {
  min-width: 0;
  margin: 0 0 20px;
  padding: 0;
  border: 0;
}
.panasz .pz-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 0 32px;
}

.panasz .pz-field {
  margin: 0 0 20px;
}
.panasz .pz-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0 16px;
}
.panasz .pz-row--pc {
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.panasz .pz-label {
  display: block;
  margin: 0 0 8px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
}
.panasz .pz-hint {
  display: block;
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-500);
}
.panasz .pz-formwrap p.pz-hint {
  margin: 0 0 12px;
}
.panasz .pz-formwrap p.pz-docnote {
  margin: 0 0 16px;
}

.panasz .pz-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: 48px;
  margin: 0;
  padding: 0 16px;
  font-family: "Gotham Office", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
  background: var(--color-white);
  border: 1px solid var(--color-grey-500);
  border-radius: 8px;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
}
.panasz textarea.pz-input {
  height: auto;
  min-height: 176px;
  padding: 12px 16px;
  resize: vertical;
}
.panasz textarea.pz-input--short {
  min-height: 72px;
}
/* Hibas mezo: a piros keret 2 px-re hizik (inset arnyek, elmozdulas nelkul),
   es FOKUSZBAN IS megmarad. */
.panasz .pz-input[aria-invalid="true"] {
  border-color: var(--color-status-error);
  box-shadow: inset 0 0 0 1px var(--color-status-error);
}

/* Karakterszamlalo a "Mi tortent?" alatt (a panasz.js tolti). A helyet
   lefoglaljuk, hogy a megjeleneskor ne ugorjon a lap. */
.panasz .pz-formwrap .pz-count {
  min-height: 22px;
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 140%;
  text-align: right;
  color: var(--color-grey-500);
}
/* Tullepes: sotet, Medium (piros szoveg nincs - a DS szerint a hibaszin csak keret). */
.panasz .pz-formwrap .pz-count--over {
  font-weight: 500;
  color: var(--color-grey-600);
}

/* A nem kotelezo mezok lenyiloja: keret nelkuli szoveges kapcsolo. */
.panasz .pz-more {
  margin: 0 0 20px;
}
.panasz .pz-more-sum {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  cursor: pointer;
  list-style: none;
}
.panasz .pz-more-sum::-webkit-details-marker {
  display: none;
}
.panasz .pz-more-sum::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  margin: 0 4px 0 2px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
}
.panasz .pz-more[open] > .pz-more-sum::before {
  transform: rotate(45deg);
}
.panasz .pz-more-body {
  padding: 16px 0 0;
}

.panasz .pz-formwrap .pz-error {
  margin: 8px 0 0;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
}
/* Hibas mezoblokk: 4 px-es piros sav a bal szelen (ikon nincs). */
.panasz .pz-field:has(> [aria-invalid="true"]),
.panasz .pz-group[aria-invalid="true"] {
  margin-left: -16px;
  padding-left: 12px;
  border-left: 4px solid var(--color-status-error);
}

/* Jelolonegyzet es radio: nativ elem 24x24, sotet kitoltessel. A cimke az
   egesz sort kattinthatova teszi. */
.panasz .pz-check {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 0 0 8px;
  padding: 4px 0;
  font-size: 16px;
  line-height: 140%;
  color: var(--color-grey-600);
  cursor: pointer;
}
.panasz .pz-check input {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  margin: 0;
  accent-color: var(--color-grey-600);
  cursor: pointer;
}
.panasz .pz-check input[aria-invalid="true"] {
  outline: 2px solid var(--color-status-error);
  outline-offset: 2px;
}
.panasz .pz-check input[aria-invalid="true"]:focus-visible {
  outline-color: var(--color-grey-600);
}
.panasz .pz-toggles {
  margin: 8px 0 12px;
  padding-top: 16px;
  border-top: 1px solid var(--color-grey-200);
}
.panasz .pz-toggle {
  margin: 0 0 8px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
}

/* ---- visszajelzesek: hibaosszesito, bekuldesi hiba, "nem elerheto" */

.panasz .pz-summary,
.panasz .pz-alert {
  margin: 0 0 24px;
  padding: 16px 20px;
  border-left: 4px solid var(--color-status-error);
  background: var(--color-white);
  color: var(--color-grey-600);
  scroll-margin-top: 140px;
}
.panasz .pz-alert {
  margin: 24px 0 0;
}
.panasz .pz-box-title {
  margin: 0 0 8px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 120%;
  color: var(--color-grey-600);
}
.panasz .pz-summary ul {
  margin: 8px 0 0;
  padding: 0 0 0 20px;
}
.panasz .pz-summary li {
  margin: 0 0 8px;
}
.panasz .pz-alert p {
  margin: 0 0 8px;
}
.panasz .pz-alert .pz-alert-dl {
  margin-top: 8px;
}
/* "Nem elerheto" es noscript: a site .disclaimer doboza (#F2F2F2, 16 px). */
.panasz .pz-box,
.panasz #pz-unavailable {
  margin: 0;
  padding: 24px 32px;
  border: 0;
  border-radius: 16px;
  background: var(--color-grey-100);
}
.panasz .pz-box p + p,
.panasz #pz-unavailable p + p {
  margin-top: 12px;
}

.panasz .pz-privacy {
  margin: 16px 0 0;
  padding: 24px 0 0;
  border-top: 1px solid var(--color-grey-200);
}
.panasz .pz-formwrap .pz-privacy p {
  margin: 0 0 12px;
}

.panasz .pz-submit-row {
  margin: 24px 0 0;
}
.panasz .button.pz-submit,
.panasz .button.pz-sbtn {
  justify-content: center;
  text-align: center;
  min-height: 48px;
  padding: 16px 40px;
  border-radius: 8px;
  font-family: "Gotham", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 100%;
  /* A core `.button { transition: 0.3s ease-out }` MINDENT animal, a
     fokuszgyuru szinet is. Csak a hatter valtozzon. */
  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}
.panasz .button.pz-submit:disabled {
  opacity: .5;
  cursor: not-allowed;
}
/* Az allapotsor helyet mindig lefoglaljuk, hogy ne ugorjon a lap. */
.panasz .pz-formwrap .pz-status {
  min-height: 24px;
  margin: 12px 0 0;
  color: var(--color-grey-600);
}

.panasz .pz-hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- siker-allapot: az urlap helyen, keret es ikon nelkul */

.panasz .pz-success .pz-dl {
  margin: 8px 0 20px;
}
/* A "Legkesobb eddig valaszolunk" cimke 180 px-en ket sorba torne. */
.panasz .pz-success .pz-dl-row {
  grid-template-columns: 280px minmax(0, 1fr);
}
.panasz .pz-success .pz-ref {
  font-weight: 500;
  letter-spacing: .5px;
}
.panasz .pz-formwrap .pz-success > p {
  margin: 0 0 12px;
  font-size: 18px;
}
.panasz .pz-success .pz-h3 {
  padding-top: 24px;
}
.panasz .pz-sactions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 16px 0 0;
}

/* ===== <= 769 px ========================================================= */

/* ===== <= 1199 px: a lapfej egy oszlopba, a 4 panel 2 x 2 ================== */

@media (max-width: 1199px) {
  .panasz .pz-top .page-headline-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
  .panasz .pz-top .title,
  .panasz .pz-top .description {
    max-width: 40rem;
  }
  .panasz .pz-ways--4 {
    --pz-cols: 2;
  }
}

@media (max-width: 899px) {
  .panasz .pz-ways {
    --pz-cols: 1;
  }
  .panasz .pz-ways--4 {
    --pz-cols: 1;
  }
}

@media (max-width: 769px) {
  /* A keret itt 112 px-et ad fent; a 84 px-es fix nav alatt ez szoros. A keret
     itt kozepre zar: a lapfej is. */
  .panasz .pz-top {
    padding-top: 136px;
    padding-bottom: 40px;
  }
  .panasz .pz-top .page-headline-content,
  .panasz .pz-top .description {
    align-items: center;
    text-align: center;
  }
  .panasz .pz-top .description .button {
    width: 100%;
    box-sizing: border-box;
    justify-content: center;
  }
  .panasz hr.pz-rule {
    max-width: calc(100% - 32px);
  }
  .panasz .pz-wrap {
    padding: 40px 16px 64px;
  }
  .panasz .pz-sec + .pz-sec {
    margin-top: 48px;
  }
  .panasz .pz-intro {
    font-size: 16px;
  }
  .panasz .pz-way {
    padding: 24px 20px;
  }
  .panasz .pz-faq > details > summary {
    font-size: 16px;
    padding: 16px 0;
  }
  .panasz .pz-faq .pz-a {
    padding-right: 0;
  }
  /* A hasab margoja itt 16 px: a hibasav ne a kepernyo szelere tapadjon. */
  .panasz .pz-field:has(> [aria-invalid="true"]),
  .panasz .pz-group[aria-invalid="true"] {
    margin-left: 0;
  }
  .panasz .pz-success .pz-dl-row {
    grid-template-columns: minmax(0, 1fr);
  }
  .panasz .post-content h2,
  .panasz .pz-h2 {
    font-size: 24px;
  }
  .panasz .post-content h3,
  .panasz .pz-h3 {
    font-size: 18px;
  }
  .panasz .pz-dl-row {
    grid-template-columns: minmax(0, 1fr);
    padding: 12px 0;
  }
  .panasz .pz-dl dt,
  .panasz .pz-dl dd {
    font-size: 16px;
  }
  .panasz .pz-dl--s dt {
    font-size: 14px;
  }
}

/* ===== <= 560 px: telefon =============================================== */

@media (max-width: 560px) {
  .panasz .pz-fs--sub {
    padding: 20px 16px;
  }
  /* Az "Iranyitoszam" es a "Telepules" cimke 1fr 2fr-ben osszeerne. */
  .panasz .pz-row,
  .panasz .pz-row--pc {
    grid-template-columns: minmax(0, 1fr);
  }
  .panasz .button.pz-submit,
  .panasz .button.pz-sbtn,
  .panasz .pz-alert .button {
    width: 100%;
    box-sizing: border-box;
    padding: 16px 20px;
  }
  .panasz .pz-box,
  .panasz #pz-unavailable {
    padding: 20px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .panasz * {
    scroll-behavior: auto !important;
  }
}
