/* area-de-membros/assets/menu-mobile.css
   Barra de menu inferior (mobile) + gaveta. TUDO dentro do breakpoint mobile:
   acima de 960px a barra some (display:none) e a sidebar segue igual.
   Carregar DEPOIS do <style> inline da página pra vencer a cascata. */

/* Ocultos por padrão (desktop): a barra, o backdrop e o ✕ só existem no mobile. */
.mm-bar,
.mm-backdrop,
.mm-close {
  display: none;
}

@media (max-width: 960px) {
  /* ===== barra fixa embaixo ===== */
  .mm-bar {
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1000;
    height: 60px;
    background: #fff;
    border-top: 1px solid var(--beige, #bfb1a2);
    box-shadow: 0 -2px 8px rgba(0, 0, 45, 0.06);
    justify-content: space-around;
    align-items: stretch;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mm-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--navy, #00002d);
    background: none;
    border: none;
    cursor: pointer;
    text-decoration: none;
    -webkit-tap-highlight-color: transparent;
  }
  .mm-item svg {
    width: 26px;
    height: 26px;
    display: block;
  }
  .mm-item.active {
    color: var(--red, #d31900);
  }
  .mm-item:active {
    background: rgba(0, 0, 45, 0.06);
  }

  /* ===== sidebar vira gaveta off-canvas ===== */
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 82%;
    max-width: 320px;
    height: 100%;
    z-index: 1002;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    overflow-y: auto;
    box-shadow: 2px 0 12px rgba(0, 0, 45, 0.15);
  }
  body.drawer-open .sidebar {
    transform: translateX(0);
  }

  /* ===== backdrop ===== */
  .mm-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(0, 0, 45, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.drawer-open .mm-backdrop {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  body.drawer-open {
    overflow: hidden;
  }

  /* ===== botão ✕ no topo da gaveta ===== */
  .mm-close {
    display: block;
    position: fixed;
    top: 10px;
    right: 12px;
    font-size: 22px;
    line-height: 1;
    background: none;
    border: none;
    color: var(--cream, #fefaf1);
    cursor: pointer;
    z-index: 1;
  }

  /* conteúdo não fica escondido sob a barra fixa */
  .main {
    padding-bottom: 80px;
  }
}