/* =========================
   Standortsuche – im Märkte- & Kategorien-Ergebnisse-Modal
   ========================= */

/* --- gemeinsamer Scope für beide Modale --- */
:is(#marketsModal, #categoryResultsModal) .standortsuche{
  display:flex;
  flex-direction:column;
  gap:16px;
  width: 100%;
  max-width: none;
  padding: 0 16px;
}

/* Search Bar */
:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 30px;
  padding: 10px 14px; /* leicht mehr Innenabstand */
  border: 1px solid rgba(0, 0, 0, .06);
  background: rgba(0, 0, 0, .02);
  /* zentrieren & länger machen */
  width: 100%;
  margin: 16px auto;  /* zentriert + mehr Abstand oben/unten */
  transition: border-color .2s ease, background .2s ease;
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar:focus-within {
  border-color: color-mix(in oklab, var(--brand) 40%, transparent);
  background: color-mix(in oklab, var(--brand) 6%, transparent);
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar i {
  font-size: 16px;
  color: var(--muted);
  opacity: .85;
}

/* Input – generisch, damit #searchInput und #catSearchInput identisch aussehen */
:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar input {
  border: none;
  outline: none;
  background: transparent;
  color: var(--txt);
  font: inherit;
  width: 100%;
  padding: 6px 0;
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar input::placeholder {
  color: color-mix(in oklab, var(--muted) 60%, transparent);
}

/* Favoriten / Ergebnisse Sektionen */
:is(#marketsModal, #categoryResultsModal) .standortsuche .favorites,
:is(#marketsModal, #categoryResultsModal) .standortsuche .results{
  max-width:860px;
  margin:0 auto;
  padding:0 8px 8px;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .favorites h2,
:is(#marketsModal, #categoryResultsModal) .standortsuche .results h2{
  font-size:1rem; font-weight:600; margin:8px 0 10px; color:var(--muted);
  text-align:left;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .favorites-empty,
:is(#marketsModal, #categoryResultsModal) .standortsuche .results-empty{
  color: var(--muted);
  padding: 10px 12px;
  text-align:center;
}

/* Kartenlisten (Grid) */
:is(#marketsModal, #categoryResultsModal) .standortsuche .favorites-list,
:is(#marketsModal, #categoryResultsModal) .standortsuche .results-list{
  display:grid; gap:12px;
  grid-template-columns: repeat(2, 1fr);
}

@media (min-width:640px){
  :is(#marketsModal, #categoryResultsModal) .standortsuche .favorites-list,
  :is(#marketsModal, #categoryResultsModal) .standortsuche .results-list{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width:900px){
  :is(#marketsModal, #categoryResultsModal) .standortsuche .favorites-list,
  :is(#marketsModal, #categoryResultsModal) .standortsuche .results-list{
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Karten/Ergebnis-Karte (Card) */
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-card{
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  background:var(--card-bg); padding:16px; border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:transform .06s ease, background .2s ease, border-color .2s ease;
  border:1px solid transparent; cursor:pointer;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-card:hover{
  background:rgba(0,0,0,.02);
  border-color:rgba(0,0,0,.06);
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-info h3{
  margin:0 0 4px; font-size:1rem; font-weight:800;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-info p{
  margin:0; font-size:.92rem; color:var(--muted); line-height:1.3;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-info .hours{ margin-top:4px; }

:is(#marketsModal, #categoryResultsModal) .standortsuche .store-actions{
  display:flex; align-items:center; gap:12px;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-actions .fas{
  font-size:18px; color:var(--muted); cursor:pointer;
  transition:color .2s ease, transform .15s ease;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-actions .fas:hover{
  color:var(--brand); transform:scale(1.1);
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-actions .fa-heart.active{
  color:var(--accent);
}

/* CTA – Auf Karte anzeigen */
:is(#marketsModal, #categoryResultsModal) .standortsuche .view-map{
  max-width:540px; margin:12px auto 0;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:12px; border-radius:40px; border:1px solid var(--brand);
  background:var(--brand); color:#fff; font-weight:800; cursor:pointer;
  transition:filter .2s ease, background .2s ease;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .view-map:hover{ filter:brightness(1.05); }
:is(#marketsModal, #categoryResultsModal) .standortsuche .view-map:active{ background:var(--brand-700); }

/* Map-Frames (beide Modale & beide IDs) */
:is(#marketsModal, #categoryResultsModal) .standortsuche #leafletMap,
:is(#marketsModal, #categoryResultsModal) .standortsuche #mapFrame,
:is(#marketsModal, #categoryResultsModal) .standortsuche #catLeafletMap,
:is(#marketsModal, #categoryResultsModal) .standortsuche #catMapFrame{
  width: 100%;
  height: 300px; /* gewünschte Höhe */
  border-radius: 12px;
  background: rgba(0,0,0,.04);
  margin-top: 8px;
  box-shadow: var(--shadow);
}

/* Accessibility */
:is(#marketsModal, #categoryResultsModal) .standortsuche :where(.store-card, .view-map):focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
  box-shadow:none;
}

/* Mobile Tweaks nur für die Kartenliste */
@media (max-width:600px){
  :is(#marketsModal, #categoryResultsModal) .standortsuche .store-card{
    flex-direction:column; align-items:flex-start;
  }
  :is(#marketsModal, #categoryResultsModal) .standortsuche .store-actions{
    align-self:flex-end;
  }
  :is(#marketsModal, #categoryResultsModal) .standortsuche .view-map{
    width:calc(100% - 24px);
  }
}

/* =========================
   Clear-Button in der Searchbar (beide IDs)
   ========================= */
:is(#marketsModal, #categoryResultsModal) .standortsuche #clearSearch,
:is(#marketsModal, #categoryResultsModal) .standortsuche #catClearSearch{
  position: absolute;
  margin-right: 10px;
 
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: #888;
  user-select: none;
  display: none; /* via JS toggeln */
}
:is(#marketsModal, #categoryResultsModal) .standortsuche #clearSearch:hover,
:is(#marketsModal, #categoryResultsModal) .standortsuche #catClearSearch:hover{
  color: #888;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche #clearSearch::after,
:is(#marketsModal, #categoryResultsModal) .standortsuche #catClearSearch::after{
  content: '';
  position: absolute;
  inset: -8px;
}
/* ==== FIX: Lupe über dem Text im Kategorien-Modal ==== */
#categoryResultsModal .standortsuche .search-bar{
  position: relative; /* Anker für absolute Elemente */
}

#categoryResultsModal .standortsuche .search-bar i.fas.fa-search{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Platz für Lupe links und X rechts schaffen */
#categoryResultsModal .standortsuche .search-bar input{
  padding-left: 34px;  /* Abstand zur Lupe */
  /* Platz rechts für Standort-Button + Clear-X (wie im Märkte-Modal) */
  padding-right: 86px;
}

/* zur Sicherheit: X richtig rechts ausrichten */
#categoryResultsModal .standortsuche #catClearSearch{
  right: 14px;
}
/* --- dein bestehender CSS-Inhalt bleibt unverändert --- */

/* ==== Fix: Märkte-Modal – Searchbar korrekt positionieren (Clear-Button sichtbar) ==== */
#marketsModal .standortsuche .search-bar{
  position: relative; /* Anker für absolute Elemente (Lupe & X) */
}

#marketsModal .standortsuche .search-bar i.fas.fa-search{
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 1;
}

/* Platz im Input für Lupe links + Clear rechts */
#marketsModal .standortsuche .search-bar input{
  padding-left: 34px;
  padding-right: 86px; /* Platz für Standort-Button + Clear */
}


/* Standort-Button (Geo) in der Märkte-Searchbar */
#marketsModal .standortsuche .search-bar .geo-btn{
  position:absolute;
  right: 44px; /* links vom Clear-X */
  top:50%;
  transform: translateY(-50%);
  border:none;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  padding: 6px;
  border-radius: 999px;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:center;
}
#marketsModal .standortsuche .search-bar .geo-btn:hover{
  color: var(--brand);
  background: rgba(0,0,0,.05);
}
#marketsModal .standortsuche .search-bar .geo-btn:active{
  transform: translateY(-50%) scale(0.97);
}
#marketsModal .standortsuche .search-bar .geo-btn i{
  pointer-events:none;
}

/* X rechts im Feld andocken (Element existiert bereits) */
#marketsModal .standortsuche #clearSearch{
  position: absolute;     /* falls zuvor nur relativ war */
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  display: none;          /* JS blendet auf 'block' ein */
  z-index: 2;             /* über dem Input */
  cursor: pointer;
}

/* Größere Klickfläche für's X */
#marketsModal .standortsuche #clearSearch::after{
  content: '';
  position: absolute;
  inset: -8px; /* vergrößert die Hitbox */
}



/* =========================
   ✅ Inline Filter (unterhalb der Searchbar)
   - gleicher Stil / minimal / dünne Linien
   ========================= */
:is(#marketsModal, #categoryResultsModal) .standortsuche .inline-filters{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-top:-6px;     /* optisch nah an der Searchbar */
  padding: 0 2px;      /* minimaler Einzug */
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .radius-filter{
  display:flex;
  align-items:center;
  gap:10px;
  padding-top:10px;
  border-top: 1px solid rgba(0,0,0,0.06); /* dünner Strich */
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .radius-label,
:is(#marketsModal, #categoryResultsModal) .standortsuche .radius-value{
  font-size: 12px;
  color: var(--muted);
  white-space: nowrap;
}

/* Range Slider – dünner Strich */
:is(#marketsModal, #categoryResultsModal) .standortsuche input[type="range"]{
  flex:1;
  width:100%;
  height:2px;
  background: transparent;
  accent-color: var(--brand);
}

/* WebKit Track + Thumb (Chrome/Safari) */
:is(#marketsModal, #categoryResultsModal) .standortsuche input[type="range"]::-webkit-slider-runnable-track{
  height:2px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
}
:is(#marketsModal, #categoryResultsModal) .standortsuche input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.18);
  margin-top:-5px; /* zentriert auf Track */
}

/* Firefox Track/Thumb */
:is(#marketsModal, #categoryResultsModal) .standortsuche input[type="range"]::-moz-range-track{
  height:2px;
  border-radius: 999px;
  background: rgba(0,0,0,0.10);
}
:is(#marketsModal, #categoryResultsModal) .standortsuche input[type="range"]::-moz-range-thumb{
  width:12px;
  height:12px;
  border-radius:50%;
  background:#fff;
  border: 1px solid rgba(0,0,0,0.18);
}

/* Typ-Icons */
:is(#marketsModal, #categoryResultsModal) .standortsuche .type-filters{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap: wrap;
  padding-left: 2px;
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .type-chip{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.02);
  color: var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease;
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .type-chip:hover{
  background: rgba(0,0,0,0.03);
  transform: translateY(-1px);
}
:is(#marketsModal, #categoryResultsModal) .standortsuche .type-chip.is-active{
  border-color: color-mix(in oklab, var(--brand) 35%, rgba(0,0,0,0.10));
  color: var(--brand);
  background: color-mix(in oklab, var(--brand) 8%, rgba(0,0,0,0.02));
}

/* Zählerzeile (Deutschland gesamt / in der Nähe) */
:is(#marketsModal, #categoryResultsModal) .standortsuche .count-line{
  font-size: 12px;
  color: var(--muted);
  padding: 2px 4px 0;
}

/* =========================
   ✅ Standort-Icon: etwas weiter rechts + ausblenden wenn aktiv
   ========================= */
:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar .geo-btn{
  right: 34px;  /* etwas mehr rechts (näher am Rand) */
}

/* Wenn Standort aktiv -> Icon verschwindet */
:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar .geo-btn.is-active{
  opacity: 0;
  pointer-events: none;
  transform: translateY(-50%) scale(0.92);
}

/* =========================
   ✅ Ergebnis-Cards: Cursor beim Tippen
   ========================= */
:is(#marketsModal, #categoryResultsModal) .standortsuche .store-card{
  cursor: pointer;
}

/* =========================
   ✅ FIX: Standort-Icon im Kategorie-Ergebnis-Modal
   - soll GENAU so aussehen wie im Märkte-Modal
   - bisher fehlte im Kategorie-Modal die absolute Positionierung
   ========================= */

/* Button-Basestyle für beide Modale (identisch) */
:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar .geo-btn{
  position:absolute;
  top:50%;
  transform: translateY(-50%);
  border:none;
  background: transparent;
  color: var(--muted);
  cursor:pointer;
  padding: 6px;
  border-radius: 999px;
  z-index: 2;
  display:flex;
  align-items:center;
  justify-content:center;
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar .geo-btn:hover{
  color: var(--brand);
  background: rgba(0,0,0,.05);
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar .geo-btn:active{
  transform: translateY(-50%) scale(0.97);
}

:is(#marketsModal, #categoryResultsModal) .standortsuche .search-bar .geo-btn i{
  pointer-events:none;
}


/* =========================
   ✅ Marriage Tag-Filter (nur Symbole) – Kategorie-Ergebnisse
   - Tooltip via data-tip beim Hover/Fokus
   ========================= */
#categoryResultsModal .standortsuche .tag-filters{
  max-width: 860px;
  margin: 0 auto;
  padding: 2px 6px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

#categoryResultsModal .standortsuche .tag-chip{
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 14px;
  border: 1px solid rgba(0,0,0,0.12);
  background: rgba(255,255,255,0.60);
  color: var(--txt);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
  user-select: none;
  position: relative;
  box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}

#categoryResultsModal .standortsuche .tag-chip i{
  font-size: .82rem;
  color: var(--muted);
}

#categoryResultsModal .standortsuche .tag-chip:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.92);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

#categoryResultsModal .standortsuche .tag-chip:focus-visible{
  outline: 3px solid color-mix(in oklab, var(--brand) 35%, transparent);
  outline-offset: 3px;
}

#categoryResultsModal .standortsuche .tag-chip.is-active{
  background: rgba(230,57,70,0.15);
  border-color: #e63946;
  box-shadow: none;
}

#categoryResultsModal .standortsuche .tag-chip.is-active i{
  color: #e63946;
}

/* Tooltip */