<!-- Código HTML & JavaScript do Novo Botão "VENDER" -->
<script>
  document.addEventListener("DOMContentLoaded", function() {
    // Evita duplicar o botão caso o script rode duas vezes
    if (!document.getElementById("btn-vender-mobile")) {
      // Cria a estrutura do botão flutuante para mobile
      var btnVender = document.createElement("a");
      btnVender.id = "btn-vender-mobile";
      btnVender.href = "/oc-panel/publish"; // URL padrão de publicação do Yclas
      btnVender.innerText = "VENDER";
      
      // Injeta o botão diretamente no topo do corpo da página para garantir prioridade de renderização
      document.body.appendChild(btnVender);
    }
  });
</script>

<!-- Estilização CSS Avançada com Media Queries -->
<style>
  /* Oculta o botão customizado no Desktop por padrão para não interferir no cabeçalho original */
  #btn-vender-mobile {
    display: none;
  }

  /* Aplica as regras de posicionamento apenas no layout responsivo (Mobile/Tablet) */
  @media (max-width: 768px) {
    
    /* 1. Remove ou oculta o botão original de publicar que fica escondido/esmagado no menu */
    .header .btn-publish, 
    .navbar-nav .btn-publish,
    .mobile-navbar .btn-publish {
      display: none !important;
    }

    /* 2. Configura a área do cabeçalho original para abrir espaço se necessário */
    .header, .top-bar {
      position: relative;
    }

    /* 3. Estiliza o novo botão "VENDER" posicionado acima da barra de pesquisa, à direita */
    #btn-vender-mobile {
      display: block !important;
      position: absolute;
      top: 15px;               /* Distância exata do topo da tela */
      right: 15px;             /* Alinhado totalmente à direita */
      z-index: 99999;          /* Força o botão a ficar acima de qualquer elemento ou banner do tema */
      
      /* Design Visual do Botão */
      background-color: #f97316; /* Laranja Accent padrão do Tema Nova */
      color: #ffffff !important;
      font-family: 'Helvetica Neue', Arial, sans-serif;
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      padding: 8px 18px;
      border-radius: 4px;
      text-decoration: none !important;
      box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4);
      transition: background-color 0.2s ease, transform 0.1s ease;
    }

    /* Feedback visual ao clicar/tocar */
    #btn-vender-mobile:active {
      background-color: #ea580c;
      transform: scale(0.95);
    }

    /* 4. Ajuste fino na barra de pesquisa mobile do Tema NOVA */
    /* Garante que o input de busca ou a logo não fiquem sobrepostos pelo botão */
    .search-box-container, 
    .main-search-form,
    .hero-section .search-wrapper {
      margin-top: 55px !important; /* Cria o recuo perfeito para empurrar a busca para baixo do botão */
    }
  }
</style>
