body {
    /* Убедитесь, что этот отступ достаточен для вашего контента */
    /* Он предотвращает перекрытие контента страницы футером */
    /* Высота футера около 65-70px + небольшой запас */
    padding-bottom: 65px; 
}

.custom-footer {
    position: fixed;
    bottom: 16px; /* Поднял на 2 пикселя */
    left: 50%;
    transform: translateX(-50%);
    width: auto; 
    min-width: 300px; /* Минимальная ширина для маленьких экранов */
    max-width: 95%;   /* Максимальная ширина, чтобы не прилегать к краям на больших экранах */
    background-color: #F9F2FD; /* Новый цвет фона - 249, 242, 253 */
    border-radius: 25px; /* Закругленные края для формы "пилюли" */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.15); /* Тень для выделения */
    display: flex;
    justify-content: center;
    gap: 16px; /* Одинаковый зазор между иконками */
    align-items: center;
    padding: 10px 15px; /* Внутренние отступы (вертикальные и горизонтальные) */
    z-index: 1000; /* Поверх других элементов */
    overflow: hidden; /* Обрезаем свечение по границам футера */
}


/* Анимация нажатия для всех footer-item */
.footer-item:active {
    transform: scale(0.9);
    transition: transform 0.1s ease-in;
}

/* Альтернативная анимация через CSS класс (для программного управления) */
.footer-press {
    transform: scale(0.9);
    transition: transform 0.1s ease-in;
}

.footer-item img {
    width: 30px;
    height: 30px;
    max-width: none;    /* Убираем ограничения */
    max-height: none;   /* Убираем ограничения */
    display: block;     /* Убираем возможные проблемы с выравниванием */
    filter: grayscale(70%) brightness(0.85) sepia(20%) hue-rotate(240deg) saturate(50%);
    opacity: 0.7; /* Повышаю прозрачность до 0.7 */
    transition: filter 0.2s ease, opacity 0.2s ease; /* Плавный переход цвета и прозрачности */
}

/* Активные иконки оригинального цвета */
.footer-item.current-page img {
    filter: none; /* Убираем все фильтры - оригинальный цвет */
    opacity: 1; /* Полная непрозрачность */
}



/* Делаем footer-item относительным для позиционирования плашки */
.footer-item {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    position: relative; /* Добавляем для позиционирования плашки */
    flex: 0 0 auto;
    padding: 8px 4px; /* Уменьшаем боковые отступы */
    
    /* Добавляем плавный переход для анимации */
    transition: transform 0.15s ease-out;
    cursor: pointer;
    
    /* Убираем квадратный highlight при тапе на мобильных */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    outline: none;
}




/* Стили для темной темы */
html.dark-theme .custom-footer,
body.dark-theme .custom-footer {
    background-color: #352765; /* Новый цвет для темной темы: 35 27 65 */
    box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.25);
}

/* В темной теме активные иконки тоже оригинального цвета */
html.dark-theme .footer-item.current-page img,
body.dark-theme .footer-item.current-page img {
    filter: none; /* Убираем все фильтры - оригинальный цвет */
    opacity: 1; /* Полная непрозрачность */
}



.custom-footer.footer-hidden-by-keyboard {
    display: none !important; /* Используем !important на всякий случай, чтобы переопределить другие стили display */
}

/* Масштабирование футера на длинных экранах */
@media (min-width: 430px) and (max-width: 500px) {
    .custom-footer {
        transform: translateX(-50%) scale(1.13) !important;
    }
}

@media (min-width: 500px) and (max-width: 600px) {
    .custom-footer {
        transform: translateX(-50%) scale(1.2) !important;
    }
}

@media (min-width: 600px) {
    .custom-footer {
        transform: translateX(-50%) scale(1.3) !important;
    }
}

/* ИСПРАВЛЕНИЕ: Адаптивный padding-bottom для длинных экранов */
@media (min-width: 430px) and (max-width: 500px) {
    body {
        padding-bottom: calc(180px * 1.13) !important; /* Увеличиваем пропорционально масштабу footer */
    }
}

@media (min-width: 500px) and (max-width: 600px) {
    body {
        padding-bottom: calc(180px * 1.2) !important; /* Увеличиваем пропорционально масштабу footer */
    }
}

@media (min-width: 600px) {
    body {
        padding-bottom: calc(180px * 1.3) !important; /* Увеличиваем пропорционально масштабу footer */
    }
}