/*
  CSS-toevoegingen voor het uitgebreide contactformulier (contactForm.css)
  Deze regels gelden alleen voor de contactpagina (waar ID niet 29 is).
*/

.contactform-extended {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* Kolom-breedte en uitlijning */
.contactform-extended .form-left {
    width: 50% !important;
    float: none !important;
    padding-right: 15px !important;
    display: flex !important;
    flex-direction: column !important;
}

.contactform-extended .form-right {
    width: 50% !important;
    float: none !important;
    padding-left: 15px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Het berichtveld (textarea) even hoog maken als de linkerkolom */
.contactform-extended .form-right .mdc-text-field.textarea {
    flex-grow: 1 !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}

.contactform-extended .form-right .mdc-text-field.textarea textarea {
    flex-grow: 1 !important;
    height: 100% !important;
    box-sizing: border-box !important;
}

/* Bestandsupload over de volledige breedte onder de twee kolommen */
.contactform-extended .form-fullwidth {
    width: 100% !important;
    margin-top: 25px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    clear: both !important;
}

.contactform-extended .form-fullwidth .file-upload-label {
    display: block !important;
    font-size: 0.8125rem !important;
    color: rgba(0, 0, 0, 0.6) !important;
    margin-bottom: 8px !important;
    font-family: 'eau_naturellesans_medium', sans-serif !important;
    text-transform: uppercase !important;
}

.contactform-extended .form-fullwidth input[type="file"] {
    color: #262524 !important;
    width: 100% !important;
    font-family: 'eau_naturellesans_light', sans-serif !important;
}

.contactform-extended .form-fullwidth .error {
    color: #ff6b6b !important;
    font-size: 0.75rem !important;
    display: block !important;
    margin-top: 5px !important;
}

/* Submit-button linksonder uitlijnen */
.contactform-extended .submit-container {
    width: 100% !important;
    float: none !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    margin-top: 15px !important;
    clear: both !important;
}

.contactform-extended .submit-container button[type="submit"] {
    margin-top: 10px !important;
}