/* Share buttons (views/templates/_common/share-buttons.inc). Framework-agnostic: loaded by
   Website Editor property sites and by the legacy themes, so nothing here leans on Bootstrap. */
.cf-share {
    display: flex;
    flex-wrap: nowrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
    container-type: inline-size;
}
.cf-share > li {
    flex: 1 1 0;
    min-width: 0;
    margin: 0;
    padding: 0;
}
.cf-share > li[hidden] {
    display: none;
}
.cf-share-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    height: 40px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 3px;
    background-color: var(--cf-share-bg, #6c757d);
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: .02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: filter .15s ease-in-out;
}
.cf-share-btn:hover,
.cf-share-btn:focus {
    color: #fff;
    text-decoration: none;
    filter: brightness(1.12);
}
.cf-share-btn:focus-visible {
    outline: 2px solid var(--cf-share-bg, #6c757d);
    outline-offset: 2px;
}
.cf-share-btn svg {
    flex: none;
    width: 16px;
    height: 16px;
    fill: currentColor;
}
.cf-share-facebook  { --cf-share-bg: #1877f2; }
.cf-share-x         { --cf-share-bg: #000; }
.cf-share-pinterest { --cf-share-bg: #e60023; }
.cf-share-linkedin  { --cf-share-bg: #0a66c2; }
.cf-share-reddit    { --cf-share-bg: #ff4500; }
.cf-share-copy,
.cf-share-native    { --cf-share-bg: #5a6268; }
.cf-share-copy.cf-share-copied { --cf-share-bg: #198754; }

/* Icon-only when the row is too narrow for labels. */
@container (max-width: 520px) {
    .cf-share-label { display: none; }
}
@supports not (container-type: inline-size) {
    @media (max-width: 575px) {
        .cf-share-label { display: none; }
    }
}