/* -------------------------
   Loan Calculator Widget
   Edge-Aligned Version (v2.1)
   Fixed layering + independent fill height
------------------------- */

.lcw-inner {
    width: 100% !important;
    display: flex;
    flex-direction: column;
}

.lcw-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    max-width: var(--slider-container-width, 100%);
}

/* Display above slider (CHF + amount) */
.lcw-input-display {
    font-weight: 600;
    font-size: 1.2em;
    margin-bottom: 4px;
}

/* --- Slider Wrapper --- */
.lcw-slider-wrapper {
    position: relative;
    width: 100%;
    height: calc(var(--slider-thumb-height, 20px) + var(--slider-track-height, 6px));
    display: flex;
    align-items: center;
}

/* Base slider track */
.lcw-slider-wrapper input[type=range] {
    width: 100%;
    appearance: none;
    background: var(--slider-track-color, #ddd);
    height: var(--slider-track-height, 6px);
    border-radius: var(--slider-track-border-radius, 6px);
    border: var(--slider-track-border-width, 0px) solid var(--slider-track-border-color, transparent);
    outline: none;
    cursor: pointer;
    position: relative;
    z-index: 3;
    /* sits above fill and ticks */
}

/* -------------------------
   Slider Thumbs
------------------------- */

/* WebKit (Chrome, Safari, Edge) */
.lcw-slider-wrapper input[type=range]::-webkit-slider-thumb {
    appearance: none;
    width: var(--slider-thumb-width, 20px);
    height: var(--slider-thumb-height, 20px);
    border-radius: var(--slider-thumb-radius, 50%);
    border: var(--slider-thumb-border-width, 2px) solid var(--slider-thumb-border-color, #fff);
    background: var(--slider-thumb-color, #0073e6);
    cursor: pointer;
    transition: all 0.15s ease;
    margin-top: calc((var(--slider-thumb-height, 20px) / -2) + (var(--slider-track-height, 6px) / 2));
}

.lcw-slider-wrapper input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

/* Firefox */
.lcw-slider-wrapper input[type=range]::-moz-range-thumb {
    width: var(--slider-thumb-width, 20px);
    height: var(--slider-thumb-height, 20px);
    border-radius: var(--slider-thumb-radius, 50%);
    border: var(--slider-thumb-border-width, 2px) solid var(--slider-thumb-border-color, #fff);
    background: var(--slider-thumb-color, #0073e6);
    cursor: pointer;
    transition: all 0.15s ease;
}

/* Track for Firefox */
.lcw-slider-wrapper input[type=range]::-moz-range-track {
    background: var(--slider-track-color, #ddd);
    height: var(--slider-track-height, 6px);
    border-radius: var(--slider-track-border-radius, 6px);
}

/* -------------------------
   Tick Marks (Dividers)
------------------------- */
.lcw-slider-ticks {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 100%;
    height: var(--slider-track-height, 6px);
    transform: translateY(-50%);
    pointer-events: none;
    z-index: 4;
    /* now above the track */
}

.lcw-slider-ticks .lcw-tick {
    position: absolute;
    top: 0;
    width: 2px;
    height: calc(var(--slider-track-height, 6px) + 2px);
    background: var(--slider-divider-color, rgba(0, 0, 0, 0.25));
    border-radius: 1px;
    transform: translateX(-50%);
}

/* -------------------------
   Active Fill (Progress Bar)
------------------------- */
.lcw-slider-fill {
    position: absolute;
    top: 50%;
    left: 0;
    height: var(--slider-fill-height, var(--slider-track-height, 6px));
    transform: translateY(-50%);
    background: var(--slider-fill-color, #0073e6);
    border-radius: var(--slider-track-border-radius, 6px);
    z-index: 1;
    transition: width 0.15s ease, background-color 0.2s ease;
}

/* -------------------------
   Payment Display
------------------------- */
.lcw-payment {
    font-size: 1.3em;
    font-weight: 700;
}

/* -------------------------
   Responsive
------------------------- */
@media (max-width: 768px) {
    .lcw-box {
        gap: 10px;
    }

    .lcw-input-display {
        font-size: 1.1em;
    }

    .lcw-payment {
        font-size: 1.1em;
    }
}