/**
 * Nova Opção Lanche - Glass Effects CSS
 * Baseado no estilo MegaBurgers
 */

:root {
  /* Paleta Glass Nova Opção */
  --glass-bg: rgba(255, 255, 255, 0.08);
  --glass-bg-strong: rgba(255, 255, 255, 0.12);
  --glass-border: rgba(255, 255, 255, 0.15);
  --glass-border-hover: rgba(255, 255, 255, 0.25);
  --glass-shadow: rgba(255, 107, 53, 0.15);
  
  /* Fallbacks para navegadores antigos */
  --fallback-header: rgba(229, 90, 43, 0.95);
  --fallback-card: rgba(255, 107, 53, 0.08);
  --fallback-modal: rgba(20, 20, 20, 0.92);
  
  /* Mesh gradient background */
  --mesh-gradient: 
    radial-gradient(800px 400px at -5% 25%, rgba(255, 107, 53, 0.12), transparent),
    radial-gradient(600px 300px at 110% -5%, rgba(255, 211, 63, 0.08), transparent),
    radial-gradient(700px 350px at 25% 105%, rgba(229, 90, 43, 0.1), transparent),
    linear-gradient(135deg, rgba(255, 107, 53, 0.03), rgba(255, 211, 63, 0.02));
}

/* Mesh Background */
.mesh-bg {
  background: 
    var(--mesh-gradient),
    linear-gradient(180deg, #fef6f2 0%, #fff9f5 100%);
  min-height: 100vh;
}

/* Base Glass Classes */
.glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
}

.glass-strong {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
}

.glass-header {
  background: rgba(255, 107, 53, 0.1);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
}

/* Fallbacks para navegadores sem suporte */
@supports not ((backdrop-filter: blur(0)) or (-webkit-backdrop-filter: blur(0))) {
  .glass-fallback-header { 
    background: var(--fallback-header) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
  
  .glass-fallback-card { 
    background: var(--fallback-card) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
  }
  
  .glass-fallback-modal { 
    background: var(--fallback-modal) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
  }
  
  .glass-fallback-button {
    background: rgba(255, 107, 53, 0.9) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }
}

/* Header Glass */
.header-glass {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255, 107, 53, 0.08);
  border-bottom: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header-glass.scrolled {
  background: rgba(255, 107, 53, 0.12);
  box-shadow: 0 4px 32px rgba(255, 107, 53, 0.1);
}

/* Card Glass */
.card-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 8px 32px rgba(255, 107, 53, 0.06);
}

.card-glass:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-hover);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 16px 48px rgba(255, 107, 53, 0.12);
}

.card-glass:active {
  transform: translateY(0) scale(0.98);
}

/* Button Glass */
.btn-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-glass:hover {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border-hover);
  box-shadow: 0 4px 16px rgba(255, 107, 53, 0.15);
}

.btn-glass:focus-visible {
  outline: none;
  ring: 2px solid rgba(255, 107, 53, 0.5);
  ring-offset: 2px;
}

.btn-primary-glass {
  background: rgba(255, 107, 53, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  backdrop-filter: blur(10px) saturate(150%);
  -webkit-backdrop-filter: blur(10px) saturate(150%);
}

.btn-primary-glass:hover {
  background: rgba(255, 107, 53, 0.9);
  box-shadow: 0 6px 20px rgba(255, 107, 53, 0.3);
}

/* Modal Glass */
.modal-glass-overlay {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.modal-glass {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.2);
}

/* Search Glass */
.search-glass {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

.search-glass:focus-within {
  background: var(--glass-bg-strong);
  border-color: rgba(255, 107, 53, 0.4);
  box-shadow: 0 0 0 3px rgba(255, 107, 53, 0.1);
}

/* Animations */
@keyframes glass-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes glass-slide-up {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-glass-in {
  animation: glass-fade-in 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.animate-glass-slide {
  animation: glass-slide-up 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Loading Glass */
.loading-glass {
  background: linear-gradient(
    90deg,
    var(--glass-bg) 25%,
    var(--glass-bg-strong) 50%,
    var(--glass-bg) 75%
  );
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
}

@keyframes loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Responsive adjustments */
@media (max-width: 640px) {
  .glass,
  .glass-strong {
    backdrop-filter: blur(8px) saturate(130%);
    -webkit-backdrop-filter: blur(8px) saturate(130%);
  }
  
  .card-glass:hover {
    transform: none;
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .glass,
  .glass-strong,
  .card-glass {
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(0, 0, 0, 0.3);
    color: #000;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .card-glass,
  .btn-glass,
  .animate-glass-in,
  .animate-glass-slide {
    transition: none;
    animation: none;
  }
}

/* Print styles */
@media print {
  .glass,
  .glass-strong,
  .card-glass {
    background: white;
    border: 1px solid #ccc;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}