/* Map Cursor Styles */
#map { cursor: crosshair; }
.leaflet-container { cursor: crosshair !important; }
.leaflet-dragging { cursor: grabbing !important; }
.leaflet-grab { cursor: grab !important; }
.leaflet-interactive { cursor: pointer !important; }

/* Preloader Styles */
#preloader {
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
}

#preloader.fade-out {
  opacity: 0;
  visibility: hidden;
}

#preloader .spinner-border {
  animation-duration: 1s;
}

/* Map Overlay Positioning */
#selectContainer { 
  top: 15px; 
  left: 50%; 
  transform: translateX(-50%); 
  width: 250px; 
  z-index: 1010; 
}

/* Leaflet Markers */
.country-marker { background: transparent !important; border: none !important; cursor: pointer !important; z-index: 1000; }

.marker-inner { width: 48px; height: 48px; position: relative; cursor: pointer; transition: all 0.3s ease; }

.marker-inner::before {
  content: ''; position: absolute; top: 0; left: 50%; width: 36px; height: 36px;
  background: linear-gradient(135deg, #28a745, #20c997); border: 3px solid #fff;
  border-radius: 50% 50% 50% 0; transform: translateX(-50%) rotate(-45deg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4), 0 2px 6px rgba(0,0,0,0.3);
}

.marker-inner::after {
  content: attr(data-country-code); position: absolute; top: 8px; left: 50%;
  transform: translateX(-50%); font-size: 10px; font-weight: bold; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5); z-index: 1001;
}

.marker-inner:hover::before {
  transform: translateX(-50%) rotate(-45deg) scale(1.1);
  background: linear-gradient(135deg, #20c997, #17a2b8);
  box-shadow: 0 6px 16px rgba(0,0,0,0.5), 0 3px 8px rgba(0,0,0,0.4);
}

/* POI Markers - Consolidated icon Base */
.city-marker, .airport-marker, .railway-marker, .port-marker { background: transparent !important; border: none !important; cursor: pointer !important; }

.poi-marker-inner {
  width: 22px; height: 22px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: bold; color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,0.3);
  box-shadow: 0 2px 6px rgba(0,0,0,0.3); transition: all 0.3s ease; cursor: pointer;
}

.city-marker-inner { background: linear-gradient(135deg, #007bff, #0056b3); border-radius: 50%; }
.airport-marker-inner { background: linear-gradient(135deg, #fd7e14, #e55a00); border-radius: 3px; }
.railway-marker-inner { background: linear-gradient(135deg, #ffc107, #e0a800); border-radius: 2px; }
.port-marker-inner { background: linear-gradient(135deg, #20c997, #17a085); border-radius: 4px; }

.poi-marker-inner:hover { transform: scale(1.2); box-shadow: 0 3px 10px rgba(0,0,0,0.4); }

/* Marker Cluster Styling */
.marker-cluster { background-clip: padding-box; border-radius: 20px; }
.marker-cluster div { width: 30px; height: 30px; margin-left: 5px; margin-top: 5px; text-align: center; border-radius: 15px; font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif; }
.marker-cluster span { line-height: 30px; }

.city-small { background: rgba(0, 123, 255, 0.6); }
.city-medium { background: rgba(0, 123, 255, 0.7); }
.city-large { background: rgba(0, 123, 255, 0.8); }

.airport-small { background: rgba(253, 126, 20, 0.6); }
.airport-medium { background: rgba(253, 126, 20, 0.7); }
.airport-large { background: rgba(253, 126, 20, 0.8); }

.railway-small { background: rgba(255, 193, 7, 0.6); }
.railway-medium { background: rgba(255, 193, 7, 0.7); }
.railway-large { background: rgba(255, 193, 7, 0.8); }

.port-small { background: rgba(32, 201, 151, 0.6); }
.port-medium { background: rgba(32, 201, 151, 0.7); }
.port-large { background: rgba(32, 201, 151, 0.8); }

/* Responsive Design */
@media (max-width: 768px) {
  #selectContainer { 
    left: 50%; 
    transform: translateX(-50%); 
    width: 200px; 
  }
}

@media (max-width: 480px) {
  #selectContainer { 
    left: 50%; 
    transform: translateX(-50%); 
    width: 180px; 
  }
}

/* Weather Modal Cards */
.weather-card {
  background-color: #3778959e !important;
}

/* News Modal */
#scrollableNews {
  border-radius: 0.375rem;
  border: 1px solid #dee2e6;
}

#scrollableNews::-webkit-scrollbar {
  width: 6px;
}

#scrollableNews::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

#scrollableNews::-webkit-scrollbar-thumb {
  background: #dc3545;
  border-radius: 3px;
}

#scrollableNews::-webkit-scrollbar-thumb:hover {
  background: #c82333;
}

.news-card-link:hover {
  color: #dc3545 !important;
  text-decoration: underline !important;
}

/* Currency Modal Enhancements */
#currencyModal .form-control:focus,
#currencyModal .form-select:focus {
  border-color: #ffc107;
  box-shadow: 0 0 0 0.2rem rgba(255, 193, 7, 0.25);
}

#currencyModal .form-control-lg,
#currencyModal .form-select-lg {
  border-width: 2px;
  transition: all 0.3s ease;
}

#currencyModal .form-control-lg:hover,
#currencyModal .form-select-lg:hover {
  border-color: #ffc107;
}

#toAmount {
  font-weight: bold;
  font-size: 1.1em;
}

.currency-divider {
  border-top: 2px dashed #ffc107;
  margin: 1rem 0;
}

.currency-separator {
  border: none;
  border-top: 2px solid #333;
  margin: 0.5rem 0;
  opacity: 0.8;
}

#conversionRate {
  background-color: rgba(255, 193, 7, 0.1);
  border-radius: 0.375rem;
  padding: 0.75rem;
  border: 1px solid rgba(255, 193, 7, 0.3);
}

#rateDisplay {
  color: #6c757d;
  font-size: 0.9rem;
}