/*
 * Dollar amount slider (public/js/slider.js): big value, green fill up to the thumb, min and max
 * underneath. Used by /pl and, in the compact version below, the homepage hero. Tokens come from
 * lp-forms.css; each version sets its color, track and thumb through the variables.
 */
.lp-slider {
    --pos: 0;
    --slider-color: var(--lp-green);
    --slider-halo: rgba(23, 166, 127, .18);
    --slider-halo-hover: rgba(23, 166, 127, .24);
    --track: 14px;
    --thumb: 30px;
    margin: 1.75rem 0 .5rem;
    text-align: center;
}
.lp-slider-value {
    display: block;
    margin-bottom: 1.25rem;
    color: var(--slider-color);
    font-size: clamp(2.2rem, 6vw, 2.9rem);
    font-weight: 500;
    letter-spacing: -.01em;
    line-height: 1;
    font-variant-numeric: tabular-nums;
}
.lp-slider-range {
    display: block;
    width: 100%;
    height: calc(var(--thumb) + 2px);
    margin: 0;
    background: transparent;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}
.lp-slider-range:focus {
    outline: none;
}
.lp-slider-range::-webkit-slider-runnable-track {
    height: var(--track);
    border-radius: 99px;
    /* The fill ends under the thumb's center, which travels one thumb width less than the track */
    background: linear-gradient(to right, var(--slider-color) calc(var(--thumb) / 2 + (100% - var(--thumb)) * var(--pos)), #e6e9ec 0);
}
.lp-slider-range::-moz-range-track {
    height: var(--track);
    border-radius: 99px;
    background: #e6e9ec;
}
.lp-slider-range::-moz-range-progress {
    height: var(--track);
    border-radius: 99px;
    background: var(--slider-color);
}
.lp-slider-range::-webkit-slider-thumb {
    box-sizing: border-box;
    width: var(--thumb);
    height: var(--thumb);
    margin-top: calc((var(--track) - var(--thumb)) / 2);
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 7px var(--slider-halo), 0 2px 6px rgba(31, 44, 51, .25);
    transition: box-shadow .15s ease;
    -webkit-appearance: none;
    appearance: none;
}
.lp-slider-range::-moz-range-thumb {
    box-sizing: border-box;
    width: var(--thumb);
    height: var(--thumb);
    border: 0;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 0 0 7px var(--slider-halo), 0 2px 6px rgba(31, 44, 51, .25);
}
.lp-slider-range:hover::-webkit-slider-thumb,
.lp-slider-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 10px var(--slider-halo-hover), 0 2px 6px rgba(31, 44, 51, .25);
}
.lp-slider-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 10px var(--slider-halo-hover), 0 2px 6px rgba(31, 44, 51, .25);
}
.lp-slider-ends {
    display: flex;
    justify-content: space-between;
    margin-top: .6rem;
    color: var(--lp-ink);
    font-size: .95rem;
    font-weight: 500;
}

/*
 * Compact version for the homepage hero card: the amount sits on the label's row, in the card's
 * button green, over a slimmer track with a ringed thumb and quiet end labels.
 */
.lp-slider-sm {
    --slider-color: #0e6848;
    --slider-halo: rgba(14, 104, 72, .14);
    --slider-halo-hover: rgba(14, 104, 72, .14);
    --track: 8px;
    --thumb: 22px;
    margin: 0;
    text-align: left;
}
.lp-slider-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .55rem;
}
.lp-slider-head label {
    margin: 0;
}
.lp-slider-sm .lp-slider-value {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    letter-spacing: 0;
}
.lp-slider-sm .lp-slider-range::-webkit-slider-thumb {
    border: 2px solid var(--slider-color);
    box-shadow: 0 2px 6px rgba(31, 44, 51, .2);
}
.lp-slider-sm .lp-slider-range::-moz-range-thumb {
    border: 2px solid var(--slider-color);
    box-shadow: 0 2px 6px rgba(31, 44, 51, .2);
}
.lp-slider-sm .lp-slider-range:hover::-webkit-slider-thumb,
.lp-slider-sm .lp-slider-range:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 6px var(--slider-halo-hover), 0 2px 6px rgba(31, 44, 51, .2);
}
.lp-slider-sm .lp-slider-range:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 6px var(--slider-halo-hover), 0 2px 6px rgba(31, 44, 51, .2);
}
.lp-slider-sm .lp-slider-ends {
    margin-top: .3rem;
    color: var(--lp-muted);
    font-size: .8rem;
    font-weight: 400;
}