/* spawn-point-generator — generated by scripts/tools-v2/build-tool-css.js from
   views/v1-backup/tools-spawn-point-generator.ejs. DO NOT EDIT BY HAND: npm run test:tools-page-v2
   regenerates it and fails if this file has drifted.

   The shared vocabulary (.btn-primary, .form-input, .tool-card, .badge-*,
   .toast-*, #map, headings) is NOT here — public/css/tools-page-v2.css
   declares it once for every tool page. What is left is this tool's own,
   with its colour literals resolved to theme tokens and every selector
   scoped to the tool body so nothing reaches the shared header. */

.tpv2-body #mapContainer {
  height: 600px;
  width: 100%;
  position: relative;
  border-radius: 0.5rem;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.tpv2-body button,
.tpv2-body select,
.tpv2-body input[type="checkbox"] {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 767px) {
.tpv2-body #mapContainer {
  height: 62vh;
  min-height: 320px;
}

.tpv2-body .tool-card .container {
  padding-left: 0.25rem;
  padding-right: 0.25rem;
  padding-top: 1rem;
  padding-bottom: 1rem;
}

.tpv2-body .tool-card h1 {
  font-size: 1.5rem;
}

.tpv2-body .tool-card h2 {
  font-size: 1.1rem;
}

.tpv2-body #importBtn,
.tpv2-body #clearPointsBtn,
.tpv2-body #exportBtn,
.tpv2-body #loadFromServerBtn,
.tpv2-body #saveToServerBtn {
  width: 100%;
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.tpv2-body .leaflet-control-zoom a {
  width: 40px !important;
  height: 40px !important;
  line-height: 40px !important;
  font-size: 20px !important;
}

.tpv2-body .leaflet-control-coordinates {
  font-size: 11px;
  padding: 4px 8px;
  bottom: 12px;
}
}

.tpv2-body .leaflet-control-coordinates {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.85);
  color: var(--sk-text);
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-family: monospace;
  font-size: 0.875rem;
  z-index: 999;
  pointer-events: none;
  border: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  font-weight: 600;
  width: auto;
  text-align: center;
}

.tpv2-body .leaflet-control-container .leaflet-top.leaflet-right {
  margin-right: 10px;
  margin-top: 10px;
}

.tpv2-body .leaflet-control-zoom {
  border: 2px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

.tpv2-body .location-label {
  background: none;
  border: none;
  font-size: 11px;
  font-family: 'Public Sans', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.7px;
}

.tpv2-body .location-label div {
  color: rgba(255, 255, 255, 0.95);
  text-shadow:
  -1px -1px 2px rgba(0,0,0,0.8),
  1px -1px 2px rgba(0,0,0,0.8),
  -1px 1px 2px rgba(0,0,0,0.8),
  1px 1px 2px rgba(0,0,0,0.8);
  white-space: nowrap;
  transition: transform 0.2s ease;
  pointer-events: none;  /* Allows clicking through the text */
  user-select: none;     /* Prevents text selection */
}

.tpv2-body .location-label div:hover {
  transform: scale(1.1);
}

.tpv2-body .poi-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;  /* Ensures the icon is clickable */
  cursor: pointer;
}

.tpv2-body .poi-marker i {
  display: block;
  text-align: center;
  filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.9));
  -webkit-text-stroke: 0.5px rgba(0, 0, 0, 0.7);
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  transition: transform 0.2s ease, filter 0.2s ease;
  font-size: 14px;
}

.tpv2-body .poi-marker i:hover {
  transform: scale(1.2);
  filter: drop-shadow(0 0 3px rgba(255, 255, 255, 1));
}

.tpv2-body .leaflet-circle-marker {
  stroke-width: 2;
  stroke: var(--sk-warning); /* Orange border */
  fill: color-mix(in srgb, var(--sk-warning) 40%, transparent); /* Semi-transparent orange fill */
  transition: stroke 0.2s ease, fill 0.2s ease;
}

.tpv2-body .leaflet-circle-marker:hover {
  stroke: var(--sk-warning); /* Darker orange border on hover */
  fill: color-mix(in srgb, var(--sk-warning) 60%, transparent); /* More opaque orange fill on hover */
}

.tpv2-body .leaflet-popup-content-wrapper {
  border-radius: 0.5rem;
  padding: 0.5rem;
}

.tpv2-body .leaflet-popup-content {
  margin: 0.5rem;
}

.tpv2-body #chernarusBtn.active-map,
.tpv2-body #livoniaBtn.active-map,
.tpv2-body #sakhalBtn.active-map {
  background-color: var(--sk-info);
  color: white;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.tpv2-body #spawnPointsContainer {
  scrollbar-width: thin;
  scrollbar-color: var(--sk-border) var(--sk-border);
}

.tpv2-body #spawnPointsContainer::-webkit-scrollbar {
  width: 8px;
}

.tpv2-body #spawnPointsContainer::-webkit-scrollbar-track {
  background-color: var(--sk-surface);
  border-radius: 4px;
}

.tpv2-body #spawnPointsContainer::-webkit-scrollbar-thumb {
  background-color: var(--sk-border);
  border-radius: 4px;
  border: 2px solid var(--sk-border-2);
}

.tpv2-body button:hover {
  transform: translateY(-1px);
  transition: transform 0.2s ease;
}

.tpv2-body button:active {
  transform: translateY(0px);
}

.tpv2-body .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 5px;
  border-radius: 3px;
}