@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,600;0,700;1,400;1,600&display=swap');

:root {
  --primary-red: #DC2626;
  --primary-red-hover: #B91C1C;
  --dark-navy: #0F172A;
  --soft-red: #FEF2F2;
  --white: #FFFFFF;
  --border-color: #E2E8F0;
  --accent-gold: #D4AF37;
  --accent-gold-light: #FBF6E2;
}

body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  color: #1E293B;
  background-color: #F8FAFC;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}

/* Mobile & Touch Utilities */
.touch-manipulation {
  touch-action: manipulation;
}

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

[x-cloak] {
  display: none !important;
}

.font-serif-luxury {
  font-family: 'Playfair Display', Georgia, serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #F1F5F9;
}
::-webkit-scrollbar-thumb {
  background: #CBD5E1;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94A3B8;
}

/* Glassmorphism & Soft Cards */
.glass-panel {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.glass-panel-dark {
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Scanner Laser Animation */
@keyframes scanLaser {
  0% {
    top: 5%;
    opacity: 0.2;
  }
  50% {
    top: 90%;
    opacity: 1;
  }
  100% {
    top: 5%;
    opacity: 0.2;
  }
}

.scanner-laser {
  position: absolute;
  left: 5%;
  right: 5%;
  height: 3px;
  background: linear-gradient(90deg, transparent, #DC2626, #EF4444, #DC2626, transparent);
  box-shadow: 0 0 18px 4px rgba(239, 68, 68, 0.85);
  animation: scanLaser 2.2s ease-in-out infinite;
  pointer-events: none;
  z-index: 20;
}

/* Checkmark Stroke Animation */
@keyframes checkmarkPop {
  0% {
    transform: scale(0.3) rotate(-45deg);
    opacity: 0;
  }
  70% {
    transform: scale(1.15) rotate(5deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

.animate-check-pop {
  animation: checkmarkPop 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* Blue Glow Pulse */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 25px rgba(37, 99, 235, 0.3), 0 0 60px rgba(37, 99, 235, 0.15);
  }
  50% {
    box-shadow: 0 0 45px rgba(37, 99, 235, 0.6), 0 0 90px rgba(37, 99, 235, 0.3);
  }
}

.glow-blue {
  animation: pulseGlow 2.5s infinite;
}

/* Gold Gradient & Foil */
.gold-gradient-text {
  background: linear-gradient(135deg, #D4AF37 0%, #F5D77F 50%, #AA820A 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gold-border {
  border-color: #D4AF37;
}

/* QR Pass Printable Layout */
@media print {
  body * {
    visibility: hidden;
  }
  #printable-qr-card, #printable-qr-card * {
    visibility: visible;
  }
  #printable-qr-card {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: none !important;
    border: 1px solid #CBD5E1 !important;
    width: 320px !important;
    margin: 0 !important;
    padding: 24px !important;
  }
}

/* Autofill Dark Override */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus, 
input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px #0c1427 inset !important;
  -webkit-text-fill-color: #ffffff !important;
  caret-color: #ffffff !important;
  transition: background-color 5000s ease-in-out 0s;
}

/* Luxury Dark Glassmorphism & UI System */
.luxury-glass-card {
  background: rgba(10, 18, 36, 0.78) !important;
  backdrop-filter: blur(28px) saturate(190%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(190%) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  box-shadow: 
    0 30px 80px -15px rgba(0, 0, 0, 0.9),
    0 0 60px -10px rgba(37, 99, 235, 0.2),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.15) !important;
}

.luxury-glass-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 15%;
  right: 15%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.7), rgba(124, 58, 237, 0.7), transparent);
  pointer-events: none;
}

.luxury-input {
  background-color: rgba(12, 20, 39, 0.85) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  color: #F8FAFC !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.luxury-input:focus {
  background-color: rgba(18, 29, 56, 0.95) !important;
  border-color: #6366F1 !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.3), 0 0 25px rgba(124, 58, 237, 0.2) !important;
  outline: none !important;
}

.luxury-input::placeholder {
  color: #64748B !important;
}

.luxury-btn-primary {
  background: linear-gradient(135deg, #2563EB 0%, #4F46E5 50%, #7C3AED 100%) !important;
  background-size: 200% 200% !important;
  box-shadow: 0 8px 30px -4px rgba(37, 99, 235, 0.55), 0 4px 18px -2px rgba(124, 58, 237, 0.45) !important;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.luxury-btn-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 40px -4px rgba(37, 99, 235, 0.75), 0 8px 25px -2px rgba(124, 58, 237, 0.6) !important;
  background-position: 100% 50% !important;
}

.luxury-btn-primary:active {
  transform: translateY(0.5px) !important;
}


@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gold-shimmer-text {
  background: linear-gradient(135deg, #FFF9EB 0%, #F5D77F 40%, #D4AF37 70%, #FFF0C2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-glow-container {
  background: radial-gradient(circle at 50% 50%, rgba(37, 99, 235, 0.25), rgba(124, 58, 237, 0.15), rgba(6, 11, 26, 0.7));
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 
    0 12px 35px -5px rgba(0, 0, 0, 0.6),
    0 0 35px rgba(37, 99, 235, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}