/* Search control (split from styles.css) */

.leaflet-control-search {
  box-shadow: none;
  background-color: transparent;
  position: relative;
  z-index: 1200 !important;
}

.search-button {
  background-image: none !important;
  background-color: var(--surface-btn) !important;
  border: 1px solid var(--surface-bar-border) !important;
  box-shadow: var(--shadow-control) !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  position: relative;
}

.search-button::before {
  content: "\f002";
  font-family: "AqmapFA";
  font-size: 14px;
  color: var(--text-primary);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.search-tooltip {
  margin-top: 1px;
  z-index: 1201 !important;
}

#searchtext9 {
  height: 21px;
}

.leaflet-control-search .search-tooltip {
  width: 100% !important;
  min-width: 300px !important;
  max-height: 400px !important;
}

.leaflet-control-search.search-exp .search-input {
  width: 260px !important;
  margin-right: 5px !important;
}

.leaflet-control-search.search-exp .search-tooltip {
  width: 296px !important;
}

.leaflet-control-search .search-tip {
  padding: 8px 10px !important;
  margin: 4px 6px !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-md) !important;
  box-shadow: var(--shadow-sm) !important;
  transition: all 0.2s ease !important;
  white-space: normal !important;
  word-wrap: break-word !important;
  height: auto !important;
}

.leaflet-control-search .search-tip:hover,
.leaflet-control-search .search-tip-select {
  background-color: var(--surface-btn) !important;
  /* Vivid brand blue (#16bdff), kept distinct from the accent like the loader and CTA (see --accent-bright). */
  border-color: var(--accent-bright) !important;
  box-shadow: var(--shadow-control) !important;
  transform: translateY(-1px);
}

/* Dark mode */

body.dark-mode .search-button {
  background-color: var(--surface-control-floating) !important;
}

body.dark-mode .search-button::before {
  color: var(--text-primary);
}

body.dark-mode .leaflet-control-search .search-input {
  background-color: var(--surface-control-floating) !important;
  color: var(--text-primary) !important;
  border: none !important;
}

body.dark-mode .leaflet-control-search .search-tip {
  background-color: var(--surface-control-floating) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

body.dark-mode .leaflet-control-search .search-cancel,
body.dark-mode .leaflet-control-search .search-cancel:hover {
  background-color: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

body.dark-mode .leaflet-control-search .search-tip:hover,
body.dark-mode .leaflet-control-search .search-tip-select {
  background-color: var(--surface-btn) !important;
  border-color: var(--accent-bright) !important;
}

/* Small screens: keep the search results dropdown inside the viewport */
@media (max-width: 504px) {
  .leaflet-control-search .search-tooltip {
    min-width: calc(100vw - 24px) !important;
  }
}