/* TIS Social Float — fixed side widget */
.tssf {
    position: fixed;
    z-index: 998;
    font-family: inherit;
}
.tssf--right  { right: 14px; }
.tssf--left   { left: 14px; }
.tssf--middle { top: 50%; transform: translateY(-50%); }
.tssf--bottom { bottom: var(--tssf-offset, 96px); }
.tssf--middle { margin-bottom: 0; }

.tssf__tab {
    width: var(--tssf-size, 44px);
    height: var(--tssf-size, 44px);
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: linear-gradient(135deg, var(--tg-accent, #dc6421), var(--tg-accent-2, #ff9b42));
    box-shadow: 0 10px 26px rgba(220, 100, 33, .45), 0 2px 8px rgba(0, 0, 0, .35);
    transition: transform .25s cubic-bezier(.33,1.4,.6,1), box-shadow .25s ease;
    position: relative;
}
.tssf__tab:hover { transform: translateY(-2px) scale(1.06); }
.tssf--middle .tssf__tab:hover { transform: translateY(-2px) scale(1.06); }
.tssf__tab svg { width: 55%; height: 55%; }
.tssf__tab-icon { display: flex; position: absolute; transition: opacity .2s ease, transform .25s ease; }
.tssf__tab-icon--close { opacity: 0; transform: rotate(-90deg) scale(.6); }
.tssf.is-open .tssf__tab-icon--share { opacity: 0; transform: rotate(90deg) scale(.6); }
.tssf.is-open .tssf__tab-icon--close { opacity: 1; transform: rotate(0) scale(1); }

.tssf__panel {
    position: absolute;
    bottom: calc(100% + 12px);
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    min-width: calc(var(--tssf-size, 44px) + 24px);
    background: rgba(13, 17, 24, .92);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 18px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, .5);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px) scale(.92);
    transform-origin: bottom center;
    transition: opacity .22s ease, transform .28s cubic-bezier(.33,1.3,.5,1), visibility .22s;
}
.tssf--right .tssf__panel { right: 0; }
.tssf--left  .tssf__panel { left: 0; }
.tssf--bottom .tssf__panel { bottom: calc(100% + 12px); }
.tssf.is-open .tssf__panel {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.tssf__group {
    margin: 2px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, .45);
    white-space: nowrap;
}
.tssf--labels .tssf__group { text-transform: none; letter-spacing: 0; font-size: 11.5px; }

.tssf__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: var(--tssf-size, 44px);
    height: var(--tssf-size, 44px);
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: calc(var(--tssf-size, 44px) / 2);
    background: rgba(255, 255, 255, .05);
    color: rgba(255, 255, 255, .82);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    padding: 0;
    justify-content: center;
    overflow: hidden;
    transition: width .3s cubic-bezier(.33,1.2,.5,1), background .2s ease, color .2s ease, transform .2s ease, border-color .2s;
    white-space: nowrap;
}
.tssf__item svg { width: 46%; height: 46%; flex: 0 0 auto; margin: 0 auto; }
.tssf__label { display: none; font-size: 13px; font-weight: 600; padding-inline-end: 14px; }
.tssf--labels .tssf__item { width: auto; padding-inline-start: calc(var(--tssf-size, 44px) * .27); }
.tssf--labels .tssf__item svg { margin: 0; width: calc(var(--tssf-size, 44px) * .46); height: calc(var(--tssf-size, 44px) * .46); }
.tssf--labels .tssf__label { display: inline; }

.tssf__item:hover { transform: translateX(-3px); border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .1); color: #fff; }
html[dir="rtl"] .tssf__item:hover { transform: translateX(3px); }
.tssf__item--facebook:hover  { background: #1877f2; border-color: #1877f2; }
.tssf__item--instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); border-color: transparent; }
.tssf__item--tiktok:hover    { background: #000; border-color: rgba(255,255,255,.4); }
.tssf__item--whatsapp:hover  { background: #25d366; border-color: #25d366; color: #06281a; }

.tssf__item.is-copied { background: rgba(37, 211, 102, .18); border-color: rgba(37, 211, 102, .5); color: #7dffb0; }

@media (max-width: 640px) {
    .tssf--right { right: 10px; }
    .tssf--left  { left: 10px; }
}

@media (prefers-reduced-motion: reduce) {
    .tssf, .tssf * { transition: none !important; animation: none !important; }
}