/* SN-BLOG-SHARE-BRANDS-20261027-V1

   Scope:
   Detailed blog article share buttons only.

   WhatsApp / Telegram / VK.

   Existing share URLs and original HTML preserved.
   Default and hover icons taken from img/social.
*/

.blog-detail .sale-detail__bottom-links-items > a {
    position: relative !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 5px !important;

    border: 1px solid transparent !important;
    border-radius: 8px !important;

    box-sizing: border-box !important;

    transition:
        background-color 0.25s ease,
        border-color 0.25s ease !important;
}

/* Hide old SVG sprites visually */

.blog-detail .sale-detail__bottom-links-items
> a > svg.icon {
    display: none !important;
}

/* New brand icons */

.blog-detail .sale-detail__bottom-links-items
> a::before,
.blog-detail .sale-detail__bottom-links-items
> a::after {
    content: "";

    display: block;

    width: 28px;
    height: 28px;

    flex: 0 0 28px;

    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    pointer-events: none;

    transition: opacity 0.25s ease;
}

/* Default logo */

.blog-detail .sale-detail__bottom-links-items
> a::before {
    background-image: var(--sn-share-default-icon);
    opacity: 1;
}

/* Hover logo */

.blog-detail .sale-detail__bottom-links-items
> a::after {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(-50%, -50%);

    background-image: var(--sn-share-hover-icon);

    opacity: 0;
}

/* WhatsApp */

.blog-detail .sale-detail__bottom-links-items
> a.wa {
    --sn-share-brand: #24D366;

    --sn-share-default-icon:
        url("/local/templates/vpl_template/img/social/wa-default.svg");

    --sn-share-hover-icon:
        url("/local/templates/vpl_template/img/social/wa-hover.svg");

    background: var(--sn-share-brand) !important;
    border-color: var(--sn-share-brand) !important;
}

/* Telegram */

.blog-detail .sale-detail__bottom-links-items
> a.tg {
    --sn-share-brand: #28A4E4;

    --sn-share-default-icon:
        url("/local/templates/vpl_template/img/social/tg-default.svg");

    --sn-share-hover-icon:
        url("/local/templates/vpl_template/img/social/tg-hover.svg");

    background: var(--sn-share-brand) !important;
    border-color: var(--sn-share-brand) !important;
}

/* VK */

.blog-detail .sale-detail__bottom-links-items
> a.vk {
    --sn-share-brand: #0077FF;

    --sn-share-default-icon:
        url("/local/templates/vpl_template/img/social/vk-default.svg");

    --sn-share-hover-icon:
        url("/local/templates/vpl_template/img/social/vk-hover.svg");

    background: var(--sn-share-brand) !important;
    border-color: var(--sn-share-brand) !important;
}

/* Hover and keyboard focus */

.blog-detail .sale-detail__bottom-links-items
> a.wa:hover,
.blog-detail .sale-detail__bottom-links-items
> a.wa:focus-visible,
.blog-detail .sale-detail__bottom-links-items
> a.tg:hover,
.blog-detail .sale-detail__bottom-links-items
> a.tg:focus-visible,
.blog-detail .sale-detail__bottom-links-items
> a.vk:hover,
.blog-detail .sale-detail__bottom-links-items
> a.vk:focus-visible {
    background: transparent !important;
    border-color: var(--sn-share-brand) !important;
}

/* Crossfade between original and hover logos */

.blog-detail .sale-detail__bottom-links-items
> a:hover::before,
.blog-detail .sale-detail__bottom-links-items
> a:focus-visible::before {
    opacity: 0;
}

.blog-detail .sale-detail__bottom-links-items
> a:hover::after,
.blog-detail .sale-detail__bottom-links-items
> a:focus-visible::after {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .blog-detail .sale-detail__bottom-links-items > a,
    .blog-detail .sale-detail__bottom-links-items
    > a::before,
    .blog-detail .sale-detail__bottom-links-items
    > a::after {
        transition: none !important;
    }
}

/* SN-BLOG-SHARE-MATCH-HEADER-20261027-V1
   Match actual header button and icon dimensions.
   Only blog share buttons.
*/

.blog-detail .sale-detail__bottom-links-items
> a.sn-blog-share-sized {
    width: var(--sn-blog-share-width) !important;
    min-width: var(--sn-blog-share-width) !important;
    max-width: var(--sn-blog-share-width) !important;

    height: var(--sn-blog-share-height) !important;
    min-height: var(--sn-blog-share-height) !important;
    max-height: var(--sn-blog-share-height) !important;

    padding: 0 !important;
    margin: 0 !important;

    flex: 0 0 auto !important;

    box-sizing: border-box !important;
}

.blog-detail .sale-detail__bottom-links-items
> a.sn-blog-share-sized::before,
.blog-detail .sale-detail__bottom-links-items
> a.sn-blog-share-sized::after {
    width: var(--sn-blog-share-icon-width, 28px) !important;
    height: var(--sn-blog-share-icon-height, 28px) !important;

    flex: 0 0 auto !important;

    background-size: contain !important;
}