/* Cleubi.com - Salve limpo, sem palavra, com animação.
   Regra:
   - se contador for 0: mostra só ✌️ grande
   - se contador for maior que 0: mostra ✌️ menor + número
   - ao clicar: a mãozinha dá 3 pulinhos e volta para a caixinha
*/

/* Esconde palavra Salve/Salves dentro do botão */
.clbs-actions .clbs-btn[data-action="salve"] .clbs-label,
.clbs-actions .clbs-salve .clbs-label{
  display:none !important;
  visibility:hidden !important;
  width:0 !important;
  height:0 !important;
  overflow:hidden !important;
}

/* Botão base do Salve */
.clbs-actions .clbs-btn[data-action="salve"],
.clbs-actions .clbs-salve{
  position:relative !important;
  flex:0 0 auto !important;
  width:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  padding:4px 6px !important;
  border-radius:13px !important;
  border:1.3px solid rgba(24,31,48,.72) !important;
  background:#ffffff !important;
  color:#1d2a44 !important;
  box-shadow:0 5px 13px rgba(15,23,42,.12) !important;
  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:1px !important;
  overflow:visible !important;
  cursor:pointer !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .14s ease !important;
}

/* Estado aceso quando a pessoa já deu Salve */
.clbs-actions .clbs-btn[data-action="salve"].is-active,
.clbs-actions .clbs-salve.is-active{
  background:linear-gradient(180deg,#fff5e7,#ffe4bd) !important;
  border-color:#ff8a1c !important;
  color:#9a3d00 !important;
  box-shadow:0 8px 18px rgba(255,122,24,.20) !important;
}

/* Emoji */
.clbs-actions .clbs-btn[data-action="salve"] .clbs-emoji,
.clbs-actions .clbs-salve .clbs-emoji{
  display:block !important;
  font-size:17px !important;
  line-height:1 !important;
  transform-origin:center center !important;
  will-change:transform !important;
}

/* Número */
.clbs-actions .clbs-btn[data-action="salve"] .clbs-count,
.clbs-actions .clbs-salve .clbs-count{
  display:block !important;
  font-size:12px !important;
  line-height:1 !important;
  font-weight:950 !important;
  color:inherit !important;
  min-height:12px !important;
}

/* Quando está zerado: só emoji, maior e centralizado */
.clbs-actions .clbs-btn[data-action="salve"].clb-salve-empty,
.clbs-actions .clbs-salve.clb-salve-empty{
  justify-content:center !important;
  gap:0 !important;
}

.clbs-actions .clbs-btn[data-action="salve"].clb-salve-empty .clbs-emoji,
.clbs-actions .clbs-salve.clb-salve-empty .clbs-emoji{
  font-size:21px !important;
}

.clbs-actions .clbs-btn[data-action="salve"].clb-salve-empty .clbs-count,
.clbs-actions .clbs-salve.clb-salve-empty .clbs-count{
  display:none !important;
}

/* Quando tem número: emoji sobe um pouco e fica menor */
.clbs-actions .clbs-btn[data-action="salve"].clb-salve-has-count .clbs-emoji,
.clbs-actions .clbs-salve.clb-salve-has-count .clbs-emoji{
  font-size:16px !important;
  transform:translateY(-1px) !important;
}

.clbs-actions .clbs-btn[data-action="salve"].clb-salve-has-count .clbs-count,
.clbs-actions .clbs-salve.clb-salve-has-count .clbs-count{
  display:block !important;
}

/* Clique normal */
.clbs-actions .clbs-btn[data-action="salve"]:active,
.clbs-actions .clbs-salve:active{
  transform:scale(.96) !important;
}

/* A mãozinha sai da caixa, dá 3 pulinhos e volta */
.clbs-actions .clbs-btn[data-action="salve"].clb-salve-jump .clbs-emoji,
.clbs-actions .clbs-salve.clb-salve-jump .clbs-emoji{
  animation:clbSalveTresPulos .82s cubic-bezier(.2,.9,.2,1) both !important;
}

@keyframes clbSalveTresPulos{
  0%{
    transform:translateY(0) rotate(0deg) scale(1);
  }
  16%{
    transform:translateY(-24px) rotate(-12deg) scale(1.18);
  }
  28%{
    transform:translateY(0) rotate(0deg) scale(1.03);
  }
  42%{
    transform:translateY(-20px) rotate(11deg) scale(1.15);
  }
  54%{
    transform:translateY(0) rotate(0deg) scale(1.02);
  }
  68%{
    transform:translateY(-15px) rotate(-8deg) scale(1.1);
  }
  82%{
    transform:translateY(0) rotate(0deg) scale(1.02);
  }
  100%{
    transform:translateY(0) rotate(0deg) scale(1);
  }
}

/* Pequeno brilho quando ativa */
.clbs-actions .clbs-btn[data-action="salve"].clb-salve-flash::after,
.clbs-actions .clbs-salve.clb-salve-flash::after{
  content:"" !important;
  position:absolute !important;
  inset:-4px !important;
  border-radius:16px !important;
  border:2px solid rgba(255,138,28,.45) !important;
  animation:clbSalveFlash .6s ease-out forwards !important;
  pointer-events:none !important;
}

@keyframes clbSalveFlash{
  0%{
    opacity:0;
    transform:scale(.88);
  }
  35%{
    opacity:1;
  }
  100%{
    opacity:0;
    transform:scale(1.18);
  }
}

/* Fileira: não deixa bagunçar, se não couber rola para o lado */
.clbs-actions{
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  max-width:100% !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding-top:8px !important;
  padding-bottom:8px !important;
}

.clbs-actions::-webkit-scrollbar{
  display:none !important;
}

/* Responsivo */
@media(max-width:760px){
  .clbs-actions .clbs-btn[data-action="salve"],
  .clbs-actions .clbs-salve{
    width:54px !important;
    min-width:54px !important;
    max-width:54px !important;
    height:42px !important;
    min-height:42px !important;
    max-height:42px !important;
    border-radius:12px !important;
  }

  .clbs-actions .clbs-btn[data-action="salve"].clb-salve-empty .clbs-emoji,
  .clbs-actions .clbs-salve.clb-salve-empty .clbs-emoji{
    font-size:20px !important;
  }

  .clbs-actions .clbs-btn[data-action="salve"] .clbs-count,
  .clbs-actions .clbs-salve .clbs-count{
    font-size:11px !important;
  }
}

@media(min-width:1024px){
  .clbs-actions .clbs-btn[data-action="salve"],
  .clbs-actions .clbs-salve{
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }
}