/* =========================================================================
   Interações do flog (Fase 10b) — curtir foto + favoritar flog via AJAX.

   Ilha de UI inserida no flog_index.php legado. BLINDADA com !important porque
   o flog renderiza CSS arbitrário do usuário (cores/fontes), que poderia
   atropelar esses controles. Namespace: .fvint / .fvfav / .fvinvite / .fvheart.
   Paleta v20y: coral #F05261, pink #D73570, gold #F2A43A, heart #ff2d55.
   ========================================================================= */

/* ---- Curtidas: controle inline, na mesma linha da data ---- */
.fvint {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 3px !important;
  margin: 0 0 0 8px !important;
  padding: 0 !important;
  vertical-align: middle !important;
  background: none !important;
  box-shadow: none !important;
  font-family: inherit !important;
  line-height: 1 !important;
  -webkit-user-select: none !important;
  user-select: none !important;
}

.fvint-heart {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 26px !important;
  height: 26px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: none !important;
  color: #c9c2c4 !important;            /* não curtido = cinza */
  cursor: pointer !important;
  font-size: 16px !important;
  line-height: 1 !important;
  transition: transform .12s ease, color .18s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}
.fvint-heart:hover { transform: scale(1.18) !important; color: #ff2d55 !important; }
.fvint-heart:active { transform: scale(.82) !important; }
.fvint-heart.is-on { color: #ff2d55 !important; }     /* curtido = vermelho */
.fvint-heart.is-busy { opacity: .5 !important; cursor: progress !important; }
.fvint-heart .fvint-svg { width: 17px !important; height: 17px !important; display: block !important; }

@keyframes fvint-bump { 0% { transform: scale(1); } 35% { transform: scale(1.45); } 100% { transform: scale(1); } }
.fvint-heart.is-bump { animation: fvint-bump .42s ease !important; }

.fvint-count {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: inherit !important;
  font-variant-numeric: tabular-nums !important;
}

/* coração que flutua por cima do controle ao curtir (clique no coração);
   posição (left/top) é setada pelo JS sobre o centro do botão. */
.fvint-float {
  position: absolute !important;
  pointer-events: none !important;
  color: #ff2d55 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  z-index: 60 !important;
  /* sem transform !important: a animação precisa controlar o transform
     (senão o coração não sobe — !important venceria os keyframes). */
  animation: fvint-floatup .85s ease-out forwards !important;
}
@keyframes fvint-floatup {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
  25%  { opacity: 1; transform: translate(-50%, -120%) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -260%) scale(.85); }
}

/* ---- Coração grande no CENTRO da foto no duplo-clique (estilo Instagram) ---- */
.fvheart-center {
  position: absolute !important;
  z-index: 50 !important;
  pointer-events: none !important;
  color: #ffffff !important;
  filter: drop-shadow(0 6px 22px rgba(0, 0, 0, .45)) !important;
  /* transform/opacity NÃO podem ser !important aqui: regra !important vence a
     animação e travaria o coração em scale(0)/opacity:0 (invisível). A própria
     animação (keyframe 0%) define o estado inicial. */
  animation: fvheart-center .95s cubic-bezier(.17, .89, .32, 1.28) forwards !important;
}
.fvheart-center .fvint-svg { width: 130px !important; height: 130px !important; display: block !important; }
@keyframes fvheart-center {
  0%   { opacity: 0;   transform: translate(-50%, -50%) scale(0)    rotate(-15deg); }
  15%  { opacity: .96; transform: translate(-50%, -50%) scale(1.25) rotate(8deg); }
  30%  { opacity: .96; transform: translate(-50%, -50%) scale(.9)   rotate(-3deg); }
  45%  { opacity: .96; transform: translate(-50%, -50%) scale(1.06) rotate(0deg); }
  62%  { opacity: .96; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1.15); }
}

/* ---- Botão Favoritar (coluna "Sobre") ---- */
.fvfav {
  display: inline-flex !important;
  align-items: center !important;
  gap: 7px !important;
  margin: 2px 0 !important;
  padding: 8px 14px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #F05261, #D73570) !important;
  color: #fff !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 18px rgba(215, 53, 112, .32) !important;
  transition: transform .12s ease, box-shadow .18s ease, filter .18s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  text-decoration: none !important;
}
.fvfav:hover { transform: translateY(-1px) !important; filter: brightness(1.05) !important; }
.fvfav:active { transform: translateY(0) !important; }
.fvfav.is-on {
  background: #fff !important;
  color: #D73570 !important;
  box-shadow: inset 0 0 0 2px #D73570 !important;
}
.fvfav.is-busy { opacity: .6 !important; cursor: progress !important; }
.fvfav .fvfav-ico { font-size: 15px !important; line-height: 1 !important; }

.fvfav-msg {
  display: block !important;
  margin-top: 6px !important;
  font-family: Inter, system-ui, sans-serif !important;
  font-size: 12px !important;
  color: #1a9b54 !important;
  font-weight: 600 !important;
}
.fvfav-msg.is-err { color: #c0392b !important; }

/* ---- Banner-convite (visitante deslogado tenta curtir/favoritar) ---- */
.fvinvite-backdrop {
  position: fixed !important;
  inset: 0 !important;
  z-index: 99999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 18px !important;
  background: rgba(33, 25, 26, .62) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  opacity: 0 !important;
  transition: opacity .2s ease !important;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Arial, sans-serif !important;
}
.fvinvite-backdrop.is-open { opacity: 1 !important; }

.fvinvite-card {
  position: relative !important;
  width: 100% !important;
  max-width: 420px !important;
  box-sizing: border-box !important;
  padding: 34px 30px 30px !important;
  border-radius: 26px !important;
  background: #fff !important;
  color: #21191A !important;
  text-align: center !important;
  box-shadow: 0 32px 80px rgba(85, 43, 45, .4) !important;
  transform: translateY(14px) scale(.96) !important;
  transition: transform .22s cubic-bezier(.17, .89, .32, 1.28) !important;
}
.fvinvite-backdrop.is-open .fvinvite-card { transform: translateY(0) scale(1) !important; }

.fvinvite-glow {
  position: absolute !important;
  top: -42px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 84px !important;
  height: 84px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 40px !important;
  background: linear-gradient(135deg, #F05261, #D73570) !important;
  box-shadow: 0 14px 34px rgba(215, 53, 112, .5) !important;
  color: #fff !important;
}

.fvinvite-card h3 {
  margin: 26px 0 8px !important;
  padding: 0 !important;
  font-size: 23px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  color: #21191A !important;
  letter-spacing: -.01em !important;
}
.fvinvite-card p {
  margin: 0 auto 22px !important;
  padding: 0 !important;
  max-width: 320px !important;
  font-size: 14.5px !important;
  line-height: 1.55 !important;
  color: #6F6062 !important;
  font-weight: 500 !important;
}
.fvinvite-card p .fvinvite-em { color: #D73570 !important; font-weight: 700 !important; }

.fvinvite-actions {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}
.fvinvite-btn {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 13px 18px !important;
  border: 0 !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  text-align: center !important;
  transition: transform .12s ease, filter .18s ease !important;
  font-family: inherit !important;
}
.fvinvite-btn:hover { transform: translateY(-1px) !important; filter: brightness(1.05) !important; }
.fvinvite-btn--primary {
  background: linear-gradient(135deg, #F05261, #D73570) !important;
  color: #fff !important;
  box-shadow: 0 10px 26px rgba(215, 53, 112, .38) !important;
}
.fvinvite-btn--ghost {
  background: #F6EEE8 !important;
  color: #552B2D !important;
}
.fvinvite-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  width: 32px !important;
  height: 32px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: rgba(0, 0, 0, .05) !important;
  color: #6F6062 !important;
  font-size: 20px !important;
  line-height: 1 !important;
  cursor: pointer !important;
}
.fvinvite-close:hover { background: rgba(0, 0, 0, .1) !important; }