/* Gemeenschappelijke actieknoppen voor publieke site, patiënten en praktijken.
   Bestaande klassen blijven werken; gebruik voor nieuwe links bij voorkeur .vp-knop.
   Sluit-/menuknoppen en de teksteditor houden hun eigen bediening. */
body.vp-site {
    --vp-knop-achtergrond: #007a2f;
    --vp-knop-rand: #007a2f;
    --vp-knop-tekst: #fff;
    --vp-knop-hover: #0a5c28;
    --vp-knop-hover-tekst: #fff;
}
body.vp-site :is(button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.formbutton, a.cmn-btn-layout3, a.cmn-btn-layout3-danger, a.cmn-btn-layout3-secondary,
    .cmn-btn a, .cmn-btn-layout2 a, .cmn-btn-layout3 a,
    .cmn-btn-layout3-danger a, .cmn-btn-layout3-secondary a,
    a.vp-knop, a.mailmodule-tab, .vp-tabs a, a.mailmodule-import-pagina, a.vp-mailmodule-knop, a.vp-info-knop, a.vp-io-knop, a.vp-zijpaneel-knop):not(.jodit-container *, .jodit-popup *, .jodit-dialog *, .mailmodule-editor *,
    .vp-wachtwoord-toggle, .vp-menu-uitloggen, .vp-melding-sluit,
    .vp-dialoog-sluitknop, .vp-modal-sluitknop, .vp-info-popup-sluit,
    .vp-onboarding-sluit, .vp-onboarding-tab, .vp-zijpaneel-sluit, .vp-zijpaneel-tab,
    .cross-btn, .navbar-toggler, .btn-close, .close) {
    box-sizing: border-box;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    max-width: 100%;
    width: auto;
    margin: 4px 4px 4px 0;
    padding: 13px 20px;
    border: 1px solid var(--vp-knop-rand);
    border-radius: 0;
    background: var(--vp-knop-achtergrond);
    color: var(--vp-knop-tekst);
    font: 600 16px/1.5 Arial, sans-serif;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    white-space: normal;
    overflow-wrap: anywhere;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: none;
    overflow: hidden;
    z-index: 1;
    transition: color .5s ease-out, border-color .5s ease-out, box-shadow .5s ease-out;
}
body.vp-site :is(button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.formbutton, a.cmn-btn-layout3, a.cmn-btn-layout3-danger, a.cmn-btn-layout3-secondary,
    .cmn-btn a, .cmn-btn-layout2 a, .cmn-btn-layout3 a,
    .cmn-btn-layout3-danger a, .cmn-btn-layout3-secondary a,
    a.vp-knop, a.mailmodule-tab, .vp-tabs a, a.mailmodule-import-pagina, a.vp-mailmodule-knop, a.vp-info-knop, a.vp-io-knop, a.vp-zijpaneel-knop):not(.jodit-container *, .jodit-popup *, .jodit-dialog *, .mailmodule-editor *,
    .vp-wachtwoord-toggle, .vp-menu-uitloggen, .vp-melding-sluit,
    .vp-dialoog-sluitknop, .vp-modal-sluitknop, .vp-info-popup-sluit,
    .vp-onboarding-sluit, .vp-onboarding-tab, .vp-zijpaneel-sluit, .vp-zijpaneel-tab,
    .cross-btn, .navbar-toggler, .btn-close, .close)::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0;
    top: 50%;
    left: 50%;
    background: var(--vp-knop-hover);
    transform: translate(-50%, -50%) rotate(-45deg);
    z-index: -1;
    pointer-events: none;
    transition: height .5s ease-out;
}
body.vp-site :is(.vp-knop-secundair, .vp-btn-outline, .btn-secondary, .btn-outline-secondary,
    .cmn-btn-layout3-secondary) {
    --vp-knop-achtergrond: #fff;
    --vp-knop-rand: #007a2f;
    --vp-knop-tekst: #0b5d24;
    --vp-knop-hover: #007a2f;
}
body.vp-site :is(.vp-knop-gevaar, .btn-danger, .btn-outline-danger, .cmn-btn-layout3-danger) {
    --vp-knop-achtergrond: #b42318;
    --vp-knop-rand: #b42318;
    --vp-knop-tekst: #fff;
    --vp-knop-hover: #861a12;
}
body.vp-site :is(button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.formbutton, a.cmn-btn-layout3, a.cmn-btn-layout3-danger, a.cmn-btn-layout3-secondary,
    .cmn-btn a, .cmn-btn-layout2 a, .cmn-btn-layout3 a,
    .cmn-btn-layout3-danger a, .cmn-btn-layout3-secondary a,
    a.vp-knop, a.mailmodule-tab, .vp-tabs a, a.mailmodule-import-pagina, a.vp-mailmodule-knop, a.vp-info-knop, a.vp-io-knop, a.vp-zijpaneel-knop):not(.jodit-container *, .jodit-popup *, .jodit-dialog *, .mailmodule-editor *,
    .vp-wachtwoord-toggle, .vp-menu-uitloggen, .vp-melding-sluit,
    .vp-dialoog-sluitknop, .vp-modal-sluitknop, .vp-info-popup-sluit,
    .vp-onboarding-sluit, .vp-onboarding-tab, .vp-zijpaneel-sluit, .vp-zijpaneel-tab,
    .cross-btn, .navbar-toggler, .btn-close, .close):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    border-color: var(--vp-knop-rand);
    color: var(--vp-knop-hover-tekst);
    text-decoration: none;
    box-shadow: 0 0 5px rgba(255, 255, 255, .3);
}
body.vp-site :is(button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.formbutton, a.cmn-btn-layout3, a.cmn-btn-layout3-danger, a.cmn-btn-layout3-secondary,
    .cmn-btn a, .cmn-btn-layout2 a, .cmn-btn-layout3 a,
    .cmn-btn-layout3-danger a, .cmn-btn-layout3-secondary a,
    a.vp-knop, a.mailmodule-tab, .vp-tabs a, a.mailmodule-import-pagina, a.vp-mailmodule-knop, a.vp-info-knop, a.vp-io-knop, a.vp-zijpaneel-knop):not(.jodit-container *, .jodit-popup *, .jodit-dialog *, .mailmodule-editor *,
    .vp-wachtwoord-toggle, .vp-menu-uitloggen, .vp-melding-sluit,
    .vp-dialoog-sluitknop, .vp-modal-sluitknop, .vp-info-popup-sluit,
    .vp-onboarding-sluit, .vp-onboarding-tab, .vp-zijpaneel-sluit, .vp-zijpaneel-tab,
    .cross-btn, .navbar-toggler, .btn-close, .close):not(:disabled):not(.disabled):not([aria-disabled="true"]):hover::before { height: 380%; }
body.vp-site :is(button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.formbutton, a.cmn-btn-layout3, a.cmn-btn-layout3-danger, a.cmn-btn-layout3-secondary,
    .cmn-btn a, .cmn-btn-layout2 a, .cmn-btn-layout3 a,
    .cmn-btn-layout3-danger a, .cmn-btn-layout3-secondary a,
    a.vp-knop, a.mailmodule-tab, .vp-tabs a, a.mailmodule-import-pagina, a.vp-mailmodule-knop, a.vp-info-knop, a.vp-io-knop, a.vp-zijpaneel-knop):not(.jodit-container *, .jodit-popup *, .jodit-dialog *, .mailmodule-editor *,
    .vp-wachtwoord-toggle, .vp-menu-uitloggen, .vp-melding-sluit,
    .vp-dialoog-sluitknop, .vp-modal-sluitknop, .vp-info-popup-sluit,
    .vp-onboarding-sluit, .vp-onboarding-tab, .vp-zijpaneel-sluit, .vp-zijpaneel-tab,
    .cross-btn, .navbar-toggler, .btn-close, .close):focus-visible {
    outline: 3px solid #164f2d;
    outline-offset: 3px;
}
body.vp-site :is(button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.formbutton, a.cmn-btn-layout3, a.cmn-btn-layout3-danger, a.cmn-btn-layout3-secondary,
    .cmn-btn a, .cmn-btn-layout2 a, .cmn-btn-layout3 a,
    .cmn-btn-layout3-danger a, .cmn-btn-layout3-secondary a,
    a.vp-knop, a.mailmodule-tab, .vp-tabs a, a.mailmodule-import-pagina, a.vp-mailmodule-knop, a.vp-info-knop, a.vp-io-knop, a.vp-zijpaneel-knop):not(.jodit-container *, .jodit-popup *, .jodit-dialog *, .mailmodule-editor *,
    .vp-wachtwoord-toggle, .vp-menu-uitloggen, .vp-melding-sluit,
    .vp-dialoog-sluitknop, .vp-modal-sluitknop, .vp-info-popup-sluit,
    .vp-onboarding-sluit, .vp-onboarding-tab, .vp-zijpaneel-sluit, .vp-zijpaneel-tab,
    .cross-btn, .navbar-toggler, .btn-close, .close):is(:disabled, .disabled, [aria-disabled="true"]) {
    opacity: .55;
    cursor: not-allowed;
    box-shadow: none;
}
/* Actieve paginanummers blijven te onderscheiden van de andere knoppen. */
body.vp-site :is(.btn-current-info, .vp-knop[aria-current="page"]) {
    --vp-knop-achtergrond: #0a5c28;
    box-shadow: inset 0 -3px 0 #95c11f;
}
/* In contrastmodus moeten ook oude Bootstrap-knoppen en labels leesbaar blijven. */
body.vp-site.vp-knoppen-contrast :is(button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.formbutton, a.cmn-btn-layout3, a.cmn-btn-layout3-danger, a.cmn-btn-layout3-secondary,
    .cmn-btn a, .cmn-btn-layout2 a, .cmn-btn-layout3 a,
    .cmn-btn-layout3-danger a, .cmn-btn-layout3-secondary a,
    a.vp-knop, a.mailmodule-tab, .vp-tabs a, a.mailmodule-import-pagina, a.vp-mailmodule-knop, a.vp-info-knop, a.vp-io-knop, a.vp-zijpaneel-knop):not(.jodit-container *, .jodit-popup *, .jodit-dialog *, .mailmodule-editor *,
    .vp-wachtwoord-toggle, .vp-menu-uitloggen, .vp-melding-sluit,
    .vp-dialoog-sluitknop, .vp-modal-sluitknop, .vp-info-popup-sluit,
    .vp-onboarding-sluit, .vp-onboarding-tab, .vp-zijpaneel-sluit, .vp-zijpaneel-tab,
    .cross-btn, .navbar-toggler, .btn-close, .close),
body.vp-site.vp-knoppen-contrast :is(button, input[type="submit"], input[type="button"], input[type="reset"],
    a.btn, a.formbutton, a.cmn-btn-layout3, a.cmn-btn-layout3-danger, a.cmn-btn-layout3-secondary,
    .cmn-btn a, .cmn-btn-layout2 a, .cmn-btn-layout3 a,
    .cmn-btn-layout3-danger a, .cmn-btn-layout3-secondary a,
    a.vp-knop, a.mailmodule-tab, .vp-tabs a, a.mailmodule-import-pagina, a.vp-mailmodule-knop, a.vp-info-knop, a.vp-io-knop, a.vp-zijpaneel-knop):not(.jodit-container *, .jodit-popup *, .jodit-dialog *, .mailmodule-editor *,
    .vp-wachtwoord-toggle, .vp-menu-uitloggen, .vp-melding-sluit,
    .vp-dialoog-sluitknop, .vp-modal-sluitknop, .vp-info-popup-sluit,
    .vp-onboarding-sluit, .vp-onboarding-tab, .vp-zijpaneel-sluit, .vp-zijpaneel-tab,
    .cross-btn, .navbar-toggler, .btn-close, .close) :is(span, strong, small, b, i, u, li) {
    background: #000 !important;
    color: #fff !important;
    border-color: #000 !important;
    text-decoration: none !important;
}
@media (prefers-reduced-motion: reduce) {
    body.vp-site :is(button, input, a),
    body.vp-site :is(button, a)::before { transition: none; }
}
@media (forced-colors: active) {
    body.vp-site :is(button, input[type="submit"], a.btn, a.vp-knop) {
        border: 1px solid ButtonText;
    }
}

/* Ook de native uploadknop volgt de gedeelde vormgeving. */
body.vp-site input[type="file"]::file-selector-button {
    min-height: 44px;
    margin-right: 12px;
    padding: 13px 20px;
    border: 1px solid #007a2f;
    border-radius: 0;
    background: #007a2f;
    color: #fff;
    font: 600 16px/1.5 Arial, sans-serif;
    cursor: pointer;
}
body.vp-site input[type="file"]::file-selector-button:hover {
    background: #0a5c28;
    border-color: #0a5c28;
}
body.vp-site input[type="file"]:disabled::file-selector-button {
    opacity: .55;
    cursor: not-allowed;
}
body.vp-site.vp-knoppen-contrast input[type="file"]::file-selector-button {
    background: #000;
    border-color: #000;
    color: #fff;
}

/* Oude contrastregels kleedden ook de omhullende div aan als knop. */
body.vp-site.vp-knoppen-contrast :is(div, form):is(.cmn-btn-layout3, .cmn-btn-layout3-danger, .cmn-btn-layout3-secondary) {
    background: transparent !important;
    border: 0 !important;
}

/* De contactknoppen zijn de oorspronkelijke referentie: behoud hun afmetingen. */
body.vp-site .header-right .cmn-btn-layout3 a {
    margin: 0;
    padding: 13px 20px;
}
body.vp-site .tussenblok2 .cmn-btn-layout3 a {
    margin: 0;
    padding: 12px 22px;
}
/* Inputknoppen kunnen geen ::before-laag tekenen. */
body.vp-site :is(input[type="submit"], input[type="button"], input[type="reset"]):not(:disabled):hover {
    background: var(--vp-knop-hover);
}
/* Houd de diagonale vulling in hoog contrast ook zwart. */
body.vp-site.vp-knoppen-contrast :is(button, a)::before {
    background: #000 !important;
}

/* Stapnavigatie krijgt ruimte voor het nummer en een ongebroken titel. */
body.vp-site .vp-mailmodule-stappen {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
body.vp-site a.vp-mailmodule-stap {
    justify-content: flex-start;
    text-align: left;
    gap: 8px;
    margin: 0;
    padding: 12px;
}
body.vp-site :is(.mailmodule-tab.active, .vp-tabs a.is-actief,
    .mailmodule-import-pagina.actief, .vp-mailmodule-stap[aria-current="step"]) {
    --vp-knop-achtergrond: #0a5c28;
    box-shadow: inset 0 -3px 0 #95c11f;
}
@media (max-width: 480px) {
    body.vp-site .vp-mailmodule-stappen {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* Lange outline-knoppen: vul ook de hoeken zodat de witte hovertekst leesbaar blijft. */
body.vp-site :is(a, button).btn.vp-btn-outline {
    transition: background-color .5s ease-out, color .5s ease-out,
        border-color .5s ease-out, box-shadow .5s ease-out;
}
body.vp-site :is(a, button).btn.vp-btn-outline:not(:disabled):not(.disabled):not([aria-disabled="true"]):hover {
    background: var(--vp-knop-hover);
}
@media (prefers-reduced-motion: reduce) {
    body.vp-site :is(a, button).btn.vp-btn-outline { transition: none; }
}