/*
=========================================================
HV NOVITAS
Module : Inschrijven
Bestand: inschrijven.css
Versie : 1.0
=========================================================
*/

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    background:#f4f4f4;
    color:#333;
    line-height:1.6;

}

.container{

    max-width:1100px;
    margin:40px auto;
    padding:20px;

}

.page-header{

    background:#ff7a00;
    color:#fff;

    padding:35px;

    border-radius:12px;

    text-align:center;

    margin-bottom:30px;

    box-shadow:0 6px 18px rgba(0,0,0,.15);

}

.page-header h1{

    font-size:34px;

    margin-bottom:15px;

}

.page-header p{

    font-size:18px;

    max-width:850px;

    margin:auto;

}

.card{

    background:#fff;

    border-radius:12px;

    padding:30px;

    margin-bottom:25px;

    box-shadow:0 5px 12px rgba(0,0,0,.08);

}

.card h2{

    color:#ff7a00;

    margin-bottom:25px;

    font-size:28px;

    border-bottom:2px solid #eee;

    padding-bottom:10px;

}

.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:22px;

}

.field{

    display:flex;

    flex-direction:column;

}

.field-large{

    grid-column:span 2;

}

label{

    font-weight:bold;

    margin-bottom:8px;

    color:#444;

}

input,
select,
textarea{

    padding:13px;

    border:2px solid #ddd;

    border-radius:8px;

    font-size:16px;

    transition:.25s;

    background:#fff;

}

input:focus,
select:focus,
textarea:focus{

    outline:none;

    border-color:#ff7a00;

    box-shadow:0 0 8px rgba(255,122,0,.25);

}
/* =========================================================
   CHECKBOXEN
========================================================= */

.checkbox-group{

    display:flex;
    flex-direction:column;
    gap:18px;
    margin-top:10px;

}

.checkbox-group label{

    display:flex;
    align-items:flex-start;
    gap:12px;

    padding:12px;

    border-radius:8px;

    background:#fafafa;

    border:1px solid #e8e8e8;

    cursor:pointer;

    transition:.25s;

}

.checkbox-group label:hover{

    background:#fff4ea;

    border-color:#ff7a00;

}

.checkbox-group input{

    margin-top:4px;
    transform:scale(1.25);

}


/* =========================================================
   INFO BLOKKEN
========================================================= */

.info{

    background:#eef7ff;

    border-left:5px solid #3498db;

    padding:15px 18px;

    border-radius:8px;

    margin-bottom:25px;

    color:#444;

}


/* =========================================================
   OPZEGREGELING
========================================================= */

.notice{

    margin-top:30px;

    padding:25px;

    background:#fff8ef;

    border-left:6px solid #ff7a00;

    border-radius:10px;

}

.notice h3{

    color:#ff7a00;

    margin-bottom:15px;

    font-size:24px;

}

.notice p{

    margin-bottom:12px;

    line-height:1.7;

}


/* =========================================================
   DIGITALE HANDTEKENING
========================================================= */

.signature-wrapper{

    width:100%;

    border:3px dashed #bbb;

    border-radius:10px;

    background:#fff;

    padding:12px;

    margin-top:20px;

}

#signatureCanvas{

    width:100%;

    height:250px;

    background:#fff;

    display:block;

    cursor:crosshair;

}


/* =========================================================
   KNOPPEN
========================================================= */

.signature-buttons{

    margin-top:18px;

    display:flex;

    justify-content:flex-end;

    gap:15px;

}

.btn-secondary{

    background:#777;

    color:#fff;

    border:none;

    padding:12px 24px;

    border-radius:8px;

    cursor:pointer;

    font-size:16px;

    transition:.25s;

}

.btn-secondary:hover{

    background:#555;

}

.btn-submit{

    width:100%;

    margin-top:20px;

    padding:18px;

    border:none;

    border-radius:10px;

    background:#ff7a00;

    color:#fff;

    font-size:22px;

    font-weight:bold;

    cursor:pointer;

    transition:.25s;

}

.btn-submit:hover{

    background:#e46d00;

    transform:translateY(-2px);

    box-shadow:0 8px 18px rgba(0,0,0,.18);

}
/* =========================================================
   MELDINGEN
========================================================= */

.message{

    margin-top:25px;

    padding:18px;

    border-radius:10px;

    text-align:center;

    font-weight:bold;

    display:none;

}

.message.success{

    display:block;

    background:#eaf8ea;

    color:#157347;

    border:2px solid #198754;

}

.message.error{

    display:block;

    background:#fdeaea;

    color:#b02a37;

    border:2px solid #dc3545;

}


/* =========================================================
   FOOTER
========================================================= */

.footer{

    text-align:center;

    margin-top:40px;

    padding:30px;

    color:#666;

    font-size:15px;

}

.footer small{

    display:block;

    margin-top:10px;

    color:#999;

}


/* =========================================================
   HOVER EFFECTEN
========================================================= */

.card{

    transition:.25s;

}

.card:hover{

    transform:translateY(-3px);

    box-shadow:0 10px 25px rgba(0,0,0,.10);

}

input:hover,
select:hover,
textarea:hover{

    border-color:#ffb066;

}

button{

    transition:.25s;

}


/* =========================================================
   RESPONSIVE TABLET
========================================================= */

@media(max-width:900px){

    .container{

        padding:15px;

    }

    .page-header{

        padding:25px;

    }

    .page-header h1{

        font-size:28px;

    }

    .page-header p{

        font-size:16px;

    }

    .field-large{

        grid-column:span 1;

    }

}


/* =========================================================
   RESPONSIVE MOBIEL
========================================================= */

@media(max-width:600px){

    .container{

        margin:15px auto;

        padding:10px;

    }

    .page-header{

        padding:20px;

    }

    .page-header h1{

        font-size:24px;

    }

    .page-header p{

        font-size:15px;

    }

    .card{

        padding:20px;

    }

    .card h2{

        font-size:22px;

    }

    .grid{

        grid-template-columns:1fr;

    }

    .signature-buttons{

        flex-direction:column;

    }

    .btn-secondary,
    .btn-submit{

        width:100%;

    }

    #signatureCanvas{

        height:180px;

    }

}


/* =========================================================
   EINDE
========================================================= */