/* IndoSurgicals Blog — Premium circular social sharing icons v2.4 */

.blog-share.blog-share-modern{
    margin:10px 58px 34px;
    padding:28px 0 30px;
    border-top:1px solid #e1e8ed;
    border-bottom:1px solid #e1e8ed;
}

.blog-share-heading{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:14px;
    margin-bottom:20px;
}

.blog-share-modern .blog-share-label{
    display:block;
    margin:0;
    color:#263f52;
    font:700 20px/1.35 Poppins,Arial,sans-serif;
}

.blog-share-subtitle{
    color:#7b8c99;
    font:500 12px/1.4 Poppins,Arial,sans-serif;
}

.blog-share-modern .blog-share-buttons{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:16px;
}

/* Premium circular outline buttons */
.blog-share-modern .blog-share-button{
    position:relative;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:58px;
    min-width:58px;
    height:58px;
    min-height:58px;
    padding:0;
    border:2px solid #d8e1e7;
    border-radius:50%;
    background:#ffffff;
    color:#2e4658!important;
    text-decoration:none!important;
    box-shadow:0 7px 18px rgba(27,50,67,.08);
    cursor:pointer;
    overflow:visible;
    transition:
        transform .18s ease,
        box-shadow .18s ease,
        border-color .18s ease,
        background-color .18s ease,
        color .18s ease;
    -webkit-tap-highlight-color:transparent;
}

.blog-share-modern .blog-share-button svg{
    width:24px;
    height:24px;
    display:block;
    fill:currentColor;
    pointer-events:none;
}

/* Brand-colour hover states */
.blog-share-modern .blog-share-button.whatsapp:hover,
.blog-share-modern .blog-share-button.whatsapp:focus-visible{
    background:#25d366;
    border-color:#25d366;
    color:#ffffff!important;
}

.blog-share-modern .blog-share-button.facebook:hover,
.blog-share-modern .blog-share-button.facebook:focus-visible{
    background:#1877f2;
    border-color:#1877f2;
    color:#ffffff!important;
}

.blog-share-modern .blog-share-button.linkedin:hover,
.blog-share-modern .blog-share-button.linkedin:focus-visible{
    background:#0a66c2;
    border-color:#0a66c2;
    color:#ffffff!important;
}

.blog-share-modern .blog-share-button.x:hover,
.blog-share-modern .blog-share-button.x:focus-visible{
    background:#111111;
    border-color:#111111;
    color:#ffffff!important;
}

.blog-share-modern .blog-share-button.email:hover,
.blog-share-modern .blog-share-button.email:focus-visible{
    background:#63798a;
    border-color:#63798a;
    color:#ffffff!important;
}

.blog-share-modern .blog-share-button.copy:hover,
.blog-share-modern .blog-share-button.copy:focus-visible{
    background:#43ae93;
    border-color:#43ae93;
    color:#ffffff!important;
}

.blog-share-modern .blog-share-button:hover{
    opacity:1;
    transform:translateY(-3px) scale(1.04);
    box-shadow:0 12px 24px rgba(27,50,67,.16);
}

.blog-share-modern .blog-share-button:focus-visible{
    outline:3px solid rgba(67,174,147,.25);
    outline-offset:4px;
}

.blog-share-modern .blog-share-button:active{
    transform:translateY(0) scale(.96);
}

/* Tooltip */
.blog-share-modern .blog-share-name{
    position:absolute;
    left:50%;
    bottom:calc(100% + 10px);
    z-index:5;
    transform:translate(-50%,5px);
    width:max-content;
    max-width:150px;
    padding:6px 9px;
    border-radius:7px;
    background:#20384a;
    color:#fff;
    font:600 11px/1.2 Poppins,Arial,sans-serif;
    white-space:nowrap;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .16s ease,transform .16s ease,visibility .16s ease;
}

.blog-share-modern .blog-share-name::after{
    content:"";
    position:absolute;
    top:100%;
    left:50%;
    margin-left:-4px;
    border:4px solid transparent;
    border-top-color:#20384a;
}

.blog-share-modern .blog-share-button:hover .blog-share-name,
.blog-share-modern .blog-share-button:focus-visible .blog-share-name{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0);
}

/* Copy confirmation */
.blog-share-icon-check{display:none!important}

.blog-share-button.copy.is-copied .blog-share-icon-link{
    display:none!important;
}

.blog-share-button.copy.is-copied .blog-share-icon-check{
    display:block!important;
}

.blog-share-button.copy.is-copied{
    background:#27ae60;
    border-color:#27ae60;
    color:#ffffff!important;
}

.blog-share-status{
    display:block;
    min-height:18px;
    margin-top:10px;
    color:#26866f;
    font:600 12px/1.4 Poppins,Arial,sans-serif;
}

/* Mobile */
@media(max-width:700px){
    .blog-share.blog-share-modern{
        margin:8px 18px 24px;
        padding:22px 0 24px;
    }

    .blog-share-heading{
        margin-bottom:17px;
    }

    .blog-share-modern .blog-share-label{
        font-size:18px;
    }

    .blog-share-subtitle{
        display:none;
    }

    .blog-share-modern .blog-share-buttons{
        flex-wrap:wrap;
        justify-content:flex-start;
        gap:12px;
    }

    .blog-share-modern .blog-share-button{
        width:52px;
        min-width:52px;
        height:52px;
        min-height:52px;
        border-width:2px;
    }

    .blog-share-modern .blog-share-button svg{
        width:22px;
        height:22px;
    }

    .blog-share-modern .blog-share-name{
        display:none;
    }

    .blog-share-status{
        min-height:16px;
        margin-top:8px;
        font-size:11px;
    }
}

@media(max-width:390px){
    .blog-share-modern .blog-share-buttons{
        gap:10px;
    }

    .blog-share-modern .blog-share-button{
        width:48px;
        min-width:48px;
        height:48px;
        min-height:48px;
    }
}