/* ─────────────────────────────────────────────
   Post Likes & LinkedIn Share — Styles
   All rules are scoped under .pll-buttons so
   they cannot bleed into the theme, and every
   element carries explicit resets so the theme
   cannot bleed into them.
   ───────────────────────────────────────────── */

/* ── Wrapper ── */
.pll-buttons {
    all: revert;           /* lift any inherited resets from aggressive theme normalises */
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    margin: 12px 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: none !important;
    border: none !important;
    box-shadow: none !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    font-size: 14px !important;
    line-height: 1 !important;
    color: inherit !important;
    box-sizing: border-box !important;
}

.pll-buttons *,
.pll-buttons *::before,
.pll-buttons *::after {
    box-sizing: border-box !important;
    /* Prevent themes setting unexpected margins/padding on child elements */
    margin: 0 !important;
    padding: 0 !important;
}

/* ══════════════════════════════════════════════
   LIKE BUTTON — icon pill + detached count badge
   ══════════════════════════════════════════════ */

.pll-buttons .pll-like-wrapper {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Icon pill — the clickable thumb */
.pll-buttons .pll-like-btn {
    /* Hard reset — themes often restyle <button> heavily */
    all: unset !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;

    background-color: #e9e9e9 !important;
    border: none !important;
    border-radius: 4px 0 0 4px !important;
    outline: none !important;
    box-shadow: none !important;

    cursor: pointer !important;
    line-height: 1 !important;
    position: relative !important;
    transition: background-color 0.15s ease !important;

    /* Prevent theme link/anchor colour rules */
    color: #555 !important;
    text-decoration: none !important;
}

.pll-buttons .pll-like-btn:hover:not(:disabled) {
    background-color: #dcdcdc !important;
}

.pll-buttons .pll-like-btn:focus-visible {
    outline: 2px solid #0a66c2 !important;
    outline-offset: 2px !important;
}

.pll-buttons .pll-like-btn:disabled {
    cursor: wait !important;
    opacity: 0.7 !important;
}

/* Blue thumb when liked */
.pll-buttons .pll-like-btn.pll-liked {
    background-color: #e8f0fb !important;
}

.pll-buttons .pll-like-btn.pll-liked .pll-thumb-icon {
    color: #0a66c2 !important;
    fill: #0a66c2 !important;
    transform: scale(1.15) !important;
}

/* Thumb SVG — reset any theme svg rules */
.pll-buttons .pll-thumb-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    fill: currentColor !important;
    color: #555 !important;
    flex-shrink: 0 !important;
    transition: transform 0.15s ease, fill 0.15s ease, color 0.15s ease !important;
    /* Themes sometimes set max-width: 100% on all images/svg */
    max-width: none !important;
    max-height: none !important;
    vertical-align: middle !important;
}

/* Count badge — detached right side */
.pll-buttons .pll-like-count-badge {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 44px !important;
    min-width: 44px !important;
    padding: 0 10px 0 10px !important;
    margin: 0 !important;

    background-color: #fff !important;
    border: 2px solid #e9e9e9 !important;
    border-left: none !important;
    border-radius: 0 4px 4px 0 !important;
    box-shadow: none !important;

    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
}

.pll-buttons .pll-like-count {
    display: inline !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #333 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1 !important;
}

/* ══════════════════════════════════════════════
   LINKEDIN BUTTON — "in" box + Share label
   ══════════════════════════════════════════════ */

.pll-buttons .pll-linkedin-btn {
    /* Hard reset — themes often restyle <a> with colour, underline, padding */
    all: unset !important;
    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;

    background-color: #0a66c2 !important;
    border-radius: 4px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: hidden !important;

    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    white-space: nowrap !important;

    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

.pll-buttons .pll-linkedin-btn:hover,
.pll-buttons .pll-linkedin-btn:visited {
    background-color: #004182 !important;
    color: #fff !important;
    text-decoration: none !important;
}

.pll-buttons .pll-linkedin-btn:focus-visible {
    outline: 2px solid #0a66c2 !important;
    outline-offset: 2px !important;
}

/* "in" logo box — slightly darker left panel */
.pll-buttons .pll-li-logo-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 46px !important;
    height: 44px !important;
    min-width: 46px !important;
    padding: 0 !important;
    margin: 0 !important;
    background-color: #004ea3 !important;
    border: none !important;
    flex-shrink: 0 !important;
}

/* LinkedIn SVG — prevent theme max-width / filter rules */
.pll-buttons .pll-li-icon {
    display: block !important;
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    max-width: none !important;
    max-height: none !important;
    fill: #fff !important;
    color: #fff !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    /* Some themes add opacity or filter to svgs */
    opacity: 1 !important;
    filter: none !important;
}

/* "Share" text label */
.pll-buttons .pll-li-label {
    display: inline !important;
    padding: 0 18px 0 12px !important;
    margin: 0 !important;
    letter-spacing: 0.01em !important;
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    background: none !important;
    border: none !important;
}