/* ============================================================
   Global Feed — Estilos base com variáveis CSS
   Spec §12.2: todas as opções visuais como custom properties.
   ============================================================ */

/* --- Reset de escopo ---------------------------------------- */
global-feed,
global-feed * {
  box-sizing: border-box;
}

/* --- Custom properties (tokens) ----------------------------- */
global-feed {
  /* Cores */
  --gf-accent: #e6007e;
  --gf-bg: transparent;
  --gf-card-bg: #ffffff;
  --gf-text: #111111;
  --gf-muted: #6b6b6b;

  /* Botões de seta */
  --gf-arrow-color: #111111;
  --gf-arrow-bg: #ffffff;
  --gf-arrow-radius: 50%;

  /* Botão Seguir (azul-violeta do Instagram) */
  --gf-follow-bg: #5865f2;

  /* Layout */
  --gf-radius: 12px;
  --gf-gap: 20px;
  --gf-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.08);
  --gf-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.14);

  /* Tipografia */
  --gf-font: inherit;
  --gf-font-size: 14px;

  /* Caption */
  --gf-caption-lines: 4;

  /* Componente */
  display: block;
  font-family: var(--gf-font);
  font-size: var(--gf-font-size);
  background: var(--gf-bg);
  color: var(--gf-text);
  line-height: 1.5;
}

/* --- Estado de carregamento --------------------------------- */
global-feed[data-state="loading"] .gf-feed__inner {
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gf-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: var(--gf-accent);
  border-radius: 50%;
  animation: gf-spin 0.75s linear infinite;
}

@keyframes gf-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Header ------------------------------------------------- */
.gf-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: calc(var(--gf-gap) * 1.25);
}

/* Header: Perfil (avatar + nome · números · botão) */
.gf-header--profile {
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px 32px;
  margin-bottom: 24px;
  color: var(--gf-text);
}

.gf-header__identity {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}

.gf-header__identity:hover {
  color: inherit;
}

/* Anel fino com o gradiente do Instagram (56px no total) */
.gf-header__avatar-ring {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.gf-header__avatar {
  width: 52px;
  height: 52px;
  border-radius: 50% !important;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--gf-header-ring-gap, #fff);
  background: #fff;
}

.gf-header__info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  line-height: 1.3;
}

.gf-header__username {
  font-weight: 700;
  font-size: 16px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gf-header__name {
  font-size: 14px;
}

/* Posts / followers / following — número em cima, rótulo embaixo, à esquerda */
.gf-header__stats {
  display: flex;
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.gf-header__stats li {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  line-height: 1.3;
}

.gf-header__stats strong {
  font-weight: 700;
  font-size: 14px;
}

.gf-header__stats span {
  font-size: 13px;
}

.gf-header__subtitle {
  font-size: 0.85em;
  color: var(--gf-muted);
}

/* Header: Latest Posts / Community */
.gf-header--centered {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.gf-header__title {
  font-size: 1.4em;
  font-weight: 700;
  margin: 0;
}

/* Botão Seguir */
.gf-follow-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 100px;
  height: 36px;
  padding: 0 18px;
  background: var(--gf-follow-bg);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.2s, transform 0.15s;
  white-space: nowrap;
}

.gf-follow-button svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.gf-follow-button:hover {
  opacity: 0.9;
  color: #fff;
  transform: translateY(-1px);
}

.gf-follow-button:focus-visible {
  outline: 2px solid var(--gf-follow-bg);
  outline-offset: 2px;
}

.gf-follow-button--outline {
  background: transparent;
  color: var(--gf-follow-bg);
  border: 2px solid var(--gf-follow-bg);
}

/* --- Cards -------------------------------------------------- */
.gf-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--gf-radius);
  background: var(--gf-card-bg);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: pointer;
}

.gf-card:focus-visible {
  outline: 3px solid var(--gf-accent);
  outline-offset: 2px;
}

/* Sombras */
.gf-card--shadow-sm {
  box-shadow: var(--gf-shadow-sm);
}

.gf-card--shadow-md {
  box-shadow: var(--gf-shadow-md);
}

/* Hover: zoom */
.gf-card--hover-zoom .gf-card__media img,
.gf-card--hover-zoom .gf-card__media video {
  transition: transform 0.35s ease;
}

.gf-card--hover-zoom:hover .gf-card__media img,
.gf-card--hover-zoom:hover .gf-card__media video {
  transform: scale(1.06);
}

/* Hover: escurecer */
.gf-card--hover-darken::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s ease;
  pointer-events: none;
}

.gf-card--hover-darken:hover::after {
  background: rgba(0, 0, 0, 0.28);
}

/* Hover: mostrar informações (curtidas, comentários e legenda sobre fundo escuro) */
.gf-card__overlay-info {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 22px 30px;
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-align: center;
  opacity: 0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.gf-card--hover-show-info:hover .gf-card__overlay-info,
.gf-card--hover-show-info:focus-visible .gf-card__overlay-info {
  opacity: 1;
}

.gf-card__overlay-stats {
  display: flex;
  align-items: center;
  gap: 22px;
}

.gf-card__overlay-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
}

.gf-card__overlay-stat svg {
  width: 24px;
  height: 24px;
}

.gf-card__overlay-caption {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  overflow-wrap: anywhere;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--gf-overlay-lines, 10);
  overflow: hidden;
}

/* --- Mídia do card ------------------------------------------ */
.gf-card__media {
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Proporções */
.gf-card__media--1-1 {
  aspect-ratio: 1 / 1;
}

.gf-card__media--4-5 {
  aspect-ratio: 4 / 5;
}

.gf-card__media--9-16 {
  aspect-ratio: 9 / 16;
}

.gf-card__media--16-9 {
  aspect-ratio: 16 / 9;
}

.gf-card__media img,
.gf-card__media video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Vídeo animado sobre a capa: aparece só quando começa a tocar */
.gf-card__media .gf-card__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  background: transparent;
}

.gf-card__media .gf-card__video.is-playing {
  opacity: 1;
}

/* Ícone de tipo de mídia */
.gf-media-icon {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 12px;
  display: flex;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.gf-media-icon svg {
  width: 21px;
  height: 21px;
}

/* --- Post style: Card com métricas (11.1) -------------------- */
.gf-card--metrics .gf-card__body {
  padding: 10px 12px 12px;
}

.gf-card__metrics {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85em;
  color: var(--gf-muted);
  margin-bottom: 6px;
}

.gf-card__metrics-item {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* --- Post style: Overlay (11.2 e 11.3) ----------------------- */
.gf-card--overlay .gf-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 24px 12px 12px;
  background: linear-gradient(to top, rgba(0, 0, 0, .65) 0%, transparent 100%);
  color: #fff;
  display: flex;
  align-items: center;
  gap: 8px;
}

.gf-card__overlay-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid rgba(255, 255, 255, .6);
}

.gf-card__overlay-name {
  font-size: 0.85em;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* IG icon top-right nos overlays */
/* Canto inferior, para não colidir com o ícone de tipo de mídia (superior) */
.gf-card__ig-icon {
  position: absolute;
  z-index: 2;
  bottom: 12px;
  right: 12px;
  display: flex;
  color: #fff;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  pointer-events: none;
}

.gf-card__ig-icon svg {
  width: 22px;
  height: 22px;
}

/* --- Post style: Instagram Nativo (11.6) --------------------- */
.gf-card--instagram-native {
  border: 1px solid #dbdbdb;
  font-size: 0.9em;
}

.gf-card--instagram-native .gf-card__native-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
}

.gf-card__native-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

.gf-card__native-username {
  font-weight: 600;
  flex: 1;
}

.gf-card__native-date {
  font-size: 0.8em;
  color: var(--gf-muted);
}

.gf-card__native-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px 6px;
  font-size: 1.2em;
}

.gf-card__native-action-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--gf-text);
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85em;
}

.gf-card__native-caption {
  padding: 0 12px 12px;
  font-size: 0.88em;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--gf-caption-lines);
  overflow: hidden;
}

/* --- Caption (outros estilos) ------------------------------- */
.gf-card__caption {
  font-size: 0.88em;
  color: var(--gf-text);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--gf-caption-lines);
  overflow: hidden;
}

.gf-card__date {
  font-size: 0.8em;
  color: var(--gf-muted);
}

/* --- Layouts: Showcase Carousel ----------------------------- */
.gf-layout--showcase-carousel {
  position: relative;
}

.gf-carousel__track-wrapper {
  overflow: hidden;
}

.gf-carousel__track {
  display: flex;
  gap: var(--gf-gap);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.gf-carousel__slide {
  flex-shrink: 0;
  /* Largura calculada via JS: 100% / colunas - gap */
}

/* Setas */
.gf-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: var(--gf-arrow-radius);
  background: var(--gf-arrow-bg);
  color: var(--gf-arrow-color);
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.2s, opacity 0.2s;
}

.gf-carousel__arrow svg {
  width: 16px;
  height: 16px;
}

/* Escurece levemente a cor escolhida, qualquer que seja */
.gf-carousel__arrow:hover {
  filter: brightness(0.93);
}

.gf-carousel__arrow[hidden] {
  display: none;
}

.gf-carousel__arrow:focus-visible {
  outline: 3px solid var(--gf-accent);
  outline-offset: 2px;
}

/* Centradas na borda do primeiro/último card */
.gf-carousel__arrow--prev {
  left: -16px;
}

.gf-carousel__arrow--next {
  right: -16px;
}

/* Como no Instagram: a seta some quando não há para onde ir */
.gf-carousel__arrow[disabled] {
  opacity: 0;
  pointer-events: none;
}

/* Em telas estreitas, setas por dentro para não gerar rolagem horizontal */
@media (max-width: 600px) {
  .gf-carousel__arrow--prev {
    left: 8px;
  }

  .gf-carousel__arrow--next {
    right: 8px;
  }

  .gf-header--profile {
    gap: 14px 24px;
  }
}

/* Dots */
.gf-carousel__dots {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 12px;
}

.gf-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.2);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s;
}

.gf-carousel__dot.is-active,
.gf-carousel__dot:hover {
  background: var(--gf-accent);
}

/* --- Layout: Grid ------------------------------------------- */
.gf-layout--grid {
  display: grid;
  gap: var(--gf-gap);
  /* --gf-columns definido via JS/inline style */
  grid-template-columns: repeat(var(--gf-columns, 3), 1fr);
}

/* --- Layout: Masonry ---------------------------------------- */
.gf-layout--masonry {
  columns: var(--gf-columns, 4);
  column-gap: var(--gf-gap);
}

/* O espaço vertical fica no item (definido via JS), não no card. */
.gf-layout--masonry .gf-masonry__item {
  break-inside: avoid;
}

.gf-layout--masonry .gf-card {
  break-inside: avoid;
}

/* --- Layout: Thumbnail Carousel ----------------------------- */
/* Cada linha é um carrossel independente, com as próprias setas. */
.gf-thumb-carousel__row {
  position: relative;
}

/* --- Lightbox ----------------------------------------------- */
/* Inserido no <body>, fora do <global-feed>: precisa dos próprios tokens. */
.gf-lightbox {
  --gf-accent: #e6007e;
  --gf-radius: 12px;
  position: fixed;
  inset: 0;
  z-index: 999999;
  /* Tela cheia com rolagem própria: os posts ficam um abaixo do outro. */
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(0, 0, 0, 0.85);
  animation: gf-fade-in 0.2s ease;
}

@keyframes gf-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Coluna com os posts (computador: 480px no centro; celular: tela inteira) */
.gf-lb__feed {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: min(480px, 100%);
  margin: 0 auto;
  padding: 56px 0 48px;
}

/* Post no estilo do Instagram */
.gf-lb {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: 100%;
  background: #fff;
  color: #000;
  border-radius: 4px;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 18px;
  text-align: left;
}

/* Cabeçalho */
.gf-lb__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  padding: 12px 14px;
  border-bottom: 1px solid #efefef;
}

.gf-lb__avatar {
  display: inline-flex;
  flex-shrink: 0;
  padding: 2px;
  border-radius: 50%;
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5);
}

.gf-lb__avatar img {
  display: block;
  width: 32px;
  height: 32px;
  border: 2px solid #fff;
  border-radius: 50%;
  object-fit: cover;
  background: #fff;
}

.gf-lb__names {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.gf-lb__username {
  overflow: hidden;
  font-weight: 600;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.gf-lb__dot-sep {
  color: #737373;
}

.gf-lb__follow {
  font-weight: 600;
  white-space: nowrap;
}

.gf-lb__ig {
  display: inline-flex;
  flex-shrink: 0;
}

.gf-lb__ig svg {
  width: 24px;
  height: 24px;
}

/* Mídia (com fundo desfocado da própria imagem nas laterais) */
.gf-lb__media {
  position: relative;
  width: 100%;
  aspect-ratio: var(--gf-lb-ratio, 4 / 5);
  /* Reels (9:16) ficam limitados e ganham as laterais desfocadas. */
  max-height: 80vh;
  overflow: hidden;
  background: #000;
}

/* Vídeo: ícone de play enquanto pausado e botão de som no canto */
.gf-lb__play {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 2;
  display: flex;
  color: #fff;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.gf-lb__play svg {
  width: 72px;
  height: 72px;
}

.gf-lb__media.is-playing .gf-lb__play {
  opacity: 0;
}

.gf-lb__media:has(.gf-lb__video) {
  cursor: pointer;
}

.gf-lb__sound {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gf-lb__sound svg {
  width: 16px;
  height: 16px;
}

.gf-lb__backdrop {
  position: absolute;
  inset: -10%;
  width: 120%;
  height: 120%;
  object-fit: cover;
  filter: blur(24px) brightness(0.85);
  pointer-events: none;
}

.gf-lb__img,
.gf-lb__video {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Carrossel do post */
.gf-lb__slide-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  transform: translateY(-50%);
  cursor: pointer;
}

.gf-lb__slide-arrow svg {
  width: 14px;
  height: 14px;
}

.gf-lb__slide-arrow--prev { left: 10px; }
.gf-lb__slide-arrow--next { right: 10px; }

.gf-lb__slide-arrow[hidden] {
  display: none;
}

.gf-lb__dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}

.gf-lb__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
}

.gf-lb__dots span.is-active {
  background: #fff;
}

/* Ações, legenda e data */
.gf-lb__info {
  padding: 10px 14px 14px;
}

.gf-lb__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.gf-lb__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}

.gf-lb__action svg {
  width: 24px;
  height: 24px;
}

.gf-lb__share.is-copied svg {
  color: #0095f6;
}

.gf-lb__caption {
  margin: 0 0 6px;
  overflow-wrap: anywhere;
  white-space: pre-line;
}

.gf-lb__caption-user {
  font-weight: 600;
}

.gf-lb__more {
  cursor: pointer;
}

.gf-lb__date {
  display: block;
  font-size: 12px;
  color: #737373;
}

/* Fechar: círculo branco fixo no canto (fica visível durante a rolagem) */
.gf-lb__close {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.gf-lb__close svg {
  width: 22px;
  height: 22px;
}

/* Celular: posts na largura total, fundo cinza-claro, sem cartões */
@media (max-width: 600px) {
  .gf-lightbox {
    background: #f4f4f6;
  }

  .gf-lb__feed {
    gap: 12px;
    width: 100%;
    padding: 0 0 24px;
  }

  .gf-lb {
    background: transparent;
    border-radius: 0;
  }

  .gf-lb__header {
    border-bottom: 0;
  }

  .gf-lb__media {
    max-height: 75vh;
  }

  .gf-lb__close {
    top: 12px;
    right: 12px;
  }
}

/* --- Botão "Carregar mais" ---------------------------------- */
.gf-load-more {
  display: flex;
  justify-content: center;
  margin-top: calc(var(--gf-gap) * 1.5);
}

.gf-load-more__btn {
  padding: 10px 28px;
  background: transparent;
  color: var(--gf-text);
  border: 2px solid currentColor;
  border-radius: var(--gf-radius);
  font-size: 0.95em;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}

.gf-load-more__btn:hover {
  background: var(--gf-accent);
  color: #fff;
  border-color: var(--gf-accent);
}

/* --- Notice (sem cache, apenas para admins) ---------------- */
.global-feed-notice {
  padding: 12px 16px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: var(--gf-radius);
  font-size: 0.9em;
}

/* --- Acessibilidade: foco visível (só dentro do plugin) ---- */
global-feed :focus-visible,
.gf-lightbox :focus-visible {
  outline: 3px solid var(--gf-accent, #e6007e);
  outline-offset: 2px;
}

/* --- Acessibilidade: reduce motion ------------------------- */
@media (prefers-reduced-motion: reduce) {

  .gf-carousel__track,
  .gf-card,
  .gf-card__media img,
  .gf-lightbox,
  .gf-spinner {
    transition: none !important;
    animation: none !important;
  }
}

/* --- Bot\u00e3o de pausa do autoplay (WCAG 2.1 AA) ------------- */
.gf-carousel__pause {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  bottom: 12px;
  right: 12px;
  z-index: 10;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.gf-carousel__pause:hover {
  background: rgba(0, 0, 0, 0.8);
}

.gf-carousel__pause:focus-visible {
  outline: 3px solid var(--gf-accent);
  outline-offset: 2px;
}

/* --- SSR placeholder (oculto ap\u00f3s hidrata\u00e7\u00e3o) -------------- */
.gf-ssr-placeholder {
  pointer-events: none;
}

global-feed[data-state="ready"] .gf-ssr-placeholder {
  display: none;
}


/* ============================================================
   Proteção contra estilos do tema / Elementor
   ------------------------------------------------------------
   Kits do Elementor e temas estilizam `button` e `a` com seletores
   como `.elementor-kit-5 button` (especificidade 0,1,1), que vencem
   as classes do plugin (0,1,0). As regras abaixo reaplicam os valores
   do plugin — incluindo os personalizados no painel via variáveis
   CSS — com prioridade, em todos os estados (hover, foco, clique).
   ============================================================ */

/* Base comum de todos os botões do plugin */
global-feed button,
.gf-lightbox button {
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  font-family: inherit !important;
  font-weight: inherit;
  text-transform: none !important;
  letter-spacing: normal !important;
  text-decoration: none !important;
  line-height: 1 !important;
  text-shadow: none !important;
}

/* Ícones SVG: temas com `svg { fill: currentColor }` os preencheriam */
global-feed svg.gf-icon,
.gf-lightbox svg.gf-icon {
  fill: none !important;
}

/* Setas do carrossel (cores e arredondamento definidos no painel) */
global-feed button.gf-carousel__arrow,
global-feed button.gf-carousel__arrow:hover,
global-feed button.gf-carousel__arrow:focus,
global-feed button.gf-carousel__arrow:active {
  display: flex !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: var(--gf-arrow-bg) !important;
  color: var(--gf-arrow-color) !important;
  border: 0 !important;
  border-radius: var(--gf-arrow-radius) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18) !important;
}

global-feed button.gf-carousel__arrow[hidden] {
  display: none !important;
}

/* Pausa do autoplay */
global-feed button.gf-carousel__pause,
global-feed button.gf-carousel__pause:focus,
global-feed button.gf-carousel__pause:active {
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

global-feed button.gf-carousel__pause:hover {
  background: rgba(0, 0, 0, 0.8) !important;
}

/* Pontos de navegação */
global-feed button.gf-carousel__dot,
global-feed button.gf-carousel__dot:focus,
global-feed button.gf-carousel__dot:active {
  width: 8px !important;
  height: 8px !important;
  padding: 0 !important;
  background: rgba(0, 0, 0, 0.2) !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

global-feed button.gf-carousel__dot.is-active,
global-feed button.gf-carousel__dot:hover {
  background: var(--gf-accent) !important;
}

/* Botões de ação do estilo "Instagram Nativo" */
global-feed button.gf-card__native-action-btn,
global-feed button.gf-card__native-action-btn:hover,
global-feed button.gf-card__native-action-btn:focus,
global-feed button.gf-card__native-action-btn:active {
  padding: 0 !important;
  background: none !important;
  color: var(--gf-text) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* "Carregar mais" */
global-feed button.gf-load-more__btn,
global-feed button.gf-load-more__btn:focus,
global-feed button.gf-load-more__btn:active {
  padding: 10px 28px !important;
  background: transparent !important;
  color: var(--gf-text) !important;
  border: 2px solid currentColor !important;
  border-radius: var(--gf-radius) !important;
  box-shadow: none !important;
}

global-feed button.gf-load-more__btn:hover {
  background: var(--gf-accent) !important;
  color: #fff !important;
  border-color: var(--gf-accent) !important;
}

/* Botão "Seguir" / "Follow" */
global-feed a.gf-follow-button,
global-feed a.gf-follow-button:hover,
global-feed a.gf-follow-button:focus,
global-feed a.gf-follow-button:active,
global-feed a.gf-follow-button:visited {
  padding: 0 18px !important;
  background: var(--gf-follow-bg) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  font-family: inherit !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
}

global-feed a.gf-follow-button--outline,
global-feed a.gf-follow-button--outline:hover,
global-feed a.gf-follow-button--outline:focus,
global-feed a.gf-follow-button--outline:active,
global-feed a.gf-follow-button--outline:visited {
  background: transparent !important;
  color: var(--gf-follow-bg) !important;
  border: 2px solid var(--gf-follow-bg) !important;
}

/* Link do perfil no cabeçalho (avatar + nome) */
global-feed a.gf-header__identity,
global-feed a.gf-header__identity:hover,
global-feed a.gf-header__identity:focus,
global-feed a.gf-header__identity:active,
global-feed a.gf-header__identity:visited {
  color: var(--gf-text) !important;
  text-decoration: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Lightbox: textos do painel (temas/Elementor estilizam p, a, time) */
.gf-lightbox .gf-lb,
.gf-lightbox .gf-lb p,
.gf-lightbox .gf-lb time {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
  letter-spacing: normal !important;
  text-transform: none !important;
}

.gf-lightbox .gf-lb p.gf-lb__caption {
  margin: 0 0 6px !important;
  padding: 0 !important;
  color: #000 !important;
  font-size: 14px !important;
  line-height: 18px !important;
}

.gf-lightbox .gf-lb time.gf-lb__date {
  color: #737373 !important;
  font-size: 12px !important;
}

/* Lightbox: links do painel (usuário, Follow, ícones, hashtags) */
.gf-lightbox .gf-lb a,
.gf-lightbox .gf-lb a:hover,
.gf-lightbox .gf-lb a:focus,
.gf-lightbox .gf-lb a:active,
.gf-lightbox .gf-lb a:visited {
  color: #000 !important;
  background: none !important;
  box-shadow: none !important;
  text-decoration: none !important;
  font-size: 14px !important;
}

/* Anel colorido do avatar (a regra acima zera o fundo dos links) */
.gf-lightbox .gf-lb a.gf-lb__avatar,
.gf-lightbox .gf-lb a.gf-lb__avatar:hover,
.gf-lightbox .gf-lb a.gf-lb__avatar:focus,
.gf-lightbox .gf-lb a.gf-lb__avatar:visited {
  background: linear-gradient(45deg, #feda75, #fa7e1e, #d62976, #962fbf, #4f5bd5) !important;
}

.gf-lightbox .gf-lb a.gf-lb__follow,
.gf-lightbox .gf-lb a.gf-lb__follow:hover,
.gf-lightbox .gf-lb a.gf-lb__follow:focus,
.gf-lightbox .gf-lb a.gf-lb__follow:visited {
  color: #0095f6 !important;
  font-weight: 600 !important;
}

.gf-lightbox .gf-lb a.gf-lb__username,
.gf-lightbox .gf-lb a.gf-lb__caption-user {
  font-weight: 600 !important;
}

/* Hashtags e menções na legenda */
.gf-lightbox .gf-lb .gf-lb__caption a:not(.gf-lb__caption-user),
.gf-lightbox .gf-lb .gf-lb__caption a:not(.gf-lb__caption-user):visited {
  color: #00376b !important;
}

.gf-lightbox .gf-lb a:hover .gf-icon,
.gf-lightbox .gf-lb button:hover .gf-icon {
  opacity: 0.6;
}

/* Lightbox: botões sem fundo (compartilhar, "more") */
.gf-lightbox .gf-lb button.gf-lb__action,
.gf-lightbox .gf-lb button.gf-lb__action:hover,
.gf-lightbox .gf-lb button.gf-lb__action:focus,
.gf-lightbox .gf-lb button.gf-lb__more,
.gf-lightbox .gf-lb button.gf-lb__more:hover,
.gf-lightbox .gf-lb button.gf-lb__more:focus {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  background: none !important;
  color: #000 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.gf-lightbox .gf-lb button.gf-lb__more,
.gf-lightbox .gf-lb button.gf-lb__more:hover,
.gf-lightbox .gf-lb button.gf-lb__more:focus {
  display: inline !important;
  color: #737373 !important;
  font-size: 14px !important;
  line-height: 18px !important;
  vertical-align: baseline !important;
}

/* Lightbox: setas do carrossel do post */
.gf-lightbox .gf-lb button.gf-lb__slide-arrow,
.gf-lightbox .gf-lb button.gf-lb__slide-arrow:hover,
.gf-lightbox .gf-lb button.gf-lb__slide-arrow:focus {
  width: 26px !important;
  height: 26px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #262626 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2) !important;
}

/* Lightbox: fechar (círculo branco fixo no canto da tela) */
.gf-lightbox button.gf-lb__close,
.gf-lightbox button.gf-lb__close:hover,
.gf-lightbox button.gf-lb__close:focus,
.gf-lightbox button.gf-lb__close:active {
  width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  background: rgba(255, 255, 255, 0.92) !important;
  color: #262626 !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}

/* Lightbox: botão de som do vídeo */
.gf-lightbox button.gf-lb__sound,
.gf-lightbox button.gf-lb__sound:hover,
.gf-lightbox button.gf-lb__sound:focus,
.gf-lightbox button.gf-lb__sound:active {
  width: 30px !important;
  height: 30px !important;
  padding: 0 !important;
  background: rgba(38, 38, 38, 0.75) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 50% !important;
  box-shadow: none !important;
}

/* Lightbox: mídia sem estilos herdados de img/video do tema */
.gf-lightbox .gf-lb__media img.gf-lb__img,
.gf-lightbox .gf-lb__media video.gf-lb__video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

.gf-lightbox .gf-lb__media img.gf-lb__backdrop {
  max-width: none !important;
  width: 120% !important;
  height: 120% !important;
}
/* Vídeos: temas costumam aplicar `video { height: auto; max-width: 100% }` */
global-feed .gf-card__media video.gf-card__video {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  margin: 0 !important;
  border: 0 !important;
}