/**
 * Navegação — Modo Cliente (FRONT-002)
 * 5 destinos fixos, ordem fixa, ícone+texto sempre: Início, Reservas,
 * Comanda, Peladas, Perfil. "Pedidos" nunca é item principal.
 *
 * Breakpoint de troca mobile->desktop: 1024px (ver comentário em tokens.css).
 * A navegação mobile e a desktop nunca ficam visíveis ao mesmo tempo —
 * controlado só por @media em responsive.css, sem JS.
 */

/* ---------- Navegação mobile (bottom nav) ---------- */
.cliente-nav-mobile {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--cliente-z-nav);
  min-height: var(--cliente-altura-nav-mobile);
  box-sizing: border-box;
  display: flex;
  justify-content: space-around;
  padding: var(--cliente-space-2) var(--cliente-space-1) var(--cliente-space-2);
  padding-bottom: calc(var(--cliente-space-2) + var(--cliente-safe-bottom));
  background: var(--cliente-fundo-escuro);
  border-top: 1px solid var(--cliente-borda-escura);
}

/* Especificidade reforçada (`.cliente-nav-mobile .cliente-nav-mobile__item`,
   não só `.cliente-nav-mobile__item`) de propósito: `.cliente a { color:
   inherit }` (base.css) tem 1 classe + 1 elemento e por isso VENCIA esta
   regra (1 classe só), fazendo os itens inativos herdarem a cor de texto do
   tema claro (escura) e ficarem literalmente invisíveis sobre o fundo
   sempre-escuro da navegação — bug real só visível em captura de tela,
   nunca em revisão de código nem inspeção de HTML puro (FRONT-008). */
.cliente-nav-mobile .cliente-nav-mobile__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: var(--cliente-fw-semibold);
  color: var(--cliente-texto-claro-secundario);
  min-width: var(--cliente-altura-toque-minima);
  min-height: var(--cliente-altura-toque-minima);
  padding: var(--cliente-space-1) var(--cliente-space-2);
  border-radius: 12px;
  flex: 1;
  max-width: 84px;
}

.cliente-nav-mobile__item svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.cliente-nav-mobile__item[aria-current="page"] {
  color: var(--cliente-verde);
}

.cliente-nav-mobile__ponto {
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--cliente-verde);
  margin-bottom: 2px;
}

.cliente-nav-mobile__item[aria-disabled="true"] {
  opacity: .35;
  pointer-events: none;
}

/* ---------- Navegação desktop (barra superior) ---------- */
.cliente-nav-desktop {
  display: none;
  height: var(--cliente-altura-nav-desktop);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--cliente-space-8);
  background: var(--cliente-fundo-escuro);
  border-bottom: 1px solid var(--cliente-borda-escura);
  position: sticky;
  top: 0;
  z-index: var(--cliente-z-nav);
}

/* RC-002-R2 — mesma classe de bug já documentada acima para
   `.cliente-nav-mobile__item` (linhas 28-34): `.cliente a { color:
   inherit }` (base.css) tem 1 classe + 1 elemento, especificidade
   maior que só `.cliente-nav-desktop__marca` (1 classe) — o texto
   "ARENA" (sem span próprio de cor, ao contrário de "PRO7") herdava a
   cor de texto do tema claro e ficava invisível sobre o fundo
   sempre-escuro desta barra. Reforçada com o mesmo padrão de
   especificidade (`.cliente-nav-desktop .cliente-nav-desktop__marca`). */
.cliente-nav-desktop .cliente-nav-desktop__marca {
  display: flex;
  align-items: center;
  gap: var(--cliente-space-2);
  color: #fff;
}

/* RC-001 — logo real (asset('img/logo.png')) exibida na marca do portal;
   .cliente-nav-desktop__logo (abaixo) vira só o fallback textual "A7" se
   a imagem falhar ao carregar (ver onerror inline em desktop-nav.php). */
.cliente-nav-desktop__logo-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* RC-002-R2 — `display: flex` incondicional aqui vencia o atributo
   `hidden` (mesmo padrão de bug já visto em outras telas do projeto:
   `hidden` só remove a caixa se nenhuma classe redeclarar `display`
   sem ressalva) — o selo "A7" antigo aparecia ao lado da logo real
   mesmo com a imagem carregando com sucesso. Escopado com
   `:not([hidden])` para que o atributo sempre prevaleça. */
.cliente-nav-desktop__logo:not([hidden]) {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--cliente-verde);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--cliente-fw-black);
  font-size: 15px;
}

.cliente-nav-desktop__texto {
  font-weight: var(--cliente-fw-black);
  font-size: 15px;
  letter-spacing: .03em;
}

.cliente-nav-desktop__texto span {
  color: var(--cliente-verde);
}

.cliente-nav-desktop__itens {
  display: flex;
  align-items: center;
  gap: var(--cliente-space-1);
}

/* Mesmo reforço de especificidade e mesmo motivo do bug de
   `.cliente-nav-mobile__item` acima — a navegação desktop tem fundo
   sempre-escuro independente do tema da página. */
.cliente-nav-desktop .cliente-nav-desktop__item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px var(--cliente-space-4);
  border-radius: 999px;
  font-size: 13px;
  font-weight: var(--cliente-fw-semibold);
  color: var(--cliente-texto-claro-secundario);
}

.cliente-nav-desktop__item svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.cliente-nav-desktop__item[aria-current="page"] {
  background: rgba(22, 163, 74, .18);
  color: #fff;
}

.cliente-nav-desktop__item[aria-disabled="true"] {
  opacity: .35;
  pointer-events: none;
}

.cliente-nav-desktop__avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: #334155;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: var(--cliente-fw-bold);
  font-size: 12px;
}