/* ----------top menu----------------- */

.user-menu {
    display: flex;
    justify-content: flex-end;    /* flex-end - wyrównanie do prawej, po lewej: flex-start */
    align-items: center;
    gap: 4px;                    /* równy, ładny odstęp zamiast   i • */
    font-size: small;             /* lub 0.875rem / 14px */
    padding: 8px 0;               /* trochę oddechu góra/dół */
}

.user-menu a {
    color: #007bff;               /* dostosuj do koloru swojej strony */
    text-decoration: none;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.user-menu a:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #0056b3;
    text-decoration: underline;
}

/* Wyróżnienie adresu e-mail użytkownika */
.user-email {
    font-weight: 600;
    color: #333;
}

/* Separator • */
.separator {
    color: #999;
    font-size: 0.9em;             /* trochę mniejszy niż tekst */
    user-select: none;            /* nie zaznacza się przy kopiowaniu */
}

/* ---------footer menu----------------- */

.footer-menu {
    display: flex;
    flex-wrap: wrap;              /* na bardzo małych ekranach przejdzie do pionu */
    align-items: center;
    gap: 16px;                    /* większy odstęp niż w menu użytkownika – to główne menu */
    font-size: 15px;              /* trochę większy tekst niż w user-menu */
    margin: 1px 0;               /* odstęp od reszty treści */
    padding: 10px 0;
    border-bottom: 1px solid #eee; /* i pod menu – dla wyodrębnienia */
}

.footer-menu a {
    color: #007bff;
    text-decoration: none;
    padding: 6px 10px;
    border-radius: 6px;
    transition: all 0.2s ease;
}

.footer-menu a:hover {
    background-color: rgba(0, 123, 255, 0.1);
    color: #0056b3;
    text-decoration: underline;
}

.footer-menu a strong {
    font-weight: 600;
    color: #333;                  /* wyróżnienie pogrubionych części */
}

.footer-menu .separator {
    color: #bbb;
    font-size: 1.3em;
    user-select: none;
}