/* Universal distance selector shared by filtering, onboarding, and settings. */
.ui-distance-picker { display: grid; gap: 1rem; padding: 1rem; border: 1px solid #dbe7f5; border-radius: .85rem; background: linear-gradient(145deg, #f8fbff 0%, #f4f8ff 100%); }
.ui-distance-picker__header { display: flex; align-items: center; gap: .7rem; }
.ui-distance-picker__icon { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; border-radius: .7rem; background: #e8f1ff; color: #1764e8; }
.ui-distance-picker__icon svg { width: 1.15rem; height: 1.15rem; stroke-width: 1.9; }
.ui-distance-picker__eyebrow { margin: 0 0 .1rem; color: #1764e8; font-size: .63rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ui-distance-picker__header h4 { margin: 0; color: #0f172a; font-size: .88rem; font-weight: 750; line-height: 1.35; }
.ui-distance-picker__selection { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem .85rem; border: 1px solid #cfe0f7; border-radius: .7rem; background: #fff; box-shadow: 0 6px 18px rgba(30, 64, 175, .06); }
.ui-distance-picker__selection div { display: grid; gap: .1rem; }
.ui-distance-picker__selection div > span { color: #64748b; font-size: .68rem; font-weight: 600; }
.ui-distance-picker__selection strong { color: #0f172a; font-size: 1.18rem; font-weight: 800; line-height: 1.2; }
.ui-distance-picker__location { display: inline-flex; max-width: 45%; align-items: center; padding: .32rem .55rem; border-radius: 999px; background: #eff6ff; color: #1d4ed8; font-size: .68rem; font-weight: 750; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ui-distance-picker__slider-shell { display: grid; gap: .55rem; padding: .85rem .8rem .65rem; border: 1px solid #dbe7f5; border-radius: .7rem; background: rgba(255, 255, 255, .78); }
.ui-distance-picker__slider { width: 100%; height: 1.5rem; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.ui-distance-picker__slider::-webkit-slider-runnable-track { height: .42rem; border-radius: 999px; background: linear-gradient(90deg, #2563eb 0%, #60a5fa var(--radius-progress, 0%), #dbe7f5 var(--radius-progress, 0%), #dbe7f5 100%); }
.ui-distance-picker__slider::-moz-range-track { height: .42rem; border-radius: 999px; background: #dbe7f5; }
.ui-distance-picker__slider::-moz-range-progress { height: .42rem; border-radius: 999px; background: linear-gradient(90deg, #2563eb, #60a5fa); }
.ui-distance-picker__slider::-webkit-slider-thumb { width: 1.35rem; height: 1.35rem; margin-top: -.47rem; border: .24rem solid #fff; border-radius: 999px; appearance: none; background: #2563eb; box-shadow: 0 2px 8px rgba(30, 64, 175, .35); }
.ui-distance-picker__slider::-moz-range-thumb { width: .92rem; height: .92rem; border: .24rem solid #fff; border-radius: 999px; background: #2563eb; box-shadow: 0 2px 8px rgba(30, 64, 175, .35); }
.ui-distance-picker__slider:focus-visible { outline: none; }
.ui-distance-picker__slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 .28rem rgba(37, 99, 235, .18), 0 2px 8px rgba(30, 64, 175, .35); }
.ui-distance-picker__scale { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; color: #64748b; font-size: .62rem; font-weight: 650; }
.ui-distance-picker__scale span:nth-child(2) { color: #94a3b8; text-align: center; }
.ui-distance-picker__scale span:last-child { text-align: right; }
.ui-distance-picker__help { display: flex; align-items: flex-start; gap: .4rem; margin: 0; color: #64748b; font-size: .68rem; line-height: 1.45; }
.ui-distance-picker__help svg { width: .85rem; height: .85rem; flex: 0 0 auto; margin-top: .08rem; stroke-width: 1.8; }

html.dark .ui-distance-picker { border-color: #334155; background: linear-gradient(145deg, #111827 0%, #172033 100%); }
html.dark .ui-distance-picker__header h4,
html.dark .ui-distance-picker__selection strong { color: #f8fafc; }
html.dark .ui-distance-picker__selection,
html.dark .ui-distance-picker__slider-shell { border-color: #334155; background: #1e293b; }
html.dark .ui-distance-picker__slider::-webkit-slider-runnable-track { background: linear-gradient(90deg, #3b82f6 0%, #60a5fa var(--radius-progress, 0%), #475569 var(--radius-progress, 0%), #475569 100%); }
html.dark .ui-distance-picker__slider::-moz-range-track { background: #475569; }

@media (max-width: 479px) {
  .ui-distance-picker { gap: .8rem; padding: .8rem; }
  .ui-distance-picker__slider-shell { padding-inline: .65rem; }
}