/**
 * FOOTER FIX - Исправление "прыгающих" кнопок при hover + Тёмная тема
 * Дата: 03.11.2025
 * Цель: Убрать Layout Shift при наведении на ссылки в футере + тёмный дизайн
 * Влияние: ТОЛЬКО футер, остальной сайт не затронут
 */

/* ============================================
   ТЁМНЫЙ ФОН ФУТЕРА (УСИЛЕННЫЕ ПРАВИЛА)
   ============================================ */

footer,
footer.footer,
.footer,
body footer,
body .footer {
    background: #1a1a1a !important; /* Тёмный фон */
    background-color: #1a1a1a !important;
    color: #b0b0b0 !important; /* Светло-серый текст по умолчанию */
}

.footer__inner {
    color: #b0b0b0 !important;
    border-bottom-color: #3a3a3a !important; /* Тёмная граница */
}

/* ============================================
   ЗАГОЛОВКИ ФУТЕРА
   ============================================ */

.footer__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    color: #e0e0e0 !important; /* Светло-серые заголовки */
    letter-spacing: -0.01em;
}

/* Цвета для разных секций (более светлые для тёмного фона) */
.company__color {
    color: #c6ff4d !important; /* Оставляем оригинальный цвет */
}

.home__color {
    background-color: #ff4cc7 !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
}

.business__color {
    background-color: #315efb !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
}

/* ============================================
   ОСНОВНЫЕ ССЫЛКИ В ФУТЕРЕ
   ============================================ */

.footer__list-item,
.footer__list-item a {
    color: #b0b0b0 !important; /* Светло-серый текст */
}

.footer__list-item a {
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s ease;
    /* НЕ меняем font-weight, НЕ добавляем border, НЕ меняем padding */
}

.footer__list-item a:hover,
.footer__list-item:hover,
.footer__list-item:hover a {
    color: #ffffff !important; /* Белый при hover */
    text-decoration: none;
}

/* Подчёркивание через псевдоэлемент (не влияет на layout) */
.footer__list-item a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #ffffff;
    transition: width 0.3s ease;
}

.footer__list-item a:hover::after {
    width: 100%;
}

/* ============================================
   АККОРДЕОН (МОБИЛЬНАЯ ВЕРСИЯ)
   ============================================ */

.footer__accordion {
    color: #b0b0b0 !important;
    border-bottom-color: #3a3a3a !important;
}

.accordion__list .footer__list-item,
.accordion__list .footer__list-item a {
    color: #b0b0b0 !important;
}

.accordion__list .footer__list-item a {
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    text-decoration: none;
    transition: color 0.2s ease;
}

.accordion__list .footer__list-item a:hover,
.accordion__list .footer__list-item:hover a {
    color: #ffffff !important;
    text-decoration: none;
}

.accordion__list .footer__list-item a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #ffffff;
    transition: width 0.3s ease;
}

.accordion__list .footer__list-item a:hover::after {
    width: 100%;
}

/* Заголовки аккордеона */
.acc__title {
    color: #e0e0e0 !important;
}

/* ============================================
   СОЦИАЛЬНЫЕ КНОПКИ
   ============================================ */

.footer-link__social-item {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
    background-color: #343b4c !important; /* Оставляем оригинальный цвет */
    /* НЕ меняем размер, НЕ меняем padding */
}

.footer-link__social-item:hover {
    transform: translateY(-3px);
    opacity: 0.85;
}

/* Иконки соц. сетей - инверсия для тёмного фона */
.footer-link__social-item__img img {
    filter: brightness(0) invert(1);
    opacity: 0.7;
    transition: opacity 0.2s ease;
}

.footer-link__social-item:hover .footer-link__social-item__img img {
    opacity: 1;
}

/* ============================================
   КНОПКИ APP STORE / PLAY MARKET
   ============================================ */

.btn__link {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn__link:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}

.btn__link img {
    filter: brightness(0) invert(1);
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.btn__link:hover img {
    opacity: 1;
}

/* ============================================
   SPEEDTEST КНОПКА
   ============================================ */

.footer-link__speedTest {
    display: inline-block;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.footer-link__speedTest:hover {
    transform: scale(1.05);
    opacity: 0.9;
}

.speedTest {
    fill: #b0b0b0 !important;
    transition: fill 0.2s ease;
}

.footer-link__speedTest:hover .speedTest {
    fill: #ffffff !important;
}

/* ============================================
   НИЖНЯЯ ЧАСТЬ ФУТЕРА (footer-link)
   ============================================ */

.footer-link {
    color: #b0b0b0 !important;
}

/* ============================================
   АДАПТИВНОСТЬ ДЛЯ МОБИЛЬНЫХ
   ============================================ */

@media (max-width: 768px) {
    .footer__list-item a {
        font-size: 15px; /* Немного больше для мобильных */
        padding: 8px 0; /* Больше площадь для клика */
        display: block; /* На всю ширину для удобного клика */
    }
    
    .accordion__list .footer__list-item a {
        font-size: 15px;
        padding: 8px 0;
        display: block;
    }
}

/* ============================================
   ACCESSIBILITY (ДОСТУПНОСТЬ)
   ============================================ */

/* Фокус для клавиатурной навигации */
.footer__list-item a:focus,
.accordion__list .footer__list-item a:focus {
    outline: 2px solid #ffffff;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Убираем outline при клике мышью (только для клавиатуры) */
.footer__list-item a:focus:not(:focus-visible),
.accordion__list .footer__list-item a:focus:not(:focus-visible) {
    outline: none;
}