/* ============================= */
/* FORMULAIRE CREDIT PREMIUM */
/* ============================= */

.loan-form-card{

    background:#ffffff;

    border-radius:25px;

    padding:45px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.12);

    position:relative;

    overflow:hidden;

}


/* Petite décoration supérieure */

.loan-form-card:before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:6px;

    background:linear-gradient(
        90deg,
        #0d6efd,
        #00c6ff
    );

}



/* ============================= */
/* HEADER */
/* ============================= */


.loan-header .badge{

    border-radius:50px;

    font-size:14px;

    letter-spacing:.5px;

}


.loan-header h2{

    font-size:36px;

    color:#1d2b4f;

    margin-bottom:15px;

}


.loan-header p{

    font-size:17px;

    color:#777;

}



/* ============================= */
/* TITRES DES SECTIONS */
/* ============================= */


.form-section{

    background:#f8fbff;

    padding:25px;

    border-radius:18px;

    margin-bottom:25px;

}


.form-section h4{

    font-size:20px;

    font-weight:700;

    color:#0d6efd;

    margin-bottom:25px;

    display:flex;

    align-items:center;

    gap:12px;

}



/* ============================= */
/* LABELS */
/* ============================= */


.form-group label{

    font-weight:600;

    color:#344054;

    margin-bottom:8px;

    display:block;

}



/* ============================= */
/* CHAMPS */
/* ============================= */


.form-control{

    height:55px;

    border-radius:0 12px 12px 0;

    border:1px solid #dce5f5;

    padding-left:15px;

    font-size:15px;

    transition:.3s;

}


.form-control:hover{

    border-color:#9bbcff;

}


.form-control:focus{

    border-color:#0d6efd;

    box-shadow:
    0 0 0 4px rgba(13,110,253,.12);

}



/* Textarea */

textarea.form-control{

    height:160px;

    border-radius:15px;

    padding:15px;

}



/* ============================= */
/* ICONES INPUT */
/* ============================= */


.input-group-text{

    width:55px;

    justify-content:center;

    background:

    linear-gradient(
        135deg,
        #0d6efd,
        #3b82f6
    );

    color:white;

    border:none;

    border-radius:12px 0 0 12px;

    font-size:18px;

}



/* ============================= */
/* SELECT */
/* ============================= */


select.form-control{

    cursor:pointer;

}



/* ============================= */
/* CARTE RECAP */
/* ============================= */


.card.rounded-4{

    border-radius:20px!important;

    overflow:hidden;

}



/* ============================= */
/* CHECKBOX */
/* ============================= */


.alert-light{

    background:#f8fbff;

    border-color:#dce8ff!important;

}


.form-check-input{

    width:20px;

    height:20px;

    cursor:pointer;

}


.form-check-label{

    margin-left:8px;

    line-height:1.6;

    color:#555;

}



/* ============================= */
/* BOUTON */
/* ============================= */


.submit-btn{

    height:60px;

    border-radius:50px;

    border:none;

    font-size:18px;

    font-weight:700;

    letter-spacing:.3px;

    background:

    linear-gradient(
        135deg,
        #0d6efd,
        #00a8ff
    );

    transition:.35s;

}



.submit-btn:hover{

    transform:translateY(-4px);

    box-shadow:

    0 15px 35px rgba(13,110,253,.35);

}



/* ============================= */
/* ANIMATION */
/* ============================= */


.form-group{

    animation:fadeIn .5s ease;

}


@keyframes fadeIn{

    from{

        opacity:0;

        transform:translateY(10px);

    }


    to{

        opacity:1;

        transform:translateY(0);

    }

}



/* ============================= */
/* RESPONSIVE MOBILE */
/* ============================= */


@media(max-width:768px){


    .loan-form-card{

        padding:25px;

        border-radius:18px;

    }


    .loan-header h2{

        font-size:28px;

    }


    .form-section{

        padding:18px;

    }


    .submit-btn{

        height:55px;

    }


}