﻿/* Стили для контекстного меню */
.context-menu {
  position: absolute;
  z-index: 10000;
  background-color: white;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  font-size: 14px;
  display: none;
}

  .context-menu .menu-item {
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    color: #333;
  }

    .context-menu .menu-item:hover {
      background-color: #f0f0f0;
      border-radius: 3px;
    }

/* Стили для маркера направления */
.direction-marker {
  /* Удаляем стандартные стили иконок Leaflet */
  background: none;
  border: none;
  pointer-events: none; /* Чтобы маркер не перехватывал события мыши */
}

  /* Анимация при появлении */
  .direction-marker svg {
    animation: marker-pulse 0.5s ease-out;
    filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.5));
  }

/* Стили кластеров маркеров */
.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;
    color: black;
    font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
  }

  .marker-cluster span {
    line-height: 30px;
  }

.marker-cluster-small {
  background-color: rgba(181, 226, 140, 0.6);
}

  .marker-cluster-small div {
    background-color: rgba(110, 204, 57, 0.6);
  }

.marker-cluster-medium {
  background-color: rgba(241, 211, 87, 0.6);
}

  .marker-cluster-medium div {
    background-color: rgba(240, 194, 12, 0.6);
  }

.marker-cluster-large {
  background-color: rgba(253, 156, 115, 0.6);
}

  .marker-cluster-large div {
    background-color: rgba(241, 128, 23, 0.6);
  }

/* Анимации */
@keyframes marker-pulse {
  0% {
    transform: scale(0);
    opacity: 0;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Стили для попапов на карте */
.map-popup {
  min-width: 250px;
}

  .map-popup h6 {
    margin: 0 0 8px 0;
    text-align: center;
  }

.map-popup-row {
  display: flex;
  justify-content: flex-start;
  margin-top: 5px;
}

  .map-popup-row:first-child {
    margin-top: 0;
  }

/* Стили для линий треков */
.track-line {
  transition: opacity 0.2s ease;
}

  .track-line:hover {
    opacity: 0.9 !important;
    stroke-width: 7px;
  }
