/* ==========================================================================
   WS-Karte: OpenStreetMap (OSM) Leaflet Stylesheet mit 20-km-Radiuskreis
   Wagner & Steinbach Pflege GmbH
   ========================================================================== */

.wsp-leaflet-map-wrapper {
  position: relative;
  width: 100%;
  margin: 0 auto;
}

.wsp-leaflet-card {
  position: relative;
  background: #ffffff;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 16px 40px rgba(55, 43, 37, 0.08);
  border: 1px solid rgba(140, 75, 62, 0.14);
}

.wsp-leaflet-map-frame {
  width: 100%;
  height: 650px;
  min-height: 480px;
  background: #E8ECE9;
  position: relative;
  z-index: 10;
}

/* Radius Badge */
.wsp-leaflet-radius-badge {
  background: #8C4B3E !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 5px 12px !important;
  font-weight: 700 !important;
  font-size: 12px !important;
  box-shadow: 0 4px 14px rgba(140, 75, 62, 0.35) !important;
  pointer-events: none;
}

.wsp-leaflet-radius-badge::before {
  border-top-color: #8C4B3E !important;
}

/* Custom Marker Styles */
.wsp-leaflet-marker-hq {
  width: 32px;
  height: 32px;
  background: #8C4B3E;
  border: 2.5px solid #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(140, 75, 62, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  font-size: 14px;
}

.wsp-leaflet-marker-town {
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 255, 255, 0.92);
  padding: 3px 8px;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(140, 75, 62, 0.2);
  font-size: 11px;
  font-weight: 600;
  color: #2B231E;
  white-space: nowrap;
}

.wsp-leaflet-marker-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.wsp-leaflet-marker-dot.green { background: #2E7D32; }
.wsp-leaflet-marker-dot.yellow { background: #F59E0B; }
.wsp-leaflet-marker-dot.white { background: #9E9E9E; }

/* Responsive Adjustments */
@media (max-width: 768px) {
  .wsp-leaflet-map-frame {
    height: 520px;
    min-height: 400px;
  }
}

/* Leaflet OSM Map Overrides: Kein Rahmen / Quadrat um den SVG-Radiuskreis */
.leaflet-container svg,
.leaflet-overlay-pane svg,
.leaflet-pane svg,
svg.leaflet-zoom-animated,
.wsp-leaflet-map-frame svg,
.wsp-leaflet-map-container svg,
.wsp-map-card svg,
.leaflet-layer svg {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Kachelnaht- & Gitter-Fix: Verhindert weiße Gitterlinien (Längen- und Breitengrade) zwischen OSM-Tiles */
.leaflet-container img.leaflet-tile {
  mix-blend-mode: normal !important;
}

.leaflet-container,
.wsp-leaflet-map-frame,
.leaflet-tile-pane,
.leaflet-tile-container {
  background-color: #cad2d3 !important;
}

.leaflet-tile {
  outline: 1px solid transparent;
}

/* Strg + Mausrad Zoom Hinweis */
.wsp-map-ctrl-zoom-hint {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(43, 35, 30, 0.38);
  color: #ffffff;
  font-family: var(--font-sans, "Plus Jakarta Sans", system-ui, sans-serif);
  font-size: 0.95rem;
  font-weight: 500;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.22s ease;
  z-index: 9999;
}

.wsp-map-ctrl-zoom-hint span {
  background: rgba(25, 20, 17, 0.88);
  padding: 10px 22px;
  border-radius: 999px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(4px);
  letter-spacing: 0.01em;
}

.wsp-map-ctrl-zoom-hint.is-active {
  opacity: 1;
}

/* Vollbild-Modus für OSM-Karte */
.wsp-fullscreen-toggle-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: #ffffff !important;
  color: #4A403A !important;
  border: 1.5px solid rgba(140, 75, 62, 0.22) !important;
  border-radius: 999px !important;
  padding: 7px 16px !important;
  font-size: 0.85rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 2px 6px rgba(55, 43, 37, 0.05) !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}
.wsp-fullscreen-toggle-btn:hover {
  background: #FAF5F2 !important;
  border-color: #8C4B3E !important;
  color: #8C4B3E !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(140, 75, 62, 0.15) !important;
}
/* Anti-Quadrat / Anti-Outline Fix für SVG & Leaflet-Pfade */
.leaflet-container :focus,
.leaflet-container svg:focus,
.leaflet-container path:focus,
.leaflet-interactive:focus,
path.leaflet-interactive:focus,
.leaflet-container svg,
.leaflet-container path {
  outline: none !important;
  -webkit-tap-highlight-color: transparent !important;
}
.wsp-fullscreen-close-floating {
  position: absolute !important;
  top: 18px !important;
  left: 18px !important;
  z-index: 10050 !important;
  display: none !important;
  align-items: center !important;
  gap: 8px !important;
  background: rgba(43, 35, 30, 0.9) !important;
  backdrop-filter: blur(8px) !important;
  color: #FFFFFF !important;
  border: 1.5px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 999px !important;
  padding: 9px 20px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35) !important;
  transition: all 0.2s ease !important;
}
.wsp-fullscreen-close-floating:hover {
  background: #8C4B3E !important;
  transform: scale(1.03) !important;
}
.wsp-osm-unified-card.is-fullscreen .wsp-fullscreen-close-floating,
.wsp-osm-unified-card:fullscreen .wsp-fullscreen-close-floating,
.wsp-osm-unified-card:-webkit-full-screen .wsp-fullscreen-close-floating {
  display: inline-flex !important;
}
  .wsp-osm-highlight-card {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    bottom: auto !important;
    right: auto !important;
    transform: translate(-50%, -50%) scale(0.95);
    max-width: 500px !important;
    width: calc(100% - 32px) !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    background: #ffffff !important;
    border-radius: 24px !important;
    padding: 24px 28px !important;
    box-shadow: 0 20px 50px rgba(45, 30, 24, 0.35) !important;
    border: 1.5px solid rgba(140, 75, 62, 0.22) !important;
    z-index: 10001 !important;
    box-sizing: border-box !important;
    margin: 0 !important;
  }
  @media (max-width: 600px) {
    .wsp-osm-highlight-card {
      width: calc(100% - 24px) !important;
      max-width: calc(100% - 24px) !important;
      padding: 18px 20px !important;
      border-radius: 20px !important;
      max-height: 88vh !important;
    }
  }
body.ws-map-fullscreen-active {
  overflow: hidden !important;
}
.wsp-osm-unified-card:fullscreen,
.wsp-osm-unified-card:-webkit-full-screen,
.wsp-osm-unified-card.is-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: 100vw !important;
  max-height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: none !important;
  z-index: 9999999 !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: none !important;
  background: #FAF8F5 !important;
  overflow: hidden !important;
}
.wsp-osm-unified-card.is-fullscreen .wsp-map-topbar {
  flex: 0 0 auto !important;
  border-radius: 0 !important;
  margin: 0 !important;
}
.wsp-osm-unified-card:fullscreen .wsp-leaflet-map-container,
.wsp-osm-unified-card:-webkit-full-screen .wsp-leaflet-map-container,
.wsp-osm-unified-card.is-fullscreen .wsp-leaflet-map-container {
  flex: 1 1 auto !important;
  width: 100% !important;
  height: calc(100vh - 75px) !important;
  height: calc(100dvh - 75px) !important;
  min-height: calc(100vh - 75px) !important;
  min-height: calc(100dvh - 75px) !important;
  margin: 0 !important;
  border-radius: 0 !important;
  position: relative !important;
}
.wsp-osm-unified-card.is-fullscreen .wsp-leaflet-map-frame,
.wsp-osm-unified-card.is-fullscreen .leaflet-container {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  position: absolute !important;
  inset: 0 !important;
}