/* =========================================================
   TOPBAR MOBILE SIMPLES
   Mostra apenas:
   - Logo
   - 2 botões (Entrar/Publicar ou Minha conta/Sair)
   ========================================================= */

@media (max-width: 920px){

  /* Estrutura base */
  .topbar{
    width:100%;
  }

  .topbar .topbar-inner{
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    flex-wrap:nowrap !important;
    min-width:0 !important;
  }

  /* Esconde menu desktop */
  .topbar .menu{
    display:none !important;
  }

  /* Esconde hamburger */
  .topbar .hamburger{
    display:none !important;
  }

  /* Esconde mobile menu inteiro */
  .topbar .mobile-menu{
    display:none !important;
  }

  /* Logo nunca encolhe */
  .topbar .brand{
    flex:0 0 auto !important;
  }

  .topbar .brand-logo{
    height:100px !important;     /* ← tamanho ideal no mobile */
    width:auto !important;
    flex-shrink:0 !important;
    display:block !important;
  }

  /* Ações (botões) */
  .topbar .topbar-actions{
    display:flex !important;
    align-items:center !important;
    gap:8px !important;
    flex:0 0 auto !important;
    white-space:nowrap !important;
  }

  /* Esconde qualquer coisa extra dentro das actions */
  .topbar .topbar-actions > *{
    display:none !important;
  }

  /* Mostra apenas os dois primeiros elementos */
  .topbar .topbar-actions > :nth-child(1),
  .topbar .topbar-actions > :nth-child(2){
    display:inline-flex !important;
  }

  /* Ajuste visual dos botões */
  .topbar .topbar-actions .btn{
    padding:10px 12px !important;
    font-size:13px !important;
  }
}


/* MOBILE BEM PEQUENO */
@media (max-width: 420px){

  .topbar .brand-logo{
    height:52px !important;
  }

  .topbar .topbar-actions .btn{
    padding:9px 10px !important;
    font-size:12.5px !important;
  }
}
/* =========================================================
   TOPBAR MOBILE ESTILO APP
   Logo centralizada
   Botões abaixo
========================================================= */

@media (max-width: 920px){

  /* Esconde menu desktop */
  .topbar .menu{ display:none !important; }

  /* Esconde hamburger */
  .topbar .hamburger{ display:none !important; }

  /* Esconde mobile-menu antigo */
  .topbar .mobile-menu{ display:none !important; }

  /* Topbar estrutura vertical */
  .topbar .topbar-inner{
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:14px !important;
    padding:16px 0 !important;
  }

  /* Logo centralizada e maior */
  .topbar .brand{
    display:flex !important;
    justify-content:center !important;
  }

  .topbar .brand-logo{
    height:100px !important;
    width:auto !important;
    display:block !important;
  }

  /* Área dos botões */
  .topbar .topbar-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    padding:0 16px !important;
  }

  /* Esconde qualquer coisa extra */
  .topbar .topbar-actions > *{
    display:none !important;
  }

  /* Mostra apenas os 2 primeiros */
  .topbar .topbar-actions > :nth-child(1),
  .topbar .topbar-actions > :nth-child(2){
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
  }

  /* Botões estilo mobile */
  .topbar .topbar-actions .btn{
    width:100% !important;
    padding:12px 14px !important;
    font-size:14px !important;
  }
}


/* Mobile pequeno */
@media (max-width: 420px){

  .topbar .brand-logo{
    height:64px !important;
  }

  .topbar .topbar-actions{
    gap:8px !important;
    padding:0 12px !important;
  }

  .topbar .topbar-actions .btn{
    padding:11px 12px !important;
    font-size:13px !important;
  }
}