/* ======================================================================
   BIAŁE LOGOTYPY MAREK W STOPCE + SUBTELNY HOVER
   Plik ładowany po głównych arkuszach, więc nie zmienia innych elementów.
   ====================================================================== */

.footer-brands ul,
.footer-brands #ikon,
.footer-brands #dnav {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px;
}

.footer-brands li {
  display: flex;
  align-items: center;
  justify-content: center;
  float: none !important;
}

.footer-brands a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  line-height: 0;
  text-decoration: none !important;
  transform: translateY(0) scale(1);
  transition:
    transform 220ms cubic-bezier(.2,.7,.25,1),
    opacity 220ms ease;
}

.footer-brands img {
  display: block;
  width: auto;
  max-width: 190px;
  max-height: 52px;
  border: 0;
  opacity: .88;

  /* Każdy kolor SVG/PNG zostaje zamieniony na czystą biel. */
  filter: brightness(0) invert(1);

  transform: translateZ(0);
  transform-origin: center center;
  transition:
    opacity 220ms ease,
    filter 220ms ease;
}

.footer-brands a:hover,
.footer-brands a:focus-visible {
  transform: translateY(-4px) scale(1.06);
}

.footer-brands a:hover img,
.footer-brands a:focus-visible img {
  opacity: 1;
  filter:
    brightness(0)
    invert(1)
    drop-shadow(0 7px 10px rgba(0, 38, 62, .28));
}

.footer-brands a:focus-visible {
  outline: 1px solid rgba(255,255,255,.85);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (max-width: 640px) {
  .footer-brands ul,
  .footer-brands #ikon,
  .footer-brands #dnav {
    justify-content: center;
    gap: 12px 16px;
  }

  .footer-brands img {
    max-width: 145px;
    max-height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .footer-brands a,
  .footer-brands img {
    transition: none;
  }

  .footer-brands a:hover,
  .footer-brands a:focus-visible {
    transform: none;
  }
}