/* ==========================================================================
   Európai uniós támogatás – infoblokk-badge-ek (csak a kezdőoldalon)
   lásd inc/kiss-eu-funding.php
   ========================================================================== */
:root {
  --kiss-eu-badge-width: 200px;
  /* Alap távolság a képernyő aljától görgetés közben. */
  --kiss-eu-badge-bottom: 4px;
  /* Ennyire nő a távolság, amikor a lap LEGALJÁRA görgetnek (eu-badges.js
     adja hozzá az "is-at-page-bottom" osztályt) – ennyivel áll meg a lábléc
     copyright-sora ("© ... Derecske, Hajdú-Bihar megye") FELETT. */
  --kiss-eu-badge-bottom-at-end: 56px;
  /* A cookie-notice.js frissíti, amíg a süti-sáv látszik, hogy a badge-ek
     ne csússzanak alá. Alapból 0, ha a süti-sáv ki van kapcsolva. */
  --kiss-cookie-notice-height: 0px;
}
.kiss-eu-badges {
  /* position: sticky NEM működik itt, mert a html/body-n van
     overflow-x: hidden (lásd storefront-overrides.css – a főoldali
     full-bleed sávok vízszintes túlcsordulását fogja el), ami minden
     leszármazott sticky-t megtör. Ezért fixed + egyetlen kapcsoló-osztály
     (is-at-page-bottom) a lap legalján – nincs folytonos, görgetésre
     képpontonként újraszámolt érték, hogy ne "ugráljon". */
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--kiss-cookie-notice-height, 0px) + var(--kiss-eu-badge-bottom));
  z-index: 9997;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 0 4px;
  pointer-events: none;
  transition: bottom .2s ease;
}
.kiss-eu-badges.is-at-page-bottom {
  bottom: calc(var(--kiss-cookie-notice-height, 0px) + var(--kiss-eu-badge-bottom-at-end));
}
.kiss-eu-badge {
  display: inline-block;
  pointer-events: auto;
  transition: transform .15s ease;
}
.kiss-eu-badge:hover {
  transform: translateY(-3px);
}
.kiss-eu-badge img {
  display: block;
  width: var(--kiss-eu-badge-width);
  height: auto;
  filter: drop-shadow(0 2px 6px rgba(35, 42, 47, .2));
}
@media (max-width: 560px) {
  :root {
    --kiss-eu-badge-width: 148px;
  }
}
