:root {
    --slider-bg: #f5f5f5;
}

.calculator-wrapper {
    /* width: 90%; */
    max-width: 1016px;
    height: 310px;
    border-radius: 16px;
}

.calculator-wrapper .value-title {
    font-size: 16px;
    color: var(--base-dark-green);
}

.calculator-wrapper .amount-value .amount-display {
    font-size: 18px;
    color: var(--base-theme);
}

.calculator-wrapper .calculator-box {
    width: 50%;
}

.amount-slider span {
    font-size: 14px;
}

.calculator-wrapper .amount-slider input[type=range] {
    -webkit-appearance: none;
    width: 100%;
    height: 8px;
    background: linear-gradient(to left, var(--base-theme) 0%, var(--base-theme) 0%, var(--slider-bg) 0%, var(--slider-bg) 100%);
    border-radius: 6px;
    outline: none;
    transition: background 0.3s;
    box-shadow: 0 2px 8px 0 rgba(27, 202, 160, 0.08);
}
.calculator-wrapper .amount-slider input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--slider-bg);
    border: 6px solid var(--base-theme);
    box-shadow: 0 2px 8px 0 rgba(27, 202, 160, 0.15);
    cursor: pointer;
    transition: background 0.2s, border 0.2s;
}

.return-option {
    color: var(--base-theme);
    border: 1px solid var(--base-theme);
    font-size: 15px;
    cursor: pointer;
}

.return-option.active {
    background-color: var(--base-light-green);
}

.return-amount-box {
    border-right: 1px solid var(--base-light-green);
}

.calculated-return  {
    background-color: var(--base-light-green);
}

.return-title {
    font-size: 14px;
    color: var(--base-dark-green); 
}

.return-item-value {
    font-size: 14px;
}

.return-item-value .return-amount {
    font-size: 15px;
}

.loan-btn {
    background-color: var(--base-theme);
    height: 48px;
    font-size: 15px;
}

.loan-btn:hover, .loan-btn:active {
    background-color: var(--base-dark-green) !important;
}

@media (max-width: 767.98px) {
    .calculator-wrapper {
        height: fit-content;
    }
    .calculator-wrapper .calculator-box {
        width: 100%;
    }
    .return-amount-box {
        border-right: none;
    }
}