/* General Form */
.loancomparison_form {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin: 20px 0;
    font-size: 16px;
}

/* Sliders */
.loancomparison {
    position: relative;
    height: 14px;
    width: 100%;
    margin: 20px 0;
    background: #e6e6e6;
    border-radius: 8px;
}

.loancomparison__fill {
    height: 14px;
    width: 0%;
    background: #369e71;
    position: absolute;
    top: 0;
    border-radius: 8px;
}

.loancomparison__handle {
    background: #FFFFFF;
    cursor: pointer;
    display: inline-block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: -3px;
    border-radius: 50%;
    border: 4px solid #aacc5e;
    box-sizing: content-box !important;
}

/* Slider containers */
.loancomparison-slider-container {
    width: 100%;
    margin-bottom: 30px;
}

.loancomparison-label {
    font-weight: bold;
    margin-bottom: 6px;
}

/* Outputs */
.loancomparison_slider_output {
    font-size: 20px;
    text-align: center;
    margin-bottom: 10px;
}

.lc_final_amount {
    font-weight: bold;
    color: #369e71;
}

/* Banks layout */
.bank_box {
    margin-bottom: 20px;
    border: 1px solid #aacc5e;
    width: 100%;
    text-align: center;
    padding: 20px;
    background: #FFF;
    position: relative;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.bank_logo img {
    max-height: 50px;
    width: auto;
    display: inline-block;
}

.bank_name {
    font-weight: 900;
    font-size: 16px;
    text-align: left;
}

.bank_details {
    font-size: 16px;
    text-align: center;
}

.bank_apply a, .bank_apply span {
    display: block;
    border: 2px solid #369e71;
    margin-top: 4px;
    background: #aacc5e;
    font-size: 14px;
    color: #FFF !important;
    border-radius: 3px;
    text-decoration: none;
    box-shadow: 0 5px 11px 0 rgba(0,0,0,.18),0 4px 5px 0 rgba(0,0,0,.15);
    padding: 6px 0;
}

/* Responsive */
@media only screen and (max-width: 768px) {
    .bank_box {
        flex-direction: column;
        text-align: center;
    }

    .bank_name, .bank_details, .bank_logo {
        width: 100%;
        margin: 5px 0;
        text-align: center;
    }

    .loancomparison_slider_output {
        font-size: 18px;
    }
}

/* Slider widths */
#lc_amount, #lc_term {
    width: 100%;
}

/* Adjusted for larger visual */
.loancomparison-slider-principal,
.loancomparison-slider-term {
    width: 48%;
    float: left;
}

.loancomparison-slider-principal { margin-right: 4%; }







/* =============================
   Estilo general del comparador
   ============================= */

/* Contenedor principal */
.loancomparison_form {
    width: 100%;
    max-width: 700px;   /* ancho máximo en desktop */
    margin: 0 auto;     /* centrado horizontal */
    padding: 20px;
    box-sizing: border-box;
}

/* Títulos centrados */
.loancomparison_form h2,
.loancomparison_form h3 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
}

/* Subtítulo */
.loancomparison_form h3 {
    font-weight: normal;
    color: #555; /* gris suave para diferenciar del H2 */
}

/* Contenedor de cada slider */
.loancomparison-range {
    width: 100%;
    max-width: 600px;
    margin: 20px auto; /* centrado + espacio arriba/abajo */
    text-align: center;
}

/* Sliders */
.loancomparison-range input[type="range"] {
    width: 100%;
    max-width: 500px;
    margin: 10px auto;
    display: block;
}

/* Valor mostrado debajo del slider */
.output-number {
    margin-top: 5px;
    font-weight: bold;
    text-align: center;
}

/* Contenedor de bancos */
.loancomparison-banks {
    margin-top: 20px;
}

/* Cada banco (opcional: centrado dentro del bloque) */
.loancomparison-banks .bank_box {
    text-align: center;
    margin-bottom: 15px;
}

/* Responsive para pantallas pequeñas */
@media (max-width: 768px) {
    .loancomparison_form {
        padding: 15px;
    }

    .loancomparison-range {
        max-width: 90%;
    }

    .loancomparison-range input[type="range"] {
        max-width: 100%;
    }
}

.loancomparison-footer {
    text-align: center;   /* Centra el texto */
    margin-top: 15px;     /* Separación del comparador */
    color: #555;          /* Color neutro igual que otros textos */
}



/* Contenedor flex para slider y botones */
.slider-wrapper {
    display: flex;
    align-items: center;
}

/* El slider ocupa todo el espacio restante */
.slider-wrapper input[type="range"] {
    flex: 1;
    margin: 0 5px; /* espacio entre los botones y la barra */
}

/* Botones integrados con el slider */
.slider-btn {
    width: 32px;
    height: 32px;
    background-color: #f0f0f0;  /* mismo fondo que los inputs */
    border: 1px solid #ccc;      /* borde igual al slider */
    border-radius: 4px;          /* redondeo igual al slider */
    color: #333;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    user-select: none;
    transition: background-color 0.2s;
}

/* Hover igual al estilo del slider */
.slider-btn:hover {
    background-color: #e0e0e0;
}



/* Mobile-friendly sliders */
@media (max-width: 480px) {
    .slider-wrapper {
        gap: 8px; /* un poco más de espacio entre botón y slider */
    }

    .slider-btn {
        width: 40px;
        height: 40px;
        font-size: 20px;
    }
}