/* ----------------------------------
   CONTACTFORMULIER
---------------------------------- */

.contactformulier {
    width: 100%;
    margin: 40px auto;
    padding: 2rem;
    background: #ffffff;
    border: 1px solid #C62828;
    border-radius: 8px;
    font-family: "Roboto", sans-serif;
    color: #000000;
}

/* TITEL */
.contactformulier h2 {
    margin-top: 0;
    font-size: 1.8rem;
    color: #FF0000;
    font-weight: 400;
}

/* PARAGRAFEN */
.contactformulier p {
    line-height: 1.6;
    color: #000000;
}

/* LABELS */
.contactformulier label {
    display: block;
    margin-top: 1.2rem;
    margin-bottom: 0.3rem;
    font-weight: 600;
    color: #000000;
    font-size: 14px;
    text-align: left;
}

/* ----------------------------------
   INPUTS & SELECTS (stijl uit style.css)
---------------------------------- */

.contactformulier input[type="text"],
.contactformulier input[type="email"],
.contactformulier input[type="tel"],
.contactformulier input[type="password"],
.contactformulier input[type="file"],
.contactformulier select{
    width: 60%;
    padding: 8px;
    border: 1px solid #C62828;
    border-radius: 3px;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    color: #000000;
   /* background-color: #eef7fb; */
    box-sizing: border-box;
}
.contactformulier textarea {
     width: 100%;
    padding: 8px;
    border: 1px solid #C62828;
    border-radius: 3px;
    font-size: 15px;
    font-family: "Roboto", sans-serif;
    color: #000000;
   /* background-color: #eef7fb; */
    box-sizing: border-box;
}

.contactformulier input:focus,
.contactformulier textarea:focus,
.contactformulier select:focus {
    border: 2px solid #237da3;
    outline: none;
}

/* TEXTAREA */
.contactformulier textarea {
    resize: vertical;
    min-height: 140px;
}

/* ----------------------------------
   FIELDSET (stijl uit style.css)
---------------------------------- */

.contactformulier fieldset {
    display: block;
    width: 100%;
    margin: 15px 0;
    padding: 10px;
    border: 1px solid #237da3;
    border-radius: 3px;
    /*background-color: #eef7fb; */
}

.contactformulier legend {
    text-align: left;
    color: #237da3;
    font-style: italic;
    font-size: 16px;
    padding: 0 5px;
}

.contactformulier .toelichting p {
    font-size: 0.8rem;
    font-style: italic;
}

/* ----------------------------------
   SUBMIT BUTTON
---------------------------------- */
.contactformulier button[type="submit"] {
    margin-top: 1.5rem;
    padding: 10px 20px;
    background-color: #C62828; /* primaire huisstijl rood */
    color: #fff;
    border: none;
    border-radius: 3px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color .2s ease;
}

.contactformulier button[type="submit"]:hover {
    background-color: #B71C1C; /* donkerder rood */
}

.contactformulier button[type="submit"]:active {
    background-color: #8E0000; /* nog donkerder rood */
}
/* ----------------------------------
   FOUT- EN SUCCESMELDINGEN
---------------------------------- */

.contactformulier .error {
    background: #ffe6e6;
    border-left: 4px solid #cc0000;
    padding: 1rem;
    margin-bottom: 1rem;
    color: #C62828;
}

.contactformulier .success {
    background: #e6ffe6;
    border-left: 4px solid #009900;
    padding: 1rem;
    margin-bottom: 1rem;
    color: #C62828;
}

/* ----------------------------------
   RESPONSIVE
---------------------------------- */

@media (max-width: 768px) {
    .contactformulier {
        width: 90%;
        margin: 20px auto;
    }
}