/* SN-WA-NATIVE-20261021-V1 */

/*
 * Native WhatsApp icon replacement.
 * Preserves SVG/use, HTML blocks, classes and dimensions.
 * Supports both icon-wa and icon-wp.
 */

/* Normal state: supplied white icon */

svg.icon-wa,
svg.icon-wp {
    background-image:
        url("/local/templates/vpl_template/img/social/wa-default.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: contain !important;
}

/* Hide original artwork without removing SVG/use elements */

svg.icon-wa > use,
svg.icon-wp > use {
    display: none !important;
}

/* Hover: supplied colored icon */

@media (hover: hover) {
    a:hover svg.icon-wa,
    a:hover svg.icon-wp {
        background-image:
            url("/local/templates/vpl_template/img/social/wa-hover.svg?v=62b24d0edee5") !important;
    }
}

/* Keyboard navigation */

a:focus-visible svg.icon-wa,
a:focus-visible svg.icon-wp {
    background-image:
        url("/local/templates/vpl_template/img/social/wa-hover.svg?v=62b24d0edee5") !important;
}


/* SN-WA-BRAND-00AC55-20261021-V2
   WhatsApp only. Original HTML and dimensions preserved.
*/

/* Normal state: branded background */

a[href*="wa.me"]:is(
    .header__contacts-soc-item.icon-wa,
    .mp-review__info-item-links-item--wp,
    .footer__contacts-social-item,
    .contacts-social__item
) {
    background: #24D366 !important;
    border-color: #24D366 !important;
    color: #FFFFFF !important;
}

/* Hover and keyboard focus */

@media (hover: hover) {
    a[href*="wa.me"]:is(
        .header__contacts-soc-item.icon-wa,
        .mp-review__info-item-links-item--wp,
        .footer__contacts-social-item,
        .contacts-social__item
    ):hover {
        background: transparent !important;
        border-color: #24D366 !important;
        color: #24D366 !important;
    }
}

a[href*="wa.me"]:is(
    .header__contacts-soc-item.icon-wa,
    .mp-review__info-item-links-item--wp,
    .footer__contacts-social-item,
    .contacts-social__item
):focus-visible {
    background: transparent !important;
    border-color: #24D366 !important;
    color: #24D366 !important;
}

/* Contacts page: existing inner icon container */

.contacts-channel--whatsapp .contacts-channel__icon {
    background: #24D366 !important;
    border-color: #24D366 !important;
}

@media (hover: hover) {
    .contacts-channel--whatsapp:hover .contacts-channel__icon {
        background: transparent !important;
        border-color: #24D366 !important;
    }
}

.contacts-channel--whatsapp:focus-visible .contacts-channel__icon {
    background: transparent !important;
    border-color: #24D366 !important;
}