/* === SEARCH BAR OVERRIDES (taille + couleurs par thème) === */

/* On vise ta classe réelle: .sw-searchbar (celle utilisée dans MapView.jsx) */
.sw-searchbar {
  /* full width dans son conteneur + limite max propre */
  width: 100%;
  max-width: min(760px, 92vw);
}

@media (min-width: 1024px) {
  .sw-searchbar {
    max-width: min(820px, 70vw);
  }
}

/* Couleur du texte dans l'input selon le thème */
body[data-theme="dark"] .sw-search-input,
body[data-theme="blue"] .sw-search-input {
  color: #f9fafb; /* blanc */
}

body[data-theme="light"] .sw-search-input {
  color: #111827; /* noir foncé */
}

/* Placeholder suivant le thème */
body[data-theme="dark"] .sw-search-input::placeholder,
body[data-theme="blue"] .sw-search-input::placeholder {
  color: #6b7280;
}

body[data-theme="light"] .sw-search-input::placeholder {
  color: #9ca3af;
}

/* (optionnel) Si tu utilises plus tard SmartSearchBar avec un dropdown */
body[data-theme="dark"] .sw-search-results,
body[data-theme="blue"] .sw-search-results {
  background: rgba(6, 12, 30, 0.98);
  color: #f9fafb;
}

body[data-theme="light"] .sw-search-results {
  background: rgba(255, 255, 255, 0.98);
  color: #111827;
}

body[data-theme="dark"] .sw-search-result-item:hover,
body[data-theme="blue"] .sw-search-result-item:hover {
  background: rgba(15, 23, 42, 0.9);
}

body[data-theme="light"] .sw-search-result-item:hover {
  background: #f3f4f6;
}