/* =====================================================
   Poosting Share Buttons – Estilos
   ===================================================== */

:root {
    --psb-gap:        8px;
    --psb-radius-pill: 999px;
    --psb-radius-sq:   8px;
    --psb-font:       -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --psb-transition: .18s ease;

    /* Cores das redes */
    --psb-c-whatsapp:  #25D366;
    --psb-c-facebook:  #1877F2;
    --psb-c-twitter:   #000000;
    --psb-c-instagram: #E1306C;
    --psb-c-linkedin:  #0A66C2;
    --psb-c-telegram:  #229ED9;
    --psb-c-pinterest: #E60023;
    --psb-c-reddit:    #FF4500;
    --psb-c-threads:   #000000;
    --psb-c-email:     #6B7280;
    --psb-c-copy:      #374151;
}

/* Wrapper */
.psb-wrap {
    margin: 1.5em 0;
    font-family: var(--psb-font);
    line-height: 1;
}

.psb-headline {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #6B7280;
    margin-bottom: .6em;
}

/* Grade de botões */
.psb-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: var(--psb-gap);
    align-items: center;
}

/* Alinhamento */
.psb-align-center .psb-buttons { justify-content: center; }
.psb-align-right  .psb-buttons { justify-content: flex-end; }
.psb-align-left   .psb-buttons { justify-content: flex-start; }

/* ── Botão base ────────────────────────────────────── */
.psb-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    text-decoration: none !important;
    font-weight: 600;
    cursor: pointer;
    border: none;
    outline: none;
    position: relative;
    white-space: nowrap;
    transition:
        transform var(--psb-transition),
        filter  var(--psb-transition),
        box-shadow var(--psb-transition);
    -webkit-font-smoothing: antialiased;
}

.psb-btn:hover  { filter: brightness(1.12); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,.18); }
.psb-btn:active { transform: translateY(0);  box-shadow: none; }
.psb-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.psb-btn svg {
    flex-shrink: 0;
}

.psb-label {
    font-family: var(--psb-font);
}

/* ── Tamanhos ──────────────────────────────────────── */
.psb-size-sm .psb-btn { font-size: .72rem; padding: 5px 10px; }
.psb-size-sm .psb-btn svg { width: 14px; height: 14px; }

.psb-size-md .psb-btn { font-size: .82rem; padding: 7px 14px; }
.psb-size-md .psb-btn svg { width: 16px; height: 16px; }

.psb-size-lg .psb-btn { font-size: .95rem; padding: 10px 18px; }
.psb-size-lg .psb-btn svg { width: 20px; height: 20px; }

/* ── Estilo PILL (padrão) ──────────────────────────── */
.psb-style-pill .psb-btn {
    border-radius: var(--psb-radius-pill);
    color: #fff;
}

/* ── Estilo SQUARE ─────────────────────────────────── */
.psb-style-square .psb-btn {
    border-radius: var(--psb-radius-sq);
    color: #fff;
}

/* ── Estilo ICON (só ícone, circular) ─────────────── */
.psb-style-icon .psb-btn {
    border-radius: 50%;
    color: #fff;
    padding: 0 !important;
    justify-content: center;
}
.psb-size-sm.psb-style-icon .psb-btn { width: 32px; height: 32px; }
.psb-size-md.psb-style-icon .psb-btn { width: 40px; height: 40px; }
.psb-size-lg.psb-style-icon .psb-btn { width: 50px; height: 50px; }

/* ── Cores por rede ────────────────────────────────── */
.psb-style-pill   .psb-whatsapp,
.psb-style-square .psb-whatsapp,
.psb-style-icon   .psb-whatsapp  { background: var(--psb-c-whatsapp); }

.psb-style-pill   .psb-facebook,
.psb-style-square .psb-facebook,
.psb-style-icon   .psb-facebook  { background: var(--psb-c-facebook); }

.psb-style-pill   .psb-twitter,
.psb-style-square .psb-twitter,
.psb-style-icon   .psb-twitter   { background: var(--psb-c-twitter); }

.psb-style-pill   .psb-instagram,
.psb-style-square .psb-instagram,
.psb-style-icon   .psb-instagram {
    background: linear-gradient(45deg, #f09433, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888);
}

.psb-style-pill   .psb-linkedin,
.psb-style-square .psb-linkedin,
.psb-style-icon   .psb-linkedin  { background: var(--psb-c-linkedin); }

.psb-style-pill   .psb-telegram,
.psb-style-square .psb-telegram,
.psb-style-icon   .psb-telegram  { background: var(--psb-c-telegram); }

.psb-style-pill   .psb-pinterest,
.psb-style-square .psb-pinterest,
.psb-style-icon   .psb-pinterest { background: var(--psb-c-pinterest); }

.psb-style-pill   .psb-reddit,
.psb-style-square .psb-reddit,
.psb-style-icon   .psb-reddit    { background: var(--psb-c-reddit); }

.psb-style-pill   .psb-threads,
.psb-style-square .psb-threads,
.psb-style-icon   .psb-threads   { background: var(--psb-c-threads); }

.psb-style-pill   .psb-email,
.psb-style-square .psb-email,
.psb-style-icon   .psb-email     { background: var(--psb-c-email); }

.psb-style-pill   .psb-copy,
.psb-style-square .psb-copy,
.psb-style-icon   .psb-copy      { background: var(--psb-c-copy); }

/* ── Dica "Copiado!" ───────────────────────────────── */
.psb-copied-tip {
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%) scale(.85);
    background: #1F2937;
    color: #fff;
    font-size: .7rem;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 4px;
    pointer-events: none;
    opacity: 0;
    white-space: nowrap;
    transition: opacity .2s, transform .2s;
}

.psb-copied-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: #1F2937;
}

.psb-btn.psb-copied .psb-copied-tip {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ── Estado copiado: pisca o botão ─────────────────── */
.psb-btn.psb-copied {
    filter: brightness(.85);
}

/* ── Responsividade ────────────────────────────────── */
@media (max-width: 480px) {
    .psb-buttons { gap: 6px; }
    .psb-size-lg .psb-btn { font-size: .82rem; padding: 7px 12px; }
}