/* ===   MAIN.CSS - Central Stylesheet with Modular Imports  === */

/* ═══════════════════════════════════════════════════════════════════════════
   CSS MODULE IMPORTS
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('listing-core.css');
@import url('search.css');
@import url('nearby.css');
@import url('styles-autocomplete.css');

/* *** CSS Variables für Light/Dark Mode *** */
:root {
  --title-background: rgba(111, 233, 166, 1);
  --nearby-title: rgba(111, 233, 166, 0.66);
  --bg-color: white;
  --text-color: black;
  --border-color: #ccc;
  --shadow-color: rgba(0, 0, 0, 0.5);
  --dropdown-bg: white;
  --dropdown-alt-bg: #f6f6f6;
  --dropdown-border: #ddd;
  --dropdown-alt-border: #eee;
  --search-bg: white;
  --search-opacity: 0.3;
  --search-focus-opacity: 0.9;
  --hover-text-color: #666;
  --hover-text-color-active: #ccc;

  /* ============================================================================
     SPACE STATUS FARBEN (Kanonische Quelle für CSS)
     Synchron mit icons.js ICON_COLOURS
     ============================================================================ */
  --space-hover: #0000ff;
  --space-open: #009900;
  --space-closed: #DD0000;
  --space-unknown: #FF8C00;

  /* Zusätzliche Farben für konsistente Nutzung */
  --color-default: #2c2c2c;
  --color-highlight: #2c2c2c;
}

/* *** Dark Mode Variables *** */
@media (prefers-color-scheme: dark) {
  :root {
    --bg-color: #1a1a1a;
    --text-color: #e0e0e0;
    --border-color: #444;
    --shadow-color: rgba(0, 0, 0, 0.7);
    --dropdown-bg: #2a2a2a;
    --dropdown-border: #555;
    --dropdown-alt-bg: #333;
    --dropdown-alt-border: #444;
    --search-bg: #2a2a2a;
    --search-opacity: 0.9;
    --search-focus-opacity: 1;
    --hover-text-color: #aaa;
    --hover-text-color-active: #ddd;

    /* Dark Mode spezifische Farben */
    --space-hover: #66b3ff;
    --color-default: #666666;
    --color-highlight: #666666;
  }
}

body {
  margin: 0;
  background-color: var(--bg-color);
  color: var(--text-color);
}

#map {
  position: absolute;
  width: 100vw;
  height: 100vh;
}

.title {
  font-family: 'Lato', sans-serif;
  z-index: 400;
  position: absolute;
  left: 2.5em;
  top: 1em;
  color: blue;
  background-color: var(--title-background);
  padding: .25em .75em .25em .50em;
  border-radius: .6em;
  border: .30em dashed rgba(256, 256, 256, .77);
  box-shadow: .2em -.1em .6em .35em var(--shadow-color);
  font-weight: bold;
  font-size: 1.7em;
  transition: 0.75s ease-out;
  /* transition: opacity; */
}

.title:hover {
  box-shadow: none;
  opacity: 0.8;
  transition: 0.25s ease-out;
  /* filter: invert(1) hue-rotate(180deg) brightness(0.55) contrast(.8) saturate(0.75); */
  outline: 1px solid #666666;
}

.title.popup-active {
  opacity: 0.12;
  transition: opacity 0.25s ease-in-out;
}

a#titleurl {
  text-decoration: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SEARCH STYLES MOVED TO search.css
   ═══════════════════════════════════════════════════════════════════════════ */

.user-guide,
.add-makerspace {
  z-index: 2000;
  width: 30px;
  height: 30px;
  transition: all 0.15s ease-in;
  transition-delay: 0.25s;
  /* ✅ Delay für ALLES inkl. text-align */
  overflow: hidden;
  overflow-y: scroll;
  font-family: 'Lato', sans-serif;
  position: absolute;
  right: 1.5em;
  bottom: 1.5em;
  border-radius: 20px;
  padding: 6px;
  background-color: #ffff00;
  box-shadow: 2px 2px 2px 2px rgba(0, 0, 0, 0.3);
  line-height: 30px;
  /* ✅ Zentriert vertikal */
  text-align: center;
  /* ✅ Zentriert horizontal */
  opacity: 0.66;
  color: black;
  /* Force black text on yellow background */
}

.user-guide:hover,
.add-makerspace:hover {
  width: 260px;
  height: 40%;
  padding: 12px;
  background-color: #ffff00;
  box-shadow: 3px 6px 20px 2px rgba(0, 0, 0, 0.7);
  line-height: 1.5em;
  /* ✅ Normale Zeilenhöhe */
  text-align: left;
  /* ✅ Linksbündig */
  transition: all 0.4s ease-out;
  transition-delay: 0.3s;
  /* ✅ Delay beim Hover */
  cursor: help;
  opacity: 0.90;
}

.user-guide:not(:hover),
.add-makerspace:not(:hover) {
  /* ✅ Delay ist im Basis-Selector bereits gesetzt */
  opacity: 0.66;
}

/* ✅ H2 im minimierten Zustand: nur Icons zeigen */
.user-guide:not(:hover) h2,
.add-makerspace:not(:hover) h2 {
  margin: 0;
  padding: 0;
  line-height: 30px;
  font-size: 18px;
  /* Text wird durch overflow:hidden des Eltern-Containers ausgeblendet */
}

.user-guide h2,
.add-makerspace h2 {
  margin: 0.5em 0;
  font-size: 1em;
  color: black;
  /* Force black text */
}

.user-guide ol,
.add-makerspace ul {
  margin: 0;
  padding-left: 1.2em;
}

.user-guide ol li,
.add-makerspace ul li {
  margin-bottom: 1.5em;
  font-size: 0.9em;
  line-height: 1.5em;
  color: black;
  /* Force black text */
}

.add-makerspace {
  box-shadow: 3px 6px 20px 2px rgba(0, 0, 0, 0.5) inset !important;
  left: 1.5em;
  background-color: var(--space-hover);
  opacity: 0.5;
  color: white;
}

.add-makerspace:hover {
  height: 12%;
  background-color: var(--space-hover);
  cursor: wait;
  opacity: 0.90;
}

.add-makerspace:not(:hover) {
  transition-delay: 0.3s;
  opacity: 0.5;
}

.add-makerspace h2 {
  color: white;
  /* Force white text */
}

.add-makerspace ul li,
.add-makerspace ul,
.add-makerspace ul li a {
  color: white !important;
  text-decoration: none;
}

.add-makerspace li:hover {
  font-weight: bold;
}

.add-makerspace li:hover::before {
  content: ">>> ";
}






/* ===================================
   LANGUAGE SWITCHER & SETTINGS PILL
   =================================== */

.language-switcher {
  position: absolute;
  top: 1.2em;
  right: calc(1.5em + 300px + 12px);
  z-index: 1000;
}

/* ===================================
   SETTINGS BUTTON (SOLO GEAR)
   =================================== */

.language-switcher {
  position: absolute;
  top: 1.2em;
  right: calc(1.5em + 300px + 12px);
  z-index: 1000;
}

/* Solo Gear Button */
.settings-gear-button-solo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border-color);
  box-shadow: 0px 2px 8px 1px var(--shadow-color);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  opacity: 0.5;
}

.settings-gear-button-solo:hover {
  opacity: 0.9;
  background: var(--dropdown-bg);
}

.settings-gear-button-solo i {
  font-size: 20px;
  color: var(--text-color);
  transition: transform 0.3s ease;
}

.settings-gear-button-solo:hover i {
  transform: rotate(90deg);
}

/* ===================================
   SETTINGS POPOVER
   =================================== */

.settings-popover {
  font-family: Lato, sans-serif;
  position: absolute;
  right: 0;
  top: calc(100% + 5px);
  background: var(--dropdown-bg);
  border-radius: 16px;
  box-shadow: 0 4px 12px 2px var(--shadow-color);
  min-width: 280px;
  z-index: 10001;
  overflow: hidden;
  animation: fadeIn 0.15s ease-out;
}

/* Settings Header */
.settings-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--dropdown-border);
  background: var(--dropdown-alt-bg);
}

/* ✅ Zweizeilige Sprach-Sektion */
.settings-header-languages {
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}

.settings-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.settings-header:last-child {
  border-bottom: none;
}

.settings-header-content {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9em;
  font-weight: normal;
  /* ✅ Normal statt Bold */
  color: var(--text-color);
  flex-shrink: 0;
}

.settings-header-content i {
  width: 16px;
  text-align: center;
  color: #0066ff;
}

/* Icon Buttons im Header */
.settings-header-icons {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ✅ FLAGGEN: Zweite Zeile, gleichmäßig verteilt */
.settings-language-icons {
  gap: 6px;
  width: 100%;
  justify-content: space-between;
  flex-wrap: nowrap;
}

.settings-icon-btn {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-color);
  font-size: 0.85em;
  border-radius: 4px;
  /* transition: all 0.15s ease; */
  flex-shrink: 0;
  text-align: center;
  vertical-align: middle !important;
  width: 32px !important;
}

/* ✅ Flaggen: Größere Größe für sichtbare Flaggen */
.settings-flag-btn {
  font-size: 20px !important;
  width: 24px !important;
  height: 24px !important;
  opacity: 0.25 !important;
  /* ✅ Sichtbar */
  padding: 2px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  background-color: transparent !important;
  /* ✅ Nur Farbe, nicht Image */
}

.settings-flag-btn:hover {
  opacity: 1 !important;
  /* ✅ Volle Sichtbarkeit */
  transform: scale(1.15);
  background-color: transparent !important;
  /* ✅ Nur Farbe, nicht Image */
}

/* Dark Mode & andere Icons: MIT active/hover */
.settings-icon-btn:not(.settings-flag-btn):hover {
  background: var(--dropdown-border);
  transform: scale(1.15);
}

/* ✅ Active-Styling NUR für NICHT-Flaggen */
.settings-icon-btn.active:not(.settings-flag-btn) {
  background: #0066ff;
  width: 20px;
  color: white;
  box-shadow: 0 0 0 2px #0066ff;
  text-align: center;
  vertical-align: middle !important;
}

/* ✅ Active Flagge: NUR Opacity ändern */
.settings-flag-btn.active {
  opacity: 1 !important;
}

.settings-icon-btn.settings-icon-danger {
  color: var(--space-closed);
}

.settings-icon-btn.settings-icon-danger:hover {
  background: rgba(221, 68, 68, 0.1);
}

/* Fade-in Animation */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .settings-gear-button-solo {
    background: var(--dropdown-bg);
  }

  .settings-header {
    background: var(--dropdown-bg);
  }
}

/* Dark Mode per Attribute */
[data-color-scheme="dark"] {
  --bg-color: #1a1a1a;
  --text-color: #e0e0e0;
  --border-color: #444;
  --shadow-color: rgba(0, 0, 0, 0.7);
  --dropdown-bg: #2a2a2a;
  --dropdown-border: #555;
  --dropdown-alt-bg: #333;
  --dropdown-alt-border: #444;
  --search-bg: #2a2a2a;
  --search-opacity: 0.9;
  --search-focus-opacity: 1;
  --hover-text-color: #aaa;
  --hover-text-color-active: #ddd;
}

[data-color-scheme="light"] {
  --bg-color: white;
  --text-color: black;
  --border-color: #ccc;
  --shadow-color: rgba(0, 0, 0, 0.35);
  --dropdown-bg: white;
  --dropdown-alt-bg: #f6f6f6;
  --dropdown-border: #ddd;
  --dropdown-alt-border: #eee;
  --search-bg: white;
  --search-opacity: 0.3;
  --search-focus-opacity: 0.9;
  --hover-text-color: #666;
  --hover-text-color-active: #ccc;
}

/* Responsive */
@media (max-width: 768px) {
  .language-switcher {
    right: calc(1.5em + 300px + 8px);
  }

  .settings-popover {
    min-width: 240px;
  }
}






/* ✨ NEU: Utility-Klasse zum Ausblenden */
.is-hidden {
  display: none !important;
  /* Stellt sicher, dass das Element ausgeblendet wird */
}




/* Connection Line Styling */
.connection-line {
  pointer-events: none !important;
  z-index: 100 !important;
}

/* Pin Stabilization (ohne Hover-Animation im CSS) */
.leaflet-marker-icon {
  /* --marker-scale: 1;   Neue Zeile */
  transition: transform 0.2s ease-out !important;
  will-change: transform !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
  /* transform: scale(var(--marker-scale)) !important; */
}

/* Entferne CSS-Hover da es mit Leaflet kollidiert */


/* === PERFORMANCE-OPTIMIERUNG für den ZOOM (VERFEINERT) === */

/* 1. Definiert eine weiche Transition auf den Markern und Schatten selbst.
   Dies sorgt dafür, dass sie sowohl ein- als auch ausblenden (Dauer: 0.2s). */
.leaflet-marker-pane .leaflet-marker-icon,
.leaflet-shadow-pane img {
  transition: opacity 0.2s ease-in-out !important;
}

/* 2. Die Klasse .map-is-zooming setzt die Deckkraft auf 0 und löst damit
   die oben definierte Transition (das Ausblenden) aus. */
/* #map.map-is-zooming .leaflet-marker-pane .leaflet-marker-icon,
#map.map-is-zooming .leaflet-shadow-pane img {
  opacity: 0 !important;
  pointer-events: none !important;
} */


/* Während Zoom: NUR Leaflets Zoom-Animation blockieren, NICHT unsere Scale-Transition */
.leaflet-zoom-animated .leaflet-marker-icon {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Nur wenn Marker versteckt wird */
.leaflet-marker-icon.leaflet-zoom-hide {
  transition: none !important;
  animation: none !important;
}

/* Map-weites Zooming - hier komplett ohne Transition */
/* #map.map-is-zooming .leaflet-marker-icon {
  transition: none !important;
} */

/* Popup Animations */
.leaflet-popup {
  animation: popupFadeIn 0.10s ease-out !important;
}

.leaflet-popup.leaflet-popup-closing {
  animation: popupFadeOut 0.02s ease-out !important;
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
  background-color: rgba(188, 255, 222, .83);
}

/* Dark Mode Popup Styling */
@media (prefers-color-scheme: dark) {

  .leaflet-popup-content-wrapper,
  .leaflet-popup-tip {
    background-color: rgba(60, 60, 60, 0.95);
    color: var(--text-color);
  }

  .leaflet-popup-content h3 {
    color: var(--text-color) !important;
  }

  .leaflet-popup-content a {
    color: #66b3ff !important;
  }

  /* *** ÄNDERUNG 1: URL-Farbe beim Hover auf schwarz im Dark Mode *** */
  .leaflet-popup-content a:not(.navigation-icon):hover {
    color: black !important;
  }

}



/* Dark Mode Map Filter */
#map.dark-mode-map .maplibregl-canvas-container canvas {
  filter: invert(1) hue-rotate(150deg) brightness(0.55) contrast(.8) saturate(0.75);
}



.leaflet-popup-content-wrapper {
  overflow: hidden;
  z-index: 800;

  /* Erhöht die maximal erlaubte Breite des Popups.
    Der Standardwert von Leaflet ist 300px. Passen Sie diesen Wert
    nach Bedarf an. */
  /* max-width: 380px !important; */

  /* Sorgt dafür, dass die Breite flexibel bleibt und sich dem
    Inhalt anpasst, bis die max-width erreicht ist. */
  width: auto !important;
}

/* Das eigentliche Content-Element mit Padding */
.leaflet-popup-content {
  margin: 12px !important;
  /* Leaflet nutzt margin statt padding für den Innenabstand */
}

@keyframes popupFadeIn {
  0% {
    opacity: 0;
  }

  50% {
    opacity: .66;
  }

  100% {
    opacity: 1;
  }
}

@keyframes popupFadeOut {
  0% {
    opacity: 1;
  }

  50% {
    opacity: .33;
  }

  100% {
    opacity: 0;
  }
}

.leaflet-popup-fade-animation {
  animation: none !important;
}

.spac {
  padding-left: 1.5em;
  margin: 0 .1em 0 .1em;
  border-radius: .25em;
  background-color: blue;
  color: white;
  border: .1em solid transparent;
}

.spac:hover {
  background-color: white;
  color: blue;
  border: .1em solid blue;
}

a#url {
  display: inline-block;
  width: 200%;
  color: var(--text-color);
  background: transparent;
  margin-top: 0.5em;
  padding-left: 25%;
  position: relative;
  right: 125%;
  cursor: alias;
  text-align: right;
}

a#url:hover {
  color: white;
  background: var(--text-color);
  text-decoration: none;
  text-align: left;
  left: -25%;
}

a h3 {
  padding: 0.2em 0.3em 0.2em 2em;
  display: inline;
  color: white !important;
  text-decoration: none !important;
  border-radius: .36em;
  background: blue;
  border: .12em solid transparent;
  cursor: none;
}

a:hover h3 {
  color: blue !important;
  background: white;
  border-color: blue;
}

a#titleurl {
  padding: .2em .1em .2em 0;
  text-decoration: none;
}

hr {
  border: 0px solid white;
}

#style {
  font-size: small;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 400;
}

#style:hover {
  color: var(--text-color);
  font-weight: 800;
}

#style {
  display: block;
  /* Stellt sicher, dass es eine eigene Zeile hat */
  margin-bottom: 8px;
  /* Abstand nach unten */
  font-size: small;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 400;
}

#style:hover {
  color: var(--text-color);
  font-weight: 800;
}

/* Zoom Frame Transitions */
.leaflet-overlay-pane svg path {
  transition: opacity 0.4s ease-in-out, fill-opacity 0.4s ease-in-out !important;
}

.zoom-preview-overlay {
  transition: opacity 0.4s ease-in-out !important;
}

.leaflet-interactive {
  transition: opacity 0.4s ease-in-out, fill-opacity 0.4s ease-in-out;
}

/* *** Door-Icon Klassen *** */
.space-name-open,
.door-icon-open {
  color: var(--space-open);
  /* Grün für geöffnet */
}

.space-name-closed,
.door-icon-closed {
  color: var(--space-closed);
  /* Rot für geschlossen */
}

.space-name-unknown,
.door-icon-unknown {
  color: var(--space-unknown);
  /* Orange für unbekannt */
}

.space-name-default {
  color: var(--space-hover);
  /* Blau für Spaces ohne API */
}

/* *** weight 600 für Namen *** */
.space-name-open,
.space-name-closed,
.space-name-unknown,
.space-name-default {
  font-weight: 600;
}

/* === POPUP NAME HIGHLIGHTING (Open & Closed) === */

/* Allgemeines h3-Style: Name und Bookmark-Icon inline halten */
a#titleurl h3 {
  /* display: inline-block; */
  /* max-width: 100%; */
  max-width: none;
  /* ← Keine Limitierung mehr */
  white-space: nowrap;
  /* ← Name bricht nicht um */
}

/* Styling für den Makerspace-Namen, WENN der Space offen ist */
a#titleurl h3.space-open {
  background-color: var(--space-open);
  /* Grüner Hintergrund */
}

/* Stellt sicher, dass das Icon im grünen Namen weiß ist und korrekt ausgerichtet ist */
a#titleurl h3.space-open .fas {
  color: white !important;
  position: relative;
  bottom: 1px;
  margin-right: 0.0em;
}

/* Styling für den Makerspace-Namen, WENN der Space geschlossen ist */
a#titleurl h3.space-closed {
  background-color: var(--space-closed);
  /* Roter Hintergrund */
}

/* Stellt sicher, dass das Icon im roten Namen weiß ist und korrekt ausgerichtet ist */
a#titleurl h3.space-closed .fas {
  color: white !important;
  position: relative;
  bottom: 1px;
  margin-right: 0.0em;
}






/* === POPUP NAME HIGHLIGHTING (Unknown Status) === */

/* Styling für den Makerspace-Namen, WENN der Space-Status unbekannt ist */
a#titleurl h3.space-unknown {
  background-color: var(--space-unknown);
  /* Gelber Hintergrund */
  border-color: var(--space-unknown);
  /* Gelber Rand */
}

/* Stellt sicher, dass das Icon im gelben Namen weiß ist und korrekt ausgerichtet ist */
a#titleurl h3.space-unknown .fas {
  color: white !important;
  position: relative;
  bottom: 1px;
  margin-right: 0.0em;
}

/* === POPUP NAME HOVER-EFFEKTE === */

/* Hover-Effekt für offenen Spaces: weißer Hintergrund, grüne Schrift */
a#titleurl:hover h3.space-open {
  background-color: white !important;
  color: var(--space-open);
  border-color: var(--space-open);
}

/* Hover-Effekt für geschlossene Spaces: weißer Hintergrund, rote Schrift */
a#titleurl:hover h3.space-closed {
  background-color: white !important;
  color: var(--space-closed);
  border-color: var(--space-closed);
}

/* Hover-Effekt für unbekannte Spaces: weißer Hintergrund, gelbe Schrift */
a#titleurl:hover h3.space-unknown {
  background-color: white !important;
  color: var(--space-unknown);
  border-color: var(--space-unknown);
}

/* Icons bei Hover in entsprechender Status-Farbe */
a#titleurl:hover h3.space-open .fas {
  color: var(--space-open);
}

a#titleurl:hover h3.space-closed .fas {
  color: var(--space-closed);
}

a#titleurl:hover h3.space-unknown .fas {
  color: var(--space-unknown);
}

/* +++ START: ENHANCED CSS-BASED NAVIGATION STYLING +++ */

.popup-street-line {
  position: relative;
  line-height: 1.5;
  margin-bottom: 2px;
  font-size: 1.1em;
}

.street {
  font-size: 0.9em;
  color: #666666;
}

.city {
  font-size: 1.3em;
  font-weight: light;
}

.city b {
  font-size: 1.1em;
}

.country {
  color: #666666;
  font-weight: normal;
}

/* Navigation Icon Base Styling */
.navigation-icon {
  position: absolute;
  top: 50%;
  right: 28px;
  font-size: 1.4em;
  transform: translateY(-50%);
  text-decoration: none;
  z-index: 10;
  display: inline-block;
  transition: all ease-in 0.025s;
}

/* Navigation Icon Hover Effect */
.navigation-icon:hover {
  right: 0px;
  transition: all ease-in-out 0.25s;
  outline: none !important;
  border: none !important;
  box-shadow: none !important;
}

.navigation-icon:hover::before {
  content: "⇢";
  font-weight: bold;
}

/* Icon Selection Based on Service Data Attribute */
.navigation-icon[data-service="google"] i::before {
  content: "\f1a0";
  /* fab fa-google */
  font-family: "Font Awesome 5 Brands";
}

.navigation-icon[data-service="apple"] i::before {
  content: "\f179";
  /* fab fa-apple */
  font-family: "Font Awesome 5 Brands";
}

.navigation-icon[data-service="osm"] i::before {
  content: "\f279";
  /* fas fa-map */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}

.navigation-icon[data-service="default"] i::before,
.navigation-icon:not([data-service]) i::before {
  content: "\f5eb";
  /* fas fa-directions */
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
}




/* Visual indicator for cycling through services */
.navigation-icon:active {
  transform: translateY(-50%) scale(1.1);
  transition: transform 0.1s ease-in-out;
}

/* Right-click visual feedback */
/* .navigation-icon[data-service="default"]:hover::after {
  content: " (Rechtsklick zum Wechseln)";
  font-size: 0.6em;
  opacity: 0.7;
  margin-left: 0.3em;
  white-space: nowrap;
} */



/* Color Definitions Based on Parent Status Class */
.popup-street-line.status-open .navigation-icon {
  color: var(--space-open);
}

.popup-street-line.status-closed .navigation-icon {
  color: var(--space-closed);
}

.popup-street-line.status-unknown .navigation-icon {
  color: var(--space-unknown);
}

.popup-street-line.status-default .navigation-icon {
  color: var(--space-hover);
}

/* Hover Effects for Navigation Icons */
.popup-street-line.status-open .navigation-icon:hover {
  color: var(--space-open);
}

.popup-street-line.status-closed .navigation-icon:hover {
  color: var(--space-closed);
}

.popup-street-line.status-unknown .navigation-icon:hover {
  color: var(--space-unknown);
}

.popup-street-line.status-default .navigation-icon:hover {
  color: var(--space-hover);
}

/* Service-specific Icon Styling with Pseudo-elements */
.navigation-icon i {
  position: relative;
}

/* Reset default icon content */
.navigation-icon i::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  line-height: 1;
}


/* Responsive Navigation Icon for Mobile */
@media (max-width: 768px) {
  .navigation-icon {
    font-size: 1.2em;
    right: 0px;
  }

  .navigation-icon:hover {
    right: -15px;
  }

  .navigation-icon:hover::after {
    display: none;
    /* Hide service labels on mobile */
  }
}

/* Dark Mode Navigation Adjustments */
@media (prefers-color-scheme: dark) {
  .popup-street-line.status-open .navigation-icon {
    color: #00bb00;
  }

  .popup-street-line.status-closed .navigation-icon {
    color: #ff5555;
  }

  .popup-street-line.status-unknown .navigation-icon {
    color: #ffaa00;
  }

  .popup-street-line.status-default .navigation-icon {
    color: #66b3ff;
  }
}

/* Animation for Icon Switching */
.navigation-icon i {
  transition: all 0.2s ease-in-out;
}

/* Accessibility: Focus States */
.navigation-icon:focus {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  .popup-street-line.status-open .navigation-icon {
    color: #008800;
  }

  .popup-street-line.status-closed .navigation-icon {
    color: #cc0000;
  }

  .popup-street-line.status-unknown .navigation-icon {
    color: #ff6600;
  }

  .popup-street-line.status-default .navigation-icon {
    color: #0000dd;
  }
}

/* +++ END: ENHANCED CSS-BASED NAVIGATION STYLING +++ */


/* Cluster Styling */



/* ALLGEMEINE CLUSTER-STYLING-ÄNDERUNGEN */

.marker-cluster {
  /* Verwenden von Flexbox zur Zentrierung des Kind-Elements (div) */
  display: flex;
  align-items: center;
  /* Vertikale Zentrierung */
  justify-content: center;
  /* Horizontale Zentrierung */
  border-radius: 100px;
  /* Für runde Cluster */
}

/* Styling des inneren Div-Elements (enthält die Zahl) */

/* Das innere Div-Element muss die volle Größe des Eltern-Clusters einnehmen,
   um die Zentrierung von Schritt 1 zu nutzen, und zusätzlich Flexbox nutzen,
   um die Zahl selbst zu zentrieren. */

.marker-cluster div {
  width: 100%;
  height: 100%;
  border-radius: 200px;

  /* Flexbox-Zentrierung für die Zahl selbst */
  display: flex;
  align-items: center;
  justify-content: center;

  margin: 0 !important;
  padding: 0 !important;
}


/* WICHTIG: Setzt die Hauptfarbe des äußeren Clusters */
.marker-cluster-small {
  background-color: rgba(50, 50, 50, 0.6) !important;
  border: 2px solid rgba(50, 50, 50, 0.8) !important;
}

.marker-cluster-medium {
  background-color: rgba(50, 50, 50, 0.7) !important;
  border: 2px solid rgba(50, 50, 50, 0.8) !important;
}

.marker-cluster-large {
  background-color: rgba(50, 50, 50, 0.8) !important;
  border: 2px solid rgba(50, 50, 50, 0.8) !important;
}

/* WICHTIG: Überschreibt die Hintergrundfarbe des inneren Rings auf Transparent */
.marker-cluster-small div,
.marker-cluster-medium div,
.marker-cluster-large div {
  background-color: transparent !important;
  /* Wichtig, damit keine Standard-Hintergrundfarbe (grün) durchscheint */
  color: white;
  font-weight: bold;
}

.marker-cluster-small div {
  font-size: 1.4em;
}

.marker-cluster-medium div {
  font-size: 1.7em;
}

.marker-cluster-large div {
  font-size: 2.3em;
}


/*  Styles für Bookmark-System  */

/* Bookmark-Icon im Suggestion-Dropdown */
/* Bookmark-Icon im Popup */
.popup-bookmark {
  cursor: pointer;
  color: var(--status-color, blue);
  font-size: 16px;
  vertical-align: middle;
  display: inline-block;
  width: 16px;
  text-align: center;
  /* Popup-spezifische Resets */
  margin-right: 0 !important;
  position: static !important;
  bottom: auto !important;
}

/* Beide FontAwesome Varianten auf gleiche Breite zwingen */
.popup-bookmark::before {
  display: inline-block;
  width: 16px;
  text-align: center;
}

.popup-bookmark:hover {
  opacity: 0.4;
}

/* ===================================
   BOOKMARK SYNC STYLES
   =================================== */

/* Dialog Overlay */
.sync-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100000;
  animation: fadeIn 0.2s ease;
}

/* Dialog */
.sync-dialog {
  background: var(--bg-color);
  border-radius: 12px;
  padding: 30px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

.sync-dialog h2 {
  margin: 0 0 25px 0;
  font-size: 1.5em;
  color: var(--text-color);
}

/* Sections */
.sync-section {
  margin-bottom: 25px;
}

.sync-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
  color: var(--text-color);
  font-size: 0.95em;
}

/* URL Container */
.sync-url-container {
  display: flex;
  gap: 8px;
}

.sync-url-input {
  flex: 1;
  padding: 12px;
  border: 2px solid var(--dropdown-border);
  border-radius: 8px;
  font-size: 0.85em;
  font-family: monospace;
  background: var(--dropdown-bg);
  color: var(--text-color);
}

.sync-url-input:focus {
  outline: none;
  border-color: var(--space-hover);
}

/* Buttons */
.sync-btn {
  padding: 10px 20px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95em;
  font-weight: 600;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.sync-btn-primary {
  background: var(--space-hover);
  color: white;
}

.sync-btn-primary:hover {
  background: #0099cc;
  transform: translateY(-1px);
}

.sync-btn-secondary {
  background: #e0e0e0;
  color: #333;
}

.sync-btn-secondary:hover {
  background: #d0d0d0;
}

.sync-btn-copy {
  background: var(--space-hover);
  color: white;
  padding: 12px 16px;
}

.sync-btn-copy:hover {
  background: #0099cc;
}

/* QR Code Container */
.sync-qr-container {
  font-family: 'Lato', sans-serif !important;
  display: flex;
  justify-content: center;
  padding: 20px;
  background: #f5f5f5;
  border-radius: 8px;
}

/* Actions */
.sync-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 25px;
}

/* Sync Menu (Dropdown) */
.sync-menu {
  position: fixed;
  background: var(--dropdown-bg);
  border: 1px solid var(--dropdown-border);
  border-radius: 8px;
  box-shadow: 0 4px 12px 2px var(--shadow-color);
  min-width: 200px;
  z-index: 10000;
  overflow: hidden;
  animation: fadeIn 0.15s ease-out;
}

.sync-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  border-bottom: 1px solid var(--dropdown-border);
  transition: background 0.15s ease;
  font-size: 0.9em;
  color: var(--text-color);
}

.sync-menu-item:last-child {
  border-bottom: none;
}

.sync-menu-item:not(.sync-status):hover {
  background: var(--dropdown-alt-bg);
}

.sync-menu-item i {
  width: 16px;
  text-align: center;
  font-size: 1em;
}

.sync-menu-item.sync-status {
  background: var(--dropdown-alt-bg);
  cursor: default;
  font-weight: 600;
  color: var(--space-open);
}

.sync-menu-item.sync-danger {
  color: var(--space-closed);
}

.sync-menu-item.sync-danger:hover {
  background: rgba(221, 68, 68, 0.1);
}

/* Sync Pill */
.sync-pill {
  background: var(--space-hover) !important;
  color: white !important;
  margin-left: 8px;
  padding: 8px 12px !important;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sync-pill:hover {
  background: var(--space-hover) !important;
  transform: translateY(-1px);
}

.sync-pill i {
  margin: 0;
}

/* Notifications */
.sync-notification {
  position: fixed;
  bottom: 30px;
  right: 30px;
  padding: 16px 24px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  font-weight: 600;
  z-index: 100001;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
}

.sync-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.sync-notification-success {
  background: var(--space-open);
  color: white;
}

.sync-notification-error {
  background: var(--space-closed);
  color: white;
}

.sync-notification-warning {
  background: var(--space-unknown);
  color: white;
}

.sync-notification-info {
  background: var(--space-hover);
  color: white;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dark Mode */
@media (prefers-color-scheme: dark) {
  .sync-btn-secondary {
    background: #444444;
    color: #aaaaaa;
  }

  .sync-btn-secondary:hover {
    background: #555555;
    color: #cccccc;
  }

  .sync-qr-container {
    background: white;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .sync-dialog {
    max-width: 95%;
    padding: 20px;
  }

  .sync-dialog h2 {
    font-size: 1.2em;
  }

  .sync-url-input {
    font-size: 0.75em;
  }

  .sync-notification {
    bottom: 20px;
    right: 20px;
    left: 20px;
  }
}


/* Zoom-Level Anzeige */
#zoom-indicator {
  position: fixed;
  width: 26px;
  height: 26px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  line-height: 26px;
  font-size: 14px;
  font-weight: bold;
  pointer-events: none;
  z-index: 9999;
  transform: translate(50%, 50%);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  font-family: monospace;
  user-select: none;
}