/**
 * Project:   Social Share Buttons by MediaArt
 * File:      social-share-buttons-by-mediaart-premium/assets/css/ssb-style.css
 * Version:   2.0
 * Description: Frontend styles for Social Share Buttons panel.
 *
 * @package Social_Share_Buttons_by_MediaArt
 */

#ssb-panel.ssb-panel{
    position: fixed;
    z-index: 999999;
    pointer-events: auto;
    overflow: visible;
    box-sizing: border-box;
}


#ssb-panel .ssb-inner{
    display:flex;
    gap:8px;
    box-sizing:border-box;
    align-items:center;
}


#ssb-panel .ssb-btn{
    position: relative;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none;
    text-align: center;
    line-height: 0;
    width: 44px;
    height: 44px;
    padding: 0;
    background: var(--ssb-button-color, #000);
    border-radius: var(--ssb-btn-radius, 0px);
    box-sizing: border-box;
    flex: 0 0 auto;

    transform: scale(var(--ssb-scale-idle, .88)) !important;
    transition: transform .15s ease;
    will-change: transform;
}


#ssb-panel .ssb-btn:hover,
#ssb-panel .ssb-btn:focus-visible,
#ssb-panel .ssb-btn.is-open{
    transform: scale(1) !important;
}

#ssb-panel .ssb-icon{
    display: block;
    margin: 0 auto !important;
    padding: 0 !important;
    flex: 0 0 auto;
    width: var(--ssb-icon-size, calc(100% - 6px));
    height: var(--ssb-icon-size, calc(100% - 6px));
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

/* Slide-out label (hidden by default). */
#ssb-panel .ssb-label{
    position: absolute;
    white-space: nowrap;
    max-width: min(240px, calc(100vw - 80px));
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center !important;
    justify-content: center !important;
    padding: 6px 10px;
    border-radius: var(--ssb-btn-radius, 9999px);
    font-size: 13px;
    line-height: 1;
    background: var(--ssb-button-color, #000);
    color: var(--ssb-text-color, #fff);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s ease, transform .15s ease, visibility .15s ease;
    z-index: 2;
}

/* Show label on hover/focus-visible for accessibility.
   Do NOT use :focus here (mouse click would leave label "stuck"). */
#ssb-panel .ssb-btn:hover .ssb-label,
#ssb-panel .ssb-btn:focus-visible .ssb-label{
    opacity: 1;
    visibility: visible;
}

/* On touch devices, :hover can become "sticky" after tap.
   We actively hide labels right after click/tap via JS by toggling this class. */
#ssb-panel.ssb-hide-labels .ssb-label{
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide label for the clicked button until pointer leaves it (desktop sticky hover fix). */
#ssb-panel .ssb-btn.ssb-no-hover .ssb-label{
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (hover: none){
    /* Prevent sticky :hover on touch devices. Labels still show for keyboard via focus-visible. */
    #ssb-panel .ssb-btn:hover .ssb-label{opacity:0;visibility:hidden;}
}


/* Keep panel hidden until JS decides the active mode/position to avoid "flash" (desktop then mobile). */
#ssb-panel.ssb-ready{
    opacity: 1;
    visibility: visible;
}

/* Active position is driven by JS via:
   data-ssb-mode="desktop|mobile" and data-ssb-position="left|right|bottom".
   Offsets are taken from CSS variables (desktop/mobile). */

#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="left"]{
    left: var(--ssb-lr-x-desktop, 10px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + var(--ssb-lr-y-desktop, 0px)));
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="left"] .ssb-inner{
    flex-direction: column;
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="right"]{
    right: var(--ssb-lr-x-desktop, 10px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + var(--ssb-lr-y-desktop, 0px)));
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="right"] .ssb-inner{
    flex-direction: column;
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="bottom"]{
    left: 0;
    right: 0;
    bottom: var(--ssb-bottom-y-desktop, 10px);
    top: auto;
    transform: none;
    padding-left: calc(env(safe-area-inset-left) + 8px);
    padding-right: calc(env(safe-area-inset-right) + 8px);
    box-sizing: border-box;
}
#ssb-panel[data-ssb-mode="desktop"][data-ssb-position="bottom"] .ssb-inner{
    flex-direction: row;
    justify-content: center !important;
    flex-wrap: wrap;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(var(--ssb-bottom-x-desktop, 0px));
}


#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="left"]{
    left: var(--ssb-lr-x-mobile, 10px);
    right: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + var(--ssb-lr-y-mobile, 0px)));
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="left"] .ssb-inner{
    flex-direction: column;
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="right"]{
    right: var(--ssb-lr-x-mobile, 10px);
    left: auto;
    top: 50%;
    bottom: auto;
    transform: translateY(calc(-50% + var(--ssb-lr-y-mobile, 0px)));
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="right"] .ssb-inner{
    flex-direction: column;
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="bottom"]{
    left: 0;
    right: 0;
    bottom: var(--ssb-bottom-y-mobile, 10px);
    top: auto;
    transform: none;
    padding-left: calc(env(safe-area-inset-left) + 8px);
    padding-right: calc(env(safe-area-inset-right) + 8px);
    box-sizing: border-box;
}
#ssb-panel[data-ssb-mode="mobile"][data-ssb-position="bottom"] .ssb-inner{
    flex-direction: row;
    justify-content: center !important;
    flex-wrap: wrap;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    transform: translateX(var(--ssb-bottom-x-mobile, 0px));
}


/* Label placement follows active position (so it doesn't end up over the icon). */
#ssb-panel[data-ssb-position="left"] .ssb-label{
    left: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
}
#ssb-panel[data-ssb-position="left"] .ssb-btn:hover .ssb-label,
#ssb-panel[data-ssb-position="left"] .ssb-btn:focus-visible .ssb-label{
    transform: translateY(-50%) translateX(0);

    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#ssb-panel[data-ssb-position="right"] .ssb-label{
    right: 100%;
    left: auto;
    top: 50%;
    transform: translateY(-50%) translateX(6px);
}
#ssb-panel[data-ssb-position="right"] .ssb-btn:hover .ssb-label,
#ssb-panel[data-ssb-position="right"] .ssb-btn:focus-visible .ssb-label{
    transform: translateY(-50%) translateX(0);

    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#ssb-panel[data-ssb-position="bottom"] .ssb-label,
#ssb-panel[data-position="bottom"] .ssb-label{
    left: 50%;
    right: auto;
    bottom: 100%;
    top: auto;

    /* Vertical label looks better for bottom position */
    writing-mode: vertical-rl;
    text-orientation: mixed;

    /* Override horizontal constraints */
    max-width: none;
    max-height: min(240px, calc(100vh - 120px));

    padding: 10px 6px;
    transform: translateX(-50%) translateY(8px);
}
#ssb-panel[data-ssb-position="bottom"] .ssb-btn:hover .ssb-label,
#ssb-panel[data-ssb-position="bottom"] .ssb-btn:focus-visible .ssb-label,
#ssb-panel[data-ssb-position="bottom"] .ssb-btn.is-open .ssb-label,
#ssb-panel[data-position="bottom"] .ssb-btn:hover .ssb-label,
#ssb-panel[data-position="bottom"] .ssb-btn:focus-visible .ssb-label,
#ssb-panel[data-position="bottom"] .ssb-btn.is-open .ssb-label{
    transform: translateX(-50%) translateY(0);

    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}


/* Disable panel completely for a device mode. */
#ssb-panel[data-ssb-position="none"]{display:none !important;}

/* More menu */
#ssb-panel .ssb-more-toggle{
    cursor: pointer;
    border: 0;
}

#ssb-panel .ssb-more-dots{
    display:block;
    font-size: 24px;
    line-height: 1;
    color: var(--ssb-text-color, #fff);
    transform: translateY(-1px);
}

#ssb-panel .ssb-more-menu{
    position: absolute;
    display: none;
    gap: 8px;
    align-items: center;
    z-index: 3;
}

/* Anchor for absolutely-positioned More menu */
#ssb-panel .ssb-inner{
    position: relative;
}

/* Bottom position: More menu expands ABOVE the whole button block (works even when buttons wrap on mobile) */
#ssb-panel[data-ssb-position="bottom"] .ssb-more-menu,
#ssb-panel[data-position="bottom"] .ssb-more-menu,
#ssb-panel.ssb-position-bottom .ssb-more-menu,
#ssb-panel.ssb-bottom .ssb-more-menu{
    left: 0;
    right: 0;
    bottom: calc(100% + 12px) !important;
    top: auto;

    /* offset above the entire button block (accounts for wrapped rows on mobile) */
    transform: none !important;

    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: center;
}

/* Bottom position: ensure More menu is anchored to the whole button block (ssb-inner), not to the .ssb-more button */
#ssb-panel[data-ssb-position="bottom"] .ssb-more,
#ssb-panel[data-position="bottom"] .ssb-more,
#ssb-panel.ssb-position-bottom .ssb-more,
#ssb-panel.ssb-bottom .ssb-more{
    position: static !important;
}

/* Bottom position: force absolute positioning for the More menu (robust against theme overrides) */
#ssb-panel[data-ssb-position="bottom"] .ssb-more-menu,
#ssb-panel[data-position="bottom"] .ssb-more-menu,
#ssb-panel.ssb-position-bottom .ssb-more-menu,
#ssb-panel.ssb-bottom .ssb-more-menu{
    position: absolute !important;
    z-index: 9999 !important;
}

/* Optional: keep menu from capturing clicks when closed */
#ssb-panel .ssb-more-menu[aria-hidden="true"]{
    pointer-events: none;
}
#ssb-panel .ssb-more-menu[aria-hidden="false"]{
    pointer-events: auto;
}

#ssb-panel.ssb-more-open .ssb-more-menu{
    display: flex;
}

/* More menu tooltips: force tooltip-style labels (prevent theme/plugin overrides)
   - Always show label as a tooltip ABOVE each icon in the More menu
   - In bottom position we rotate the label vertically (handled below)
*/
#ssb-panel .ssb-more-menu .ssb-btn{ position: relative; }
/* Ensure More menu buttons keep the same size as the main row */
#ssb-panel .ssb-more-menu .ssb-btn{
    width: 44px !important;
    height: 44px !important;
}

#ssb-panel .ssb-more-menu .ssb-label{
    position: absolute;
    left: 50%;
    right: auto;
    bottom: 100%;
    top: auto;
    transform: translateX(-50%) translateY(8px);
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Hover / focus / touch-open for More menu items */
#ssb-panel .ssb-more-menu .ssb-btn:hover .ssb-label,
#ssb-panel .ssb-more-menu .ssb-btn:focus-visible .ssb-label,
#ssb-panel .ssb-more-menu .ssb-btn.is-open .ssb-label{
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Bottom position: vertical tooltip labels (More menu included) */
#ssb-panel[data-ssb-position="bottom"] .ssb-more-menu .ssb-label,
#ssb-panel[data-position="bottom"] .ssb-more-menu .ssb-label,
#ssb-panel.ssb-position-bottom .ssb-more-menu .ssb-label,
#ssb-panel.ssb-bottom .ssb-more-menu .ssb-label{
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
    padding: 10px 6px;
    border-radius: 6px 6px 0 0;
    white-space: nowrap;
}
/* More menu: bottom position marker set by JS (robust even if menu is moved in DOM) */
#ssb-panel .ssb-more-menu.ssb-pos-bottom .ssb-label{
    writing-mode: vertical-rl !important;
    text-orientation: mixed !important;
}





/* If the More menu is displayed as a vertical stack (buttons above each other),
   show labels horizontally to the side (not vertical like the bottom-row tooltips). */
#ssb-panel .ssb-more-menu.ssb-layout-col .ssb-label{
    writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    left: 100% !important;
    bottom: 50% !important;
    top: auto !important;
    transform: translateX(8px) translateY(50%) !important;
    padding: 6px 10px !important;
    border-radius: 0 6px 6px 0 !important;
}
#ssb-panel .ssb-more-menu.ssb-layout-col .ssb-btn:hover .ssb-label,
#ssb-panel .ssb-more-menu.ssb-layout-col .ssb-btn:focus-visible .ssb-label,
#ssb-panel .ssb-more-menu.ssb-layout-col .ssb-btn.is-open .ssb-label{
    transform: translateX(0) translateY(50%) !important;
}


/* Default hide extras (they will be moved into menu by JS) */
#ssb-panel .ssb-extra{display:none !important;}

/* Tooltip placement for items in the More menu (always above the icon) */

/* Menu direction based on active position */
#ssb-panel .ssb-more{ position: relative; display: flex; align-items: center; }

/* LEFT/RIGHT: open as a vertical stack next to the whole button block (not over it) */
#ssb-panel[data-ssb-position="left"] .ssb-more-menu,
#ssb-panel[data-position="left"] .ssb-more-menu,
#ssb-panel.ssb-position-left .ssb-more-menu,
#ssb-panel.ssb-left .ssb-more-menu{
    left: calc(100% + 12px);
    right: auto;
    top: 0;
    bottom: auto;
    transform: none !important;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
}
#ssb-panel[data-ssb-position="right"] .ssb-more-menu,
#ssb-panel[data-position="right"] .ssb-more-menu,
#ssb-panel.ssb-position-right .ssb-more-menu,
#ssb-panel.ssb-right .ssb-more-menu{
    right: calc(100% + 12px);
    left: auto;
    top: 0;
    bottom: auto;
    transform: none !important;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-content: flex-start;
}

/* Bottom is handled earlier (anchored above the whole button block). */

/* LEFT/RIGHT: anchor menu to the whole block */
#ssb-panel[data-ssb-position="left"] .ssb-more,
#ssb-panel[data-position="left"] .ssb-more,
#ssb-panel.ssb-position-left .ssb-more,
#ssb-panel.ssb-left .ssb-more,
#ssb-panel[data-ssb-position="right"] .ssb-more,
#ssb-panel[data-position="right"] .ssb-more,
#ssb-panel.ssb-position-right .ssb-more,
#ssb-panel.ssb-right .ssb-more{
    position: static !important;
}



/* Admin overlay notice (settings save feedback). */
body.wp-admin #ssb-overlay-notice.ssb-overlay-notice {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 100000;
    max-width: 480px;
    width: calc(100vw - 40px);
    margin: 0;
    padding: 12px 16px;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.18);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

body.wp-admin #ssb-overlay-notice.ssb-overlay-visible {
    opacity: 1;
    visibility: visible;
}

body.wp-admin #ssb-overlay-notice .ssb-overlay-text {
    margin: 0;
    padding: 0;
}


/* Prevent label sticking after clicking More (sticky hover). */
#ssb-panel .ssb-more-toggle.ssb-suppress-hover .ssb-label{opacity:0 !important;visibility:hidden !important;}

/* Copy link feedback */
#ssb-panel .ssb-btn.ssb-copied{
    box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.55) inset;
}

#ssb-panel{
    opacity: 1;
    visibility: visible;
}

#ssb-panel.ssb-hidden{
    opacity: 0;
    visibility: hidden;
    transition: opacity .12s ease, visibility .12s ease;
}


/* Ensure Copy link can be rendered as a button without theme/link validators affecting it. */
#ssb-panel button.ssb-btn{
	border:none;
	cursor:pointer;
	font:inherit;
	background: var(--ssb-button-color, #000);
	color: inherit;
}
#ssb-panel button.ssb-btn:focus{outline: none;}

/* When More menu is open, hide More label (it overlaps nearby buttons). */
#ssb-panel.ssb-more-open .ssb-more-toggle .ssb-label{
    opacity: 0 !important;
    visibility: hidden !important;
}


/* === fix40: Bottom + More menu: open above base buttons, never overlap (high-specificity override) === */
#ssb-panel.ssb-panel[data-ssb-position="bottom"].ssb-more-open .ssb-more-menu{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    bottom: 100% !important;
    transform: translateY(-12px) !important;

    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    align-content: center !important;

    margin: 0 !important;
    padding: 0 0 0 0 !important;
    z-index: 9999 !important;
}

/* Ensure the positioning context exists (some themes reset it) */
#ssb-panel.ssb-panel .ssb-inner{
    position: relative !important;
}


/* fix45: LEFT / RIGHT – More menu as a vertical stack next to the button block (does NOT affect bottom) */
#ssb-panel[data-ssb-position="left"] .ssb-more-menu,
#ssb-panel[data-position="left"] .ssb-more-menu,
#ssb-panel.ssb-position-left .ssb-more-menu,
#ssb-panel.ssb-left .ssb-more-menu{
    position: absolute !important;
    left: calc(100% + 12px) !important;
    right: auto !important;
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
}

#ssb-panel[data-ssb-position="right"] .ssb-more-menu,
#ssb-panel[data-position="right"] .ssb-more-menu,
#ssb-panel.ssb-position-right .ssb-more-menu,
#ssb-panel.ssb-right .ssb-more-menu{
    position: absolute !important;
    right: calc(100% + 12px) !important;
    left: auto !important;
    top: 0 !important;
    bottom: auto !important;
    transform: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
    align-content: flex-start !important;
}


/* fix50: When More menu is open, show base button tooltips above the expanded buttons */
#ssb-panel.ssb-more-open .ssb-btn:hover,
#ssb-panel.ssb-more-open .ssb-btn:focus-visible,
#ssb-panel.ssb-more-open .ssb-btn.is-open{
    z-index: 10020;
}

#ssb-panel.ssb-more-open .ssb-btn:hover .ssb-label,
#ssb-panel.ssb-more-open .ssb-btn:focus-visible .ssb-label,
#ssb-panel.ssb-more-open .ssb-btn.is-open .ssb-label{
    z-index: 10030;
}

/* Keep the More menu below tooltips but above the base buttons */
#ssb-panel.ssb-more-open .ssb-more-menu{
    z-index: 10010;
}