/**
 * @file
 * A hozzájárulás-kezelő és a helyőrző panel megjelenése.
 *
 * MIÉRT ÍRJUK MEG TELJESEN
 * ------------------------
 * A Klaro „no-css" változatát használjuk, vagyis a könyvtár SEMMILYEN stílust
 * nem hoz magával. Ez szándékos: a Klaro alapértelmezett, sötétlila
 * megjelenése köszönőviszonyban sincs az oldallal, és a sütipárbeszéd pont az
 * a hely, ahol az idegen kinézet gyanút kelt — a látogató ott dönt arról,
 * kiben bízik meg.
 *
 * Cserébe MINDENT nekünk kell megírni, a kapcsolóktól a görgethető törzsig.
 *
 * AZ OSZTÁLYNEVEK NEM FEJBŐL VANNAK.
 * A `klaro.js` render-kódjából fejtettem vissza őket, mert az első két
 * változatom rossz szerkezetre épült, és ezért futottak egymásba a feliratok,
 * lógtak ki a gombok, és maradt működésképtelen a lenyitó. A valódi szerkezet:
 *
 *   li.cm-purpose
 *     input.cm-list-input[.required][.half-checked][.only-required]
 *     label.cm-list-label
 *       span.cm-list-title  span.cm-required?  span.cm-opt-out?
 *       span.cm-switch > div.slider.round.active
 *     div#…-description > p.cm-list-description [+ p.purposes]
 *     div.cm-services
 *       div.cm-caret > a          <- a lenyitó
 *       ul.cm-content[.expanded]  <- EZ rejtett alapból
 *         li.cm-service > div > (ugyanaz a hármas)
 *
 * Két dolog ebből nem magától értetődő, és mindkettő hiba volt korábban:
 *
 *   - A `.cm-content` a Klaro saját CSS-ében `display:none`, és a lenyitó
 *     csak az `expanded` osztályt teszi rá. Mivel a no-css változatot
 *     használjuk, EZT NEKÜNK KELL megírni — enélkül minden szolgáltatás
 *     látszik, a lenyitó pedig egy semmit sem csináló link.
 *   - A `.cm-caret` nem a link, hanem a linket tartalmazó doboz.
 *
 * A gombok osztályai átfedők (a „Választásom mentése" egyszerre
 * `cm-btn-success` és `cm-btn-info`), ezért nem az osztály nevére, hanem a
 * gomb SZEREPÉRE építünk, `:not()`-tal elhatárolva.
 *
 * A SZÍNEK a működő oldalról vett mintavételből származnak — ugyanazok,
 * amiket a tagi oldalak panelje is használ.
 */

:root {
  --pk-suti-marka: #5B9DC6;
  --pk-suti-marka-sotet: #4A87AE;
  --pk-suti-akcent: #7DC476;
  --pk-suti-cim: #25272C;
  --pk-suti-szoveg: #5C5863;
  --pk-suti-halvany-szoveg: #7C7885;
  --pk-suti-keret: #DCE6EC;
  --pk-suti-keret-eros: #B4C4CE;
  --pk-suti-halvany: #F1F6F9;
  --pk-suti-kapcsolo-ki: #CBD5DC;
  --pk-suti-arnyek: 0 10px 40px rgba(37, 39, 44, .18);
  --pk-suti-kerekites: 12px;
}

/* =====================================================================
   1. A VISSZATARTOTT TARTALOM HELYE
   ===================================================================== */

.pk-suti-zarolt {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1.5rem 0;
  padding: 2rem 1.5rem;
  border: 1px dashed var(--pk-suti-keret);
  border-radius: var(--pk-suti-kerekites);
  background:
    linear-gradient(0deg, rgba(91, 157, 198, .04), rgba(91, 157, 198, .04)),
    var(--pk-suti-halvany);
  min-height: 200px;
}

.pk-suti-feloldva {
  margin: 1.5rem 0;
}

.pk-suti-feloldva iframe {
  display: block;
  max-width: 100%;
  border: 0;
  border-radius: var(--pk-suti-kerekites);
}

.pk-suti-panel {
  max-width: 460px;
  text-align: center;
  color: var(--pk-suti-szoveg);
}

.pk-suti-panel__cim {
  margin-bottom: .5rem;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--pk-suti-cim);
}

.pk-suti-panel__szoveg {
  margin: 0 0 .75rem;
  font-size: .94rem;
  line-height: 1.55;
}

.pk-suti-panel__szoveg:last-of-type {
  margin-bottom: 1.25rem;
}

.pk-suti-panel__gombok {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  justify-content: center;
}

/* =====================================================================
   2. GOMBOK
   =====================================================================

   A HÁROM GOMB EGYFORMA MÉRETŰ, ÉS EZ NEM STÍLUSKÉRDÉS.
   Ha a visszautasítás kisebb, halványabb vagy nehezebben megtalálható, mint
   az elfogadás, akkor a hozzájárulás nem önkéntes — tehát érvénytelen
   (GDPR 7. cikk (4), és az EDPB 03/2022 iránymutatás a „sötét mintákról").
   Ezért a lábléc három egyenlő szélességű gombot kap, és az elutasítás
   kontrasztja sem gyengébb: sötét szöveg fehéren, vastag kerettel.
*/

.pk-suti-gomb,
.klaro .cm-btn,
.klaro .cn-ok .cm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .55rem 1rem;
  border: 2px solid transparent;
  border-radius: 8px;
  background: #fff;
  color: var(--pk-suti-cim);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.klaro .cm-btn:focus-visible,
.pk-suti-gomb:focus-visible {
  outline: 2px solid var(--pk-suti-marka-sotet);
  outline-offset: 2px;
}

/* a) ELUTASÍTÁS — azonos súly az elfogadással.
      (A helyőrző panel másodlagos gombja két osztállyal szerepel, mert a
      `.pk-suti-gomb` alapszabály LEJJEBB, az elfogadásnál kapja meg a
      márkaszínt — egy osztállyal ez a szabály veszítene, és a „Adatvédelmi
      beállítások" ugyanolyan kék lenne, mint a „Videó betöltése".) */
.klaro .cm-btn.cm-btn-decline,
.klaro .cm-btn.cn-decline,
.pk-suti-gomb.pk-suti-gomb--halvany {
  background: #fff;
  border-color: var(--pk-suti-cim);
  color: var(--pk-suti-cim);
}

.klaro .cm-btn.cm-btn-decline:hover,
.klaro .cm-btn.cm-btn-decline:focus,
.klaro .cm-btn.cn-decline:hover,
.klaro .cm-btn.cn-decline:focus,
.pk-suti-gomb.pk-suti-gomb--halvany:hover,
.pk-suti-gomb.pk-suti-gomb--halvany:focus {
  background: var(--pk-suti-halvany);
  border-color: var(--pk-suti-cim);
  color: var(--pk-suti-cim);
}

/* b) VÁLASZTÁSOM MENTÉSE — a középső, visszafogottabb út.
      Ez nem „elfogadás" és nem „elutasítás", hanem a részletes döntés
      megerősítése, ezért lehet halványabb: aki eddig eljutott, azt nem kell
      terelni. (Az osztálya egyszerre cm-btn-success és cm-btn-info, ezért
      kell a :not() — különben összekeveredne a „Mindent elfogadok"-kal.) */
.klaro .cm-btn.cm-btn-accept:not(.cm-btn-accept-all) {
  background: #fff;
  border-color: var(--pk-suti-keret-eros);
  color: var(--pk-suti-szoveg);
}

.klaro .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):hover,
.klaro .cm-btn.cm-btn-accept:not(.cm-btn-accept-all):focus {
  background: var(--pk-suti-halvany);
  border-color: var(--pk-suti-marka);
  color: var(--pk-suti-cim);
}

/* c) ELFOGADÁS — a párbeszéd „Mindent elfogadok" gombja és a sáv OK gombja. */
.klaro .cm-btn.cm-btn-accept-all,
.klaro .cm-btn.cm-btn-success:not(.cm-btn-accept):not(.cm-btn-accept-all),
.pk-suti-gomb {
  background: var(--pk-suti-marka);
  border-color: var(--pk-suti-marka);
  color: #fff;
}

.klaro .cm-btn.cm-btn-accept-all:hover,
.klaro .cm-btn.cm-btn-accept-all:focus,
.klaro .cm-btn.cm-btn-success:not(.cm-btn-accept):not(.cm-btn-accept-all):hover,
.pk-suti-gomb:hover,
.pk-suti-gomb:focus {
  background: var(--pk-suti-marka-sotet);
  border-color: var(--pk-suti-marka-sotet);
  color: #fff;
}

/* d) „Tudj meg többet" — ez link, nem gomb. */
.klaro .cn-learn-more,
.klaro .cm-btn.cm-btn-lern-more {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--pk-suti-marka-sotet);
  font-weight: 600;
  text-decoration: underline;
}

.klaro .cn-learn-more:hover,
.klaro .cm-btn.cm-btn-lern-more:hover {
  background: none;
  color: var(--pk-suti-cim);
}

/* =====================================================================
   3. A SÁV (cookie-notice)
   ===================================================================== */

.klaro .cookie-notice {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  left: auto;
  z-index: 2147483000;
  width: min(440px, calc(100vw - 2.5rem));
  padding: 1.5rem 1.6rem 1.35rem;
  border: 1px solid var(--pk-suti-keret);
  border-radius: var(--pk-suti-kerekites);
  background: #fff;
  box-shadow: var(--pk-suti-arnyek);
  color: var(--pk-suti-szoveg);
  font-size: .94rem;
  line-height: 1.6;
}

/* A FEKETE KERET AZ ELSŐ OLDALTÖLTÉSNÉL.
   A Klaro a sávot `tabIndex="0"` + `autoFocus` attribútummal rajzolja ki, és
   betöltéskor rá is fókuszál (`noticeRef.focus()`). A böngésző erre kirakja
   az alapértelmezett fókuszkeretet — ez az a vastag sötét vonal a doboz
   körül, ami senkinek nem mond semmit.
   Elvenni ettől a BURKOLÓ elemtől szabad: nem kattintható vezérlő, csak egy
   doboz. A benne lévő gombok és linkek saját, jól látható fókuszkeretet
   kapnak (lásd a 2. szakaszt), tehát billentyűzettel továbbra is követhető,
   hol jár a fókusz. */
.klaro .cookie-notice:focus,
.klaro .cookie-notice:focus-visible,
.klaro .cookie-modal:focus,
.klaro .cookie-modal:focus-visible,
.klaro .cm-modal:focus,
.klaro .cm-modal:focus-visible {
  outline: none;
}

.klaro .cookie-notice .cn-body {
  margin: 0;
  padding: 0;
}

.klaro .cookie-notice p {
  margin: 0 0 1rem;
}

.klaro .cookie-notice .cn-ok {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem .9rem;
  align-items: center;
  margin-top: 1.1rem;
}

.klaro .cookie-notice .cn-buttons {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  gap: .6rem;
}

.klaro .cookie-notice .cn-buttons .cm-btn {
  flex: 1 1 auto;
}

.klaro .cn-changes {
  padding: .6rem .8rem;
  border-left: 3px solid var(--pk-suti-akcent);
  border-radius: 0 6px 6px 0;
  background: var(--pk-suti-halvany);
}

/* =====================================================================
   4. A PÁRBESZÉD (cookie-modal)
   ===================================================================== */

.klaro .cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 2147483001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem 1rem;
}

.klaro .cookie-modal .cm-bg {
  position: fixed;
  inset: 0;
  background: rgba(37, 39, 44, .6);
}

/* A HÁROM SÁVOS ELRENDEZÉS: rögzített fejléc, GÖRGETHETŐ törzs, rögzített
   lábléc. Ha az egész doboz görögne, a gombok lecsúsznának a képernyő
   aljáról, és a látogató nem is tudná, hogy vannak. */
.klaro .cookie-modal .cm-modal {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(660px, 100%);
  max-height: min(86vh, 760px);
  overflow: hidden;
  border-radius: var(--pk-suti-kerekites);
  background: #fff;
  box-shadow: var(--pk-suti-arnyek);
  color: var(--pk-suti-szoveg);
  font-size: .95rem;
  line-height: 1.6;
}

.klaro .cm-header {
  flex: 0 0 auto;
  padding: 1.6rem 1.75rem 1.2rem;
  border-bottom: 1px solid var(--pk-suti-keret);
}

.klaro .cm-header .title,
.klaro .cm-header h1,
.klaro .cm-header h2 {
  margin: 0 2.75rem .6rem 0;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pk-suti-cim);
}

.klaro .cm-header p {
  margin: 0;
}

/* A BEZÁRÓ GOMB. Eredetileg egy stílus nélküli, alig észrevehető elem volt a
   sarokban — pedig ez az egyik legfontosabb kapaszkodó: aki most nem akar
   dönteni, annak látnia kell, hogyan léphet tovább. */
.klaro .cm-modal .hide {
  position: absolute;
  top: .9rem;
  right: .9rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--pk-suti-keret-eros);
  border-radius: 50%;
  background: #fff;
  color: var(--pk-suti-cim);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.klaro .cm-modal .hide:hover,
.klaro .cm-modal .hide:focus {
  background: var(--pk-suti-halvany);
  border-color: var(--pk-suti-marka);
  color: var(--pk-suti-cim);
}

.klaro .cm-modal .hide:focus-visible {
  outline: 2px solid var(--pk-suti-marka-sotet);
  outline-offset: 2px;
}

/* AZ „X" A BEZÁRÓ GOMBON.
   A Klaro két <line> elemet rajzol, stroke-width="1" attribútummal, de
   SZÍN NÉLKÜL:
     <svg width="12" height="12"><title>Bezárás</title>
       <line x1="1" y1="11" x2="11" y2="1" stroke-width="1"/>
       <line x1="1" y1="1"  x2="11" y2="11" stroke-width="1"/></svg>
   A színt a Klaro saját stíluslapja adná meg — mi viszont a „no-css"
   változatot használjuk, ezért az alapértelmezett `stroke: none` marad
   érvényben, és a gomb ÜRES KARIKÁNAK látszik. Itt `fill` nem segít: a
   vonalnak körvonala van, nem kitöltése. */
.klaro .cm-modal .hide svg {
  display: block;
  overflow: visible;
  fill: none;
}

.klaro .cm-modal .hide svg line {
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
}

.klaro .cm-body {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: .5rem 1.75rem 1.25rem;
  -webkit-overflow-scrolling: touch;
}

.klaro .cm-footer {
  position: relative;
  flex: 0 0 auto;
  padding: 1.1rem 1.75rem 1.35rem;
  border-top: 1px solid var(--pk-suti-keret);
  background: #fff;
}

/* HALVÁNYULÓ SÁV A LÁBLÉC FÖLÖTT.
   A törzs görgethető, de ez egy éles vágásnál nem látszik — a szöveg egyszerűen
   „elvágva" ér véget, és a látogató nem tudja, hogy lejjebb van még valami. */
.klaro .cm-footer::before {
  content: '';
  position: absolute;
  right: 0;
  bottom: 100%;
  left: 0;
  height: 28px;
  background: linear-gradient(to top, #fff, rgba(255, 255, 255, 0));
  pointer-events: none;
}

.klaro .cm-footer-buttons {
  display: flex;
  gap: .6rem;
  align-items: stretch;
}

/* MINDHÁROM GOMB PONTOSAN EGYFORMA SZÉLES. Lásd a 2. szakasz indoklását.
   A szűkebb vízszintes belső margó nem szépészeti döntés: az oldal betűje a
   Poppins, ami szélesebb a rendszerbetűnél, és 1rem paddinggel a „Csak a
   szükségeseket" két sorba tört. Az egyforma szélesség viszont nem
   alkudható, ezért inkább a padding enged. */
.klaro .cm-footer-buttons .cm-btn {
  flex: 1 1 0;
  min-width: 0;
  padding-left: .5rem;
  padding-right: .5rem;
  font-size: .9rem;
}

.klaro .cm-powered-by {
  display: none;
}

/* =====================================================================
   5. A CÉLOK ÉS SZOLGÁLTATÁSOK LISTÁJA
   ===================================================================== */

.klaro .cm-purposes,
.klaro ul.cm-services,
.klaro .cm-content {
  margin: 0;
  padding: 0;
  list-style: none;
}

.klaro .cm-purpose,
.klaro ul.cm-purposes > li.cm-service {
  padding: 1.05rem 0;
  border-bottom: 1px solid var(--pk-suti-keret);
}

.klaro .cm-purposes > li:last-child {
  border-bottom: 0;
  padding-bottom: .25rem;
}

/* A SZOLGÁLTATÁS-LISTA ALAPBÓL ÖSSZECSUKVA.
   A Klaro saját CSS-e csinálná, de mi a no-css változatot használjuk. Enélkül
   az összes szolgáltatás kinyitva látszik, a „↓ 2 szolgáltatás" lenyitó pedig
   nem csinál semmit — ez volt a korábbi változat néma hibája. */
.klaro .cm-content {
  display: none;
}

.klaro .cm-content.expanded {
  display: block;
  margin-top: .75rem;
  padding-left: 1rem;
  border-left: 3px solid var(--pk-suti-keret);
}

.klaro .cm-content.expanded > .cm-service {
  padding: .65rem 0;
}

.klaro .cm-content.expanded > .cm-service:first-child {
  padding-top: 0;
}

.klaro .cm-content.expanded > .cm-service:last-child {
  padding-bottom: 0;
}

/* A FELIRAT ÉS A KAPCSOLÓ EGY SORBAN.
   Korábban a cím és a „mindig aktív" címke egymásba futott, mert semmi nem
   választotta el őket. */
.klaro .cm-list-label {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  cursor: pointer;
}

.klaro .cm-list-input.required + .cm-list-label,
.klaro .cm-list-input:disabled + .cm-list-label {
  cursor: default;
}

.klaro .cm-list-title {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--pk-suti-cim);
}

.klaro .cm-content.expanded .cm-list-title {
  font-size: .95rem;
}

.klaro .cm-list-description {
  margin: .35rem 0 0;
  padding-right: 4rem;
  font-size: .9rem;
  line-height: 1.55;
  color: var(--pk-suti-szoveg);
}

/* A „Cél: Beágyazott tartalom" sor a szolgáltatás alatt. */
.klaro p.purposes {
  margin: .3rem 0 0;
  padding-right: 4rem;
  font-size: .82rem;
  color: var(--pk-suti-halvany-szoveg);
}

.klaro .cm-required,
.klaro .cm-opt-out {
  flex: 0 0 auto;
  padding: .14rem .55rem;
  border-radius: 999px;
  background: var(--pk-suti-halvany);
  color: var(--pk-suti-halvany-szoveg);
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
}

/* A rendszer-jelölőnégyzetet elrejtjük, de a BILLENTYŰZETNEK megmarad: csak
   vizuálisan tűnik el, a fókuszt és a kapcsolást továbbra is kezeli. */
.klaro .cm-list-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.klaro .cm-switch {
  position: relative;
  flex: 0 0 auto;
  display: inline-block;
  width: 46px;
  height: 26px;
}

.klaro .cm-switch .slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--pk-suti-kapcsolo-ki);
  transition: background-color .18s ease;
}

.klaro .cm-switch .slider::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(37, 39, 44, .3);
  transition: transform .18s ease;
}

.klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider {
  background: var(--pk-suti-marka);
}

.klaro .cm-list-input:checked + .cm-list-label .cm-switch .slider::before {
  transform: translateX(20px);
}

/* RÉSZBEN bekapcsolt cél: a szolgáltatásai közül csak némelyik van bekapcsolva.
   A Klaro ilyenkor félúton álló kapcsolót rajzol — ezt meg kell tartani, mert
   különben a cél „bekapcsoltnak" látszana, holott nem az. */
.klaro .cm-list-input.half-checked:checked + .cm-list-label .cm-switch .slider {
  background: var(--pk-suti-marka);
  opacity: .55;
}

.klaro .cm-list-input.half-checked:checked + .cm-list-label .cm-switch .slider::before {
  transform: translateX(10px);
}

.klaro .cm-list-input:focus-visible + .cm-list-label .cm-switch .slider,
.klaro .cm-list-label:focus-visible .cm-switch .slider {
  outline: 2px solid var(--pk-suti-marka-sotet);
  outline-offset: 2px;
}

/* A KÖTELEZŐ KAPCSOLÓ.
   Bekapcsolt állapotban van, de nem kapcsolható — ezért ugyanaz a márkaszín,
   csak tompítva. Szándékosan NEM zöld és nem szürke: a zöld jutalomnak
   látszana, a szürke pedig kikapcsoltnak. A jelentést a mellette lévő
   „mindig aktív" címke hordozza. */
.klaro .cm-list-input.required + .cm-list-label .cm-switch .slider,
.klaro .cm-list-input:disabled + .cm-list-label .cm-switch .slider {
  background: var(--pk-suti-marka);
  opacity: .45;
  cursor: not-allowed;
}

.klaro .cm-list-input.required + .cm-list-label .cm-switch .slider::before,
.klaro .cm-list-input:disabled + .cm-list-label .cm-switch .slider::before {
  transform: translateX(20px);
}

/* A LENYITÓ. A .cm-caret a linket tartalmazó DOBOZ, nem maga a link. */
.klaro .cm-caret {
  margin-top: .5rem;
}

.klaro .cm-caret a,
.klaro .cm-link {
  display: inline-block;
  padding: .15rem 0;
  color: var(--pk-suti-marka-sotet);
  font-size: .88rem;
  font-weight: 600;
  text-decoration: none;
}

.klaro .cm-caret a:hover,
.klaro .cm-link:hover {
  color: var(--pk-suti-cim);
  text-decoration: underline;
}

.klaro .cm-caret a span {
  display: inline-block;
  min-width: 1em;
}

/* Az „összes kapcsolása" sor — ha a beállítás bekapcsolja. */
.klaro .cm-toggle-all {
  margin-top: .25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pk-suti-keret);
  border-bottom: 0;
}

.klaro a {
  color: var(--pk-suti-marka-sotet);
}

/* =====================================================================
   6. TELEFON
   ===================================================================== */

@media (max-width: 640px) {
  .klaro .cookie-notice {
    right: .6rem;
    bottom: .6rem;
    left: .6rem;
    width: auto;
    padding: 1.25rem 1.25rem 1.1rem;
  }

  /* A „Beállítások" link a gombok FÖLÉ kerül, külön sorba. Ha egy sorban
     marad velük, a keskeny kijelzőn középre szorul a két egymás alá tört
     gomb mellé — ez volt az első változat renderében. */
  .klaro .cookie-notice .cn-ok {
    flex-direction: column;
    align-items: flex-start;
    gap: .75rem;
  }

  .klaro .cookie-notice .cn-buttons {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .klaro .cookie-modal {
    padding: 0;
  }

  .klaro .cookie-modal .cm-modal {
    width: 100%;
    height: 100%;
    max-height: 100vh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .klaro .cm-header,
  .klaro .cm-body,
  .klaro .cm-footer {
    padding-left: 1.1rem;
    padding-right: 1.1rem;
  }

  /* A DOM-sorrend marad: elutasítás, mentés, elfogadás. Nem fordítjuk meg —
     az elfogadás fölülre emelése ugyanaz a terelés, amit a 2. szakasz kizár. */
  .klaro .cm-footer-buttons {
    flex-direction: column;
  }

  .klaro .cm-list-description,
  .klaro p.purposes {
    padding-right: 0;
  }

  .pk-suti-panel__gombok {
    flex-direction: column;
  }
}