/**
 * [mipb_share] — Social sharing bar for articles.
 *
 * Matches the hover/transition style used in the polyphenol & antioxidant
 * comparison tools (.mat-social-btn) so brand feel is consistent site-wide.
 */

/* ── Share bar layout ── */
.mipb-share-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin: 18px 0 22px;
}

.mipb-share-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #5c6b8a;
    white-space: nowrap;
}

/* ── Social icon buttons (circle) ── */
.mipb-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid #c5cae9;
    background: #fff;
    cursor: pointer;
    -webkit-transition: all 0.18s;
    transition: all 0.18s;
    text-decoration: none;
    flex-shrink: 0;
}

.mipb-social-btn svg {
    width: 18px;
    height: 18px;
    display: block;
}

.mipb-social-btn svg path {
    -webkit-transition: fill 0.18s;
    transition: fill 0.18s;
}

/* Hover lift + shadow (shared) */
.mipb-social-btn:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.14);
}

/* ── Per-network colours ── */

/* Pinterest */
.mipb-social-btn.pinterest       { border-color: #E60023; }
.mipb-social-btn.pinterest svg path { fill: #E60023; }
.mipb-social-btn.pinterest:hover { background: #E60023; }
.mipb-social-btn.pinterest:hover svg path { fill: #fff; }

/* Facebook */
.mipb-social-btn.facebook        { border-color: #1877F2; }
.mipb-social-btn.facebook svg path { fill: #1877F2; }
.mipb-social-btn.facebook:hover  { background: #1877F2; }
.mipb-social-btn.facebook:hover svg path { fill: #fff; }

/* WhatsApp */
.mipb-social-btn.whatsapp        { border-color: #25D366; }
.mipb-social-btn.whatsapp svg path { fill: #25D366; }
.mipb-social-btn.whatsapp:hover  { background: #25D366; }
.mipb-social-btn.whatsapp:hover svg path { fill: #fff; }

/* X / Twitter */
.mipb-social-btn.twitter         { border-color: #000; }
.mipb-social-btn.twitter svg path { fill: #000; }
.mipb-social-btn.twitter:hover   { background: #000; }
.mipb-social-btn.twitter:hover svg path { fill: #fff; }

/* ── Copy-link button ── */
.mipb-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: 1.5px solid #c5cae9;
    cursor: pointer;
    background: #f0f0fa;
    color: #5c6b8a;
    -webkit-transition: all 0.15s;
    transition: all 0.15s;
    white-space: nowrap;
}

.mipb-copy-btn:hover {
    background: #e8eaf6;
    color: #1a1a2e;
    border-color: #283593;
}

.mipb-copy-btn.copied {
    background: #283593;
    color: #fff;
    border-color: #283593;
}

.mipb-copy-btn svg {
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════
   [mipb_share_article] — Full-width article-level share strip.
   Distinct from the image-level bar: tinted background, pill buttons
   with visible labels, warm CTA copy.
   ═══════════════════════════════════════════════════════════════════════ */

.mipb-article-share {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    padding: 20px 24px;
    margin: 28px 0;
    background: #f8f9fc;
    border: 1.5px solid #c5cae9;
    border-radius: 12px;
}

.mipb-article-share-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 600;
    color: #283593;
    letter-spacing: 0.01em;
}

.mipb-leaf-icon {
    width: 18px;
    height: 18px;
    color: #283593;
    flex-shrink: 0;
}

.mipb-article-share-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Pill-shaped labelled buttons ── */
.mipb-article-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 20px;
    border: 1.5px solid #c5cae9;
    background: #fff;
    cursor: pointer;
    text-decoration: none;
    -webkit-transition: all 0.18s;
    transition: all 0.18s;
    flex-shrink: 0;
}

.mipb-article-btn svg {
    width: 16px;
    height: 16px;
    display: block;
    flex-shrink: 0;
}

.mipb-article-btn svg path {
    -webkit-transition: fill 0.18s;
    transition: fill 0.18s;
}

.mipb-btn-name {
    font-size: 13px;
    font-weight: 600;
    -webkit-transition: color 0.18s;
    transition: color 0.18s;
}

/* Hover lift + shadow (shared) */
.mipb-article-btn:hover {
    -webkit-transform: translateY(-2px);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* ── Per-network pill colours ── */
.mipb-article-btn.pinterest       { border-color: #E60023; }
.mipb-article-btn.pinterest svg path { fill: #E60023; }
.mipb-article-btn.pinterest .mipb-btn-name { color: #E60023; }
.mipb-article-btn.pinterest:hover { background: #E60023; border-color: #E60023; }
.mipb-article-btn.pinterest:hover svg path { fill: #fff; }
.mipb-article-btn.pinterest:hover .mipb-btn-name { color: #fff; }

.mipb-article-btn.facebook        { border-color: #1877F2; }
.mipb-article-btn.facebook svg path { fill: #1877F2; }
.mipb-article-btn.facebook .mipb-btn-name { color: #1877F2; }
.mipb-article-btn.facebook:hover  { background: #1877F2; border-color: #1877F2; }
.mipb-article-btn.facebook:hover svg path { fill: #fff; }
.mipb-article-btn.facebook:hover .mipb-btn-name { color: #fff; }

.mipb-article-btn.whatsapp        { border-color: #25D366; }
.mipb-article-btn.whatsapp svg path { fill: #25D366; }
.mipb-article-btn.whatsapp .mipb-btn-name { color: #128C7E; }
.mipb-article-btn.whatsapp:hover  { background: #25D366; border-color: #25D366; }
.mipb-article-btn.whatsapp:hover svg path { fill: #fff; }
.mipb-article-btn.whatsapp:hover .mipb-btn-name { color: #fff; }

.mipb-article-btn.twitter         { border-color: #000; }
.mipb-article-btn.twitter svg path { fill: #000; }
.mipb-article-btn.twitter .mipb-btn-name { color: #000; }
.mipb-article-btn.twitter:hover   { background: #000; border-color: #000; }
.mipb-article-btn.twitter:hover svg path { fill: #fff; }
.mipb-article-btn.twitter:hover .mipb-btn-name { color: #fff; }

/* Copy-link inside article bar (reuses existing .mipb-copy-btn) */
.mipb-article-share .mipb-copy-btn {
    border-radius: 20px;
    border-color: #c5cae9;
}

/* ── Responsive ── */
@media (max-width: 480px) {
    /* Image-level share bar */
    .mipb-share-bar {
        gap: 8px;
    }
    .mipb-social-btn {
        width: 32px;
        height: 32px;
    }
    .mipb-social-btn svg {
        width: 16px;
        height: 16px;
    }
    .mipb-copy-btn {
        padding: 6px 10px;
        font-size: 11px;
    }

    /* Article-level share strip */
    .mipb-article-share {
        padding: 16px;
        margin: 20px 0;
    }
    .mipb-article-share-label {
        font-size: 13px;
    }
    .mipb-article-share-buttons {
        gap: 8px;
    }
    .mipb-article-btn {
        padding: 7px 12px;
    }
    .mipb-btn-name {
        display: none;
    }
    .mipb-article-btn {
        border-radius: 50%;
        width: 36px;
        height: 36px;
        padding: 0;
        justify-content: center;
    }
}