.hl-social-share {
    box-sizing: border-box;
    width: 100%;
    max-width: 780px;
    margin: 2.25rem 0 0;
    padding: 1.45rem;
    border: 1px solid #e2e8ef;
    border-radius: 20px;
    background: #ffffff;
    box-shadow: 0 14px 36px rgba(29, 45, 64, 0.075);
    color: #172033;
}

.hl-social-share * {
    box-sizing: border-box;
}

.hl-social-share--preview {
    outline: 2px dashed #d61747;
    outline-offset: 5px;
}

.hl-social-share__preview-badge {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    margin: 0 0 0.9rem;
    padding: 0.25rem 0.62rem;
    border-radius: 999px;
    background: #172033;
    color: #ffffff;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hl-social-share__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
}

.hl-social-share__copy {
    min-width: 0;
}

.hl-social-share__eyebrow {
    margin: 0 0 0.3rem !important;
    color: #d61747;
    font-size: 0.71rem !important;
    font-weight: 800;
    letter-spacing: 0.085em;
    line-height: 1.35 !important;
}

.hl-social-share__title {
    margin: 0 !important;
    color: #172033;
    font-size: clamp(1.2rem, 2vw, 1.46rem) !important;
    font-weight: 760;
    line-height: 1.18 !important;
}

.hl-social-share__subtitle {
    margin: 0.4rem 0 0 !important;
    color: #637084;
    font-size: 0.93rem !important;
    line-height: 1.48 !important;
}

.hl-social-share__count {
    flex: 0 0 auto;
    min-width: 118px;
    padding: 0.72rem 0.82rem;
    border: 1px solid #e0e6ed;
    border-radius: 14px;
    background: #fbfcfd;
    text-align: center;
}

.hl-social-share__count strong {
    display: block;
    color: #172033;
    font-size: 1.34rem;
    font-weight: 800;
    line-height: 1;
}

.hl-social-share__count span {
    display: block;
    margin-top: 0.3rem;
    color: #6c7788;
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.015em;
}

.hl-social-share__buttons {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.68rem;
    margin-top: 1.1rem;
}

/* Shared neutral button shell. Brand personality comes from the icon tile,
 * border and hover tint, not from full saturated button fills. */
.hl-social-share .hl-social-share__button,
.hl-social-share button.hl-social-share__button {
    appearance: none !important;
    -webkit-appearance: none !important;
    display: inline-flex !important;
    min-width: 0 !important;
    min-height: 56px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.64rem !important;
    margin: 0 !important;
    padding: 0.72rem 0.72rem !important;
    border: 1px solid #dfe5ec !important;
    border-radius: 14px !important;
    background: #ffffff !important;
    box-shadow: 0 1px 2px rgba(29, 45, 64, 0.03), 0 5px 16px rgba(29, 45, 64, 0.045) !important;
    color: #243146 !important;
    font-family: inherit !important;
    font-size: 0.82rem !important;
    font-weight: 760 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    text-align: left !important;
    text-decoration: none !important;
    text-transform: none !important;
    cursor: pointer !important;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background-color 150ms ease !important;
    -webkit-tap-highlight-color: transparent;
}

.hl-social-share .hl-social-share__button:hover,
.hl-social-share button.hl-social-share__button:hover {
    box-shadow: 0 2px 4px rgba(29, 45, 64, 0.04), 0 9px 22px rgba(29, 45, 64, 0.075) !important;
    transform: translateY(-1px);
    color: #172033 !important;
}

.hl-social-share .hl-social-share__button:focus-visible,
.hl-social-share button.hl-social-share__button:focus-visible {
    outline: 3px solid rgba(214, 23, 71, 0.18) !important;
    outline-offset: 2px !important;
}

.hl-social-share__glyph {
    display: inline-flex;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    color: #ffffff;
    transition: transform 150ms ease, box-shadow 150ms ease;
}

.hl-social-share__glyph svg {
    display: block;
    width: 17px;
    height: 17px;
    fill: currentColor;
}

.hl-social-share__button:hover .hl-social-share__glyph {
    transform: scale(1.045);
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.12);
}

.hl-social-share__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Facebook */
.hl-social-share__glyph--facebook {
    background: #1877F2;
}
.hl-social-share__button[data-hl-social-network="facebook"]:hover {
    border-color: #9fc7fb !important;
    background: #f5f9ff !important;
}
.hl-social-share__button[data-hl-social-network="facebook"]:focus-visible {
    border-color: #1877F2 !important;
}

/* WhatsApp */
.hl-social-share__glyph--whatsapp {
    background: #25D366;
}
.hl-social-share__button[data-hl-social-network="whatsapp"]:hover {
    border-color: #99e8b2 !important;
    background: #f4fcf7 !important;
}
.hl-social-share__button[data-hl-social-network="whatsapp"]:focus-visible {
    border-color: #25D366 !important;
}

/* X */
.hl-social-share__glyph--x {
    background: #111111;
}
.hl-social-share__button[data-hl-social-network="x"]:hover {
    border-color: #a9adb3 !important;
    background: #f7f7f8 !important;
}
.hl-social-share__button[data-hl-social-network="x"]:focus-visible {
    border-color: #111111 !important;
}

/* Email: intentionally a deeper green than WhatsApp. */
.hl-social-share__glyph--email {
    background: #16A34A;
}
.hl-social-share__button[data-hl-social-network="email"]:hover {
    border-color: #8fd1a7 !important;
    background: #f5fbf7 !important;
}
.hl-social-share__button[data-hl-social-network="email"]:focus-visible {
    border-color: #16A34A !important;
}

/* Copy: warm utility color, visually distinct from social networks. */
.hl-social-share__glyph--copy {
    background: #F59E0B;
}
.hl-social-share__button[data-hl-social-network="copy"]:hover {
    border-color: #f5c96f !important;
    background: #fffaf0 !important;
}
.hl-social-share__button[data-hl-social-network="copy"]:focus-visible {
    border-color: #F59E0B !important;
}

.hl-social-share__button--copy {
    appearance: none !important;
}

@media (max-width: 720px) {
    .hl-social-share {
        margin-top: 1.8rem;
        padding: 1.08rem;
        border-radius: 17px;
    }

    .hl-social-share__header {
        align-items: flex-start;
    }

    .hl-social-share__count {
        min-width: 104px;
        padding: 0.62rem 0.68rem;
    }

    .hl-social-share__buttons {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .hl-social-share__button:last-child {
        grid-column: 1 / -1;
    }
}

@media (max-width: 430px) {
    .hl-social-share__header {
        display: block;
    }

    .hl-social-share__count {
        display: inline-block;
        min-width: 0;
        margin-top: 0.8rem;
        padding: 0.58rem 0.72rem;
        text-align: left;
    }

    .hl-social-share__count strong,
    .hl-social-share__count span {
        display: inline;
    }

    .hl-social-share__count span {
        margin-left: 0.25rem;
    }

    .hl-social-share__buttons {
        gap: 0.55rem;
    }

    .hl-social-share .hl-social-share__button,
    .hl-social-share button.hl-social-share__button {
        min-height: 54px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hl-social-share .hl-social-share__button,
    .hl-social-share button.hl-social-share__button,
    .hl-social-share__glyph {
        transition: none !important;
    }

    .hl-social-share .hl-social-share__button:hover,
    .hl-social-share button.hl-social-share__button:hover {
        transform: none;
    }
}