/* Floating Social Share */

.share-buttons {
    position: fixed;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.share-buttons.show {
    opacity: 1;
    visibility: visible;
}

.share-buttons a {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-size: 18px;
    color: #fff;
    transition: transform 0.3s ease;
}

.share-buttons a:hover {
    transform: scale(1.1);
}


/* Brand Colors */

#share-fb {
    background: #1877f2;
}

#share-tw {
    background: #000000;
}


/* X is black */

#share-wa {
    background: #25d366;
}

#share-li {
    background: #0a66c2;
}

#share-rd {
    background: #ff4500;
}

#share-tg {
    background: #0088cc;
}


/* Mobile view – side bar */

@media (max-width: 768px) {
    .share-buttons {
        position: fixed;
        top: 50%;
        /* center vertically */
        left: 10px;
        /* stick to the left side */
        transform: translateY(-50%);
        flex-direction: column;
        /* stack vertically */
        background: transparent;
        /* remove background for side */
        padding: 0;
        /* optional */
        border-radius: 0;
        z-index: 1000;
        gap: 12px;
    }
    .share-buttons a {
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
    }
}