/**
 * Zwevend venster careers / vacature (job-cta.php)
 * Variabelen uit job-overview.css (--rbd-vac-*).
 */
.rbd-cta {
    --rbd-cta-width: 330px;
    --rbd-cta-offset: -6px;
    --rbd-cta-bg: #ffffff;
    /* --rbd-cta-shadow: 0 12px 40px rgba(0, 36, 88, 0.22); */
    --rbd-cta-mobile-height: 72px;      /* Hoogte van de mobiele balk (ook voor de filterknop) */
    position: fixed;
    right: var(--rbd-cta-offset);
    bottom: calc(50% - 200px);
    z-index: calc(var(--rbd-vac-z-index, 100000) - 1);  /* Onder modals en het filterpaneel */
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: var(--rbd-cta-width);
    padding: 22px 22px 20px;
    background: #e40000d6;
    /* border-top: 3px solid var(--rbd-vac-red); */
    box-shadow: var(--rbd-cta-shadow);
    font-family: var(--rbd-vac-font);
    animation: rbd-cta-in 0.4s ease 0.6s both;
    backdrop-filter: blur(1px);
}

.rbd-cta__title {
    margin: 0;
    padding: 0;
    color: white;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.25;
}

.rbd-cta__intro {
    margin: 6px 0 0;
    padding: 0;
    color: white;
    font-size: 24px;
    line-height: 1.5;
    font-weight: 700;
}

.rbd-cta__actions {
    display: flex;
    gap: 0px;
    flex-direction: column;
}

.rbd-cta__button {
    display: inline-flex;
    flex: 1;
    align-items: center;
    justify-content: flex-start;
    padding: 16px 17px;
    border: 1px solid transparent;
    font-family: var(--rbd-vac-font);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left!important;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--rbd-vac-transition), color var(--rbd-vac-transition), border-color var(--rbd-vac-transition);
    color: white;
    border-top: 1px solid #ffffff63;
    position:relative;
}
.rbd-cta__button::after{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><g id="Group_1903" data-name="Group 1903" transform="translate(-1824 -896)"><path id="Path_297" data-name="Path 297" d="M1.117,15.517,0,14.4,6.642,7.758,0,1.117,1.117,0,8.875,7.758Z" transform="translate(1838.642 904.242)" fill="%23fff" stroke="%23fff" stroke-width="1"/><path id="Path_298" data-name="Path 298" d="M0,0H13.6V1.6H0Z" transform="translate(1832.8 911.2)" fill="%23fff" stroke="%23fff" stroke-width="1"/><g id="Rectangle_438" data-name="Rectangle 438" transform="translate(1824 896)" fill="none" stroke="%23fff" stroke-width="2"><rect width="32" height="32" rx="2" stroke="none"/><rect x="1" y="1" width="30" height="30" rx="1" fill="none"/></g></g></svg>');
    width: 25px;
    height: 25px;
    background-size: contain;
    background-repeat: no-repeat;
    content: "";
    position:absolute;
    right: 15px;
    top: 15px;
}

.rbd-cta__button--apply {
    /* color: #ffffff !important; */
    /* background: var(--rbd-vac-red); */
    /* border-color: var(--rbd-vac-red); */
}


/* Laadstatus terwijl de kennismaken-modal laadt (coffee-trigger.js) */
.rbd-cta__button.rbd-coffee-is-loading {
    opacity: 0.7;
    cursor: progress;
}

@keyframes rbd-cta-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .rbd-cta {
        animation: none;
    }
}

/* ---------- Tablet + mobiel: balk onderin over de volle breedte ---------- */

@media (max-width: 980px) {
    .rbd-cta {
        --rbd-cta-mobile-height: 52px;

        right: 0;
        bottom: 0;
        left: 0;
        flex-direction: row;
        gap: 0;
        width: auto;
        min-height: var(--rbd-cta-mobile-height);
        padding: 0 0 env(safe-area-inset-bottom, 0px);
    }

    .rbd-cta__text {
        display: none;
    }

    /* Twee knoppen naast elkaar, gescheiden door een dun lijntje */
    .rbd-cta__actions {
        flex: 1;
        flex-direction: row;
    }

    .rbd-cta__button {
        min-height: var(--rbd-cta-mobile-height);
        padding: 0 44px 0 16px;
        border-top: 0;
        font-size: 15px;
    }

    .rbd-cta__button + .rbd-cta__button {
        border-left: 1px solid #ffffff63;
    }

    .rbd-cta__button::after {
        top: 50%;
        right: 14px;
        width: 20px;
        height: 20px;
        transform: translateY(-50%);
    }

    /* Ruimte onder de pagina, en de zwevende filterknop direct boven de balk */
    body:has(.rbd-cta) {
        padding-bottom: var(--rbd-cta-mobile-height, 52px);
    }

    body:has(.rbd-cta) .rbd-vac-mobile {
        --rbd-vac-toggle-bottom: 52px;
    }
}

@media (max-width: 360px) {
    .rbd-cta__button {
        padding: 0 36px 0 12px;
        font-size: 14px;
    }

    .rbd-cta__button::after {
        right: 10px;
    }
}