.registrationform{
    font-family: var(--form-input_font, Inter, Arial, helvetica, sans-serif);
    line-height: 1.5;
    color: #4c6e89;
}

.registrationform * {
    box-sizing: border-box;
}

.registrationform h1, .registrationform h2, .registrationform h3, .registrationform h4, .registrationform h5, .registrationform h6,
.registrationform .h1, .registrationform .h2, .registrationform .h3, .registrationform .h4, .registrationform .h5, .registrationform .h6{
    color: #003057;
}

.registrationform input {
    border: var(--form-input_borderwidth, 1px) solid var(--form-input_border, #D9E0E6);
    background: var(--form-input_background, #fff);
    color: var(--form-input_color, #4C6E89);
    border-radius: var(--form-input_radius, 0px);
    box-shadow: 0;
    font-size: var(--form-input_fontsize, 0.9375rem);
    font-family: var(--form-input_font, Inter, Arial, helvetica, sans-serif);
    font-weight: var(--form-input_fontweight, normal);
    line-height: var(--form-input_lineheight, 1.25em);
    letter-spacing: var(--form-input_letterspacing, 0em);
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    padding: 13px 20px;
    font-size: 15px;
    height: auto;
}

.registrationform button{
    min-width: var(--button_minwidth, 0);
    font-size: calc(var(--button_fontsize, 16) * 1px);
    line-height: var(--button_lineheight, 1em);
    border-radius: var(--button_radius, 0.3125em);
    font-weight: var(--button_fontweight, 600);
    background: var(--button_background, #E35205);
    border: var(--button_borderwidth, 0px) solid var(--button_border, #E35205);
    color: var(--button_color, #fff);
    -webkit-text-decoration: var(--button_textdecoration, none);
    text-decoration: var(--button_textdecoration, none);
    text-transform: var(--button_texttransform, none);
    padding: var(--button_vpadding, calc((((var(--button_height, 45) - 16) / 2) / var(--button_fontsize, 16)) * 1em)) var(--button_hpadding, calc((30 / var(--button_fontsize, 16)) * 1em));
    letter-spacing: var(--button_letterspacing, 0em);
}

.registrationform textarea{
    max-width: 100%;
    height: 120px;
    resize: none;
}


.registrationform label{
    color: #003057;
    font-weight: 600;
}

/* Container */
.registrationform .radio-inline{
    left: -5px;
}
.registrationform .radio-inline,
.registrationform .radio {
    position: relative;
    padding-left: 28px;
    margin-right: 20px;
    cursor: pointer;
}

/* Verberg echte radio */
.registrationform .radio-inline input[type="radio"],
.registrationform .radio input[type="radio"] {
    position: absolute;
    opacity: 0;
}

/* Buitenste cirkel */
.registrationform .radio-inline::before,
.registrationform .radio::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    border: 1px solid var(--form-input_border, #D9E0E6);
    border-radius: 50%;
    background: #fff;
}

/* Binnenste stip → actief */
.registrationform .radio-inline:has(input[type="radio"]:checked)::after,
.registrationform .radio:has(input[type="radio"]:checked)::after {
    content: "";
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    background: #333;
    border-radius: 50%;
}

.registrationform .checkbox{
    padding-left: 0;
}
.registrationform .checkbox label {
    position: relative;
    padding-left: 32px;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

/* Verberg echte checkbox */
.registrationform .checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

/* Checkbox outline */
.registrationform .checkbox label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    border: 1px solid var(--form-input_border, #D9E0E6);
    background: #fff;
    box-sizing: border-box;
}

/* Checkmark (actief) */
.registrationform .checkbox label:has(input[type="checkbox"]:checked)::after {
    content: "";
    position: absolute;
    left: 8px;
    top: 50%;
    transform: translateY(-55%) rotate(45deg);
    width: 6px;
    height: 10px;
    border-right: 2px solid #333;
    border-bottom: 2px solid #333;
}

/* Focus (toegankelijkheid) */
.registrationform .checkbox label:has(input[type="checkbox"]:focus-visible)::before {
    outline: 2px solid #000;
    outline-offset: 2px;
}