/* Vollbild-Overlay für den Filter */
.filter-overlay {
     position: fixed;         
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background-color: rgba(50, 50, 50, 0.4); 
     backdrop-filter: blur(3px);            
     display: none;           
     justify-content: center; 
     align-items: center;
     z-index: 10000;          
     transition: opacity 0.3s ease-in-out;
}

/* Der scrollbare Bereich wächst nur bis zum Footer */
.filter-scroll-area {
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 25px;
    padding-left: 5px;
    padding-top: 3px;     
    margin-right: -25px;
    scrollbar-width: thin;
    scrollbar-color: #d0d0d0 transparent;
    overscroll-behavior: contain; /* Reserviert Platz für Scrollbar */
}

/* Der weiße Filterkasten */
.filter-content {
     position: relative; /* NEU hinzugefügt */
     display: flex;
     flex-direction: column;
     height: 80vh;
     background-color: var(--bg-light); 
     padding: 30px 40px;
     border-radius: 20px;              
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); 
     max-width: 500px;
     width: 90%;
     text-align: center;
     animation: fadeIn 0.5s ease-in-out;
}

/* Aktiviertes Overlay wird angezeigt */
.filter-overlay.active {
     display: flex;
}

@media (max-width: 320px) {
  .filter-content {
    height: 90vh;
  }
}

body.dark-mode .filter-content {
  background-color: var(--bg-dark);
}

/* Filter-Überschrift (Icon + Text) */
.filter-title {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 5px;
     background: none;
     cursor: default;
}

/* ------------------------------------------
   Close Button im Filter Overlay
------------------------------------------ */
.filter-overlay-close-btn {
  position: absolute; 
  top: 15px;
  right: 20px;
  background: none;
  border: none;
  font-size: 32px;
  font-weight: bold;
  cursor: pointer;
  color: var(--text-light);
  line-height: 1;
  padding: 0;
  transition: color 0.2s ease;
  flex-shrink: 0;
  user-select: none;
  border-radius: 50px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.filter-overlay-close-btn:hover {
  color: var(--button-filter-hover-light);
  outline: none;
}

.filter-overlay-close-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--button-filter-hover-light);
  outline: none;
}

body.dark-mode .filter-overlay-close-btn {
  color: var(--text-dark);
}

body.dark-mode .filter-overlay-close-btn:hover {
  color: var(--button-filter-hover-dark);
}

body.dark-mode .filter-overlay-close-btn:focus-visible {
  box-shadow: 0 0 0 2px var(--button-filter-hover-dark);
}

/* === Mieten/Kaufen-Schalter === */
.search-section-top {
     justify-content: center;
}

.search-section-middle-overlay .search-section-middle{
   margin-top: 10px;
}

/* === Wrapper für Ort + Radius nebeneinander === */
.ort-radius-wrapper {  
  display: flex;                        
  align-items: center;       
  flex-wrap: nowrap; 
}

/* === Fixed Footer Bar === */
.filter-footer {
     display: flex;
     justify-content: space-between;
     padding-top: 20px;
     margin-top: 10px;
     background-color: var(--text-dark);
     border-top: 1px solid #ddd;
     gap: 1rem;
}

/* Button [Filter löschen] */
.reset-filter-btn {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  background-color: var(--bg-light);
}

body.dark-mode .filter-footer {
  background-color: var(--bg-dark);
}

/* Button [Suchen] */
.apply-filter-btn {
  flex: 1;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: bold;
  border: none;
  border-radius: 25px;
  cursor: pointer;
}

.reset-filter-btn {
  background-color: var(--button-filter-light);
  color: var(--text-dark);
  font-weight: bold;
  box-shadow: 0 7px 20px rgba(240, 98, 145, 0.5);
}

.reset-filter-btn:hover {
  background-color: var(--button-filter-hover-light);
  box-shadow: 0 9px 26px rgba(236, 64, 122, 0.7);
}

body.dark-mode .reset-filter-btn {
  background-color: var(--button-filter-dark);
  color: var(--text-dark);
  font-weight: bold;
  box-shadow: 0 7px 20px rgba(216, 92, 135, 0.5);
}

body.dark-mode .reset-filter-btn:hover {
   background-color: var(--button-filter-hover-dark);
   box-shadow: 0 9px 26px rgba(255, 114, 161, 0.7);
}

.apply-filter-btn {
  background-color: var(--button-search-light);
  color: var(--text-dark);
  font-weight: bold;
  box-shadow: 0 5px 15px rgba(137, 100, 239, 0.45);
}

.apply-filter-btn:hover {
   background-color: var(--button-search-hover-light);
   box-shadow: 0 7px 20px rgba(122, 79, 224, 0.7);
}

body.dark-mode .apply-filter-btn {
  background-color: var(--button-search-dark);
  color: var(--text-dark);
  font-weight: bold;
  box-shadow: 0 5px 15px rgba(145, 112, 255, 0.45);
}

body.dark-mode .apply-filter-btn:hover {
    background-color: var(--button-search-hover-dark);
    box-shadow: 0 7px 20px rgba(168, 140, 255, 0.7);
}

@media (max-width: 500px) {
  .filter-footer {
    flex-direction: column;
    gap: 0.5rem; /* Abstand zwischen den Buttons */
  }

  .filter-footer button {
    width: 100%; /* Buttons nehmen volle Breite ein */
    padding: 0.75rem 0; /* Etwas vertikale Polsterung */
  }
}

/* Container für die Autocomplete-Vorschläge, absolut positioniert unter dem Input */
.autocomplete-suggestions {
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  z-index: 1000;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  margin-top: 4px;
}

/* Einzelner Vorschlags-Eintrag im Autocomplete */
.autocomplete-item {
  padding: 8px 12px;
  cursor: pointer;
  color: black;
}

/* Hover-Effekt für einzelne Vorschlags-Einträge */
.autocomplete-item:hover {
  background-color: #f0f0f0;
}

/* Klasse zum kompletten Ausblenden eines Elements */
.hidden {
  display: none;
}

/* Container für Ort- und Radius-Bereich, vertikal gestapelt */
.search-section-middle-overlay .search-section-middle {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}

/* Wrapper für Ort-Input und Radius-Select, vertikale Anordnung */
.ort-radius-wrapper {
  display: flex !important;
  flex-direction: column !important;
  width: 100%;
}

/* Ort-Input erhält volle Breite im Container */
.location-input {
  width: 100% !important;
  box-sizing: border-box;
}

/* Radius-Select erhält volle Breite im Container */
.radius-select {
  width: 100% !important;
  box-sizing: border-box;
}

/* Alle direkten Kinder im Ort-Radius-Wrapper nehmen volle Breite ein und wachsen nicht */
.ort-radius-wrapper > * {
  flex: none !important;
  width: 100% !important;
}

/* Container für ausgewählte Ort-Tags, horizontal mit Abstand und Umbruch */
.selected-location-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  margin-bottom: 10px;
}

/* Einzelne Tag-Box: heller Hintergrund, abgerundete Ecken, Rahmen und Textformat */
.selected-location-tags .tag {
  background-color: var(--bg-light);
  color: #333;
  padding: 6px 14px;
  border-radius: 15px;
  border: 1px solid #ccc;
  font-size: 0.9em;
  display: inline-flex;
  align-items: center;
  user-select: none;
  font-weight: 600;
  gap: 8px;
}

/* Darkmode-Stil für einzelne Tags */
body.dark-mode .selected-location-tags .tag {
  background-color: var(--bg-dark);
  color: var(--text-dark);
}

/* Entfernen-Button (x) im Tag, minimalistisch und transparent */
.selected-location-tags .remove-tag {
  background: transparent;
  border: none;
  color: #cacaca;
  cursor: pointer;
  font-weight: bold;
  font-size: 1.1em;
  line-height: 1;
  padding: 0;
  user-select: none;
  transition: color 0.25s ease;
}

/* Hover- und Fokus-Effekt für Entfernen-Button */
.selected-location-tags .remove-tag:hover,
.selected-location-tags .remove-tag:focus {
  color: #EC407A;
  outline: none;
}

/* Darkmode Hover-Farbe für Entfernen-Button */
body.dark-mode .selected-location-tags .remove-tag:hover,
.selected-location-tags .remove-tag:focus {
  color: #ff72a1;
  outline: none;
}


/* Ort DropDown Input*/

/* Eingabe-Feld Container richtig positionieren */
.search-section-middle {
  position: relative;
}

/* Autocomplete Dropdown */
.autocomplete-suggestions {
  position: absolute;
  top: 100%; /* NEU: direkt unterhalb von Input */
  left: 0;
  z-index: 20;
  padding: 8px 0;
  width: 100%; /* exakt so breit wie Input */
  max-height: 295px; /* <- Höhe begrenzen */
  overflow-y: auto;
  overflow-x: hidden;
  border-radius: 15px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  background: var(--bg-light);
  scrollbar-color: #d0d0d0 transparent;
  box-sizing: border-box;
}

body.dark-mode .autocomplete-suggestions {
 background: var(--bg-dark);
 scrollbar-color: rgb(208, 208, 208) transparent;
}

.autocomplete-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.autocomplete-item:hover {
  background: #f9f9f9;
}

body.dark-mode .autocomplete-item:hover {
  background: rgba(98, 0, 234, 0.1);
}

.flag-circle {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 1px solid var(--border-light);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.flag-circle img {
  width: 100%;
  height: auto;
  display: block;
}

body.dark-mode .flag-circle {
  border: 1px solid var(--border-dark);
}

.text-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; 
  align-items: flex-start;
  color: var(--text-light);
}


body.dark-mode .text-wrapper {
   color: var(--text-dark);
}

.city-name {
  font-weight: 600;
  font-size: 16px;
  line-height: 1.2;
}

.plz-code {
  font-size: 14px;
  color: #6b7280; /* Tailwind gray-500 */
  text-align: left; 
}

body.dark-mode .plz-code {
  color: #B2B7C2;
}

/* Ergänzungen (NEU) */
.ort-radius-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}

.selected-location-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* === Standard: Flagge links vom Input, Radius daneben === */
.first-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.country-selector-btn {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.ort-radius-wrapper {
  flex: 1;
}

.radius-select {
  width: 100%; /* immer volle Breite */
  flex-shrink: 0;
}

/* === Overlay für sehr kleine Bildschirme <798px === */
@media (max-width: 797px) {
  
  .selected-location-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
    margin-bottom: 20px;
  }

  .first-row {
    flex-direction: column;  /* Flagge über Input */
    align-items: flex-start;  /* linksbündig */
    gap: 8px;
    width: 100%;
  }

  .country-selector-btn {
    margin-top: -4px; /* linksbündig, kein auto */
  }

  .ort-radius-wrapper {
    width: 100%;
  }

  .location-input {
    width: 100%;
  }

  .second-row {
    margin-top: 10px;
    width: 100%;
  }

  .radius-select {
    width: 100%; /* Radius volle Breite */
  }
}

/* === Ab 798px: Flagge links vom Input, Radius immer 100% === */
@media (min-width: 798px) {
  .first-row {
    flex-direction: row;
    align-items: center;
    gap: 8px;
  }

  .country-selector-btn {
    margin: 0;
  }

  .ort-radius-wrapper {
    flex: 1;
  }

  .location-input {
    width: 100%;
  }

  .second-row {
    margin-top: 10px;
    width: 100%;
  }

  .radius-select {
    width: 100%; /* Radius volle Breite immer */
  }
}