/* Cleubi.com - Botões sociais iguais, compactos e animados.
   Não altera API.
   Não altera banco.
   Não muda ação dos botões.
*/

/* Fileira dos botões */
.clbs-actions{
  position:relative !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;
  width:100% !important;
  max-width:100% !important;
  box-sizing:border-box !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;
  padding:10px 2px 10px !important;
  margin-top:12px !important;
  clear:both !important;
}

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

/* Todos os botões com o mesmo tamanho do Salve */
.clbs-actions .clbs-btn{
  position:relative !important;
  flex:0 0 58px !important;
  width:58px !important;
  min-width:58px !important;
  max-width:58px !important;
  height:44px !important;
  min-height:44px !important;
  max-height:44px !important;
  box-sizing:border-box !important;
  padding:4px 4px !important;
  margin:0 !important;
  border-radius:13px !important;
  border:1.3px solid rgba(24,31,48,.68) !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:hidden !important;
  white-space:nowrap !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:
    transform .16s ease,
    background .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    color .18s ease !important;
}

/* Ordem oficial */
.clbs-actions .clbs-btn[data-action="salve"]{ order:1 !important; }
.clbs-actions .clbs-btn[data-action="ideia"]{ order:2 !important; }
.clbs-actions .clbs-btn[data-action="ecoar"]{ order:3 !important; }
.clbs-actions .clbs-btn[data-action="guardar"]{ order:4 !important; }
.clbs-actions .clbs-btn[data-action="elo"]{ order:5 !important; }
.clbs-actions .clbs-btn[data-action="retocar"]{ order:6 !important; }
.clbs-actions .clbs-btn[data-action="remover"]{ order:7 !important; }

/* Conteúdo interno padrão */
.clbs-actions .clbs-btn .clbs-emoji{
  display:block !important;
  font-size:15px !important;
  line-height:1 !important;
  margin:0 !important;
  transform-origin:center center !important;
  will-change:transform !important;
}

.clbs-actions .clbs-btn .clbs-count{
  display:block !important;
  font-size:10.5px !important;
  line-height:1 !important;
  font-weight:950 !important;
  margin:0 !important;
  color:inherit !important;
}

.clbs-actions .clbs-btn .clbs-label{
  display:block !important;
  font-size:8px !important;
  line-height:1 !important;
  font-weight:900 !important;
  margin:0 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  color:inherit !important;
}

/* No Salve, não mostra palavra Salve/Salves */
.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;
}

/* Salve zerado: só mãozinha maior */
.clbs-actions .clbs-btn[data-action="salve"].clb-salve-empty,
.clbs-actions .clbs-salve.clb-salve-empty{
  justify-content:center !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;
}

/* Botão ativo/acendido */
.clbs-actions .clbs-btn.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;
}

/* Remover com detalhe suave */
.clbs-actions .clbs-btn[data-action="remover"]{
  border-color:rgba(190,35,72,.38) !important;
}

.clbs-actions .clbs-btn[data-action="remover"].is-active{
  background:#fff0f3 !important;
  border-color:#d94b68 !important;
  color:#991f3d !important;
}

/* Clique: pulinho do botão */
.clbs-actions .clbs-btn:active{
  transform:scale(.94) translateY(1px) !important;
}

.clbs-actions .clbs-btn.clb-btn-hop{
  animation:clbBotaoPulo .38s ease both !important;
}

@keyframes clbBotaoPulo{
  0%{ transform:translateY(0) scale(1); }
  35%{ transform:translateY(-7px) scale(1.04); }
  65%{ transform:translateY(0) scale(.98); }
  100%{ transform:translateY(0) scale(1); }
}

/* Luz passando botão por botão */
.clbs-actions .clbs-btn{
  animation:clbLuzBotao 4.2s ease-in-out infinite !important;
}

.clbs-actions .clbs-btn:nth-of-type(1){ animation-delay:0s !important; }
.clbs-actions .clbs-btn:nth-of-type(2){ animation-delay:.22s !important; }
.clbs-actions .clbs-btn:nth-of-type(3){ animation-delay:.44s !important; }
.clbs-actions .clbs-btn:nth-of-type(4){ animation-delay:.66s !important; }
.clbs-actions .clbs-btn:nth-of-type(5){ animation-delay:.88s !important; }
.clbs-actions .clbs-btn:nth-of-type(6){ animation-delay:1.10s !important; }
.clbs-actions .clbs-btn:nth-of-type(7){ animation-delay:1.32s !important; }

@keyframes clbLuzBotao{
  0%, 72%, 100%{
    box-shadow:0 5px 13px rgba(15,23,42,.12);
    border-color:rgba(24,31,48,.68);
  }
  10%{
    box-shadow:
      0 0 0 2px rgba(255,138,28,.12),
      0 0 18px rgba(255,138,28,.42),
      0 8px 18px rgba(255,122,24,.18);
    border-color:rgba(255,138,28,.80);
  }
}

/* Trilhazinha de luz por cima da fileira */
.clbs-actions.clb-light-run::before{
  content:"✦" !important;
  position:absolute !important;
  top:-2px !important;
  left:0 !important;
  width:16px !important;
  height:16px !important;
  border-radius:50% !important;
  color:#ff8a1c !important;
  font-size:14px !important;
  line-height:16px !important;
  text-align:center !important;
  text-shadow:0 0 12px rgba(255,138,28,.95) !important;
  pointer-events:none !important;
  z-index:5 !important;
  animation:clbLuzCorrendo 4.2s ease-in-out infinite !important;
}

@keyframes clbLuzCorrendo{
  0%{
    opacity:0;
    transform:translateX(2px) translateY(0) scale(.75);
  }
  8%{
    opacity:1;
  }
  55%{
    opacity:1;
    transform:translateX(min(390px, calc(100vw - 72px))) translateY(-3px) scale(1);
  }
  70%{
    opacity:0;
    transform:translateX(min(420px, calc(100vw - 48px))) translateY(0) scale(.75);
  }
  100%{
    opacity:0;
    transform:translateX(2px) translateY(0) scale(.75);
  }
}

/* Salve: mantém os três pulinhos da mãozinha */
.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); }
}

/* Respiro no fim da fileira para rolagem */
.clbs-actions::after{
  content:"" !important;
  flex:0 0 8px !important;
  width:8px !important;
  height:1px !important;
  order:99 !important;
}

/* Celular */
@media(max-width:760px){
  .clbs-actions{
    gap:6px !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
  }

  .clbs-actions .clbs-btn{
    flex-basis:54px !important;
    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 .clbs-emoji{
    font-size:14px !important;
  }

  .clbs-actions .clbs-btn .clbs-count{
    font-size:10px !important;
  }

  .clbs-actions .clbs-btn .clbs-label{
    font-size:7.5px !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;
  }
}

/* Notebook/Desktop: igual, só um pouco mais confortável */
@media(min-width:1024px){
  .clbs-actions .clbs-btn{
    flex-basis:62px !important;
    width:62px !important;
    min-width:62px !important;
    max-width:62px !important;
    height:46px !important;
    min-height:46px !important;
    max-height:46px !important;
  }

  .clbs-actions .clbs-btn .clbs-label{
    font-size:8.5px !important;
  }
}

/* Respeita usuários com redução de movimento */
@media(prefers-reduced-motion: reduce){
  .clbs-actions .clbs-btn,
  .clbs-actions.clb-light-run::before,
  .clbs-actions .clbs-btn.clb-btn-hop,
  .clbs-actions .clbs-btn[data-action="salve"].clb-salve-jump .clbs-emoji{
    animation:none !important;
  }
}