/* ============================================================================
 * MelóPont — közös térkép-stílusok (js/mp-map.js)
 * Színek csak tokenből (melopont-style.css :root + az alábbi --mpm-* helyi tokenek).
 * ========================================================================== */
:root {
  --mpm-pin: var(--mp-blue);
  --mpm-pin-edit: var(--mp-green);
  --mpm-pin-ring: var(--mp-white);
  --mpm-pin-shadow: 0 4px 10px rgba(16, 24, 40, .35);
  --mpm-area: rgba(10, 102, 194, .14);
  --mpm-area-stroke: rgba(10, 102, 194, .55);
  --mpm-map-bg: #E9EEF3;
  --mpm-radius: 12px;
  --mpm-warn-ink: #8A4B00;
  --mpm-warn-bg: var(--mp-orange-light);
  --mpm-ok-ink: #05603A;
  --mpm-ok-bg: var(--mp-green-light);
}

/* Jelölő (csepp alakú tű) */
.mpm-pin-wrap { background: transparent; border: 0; }
.mpm-pin {
  position: relative;
  display: block;
  width: 28px;
  height: 28px;
  margin: 2px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: var(--mpm-pin);
  border: 3px solid var(--mpm-pin-ring);
  box-shadow: var(--mpm-pin-shadow);
  box-sizing: border-box;
}
.mpm-pin--edit { background: var(--mpm-pin-edit); cursor: grab; }
.mpm-pin-dot {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mpm-pin-ring);
}
.mpm-area { fill: var(--mpm-area); stroke: var(--mpm-area-stroke); stroke-width: 2; }

/* Címválasztó */
.mpm-picker { margin-top: 10px; }
.mpm-picker-map {
  width: 100%;
  height: 220px;
  border-radius: var(--mpm-radius);
  overflow: hidden;
  background: var(--mpm-map-bg);
  border: 1px solid var(--mp-card-border);
  position: relative;
  z-index: 0;
}
.mpm-picker-status {
  margin: 8px 0 0;
  font-size: calc(14px * var(--mp-fs, 1));
  line-height: 1.45;
  color: var(--mp-text-muted);
}
.mpm-picker-status:empty { display: none; }
.mpm-picker-status.is-warn { color: var(--mpm-warn-ink); background: var(--mpm-warn-bg); padding: 8px 10px; border-radius: 8px; }
.mpm-picker-status.is-ok { color: var(--mpm-ok-ink); background: var(--mpm-ok-bg); padding: 8px 10px; border-radius: 8px; }
.mpm-link-btn {
  margin-top: 6px;
  padding: 6px 0;
  background: none;
  border: 0;
  color: var(--mp-text-link);
  font: inherit;
  font-size: calc(14px * var(--mp-fs, 1));
  font-weight: 600;
  cursor: pointer;
}
.mpm-link-btn:hover { text-decoration: underline; }
.mpm-link-btn[hidden] { display: none; }

/* A Leaflet saját vezérlői ne takarják a lebegő fejlécet */
.mpm-picker-map .leaflet-top,
.mpm-picker-map .leaflet-bottom { z-index: 400; }

/* A forrásmegjelölés is olvasható legyen (min. 14 px — a Leaflet alapja 12 px).
   A leaflet.css futás közben, ezután töltődik be, ezért erősebb szelektor kell. */
html .leaflet-container .leaflet-control-attribution { font-size: calc(14px * var(--mp-fs, 1)); line-height: 1.4; }

/* NEAR-ALERT-05: hatókör-térkép (mpMap.area) — a távolság köre és a pontok (álláshirdetések) */
.mpm-reach { fill: var(--mpm-area); stroke: var(--mpm-area-stroke); stroke-width: 2; stroke-dasharray: 6 5; }
.mpm-dot { fill: var(--mp-green, #057642); fill-opacity: .95; stroke: var(--mp-white, #FFFFFF); stroke-width: 2.5; transition: fill-opacity .15s, stroke-opacity .15s; }
.mpm-dot.is-out { fill: var(--mp-text-muted, #5B6676); fill-opacity: .35; stroke-opacity: .6; }
.leaflet-popup-content .mpm-pop-t { display: block; font-weight: 700; font-size: calc(15px * var(--mp-fs, 1)); color: var(--mp-text-primary, #191919); }
.leaflet-popup-content .mpm-pop-s { display: block; margin: 2px 0 6px; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-text-muted, #5B6676); }
.leaflet-popup-content .mpm-pop-a { font-weight: 700; font-size: calc(14px * var(--mp-fs, 1)); color: var(--mp-blue, #0A66C2); }