/* Cleubi.com - Correção final da fileira social
   Objetivo:
   - Nunca deixar os botões em coluna.
   - Sempre deixar um ao lado do outro.
   - Se faltar espaço, rola para o lado.
   - Mantém todos do mesmo tamanho.
*/

html body .clbs-actions,
html body .clbs-actions.clb-light-run,
html body .clb-visual-post-card .clbs-actions,
html body .clb-premium-post-card .clbs-actions,
html body .clb-mobile-social-card .clbs-actions{
  position:relative !important;
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:7px !important;

  width:100% !important;
  min-width:0 !important;
  max-width:100% !important;

  height:auto !important;
  min-height:48px !important;
  max-height:none !important;

  overflow-x:auto !important;
  overflow-y:visible !important;
  -webkit-overflow-scrolling:touch !important;
  scrollbar-width:none !important;

  box-sizing:border-box !important;
  clear:both !important;

  padding:8px 2px 8px !important;
  margin:34px 0 4px 0 !important;

  transform:none !important;
  float:none !important;
}

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

/* Cada botão vira item horizontal fixo */
html body .clbs-actions > .clbs-btn,
html body .clbs-actions button.clbs-btn,
html body .clbs-actions a.clbs-btn{
  position:relative !important;

  display:inline-flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !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;

  padding:4px 4px !important;
  margin:0 !important;

  box-sizing:border-box !important;
  white-space:nowrap !important;
  overflow:hidden !important;

  float:none !important;
  clear:none !important;
  transform:none;
}

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

/* Salve sem palavra dentro */
html body .clbs-actions > .clbs-btn[data-action="salve"] .clbs-label,
html body .clbs-actions > .clbs-salve .clbs-label{
  display:none !important;
}

/* Se Salve estiver zerado, mostra só emoji */
html body .clbs-actions > .clbs-btn[data-action="salve"].clb-salve-empty .clbs-count,
html body .clbs-actions > .clbs-salve.clb-salve-empty .clbs-count{
  display:none !important;
}

html body .clbs-actions > .clbs-btn .clbs-emoji{
  display:block !important;
  font-size:15px !important;
  line-height:1 !important;
}

html body .clbs-actions > .clbs-btn .clbs-count{
  display:block !important;
  font-size:10px !important;
  line-height:1 !important;
  font-weight:900 !important;
}

html body .clbs-actions > .clbs-btn .clbs-label{
  display:block !important;
  font-size:7.5px !important;
  line-height:1 !important;
  font-weight:900 !important;
  max-width:100% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* Evita qualquer coluna criada por CSS antigo */
html body .clbs-actions > br,
html body .clbs-actions > hr{
  display:none !important;
}

/* Respira no final da rolagem */
html body .clbs-actions::after{
  content:"" !important;
  display:block !important;
  flex:0 0 8px !important;
  width:8px !important;
  height:1px !important;
  order:99 !important;
}

/* Mobile */
@media(max-width:760px){
  html body .clbs-actions{
    gap:6px !important;
    min-height:46px !important;
    margin-top:28px !important;
    padding-top:8px !important;
    padding-bottom:8px !important;
  }

  html body .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;
  }
}

/* Notebook */
@media(min-width:1024px){
  html body .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;
  }
}
