/* Global Styles */
:root {
  --tp-blue-100: #3b82f6;
  --tp-blue-200: #2563eb;
  --tp-blue-300: #1d4ed8;
  --tp-green-100: #10b981;
  --tp-green-200: #059669;
}

/* Map and Markers */
.location-marker {
  position: relative;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  box-shadow: 0 0 0 6px rgba(59, 130, 246, 0.2);
  z-index: 10;
  transition: all 0.3s ease;
}

.location-marker::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 40px;
  height: 40px;
  background-color: currentColor;
  border-radius: 50%;
  opacity: 0.2;
  transform: translate(-50%, -50%);
  animation: pulse 2s infinite;
}

.map-connection {
  height: 1px;
  background: linear-gradient(90deg, var(--tp-blue-100), var(--tp-green-100));
  transform-origin: left center;
  opacity: 0.4;
  z-index: 5;
}

@keyframes pulse {
  0% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0.3;
  }
  70% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(0.5);
    opacity: 0;
  }
}

/* Gradients and Borders */
.gradient-border {
  position: relative;
}

.gradient-border::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--tp-blue-200), transparent);
}

/* Background Colors */
.bg-tp-50 { background-color: #f9fafb; }
.bg-tp-100 { background-color: #f3f4f6; }
.bg-tp-200 { background-color: #e5e7eb; }
.bg-tp-300 { background-color: #d1d5db; }
.bg-tp-blue-100 { background-color: var(--tp-blue-100); }

/* Text Colors */
.text-tp-500 { color: #6b7280; }
.text-tp-600 { color: #4b5563; }
.text-tp-700 { color: #374151; }
.text-tp-900 { color: #111827; }
.text-tp-blue-100 { color: var(--tp-blue-100); }

/* Responsive Map */
@media (max-width: 768px) {
  .location-marker {
    width: 20px;
    height: 20px;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
  }
  
  .location-marker::after {
    width: 30px;
    height: 30px;
  }
}