/* Основной контейнер навбара */
.header {
    max-width: 900px; /* Фиксированная ширина */
    width: 100%; /* Адаптивность для мобильных */
    margin: 0 auto; /* Центрирование */
    display: flex;
    justify-content: space-between; /* Разделение на 3 зоны */
    align-items: center; /* Вертикальное центрирование */
    background-color: rgba(0, 0, 0, 0.6);
    padding: 0 10px; /* Отступы по краям */
    box-sizing: border-box;
    box-shadow: 0 0 16px 5px rgba(0, 0, 0, 0.6); /*!Нужна проверка! Светлый фон */
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}

/* Левый блок - профиль пользователя */
.user-profile-navbar {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: white;
    padding: 8px 12px;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.user-profile-navbar .username {
    max-width: 60px; /* Ограничение для обрезки */
    white-space: nowrap;
    overflow: hidden;
}

.user-profile-navbar img.user-round-photo {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-left: 8px;
    object-fit: cover;
}

/* Центральные кнопки */
.center-buttons {
    display: flex;
    gap: 20px; /* Равные отступы между кнопками */
}

.center-buttons a {
    display: flex;
    align-items: center;
    padding: 5px;
    text-decoration: none;
    color: #333;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.center-buttons img {
    width: 16px;
    height: 16px;
}

/* Правый блок - Выйти/Войти */
.auth-link {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    text-decoration: none;
    color: white;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.auth-link img {
    width: 16px;
    height: 16px;
    margin-right: 6px;
}

/* Анимация наведения */
.user-profile-navbar:hover,
.center-buttons a:hover {
    background-color: #e0e0e0; /* Плавное затемнение */
    animation: pulse 1s infinite; /* Пульсация */
}

/* Анимация нажатия */
.clicked {
    background-color: #fff9c4; /* Светло-желтый при клике */
    transition: background-color 0.1s ease;
}

/* Ключевая анимация пульсации */
@keyframes pulse {
    0% {
        transform: scale(1);
        background-color: rgba(225, 75, 75, 0.73); /* Плавное затемнение */
        border-radius: 13px;
        color: rgba(255, 0, 0, 0.84); /* Яркий красный для финальной пульсации */
        border-color: rgba(255, 0, 0, 0.84);
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.84); /* Максимальная тень */

    }
    50% {
        transform: scale(1.05);
        background-color: rgba(225, 75, 75, 0.39); /* Плавное затемнение */
        border-radius: 9px;
                color: rgba(255, 0, 0, 0.84); /* Яркий красный для финальной пульсации */
        border-color: rgba(255, 0, 0, 0.84);
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.84); /* Максимальная тень */

    }
    100% {
        transform: scale(1);
        background-color: rgba(225, 75, 75, 0.83); /* Плавное затемнение */
        border-radius: 18px;
                color: rgba(255, 0, 0, 0.84); /* Яркий красный для финальной пульсации */
        border-color: rgba(255, 0, 0, 0.84);
        box-shadow: 0 0 15px rgba(255, 0, 0, 0.84); /* Максимальная тень */


    }
}