:root {
  --brand-orange: #f57c00;
  --brand-orange-strong: #ff8a00;
  --brand-orange-soft: #ffb347;
  --brand-black: #050505;
  --brand-surface: #101010;
  --brand-white: #ffffff;
  --brand-border: rgba(245,124,0,0.22);
}

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

.bg-theme {
  background:
    linear-gradient(168deg,
      #050505 0%,
      #050505 18%,
      #ffffff 18%,
      #ffffff 20.2%,
      #f57c00 20.2%,
      #f57c00 79.8%,
      #ffffff 79.8%,
      #ffffff 82%,
      #050505 82%,
      #050505 100%);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.bg-theme::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center 38%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.06) 18%, rgba(245,124,0,0.18) 36%, transparent 58%),
    radial-gradient(circle at center 38%, rgba(0,0,0,0.48) 0%, transparent 60%);
  z-index: -2;
}

.bg-theme::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(0,0,0,0.28) 0%, rgba(0,0,0,0.12) 18%, transparent 42%);
  z-index: -1;
  pointer-events: none;
}

@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 16px 34px rgba(0,0,0,0.45));
}

    .hero-orb {
  width: min(78vw, 320px);
  height: min(78vw, 320px);
  border-radius: 9999px;
  padding: 0;
  background: radial-gradient(circle at center, #1a1a1a 0%, #0b0b0b 72%, #050505 100%);
  border: 6px solid rgba(245,124,0,0.95);
  box-shadow:
    0 18px 45px rgba(0,0,0,0.45),
    0 0 0 3px rgba(255,255,255,0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

   .hero-orb::before {
  content: "";
  position: absolute;
  inset: 12px;
  border-radius: 9999px;
  border: 1px solid rgba(255,255,255,0.05);
  pointer-events: none;
}

    .hero-logo {
  width: 78%;
  max-width: 250px;
  margin: 0 auto;
  display: block;
  object-fit: contain;
}

    .hero-copy {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 16px;
      text-align: center;
    }

.btn-elegante {
  background: linear-gradient(135deg, var(--brand-orange-strong), var(--brand-orange));
  color: var(--brand-white);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 12px 28px rgba(245, 124, 0, 0.34), inset 0 1px 0 rgba(255,255,255,0.24);
  text-shadow: 0 1px 2px rgba(0,0,0,0.24);
  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 16px 34px rgba(245, 124, 0, 0.42), inset 0 1px 0 rgba(255,255,255,0.3);
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#modal-cardapio { will-change: transform; }

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;
}

#c-pagamento option {
  background-color: #111 !important;
  color: #fff !important;
}

.logo-float {
  animation: float 4s ease-in-out infinite;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,0.35));
}