/**
 * Korte formulieren met een losse knop in Divi: documentatie aanvragen [rd_request_documentation_form]
 * en nieuwsbrief [rds_enter_newsletter] (rbd_contact_render_compact_form in contact-form.php)
 * De velden komen uit apply-form.css (.rbd-apply__*); hier de witte velden op de lichtblauwe sectie.
 */
.rbd-request {
    --rbd-apply-field-height: 58px;
    --rbd-vac-input-bg: #ffffff;
    --rbd-vac-input-radius: 4px;
    --rbd-vac-input-size: 18px;

    box-sizing: border-box;
    width: 100%;
}

/* De Divi-module krimpt anders mee met de inhoud (en loopt op mobiel de sectie uit) */
.et_pb_code:has(> .et_pb_code_inner > .rbd-request) {
    width: 100%;
    max-width: 620px;
}

.et_pb_code_inner:has(> .rbd-request) {
    width: 100%;
}

.rbd-request [hidden] {
    display: none;
}

.rbd-request .rbd-request__form {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

/* Bedankt: wit blok, want de sectie zelf heeft de kaartkleur */
.rbd-request .rbd-request__success {
    background: #ffffff;
    border-radius: 4px;
}

.rbd-request .rbd-request__success:focus {
    outline: none;
}

/* De losse knop in Divi tijdens het versturen (contact-form.js) */
.rbd-contact-trigger-busy {
    opacity: 0.6;
    pointer-events: none;
}

.rbd-contact-trigger {
    cursor: pointer;
}

.rbd-contact-trigger:focus-visible {
    outline: 2px solid var(--rbd-vac-primary);
    outline-offset: 2px;
}

@media (max-width: 767px) {
    .rbd-request {
        --rbd-apply-field-height: 54px;
        --rbd-vac-input-size: 16px; /* Kleiner zoomt iOS in bij het typen */
    }
}