/*
 * ZP FACEBOOK CARD
 *
 * Nincs Facebook iframe.
 * Nincs Facebook SDK.
 * Nincs harmadik fél kérés oldalbetöltéskor.
 */

.zp-facebook-card {
    --zp-fb-blue: #1877f2;
    --zp-fb-text: #262626;
    --zp-fb-muted: #6b7280;
    --zp-fb-border: rgba(15, 23, 42, .09);

    min-width: 0;
    width: 100%;
}

.zp-facebook-card__title {
    position: relative;

    margin: 0 0 14px;
    padding: 0 0 11px;

    color: #171717;

    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}

.zp-facebook-card__title::after {
    position: absolute;

    bottom: 0;
    left: 0;

    width: 36px;
    height: 2px;

    border-radius: 999px;

    background: #f5a800;

    content: '';
}

.zp-facebook-card__body {
    display: flex;
    align-items: flex-start;

    gap: 12px;

    min-width: 0;

    padding: 14px;

    border:
        1px solid
        var(--zp-fb-border);

    border-radius: 10px;

    background: #fff;
}

.zp-facebook-card__brand {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    width: 38px;
    height: 38px;

    border-radius: 50%;

    background:
        var(--zp-fb-blue);

    color: #fff;

    font-family:
        Arial,
        sans-serif;

    font-size: 25px;
    font-weight: 700;
    line-height: 1;
}

.zp-facebook-card__content {
    flex: 1 1 auto;

    min-width: 0;
}

.zp-facebook-card__page {
    display: block;

    margin: 1px 0 5px;

    color:
        var(--zp-fb-text);

    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
}

.zp-facebook-card__description {
    margin: 0 0 11px;

    color:
        var(--zp-fb-muted);

    font-size: 12.5px;
    line-height: 1.5;
}

.zp-facebook-card__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 36px;

    padding:
        7px
        12px;

    border-radius: 6px;

    background:
        var(--zp-fb-blue);

    color: #fff !important;

    font-size: 12.5px;
    font-weight: 700;
    line-height: 1.2;

    text-decoration: none !important;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.zp-facebook-card__button:hover {
    opacity: .92;

    transform:
        translateY(-1px);
}

.zp-facebook-card__button-icon {
    font-family:
        Arial,
        sans-serif;

    font-size: 17px;
    font-weight: 700;
    line-height: 1;
}

.zp-facebook-card__privacy {
    margin: 8px 0 0;

    color: #8a8a8a;

    font-size: 10.5px;
    line-height: 1.4;
}

@media (max-width: 767.98px) {
    .zp-facebook-card__body {
        padding: 12px;
    }

    .zp-facebook-card__button {
        width: 100%;
    }
}


/*
 * ==========================================================
 * ZP FACEBOOK SERVER-SIDE FEED
 * ==========================================================
 */

.zp-facebook-feed {
    min-width: 0;
}

.zp-facebook-feed__header {
    display: flex;
    align-items: center;

    gap: 10px;

    margin-bottom: 12px;
}

.zp-facebook-feed__header strong {
    display: block;

    color: #222;

    font-size: 13.5px;
    line-height: 1.3;
}

.zp-facebook-feed__meta {
    margin-top: 2px;

    color: #858585;

    font-size: 10.5px;
    line-height: 1.3;
}

.zp-facebook-feed__posts {
    display: grid;

    gap: 10px;

    margin-bottom: 12px;
}

.zp-facebook-feed__post {
    overflow: hidden;

    border:
        1px solid
        rgba(15, 23, 42, .08);

    border-radius: 8px;

    background: #fff;
}

.zp-facebook-feed__image {
    display: block;

    overflow: hidden;

    aspect-ratio: 16 / 9;

    background: #f5f5f5;
}

.zp-facebook-feed__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.zp-facebook-feed__message {
    margin: 0;

    padding:
        10px
        10px
        7px;

    color: #525252;

    font-size: 12px;
    line-height: 1.45;
}

.zp-facebook-feed__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    padding:
        0
        10px
        9px;

    color: #8a8a8a;

    font-size: 10.5px;
}

.zp-facebook-feed__footer a {
    color: #1877f2;

    font-weight: 600;

    text-decoration: none;
}

.zp-facebook-card__button--consent {
    border: 0;

    cursor: pointer;
}