/* Reset & Custom Styles for Shady Courier */
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

body {
  font-family: 'Cairo', system-ui, -apple-system, sans-serif;
  background-color: #0b0c10;
  color: #f8fafc;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Wanted star flashing animation */
@keyframes starGlow {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 4px #ef476f); }
  50% { transform: scale(1.25); filter: drop-shadow(0 0 10px #ff0044); }
}

.star-active {
  color: #ef476f !important;
  animation: starGlow 1s ease-in-out infinite;
}

/* Smooth custom scrollbars for phone tabs */
#tab-orders::-webkit-scrollbar,
#tab-vehicles::-webkit-scrollbar,
#tab-garage::-webkit-scrollbar,
#tab-custom::-webkit-scrollbar {
  width: 5px;
}
#tab-orders::-webkit-scrollbar-thumb,
#tab-vehicles::-webkit-scrollbar-thumb,
#tab-garage::-webkit-scrollbar-thumb,
#tab-custom::-webkit-scrollbar-thumb {
  background: #2b3353;
  border-radius: 4px;
}

/* Minimap & Radar Sweep Animations */
@keyframes radarSweep {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.radar-sweep {
  background: conic-gradient(from 0deg at 50% 50%, rgba(6, 182, 212, 0.35) 0deg, rgba(6, 182, 212, 0) 65deg, rgba(6, 182, 212, 0) 360deg);
  border-radius: 50%;
  animation: radarSweep 3s linear infinite;
  transform-origin: center center;
}

/* Keyframe for banner entry */
@keyframes fadeInSlide {
  from { opacity: 0; transform: translateY(-12px); }
  to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
  animation: fadeInSlide 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Central Compass Dial Styling */
#central-compass {
  filter: drop-shadow(0 4px 16px rgba(0, 0, 0, 0.6));
}

#compass-needle-container {
  will-change: transform;
}

/* Compass Shady Mode Styling */
.compass-shady {
  border-color: #f43f5e !important;
  box-shadow: 0 0 22px rgba(244, 63, 94, 0.55) !important;
}
.compass-shady #compass-needle > div:first-child {
  border-b-color: #f43f5e !important;
  filter: drop-shadow(0 0 8px #f43f5e) !important;
}
.compass-shady #compass-center-dot {
  background-color: #f43f5e !important;
}

/* Compass Clean/Legal Mode Styling */
.compass-clean {
  border-color: #10b981 !important;
  box-shadow: 0 0 22px rgba(16, 185, 129, 0.5) !important;
}
.compass-clean #compass-needle > div:first-child {
  border-b-color: #10b981 !important;
  filter: drop-shadow(0 0 8px #10b981) !important;
}
.compass-clean #compass-center-dot {
  background-color: #10b981 !important;
}

/* Touch Control Feedback */
button:active {
  transition: transform 80ms ease-out;
}