/* Promoter Share Button — reader-facing share widget (v3.6.4) */

/*
 * v3.6.4:
 * - Sticky mobile bar and sticky desktop bar now also show one shared
 *   running total (rounded k/m/b) instead of a count under each icon —
 *   same total shown in the inline block, one `.promoter-sb-sticky__total`
 *   segment per bar (left-most on mobile, top-most on the desktop column).
 *
 * v3.6.3:
 * - Inline (before/after content) block now shows one running total
 *   share count (rounded k/m/b) to the left of the buttons, in the
 *   same row, instead of a count under each individual button.
 * - Inline buttons never wrap to a new line and stretch (flex: 1 1 0)
 *   to fill the full width of the container.
 *
 * v3.6.2:
 * - Inline (before/after content) buttons are flush by design too:
 *   no gap, no margin, no border-radius, buttons sit edge-to-edge.
 * - Sticky mobile bar fix: the markup for the sticky bars has no
 *   `.promoter-sb-row` wrapper (that wrapper only exists inside the
 *   inline block), so rules that targeted
 *   `.promoter-sb-sticky--mobile .promoter-sb-row` never matched
 *   anything, and the mobile media query only switched the bar to
 *   `display: block`, not `flex` — so the buttons never became equal
 *   flex-1 segments filling the bar. Flex layout is now applied
 *   directly to `.promoter-sb-sticky--mobile` itself.
 */

.promoter-sb-inline,
.promoter-sb-sticky--mobile,
.promoter-sb-sticky--desktop,
.promoter-sb-row,
.promoter-sb-btn {
    box-sizing: border-box !important;
}

/* ── Shared button look ── */
.promoter-sb-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.promoter-sb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin: 0 4px 4px 0 !important; /* fallback spacing if `gap` is reset by a theme */
    border: 0 !important;
    cursor: pointer;
    text-decoration: none;
    font-family: inherit;
    background: var(--sb-color, #2563EB) !important;
    color: #fff !important;
    transition: filter .15s ease, transform .15s ease;
}
.promoter-sb-btn:last-child { margin-right: 0 !important; }
.promoter-sb-btn:hover { filter: brightness(1.08); color: #fff; }
.promoter-sb-btn:active { transform: scale(0.96); }
.promoter-sb-btn__icon { display: flex !important; width: 18px; height: 18px; }
.promoter-sb-btn__icon svg { width: 100%; height: 100%; }
.promoter-sb-btn__count {
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* ── Inline block (before/after content) ── */
.promoter-sb-inline {
    margin: 24px 0 !important;
    padding: 16px !important;
    border-radius: 12px !important;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
}
.promoter-sb-inline__label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #64748b;
    margin-bottom: 10px !important;
}
.promoter-sb-inline .promoter-sb-row {
    gap: 0 !important;
    flex-wrap: nowrap !important;
}
.promoter-sb-inline__total {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    box-sizing: border-box !important;
    height: 42px !important;
    padding: 0 12px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #e2e8f0;
    color: #334155;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}
.promoter-sb-inline .promoter-sb-btn {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 42px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
}

/* Belt-and-braces: reassert on small screens specifically, since that's
   exactly where the theme conflict showed up. */
@media (max-width: 782px) {
    .promoter-sb-inline .promoter-sb-row { gap: 0 !important; flex-wrap: nowrap !important; }
    .promoter-sb-inline .promoter-sb-btn {
        border-radius: 0 !important;
        margin: 0 !important;
    }
}

/* ── Sticky bar — mobile: fixed full-width bottom toolbar (flush by design) ── */
.promoter-sb-sticky--mobile {
    display: none;
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 99980;
    background: #0f172a;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    gap: 0 !important;
}
.promoter-sb-sticky--mobile .promoter-sb-btn {
    flex: 1 1 0 !important;
    height: 56px !important;
    border-radius: 0 !important;
    margin: 0 !important;
    flex-direction: column !important;
    padding: 4px 0 !important;
}
.promoter-sb-sticky--mobile .promoter-sb-btn__icon { width: 20px; height: 20px; }
.promoter-sb-sticky--mobile .promoter-sb-sticky__total {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 56px !important;
    padding: 0 14px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

@media (max-width: 782px) {
    /* the container itself is the flex parent here — there is no
       `.promoter-sb-row` wrapper inside the sticky bars — so this
       must switch to `flex`, not `block`, or the buttons never
       stretch into equal full-width segments. */
    .promoter-sb-sticky--mobile { display: flex !important; }
    /* leave room so the fixed bar never covers footer content */
    body { padding-bottom: 56px; }
}

/* ── Sticky bar — desktop: floating vertical side bar ── */
.promoter-sb-sticky--desktop {
    display: none;
    position: fixed !important;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99980;
    flex-direction: column;
    gap: 0 !important;
    box-shadow: 0 6px 20px rgba(0,0,0,.12);
    border-radius: 10px;
    overflow: hidden;
}
.promoter-sb-sticky--desktop .promoter-sb-btn {
    width: 52px !important;
    height: 52px !important;
    margin: 0 !important;
    flex-direction: column !important;
    border-radius: 0 !important;
}
.promoter-sb-sticky--desktop .promoter-sb-sticky__total {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 52px !important;
    height: 36px !important;
    padding: 0 4px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background: #1e293b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.promoter-sb-sticky--desktop.promoter-sb-sticky--left  { left: 0 !important; }
.promoter-sb-sticky--desktop.promoter-sb-sticky--right { right: 0 !important; }

@media (min-width: 783px) {
    .promoter-sb-sticky--desktop { display: flex !important; }
}

/* Copy-link "copied" feedback state */
.promoter-sb-btn--copy.promoter-sb-btn--copied {
    background: #16a34a !important;
}