/* Travel page: map as main section, minimal cyber theme */

.travel-page {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.travel-main {
  flex: 1;
  position: relative;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

.travel-map {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  min-height: 400px;
  background: var(--bg-darker, #0a0b0e);
}

.travel-map-fallback {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--fg-bright);
  font-family: "Fira Code", monospace;
  text-align: center;
  padding: 2em;
}

.travel-overlay {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 1000;
  pointer-events: none;
}

.travel-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--accent, #39ff14);
  letter-spacing: 0.04em;
  text-shadow: 0 0 12px rgba(57, 255, 20, 0.3);
}

.travel-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--fg-bright, #d6f5e3);
  opacity: 0.8;
}

/* Leaflet overrides: match dark theme */
.travel-map .leaflet-popup-content-wrapper {
  background: var(--bg-darker, #0a0b0e);
  color: var(--fg-bright, #d6f5e3);
  border: 1px solid var(--accent-faded, rgba(57, 255, 20, 0.4));
  border-radius: 4px;
  box-shadow: 0 0 16px rgba(57, 255, 20, 0.15);
}

.travel-map .leaflet-popup-tip {
  background: var(--bg-darker, #0a0b0e);
}

.travel-map .leaflet-popup-content {
  margin: 0.6em 0.8em;
  font-family: "Fira Code", monospace;
  font-size: 0.85rem;
}

.travel-popup strong {
  color: var(--accent, #39ff14);
}

.travel-popup-date {
  font-size: 0.8em;
  opacity: 0.85;
}

.travel-popup a {
  display: inline-block;
  margin-top: 0.4em;
  color: var(--accent, #39ff14);
  text-decoration: none;
}

.travel-popup a:hover {
  text-decoration: underline;
}

.travel-marker {
  background: none !important;
  border: none !important;
}

.travel-marker-timeline {
  opacity: 0.9;
}

/* Zoom control dark */
.travel-map .leaflet-control-zoom {
  border: 1px solid var(--accent-faded) !important;
  border-radius: 4px;
  overflow: hidden;
}

.travel-map .leaflet-control-zoom a {
  background: var(--bg-darker) !important;
  color: var(--accent) !important;
  font-family: "Fira Code", monospace;
}

.travel-map .leaflet-control-zoom a:hover {
  background: var(--accent-faded) !important;
  color: var(--bg-dark) !important;
}

/* Marker cluster: dark theme + accent */
.travel-map .marker-cluster {
  background: rgba(57, 255, 20, 0.2);
  border: 1px solid var(--accent-faded, rgba(57, 255, 20, 0.5));
}
.travel-map .marker-cluster div {
  background: var(--accent, #39ff14);
  color: var(--bg-dark, #0a0b0e);
  font-family: "Fira Code", monospace;
  font-weight: 700;
}
.travel-map .marker-cluster-small { background: rgba(57, 255, 20, 0.25); }
.travel-map .marker-cluster-medium { background: rgba(57, 255, 20, 0.35); }
.travel-map .marker-cluster-large { background: rgba(57, 255, 20, 0.4); }

/* Current location pin: pulsing ring */
@keyframes travel-pin-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0.7), 0 0 10px rgba(57, 255, 20, 0.5); }
  70%  { box-shadow: 0 0 0 14px rgba(57, 255, 20, 0), 0 0 10px rgba(57, 255, 20, 0.5); }
  100% { box-shadow: 0 0 0 0 rgba(57, 255, 20, 0), 0 0 10px rgba(57, 255, 20, 0.5); }
}

.travel-marker-current span {
  animation: travel-pin-pulse 1.8s ease-out infinite;
}