html, body { height: 100%; margin: 0; }
#map { height: 100vh; width: 100%; }

.trainIconWrap {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35));
  cursor: pointer;
}

.trainMarker{
  transition: transform 160ms ease-out;
}

@keyframes trainPopIn {
  0%   { transform: scale(0.75); opacity: 0; }
  100% { transform: scale(1);    opacity: 1; }
}

.trainMarkerPopWrap{
  animation: trainPopIn 220ms ease-out;
}

.trainDot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 3px solid #111;
  box-sizing: border-box;

  box-shadow:
    0 2px 6px rgba(0,0,0,0.35),
    0 0 0 1px rgba(0,0,0,0.15);
}

.trainLabelWrap{
  pointer-events:none;
}

.trainLabel {
  display: inline-block;
  white-space: nowrap;
  font-weight: 600;
  font-size: 12px;

  padding: 4px 8px;
  border-radius: 8px;

  color: #fff;
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.trainLabelPos{
  position: relative;
  transform: translate(-50%, calc(-100% - 14px)); /* 10px gap ovanför tåget */
  transform-origin: 0 0;
  display: inline-block;
}

/* Hover */
.trainLabelHover{
  box-shadow: 0 4px 10px rgba(0,0,0,.20);
}

/* Pinned: tydligare + glow */
.trainLabelPinned{
  box-shadow:
    0 10px 22px rgba(0,0,0,.35),     /* lyft */
    0 0 0 3px rgba(255,255,255,.35), /* ljus halo runt */
    0 0 18px rgba(255,255,255,.28);  /* mjukt glow */
}

/* --- User location  --- */
.userLocDot {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  background: #1a73e8;           /* Blå */
  border: 3px solid #ffffff;     /* vit ring */
  box-shadow:
    0 2px 8px rgba(0,0,0,0.25),
    0 0 0 1px rgba(26,115,232,0.35);
}

.userLocWrap {
  filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25));
}