/* ------------------------------------------------------------------
   GGF Feed Core UI (Renderer-scoped)
   Keeps overlay styling deterministic across pages/templates.
------------------------------------------------------------------- */

/* Anchor overlays to the card */
.ggf-card { position: relative; }

/* Meta container bottom-left */
.ggf-meta{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 10;
  pointer-events: none;
}

/* Label pill */
.ggf-meta-who{
  display: inline-block;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;
  color: #fff;
  background: rgba(0,0,0,0.40);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  max-width: calc(100vw - 28px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

/* ------------------------------------------------------------------
   Overlay layout: one UI layer per card, pinned to corners
------------------------------------------------------------------- */

/* ensure card anchors */
.ggf-card { position: relative; }

/* UI layer should span the card */
.ggf-card .ggf-ui,
.ggf-card .ggf-card-ui,
.ggf-card .ggf-overlay-ui {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none; /* allow video scroll/tap; specific buttons opt-in */
}

/* like button bottom-right */
.ggf-card .ggf-like,
.ggf-card .ggf-like-btn,
.ggf-card button.ggf-like,
.ggf-card button.ggf-like-btn {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 21;
  pointer-events: auto; /* clickable */
}

/* meta bottom-left */
.ggf-card .ggf-meta {
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 21;
  pointer-events: none;
}

/* Hide legacy/duplicate hearts inside our feed cards */
.ggf-card .heart,
.ggf-card .like,
.ggf-card .like-button,
.ggf-card .legacy-heart,
.ggf-card .ggf-heart-legacy,
.ggf-card [class*="heart"] {
  display: none !important;
}

/* But NEVER hide our real like button (ensure it wins) */
.ggf-card .ggf-like,
.ggf-card .ggf-like-btn,
.ggf-card button.ggf-like,
.ggf-card button.ggf-like-btn {
  display: inline-flex !important;
}

/* TEMP SAFETY: if both exist, hide the older one */
.ggf-card .ggf-like { display: none !important; }