/* DEBT CALCULATOR FORM STYLES */
/* CONTAINER FOR FORM WITH BACKGROUND */
.form-container {
    background-color: #F1F1F3; /* Choose the desired background color */
    padding: 20px;
    border-radius: 8px; /* Optional: Add rounded corners if desired */
}

/* FORM LAYOUT */
.debt-calculator-form {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin: 20px 0;
    justify-content: center; /* Center the form elements */
}

/* INPUT FIELD CONTAINER */
.form-field {
    width: 48%; /* Adjust to 50% with a small gap */
    display: flex;
    flex-direction: column;
}

/* LABEL STYLES */
.form-field label {
    font-size: 16px;
    margin-bottom: 8px;
    color: #045b67;
}

/* INPUT FIELD STYLES */
.form-field input {
    border-radius: 8px !important;
    border: 1px solid #112663 !important;
    background: #FFF !important;
    box-shadow: 0px 1px 2px rgba(149, 11, 11, 0.05) !important;
    font-size: 16px;
    width: 100%;
    padding-left: 15px !important;
    transition: border-color 0.3s;
    height: 48px;

}

/* Placeholder styles */
.form-field input::placeholder {
    color: #8096AA !important;
    font-size: 16px !important;
    font-weight: 400 !important;
}

/* Adjust padding for the first input field (Monthly Income) */
.debt-calculator-form .form-field:first-child input {
    padding-left: 30px !important ;
}

/* PREFIX & SUFFIX STYLES ($, %, USD, Months) */
.input-wrapper {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

/* Prefix (e.g., $, %) and Suffix (e.g., USD, Months) Styling */
.prefix, .suffix {
    position: absolute;
    font-size: 16px;
    color: #244A6D !important;
}

.prefix {
    left: 15px;
top: 17px;
}

.suffix {
top: 6px;
    right: 3px;
    background: white;
    padding: 10px 10px 10px 10px;
}

/* SUBMIT BUTTON STYLES */
.form-field button {
    border-width: 0px;
    padding: 10px 0 !important;
    font-size: 16px;
    width: 100%;
    max-width: 220px !important;
    margin: 20px auto 0;
    border-radius: 4px;
    border-color: #035863 !important;
    background: #035863 !important;
    color: white !important;
    transition: background 0.3s, border 0.3s;
    box-shadow: 0px 2px 0px 0px rgba(255, 255, 255, 0.15) inset !important;
    text-decoration: inherit;
    height: 100%;
}

.form-field button:hover {
    background: #02f5a6 !important;
    border-color: #02f5a6 !important;
}

/* BUTTON CENTERING */
.debt-calculator-form .form-field:last-child {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* ERROR MESSAGE STYLES */
.error-message {
    color: red !important;
    font-size: 12px !important;
    margin-top: 10px !important;
    display: none; /* Initially hidden */
}
#program-length-message
{
    margin-top: 10px !important;
}


#results-box {
    width: 40%;
    height: auto !important;
    border-radius: var(--Border-Radius-rounded-md, 6px);
    border: 2px solid #0deda7;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    margin: 50px auto; /* Centers the box */
}

#results-title {
    color: #005965;
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: -0.6px;
    margin-bottom: 16px;
    padding-left: 24px;
    padding-top: 24px;
}

/* Disabled button styling */
button.disabled-button {
    background-color: #d3d3d3 !important;
    pointer-events: none !important;
    border-width: 0px !important;
}

/* Show message when program length is valid */
#program-length-message {
    font-size: 14px;
    color: #ff9800; /* Orange color for program length message */
}

#results-box .result-item {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center;
    border-bottom: 1px solid #0deda7;
    padding-bottom: 12px;
    padding-top:12px;
    margin-bottom: 8px;
    margin-right: 24px;
    margin-left: 24px;
    font-size: 16px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 24px !important;
}

#results-box .result-item strong {
    flex-grow: 1; /* Ensures the title grows to take available space */
    text-align: left; /* Ensures title is aligned to the left */
    color: #005965; !important ;

/* Paragraph/Base */
font-size: 16px !important;
font-style: normal;
font-weight: 500 !important;
line-height: 24px !important; /* 150% */
}

#results-box .result-item span {
    font-weight: bold;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 24px;
    text-align: right; /* Ensures value is aligned to the right */
}

.total-savings-box {
    background: #0deda7;
    color: #fff;
    margin-right: 10px !important;
    padding: 20px 24px 16px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
    margin-top: -10px !important ;
}


/* Enabled Button */
.enabled-button {
    background-color: blue !important;
    color: white;
    cursor: pointer;
}

/* Disabled Button */
.disabled-button {
    background-color: grey;
    color: lightgrey;
    cursor: not-allowed;
}

#disclaimer-text {
    text-align: center !important;
    font-size: 12px !important;
    font-style: normal !important;
    font-weight: 500 !important;
    line-height: 20px !important;
    width: auto !important;
    margin: 0 auto; /* This will center the text block */
    display: block; /* Ensures the element is a block element */
}


/* RESPONSIVE DESIGN (FOR SMALL SCREENS) */
@media (max-width: 768px) {
    .form-field {
        width: 100%;
    }
    
    /* Ensure input fields fit smaller screens */
    .form-field input {
        padding-left: 40px;
    }

    /* Adjust button for smaller screens */
    .form-field button {
        max-width: 100% !important;
    }
    
    #results-box {
    width: 100%;
}}


.disabled-button-input {
    background-color: #cccccc; /* Example gray background */
    color: #666666; /* Example gray text */
    cursor: default; /* Change cursor to indicate it's not clickable */
    opacity: 0.6; /* Optional: Reduce opacity for further visual cue */
    border: 1px solid #999; /* Example gray border */
}