/* Form container */
form.mx_form .mx_form_row {
    display: table;
    clear: both;
    margin-bottom: 3px;
    width: 100%;
    color: #221e1f;
}

form.mx_form .mx_form_spacer {
    display: table;
    clear: both;
    height: 1em;
}

form.mx_form .mx_form_label {
    display: table;
    clear: both;
    height: 1em;
    font-weight: bold;
}

form.mx_form label {
    width: 100%;
    float: left;
    margin-bottom: 5px;
    font-weight: bold;
}

/* Inputs */
form.mx_form input[type=text],
form.mx_form input[type=email],
.mx_form_input textarea,
.mx_form_input select {
    width: 100%;
    max-width: 600px;
    padding: 10px 15px;
    font-size: 24px;
    line-height: 36px;
    border: 1px solid #999;
    border-radius: 10px;
    background-color: #f8f8f8;
    color: #221e1f;
    appearance: none;
    box-sizing: border-box;
}

/* Textarea padding fix */
.mx_form_input textarea {
    padding: 10px;
    font-size: 24px;
}

/* Submit button */
form.mx_form input[type=submit] {
    background-color: #121b2e;
    color: #fff;
    border: none;
    border-radius: 25px;
    padding: 8px 25px;
    cursor: pointer;
    font-size: 18px;
    margin: 5px 0;
    display: inline-block;
    transition: background-color 0.3s ease;
}

form.mx_form input[type=submit]:hover {
    background-color: #7286a2;
}

/* Form input container */
form.mx_form .mx_form_input {
    display: table;
    float: left;
    padding: 10px 0;
    width: 100%;
    max-width: 600px;
    font-size: 20px;
}

/* Buttons inside form rows */
.mx_form_row .button.blauw {
    border: 0;
    cursor: pointer;
}

/* Captcha */
.mx_captcha {
    width: 50px;
}

/* Radio & checkbox container */
.mx_form_input_option {
    display: flex;
    align-items: center; /* Verticaal centreren */
    gap: 10px; /* Ruimte tussen input en label */
    margin-bottom: 10px;
}

.mx_form_input_option input[type=radio],
.mx_form_input_option input[type=checkbox] {
    width: 25px;
    height: 25px;
    flex-shrink: 0; /* voorkomt dat de knop krimpt */
    accent-color: #f3702a;
    cursor: pointer;
}

/* Label/tekst bij radio/checkbox */
.mx_form_input_option span,
.mx_form_input_option label {
    font-size: 18px;
    line-height: 1.2;
}

/* Error styling */
.mx_error input,
.mx_error textarea {
    border-color: red !important;
}

.mx_error .mx_form_input_option {
    color: red !important;
}

/* reCAPTCHA badge */
.grecaptcha-badge {
    width: 256px;
    height: 60px;
    transition: right 0.3s ease;
    position: fixed;
    bottom: 64px !important;
    right: -186px;
    box-shadow: 0 0 5px grey;
    z-index: 1001 !important;
}

/* Responsive */
@media screen and (max-width: 768px) {
    form.mx_form input[type=submit] {
        margin-left: 0;
        width: 100%;
    }

    form.mx_form input[type=text],
    form.mx_form input[type=email],
    .mx_form_input textarea,
    .mx_form_input select {
        max-width: 100%;
        font-size: 18px;
        line-height: 28px;
    }

    .mx_form_input_option input[type=radio],
    .mx_form_input_option input[type=checkbox] {
        width: 20px;
        height: 20px;
    }

    .mx_form_input_option span,
    .mx_form_input_option label {
        font-size: 16px;
    }
}