/* ==========================================================
   FLOATING SOCIAL BAR  (premium v3)
   - Icon ka size fixed, hover par kabhi bada nahi hota
   - Original brand colors (class + link domain dono se)
   - Naam ek chhote pill me, icon ke bagal me
========================================================== */

.social-sidebar{
    position:fixed;
    left:0;
    top:50%;
    transform:translateY(-50%);
    z-index:999;

    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;

    margin:0;
    padding:0;
    background:none;
    border:0;
    box-shadow:none;
}

.social-sidebar.is-right{
    left:auto;
    right:0;
    align-items:flex-end;
}


/* ---------- Icon (size fixed) ---------- */

.social-sidebar .social-icon{
    position:relative;
    box-sizing:border-box;

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

    width:44px;
    min-width:44px;
    max-width:44px;
    height:44px;

    margin:0;
    padding:0;

    color:#fff;
    font-size:18px;
    line-height:1;
    text-decoration:none;

    background:var(--bg, linear-gradient(145deg,
                var(--c1, var(--brand-primary, #f59e0b)),
                var(--c2, var(--brand-secondary, #d97706))));

    border:0;
    border-radius:0 12px 12px 0;

    box-shadow:
        0 6px 16px rgba(0,0,0,.20),
        inset 0 1px 0 rgba(255,255,255,.35);

    transition:transform .3s cubic-bezier(.22,.8,.3,1),
               box-shadow .3s ease,
               filter .3s ease;

    animation:sbIn .5s cubic-bezier(.22,.8,.3,1) both;
}

/* halki shine */
.social-sidebar .social-icon::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,0) 55%);
    pointer-events:none;
}

.social-sidebar .social-icon i{
    position:relative;
    z-index:1;
    transition:transform .3s ease;
}


/* ---------- Hover ---------- */

.social-sidebar .social-icon:hover,
.social-sidebar .social-icon:focus-visible{
    color:#fff;
    transform:translateX(6px);
    filter:brightness(1.07) saturate(1.1);
    box-shadow:
        0 10px 22px rgba(0,0,0,.28),
        inset 0 1px 0 rgba(255,255,255,.45);
    outline:none;
}

.social-sidebar .social-icon:hover i,
.social-sidebar .social-icon:focus-visible i{
    transform:scale(1.12);
}

.social-sidebar .social-icon:active{
    transform:translateX(3px) scale(.97);
}


/* ---------- Naam wala chhota pill ---------- */

.social-sidebar .social-icon::after{
    content:"";
    position:absolute;
    z-index:2;
    top:50%;
    left:calc(100% + 12px);

    padding:6px 12px;

    font-size:12px;
    font-weight:600;
    letter-spacing:.3px;
    line-height:1;
    white-space:nowrap;

    color:#fff;
    background:rgba(20,20,20,.88);
    border-radius:var(--radius-full, 9999px);
    box-shadow:0 6px 16px rgba(0,0,0,.25);

    opacity:0;
    pointer-events:none;
    transform:translate(-6px,-50%);
    transition:opacity .2s ease, transform .25s ease;
}

.social-sidebar .social-icon:hover::after,
.social-sidebar .social-icon:focus-visible::after{
    opacity:1;
    transform:translate(0,-50%);
}


/* ---------- Right side ---------- */

.social-sidebar.is-right .social-icon{
    border-radius:12px 0 0 12px;
    animation-name:sbInRight;
}

.social-sidebar.is-right .social-icon:hover,
.social-sidebar.is-right .social-icon:focus-visible{
    transform:translateX(-6px);
}

.social-sidebar.is-right .social-icon:active{
    transform:translateX(-3px) scale(.97);
}

.social-sidebar.is-right .social-icon::after{
    left:auto;
    right:calc(100% + 12px);
    transform:translate(6px,-50%);
}

.social-sidebar.is-right .social-icon:hover::after,
.social-sidebar.is-right .social-icon:focus-visible::after{
    transform:translate(0,-50%);
}


/* ==========================================================
   BRAND COLORS  (class se ya link ke domain se)
========================================================== */

.social-sidebar .sb-facebook-f,
.social-sidebar .fb,
.social-sidebar a[href*="facebook.com"],
.social-sidebar a[href*="fb.com"]{
    --c1:#2f8bff; --c2:#1257d6;
}

.social-sidebar .sb-instagram,
.social-sidebar .insta,
.social-sidebar a[href*="instagram.com"]{
    --bg:linear-gradient(45deg,#f9a03f 0%,#e1306c 50%,#8a3ab9 100%);
}

.social-sidebar .sb-youtube,
.social-sidebar .youtube,
.social-sidebar a[href*="youtube.com"],
.social-sidebar a[href*="youtu.be"]{
    --c1:#ff4b4b; --c2:#c4000f;
}

.social-sidebar .sb-linkedin-in,
.social-sidebar .linkedin,
.social-sidebar a[href*="linkedin.com"]{
    --c1:#2d8fe0; --c2:#08549b;
}

.social-sidebar .sb-x-twitter,
.social-sidebar a[href*="twitter.com"],
.social-sidebar a[href*="x.com"]{
    --c1:#3a3a3a; --c2:#000;
}

.social-sidebar .sb-whatsapp,
.social-sidebar a[href*="wa.me"],
.social-sidebar a[href*="whatsapp.com"]{
    --c1:#3be37d; --c2:#128c4a;
}

.social-sidebar .sb-telegram,
.social-sidebar a[href*="t.me"],
.social-sidebar a[href*="telegram"]{
    --c1:#3cb8ee; --c2:#1a85bb;
}

.social-sidebar .sb-pinterest-p,
.social-sidebar a[href*="pinterest."]{
    --c1:#ff3d55; --c2:#ad081b;
}

.social-sidebar .sb-tiktok,
.social-sidebar a[href*="tiktok.com"]{
    --c1:#2b2b2b; --c2:#000;
}

.social-sidebar .sb-google,
.social-sidebar .google,
.social-sidebar a[href*="google."],
.social-sidebar a[href*="g.page"]{
    --c1:#f06a5c; --c2:#c5301f;
}


/* ---------- Naam (label) ---------- */

.social-sidebar .sb-facebook-f::after, .social-sidebar .fb::after,
.social-sidebar a[href*="facebook.com"]::after { content:"Facebook"; }

.social-sidebar .sb-instagram::after, .social-sidebar .insta::after,
.social-sidebar a[href*="instagram.com"]::after { content:"Instagram"; }

.social-sidebar .sb-youtube::after, .social-sidebar .youtube::after,
.social-sidebar a[href*="youtube.com"]::after,
.social-sidebar a[href*="youtu.be"]::after { content:"YouTube"; }

.social-sidebar .sb-linkedin-in::after, .social-sidebar .linkedin::after,
.social-sidebar a[href*="linkedin.com"]::after { content:"LinkedIn"; }

.social-sidebar .sb-x-twitter::after,
.social-sidebar a[href*="twitter.com"]::after,
.social-sidebar a[href*="x.com"]::after { content:"X"; }

.social-sidebar .sb-whatsapp::after,
.social-sidebar a[href*="wa.me"]::after,
.social-sidebar a[href*="whatsapp.com"]::after { content:"WhatsApp"; }

.social-sidebar .sb-telegram::after,
.social-sidebar a[href*="t.me"]::after { content:"Telegram"; }

.social-sidebar .sb-pinterest-p::after,
.social-sidebar a[href*="pinterest."]::after { content:"Pinterest"; }

.social-sidebar .sb-tiktok::after,
.social-sidebar a[href*="tiktok.com"]::after { content:"TikTok"; }

.social-sidebar .sb-google::after, .social-sidebar .google::after,
.social-sidebar a[href*="google."]::after,
.social-sidebar a[href*="g.page"]::after { content:"Google"; }


/* ---------- Entrance ---------- */

.social-sidebar .social-icon:nth-child(1){ animation-delay:.05s; }
.social-sidebar .social-icon:nth-child(2){ animation-delay:.12s; }
.social-sidebar .social-icon:nth-child(3){ animation-delay:.19s; }
.social-sidebar .social-icon:nth-child(4){ animation-delay:.26s; }
.social-sidebar .social-icon:nth-child(5){ animation-delay:.33s; }
.social-sidebar .social-icon:nth-child(6){ animation-delay:.40s; }

@keyframes sbIn{
    from{ opacity:0; transform:translateX(-100%); }
    to  { opacity:1; transform:translateX(0); }
}

@keyframes sbInRight{
    from{ opacity:0; transform:translateX(100%); }
    to  { opacity:1; transform:translateX(0); }
}


/* ---------- Mobile ---------- */

@media (max-width:576px){

    .social-sidebar{ gap:7px; }

    .social-sidebar .social-icon{
        width:36px;
        min-width:36px;
        max-width:36px;
        height:36px;
        font-size:15px;
        border-radius:0 10px 10px 0;
    }

    .social-sidebar.is-right .social-icon{
        border-radius:10px 0 0 10px;
    }

    .social-sidebar .social-icon::after{ display:none; }
}


/* ---------- Accessibility / Print ---------- */

@media (prefers-reduced-motion:reduce){
    .social-sidebar .social-icon,
    .social-sidebar .social-icon i,
    .social-sidebar .social-icon::after{
        animation:none;
        transition:none;
    }
}

@media print{
    .social-sidebar{ display:none; }
}