.location-map.srodno-map {
  height: auto;
  min-height: 0;
  margin: 18px 0;
  overflow: hidden;
  border: 1px solid #cbdcd7;
  border-radius: 16px;
  background: #f6faf8;
  isolation: isolate;
}
.map-mode-switch {
  display: flex;
  gap: 6px;
  padding: 10px;
  background: #eef5f1;
}
.map-mode-switch button {
  flex: 1;
  min-height: 44px;
  padding: 9px 12px;
  border: 1px solid transparent;
  border-radius: 9px;
  color: #31554c;
  background: transparent;
  font: 600 13px/1.35 var(--sans, sans-serif);
  cursor: pointer;
}
.map-mode-switch button[aria-pressed="true"] {
  color: #fff;
  background: #235b4d;
  box-shadow: 0 2px 5px #173f3820;
}
.map-connection {
  margin: 0 !important;
  min-height: 44px;
  padding: 9px 13px;
  color: #4b635d;
  font-size: 12px;
  line-height: 1.55 !important;
  border-bottom: 1px solid #d6e3dd;
}
.map-stage {
  position: relative;
  width: 100%;
  height: clamp(260px, 42vh, 370px);
  overflow: hidden;
  background: #e0eee6;
}
.map-surface {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.map-surface.map-surface-hidden {
  visibility: hidden;
  pointer-events: none;
}
.map-online.leaflet-container {
  font-family: var(--sans, sans-serif);
  background: #e0eee6;
}
.map-sketch {
  display: block;
  width: 100%;
  height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.map-sketch[tabindex] { cursor: crosshair; }
.map-sketch:focus-visible {
  outline: 3px solid #764cba;
  outline-offset: -4px;
}
.map-grid-line { fill: none; stroke: #a5c1bb; stroke-width: 1; stroke-dasharray: 3 8; opacity: .45; }
.map-grid-label { fill: #67887f; font: 12px sans-serif; }
.map-region-border { fill: none; stroke: #9cb7a9; stroke-width: 2; stroke-dasharray: 5 4; }
.map-city { fill: #4c6a61; }
.map-city text { fill: #2b4a40; font: 16px sans-serif; paint-order: stroke; stroke: #edf3e8; stroke-width: 4px; stroke-linejoin: round; }
.map-point { cursor: grab; }
.map-point:active { cursor: grabbing; }
.map-area-circle { fill: #bf5f3d22; stroke: #b64c2e; stroke-width: 2; stroke-dasharray: 4 3; }
.map-pin { fill: #bf4c30; stroke: #fff; stroke-width: 3; filter: drop-shadow(0 2px 2px #345b4930); }
.map-pin-dot { fill: #fff; pointer-events: none; }
.map-sketch-label {
  position: absolute;
  inset: auto 10px 10px;
  width: fit-content;
  max-width: calc(100% - 20px);
  padding: 5px 8px;
  border-radius: 5px;
  background: #fffffff0;
  color: #466258;
  font-size: 10px;
  font-weight: 600;
  pointer-events: none;
}
.map-sketch-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 4px;
}
.map-sketch-controls button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  border: 1px solid #b9cec4;
  border-radius: 8px;
  background: #fffffff5;
  color: #244f42;
  font: 600 23px/1 var(--sans, sans-serif);
  box-shadow: 0 2px 5px #315d4c15;
  cursor: pointer;
}
.map-sketch-controls [data-map-zoom="region"] { font-size: 12px; padding: 0 10px; }
.map-caption {
  margin: 0 !important;
  padding: 11px 13px;
  border-top: 1px solid #d6e3dd;
  font-size: 12px;
  line-height: 1.55 !important;
  color: #4b635d;
}
.map-selection-status {
  margin: 14px 0 !important;
  padding: 12px 14px;
  border-radius: 10px;
  background: #f0f2f4;
  color: #4c5c60;
  font-size: 13px;
  font-weight: 600;
}
.map-selection-status.has-selection { color: #235848; background: #e6f3e9; }
.map-manual { padding: 14px 0; border-block: 1px solid var(--line, #d6e3dd); }
.map-manual summary { cursor: pointer; color: #285a4b; font-size: 13px; font-weight: 600; }
.map-manual p { margin: 10px 0; color: #5c6d64; font-size: 12px; }
.map-manual-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.map-manual-fields label { display: grid; gap: 7px; min-width: 0; font-size: 12px; }
.map-manual-fields input { width: 100%; min-width: 0; font-size: 16px; }
.map-manual-fields .button { grid-column: 1/-1; justify-self: start; min-height: 44px; }
.map-modal-actions { display: flex; align-items: center; gap: 15px; flex-wrap: wrap; margin: 20px 0; }
.map-modal-actions > button { min-height: 48px; }
.map-modal-actions .button:disabled { opacity: .55; cursor: not-allowed; }
.map-external-link { display: inline-block; color: #285a4b; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.map-privacy-note { color: #62766d; font-size: 12px; margin-top: 12px; }
.map-place-name { margin: 0 0 10px; font-size: 21px; }
.map-online .leaflet-control-zoom a { width: 40px; height: 40px; line-height: 40px; }
@media (max-width: 600px) {
  .map-stage { height: 280px; }
  .map-mode-switch { gap: 4px; padding: 7px; }
  .map-mode-switch button { font-size: 12px; padding-inline: 7px; }
  .map-connection { font-size: 11px; }
  .map-modal-actions { align-items: stretch; flex-direction: column; gap: 8px; }
  .map-modal-actions .button { width: 100%; padding-inline: 10px; font-size: 13px; }
  .map-caption { font-size: 11px; }
}