/* ================================================
   Social Share Pro — share-bar.css
   ================================================ */

:root {
    --ssp-r:       8px;
    --ssp-shadow:  0 2px 16px rgba(0,0,0,.10), 0 1px 4px rgba(0,0,0,.07);
    --ssp-accent:  #2563eb;
    --ssp-bg:      #ffffff;
    --ssp-sz:      40px;
    --ssp-gap:     6px;
    --ssp-ease:    cubic-bezier(.4,0,.2,1);
}

/* ── Wrapper ── */
.ssp-wrap {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             10px;
    background:      var(--ssp-bg);
    border-radius:   var(--ssp-r);
    box-shadow:      var(--ssp-shadow);
    border:          1px solid rgba(0,0,0,.07);
    padding:         10px 14px;
    margin:          22px 0;
    box-sizing:      border-box;
    font-family:     -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    position:        relative;
    /* CRITICAL — keep everything in one row */
    flex-wrap:       nowrap;
    overflow:        visible;
}

/* ── LEFT — share icon ── */
.ssp-left {
    display:     flex;
    align-items: center;
    gap:         7px;
    flex-shrink: 0;
}

.ssp-icon-share {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
}

.ssp-icon-share svg {
    display: block;
    width:   22px;
    height:  22px;
}

.ssp-count {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    background:      var(--ssp-accent);
    color:           #fff;
    font-size:       11px;
    font-weight:     700;
    padding:         2px 8px;
    border-radius:   20px;
    min-width:       22px;
    line-height:     1;
    transition:      transform .25s var(--ssp-ease);
}

/* ── RIGHT — icon row ── */
.ssp-right {
    display:     flex;
    align-items: center;
    flex-shrink: 0;
}

/* The actual row — NO wrap, NO overflow:hidden here */
.ssp-row {
    display:     flex;
    align-items: center;
    gap:         var(--ssp-gap);
    flex-wrap:   nowrap;
    position:    relative;
}

/* ── Each icon button ── */
.ssp-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    width:           var(--ssp-sz);
    height:          var(--ssp-sz);
    border-radius:   var(--ssp-r);
    background:      var(--c, #888);
    color:           #fff !important;
    text-decoration: none !important;
    flex-shrink:     0;
    border:          none;
    outline:         none;
    cursor:          pointer;
    transition:      transform .2s var(--ssp-ease),
                     filter  .2s var(--ssp-ease),
                     box-shadow .2s var(--ssp-ease);
    position:        relative;
    overflow:        hidden;
}

.ssp-btn svg {
    width:    17px;
    height:   17px;
    display:  block;
    position: relative;
    z-index:  1;
    flex-shrink: 0;
    /* prevent SVG from growing and breaking layout */
    min-width:  17px;
    min-height: 17px;
}

/* Hover shimmer */
.ssp-btn::after {
    content:      '';
    position:     absolute;
    inset:        0;
    background:   rgba(255,255,255,0);
    border-radius: inherit;
    transition:   background .2s var(--ssp-ease);
}
.ssp-btn:hover::after  { background: rgba(255,255,255,.15); }
.ssp-btn:active::after { background: rgba(0,0,0,.08); }

.ssp-btn:hover {
    transform:  translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,.2);
}
.ssp-btn:active { transform: translateY(0); }

.ssp-btn:focus-visible {
    outline:        2px solid var(--ssp-accent);
    outline-offset: 2px;
}

/* Copy-link copied state */
.ssp-btn--copylink.ssp-copied { background: #16a34a !important; }

/* ── Three-dots button ── */
.ssp-dots-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    width:           var(--ssp-sz);
    height:          var(--ssp-sz);
    border-radius:   var(--ssp-r);
    background:      transparent;
    border:          1.5px solid rgba(0,0,0,.13);
    cursor:          pointer;
    flex-shrink:     0;
    outline:         none;
    transition:      background .2s var(--ssp-ease),
                     border-color .2s var(--ssp-ease),
                     transform .2s var(--ssp-ease);
    padding:         0;
}

.ssp-dots-btn:hover {
    background:    rgba(0,0,0,.05);
    border-color:  rgba(0,0,0,.25);
    transform:     translateY(-1px);
}

.ssp-dots-btn:focus-visible {
    outline:        2px solid var(--ssp-accent);
    outline-offset: 2px;
}

.ssp-dots-btn[aria-expanded="true"] {
    background:   rgba(0,0,0,.07);
    border-color: rgba(0,0,0,.22);
}

.ssp-dot {
    display:       block;
    width:         4px;
    height:        4px;
    border-radius: 50%;
    background:    #555;
    flex-shrink:   0;
}

/* ── More panel — slides in horizontally ── */
.ssp-more {
    display:         flex;
    align-items:     center;
    gap:             var(--ssp-gap);
    flex-wrap:       nowrap;
    /* Hidden state */
    max-width:       0;
    overflow:        hidden;
    opacity:         0;
    pointer-events:  none;
    transition:      max-width .35s var(--ssp-ease),
                     opacity   .25s var(--ssp-ease);
}

.ssp-more.ssp-open {
    /* 9 icons × 46px = 414px — safe upper bound */
    max-width:      450px;
    opacity:        1;
    pointer-events: auto;
    overflow:       visible;
}

/* Stagger each hidden icon as panel opens */
.ssp-more .ssp-btn {
    transform:   scale(.7);
    opacity:     0;
    transition:  transform .22s var(--ssp-ease),
                 opacity   .22s var(--ssp-ease),
                 filter    .2s  var(--ssp-ease),
                 box-shadow .2s var(--ssp-ease);
}

.ssp-more.ssp-open .ssp-btn              { transform: scale(1); opacity: 1; }
.ssp-more.ssp-open .ssp-btn:nth-child(1) { transition-delay: .04s; }
.ssp-more.ssp-open .ssp-btn:nth-child(2) { transition-delay: .08s; }
.ssp-more.ssp-open .ssp-btn:nth-child(3) { transition-delay: .12s; }
.ssp-more.ssp-open .ssp-btn:nth-child(4) { transition-delay: .16s; }
.ssp-more.ssp-open .ssp-btn:nth-child(5) { transition-delay: .20s; }
.ssp-more.ssp-open .ssp-btn:nth-child(6) { transition-delay: .24s; }

/* ── Responsive ── */
@media (max-width: 540px) {
    :root {
        --ssp-sz:  36px;
        --ssp-gap: 5px;
    }
    .ssp-wrap  { padding: 8px 10px; gap: 8px; }
}

@media (max-width: 400px) {
    :root {
        --ssp-sz:  32px;
        --ssp-gap: 4px;
    }
    .ssp-wrap  { padding: 7px 8px; }
    .ssp-btn svg { width: 14px; height: 14px; min-width: 14px; min-height: 14px; }
}