@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

:root {
  --primary: #3B82F6;
  --primary-dark: #1E40AF;
  --secondary: #8B5CF6;
  --dark: #0F172A;
  --darker: #020617;
  --light: #F8FAFC;
  --gray: #64748B;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--darker);
  color: var(--light);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.nav-active {
  color: var(--primary);
}

/* Sticky Navbar */
/* Sticky Navbar */
.sticky-nav {
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(12px);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dark .sticky-nav {
  background-color: rgba(17, 24, 39, 0.3);
  border-bottom: 1px solid rgba(55, 65, 81, 0.5);
}

/* Progress Bar */
.progress-container {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: transparent;
}

.progress-bar {
  height: 2px;
  background: linear-gradient(90deg, var(--primary), var(--secondary));
  width: 0%;
  transition: width 0.1s;
}

.gradient-text {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.card-hover {
  transition: all 0.3s ease;
}

.card-hover:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
}

.cookie-modal {
  backdrop-filter: blur(10px);
}

/* Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #374151;
  transition: .4s;
  border-radius: 34px;
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
  border-radius: 50%;
}

input:checked+.toggle-slider {
  background-color: var(--primary);
}

input:checked+.toggle-slider:before {
  transform: translateX(26px);
}

input:disabled+.toggle-slider {
  background-color: var(--primary-dark);
  cursor: not-allowed;
}

/* Scrollbar customizada para o modal de carrinho */
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #1f2937;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #4b5563;
  border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #6b7280;
}

/* Animação de entrada do Modal */
@keyframes modalPop {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%) scale(0.95);
  }

  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.modal-animation {
  animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Garante centralização de todos os modais */
[id^="modal-"]:not(.hidden) {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}


/* Previne scroll da página quando modal aberto */
body.modal-open {
  overflow: hidden;
}

/* Animação de fundo gradiente */
@keyframes gradient-x {

  0%,
  100% {
    background-size: 200% 200%;
    background-position: left center;
  }

  50% {
    background-size: 200% 200%;
    background-position: right center;
  }
}

.animate-gradient-x {
  animation: gradient-x 3s ease infinite;
}

@keyframes fade-in-up {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-down {
  animation: fadeInDown 0.3s ease-out forwards;
}

.animate-fade-in-up {
  animation: fade-in-up 0.8s ease-out forwards;
}

/* Scrollbar refinada */
.custom-scrollbar::-webkit-scrollbar {
  width: 5px;
}

.custom-scrollbar::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Toggle Switch Moderno */
.toggle-checkbox:checked {
  right: 0;
  border-color: #10B981;
  /* Verde Emerald */
}

.toggle-checkbox:checked+.toggle-label {
  background-color: #10B981;
}

/* Typewriter Cursor */
.typewriter-cursor {
  display: inline-block;
  width: 3px;
  background-color: var(--primary);
  animation: blink 1s step-end infinite;
}

@keyframes blink {

  from,
  to {
    opacity: 1;
  }

  50% {
    opacity: 0;
  }
}

/* Logo Grayscale to Color */
.logo-grayscale {
  filter: grayscale(100%) opacity(0.6);
  transition: all 0.5s ease;
}

.logo-grayscale:hover {
  filter: grayscale(0%) opacity(1);
  transform: scale(1.05);
}

/* 3D Tilt Effect */
.tilt-card {
  transform-style: preserve-3d;
  transform: perspective(1000px);
}

.tilt-content {
  transform: translateZ(20px);
}

/* Floating WhatsApp */
.floating-whatsapp {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 60px;
  height: 60px;
  background-color: #25D366;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  z-index: 100;
  transition: all 0.3s ease;
  animation: pulse-green 2s infinite;
}

.floating-whatsapp:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4);
}

@keyframes pulse-green {
  0% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.7);
  }

  70% {
    box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(37, 211, 102, 0);
  }
}

/* Color Palette identidade visual restaurante*/
.color-palette {
  display: flex;
  height: 60px;
  border-radius: 12px;
  overflow: hidden;
}

.color-swatch {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
  color: white;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.stats-card {
  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(139, 92, 246, 0.1));
  border: 1px solid rgba(59, 130, 246, 0.3);
}


/* Efeito neon pulsante rodapé */
.neon-glow {
  box-shadow: 0 0 10px currentColor,
    0 0 20px currentColor,
    0 0 30px currentColor;
}

/* Pulso neon */
@keyframes neon-pulse {
  0% {
    box-shadow: 0 0 6px currentColor;
  }

  50% {
    box-shadow: 0 0 14px currentColor;
  }

  100% {
    box-shadow: 0 0 6px currentColor;
  }
}

.neon-pulse {
  animation: neon-pulse 1.4s infinite ease-in-out;
}

/* Inline Styles card sobre quem somos*/
@keyframes bounce-slow {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

.animate-bounce-slow {
  animation: bounce-slow 3s infinite ease-in-out;
}

.neon-social:hover {
  color: white !important;
  background: var(--color) !important;
  box-shadow: 0 0 10px var(--color),
    0 0 20px var(--color),
    0 0 35px var(--color);
  animation: neon-pulse 1.5s infinite ease-in-out;
}

/* Garantir que o Chatwoot Widget fique sempre visível */
.woot-widget-bubble,
.woot--bubble-holder,
#chatwoot_live_chat_widget {
  z-index: 9999 !important;
}