.selb-page{
    background:#f4f6fa;
    padding:50px 15px;
}


.selb-container{
    max-width:900px;
    margin:auto;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
}


.selb-container h1{
    color:#0D4EA5;
    text-align:center;
}


.intro{
    text-align:center;
    margin-bottom:40px;
}


.selb-container h2{
    color:#0D4EA5;
    margin-top:35px;
}


/* normale labels */

.selb-container label{
    display:block;
    margin-top:15px;
    font-weight:bold;
}


/* normale invoervelden */

.selb-container input[type="text"],
.selb-container input[type="date"],
.selb-container input[type="tel"],
.selb-container input[type="email"],
.selb-container input[type="number"],
.selb-container select{

    width:100%;
    padding:14px;
    border:1px solid #ccc;
    border-radius:10px;
    margin-top:5px;
    font-size:16px;

}


/* Persoonlijke situatie checkboxen */

.checkbox-group{
    margin-top:20px;
}


.checkbox-group label{

    display:flex;
    align-items:center;
    gap:10px;
    margin-top:15px;
    font-weight:bold;

}


.checkbox-group input[type="checkbox"]{

    width:18px;
    height:18px;
    margin:0;

}



/* akkoord verklaring checkbox */

input[type="checkbox"]{

    width:18px;
    height:18px;

}



.form-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;

}



#signature-pad{

    width:100%;
    height:200px;
    border:2px dashed #0D4EA5;
    border-radius:10px;
    background:white;

}



button{

    margin-top:15px;
    padding:14px 25px;
    border:none;
    border-radius:25px;
    cursor:pointer;

}


#clear-signature{

    background:#ddd;

}


.submit-btn{

    background:#FF7300;
    color:white;
    font-size:18px;

}



@media(max-width:768px){

    .selb-container{

        padding:20px;

    }


    .form-grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:768px){

    .checkbox-group label{
        display:flex;
        flex-direction:row;
        align-items:center;
        justify-content:flex-start;
        text-align:left;
        width:100%;
    }

    .checkbox-group input[type="checkbox"]{
        width:18px;
        height:18px;
        margin:0 10px 0 0;
        flex-shrink:0;
    }

}

.checkbox-group .checkbox-item{
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:10px;
    margin-top:15px;
}

.checkbox-group .checkbox-item input[type="checkbox"]{
    width:18px;
    height:18px;
    margin:0;
    flex:0 0 auto;
}

.checkbox-group .checkbox-item label{
    display:inline;
    margin:0;
    font-weight:bold;
    text-align:left;
}



/* ================================
   Bedankt pagina Selbstauskunft
================================ */

.bedankt-box{
    max-width:700px;
    margin:50px auto;
    background:white;
    padding:40px;
    border-radius:20px;
    box-shadow:0 10px 30px rgba(0,0,0,.1);
    text-align:center;
}

.bedankt-box h1{
    color:#0D4EA5;
    font-size:36px;
    margin-bottom:25px;
}

.bedankt-box p{
    font-size:20px;
    line-height:1.7;
    color:#333;
}

.bedankt-box strong{
    font-size:24px;
    color:#0D4EA5;
}


@media(max-width:768px){

    .bedankt-box{
        margin:20px 10px;
        padding:30px 20px;
    }

    .bedankt-box h1{
        font-size:30px;
    }

    .bedankt-box p{
        font-size:19px;
    }

    .bedankt-box strong{
        font-size:22px;
    }

}