.fdg-feed {
    --fdg-feed-accent: #E0218A;
}

/* ---------- Composer ---------- */
.fdg-feed__composer {
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 16px;
}

.fdg-feed__composer-text {
    width: 100%;
    box-sizing: border-box;
    border: none;
    resize: vertical;
    font-size: 15px;
    font-family: inherit;
    padding: 4px;
}

.fdg-feed__composer-text:focus {
    outline: none;
}

.fdg-feed__composer-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.fdg-feed__composer-preview {
    position: relative;
    width: 70px;
    height: 70px;
    border-radius: 6px;
    overflow: hidden;
    background: #eee;
}

.fdg-feed__composer-preview img,
.fdg-feed__composer-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fdg-feed__composer-preview-remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
}

.fdg-feed__composer-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    gap: 10px;
}

.fdg-feed__composer-media-btn {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    border: 1px dashed #ccc;
    padding: 8px 12px;
    border-radius: 999px;
}

.fdg-feed__composer-media-btn:hover {
    border-color: var(--fdg-feed-accent);
    color: var(--fdg-feed-accent);
}

.fdg-feed__composer-submit {
    background: var(--fdg-feed-accent);
    color: #fff;
    border: none;
    padding: 9px 20px;
    border-radius: 999px;
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
}

.fdg-feed__composer-submit:disabled {
    opacity: .5;
    cursor: default;
}

.fdg-feed__composer-error {
    color: #c0392b;
    font-size: 12px;
    margin: 8px 0 0;
}

/* ---------- Stream ---------- */
.fdg-feed__stream {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.fdg-feed__empty {
    color: #888;
    font-size: 14px;
}

.fdg-feed__post {
    border-bottom: 1px solid #eee;
    padding-bottom: 16px;
}

.fdg-feed__author {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.fdg-feed__avatar {
    border-radius: 50%;
    display: block;
}

.fdg-feed__author-info {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}

.fdg-feed__author-name {
    font-size: 14px;
}

.fdg-feed__time {
    font-size: 12px;
    color: #999;
}

.fdg-feed__time--noauthor {
    margin-bottom: 8px;
}

.fdg-feed__text {
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 10px;
    white-space: pre-wrap;
}

/* ---------- Carousel ---------- */
.fdg-feed__carousel {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #000;
}

.fdg-feed__carousel-track {
    display: flex;
    transition: transform .25s ease;
}

.fdg-feed__carousel-slide {
    flex: 0 0 100%;
    width: 100%;
}

.fdg-feed__carousel-slide img,
.fdg-feed__carousel-slide video {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
    display: block;
    background: #000;
}

.fdg-feed__carousel-prev,
.fdg-feed__carousel-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    line-height: 1;
}

.fdg-feed__carousel-prev {
    left: 10px;
}

.fdg-feed__carousel-next {
    right: 10px;
}

.fdg-feed__carousel-dots {
    position: absolute;
    bottom: 10px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 6px;
}

.fdg-feed__carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.5);
}

.fdg-feed__carousel-dot.is-active {
    background: #fff;
}

.fdg-feed__carousel-stack {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.55);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
}

/* ---------- Owner actions ---------- */
.fdg-feed__owner-actions {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.fdg-feed__edit-btn,
.fdg-feed__delete-btn {
    background: none;
    border: none;
    font-size: 12px;
    color: #888;
    cursor: pointer;
    padding: 0;
}

.fdg-feed__edit-btn:hover,
.fdg-feed__delete-btn:hover {
    color: var(--fdg-feed-accent);
}

/* ---------- Reactions ---------- */
.fdg-feed__social {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 10px;
}

.fdg-feed__reactions {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
}

.fdg-feed__react-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 999px;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.fdg-feed__react-btn:hover,
.fdg-feed__react-btn.is-active {
    background: #f5f5f5;
    color: #222;
}

.fdg-feed__react-emoji-group {
    display: inline-flex;
    align-items: center;
}

.fdg-feed__react-emoji {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 16px !important;
    line-height: 1;
}

.fdg-feed__react-emoji-group .fdg-feed__react-emoji + .fdg-feed__react-emoji {
    margin-left: 2px;
}

.fdg-feed__react-emoji img.emoji {
    width: 1em !important;
    height: 1em !important;
    min-width: 1em !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
}

.fdg-feed__react-total {
    font-size: 12px;
    color: #999;
}

.fdg-feed__react-picker {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 999px;
    padding: 6px;
    gap: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    margin-bottom: 6px;
    z-index: 5;
}

/* Must win over the plain .fdg-feed__react-picker rule above, or the
   [hidden] attribute gets silently overridden and the picker never
   actually hides. */
.fdg-feed__react-picker:not([hidden]) {
    display: flex;
}

.fdg-feed__react-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    min-width: 36px;
    min-height: 36px;
    background: none;
    border: none;
    border-radius: 50%;
    font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif !important;
    font-size: 22px !important;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    overflow: visible;
    /* Stops iOS/Android from treating a press on the emoji as a
       long-press: triggering the system "Look Up / Share / Save"
       menu and text-selection magnifier instead of registering the
       tap as a reaction. This, not the popup vs. always-visible
       question, was the actual mobile bug. */
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    user-select: none;
    touch-action: manipulation;
}

.fdg-feed__react-option.is-active {
    background: #f0f0f0;
}

/* WordPress may replace native emoji characters with img.emoji elements.
   Force those generated images to follow the reaction size instead of
   inheriting tiny image dimensions from the active theme. */
.fdg-feed__react-option img.emoji {
    display: inline-block !important;
    width: 1em !important;
    height: 1em !important;
    min-width: 1em !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    vertical-align: -0.1em !important;
}

.fdg-feed__comment-toggle {
    background: none;
    border: none;
    font-size: 13px;
    color: #666;
    cursor: pointer;
    padding: 0;
}

.fdg-feed__comment-toggle:hover {
    color: var(--fdg-feed-accent);
}

/* ---------- Comments ---------- */
.fdg-feed__comments-panel {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.fdg-feed__comments-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 10px;
}

.fdg-feed__no-comments {
    font-size: 13px;
    color: #999;
    margin: 0;
}

.fdg-feed__comment {
    display: flex;
    gap: 8px;
}

.fdg-feed__comment-avatar {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    border-radius: 50% !important;
    flex: 0 0 32px;
}

.fdg-feed__comment-body {
    background: #f7f7f7;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    flex: 1 1 auto;
}

.fdg-feed__comment-author {
    display: block;
    font-size: 12px;
}

.fdg-feed__comment-text {
    display: block;
    margin-top: 2px;
}

.fdg-feed__comment-meta {
    display: flex;
    gap: 10px;
    margin-top: 4px;
    font-size: 11px;
    color: #999;
}

.fdg-feed__reply-btn {
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0;
    font-size: 11px;
}

.fdg-feed__reply-btn:hover {
    color: var(--fdg-feed-accent);
}

.fdg-feed__comment-replies {
    margin-left: 40px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

.fdg-feed__comment-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.fdg-feed__comment-form input[type="text"],
.fdg-feed__comment-form textarea {
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
    box-sizing: border-box;
}

.fdg-feed__comment-submit {
    align-self: flex-end;
    background: var(--fdg-feed-accent);
    color: #fff;
    border: none;
    padding: 7px 16px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.fdg-feed__comment-status {
    font-size: 12px;
    color: #888;
    margin: 0;
}

.fdg-feed__gallery-link {
    display: block;
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 700;
    color: var(--fdg-feed-accent);
}

/* ---------- Gallery grid ---------- */
.fdg-feed-gallery--grid {
    display: grid;
    grid-template-columns: repeat(var(--fdg-feed-gallery-cols, 4), 1fr);
    gap: 4px;
}

.fdg-feed-gallery__tile {
    position: relative;
    display: block;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: #eee;
}

.fdg-feed-gallery__tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.fdg-feed-gallery__text-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 10px;
    font-size: 12px;
    color: #555;
    text-align: center;
    background: #f5f5f5;
    box-sizing: border-box;
}

.fdg-feed-gallery__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 22px;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.7);
}

.fdg-feed-gallery__video-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: #333;
}

.fdg-feed-gallery__stack {
    position: absolute;
    top: 8px;
    right: 8px;
    color: #fff;
    font-size: 14px;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8);
}

.fdg-feed-gallery__empty {
    color: #888;
    font-size: 14px;
}

.fdg-feed-gallery__view-all {
    display: block;
    margin-top: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fdg-feed-accent, #E0218A);
}

.fdg-feed-gallery__back {
    display: inline-block;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: 600;
    color: var(--fdg-feed-accent, #E0218A);
}

@media (max-width: 600px) {
    .fdg-feed-gallery--grid {
        --fdg-feed-gallery-cols: 3;
        gap: 2px;
    }
}


/* Front-end comment moderation (admins/moderators only) */
.fdg-feed__comment-delete {
    appearance: none;
    border: 0;
    background: transparent;
    padding: 0;
    margin: 0;
    font: inherit;
    font-size: 12px;
    color: #b32d2e;
    cursor: pointer;
}
.fdg-feed__comment-delete:hover { text-decoration: underline; }

/* ---------- Feed media grid (v1.0.6) ---------- */
.fdg-feed__media-grid {
    display: grid;
    gap: 3px;
    width: 100%;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
}
.fdg-feed__media-item { position: relative; min-width: 0; overflow: hidden; background: #000; }
.fdg-feed__media-open { display:block; width:100%; height:100%; padding:0; margin:0; border:0; background:#000; cursor:pointer; }
.fdg-feed__media-item img,
.fdg-feed__media-item video { display:block; width:100%; height:100%; object-fit:cover; background:#000; }

/* One item: preserve the photo/video naturally rather than cropping it. */
.fdg-feed__media-grid--1 { grid-template-columns: 1fr; }
.fdg-feed__media-grid--1 .fdg-feed__media-item { max-height: 560px; }
.fdg-feed__media-grid--1 .fdg-feed__media-item img,
.fdg-feed__media-grid--1 .fdg-feed__media-item video { height:auto; max-height:560px; object-fit:contain; }

/* Two items side by side. */
.fdg-feed__media-grid--2 { grid-template-columns: repeat(2, 1fr); }
.fdg-feed__media-grid--2 .fdg-feed__media-item { aspect-ratio: 1 / 1; }

/* Facebook-style three: large left image, two stacked on right. */
.fdg-feed__media-grid--3 { grid-template-columns: 1.35fr 1fr; grid-template-rows: repeat(2, minmax(0, 1fr)); height: 460px; }
.fdg-feed__media-grid--3 .fdg-feed__media-item:first-child { grid-row: 1 / 3; }

/* Four items: 2 x 2. */
.fdg-feed__media-grid--4 { grid-template-columns: repeat(2, 1fr); }
.fdg-feed__media-grid--4 .fdg-feed__media-item { aspect-ratio: 1.35 / 1; }

/* Five or more: compact three-column photo grid, with every upload visible/clickable. */
.fdg-feed__media-grid--5 { grid-template-columns: repeat(3, 1fr); }
.fdg-feed__media-grid--5 .fdg-feed__media-item { aspect-ratio: 1 / 1; }

.fdg-feed__lightbox { position:fixed; inset:0; z-index:999999; display:flex; align-items:center; justify-content:center; padding:24px; background:rgba(0,0,0,.92); }
.fdg-feed__lightbox[hidden] { display:none; }
.fdg-feed__lightbox img { display:block; max-width:95vw; max-height:92vh; width:auto; height:auto; object-fit:contain; }
.fdg-feed__lightbox-close { position:absolute; top:14px; right:18px; width:42px; height:42px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.15); color:#fff; font-size:30px; line-height:40px; cursor:pointer; }
.fdg-feed__lightbox-stage { display:flex; align-items:center; justify-content:center; max-width:95vw; max-height:92vh; }
.fdg-feed__lightbox-stage img, .fdg-feed__lightbox-stage video { display:block; max-width:95vw; max-height:92vh; width:auto; height:auto; object-fit:contain; }
.fdg-feed__lightbox-nav { position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:54px; height:54px; padding:0; border:0; border-radius:50%; background:rgba(255,255,255,.16); color:#fff; font-size:36px; line-height:54px; text-align:center; cursor:pointer; }
.fdg-feed__lightbox-nav:hover { background:rgba(255,255,255,.28); }
.fdg-feed__lightbox-prev { left:20px; }
.fdg-feed__lightbox-next { right:20px; }
@media (max-width:600px) { .fdg-feed__lightbox-nav { width:44px; height:44px; font-size:30px; line-height:44px; } .fdg-feed__lightbox-prev { left:8px; } .fdg-feed__lightbox-next { right:8px; } }

@media (max-width: 600px) {
    .fdg-feed__media-grid--3 { height: 330px; }
    .fdg-feed__media-grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* Media Library picker button uses the same visual treatment as device upload. */
.fdg-feed__composer-library-btn {
    appearance: none;
    border: 0;
    cursor: pointer;
    font: inherit;
    line-height: inherit;
}
.fdg-feed__composer-library-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    border-radius: 6px;
    background: #f1f1f1;
    color: #222;
}


/* Normal WordPress Posts shown inside the feed: compact title + featured image card. */
.fdg-feed__wp-post-card { margin: 6px 0 10px; }
.fdg-feed__wp-post-title { display:block; margin:0 0 8px; font-weight:600; color:inherit; text-decoration:none; }
.fdg-feed__wp-post-title:hover { text-decoration:underline; }
.fdg-feed__wp-post-image { display:block; width:100%; max-width:100%; height:420px; overflow:hidden; line-height:0; text-decoration:none; border-radius:10px; background:#000; }
.fdg-feed__wp-post-image img { display:block; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; object-fit:cover; border-radius:0; }


/* ---------- Composer links ---------- */
.fdg-feed__composer-link-btn,
.fdg-feed__composer-library-btn {
    font-size: 13px;
    font-weight: 600;
    color: #555;
    cursor: pointer;
    border: 1px solid #ddd;
    background: #fff;
    padding: 8px 12px;
    border-radius: 999px;
}
.fdg-feed__composer-link-btn:hover,
.fdg-feed__composer-library-btn:hover {
    border-color: var(--fdg-feed-accent);
    color: var(--fdg-feed-accent);
}
.fdg-feed__text a { color: var(--fdg-feed-accent); text-decoration: underline; overflow-wrap: anywhere; }
@media (max-width: 620px) {
    .fdg-feed__composer-actions { flex-wrap: wrap; justify-content: flex-start; }
    .fdg-feed__composer-submit { margin-left: auto; }
}

/* ---------- Cross-site collaboration ---------- */
.fdg-feed__collab-picker { margin-top:10px; }
.fdg-feed__collab-toggle { border:1px solid #ddd; background:#fff; border-radius:999px; padding:7px 12px; cursor:pointer; font-weight:600; }
.fdg-feed__collab-panel { margin-top:8px; padding:10px; border:1px solid #e5e5e5; border-radius:8px; background:#fafafa; }
.fdg-feed__collab-recents { display:flex; flex-wrap:wrap; gap:8px 14px; margin-bottom:8px; }
.fdg-feed__collab-choice { font-size:13px; }
.fdg-feed__collab-add { display:flex; gap:6px; }
.fdg-feed__collab-url { flex:1; min-width:160px; padding:7px 9px; border:1px solid #ccc; border-radius:6px; }
.fdg-feed__collab-verify,.fdg-feed__collab-accept { border:0; border-radius:6px; padding:7px 10px; cursor:pointer; font-weight:600; }
.fdg-feed__collab-status { font-size:12px; margin-top:6px; color:#555; }
.fdg-feed__collab-invites { border:1px solid #ddd; border-radius:10px; padding:12px; margin-bottom:16px; }
.fdg-feed__collab-invite { display:flex; align-items:center; gap:8px; padding-top:8px; font-size:13px; }
.fdg-feed__collab-invite span { flex:1; }
.fdg-feed__collab-decline { border:1px solid #ccc; background:#fff; border-radius:6px; padding:6px 9px; cursor:pointer; }
.fdg-feed__collab-name { color:inherit; text-decoration:none; }
.fdg-feed__collab-plus { font-weight:400; color:#888; }
.fdg-feed__collab-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;vertical-align:middle;margin-left:5px;border:2px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.fdg-feed__collab-manage{margin:8px 0;display:grid;gap:6px}.fdg-feed__collab-manage-row{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13px}.fdg-feed__collab-manage-row button{border:1px solid #ddd;background:#fff;border-radius:999px;padding:5px 9px;cursor:pointer}.fdg-feed__collab-state{font-weight:600}

/* Collaboration avatar stack */
.fdg-feed__avatar-stack{display:flex;align-items:center;flex:0 0 auto}
.fdg-feed__avatar-stack .fdg-feed__avatar{width:40px!important;height:40px!important;object-fit:cover;flex:0 0 40px}
.fdg-feed__avatar-stack .fdg-feed__collab-avatar{margin-left:-10px;border:2px solid #fff;box-sizing:border-box;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.08)}