:root {
  --orange-bg: #d95c08;    
  --orange-light: #ff7a1a; 
  --dark-red: #3d0505;     
  --gold: #ffb81c;         
}

body {
  font-family: 'Outfit', sans-serif;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* Fundo da tela: O foco luminoso fica bem atrás da logo */
.bg-theme {
  background: radial-gradient(circle at center 35%, var(--orange-light) 0%, #c44b00 100%);
}

/* Flutuação da Logo suave */
@keyframes float {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-8px); }
  100% { transform: translateY(0px); }
}
.logo-float {
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 15px 25px rgba(0,0,0,0.3));
}

/* Botão Elegante: Formato pílula, borda clara, sombra aconchegante */
.btn-elegante {
  background: linear-gradient(135deg, #ffb81c, #f59e0b);
  color: #3d0505;
  border: 1px solid rgba(255, 255, 255, 0.4);
  box-shadow: 0 8px 25px rgba(245, 158, 11, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.3);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-elegante:hover, 
.btn-elegante:active {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 12px 30px rgba(245, 158, 11, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.4);
}

/* ========================================== */
/* ESTILOS DO MODAL E COMPONENTES DO CARDÁPIO */
/* ========================================== */

/* Esconde a barra de rolagem nativa (Visual de App) */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* Para Internet Explorer e Edge */
  scrollbar-width: none;     /* Para Firefox */
}

/* Otimiza a GPU do celular para o deslize do modal não travar */
#modal-cardapio {
  will-change: transform;
}

/* Efeito de clique nos botões de categoria */
nav button {
  transition: all 0.3s ease;
}
nav button:active {
  transform: scale(0.95);
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeIn 0.3s ease-out forwards;
}

#p-modal-qtd {
    color: #ffffff !important; /* Ou use #ffb81c para dourado */
}

/* Correção para o menu do Select no Mobile */
#c-pagamento option {
    background-color: #111 !important;
    color: #fff !important;
}