/* SN-CONTACTS-SOCIAL-UNIFIED-20261021-V5
   Scoped exclusively to contacts social cards.
   No changes to footer icons, feedback block or reports.
*/

/* Five aligned cards; responsive without fixed dimensions */

.contacts-social .contacts-social__list {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
    gap: 16px !important;
}

/* Neutral cards instead of conflicting global brand backgrounds */

.contacts-social .contacts-social__list a.contacts-social__item,
.contacts-social .contacts-social__list a.contacts-social__item.sn-max-added {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    min-height: 96px !important;
    width: auto !important;
    min-width: 0 !important;
    height: auto !important;
    padding: 17px 12px !important;
    border: 1px solid #DFE3E8 !important;
    border-radius: 18px !important;
    background: #FFFFFF !important;
    color: #29292B !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

.contacts-social .contacts-social__list a.contacts-social__item:hover,
.contacts-social .contacts-social__list a.contacts-social__item:focus-visible {
    background: #F8FAFC !important;
    border-color: #AFC5D9 !important;
    color: #29292B !important;
}

.contacts-social .contacts-social__list
a.contacts-social__item .contacts-social__name {
    display: inline !important;
    color: #29292B !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

/* Remove only OLD graphical nodes inside contacts social cards.
   Links, names, other blocks and the original HTML remain intact. */

.contacts-social .contacts-social__list
a.contacts-social__item > svg,
.contacts-social .contacts-social__list
a.contacts-social__item > img,
.contacts-social .contacts-social__list
a.contacts-social__item > .icon {
    display: none !important;
}

/* Independent icons for all five networks, including JS-added MAX */

.contacts-social .contacts-social__list
a.contacts-social__item::before {
    content: "" !important;
    display: block !important;
    position: static !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
    pointer-events: none !important;
}

/* Telegram */

.contacts-social__list a.contacts-social__item--telegram::before {
    background-image: url("/local/templates/vpl_template/img/social/tg-default.svg?v=contacts-20261021-v2") !important;
    background-color: #28A8E9 !important;
    border-radius: 10px;
}

/* VK */

.contacts-social__list a.contacts-social__item--vk::before {
    background-image: url("/local/templates/vpl_template/img/social/vk-default.svg?v=contacts-20261021-v2") !important;
    background-color: #0077FF !important;
    border-radius: 10px;
}

/* YouTube */

.contacts-social__list a.contacts-social__item--youtube::before {
    background-image: url("/local/templates/vpl_template/img/social/youtube-contacts-default.svg?v=contacts-20261021-v4") !important;
    background-color: #FF0000 !important;
    border-radius: 10px !important;
}

/* Dzen: white artwork on black icon background */

.contacts-social__list a.contacts-social__item--dzen::before {
    background-image: url("/local/templates/vpl_template/img/social/dzen-contacts-default.svg?v=contacts-20261021-v4") !important;
    background-color: #202022 !important;
    border-radius: 10px !important;
}

/* MAX */

.contacts-social__list a.contacts-social__item--max::before {
    background-image: url("/local/templates/vpl_template/img/social/max-default.svg?v=contacts-20261021-v2") !important;
    background-color: #5639C9 !important;
    border-radius: 10px;
}

/* Uploaded hover artwork */

@media (hover: hover) {
    .contacts-social__list a.contacts-social__item--telegram:hover::before {
        background-image: url("/local/templates/vpl_template/img/social/tg-hover.svg?v=contacts-20261021-v2") !important;
    background-color: transparent !important;
}

    .contacts-social__list a.contacts-social__item--vk:hover::before {
        background-image: url("/local/templates/vpl_template/img/social/vk-hover.svg?v=contacts-20261021-v2") !important;
    background-color: transparent !important;
}

    .contacts-social__list a.contacts-social__item--youtube:hover::before {
        background-image: url("/local/templates/vpl_template/img/social/youtube-contacts-hover.svg?v=contacts-20261021-v4") !important;
    background-color: #FFFFFF !important;
    border-radius: 10px !important;
}

    .contacts-social__list a.contacts-social__item--dzen:hover::before {
        background-image: url("/local/templates/vpl_template/img/social/dzen-contacts-hover.svg?v=contacts-20261021-v4") !important;
        background-color: #FFFFFF !important;
    border-radius: 10px !important;
}

    .contacts-social__list a.contacts-social__item--max:hover::before {
        background-image: url("/local/templates/vpl_template/img/social/max-hover.svg?v=contacts-20261021-v2") !important;
    background-color: transparent !important;
}
}

/* Keyboard accessibility */

.contacts-social__list a.contacts-social__item--telegram:focus-visible::before {
    background-image: url("/local/templates/vpl_template/img/social/tg-hover.svg?v=contacts-20261021-v2") !important;
    background-color: transparent !important;
}

.contacts-social__list a.contacts-social__item--vk:focus-visible::before {
    background-image: url("/local/templates/vpl_template/img/social/vk-hover.svg?v=contacts-20261021-v2") !important;
    background-color: transparent !important;
}

.contacts-social__list a.contacts-social__item--youtube:focus-visible::before {
    background-image: url("/local/templates/vpl_template/img/social/youtube-contacts-hover.svg?v=contacts-20261021-v4") !important;
    background-color: #FFFFFF !important;
    border-radius: 10px !important;
}

.contacts-social__list a.contacts-social__item--dzen:focus-visible::before {
    background-image: url("/local/templates/vpl_template/img/social/dzen-contacts-hover.svg?v=contacts-20261021-v4") !important;
    background-color: #FFFFFF !important;
    border-radius: 10px !important;
}

.contacts-social__list a.contacts-social__item--max:focus-visible::before {
    background-image: url("/local/templates/vpl_template/img/social/max-hover.svg?v=contacts-20261021-v2") !important;
    background-color: transparent !important;
}

@media (max-width: 480px) {
    .contacts-social .contacts-social__list {
        grid-template-columns: 1fr !important;
    }
}


/* SN-CONTACTS-CHANNEL-HOVER-20261021-V5
   Only two upper contact cards: Telegram and MAX.
   WhatsApp and the lower social cards remain untouched.
*/

/* The full cards stay white at every pointer position. */

.contacts-page a.contacts-channel.contacts-channel--telegram,
.contacts-page a.contacts-channel.contacts-channel--telegram:hover,
.contacts-page a.contacts-channel.contacts-channel--telegram:focus-visible,
.contacts-page a.contacts-channel.contacts-channel--max,
.contacts-page a.contacts-channel.contacts-channel--max:hover,
.contacts-page a.contacts-channel.contacts-channel--max:focus-visible {
    background: #FFFFFF !important;
    color: #29292B !important;
}

/* Telegram: original icon stays intact until hover.
   Hover on the card OR icon uses the same appearance. */

.contacts-page a.contacts-channel.contacts-channel--telegram:hover
.contacts-channel__icon,
.contacts-page a.contacts-channel.contacts-channel--telegram:focus-visible
.contacts-channel__icon {
    background: transparent url("/local/templates/vpl_template/img/social/tg-hover.svg?v=channels-v5")
        center / 75% 75% no-repeat !important;
    border-color: #2AABEE !important;
    color: #2AABEE !important;
}

/* MAX: white hover surface and colored logo. */

.contacts-page a.contacts-channel.contacts-channel--max:hover
.contacts-channel__icon,
.contacts-page a.contacts-channel.contacts-channel--max:focus-visible
.contacts-channel__icon {
    background: transparent url("/local/templates/vpl_template/img/social/max-hover.svg?v=channels-v5")
        center / 75% 75% no-repeat !important;
    border-color: #5639C9 !important;
    color: #5639C9 !important;
}

/* Hide the old white SVG artwork only in hover state.
   The replacement SVG is drawn on the icon container. */

.contacts-page a.contacts-channel.contacts-channel--telegram:hover
.contacts-channel__icon svg,
.contacts-page a.contacts-channel.contacts-channel--telegram:focus-visible
.contacts-channel__icon svg,
.contacts-page a.contacts-channel.contacts-channel--max:hover
.contacts-channel__icon svg,
.contacts-page a.contacts-channel.contacts-channel--max:focus-visible
.contacts-channel__icon svg {
    opacity: 0 !important;
}

/* Keep the same icon dimensions, layout and corner radius. */