@import url('https://unpkg.com/leaflet@1.9.4/dist/leaflet.css');
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Font optimization for better loading */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: local('Inter');
}

:root {
  --background: hsl(222.86deg 84% 4.9%);
  --foreground: hsl(210deg 40% 96.08%);
  --card: hsl(222.86deg 84% 4.9%);
  --card-foreground: hsl(0deg 0% 100%);
  --popover: hsl(222.86deg 84% 4.9%);
  --popover-foreground: hsl(0deg 0% 100%);
  --primary: hsl(216deg 100% 61.76%);
  --primary-foreground: hsl(210deg 40% 98.04%);
  --secondary: hsl(210deg 40% 96.08%);
  --secondary-foreground: hsl(222.86deg 84% 4.9%);
  --muted: hsl(210deg 40% 96.08%);
  --muted-foreground: hsl(215.68, 15.74%, 46.08%);
  --accent: hsl(8.96deg 97.36% 55.49%);
  --accent-foreground: hsl(222, 84%, 4.9%);
  --destructive: hsl(8.96deg 97.36% 55.49%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(214, 32%, 91%);
  --input: hsl(214, 32%, 91%);
  --ring: hsl(216deg 100% 61.76%);
  --chart-1: hsl(199, 89%, 48%);
  --chart-2: hsl(159, 100%, 36%);
  --chart-3: hsl(33, 100%, 50%);
  --chart-4: hsl(147, 78%, 42%);
  --chart-5: hsl(341, 75%, 51%);
  --sidebar: hsl(210, 40%, 96%);
  --sidebar-foreground: hsl(222, 84%, 4.9%);
  --sidebar-primary: hsl(199, 89%, 48%);
  --sidebar-primary-foreground: hsl(210, 40%, 98%);
  --sidebar-accent: hsl(210, 40%, 96%);
  --sidebar-accent-foreground: hsl(199, 89%, 48%);
  --sidebar-border: hsl(214, 32%, 91%);
  --sidebar-ring: hsl(199, 89%, 48%);
  --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: Georgia, serif;
  --font-mono: Menlo, monospace;
  --radius: 0.75rem;
  --shadow-2xs: 0px 2px 0px 0px hsl(199, 89%, 48%, 0.00);
  --shadow-xs: 0px 2px 0px 0px hsl(199, 89%, 48%, 0.00);
  --shadow-sm: 0px 2px 0px 0px hsl(199, 89%, 48%, 0.00), 0px 1px 2px -1px hsl(199, 89%, 48%, 0.00);
  --shadow: 0px 2px 0px 0px hsl(199, 89%, 48%, 0.00), 0px 1px 2px -1px hsl(199, 89%, 48%, 0.00);
  --shadow-md: 0px 2px 0px 0px hsl(199, 89%, 48%, 0.00), 0px 2px 4px -1px hsl(199, 89%, 48%, 0.00);
  --shadow-lg: 0px 2px 0px 0px hsl(199, 89%, 48%, 0.00), 0px 4px 6px -1px hsl(199, 89%, 48%, 0.00);
  --shadow-xl: 0px 2px 0px 0px hsl(199, 89%, 48%, 0.00), 0px 8px 10px -1px hsl(199, 89%, 48%, 0.00);
  --shadow-2xl: 0px 2px 0px 0px hsl(199, 89%, 48%, 0.00);
  --tracking-normal: 0em;
  --spacing: 0.25rem;
}

.dark {
  --background: hsl(222, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --card: hsl(222, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --popover: hsl(222, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --primary: hsl(199, 89%, 48%);
  --primary-foreground: hsl(222, 84%, 4.9%);
  --secondary: hsl(217, 32%, 17%);
  --secondary-foreground: hsl(210, 40%, 98%);
  --muted: hsl(217, 32%, 17%);
  --muted-foreground: hsl(215, 20%, 65%);
  --accent: hsl(33, 100%, 50%);
  --accent-foreground: hsl(222, 84%, 4.9%);
  --destructive: hsl(0, 62%, 30%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --border: hsl(217, 32%, 17%);
  --input: hsl(217, 32%, 17%);
  --ring: hsl(199, 89%, 48%);
  --sidebar: hsl(217, 32%, 17%);
  --sidebar-foreground: hsl(210, 40%, 98%);
  --sidebar-primary: hsl(199, 89%, 48%);
  --sidebar-primary-foreground: hsl(222, 84%, 4.9%);
  --sidebar-accent: hsl(217, 32%, 17%);
  --sidebar-accent-foreground: hsl(199, 89%, 48%);
  --sidebar-border: hsl(217, 32%, 17%);
  --sidebar-ring: hsl(199, 89%, 48%);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
  }
}

.travel-gradient {
  background: linear-gradient(135deg, hsl(var(--primary)) 0%, hsl(var(--accent)) 100%);
}

.map-container {
  height: 100vh;
  position: relative;
  margin-top: -3rem;
  padding-top: 3rem;
}

.floating-panel {
  backdrop-filter: blur(8px);
  background: hsla(0, 0%, 100%, 0.95);
  border: 1px solid hsl(var(--border));
}

.dark .floating-panel {
  background: hsla(222, 84%, 4.9%, 0.95);
}

.nft-card {
  transition: all 0.3s ease;
  border: 1px solid hsl(var(--border));
}

.nft-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px hsla(222, 84%, 4.9%, 0.15);
}

.dark .nft-card:hover {
  box-shadow: 0 12px 24px hsla(0, 0%, 0%, 0.5);
}

.marker-pulse {
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
  100% { transform: scale(1); opacity: 1; }
}

/* Cluster marker styling for multiple NFTs at same location */
.cluster-marker {
  border: 3px solid hsl(33, 100%, 50%) !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(255, 165, 0, 0.4) !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(2px) !important;
}

.upload-dropzone {
  border: 2px dashed hsl(var(--border));
  transition: all 0.3s ease;
}

.upload-dropzone:hover {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--muted));
}

.upload-dropzone.dragover {
  border-color: hsl(var(--primary));
  background-color: hsl(var(--accent) / 0.1);
}

.price-tag {
  background: linear-gradient(135deg, hsl(var(--accent)) 0%, hsl(24, 100%, 50%) 100%);
}

.leaflet-container {
  z-index: 1;
}

.leaflet-popup-content-wrapper {
  background: hsl(var(--card));
  color: hsl(var(--card-foreground));
  border-radius: var(--radius);
  box-shadow: 0 4px 12px hsla(222, 84%, 4.9%, 0.15);
}

.leaflet-popup-tip {
  background: hsl(var(--card));
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .map-container {
    height: calc(100vh - 8rem);
  }
}
