/* Estilos para o overlay e o botão, visíveis por padrão em mobile */
.menu-sidebar-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998; /* Abaixo do menu */
  display: none; /* Escondido por padrão, será mostrado via JavaScript */
}

.meu-menu-sidebar-botao {
  background-color: #0073aa;
  color: white;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: block; /* Visível por padrão em mobile */
}

/* Oculta o overlay e o botão em telas maiores (desktop) */
@media (min-width: 430px) {
  /* Você pode ajustar este valor de breakpoint conforme sua necessidade */
  .menu-sidebar-overlay,
  .menu-sidebar,
  .meu-menu-sidebar-botao {
    display: none;
  }
}

.meu-menu-sidebar-botao:hover {
  background-color: #005177;
}

/* Estilos para o menu lateral */
.menu-sidebar {
  position: fixed;
  top: 0;
  right: -300px; /* Mantém a posição inicial oculta. O valor exato pode ser ajustado com base na largura final */
  width: 70vw; /* Define a largura para 70% da largura da viewport */
  height: 100%;
  background-color: white;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: center; */ /* Remova essa linha se ela estiver causando overflow horizontal */

  /* Garante que o menu não seja muito estreito nem muito largo */
  min-width: 250px; /* Largura mínima para garantir usabilidade em telas muito pequenas */
  max-width: 400px; /* Largura máxima para que não fique gigante em telas muito grandes, ajuste conforme necessário */
}

/* Opcional: Se o conteúdo interno estiver transbordando */
.menu-sidebar ul,
.menu-sidebar div {
  max-width: 100%; /* Garante que o conteúdo interno não exceda a largura do menu */
  box-sizing: border-box; /* Inclui padding e borda na largura total */
}

/* Se o conteúdo for longo, adicione scroll */
.menu-sidebar {
  overflow-y: auto; /* Adiciona scroll vertical se o conteúdo for muito longo */
  -webkit-overflow-scrolling: touch; /* Melhora o scroll em dispositivos iOS */
  display: none;
}

.menu-sidebar.aberto {
  right: 0;
}

.menu-sidebar-conteudo {
  flex-grow: 1; /* Permite que o conteúdo ocupe o espaço restante */
  padding: 20px;
  overflow-y: auto; /* Adiciona scroll se o conteúdo for muito grande */
  display: flex; /* Torna-o um container flex */
  flex-direction: column; /* Alinha o conteúdo interno em coluna */
  justify-content: center; /* Centraliza o conteúdo interno verticalmente */

  /* ADICIONE/AJUSTE ESTAS PROPRIEDADES: */
  width: 100%; /* Garante que o contêiner de conteúdo ocupe toda a largura disponível */
  box-sizing: border-box; /* Garante que o padding seja incluído na largura total */
  /* REMOVA esta linha: */
  /* align-items: center; */ /* Remova isso daqui também, ou ajuste o alinhamento no Elementor */
}