/* style.css — sistema de design compartilhado, além dos utilitários do Tailwind (CDN). */

:root {
  /* "R G B" (sem vírgula, formato exigido dentro de rgb(var(...) / alpha)) —
     fallback = o laranja padrão (#FF6823). cliente/cardapio.js e
     restaurante/painel.js sobrescrevem isso com a cor cadastrada pelo
     restaurante (restaurants.theme_color, migration 0012) assim que os
     dados do restaurante carregam — ver applyThemeColor() em js/util.js e
     `colors.brand.orange` no tailwind.config de cada index.html. */
  --brand-orange-rgb: 255 104 35;
}

/* ---- Paleta do cardápio do cliente (cliente/index.html, tailwind "surface"/"ink") ----
   Escuro é o padrão (também vale se o JS falhar); js/theme.js liga
   data-theme="light" pra quem prefere claro. Triplets "R G B" pro Tailwind
   aplicar opacidade (bg-surface/95, bg-ink/10...). */
:root {
  --surface: 18 18 18;
  --surface-card: 28 26 25;
  --surface-raised: 36 33 32;
  --surface-line: rgba(255, 255, 255, 0.07);
  --ink: 255 255 255;
}
html[data-theme='light'] {
  --surface: 246 243 238;
  --surface-card: 255 255 255;
  --surface-raised: 240 236 229;
  --surface-line: rgba(23, 23, 23, 0.1);
  --ink: 23 23 23;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #d4d4d4 transparent;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: #fafafa; /* neutral-50 */
  color: #171717; /* neutral-900 */
  font-family: 'Inter', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #d4d4d4;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a3a3a3;
}

/* ---- Sombras nas cores da marca (o mesmo brilho colorido do logo em 3D)
   aplicadas nos botões/CTAs principais, pra dar profundidade em vez do
   preto/cinza padrão do shadow do Tailwind. ---- */
.shadow-brand-blue {
  box-shadow: 0 10px 24px -8px rgba(37, 99, 235, 0.45), 0 2px 8px rgba(37, 99, 235, 0.18);
}
.shadow-brand-ai {
  box-shadow: 0 10px 24px -8px rgba(230, 57, 70, 0.4), 0 2px 8px rgb(var(--brand-orange-rgb) / 0.22);
}


/* ---- Cartões com leve elevação ao passar o mouse ---- */
.card-hover {
  transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
}
.card-hover:hover {
  box-shadow: 0 6px 20px rgba(23, 23, 23, 0.08);
  transform: translateY(-1px);
  border-color: #e5e5e5;
}

/* ---- Botões de quantidade (carrinho) ---- */
.qty-btn {
  transition: background-color 0.15s ease, transform 0.1s ease;
}
.qty-btn:active {
  transform: scale(0.9);
}

/* ---- Toasts ---- */
#toast-container {
  pointer-events: none;
}
.toast-item {
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.toast-item.toast-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.toast-item.toast-out {
  opacity: 0;
  transform: translateY(-10px) scale(0.96);
}

/* ---- Modais (confirmação, QR, formulário, chat) ---- */
@keyframes modal-overlay-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-box-in {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-overlay {
  animation: modal-overlay-in 0.15s ease;
  /* iOS Safari não encolhe 100dvh quando o teclado abre, e ainda rola a
     página pra levantar o campo focado — o que desloca elementos "fixed"
     (como este overlay) da área realmente visível. cardapio.js mantém
     --vvh/--vv-top atualizados com window.visualViewport (altura e
     deslocamento do topo da área visível de verdade). Repetir cada
     declaração é proposital: navegadores sem suporte a var() ignoram a
     segunda linha e ficam com o fallback (100dvh / top:0) da primeira. */
  /* !important necessário: o CDN do Tailwind reinjeta o CSS dele conforme
     novas classes aparecem no DOM (ex: a primeira vez que um modal abre) e
     pode acabar vindo DEPOIS deste arquivo na cascata — sem isso, "top" (que
     a própria classe utilitária "inset-0" também define) volta a ganhar de
     "top: var(--vv-top)" dependendo da ordem de carregamento. */
  height: 100dvh !important;
  height: var(--vvh, 100dvh) !important;
  top: 0 !important;
  top: var(--vv-top, 0px) !important;
}
.modal-box {
  animation: modal-box-in 0.18s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Com o teclado aberto (ver cardapio.js, syncVisualViewport), o chat usa
   100% da área visível em vez dos 88% padrão — sem a folga de "bottom
   sheet" no topo, pra sobrar o máximo de espaço pra ler a conversa enquanto
   o cliente digita. Volta ao tamanho normal sozinho quando o teclado fecha.
   Só em telas pequenas: no desktop o chat tem altura fixa (sm:h-[34rem]) e
   não há teclado virtual disputando espaço. */
@media (max-width: 639px) {
  .keyboard-open #chat-box {
    height: 100dvh;
    height: var(--vvh, 100dvh);
  }
}

/* ---- Indicador de digitação do garçom IA ---- */
.typing-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.35;
  animation: typing-bounce 1.1s infinite ease-in-out;
}
.typing-dot:nth-child(2) {
  animation-delay: 0.15s;
}
.typing-dot:nth-child(3) {
  animation-delay: 0.3s;
}
@keyframes typing-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.35; }
  30% { transform: translateY(-4px); opacity: 1; }
}

/* ---- Entrada suave de itens de lista ---- */
@keyframes fade-slide-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.fade-slide-in {
  animation: fade-slide-in 0.22s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* ---- Placeholder de imagem ausente ---- */
.img-placeholder {
  background: linear-gradient(135deg, #f5f5f5, #e5e5e5);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a3a3a3;
}

/* ---- Ergonomia mobile (crítico na página do cardápio: é aberta pelo QR Code no celular) ---- */

/* Remove o delay de 300ms no tap e o flash cinza padrão do Android/iOS ao tocar
   em botões/links — sem isso, toda interação parece "atrasada" no celular. */
button,
a,
input,
select,
textarea {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* iOS dá zoom automático ao focar em campo de texto com fonte menor que 16px.
   O !important é proposital: precisa vencer utilitários do Tailwind (text-sm
   etc.) aplicados inline nos inputs, sem precisar caçar cada um deles. */
@media (max-width: 640px) {
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* Containers de scroll "internos" (mensagens do chat, lista do carrinho
   aberta): sem isso, ao chegar no topo/fim do scroll interno o dedo continua
   arrastando e rola o fundo da página junto — comportamento clássico e
   incômodo em bottom sheets no mobile. */
.scroll-contain {
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

/* Respiro extra em elementos fixos na borda inferior da tela, para não ficarem
   colados no home indicator (iPhone) ou na barra de gestos (Android). */
.safe-bottom {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---- Cartões de ação do garçom IA (ele mexeu no carrinho pela conversa) ----
   Estilo "linha de recibo": cartão escuro neutro (o chat do cardápio é tema
   escuro — ver cliente/cardapio.js), uma borda lateral colorida e um selo com
   o ícone — mais discreto e "profissional" do que uma pílula colorida cheia,
   mas ainda dá pra distinguir o tipo de ação num relance. */
.action-card {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.5rem 0.75rem 0.5rem 0.65rem;
  border-radius: 0.7rem;
  border: 1px solid var(--surface-line);
  border-left: 3px solid var(--action-accent, #a3a3a3);
  background: rgb(var(--surface-card));
  color: rgb(var(--ink));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  opacity: 0;
  animation: action-card-in 0.32s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.action-card-icon {
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  line-height: 1;
  flex-shrink: 0;
  background: var(--action-accent-bg, rgb(var(--ink) / 0.08));
  color: var(--action-accent, #a3a3a3);
}
.action-card--add {
  --action-accent: #2ecc71;
  --action-accent-bg: rgba(46, 204, 113, 0.16);
}
.action-card--remove {
  --action-accent: #ef4444;
  --action-accent-bg: rgba(239, 68, 68, 0.16);
  animation-name: action-card-in-side;
}
.action-card--qty {
  --action-accent: #3b82f6;
  --action-accent-bg: rgba(59, 130, 246, 0.16);
}
.action-card--note {
  --action-accent: rgb(var(--brand-orange-rgb));
  --action-accent-bg: rgb(var(--brand-orange-rgb) / 0.16);
}
@keyframes action-card-in {
  from { opacity: 0; transform: translateY(8px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes action-card-in-side {
  from { opacity: 0; transform: translateX(-12px) scale(0.97); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}

/* Sugere que os chips de sugestão do chat continuam além da borda — sem
   precisar de JS pra saber se ainda dá pra rolar. */
.chip-scroll-fade {
  mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 28px), transparent);
}

/* ---- Pulso do botão/contador do carrinho quando o chat altera o pedido ---- */
@keyframes cart-pulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.05); }
  100% { transform: scale(1); }
}
.cart-pulse {
  animation: cart-pulse 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes badge-bump {
  0% { transform: scale(1); }
  45% { transform: scale(1.3); }
  100% { transform: scale(1); }
}
.badge-bump {
  animation: badge-bump 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ---- Destaque temporário da linha do carrinho que o chat acabou de mudar ---- */
@keyframes row-highlight {
  0% { background-color: rgb(var(--brand-orange-rgb) / 0.22); }
  100% { background-color: transparent; }
}
.row-highlight {
  animation: row-highlight 1.8s ease;
}

/* Respeita quem prefere menos movimento: zera duração/atraso de toda
   animação e transição do site, incluindo os cartões de ação e seus atrasos
   escalonados — os elementos aparecem, só que sem a coreografia. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---- Tema escuro do admin e do painel do restaurante (js/theme.js) ----
   Essas telas são escritas com utilitários "claros" do Tailwind (bg-white,
   text-neutral-*, border-neutral-*). Em vez de duplicar cada classe com
   dark:, o tema escuro reescreve aqui só as poucas classes usadas. O cardápio
   do cliente tem tema próprio e nunca recebe data-theme, então não é afetado. */
.theme-icon-sun {
  display: none;
}
html[data-theme='dark'] .theme-icon-sun {
  display: block;
}
html[data-theme='dark'] .theme-icon-moon {
  display: none;
}

html[data-theme='dark'] {
  color-scheme: dark;
}
html[data-theme='dark']:not([data-app='menu']) body {
  background-color: #121212;
  color: #f5f5f4;
}
html[data-theme='dark']:not([data-app='menu']) * {
  scrollbar-color: #44403c transparent;
}
html[data-theme='dark']:not([data-app='menu']) ::-webkit-scrollbar-thumb {
  background: #44403c;
}

/* superfícies */
html[data-theme='dark']:not([data-app='menu']) .bg-white { background-color: #1c1a19; }
html[data-theme='dark']:not([data-app='menu']) .bg-white\/90 { background-color: rgb(28 26 25 / 0.9); }
html[data-theme='dark']:not([data-app='menu']) .bg-neutral-50 { background-color: #121212; }
html[data-theme='dark']:not([data-app='menu']) .bg-neutral-100,
html[data-theme='dark']:not([data-app='menu']) .hover\:bg-neutral-100:hover { background-color: #242120; }
html[data-theme='dark']:not([data-app='menu']) .bg-neutral-200,
html[data-theme='dark']:not([data-app='menu']) .hover\:bg-neutral-200:hover { background-color: #2f2c2a; }
html[data-theme='dark']:not([data-app='menu']) .via-neutral-50 { --tw-gradient-stops: var(--tw-gradient-from), #121212, var(--tw-gradient-to); }
html[data-theme='dark']:not([data-app='menu']) .bg-neutral-900 { background-color: #3a3635; }
html[data-theme='dark']:not([data-app='menu']) .bg-emerald-100 { background-color: rgb(16 185 129 / 0.18); }
html[data-theme='dark']:not([data-app='menu']) .hover\:bg-emerald-50:hover { background-color: rgb(16 185 129 / 0.12); }

/* texto */
html[data-theme='dark']:not([data-app='menu']) .text-neutral-900 { color: #f5f5f4; }
html[data-theme='dark']:not([data-app='menu']) .text-neutral-800,
html[data-theme='dark']:not([data-app='menu']) .text-neutral-700 { color: #d6d3d1; }
html[data-theme='dark']:not([data-app='menu']) .text-neutral-600,
html[data-theme='dark']:not([data-app='menu']) .hover\:text-neutral-600:hover { color: #b5b0ad; }
html[data-theme='dark']:not([data-app='menu']) .text-neutral-500 { color: #a09b98; }
html[data-theme='dark']:not([data-app='menu']) .text-neutral-400 { color: #8a8582; }
html[data-theme='dark']:not([data-app='menu']) .text-neutral-300 { color: #57534e; }
html[data-theme='dark']:not([data-app='menu']) .text-emerald-700 { color: #6ee7b7; }
html[data-theme='dark']:not([data-app='menu']) .text-emerald-600 { color: #34d399; }

/* bordas */
html[data-theme='dark']:not([data-app='menu']) .border-neutral-100 { border-color: rgb(255 255 255 / 0.06); }
html[data-theme='dark']:not([data-app='menu']) .border-neutral-200 { border-color: rgb(255 255 255 / 0.1); }
html[data-theme='dark']:not([data-app='menu']) .border-neutral-300 { border-color: rgb(255 255 255 / 0.18); }

/* campos de formulário (o navegador pinta branco por padrão) */
html[data-theme='dark']:not([data-app='menu']) input:not([type='color']):not([type='checkbox']):not([type='radio']),
html[data-theme='dark']:not([data-app='menu']) select,
html[data-theme='dark']:not([data-app='menu']) textarea {
  background-color: #1c1a19;
  color: #f5f5f4;
}
html[data-theme='dark']:not([data-app='menu']) ::placeholder {
  color: #78716c;
}

/* Logo: duas versões no DOM (js/logo.js); no escuro entra a de "Papei" claro. */
.logo-on-dark {
  display: none;
}
html[data-theme='dark'] .logo-on-light,
html[data-logo='dark'] .logo-on-light {
  display: none;
}
html[data-theme='dark'] .logo-on-dark,
html[data-logo='dark'] .logo-on-dark {
  display: block;
}

/* ---- Tela de login / primeiro acesso do painel (restaurante/auth.js) ----
   Desktop: painel da marca (Ari flutuando sobre manchas em movimento) + card
   do formulário. Mobile: só o card, sobre o mesmo fundo com manchas.
   prefers-reduced-motion já zera todas as animações (regra global acima). */
.auth-page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
  background: linear-gradient(160deg, #f6f1e8 0%, #fbe6d6 60%, #ffd0b0 100%);
  overflow: hidden;
}
@media (min-width: 1024px) {
  .auth-page {
    grid-template-columns: 1.05fr 1fr;
    background: #f6f1e8;
  }
}

.auth-hero {
  position: relative;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 48px;
  overflow: hidden;
  background: linear-gradient(135deg, #f6f1e8 0%, #fbe3d2 55%, #ffb98a 100%);
}
@media (min-width: 1024px) {
  .auth-hero {
    display: flex;
  }
}

.auth-blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(64px);
  pointer-events: none;
  animation: auth-blob 14s ease-in-out infinite alternate;
}
.auth-blob--orange {
  width: 420px;
  height: 420px;
  top: -90px;
  right: -110px;
  background: #ff6823;
  opacity: 0.5;
}
.auth-blob--blue {
  width: 340px;
  height: 340px;
  bottom: -110px;
  left: -90px;
  background: #2563eb;
  opacity: 0.22;
  animation-delay: -6s;
}
@keyframes auth-blob {
  to { transform: translate(34px, -26px) scale(1.14); }
}

.auth-ari {
  filter: drop-shadow(0 26px 30px rgba(10, 44, 85, 0.28));
  /* a imagem termina num corte seco (a "bancada"): esmaece a borda de baixo */
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 82%, transparent 100%);
  animation: auth-float 6s ease-in-out infinite;
}
@keyframes auth-float {
  50% { transform: translateY(-14px); }
}

.auth-hero-title { color: #0a2c55; }
.auth-hero-sub { color: rgba(10, 44, 85, 0.7); }

.auth-main {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 72px 16px 32px;
}
/* manchas do fundo só no mobile (no desktop quem faz isso é o painel da marca) */
.auth-main .auth-blob {
  display: block;
}
@media (min-width: 1024px) {
  .auth-main .auth-blob {
    display: none;
  }
}

.auth-card {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 32px 28px;
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 24px 60px -24px rgba(10, 44, 85, 0.4), 0 2px 8px rgba(10, 44, 85, 0.06);
  animation: auth-card-in 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@media (min-width: 640px) {
  .auth-card {
    padding: 40px 36px;
  }
}
@keyframes auth-card-in {
  from { opacity: 0; transform: translateY(26px) scale(0.97); }
  to { opacity: 1; transform: none; }
}

/* Filhos do card entram em cascata */
.auth-stagger > * {
  animation: auth-rise 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.auth-stagger > *:nth-child(1) { animation-delay: 0.08s; }
.auth-stagger > *:nth-child(2) { animation-delay: 0.14s; }
.auth-stagger > *:nth-child(3) { animation-delay: 0.2s; }
.auth-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.auth-stagger > *:nth-child(5) { animation-delay: 0.32s; }
.auth-stagger > *:nth-child(6) { animation-delay: 0.38s; }
@keyframes auth-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

/* Campo com ícone à esquerda (e olho de senha à direita) */
.auth-field {
  position: relative;
}
.auth-field .auth-lead {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  color: #a3a3a3;
  transition: color 0.2s ease, transform 0.2s ease;
  pointer-events: none;
}
.auth-field:focus-within .auth-lead {
  color: #ff6823;
  transform: translateY(-50%) scale(1.1);
}
.auth-input {
  width: 100%;
  padding: 14px 46px 14px 46px;
  font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */
  border: 1.5px solid #e5e5e5;
  border-radius: 14px;
  background: #fafafa;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}
.auth-input:hover {
  border-color: #d4d4d4;
}
.auth-input:focus {
  outline: none;
  border-color: #ff6823;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(255, 104, 35, 0.16);
}
.auth-eye {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a3a3a3;
  border-radius: 10px;
  transition: color 0.2s ease, background-color 0.2s ease;
}
.auth-eye:hover {
  color: #ff6823;
  background: rgba(255, 104, 35, 0.1);
}

/* Botão principal: gradiente da marca com brilho que atravessa no hover */
.auth-btn {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding: 14px 16px;
  border-radius: 14px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #ff6823, #e63946);
  box-shadow: 0 14px 26px -12px rgba(230, 57, 70, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.auth-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%);
  transform: translateX(-110%);
  pointer-events: none;
}
.auth-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 18px 30px -12px rgba(230, 57, 70, 0.7);
}
.auth-btn:hover:not(:disabled)::after {
  transform: translateX(110%);
  transition: transform 0.7s ease;
}
.auth-btn:active:not(:disabled) {
  transform: scale(0.985);
}
.auth-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}
.auth-spinner {
  animation: auth-spin 0.8s linear infinite;
}
@keyframes auth-spin {
  to { transform: rotate(360deg); }
}

.auth-link {
  font-size: 14px;
  color: #737373;
  transition: color 0.2s ease;
}
.auth-link:hover {
  color: #ff6823;
}

.auth-error {
  animation: auth-shake 0.4s ease both;
}
@keyframes auth-shake {
  20%, 60% { transform: translateX(-6px); }
  40%, 80% { transform: translateX(6px); }
}
.auth-info {
  animation: auth-rise 0.4s ease both;
}

/* Passos do primeiro acesso: E-mail, Confirmar, Senha */
.auth-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 18px;
}
.auth-step-dot {
  width: 26px;
  height: 26px;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #a3a3a3;
  background: #f0f0f0;
  transition: all 0.3s ease;
}
.auth-step-dot.is-current {
  color: #fff;
  background: #ff6823;
  box-shadow: 0 0 0 5px rgba(255, 104, 35, 0.18);
}
.auth-step-dot.is-done {
  color: #fff;
  background: #10b981;
}
.auth-step-bar {
  width: 28px;
  height: 3px;
  border-radius: 2px;
  background: #f0f0f0;
}
.auth-step-bar.is-done {
  background: #10b981;
}

/* Envelope pulsante da tela "confirme seu e-mail" */
.auth-mail-badge {
  position: relative;
  width: 76px;
  height: 76px;
  margin: 0 auto;
  border-radius: 9999px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff6823;
  background: rgba(255, 104, 35, 0.12);
}
.auth-mail-badge::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  border: 2px solid rgba(255, 104, 35, 0.5);
  animation: auth-pulse 2s ease-out infinite;
}
@keyframes auth-pulse {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(1.6); opacity: 0; }
}

/* Tema escuro */
html[data-theme='dark'] .auth-page {
  background: linear-gradient(160deg, #161312 0%, #1d1512 60%, #2a1a12 100%);
}
@media (min-width: 1024px) {
  html[data-theme='dark'] .auth-page {
    background: #121212;
  }
}
html[data-theme='dark'] .auth-hero {
  background: linear-gradient(135deg, #1a1614 0%, #241812 55%, #3a2114 100%);
}
html[data-theme='dark'] .auth-hero-title { color: #f5f5f4; }
html[data-theme='dark'] .auth-hero-sub { color: #b5b0ad; }
html[data-theme='dark'] .auth-blob--orange { opacity: 0.32; }
html[data-theme='dark'] .auth-blob--blue { opacity: 0.18; }
html[data-theme='dark'] .auth-card {
  background: #1c1a19;
  box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.06);
}
html[data-theme='dark'] .auth-input {
  background: #242120;
  border-color: rgba(255, 255, 255, 0.12);
}
html[data-theme='dark'] .auth-input:hover {
  border-color: rgba(255, 255, 255, 0.22);
}
html[data-theme='dark'] .auth-input:focus {
  background: #2a2624;
  border-color: #ff6823;
}
html[data-theme='dark'] .auth-link {
  color: #a09b98;
}
html[data-theme='dark'] .auth-link:hover {
  color: #ff8a52;
}
html[data-theme='dark'] .auth-step-dot,
html[data-theme='dark'] .auth-step-bar {
  background: #2f2c2a;
}
html[data-theme='dark'] .auth-step-dot.is-current { background: #ff6823; }
html[data-theme='dark'] .auth-step-dot.is-done,
html[data-theme='dark'] .auth-step-bar.is-done { background: #10b981; }

/* ---- Cardápio do cliente: ajustes do tema claro ----
   Os cinzas de texto do cardápio (neutral-200..500) foram escolhidos pra
   fundo escuro; no claro precisam escurecer pra manter contraste. Escopo
   .menu-app: admin e painel não são afetados. */
html[data-theme='light'] .menu-app .text-neutral-500 { color: #6b6662; }
html[data-theme='light'] .menu-app .text-neutral-400 { color: #77716d; }
html[data-theme='light'] .menu-app .text-neutral-300,
html[data-theme='light'] .menu-app .hover\:text-neutral-300:hover { color: #57524e; }
html[data-theme='light'] .menu-app .text-neutral-200 { color: #3a3634; }
html[data-theme='light'] .menu-app ::placeholder { color: #9a948f; }

/* Botão de tema no cabeçalho do cardápio: segue as cores da paleta em vez das
   do admin (as classes de hover dele assumem fundo branco). */
.menu-app .theme-toggle {
  color: rgb(var(--ink) / 0.6);
}
.menu-app .theme-toggle:hover {
  color: rgb(var(--ink));
  background: rgb(var(--ink) / 0.1);
}