/* ========== Distance filter ========== */

.leaflet-container.map-crosshair,
.map-crosshair {
  cursor: crosshair !important;
}

.radius-filter-controls {
  padding-top: 4px;
}

/* Two ways in: your own position, or a point you pick. */
.radius-origin-row {
  display: flex;
  gap: 8px;
}

.radius-origin-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--tap-target);
  padding: 8px 10px;
  border: 1.5px solid transparent;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.radius-origin-btn:hover { filter: brightness(1.06); }

.radius-origin-btn--ghost {
  background: #fff;
  border-color: rgba(0, 119, 190, 0.28);
  color: var(--brand);
}

.radius-origin-btn--ghost:hover {
  background: rgba(0, 119, 190, 0.08);
  border-color: var(--brand-2);
}

.radius-origin-btn.active {
  background: #fff;
  border-color: #dc2626;
  color: #b91c1c;
}

.radius-origin-btn.is-busy {
  opacity: 0.7;
  pointer-events: none;
}

.radius-origin-btn.is-busy svg {
  animation: spin 0.9s linear infinite;
}

.radius-origin-btn:focus-visible,
.radius-preset:focus-visible,
.radius-clear-btn:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}

/* ---------- Radius presets ----------
   The slider alone made the common distances fiddly to hit. */
.radius-presets {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.radius-preset {
  flex: 1;
  min-height: 34px;
  padding: 0 6px;
  border: 1.5px solid rgba(0, 119, 190, 0.22);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.radius-preset:hover { background: rgba(0, 119, 190, 0.08); }

.radius-preset[aria-pressed="true"] {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-2) 100%);
  color: #fff;
}

.radius-slider-container {
  margin-top: 14px;
}

.radius-slider-container[hidden] { display: none; }

.radius-slider-container label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--ink);
}

.radius-slider-container input[type="range"] {
  width: 100%;
  height: 32px;
  accent-color: var(--brand);
}

.radius-hint {
  margin: 2px 0 10px;
  font-size: 0.78rem;
  color: var(--muted);
}

.radius-clear-btn {
  width: 100%;
  min-height: var(--tap-target);
  border: 1.5px solid rgba(220, 38, 38, 0.3);
  border-radius: 10px;
  background: #fff;
  color: #b91c1c;
  font: inherit;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.radius-clear-btn:hover { background: rgba(220, 38, 38, 0.08); }

.radius-instructions {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.82rem;
  font-weight: 600;
  text-align: center;
}

.radius-instructions[hidden] { display: none; }

@media (prefers-reduced-motion: reduce) {
  .radius-origin-btn.is-busy svg { animation: none; }
}