/* ============================================================
   Floating Social Buttons — Frontend v1.4
   ALL selectors scoped to #fsb-widget — zero global leak
   ============================================================ */

/* ---- Isolate the widget completely ---- */
#fsb-widget,
#fsb-widget * {
    box-sizing: border-box;
}

/* ---- Wrapper ---- */
#fsb-widget {
    position: fixed !important;
    z-index:  99999 !important;
    display:  none;                  /* hidden until media query enables */
    flex-direction: column !important;
    margin:   0 !important;
    padding:  0 !important;
}

/* ---- Device visibility ---- */
@media (min-width: 1025px) {
    #fsb-widget.fsb-show-desktop { display: flex !important; }
    #fsb-widget.fsb-pos-desktop-right { align-items: flex-end; }
    #fsb-widget.fsb-pos-desktop-left  { align-items: flex-start; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    #fsb-widget.fsb-show-tablet { display: flex !important; }
    #fsb-widget.fsb-pos-tablet-right { align-items: flex-end; }
    #fsb-widget.fsb-pos-tablet-left  { align-items: flex-start; }
}
@media (max-width: 767px) {
    #fsb-widget.fsb-show-mobile { display: flex !important; }
    #fsb-widget.fsb-pos-mobile-right { align-items: flex-end; }
    #fsb-widget.fsb-pos-mobile-left  { align-items: flex-start; }
    /* Ensure list/items never interfere with container position on mobile */
    #fsb-widget .fsb-list  { position: static    !important; transform: none !important; }
    #fsb-widget .fsb-list li.fsb-item { position: relative !important; transform: none !important; }
}

/* ---- Button list ---- */
#fsb-widget .fsb-list {
    list-style: none !important;
    margin:   0 !important;
    padding:  0 !important;
    display:  flex;
    flex-direction: column;
    gap: var(--fsb-gap, 10px);
    position:  static !important;   /* must not create stacking context */
    transform: none   !important;   /* prevents interference with parent fixed positioning */
    /* Collapsed by default */
    max-height: 0;
    overflow:   hidden;
    opacity:    0;
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.22s ease;
}

/* Open via toggle */
#fsb-widget.fsb-open .fsb-list { max-height: 1200px; opacity: 1; pointer-events: all; }

/* Always-open per device */
@media (min-width: 1025px) {
    #fsb-widget.fsb-always-desktop .fsb-list   { max-height: 1200px !important; opacity: 1 !important; pointer-events: all !important; }
    #fsb-widget.fsb-always-desktop .fsb-toggle { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
    #fsb-widget.fsb-always-tablet .fsb-list    { max-height: 1200px !important; opacity: 1 !important; pointer-events: all !important; }
    #fsb-widget.fsb-always-tablet .fsb-toggle  { display: none !important; }
}
@media (max-width: 767px) {
    #fsb-widget.fsb-always-mobile .fsb-list    { max-height: 1200px !important; opacity: 1 !important; pointer-events: all !important; }
    #fsb-widget.fsb-always-mobile .fsb-toggle  { display: none !important; }
}

/* ---- List item ---- */
#fsb-widget .fsb-list li.fsb-item {
    list-style: none !important;
    margin:   0 !important;
    padding:  0 !important;
    display:  flex;
    align-items: center;
    position: relative !important;
    transform: none   !important;
}

/* ---- Label tooltip ---- */
#fsb-widget .fsb-list li.fsb-item .fsb-label {
    position:   absolute;
    display:    block;
    white-space: nowrap;
    padding:    5px 11px;
    border-radius: 6px;
    font-size:  13px;
    font-weight: 600;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    line-height: 1.4;
    box-shadow: 0 2px 8px rgba(0,0,0,.16);
    opacity:    0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    top: 50%;
    right: calc(var(--fsb-size, 55px) + 10px);
    left:  auto;
    transform: translateY(-50%) translateX(6px);
    z-index: 2;
    text-decoration: none !important;
}
#fsb-widget .fsb-list li.fsb-item:hover .fsb-label {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
}
/* Left-side widget: label appears on the right */
#fsb-widget[class*="-left"] .fsb-list li.fsb-item .fsb-label {
    right: auto;
    left:  calc(var(--fsb-size, 55px) + 10px);
    transform: translateY(-50%) translateX(-6px);
}
#fsb-widget[class*="-left"] .fsb-list li.fsb-item:hover .fsb-label {
    transform: translateY(-50%) translateX(0);
}

/* ---- Round button ---- */
#fsb-widget .fsb-list li.fsb-item a.fsb-btn {
    display:    flex !important;
    align-items: center !important;
    justify-content: center !important;
    width:  var(--fsb-size, 55px) !important;
    height: var(--fsb-size, 55px) !important;
    min-width:  var(--fsb-size, 55px) !important;
    min-height: var(--fsb-size, 55px) !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    box-shadow: 0 3px 10px rgba(0,0,0,.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    cursor:   pointer;
    overflow: hidden;
    outline:  none;
    border:   none !important;
    padding:  0 !important;
    flex-shrink: 0;
    line-height: 1;
}
#fsb-widget .fsb-list li.fsb-item a.fsb-btn:hover  { transform: scale(1.09); box-shadow: 0 5px 16px rgba(0,0,0,.30); }
#fsb-widget .fsb-list li.fsb-item a.fsb-btn:active { transform: scale(0.95); }

/* ---- Icon span inside button ---- */
#fsb-widget .fsb-list li.fsb-item a.fsb-btn .fsb-icon {
    display:    flex !important;
    align-items: center !important;
    justify-content: center !important;
    width:  var(--fsb-icon, 26px) !important;
    height: var(--fsb-icon, 26px) !important;
    flex-shrink: 0;
    pointer-events: none;
    line-height: 1;
}

/* ---- SVG inside icon span ---- */
#fsb-widget .fsb-list li.fsb-item a.fsb-btn .fsb-icon svg {
    display:   block !important;
    width:     var(--fsb-icon, 26px) !important;
    height:    var(--fsb-icon, 26px) !important;
    max-width: none !important;
    overflow:  visible;
    flex-shrink: 0;
    pointer-events: none;
}

/* ---- Toggle button ---- */
#fsb-widget > button.fsb-toggle {
    display:    flex !important;
    align-items: center !important;
    justify-content: center !important;
    width:  var(--fsb-size, 55px) !important;
    height: var(--fsb-size, 55px) !important;
    min-width:  var(--fsb-size, 55px) !important;
    min-height: var(--fsb-size, 55px) !important;
    border-radius: 50% !important;
    background: #2c2c2c !important;
    border:  none !important;
    cursor:  pointer;
    box-shadow: 0 3px 12px rgba(0,0,0,.28);
    transition: background 0.2s, transform 0.2s;
    padding: 0 !important;
    outline: none;
    margin-top: var(--fsb-gap, 10px);
    flex-shrink: 0;
    position: relative;
}
#fsb-widget > button.fsb-toggle:hover  { background: #444 !important; transform: scale(1.06); }
#fsb-widget > button.fsb-toggle:active { transform: scale(0.95); }
#fsb-widget.fsb-open > button.fsb-toggle { background: #d32f2f !important; }

#fsb-widget > button.fsb-toggle .fsb-toggle-open,
#fsb-widget > button.fsb-toggle .fsb-toggle-close {
    position: absolute;
    display:  flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease, transform 0.2s ease;
}
#fsb-widget > button.fsb-toggle .fsb-toggle-open  { opacity: 1; transform: rotate(0deg)   scale(1);   }
#fsb-widget > button.fsb-toggle .fsb-toggle-close { opacity: 0; transform: rotate(90deg)  scale(0.6); }
#fsb-widget.fsb-open > button.fsb-toggle .fsb-toggle-open  { opacity: 0; transform: rotate(-90deg) scale(0.6); }
#fsb-widget.fsb-open > button.fsb-toggle .fsb-toggle-close { opacity: 1; transform: rotate(0deg)   scale(1);   }

#fsb-widget > button.fsb-toggle svg {
    display:   block !important;
    width:     24px !important;
    height:    24px !important;
    max-width: none !important;
    flex-shrink: 0;
}