/* ==================================================
   PalavraLink – Tooltip Card (Blogger Safe)
   ================================================== */

/* Palavra clicável */
.palavralink {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* Palavra destacada */
.palavralink .pl-word {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
  color: #0a7;
}
/* ==================================================
   Ícone de compra – PalavraLink
   ================================================== */
.palavralink .pl-icon {
  font-size: 0.85em;
  opacity: 0.55;
  margin-right: 3px;
  vertical-align: baseline;
  user-select: none;
  pointer-events: none;
}
/* ==================================================
   Tooltip (fechado por padrão)
   ================================================== */
.palavralink .pl-tooltip {
  position: absolute;
  left: 50%;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(6px) scale(.97);

  width: min(280px, calc(100vw - 32px));
  max-width: 280px;

  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);

  padding: 12px;
  z-index: 999999;

  display: flex;
  flex-direction: column;
  gap: 6px;

  opacity: 0;
  visibility: hidden;

  /* 🔒 IMPORTANTE: tooltip não bloqueia clique */
  pointer-events: none;

  transition:
    opacity .18s ease,
    transform .18s ease,
    visibility .18s ease;
}

/* ==================================================
   Tooltip aberto (hover desktop / click mobile)
   ================================================== */
.palavralink:hover .pl-tooltip,
.palavralink.pl-active .pl-tooltip {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0) scale(1);
}

/* ==================================================
   Conteúdo do tooltip
   ================================================== */

/* Imagem */
.palavralink .pl-tooltip img {
  width: 100%;
  max-height: 150px;
  object-fit: cover;
  border-radius: 8px;
}

/* Título */
.palavralink .pl-tooltip strong {
  font-size: 14px;
  font-weight: 700;
  color: #000;
}

/* Descrição */
.palavralink .pl-tooltip p {
  font-size: 12.5px;
  line-height: 1.45;
  color: #333;
  margin: 0;
}

/* Preço */
.palavralink .pl-tooltip em {
  font-style: normal;
  font-weight: 800;
  font-size: 14px;
  color: #0a7;
}

/* ==================================================
   Botão CTA – sempre clicável
   ================================================== */
.palavralink .pl-cta {
  display: block;
  margin-top: 6px;
  padding: 9px;
  background: #0a7;
  color: #fff;
  border-radius: 9px;
  text-align: center;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;

  /* 🔓 libera clique mesmo com tooltip */
  pointer-events: auto;
  cursor: pointer;
}

/* Hover CTA */
.palavralink .pl-cta:hover {
  background: #098;
}

/* ==================================================
   Seta do tooltip
   ================================================== */
.palavralink .pl-tooltip::after {
  content: "";
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 7px;
  border-style: solid;
  border-color: transparent transparent #ffffff transparent;
}
/* ==================================================
   Ajustes específicos para MOBILE
   ================================================== */
@media (max-width: 768px) {

  /* tooltip mais central e seguro */
  .palavralink .pl-tooltip {
    left: 50%;
    right: auto;
    transform: translateX(-50%) translateY(10px) scale(.98);
    max-width: calc(100vw - 24px);
  }

  /* remove hover no mobile (evita bugs) */
  .palavralink:hover .pl-tooltip {
    opacity: 0;
    visibility: hidden;
  }

  /* só abre quando JS ativar */
  .palavralink.pl-active .pl-tooltip {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}