/* Twingital Social Sharing - Frontend Styles */
:root {
    --tss-gap: 8px;
    --tss-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.tss-wrapper {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 28px 0;
    font-family: var(--tss-font);
}

.tss-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    /* color set inline via label_color option */
}

.tss-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--tss-gap);
}

/* Alignment */
.tss-align--left   .tss-buttons { justify-content: flex-start; }
.tss-align--center .tss-buttons { justify-content: center; }
.tss-align--right  .tss-buttons { justify-content: flex-end; }

/* ---- Base button ---- */
.tss-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 14px;
    height: 40px;
    border: none;
    cursor: pointer;
    font-family: var(--tss-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
    background: var(--tss-btn-color, #6b7280);
    color: #fff;
}

.tss-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.22);
    opacity: .92;
    color: #fff;
    text-decoration: none;
}

.tss-btn:active { transform: translateY(0); }

.tss-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    fill: currentColor;
}

/* ---- Styles ---- */
.tss-style--rounded .tss-btn { border-radius: 8px; }
.tss-style--square  .tss-btn { border-radius: 0; }
.tss-style--pill    .tss-btn { border-radius: 100px; }

/* Circle: icon-only, perfectly round */
.tss-style--circle .tss-btn {
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 0;
}
.tss-style--circle .tss-btn-label { display: none; }

/* ---- Sizes ---- */
.tss-size--small .tss-btn         { height: 32px; padding: 0 10px; font-size: 12px; }
.tss-size--small .tss-btn svg     { width: 15px; height: 15px; }
.tss-size--large .tss-btn         { height: 50px; padding: 0 20px; font-size: 15px; }
.tss-size--large .tss-btn svg     { width: 22px; height: 22px; }

/* Circle + size overrides */
.tss-style--circle.tss-size--small .tss-btn { width: 32px; height: 32px; padding: 0; }
.tss-style--circle.tss-size--large .tss-btn { width: 50px; height: 50px; padding: 0; }
.tss-style--circle.tss-size--large .tss-btn svg { width: 22px; height: 22px; }
.tss-style--circle.tss-size--small .tss-btn svg { width: 15px; height: 15px; }

/* ---- Floating bar ---- */
.tss-floating {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 9999;
}

.tss-floating--left  { left: 0; }
.tss-floating--right { right: 0; }

.tss-floating-inner .tss-buttons {
    flex-direction: column;
    gap: 4px;
}

.tss-floating .tss-btn {
    border-radius: 0;
    height: 44px;
    width: 44px;
    padding: 0;
}

.tss-floating .tss-btn-label { display: none; }
.tss-floating .tss-label     { display: none; }

.tss-floating--left  .tss-btn { border-radius: 0 6px 6px 0; }
.tss-floating--right .tss-btn { border-radius: 6px 0 0 6px; }

/* ---- Copy animation ---- */
.tss-btn--copy_link.copied {
    background: #16a34a !important;
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
    .tss-style--rounded .tss-btn,
    .tss-style--square  .tss-btn,
    .tss-style--pill    .tss-btn {
        width: 40px;
        padding: 0;
    }
    .tss-btn-label { display: none; }
    .tss-size--large .tss-btn { width: 50px; height: 50px; }
}