/**
 * EASYS2 Estate — 汎用 二点レンジスライダー（公開／管理 共有スタイル）
 * 下限〜上限を選ぶ。ネイティブ input[type=range] を 2 本重ねる。
 * 駅徒歩・価格/賃料など、目盛り（value+label）を差し替えて再利用する。
 */

.es-range-slider {
    width: 100%;
    box-sizing: border-box;
}

/* ── 見出し行（ラベル左 / 現在値サマリーは中央 / クリア右） ── */
.es-range-slider__head {
    position: relative;
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
}

.es-range-slider__label {
    font-size: 13px;
    font-weight: 600;
    color: #475569;
}

/* 青字サマリーは見出し行の中央に配置（PC・SP共通） */
.es-range-slider__summary {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
}

.es-range-slider__clear {
    margin-left: auto;
    background: none;
    border: none;
    padding: 0;
    font-size: 13px;
    color: var(--easys2-primary);
    cursor: pointer;
    text-decoration: underline;
}

.es-range-slider__clear:hover {
    color: var(--easys2-primary-active);
}

/*
 * 長いラベル用（例: 専有面積/土地面積）。
 * サマリーを中央絶対配置にするとラベルと重なるため、
 * ラベル＋クリアを1行目、サマリーを2行目に折り返して中央表示する。
 */
.es-range-slider--wide-label .es-range-slider__head {
    flex-wrap: wrap;
}

.es-range-slider--wide-label .es-range-slider__summary {
    position: static;
    transform: none;
    order: 3;
    flex: 1 1 100%;
    margin-top: 6px;
    text-align: center;
}

.es-range-slider--wide-label .es-range-slider__clear {
    order: 2;
}

/* ── 「下限なし／上限なし」表示行（バーの上） ── */
.es-range-slider__bounds {
    position: relative;
    height: 16px;
    margin: 0 11px 6px; /* 11px インセットでバー両端（つまみ可動域）と揃える */
}

/* ── スライダー本体 ── */
.es-range-slider__slider {
    position: relative;
    height: 22px;
    cursor: pointer; /* バー上クリックで近い方のつまみを移動できることを示す */
}

/*
 * レール: ネイティブ range のつまみ（22px）は両端で半分（11px）内側に
 * オフセットされるため、トラック/塗り/目盛りも左右 11px インセットして
 * つまみの可動域（中心 11px〜幅-11px）と一致させる。
 */
.es-range-slider__rail {
    position: absolute;
    left: 11px;
    right: 11px;
    top: 55%;
    transform: translateY(-50%);
    height: 5px;
    pointer-events: none;
}

.es-range-slider__track {
    position: absolute;
    inset: 0;
    border-radius: 999px;
    background: #d6dde6;
}

.es-range-slider__fill {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--easys2-primary);
    /* left / width は JS が更新（レール基準の %） */
    left: 0;
    width: 100%;
}

/* 目盛りマーク（トラック上） */
.es-range-slider__ticks {
    position: absolute;
    inset: 0;
}

.es-range-slider__tick {
    position: absolute;
    top: 50%;
    width: 2px;
    height: 10px;
    transform: translate(-50%, -50%);
    background: #b8c2cf;
    border-radius: 1px;
}

/* ── 2 本の range input を重ねる ── */
.es-range-slider__input {
    -webkit-appearance: none;
    appearance: none;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    background: transparent;
    pointer-events: none;
}

.es-range-slider__input--max {
    z-index: 4;
}

.es-range-slider__input--min {
    z-index: 3;
}

/* つまみ（WebKit） */
.es-range-slider__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--easys2-bg);
    border: 4px solid var(--easys2-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    cursor: grab;
}

.es-range-slider__input::-webkit-slider-thumb:active {
    cursor: grabbing;
}

.es-range-slider__input::-webkit-slider-runnable-track {
    background: transparent;
    border: none;
    height: 100%;
}

/* つまみ（Firefox） */
.es-range-slider__input::-moz-range-thumb {
    pointer-events: auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--easys2-bg);
    border: 4px solid var(--easys2-primary);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.25);
    cursor: grab;
    box-sizing: border-box;
}

.es-range-slider__input::-moz-range-track {
    background: transparent;
    border: none;
    height: 100%;
}

.es-range-slider__input:focus {
    outline: none;
}

.es-range-slider__input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px var(--easys2-ring-primary);
}

.es-range-slider__input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px var(--easys2-ring-primary);
}

/* 数値ラベル行は非表示（目盛り線・各値ラベルとも出さない方針）。
   下限なし／上限なしは __bounds（バー上）、現在値は青字サマリーで示す。 */
.es-range-slider__scale {
    display: none;
}

.es-range-slider__scale-label,
.es-range-slider__bound {
    position: absolute;
    top: 0;
    font-size: 12px;
    color: #64748b;
    white-space: nowrap;
}

.es-range-slider__scale-label {
    transform: translateX(-50%);
}

.es-range-slider__bound--start {
    left: -11px;
}

.es-range-slider__bound--end {
    right: -11px;
}

/* 目盛りが多い（価格など約8〜10個）場合の横詰まり対策 */
.es-range-slider--dense .es-range-slider__scale-label,
.es-range-slider--dense .es-range-slider__bound {
    font-size: 11px;
}

/* スマホでは目盛りの各値ラベルを非表示にし、中央の青字サマリーで現在値を判別させる
   （目盛りマークと両端の下限なし/上限なしは残す）。PCは目盛りラベルを維持。 */
@media (max-width: 640px) {
    .es-range-slider__scale-label {
        display: none;
    }
    .es-range-slider--dense .es-range-slider__bound {
        font-size: 11px;
    }
}