.bookprocess .version2 {
        --bp-col-dark: var(--red) !important;
        --bp-col-middle: var(--black) !important;
        --bp-col-light: var(--grey) !important;
        --bp-color-text: var(--white) !important;
        --bp-color-text-alt: var(--white) !important;
    }

    .bookprocess .version2 {
        background: none !important;
        padding: 0 !important;
    }

    .recras-voucher.display-blocks,
    .recras-package,
    .recras-package_choice_lines.display-blocks,
    .recras-product_with_time.display-blocks,
    .recras-product_without_time.display-blocks,
    .recras-product_label_filter.display-blocks {
        --widget-columns: 4;
        gap: 1rem !important;
    }

    .recras-product_with_time.display-single-quantity,
    .recras-product_without_time.display-single-quantity,
    .recras-product_label_filter.display-single-quantity {
        --widget-columns: 3;
    }

    .bookprocess h2 {
        text-transform: inherit;
        font-weight: 700 !important;
    }

    .bookprocess .version2 .groupWrapper > .extraInfoWrapper {
        grid-area: image;
        justify-self: end;
        align-self: start;
        margin: 0.4rem;
        z-index: 2;
    }

    .bookprocess .version2 .extraInfoOpen {
        border: none;
    }

    .bookprocess :is(.extraInfoOpen, dialog .closeBig) {
        color: var(--black) !important;
    }

    .bookprocess :is(.extraInfoOpen, dialog .closeBig):hover {
        color: var(--white) !important;
    }

    .recras-booking_starttime.display-blocks label, 
    .recras-product_with_time:not(.display-dayticket) .checkboxWrapper > label {
        color: var(--black);
    }

    .price-information {
        margin: 0.5rem 0;
        font-weight: 600 !important;
        color: var(--red) !important;
    }

    .bookprocess .bpButtonWrapper button {
        font-size: 0.9rem;
        font-weight: 400;
        line-height: 1rem;
        padding: 1rem 1.75rem;
        border-radius: 5px;
        border: none;
    }

     .version2 .recapEle ,
    .recapEle dt ,
    .bookprocess :is(.checkboxWrapper, .numberWrapper, .radioWrapper) label {
        font-size: 0.8rem !important;     
    }

    .version2 .recapEle {
        padding: 1rem !important;
    }

    .bookprocess :is(th, td) {
        font-size: 0.8rem !important;
    }

    .bookprocess fieldset > div > label {
        font-size: inherit !important;
        font-weight: 700 !important;
        margin: 0 0 0.5rem 0 !important;
    }

    .bookprocess input:not(:is([type='checkbox'], [type='radio']), [type='number'], [name^='booking_startdate']),
    .bookprocess select,
    .bookprocess textarea {
        height: 2.75rem !important;
        background: var(--light-grey) !important;
        border: none !important;
        max-width: 40rem !important;
    }

    .bookprocess aside > div {
        top: 11rem;
    }

    .bookprocess .subgroupWrapper .checkboxWrapper {
        display: flex !important;
        align-items: center;
        gap: 0.5rem;
    }

    .bookprocess .subgroupWrapper a {
        font-size: 0.8rem !important;
    }

    @container bookprocess (width >= 1400px) {
        .bookprocess > div {
            grid-template-columns: 2fr 1fr;
        }

        /* geen recap-inhoud → form mag de volle breedte pakken */
        .bookprocess > div:has(> aside:empty) {
            grid-template-columns: 1fr;
        }
    }