.tsfb-wrap{
position:fixed !important;
right:0 !important;
top:50% !important;
z-index:999980 !important;
display:flex !important;
flex-direction:column !important;
gap:8px !important;
margin:0 !important;
padding:0 !important;
transform:translate(115%, calc(-50% - 170px)) !important;
opacity:0 !important;
transition:transform .35s ease, opacity .28s ease !important;
}
.tsfb-wrap.tsfb-visible{
transform:translate(0, calc(-50% - 170px)) !important;
opacity:1 !important;
}
.tsfb-button{
width:48px !important;
height:48px !important;
min-width:48px !important;
min-height:48px !important;
box-sizing:border-box !important;
display:flex !important;
align-items:center !important;
justify-content:center !important;
padding:9px !important;
margin:0 !important;
border:0 !important;
border-radius:9px 0 0 9px !important;
text-decoration:none !important;
box-shadow:0 4px 16px rgba(0,0,0,.18) !important;
cursor:pointer !important;
transition:filter .18s ease, transform .18s ease !important;
}
.tsfb-button svg{
display:block !important;
width:100% !important;
height:100% !important;
}
.tsfb-button:hover{
filter:brightness(.96) !important;
transform:translateX(-2px) !important;
}
.tsfb-line{
background:#06c755 !important;
color:#fff !important;
}
.tsfb-instagram{
background:#fff !important;
color:#222 !important;
border:1px solid #dedede !important;
}
@media(max-width:700px){
.tsfb-wrap{
gap:7px !important;
transform:translate(115%, calc(-50% - 145px)) !important;
}
.tsfb-wrap.tsfb-visible{
transform:translate(0, calc(-50% - 145px)) !important;
}
.tsfb-button{
width:43px !important;
height:43px !important;
min-width:43px !important;
min-height:43px !important;
padding:8px !important;
border-radius:8px 0 0 8px !important;
}
}
@media(prefers-reduced-motion:reduce){
.tsfb-wrap,.tsfb-button{transition:none !important;}
} @media (hover:hover) and (pointer:fine){
.tsfb-button{
position:relative !important;
overflow:visible !important;
}
.tsfb-button::before{
content:attr(data-tsfb-tooltip);
position:absolute !important;
top:50% !important;
right:calc(100% + 12px) !important;
transform:translate(8px,-50%) !important;
white-space:nowrap !important;
padding:7px 11px !important;
border-radius:6px !important;
background:#333 !important;
color:#fff !important;
font-size:13px !important;
font-weight:700 !important;
line-height:1.35 !important;
letter-spacing:0 !important;
pointer-events:none !important;
opacity:0 !important;
visibility:hidden !important;
box-shadow:0 3px 12px rgba(0,0,0,.18) !important;
transition:opacity .16s ease, transform .16s ease, visibility .16s ease !important;
}
.tsfb-button::after{
content:"";
position:absolute !important;
top:50% !important;
right:calc(100% + 5px) !important;
transform:translateY(-50%) !important;
border-width:6px 0 6px 7px !important;
border-style:solid !important;
border-color:transparent transparent transparent #333 !important;
pointer-events:none !important;
opacity:0 !important;
visibility:hidden !important;
transition:opacity .16s ease, visibility .16s ease !important;
}
.tsfb-button:hover::before,
.tsfb-button:focus-visible::before{
opacity:1 !important;
visibility:visible !important;
transform:translate(0,-50%) !important;
}
.tsfb-button:hover::after,
.tsfb-button:focus-visible::after{
opacity:1 !important;
visibility:visible !important;
}
} @media (hover:hover) and (pointer:fine){
.tsfb-button:hover svg,
.tsfb-button:focus-visible svg{
animation:tsfb-icon-pop .42s ease both !important;
}
.tsfb-line:hover svg,
.tsfb-line:focus-visible svg{
animation:tsfb-icon-bounce .46s ease both !important;
}
}
@keyframes tsfb-icon-pop{
0%{transform:scale(1);}
45%{transform:scale(1.10);}
72%{transform:scale(.98);}
100%{transform:scale(1);}
}
@keyframes tsfb-icon-bounce{
0%{transform:translateY(0) scale(1);}
38%{transform:translateY(-3px) scale(1.08);}
68%{transform:translateY(1px) scale(.99);}
100%{transform:translateY(0) scale(1);}
}
@media (prefers-reduced-motion:reduce){
.tsfb-button:hover svg,
.tsfb-button:focus-visible svg{
animation:none !important;
}
}