@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=JetBrains+Mono:wght@400;500;600;700;800&family=Merriweather:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');

:root {
  --paswi-primary: #35156E;       /* PASWI Royal Violet */
  --paswi-interactive: #5821B6;   /* Chapter Purple */
  --paswi-accent: #D97706;        /* Civic Service Gold */
  --paswi-teal: #0D9488;          /* Compassion Teal */
  --paswi-green: #059669;         /* PRC Verified Green */
  --paswi-crimson: #DC2626;       /* Compliance Crimson */

  --paswi-navy: #35156E;
  --paswi-navy-dark: #1F1035;
  --paswi-navy-light: #5821B6;
  --paswi-deep: #180833;
  --paswi-gold: #D97706;
  --paswi-gold-bright: #F59E0B;
  --paswi-gold-light: #FEF3C7;
  --paswi-gold-dark: #B45309;
  --paswi-rose: #DC2626;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  background-color: #f8fafc;
  color: #0f172a;
  overflow-x: hidden;
  letter-spacing: -0.01em;
  font-size: 14px;
}

.font-oath, .font-serif {
  font-family: 'Merriweather', Georgia, serif;
}

code, .font-mono {
  font-family: 'JetBrains Mono', monospace;
}

/* Official Mood Board V2.0 Status & Tier Badges */
.badge-tier-regular {
  background-color: #eef2ff;
  color: #4338ca;
  border: 1px solid #c7d2fe;
}
.badge-tier-renewal {
  background-color: #e0f2fe;
  color: #0369a1;
  border: 1px solid #bae6fd;
}
.badge-tier-lifetime {
  background-color: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}
.badge-status-approved {
  background-color: #d1fae5;
  color: #065f46;
  border: 1px solid #a7f3d0;
}
.badge-status-pending {
  background-color: #ffedd5;
  color: #9a3412;
  border: 1px solid #fed7aa;
}
.badge-status-inactive {
  background-color: #ffe4e6;
  color: #9f1239;
  border: 1px solid #fecdd3;
}

/* Custom Pro Max Scrollbar */
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}
::-webkit-scrollbar-track {
  background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

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

.paswi-card {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 4px 6px -1px rgba(11, 37, 69, 0.04), 0 2px 4px -2px rgba(11, 37, 69, 0.02);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.paswi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 25px -5px rgba(11, 37, 69, 0.08), 0 8px 10px -6px rgba(11, 37, 69, 0.04);
  border-color: #cbd5e1;
}

.paswi-card-gradient {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.95) 100%);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(226, 232, 240, 0.9);
}

/* Official PASWI ID Badge Pro Max Styling */
.id-badge-container {
  width: 340px;
  min-height: 530px;
  background: linear-gradient(165deg, #1d0263 0%, #24027d 45%, #11013a 100%);
  border-radius: 26px;
  border: 2px solid rgba(245, 158, 11, 0.7);
  box-shadow: 0 25px 60px -12px rgba(0, 0, 0, 0.7), 0 0 35px rgba(245, 158, 11, 0.22);
  color: white;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s;
}

.id-badge-container:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: 0 35px 70px -15px rgba(0, 0, 0, 0.8), 0 0 45px rgba(245, 158, 11, 0.4);
}

/* Holographic Shimmer Effect */
.holo-shimmer {
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(
    115deg,
    transparent 20%,
    rgba(255, 255, 255, 0.12) 40%,
    rgba(245, 158, 11, 0.25) 50%,
    rgba(42, 157, 143, 0.18) 60%,
    transparent 80%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  animation: holoSweep 5s infinite ease-in-out;
}

@keyframes holoSweep {
  0% { left: -150%; }
  35% { left: 150%; }
  100% { left: 150%; }
}

.lanyard-hole {
  width: 52px;
  height: 12px;
  background: #0d0124;
  border-radius: 9999px;
  margin: 6px auto 6px auto;
  border: 2px solid rgba(245, 158, 11, 0.85);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.9), 0 0 10px rgba(245, 158, 11, 0.3);
}

/* Meal Stub Ticket Vouchers with Authentic Perforated Cutouts */
.meal-coupon {
  position: relative;
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  overflow: visible;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.03);
  transition: all 0.25s ease;
}

.meal-coupon:hover {
  border-color: #cbd5e1;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.06);
}

.meal-coupon::before,
.meal-coupon::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px;
  height: 16px;
  background-color: #f8fafc;
  border-radius: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: 1px solid #cbd5e1;
}

.meal-coupon::before {
  left: -8px;
  clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 50% 100%);
}

.meal-coupon::after {
  right: -8px;
  clip-path: polygon(0% 0%, 50% 0%, 50% 100%, 0% 100%);
}

.meal-coupon.claimed {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  opacity: 0.88;
}

/* Futuristic QR Scanner Viewport HUD */
.scanner-viewport-hud {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 0 0 2px rgba(11, 37, 69, 0.1), 0 20px 25px -5px rgba(0, 0, 0, 0.15);
}

.scanner-laser {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent 0%, #0d9488 20%, #10b981 50%, #0d9488 80%, transparent 100%);
  box-shadow: 0 0 15px #10b981, 0 0 30px #0d9488;
  animation: scanLaser 2.2s infinite ease-in-out;
  z-index: 10;
  pointer-events: none;
}

@keyframes scanLaser {
  0% { top: 8%; opacity: 0.3; }
  25% { opacity: 1; }
  50% { top: 92%; opacity: 1; }
  75% { opacity: 1; }
  100% { top: 8%; opacity: 0.3; }
}

.hud-corner {
  position: absolute;
  width: 24px;
  height: 24px;
  border-color: #f59e0b;
  pointer-events: none;
  z-index: 10;
}
.hud-corner-tl { top: 12px; left: 12px; border-top: 3px solid; border-left: 3px solid; border-top-left-radius: 6px; }
.hud-corner-tr { top: 12px; right: 12px; border-top: 3px solid; border-right: 3px solid; border-top-right-radius: 6px; }
.hud-corner-bl { bottom: 12px; left: 12px; border-bottom: 3px solid; border-left: 3px solid; border-bottom-left-radius: 6px; }
.hud-corner-br { bottom: 12px; right: 12px; border-bottom: 3px solid; border-right: 3px solid; border-bottom-right-radius: 6px; }

/* Interactive Star Rating Animations */
.star-btn {
  transition: transform 0.15s ease, color 0.15s ease;
}
.star-btn:hover {
  transform: scale(1.25);
}
.star-btn:active {
  transform: scale(0.95);
}

/* Polarity Speedometer Meter Bar */
.vader-meter-bar {
  height: 12px;
  border-radius: 9999px;
  background: linear-gradient(90deg, #f43f5e 0%, #fbbf24 50%, #10b981 100%);
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}

.vader-meter-needle {
  position: absolute;
  top: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ffffff;
  border: 3px solid #0b2545;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
  transform: translateX(-50%);
  transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===================================================
   3D PERSPECTIVE, DEPTH & PARALLAX ENGINE
   =================================================== */
.perspective-800 {
  perspective: 800px;
}
.perspective-1000 {
  perspective: 1000px;
}
.perspective-1500 {
  perspective: 1500px;
}
.preserve-3d {
  transform-style: preserve-3d;
}

.translate-z-10 {
  transform: translateZ(10px);
}
.translate-z-20 {
  transform: translateZ(20px);
}
.translate-z-30 {
  transform: translateZ(30px);
}
.translate-z-40 {
  transform: translateZ(40px);
}
.translate-z-50 {
  transform: translateZ(50px);
}
.translate-z-60 {
  transform: translateZ(60px);
}

/* 3D Interactive Tilt Card */
.card-3d-interactive {
  transform-style: preserve-3d;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease;
  position: relative;
  will-change: transform;
}
.card-3d-interactive:hover {
  box-shadow: 0 25px 50px -12px rgba(36, 2, 125, 0.25), 0 0 25px rgba(245, 158, 11, 0.2);
}

/* 3D Floating Animations */
@keyframes float3d {
  0%, 100% {
    transform: translateY(0px) rotateX(0deg) rotateY(0deg);
  }
  50% {
    transform: translateY(-12px) rotateX(2deg) rotateY(-2deg);
  }
}

@keyframes floatSlow3d {
  0%, 100% {
    transform: translateY(0px) rotateZ(0deg);
  }
  50% {
    transform: translateY(-16px) rotateZ(1deg);
  }
}

@keyframes orbit3d {
  from {
    transform: rotate3d(1, 1, 0, 0deg);
  }
  to {
    transform: rotate3d(1, 1, 0, 360deg);
  }
}

@keyframes pulseGlow3d {
  0%, 100% {
    box-shadow: 0 0 25px -5px rgba(36, 2, 125, 0.5), 0 0 15px rgba(245, 158, 11, 0.3);
  }
  50% {
    box-shadow: 0 0 45px 0px rgba(62, 16, 171, 0.7), 0 0 30px rgba(245, 158, 11, 0.5);
  }
}

.animate-float-3d {
  animation: float3d 6s ease-in-out infinite;
}

.animate-float-slow-3d {
  animation: floatSlow3d 8s ease-in-out infinite;
}

.animate-pulse-glow-3d {
  animation: pulseGlow3d 4s ease-in-out infinite;
}

/* 3D Glass Layering */
.glass-3d-dark {
  background: linear-gradient(135deg, rgba(20, 1, 73, 0.85) 0%, rgba(36, 2, 125, 0.75) 50%, rgba(10, 0, 38, 0.9) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.glass-3d-light {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 250, 252, 0.8) 100%);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(36, 2, 125, 0.12);
}

/* Specular Light Reflection Sweep */
.specular-glare {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255, 255, 255, 0.2) 0%, transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 20;
}
.card-3d-interactive:hover .specular-glare {
  opacity: 1;
}

/* 3D Timeline Cylinder Node */
.timeline-3d-node {
  position: relative;
  box-shadow: 0 10px 25px -5px rgba(36, 2, 125, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.5);
  transform-style: preserve-3d;
}

/* PRINT STYLES */
@media print {
  body * {
    visibility: hidden;
  }
  
  .print-area, .print-area * {
    visibility: visible;
  }
  
  .print-area {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .no-print {
    display: none !important;
  }

  .id-badge-container {
    box-shadow: none !important;
    border: 1px solid #24027d !important;
    page-break-inside: avoid;
    margin: 10px auto;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .meal-coupon {
    page-break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}