/* Botões de curtida e lista de desejos. */

.ls-fav-acoes {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.ls-fav-botao {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 42px;
  padding: 0 15px;
  border: 1px solid rgba(15, 23, 42, .14);
  border-radius: 999px;
  background: #fff;
  color: #334155;
  font: inherit;
  font-size: .82rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease,
    background .18s ease, color .18s ease;
}

.ls-fav-botao:hover {
  transform: translateY(-1px);
  border-color: rgba(239, 68, 68, .45);
}

.ls-fav-botao i {
  font-size: .95rem;
}

.ls-fav-botao[data-favorito="curtida"].is-on {
  border-color: rgba(239, 68, 68, .5);
  background: rgba(239, 68, 68, .1);
  color: #dc2626;
}

.ls-fav-botao[data-favorito="desejo"].is-on {
  border-color: rgba(37, 99, 235, .5);
  background: rgba(37, 99, 235, .1);
  color: #1d4ed8;
}

.ls-fav-total {
  min-width: 18px;
  font-size: .78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* O SELO DE CURTIDAS.

   No site ele é leitura: mostra quantas pessoas curtiram no aplicativo.
   Continua sendo um <button> porque o toque tem resposta -- explica onde
   se curte e convida a instalar. Um <span> mudo deixaria a pessoa
   tocando num coração que não faz nada. */
.ls-fav-selo {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 13px;
  border: 1px solid rgba(220, 38, 38, .28);
  border-radius: 999px;
  background: rgba(239, 68, 68, .08);
  color: #dc2626;
  font: inherit;
  font-size: .8rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease;
}

.ls-fav-selo:hover {
  transform: translateY(-1px);
  background: rgba(239, 68, 68, .14);
}

.ls-fav-convite {
  /* Fixo no <body>: dentro do card ele seria cortado pela borda. */
  position: fixed;
  z-index: 9999;
  padding: 12px 14px;
  border-radius: 12px;
  background: #0f172a;
  color: #fff;
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.45;
  text-align: left;
  white-space: normal;
  box-shadow: 0 18px 40px rgba(15, 23, 42, .35);
}

.ls-fav-convite strong {
  display: block;
  margin-bottom: 3px;
  font-size: .78rem;
}

.ls-fav-convite a {
  display: inline-block;
  margin-top: 5px;
  color: #93c5fd;
  font-weight: 800;
  text-decoration: underline;
}

.ls-fav-acoes.compacto .ls-fav-selo {
  min-height: 38px;
  padding: 0 11px;
  font-size: .74rem;
}

.ls-fav-botao.pulsa {
  animation: ls-fav-pulsa .35s ease;
}

@keyframes ls-fav-pulsa {
  0% { transform: scale(1); }
  45% { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Versão compacta, para o canto do card do catálogo. */
.ls-fav-acoes.compacto .ls-fav-botao {
  min-height: 38px;
  padding: 0 11px;
  font-size: .74rem;
}

.ls-fav-aviso {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  border-radius: 8px;
  background: #0f172a;
  color: #fff;
  font-size: .68rem;
  font-weight: 600;
  white-space: nowrap;
  z-index: 20;
}

.ls-fav-nota {
  margin: 8px 0 0;
  color: #64748b;
  font-size: .72rem;
  line-height: 1.5;
}

/* Isolamento contra CSS antigo dos cards. Algumas páginas estilizam todo
   `button` do card; sem estas regras o coração e a estrela viravam texto
   ou quadrado sem acabamento. */
.ls-fav-acoes{position:relative!important;z-index:6!important;display:inline-flex!important;align-items:center!important;gap:8px!important}
.ls-fav-acoes .ls-fav-selo,
.ls-fav-acoes .ls-fav-botao{
  width:auto!important;max-width:none!important;min-width:40px!important;
  min-height:40px!important;margin:0!important;padding:0 12px!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;
  border-radius:999px!important;font-family:inherit!important;font-weight:800!important;
  line-height:1!important;text-decoration:none!important;box-shadow:0 7px 18px rgba(15,23,42,.14)!important;
}
.ls-fav-acoes .ls-fav-selo{
  border:1px solid rgba(225,29,72,.28)!important;
  color:#e11d48!important;background:rgba(255,255,255,.96)!important;
}
.ls-fav-acoes .ls-fav-selo:hover{color:#be123c!important;background:#fff1f4!important;border-color:rgba(225,29,72,.5)!important}
.ls-fav-acoes .ls-fav-botao{
  border:1px solid rgba(217,119,6,.3)!important;
  color:#b45309!important;background:rgba(255,255,255,.96)!important;
}
.ls-fav-acoes .ls-fav-botao:hover{color:#92400e!important;background:#fffbeb!important;border-color:rgba(217,119,6,.55)!important}
.ls-fav-acoes .ls-fav-botao.is-on{
  color:#fff!important;border-color:#d97706!important;
  background:linear-gradient(135deg,#f59e0b,#d97706)!important;
  box-shadow:0 8px 20px rgba(217,119,6,.28)!important;
}
.ls-fav-acoes .ls-fav-selo i,.ls-fav-acoes .ls-fav-botao i{font-size:1rem!important;line-height:1!important}
.ls-fav-acoes.compacto .ls-fav-selo,.ls-fav-acoes.compacto .ls-fav-botao{
  width:40px!important;height:40px!important;min-height:40px!important;padding:0!important;
}
.ls-fav-acoes.compacto .ls-fav-selo{width:auto!important;padding:0 11px!important}
