:root {
  --orange-ui:#9f3f1d;
  --rekola-ui:#a91962;
  --lime-ui:#0b6b3a;
}

.search input::placeholder { color:var(--ui-placeholder,#65716c); }
.about-close:hover, .about-close:focus-visible,
.tool-button:hover, .tool-button:focus-visible,
.tool-button--active-filter:hover, .tool-button--active-filter:focus-visible,
.filter-panel input:checked + span,
.search-suggestions [role="option"][aria-selected="true"] {
  color:#fff;
  border-color:var(--orange-ui);
  background:var(--orange-ui);
}

.bike-marker--available,
.bike-cluster,
.bike-marker--empty { background:var(--orange-ui); }
.bike-marker--rekola { background:var(--rekola-ui); }
.bike-marker--shared { background:linear-gradient(90deg,var(--rekola-ui) 0 50%,var(--nextbike) 50% 100%); }
.bike-marker--lime { background:var(--lime-ui); }
.bike-marker-provider-count--rekola { background:var(--rekola-ui); }
.bike-marker-provider-count--lime { background:var(--lime-ui); }
.popup-type--rekola { color:var(--rekola-ui); }
.popup-type--lime { color:var(--lime-ui); }

.search-suggestions [role="option"] {
  width:100%;
  min-height:48px;
  display:grid;
  align-content:center;
  gap:3px;
  padding:8px 12px 9px;
  border:0;
  border-radius:15px;
  color:var(--ink);
  background:transparent;
  text-align:left;
  cursor:pointer;
}
.search-suggestions [role="option"]:hover { background:var(--ui-hover,#f4e9e4); }
.search-suggestions [role="option"] strong { min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; line-height:1.25; }
.search-suggestions [role="option"] span { min-width:0; display:block; overflow:hidden; color:var(--muted); font-size:10px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
.search-suggestions [role="option"][aria-selected="true"] span { color:#fff; }

/* Keep popups rounded even when the production bundle places MapTiler's CSS later. */
.leaflet-popup .leaflet-popup-content-wrapper,
.maplibregl-popup .maplibregl-popup-content {
  position:relative;
  z-index:0;
  overflow:visible;
  border-color:var(--popup-border)!important;
  border-radius:28px!important;
  color:var(--ink)!important;
  background:var(--popup-surface)!important;
  background-clip:padding-box;
}

/* Corner anchors grow out of the rounded card but stop before the marker. */
.maplibregl-popup-anchor-top-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-top-right .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
  display:none!important;
}

.maplibregl-popup-anchor-top-left .maplibregl-popup-content::before,
.maplibregl-popup-anchor-top-right .maplibregl-popup-content::before,
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content::before,
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content::before {
  content:"";
  position:absolute;
  width:38px;
  height:38px;
  border:0;
  background:var(--popup-surface,rgba(255,254,251,.98));
  clip-path:polygon(0 21%,79% 100%,100% 0);
  filter:drop-shadow(0 0 .6px rgba(223,227,223,.95));
  pointer-events:none;
  z-index:-1;
  transform-origin:center;
}

/* Popup is below-right of the marker. */
.maplibregl-popup-anchor-top-left .maplibregl-popup-content::before {
  top:-8px;
  left:-8px;
  transform:scaleX(-1);
}
/* Popup is below-left of the marker. */
.maplibregl-popup-anchor-top-right .maplibregl-popup-content::before {
  top:-8px;
  right:-8px;
}
/* Popup is above-right of the marker. */
.maplibregl-popup-anchor-bottom-left .maplibregl-popup-content::before {
  bottom:-8px;
  left:-8px;
  transform:scale(-1);
}
/* Popup is above-left of the marker. */
.maplibregl-popup-anchor-bottom-right .maplibregl-popup-content::before {
  bottom:-8px;
  right:-8px;
  transform:scaleY(-1);
}

/* Straight tips use the same 12px thickness and overlap the popup edge to avoid a seam. */
.maplibregl-popup-anchor-top .maplibregl-popup-tip,
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip,
.maplibregl-popup-anchor-left .maplibregl-popup-tip,
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  border-width:12px;
}
.maplibregl-popup-anchor-top .maplibregl-popup-tip {
  margin-bottom:-1px;
  border-bottom-color:var(--popup-surface,rgba(255,254,251,.98))!important;
}
.maplibregl-popup-anchor-bottom .maplibregl-popup-tip {
  margin-top:-1px;
  border-top-color:var(--popup-surface,rgba(255,254,251,.98))!important;
}
.maplibregl-popup-anchor-left .maplibregl-popup-tip {
  margin-right:-1px;
  border-right-color:var(--popup-surface,rgba(255,254,251,.98))!important;
}
.maplibregl-popup-anchor-right .maplibregl-popup-tip {
  margin-left:-1px;
  border-left-color:var(--popup-surface,rgba(255,254,251,.98))!important;
}

/* Match popup close controls to the circular close button in the About dialog. */
.leaflet-popup .leaflet-popup-close-button,
.maplibregl-popup .maplibregl-popup-close-button {
  top:10px!important;
  right:10px!important;
  width:34px!important;
  height:34px!important;
  padding:0!important;
  display:grid!important;
  place-items:center;
  border:0!important;
  border-radius:50%!important;
  color:var(--muted)!important;
  background:var(--popup-close,#f2f3f0)!important;
  font-size:24px!important;
  font-weight:400!important;
  line-height:1!important;
  text-align:center;
  text-decoration:none!important;
  cursor:pointer;
  box-shadow:none!important;
}
.leaflet-popup .leaflet-popup-close-button:hover,
.leaflet-popup .leaflet-popup-close-button:focus-visible,
.maplibregl-popup .maplibregl-popup-close-button:hover,
.maplibregl-popup .maplibregl-popup-close-button:focus-visible {
  color:var(--ink)!important;
  background:var(--popup-close-hover,#e2e5e2)!important;
  outline:0;
}

.map-style-panel { border-radius:28px; }

/* A fieldset legend normally sits in the border; float it into the panel content. */
.map-style-panel legend {
  float:left;
  width:100%;
  margin:0 0 8px;
  padding:0;
}
.map-style-panel legend + label { clear:both; }

@media (pointer:coarse) {
  html, body, .app, .map-wrap { touch-action:auto; -ms-touch-action:auto; }
  #map { touch-action:none; -ms-touch-action:none; }
}
