/* slider.css - distance slider (1-100 km). Loaded after huadorr-screens.css. Rollback: remove its <link>. */

.kmf{position:relative;margin:6px 0 14px}
.kmf-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px}
.kmf-val{font-family:var(--font-d);font-size:30px;font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--t1)}
.kmf-num::after{content:attr(data-v)}
.kmf-unit::after{content:" km"}
html[lang=th] .kmf-unit::after{content:" กม."}
.kmf-any-t{display:none}
.kmf[data-any="1"] .kmf-km,.kmf[data-any="1"] .kmf-any{display:none}
.kmf[data-any="1"] .kmf-any-t{display:inline;color:var(--t3)}

.kmf-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;padding:0;border:0;background:transparent;cursor:pointer;touch-action:pan-y;--p:0%}
.kmf-range:focus{outline:none}
.kmf-range::-webkit-slider-runnable-track{height:8px;border-radius:4px;background:linear-gradient(to right,var(--acc) var(--p),var(--line) var(--p))}
.kmf-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;box-sizing:border-box;width:30px;height:30px;margin-top:-11px;border-radius:15px;background:var(--t1);border:4px solid var(--bg);box-shadow:0 0 0 1.5px var(--t1)}
.kmf-range::-moz-range-track{height:8px;border-radius:4px;background:var(--line)}
.kmf-range::-moz-range-progress{height:8px;border-radius:4px;background:var(--acc)}
.kmf-range::-moz-range-thumb{box-sizing:border-box;width:30px;height:30px;border-radius:15px;background:var(--t1);border:4px solid var(--bg);box-shadow:0 0 0 1.5px var(--t1)}
.kmf-range:focus-visible::-webkit-slider-thumb{outline:3px solid var(--acc-t);outline-offset:2px}
.kmf-range:focus-visible::-moz-range-thumb{outline:3px solid var(--acc-t);outline-offset:2px}

.kmf[data-any="1"] .kmf-range::-webkit-slider-runnable-track{background:var(--line)}
.kmf[data-any="1"] .kmf-range::-moz-range-progress{background:transparent}
.kmf[data-any="1"] .kmf-range::-webkit-slider-thumb{background:var(--t3)}
.kmf[data-any="1"] .kmf-range::-moz-range-thumb{background:var(--t3)}

.kmf-scale{display:flex;justify-content:space-between;margin-top:-6px;font-size:12px;font-weight:600;color:var(--t3)}

.kmf[data-locked="1"]{opacity:.6}
.kmf-lock{position:absolute;inset:0;z-index:2;padding:0;border:0;background:transparent;cursor:pointer}
.kmf-lock:focus-visible{outline:3px solid var(--acc-t);outline-offset:2px}