.brand-tagline-mobile {
    font-size: 13px;
}

/* ==========================================================================
   FOOTER SOCIAL ICONS — BRAND COLORS
   Подключать ПОСЛЕ основного style.css
   ========================================================================== */


/* =========================================================
   BASE
   По умолчанию все иконки белые
   ========================================================= */

.footer-top-section .footer-social-icon,
.footer-top-section .footer-social-fa {
    color: #fff !important;

    transition:
        color .22s ease,
        background-color .22s ease,
        transform .22s ease;
}


/*
 * SVG-иконки Telegram / YouTube / RuTube / VK
 * используются как mask.
 * Цвет маски берётся из currentColor.
 */
.footer-top-section .footer-social-icon {
    background-color: currentColor !important;
}


/* =========================================================
   DESKTOP HOVER
   ========================================================= */

@media (hover: hover) and (pointer: fine) {

    /* -----------------------------------------
       Telegram
       ----------------------------------------- */

    .footer-top-section .footer-social-item:hover .footer-social-icon--telegram {
        color: #229ED9 !important;
        background-color: #229ED9 !important;
        transform: scale(1.08);
    }


    /* -----------------------------------------
       WhatsApp
       ----------------------------------------- */

    .footer-top-section .footer-social-item:hover .footer-social-fa--whatsapp {
        color: #25D366 !important;
        transform: scale(1.08);
    }


    /* -----------------------------------------
       Phone
       ----------------------------------------- */

    .footer-top-section .footer-social-item:hover .footer-social-fa--phone {
        color: #2ECC63 !important;
        transform: scale(1.08);
    }


    /* -----------------------------------------
       YouTube
       ----------------------------------------- */

    .footer-top-section .footer-social-item:hover .footer-social-icon--youtube {
        color: #FF0000 !important;
        background-color: #FF0000 !important;
        transform: scale(1.08);
    }


    /* -----------------------------------------
       RuTube
       ----------------------------------------- */

    .footer-top-section .footer-social-item:hover .footer-social-icon--rutube {
        color: #FF0045 !important;
        background-color: #FF0045 !important;
        transform: scale(1.08);
    }


    /* -----------------------------------------
       VK / VK Video
       ----------------------------------------- */

    .footer-top-section .footer-social-item:hover .footer-social-icon--vk {
        color: #0077FF !important;
        background-color: #0077FF !important;
        transform: scale(1.08);
    }

}


/* =========================================================
   KEYBOARD / ACCESSIBILITY
   Те же цвета при навигации клавиатурой
   ========================================================= */


/* Telegram */

.footer-top-section .footer-social-item:focus-visible .footer-social-icon--telegram {
    color: #229ED9 !important;
    background-color: #229ED9 !important;
}


/* WhatsApp */

.footer-top-section .footer-social-item:focus-visible .footer-social-fa--whatsapp {
    color: #25D366 !important;
}


/* Phone */

.footer-top-section .footer-social-item:focus-visible .footer-social-fa--phone {
    color: #2ECC63 !important;
}


/* YouTube */

.footer-top-section .footer-social-item:focus-visible .footer-social-icon--youtube {
    color: #FF0000 !important;
    background-color: #FF0000 !important;
}


/* RuTube */

.footer-top-section .footer-social-item:focus-visible .footer-social-icon--rutube {
    color: #FF0045 !important;
    background-color: #FF0045 !important;
}


/* VK */

.footer-top-section .footer-social-item:focus-visible .footer-social-icon--vk {
    color: #0077FF !important;
    background-color: #0077FF !important;
}


/* =========================================================
   TOUCH DEVICES
   Не даём hover "залипать" после тапа на телефоне
   ========================================================= */

@media (hover: none),
(pointer: coarse) {

    .footer-top-section .footer-social-item .footer-social-icon,
    .footer-top-section .footer-social-item .footer-social-fa,
    .footer-top-section .footer-social-item:hover .footer-social-icon,
    .footer-top-section .footer-social-item:hover .footer-social-fa {
        color: #fff !important;
        transform: none;
    }


    .footer-top-section .footer-social-item .footer-social-icon,
    .footer-top-section .footer-social-item:hover .footer-social-icon {
        background-color: currentColor !important;
    }


    /* Короткий отклик непосредственно при нажатии */

    .footer-top-section .footer-social-item:active .footer-social-icon--telegram {
        color: #229ED9 !important;
    }

    .footer-top-section .footer-social-item:active .footer-social-fa--whatsapp {
        color: #25D366 !important;
    }

    .footer-top-section .footer-social-item:active .footer-social-fa--phone {
        color: #2ECC63 !important;
    }

    .footer-top-section .footer-social-item:active .footer-social-icon--youtube {
        color: #FF0000 !important;
    }

    .footer-top-section .footer-social-item:active .footer-social-icon--rutube {
        color: #FF0045 !important;
    }

    .footer-top-section .footer-social-item:active .footer-social-icon--vk {
        color: #0077FF !important;
    }

}