/* =====================================================
   Sticky Social Icons - Public Styles v2.0.1
   ===================================================== */

/* =====================================================
   Tooltip — custom implementation (replaces microtip)
   Uses data-ssi-tooltip + data-ssi-side attributes
   ===================================================== */
.ssi-icon-btn {
    position: relative;
}

.ssi-icon-btn[data-ssi-tooltip]::after {
    content: attr(data-ssi-tooltip);
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: #1e1e1e;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    padding: 6px 12px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease 0s, transform 0.2s ease 0s;
    z-index: 10000;
}

/* Arrow pseudo */
.ssi-icon-btn[data-ssi-tooltip]::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    border: 6px solid transparent;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease 0s;
    z-index: 10001;
}

/* Tooltip on RIGHT side (icon is on the left edge) */
.ssi-icon-btn[data-ssi-tooltip][data-ssi-side="right"]::after {
    left: calc(100% + 12px);
    right: auto;
}
.ssi-icon-btn[data-ssi-tooltip][data-ssi-side="right"]::before {
    left: 100%;
    right: auto;
    border-right-color: #1e1e1e;
}

/* Tooltip on LEFT side (icon is on the right edge) */
.ssi-icon-btn[data-ssi-tooltip][data-ssi-side="left"]::after {
    right: calc(100% + 12px);
    left: auto;
}
.ssi-icon-btn[data-ssi-tooltip][data-ssi-side="left"]::before {
    right: 100%;
    left: auto;
    border-left-color: #1e1e1e;
}

/* Show on hover */
.ssi-icon-btn[data-ssi-tooltip]:hover::after,
.ssi-icon-btn[data-ssi-tooltip]:hover::before {
    opacity: 1;
    transition-delay: 0.25s;
}

/* =====================================================
   Container
   ===================================================== */
#ssi-container {
    position: fixed;
    z-index: 9999;
    margin: 0;
    padding: 0;
}

#ssi-container ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

#ssi-container ul li {
    list-style: none;
    margin: 0 0 2px;
    padding: 0;
}
#ssi-container ul li:last-child { margin-bottom: 0; }

/* =====================================================
   Side positioning
   ===================================================== */
#ssi-container.side-left  { left: 0; }
#ssi-container.side-right { right: 0; }

/* Vertical positioning — default values overridden by inline style for offset */
#ssi-container.vertical-center {
    top: 50%;
    transform: translateY(-50%);
}
/* top/bottom: position set via inline style (offset px) */

/* =====================================================
   Icon button base
   ===================================================== */
#ssi-container .ssi-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #fff;
    background: #333;
    overflow: hidden;
    /* transition set per-icon via animation class */
}

/* Design variants */
#ssi-container.design-rounded .ssi-icon-btn            { border-radius: 0 4px 4px 0; }
#ssi-container.design-rounded.side-right .ssi-icon-btn { border-radius: 4px 0 0 4px; }
#ssi-container.design-sharp .ssi-icon-btn              { border-radius: 0; }
#ssi-container.design-pill .ssi-icon-btn               { border-radius: 0 50px 50px 0; }
#ssi-container.design-pill.side-right .ssi-icon-btn    { border-radius: 50px 0 0 50px; }

/* =====================================================
   Animation — scoped per li, NOT per .ssi-icon-btn
   This ensures only the hovered icon moves, not all of them
   ===================================================== */
#ssi-container.with-animation.side-left ul li .ssi-icon-btn {
    transform: translateX(-6px);
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
#ssi-container.with-animation.side-left ul li:hover .ssi-icon-btn {
    transform: translateX(0);
}

#ssi-container.with-animation.side-right ul li .ssi-icon-btn {
    transform: translateX(6px);
    transition: transform 0.22s ease, background 0.22s ease, color 0.22s ease;
}
#ssi-container.with-animation.side-right ul li:hover .ssi-icon-btn {
    transform: translateX(0);
}

/* Color transitions always on */
#ssi-container:not(.with-animation) .ssi-icon-btn {
    transition: background 0.2s ease, color 0.2s ease;
}

/* =====================================================
   SVG icons
   ===================================================== */
#ssi-container .ssi-svg-icon {
    width: 55%;
    height: 55%;
    object-fit: contain;
    display: block;
}

/* =====================================================
   Dashicons sizing override
   ===================================================== */
#ssi-container .dashicons {
    font-size: inherit !important;
    width: auto !important;
    height: auto !important;
    line-height: inherit !important;
}

/* =====================================================
   Hide on mobile
   ===================================================== */
@media (max-width: 768px) {
    #ssi-container.hide-mobile { display: none !important; }
}