#footer {
  padding: 0.1rem 1.5rem; 
  background: #00183a;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 -2px 10px rgba(0,0,0,0.05);
  font-size: 0.8rem; color: #ffffff; display: flex; justify-content: space-between; align-items: center;
}

#footer:empty {
  display: none;
}

.footer-group {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.footer-group-right {
  justify-content: flex-end;
}

.footer-text,
.footer-status,
.footer-link,
.footer-button {
  font: inherit;
}

.footer-status {
  color: #10b981;
  font-weight: 600;
}

.footer-link {
  color: var(--text-menu-muted);
  text-decoration: none;
}

.footer-link:hover {
  color: var(--accent);
}

.footer-button {
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(0, 0, 0, 0.1);
  color: #2d3436;
  cursor: pointer;
  padding: 0.3rem 0.75rem;
  transition: all 0.3s ease;
}

.footer-button:hover {
  background: #ffffff;
  color: var(--accent);
}

/* ===========================
   MEDIA QUERIES DLA MOBILE
=========================== */
@media (max-width: 600px) {
  #footer {
    flex-direction: column; /* Układanie elementów stopki pionowo */
    gap: 0.3rem; /* Zmniejszony odstęp między grupami */
    padding: 0.3rem 0.5rem; /* Zmniejszony padding dla całej stopki */
    text-align: center; /* Wyśrodkowanie tekstu w stopce */
  }
  .footer-group {
    flex-direction: row; /* Elementy w grupie próbują ułożyć się w rzędzie */
    flex-wrap: wrap; /* Pozwala elementom zawijać się do następnej linii */
    justify-content: center; /* Wyśrodkowanie elementów w grupie */
    gap: 0.3rem; /* Zmniejszony odstęp między elementami w grupie */
  }
  .footer-text,
  .footer-status,
  .footer-link {
    font-size: 0.75rem; /* Zmniejszona czcionka dla tekstu */
  }
  .footer-button {
    padding: 0.2rem 0.5rem; /* Mniejszy padding dla przycisku */
    font-size: 0.75rem; /* Zmniejszona czcionka dla przycisku */
  }
}