.o_aska_range_calc {
    --aska-rc-accent: #d42917;
    --aska-rc-ok: #3d9a6a;
    --aska-rc-warn: #c9a227;
    --aska-rc-bad: #d42917;
}

@media (min-width: 992px) {
    .o_aska_range_calc__result {
        position: sticky;
        top: 1.25rem;
    }
}

.o_aska_range_calc__field + .o_aska_range_calc__field,
.o_aska_range_calc__field + .o_aska_range_calc__toggle,
.o_aska_range_calc__toggle + .o_aska_range_calc__charging {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(232, 235, 233, 0.1);
}

/* Keep a divider before REXT / charging, but not between charging switches. */
.o_aska_range_calc__toggle + .o_aska_range_calc__toggle {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(232, 235, 233, 0.1);
}

.o_aska_range_calc__charging .o_aska_range_calc__toggle + .o_aska_range_calc__toggle {
    margin-top: 0.65rem;
    padding-top: 0;
    border-top: 0;
}

.o_aska_range_calc__field-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.75rem;
    margin-bottom: 0.4rem;
}

.o_aska_range_calc__field-title {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 0.5rem;
    min-width: 0;
    flex: 1 1 auto;
}

.o_aska_range_calc__field-title .form-label {
    flex: 0 0 auto;
}

.o_aska_range_calc__value {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    flex: 0 0 auto;
}

.o_aska_range_calc__hint {
    margin: 0;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.o_aska_range_calc__field-title .o_aska_range_calc__hint {
    flex: 1 1 auto;
    min-width: 0;
}

.o_aska_range_calc__toggle > .o_aska_range_calc__hint,
.o_aska_range_calc__charging > .o_aska_range_calc__hint {
    display: block;
    margin-top: 0.35rem;
    white-space: normal;
}

.o_aska_range_calc__hint a {
    text-decoration: underline;
}

.o_aska_range_calc .form-range {
    width: 100%;
    height: 1.5rem;
    padding: 0;
    background: transparent;
    accent-color: var(--aska-rc-accent);
}

@keyframes o-aska-rc-thumb-pulse {
    0%,
    100% {
        box-shadow: 0 0 0 0 rgba(212, 41, 23, 0.7);
        transform: scale(1) translateX(0);
    }
    30% {
        box-shadow: 0 0 0 0.55rem rgba(212, 41, 23, 0.28);
        transform: scale(1.28) translateX(5px);
    }
    60% {
        box-shadow: 0 0 0 0.85rem rgba(212, 41, 23, 0);
        transform: scale(1.38) translateX(-4px);
    }
}

@keyframes o-aska-rc-track-sheen {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 200% 50%;
    }
}

.o_aska_range_calc:not(.is-interacted) .form-range::-webkit-slider-runnable-track {
    background: linear-gradient(
        90deg,
        rgba(232, 235, 233, 0.25) 0%,
        rgba(212, 41, 23, 0.55) 45%,
        rgba(232, 235, 233, 0.25) 90%
    );
    background-size: 200% 100%;
    animation: o-aska-rc-track-sheen 2.4s linear infinite;
}

.o_aska_range_calc:not(.is-interacted) .form-range::-moz-range-track {
    background: linear-gradient(
        90deg,
        rgba(232, 235, 233, 0.25) 0%,
        rgba(212, 41, 23, 0.55) 45%,
        rgba(232, 235, 233, 0.25) 90%
    );
    background-size: 200% 100%;
    animation: o-aska-rc-track-sheen 2.4s linear infinite;
}

.o_aska_range_calc .form-range::-webkit-slider-runnable-track {
    height: 0.35rem;
}

.o_aska_range_calc .form-range::-webkit-slider-thumb {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: -0.4rem;
    border: 0;
    background: var(--aska-rc-accent);
    cursor: pointer;
}

.o_aska_range_calc:not(.is-interacted) .form-range::-webkit-slider-thumb {
    animation: o-aska-rc-thumb-pulse 1.05s ease-in-out infinite;
}

.o_aska_range_calc .form-range::-moz-range-track {
    height: 0.35rem;
}

.o_aska_range_calc .form-range::-moz-range-thumb {
    width: 1.15rem;
    height: 1.15rem;
    border: 0;
    border-radius: 0;
    background: var(--aska-rc-accent);
    cursor: pointer;
}

.o_aska_range_calc:not(.is-interacted) .form-range::-moz-range-thumb {
    animation: o-aska-rc-thumb-pulse 1.05s ease-in-out infinite;
}

.o_aska_range_calc .form-switch .form-check-input {
    width: 2.75rem;
    height: 1.45rem;
    margin-top: 0.15rem;
    cursor: pointer;
}

.o_aska_range_calc .form-switch .form-check-input:checked {
    background-color: var(--aska-rc-accent);
    border-color: var(--aska-rc-accent);
}

.o_aska_range_calc .form-switch .form-check-label {
    margin-left: 0.35rem;
    font-weight: 600;
    cursor: pointer;
}

.o_aska_range_calc__leg + .o_aska_range_calc__leg {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(232, 235, 233, 0.1);
}

.o_aska_range_calc__leg-head {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.35rem;
}

.o_aska_range_calc__leg-status {
    font-weight: 900;
    line-height: 1.2;
}

.o_aska_range_calc__leg[data-status="haalbaar"] .o_aska_range_calc__leg-status {
    color: var(--aska-rc-ok);
}

.o_aska_range_calc__leg[data-status="krap"] .o_aska_range_calc__leg-status {
    color: var(--aska-rc-warn);
}

.o_aska_range_calc__leg[data-status="niet_haalbaar"] .o_aska_range_calc__leg-status {
    color: var(--aska-rc-bad);
}

.o_aska_range_calc__leg-hint {
    margin-top: 0.35rem;
}

.o_aska_range_calc__status {
    margin: 0;
    font-weight: 900;
    line-height: 1.1;
}

.o_aska_range_calc__result[data-status="haalbaar"] .o_aska_range_calc__status {
    color: var(--aska-rc-ok);
}

.o_aska_range_calc__result[data-status="krap"] .o_aska_range_calc__status {
    color: var(--aska-rc-warn);
}

.o_aska_range_calc__result[data-status="niet_haalbaar"] .o_aska_range_calc__status {
    color: var(--aska-rc-bad);
}

.o_aska_range_calc__gauge {
    position: relative;
    margin: 0.75rem 0 0.25rem;
    padding-bottom: 0.85rem;
}

.o_aska_range_calc__gauge-track {
    display: flex;
    height: 0.55rem;
    overflow: hidden;
    border-radius: 0;
}

.o_aska_range_calc__gauge-seg {
    flex: 1;
}

.o_aska_range_calc__gauge-seg.is-green { background: #3d9a6a; }
.o_aska_range_calc__gauge-seg.is-lime { background: #7db34a; }
.o_aska_range_calc__gauge-seg.is-amber { background: #c9a227; }
.o_aska_range_calc__gauge-seg.is-orange { background: #d4791f; }
.o_aska_range_calc__gauge-seg.is-red { background: #d42917; }

.o_aska_range_calc__gauge-needle {
    position: absolute;
    top: -0.15rem;
    width: 0.2rem;
    height: 0.85rem;
    margin-left: -0.1rem;
    background: #e8ebe9;
    box-shadow: 0 0 0 1px rgba(16, 23, 20, 0.55);
    transition: left 0.12s ease-out;
}

.o_aska_range_calc__metrics > div + div {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
}

.o_aska_range_calc__cta {
    display: inline-block;
}