/* ================================================================
   ALDAX.CSS — Deixa as páginas antigas (meus pedidos, confirmação e
   rastreio) com o mesmo visual do início, cardápio e sacola (app.css).
   Carregado depois de style.css e da folha de cada página.
   ================================================================ */

:root {
  --radius:    16px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --radius-xl: 28px;
}

body { background: var(--bg); }

/* ---------- Cabeçalho escuro, igual ao das páginas novas ---------- */
.header {
  background: rgba(13, 12, 10, .88);
  -webkit-backdrop-filter: saturate(140%) blur(16px); backdrop-filter: saturate(140%) blur(16px);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.header__inner { height: 56px; }
.logo-name, .logo-name * { color: var(--text) !important; }
.header__logo img, .logo-icon img { border-radius: 50%; }
.header__page-title { color: var(--text) !important; font-weight: 800; font-size: 17px; }
.back-btn {
  background: transparent !important; border: 0 !important; color: var(--text) !important;
  font-weight: 700; font-size: 14px; padding: 8px 10px; border-radius: 12px !important;
}
.back-btn:active { background: rgba(255, 255, 255, .06) !important; }
.cart-btn {
  background: #1A1915; color: var(--text);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 999px; box-shadow: none;
}
.cart-btn:hover { background: #23211C; transform: none; box-shadow: none; }
.cart-count { background: var(--primary); color: var(--on-primary); border-radius: 999px; }

/* ---------- Botões ---------- */
.btn-primary {
  background: var(--primary); color: var(--on-primary);
  border-radius: 16px; font-weight: 800; letter-spacing: -.01em; text-transform: none;
  box-shadow: 0 10px 28px rgba(246, 189, 21, .22);
}
.btn-primary:hover { background: var(--primary-lt); }
.btn-wpp { border-radius: 16px; text-transform: none; letter-spacing: 0; }

/* ---------- Barra inferior: itens dividem o espaço todo ---------- */
@media (max-width: 768px) {
  .mobile-nav {
    display: flex; background: #0D0C0A;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .mobile-nav__item { flex: 1; min-width: 0; }
  .mobile-nav__item.active { color: var(--primary); }
}