/******** Bottombar *******/
footer .bottombar {
    height: 3.5em;
    background-color: var(--bottombar-color);
    font-size: 14px;
    border-radius: 10px 10px 0 0;
    filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1.1));
    padding: 0 !important;
}

    footer .bottombar .knopje {
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 10px 10px 0 0;
        background-color: var(--bottombar-color);
        filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1.1)) brightness(1.2);
        cursor: pointer;
        min-width: 7.5em;
        width: 7.5em;
        height: 3.5em;
        text-decoration: none;
        margin: 0 0.375rem;
    }

        footer .bottombar .knopje:hover {
            filter: drop-shadow(1px 1px 1px rgba(0, 0, 0, 1.1)) brightness(1.4);
            text-decoration: none;
        }

    /* Placeholder voor onzichtbare knoppen - zelfde afmetingen als echte knoppen */
    footer .bottombar .knopje-placeholder {
        min-width: 7.5em;
        width: 7.5em;
        height: 3.5em;
        margin: 0 0.375rem;
        visibility: hidden; /* Invisible maar neemt wel ruimte in */
    }

    /* Eerste knop helemaal links */
    footer .bottombar .col-auto:first-child .knopje {
        margin-left: 0 !important;
        margin-right: 0;
    }

    /* Laatste knop helemaal rechts */
    footer .bottombar .col-auto:last-child .knopje {
        margin-right: 0 !important;
        margin-left: 0;
    }

    /* Eerste en laatste knop containers - vaste posities */
    footer .bottombar .bottombar-left .knopje,
    footer .bottombar .bottombar-left .knopje-placeholder {
        margin-left: 0 !important;
        margin-right: 0;
    }

    footer .bottombar .bottombar-right .knopje,
    footer .bottombar .bottombar-right .knopje-placeholder {
        margin-right: 0 !important;
        margin-left: 0;
    }

    /* Middle buttons spacing */
    footer .bottombar .col .d-flex .knopje {
        margin: 0 0.375rem;
    }

        footer .bottombar .col .d-flex .knopje:first-child {
            margin-left: 0;
        }

        footer .bottombar .col .d-flex .knopje:last-child {
            margin-right: 0;
        }

    /* Bootstrap grid overrides */
    footer .bottombar .row {
        margin: 0 !important;
    }

    footer .bottombar .col-auto {
        padding: 0 !important;
    }

    /* Images */
    footer .bottombar img {
        max-height: 2em;
    }

/* Text styling */
.bot-text {
    color: var(--bottombar-text-color) !important;
}

/* Zorgen dat er genoeg ruimte is aan de onderkant van het form zodat de bottombar er niet achter verdwijnt*/
.container.body-content {
    margin-bottom: 60px;
}

/* Mobile responsive */
@media screen and (max-width: 769px) {
    footer .bottombar .knopje {
        min-width: 6em;
        width: 6em;
        margin: 0 0.25rem;
    }

    footer .bottombar .knopje-placeholder {
        min-width: 6em;
        width: 6em;
        margin: 0 0.25rem;
    }

    footer .bottombar .bottombar-left .knopje,
    footer .bottombar .bottombar-left .knopje-placeholder {
        margin-left: 0 !important;
        margin-right: 0;
    }

    footer .bottombar .bottombar-right .knopje,
    footer .bottombar .bottombar-right .knopje-placeholder {
        margin-right: 0 !important;
        margin-left: 0;
    }

    footer .bottombar .col .d-flex .knopje {
        margin: 0 0.25rem;
    }

        footer .bottombar .col .d-flex .knopje:first-child {
            margin-left: 0;
        }

        footer .bottombar .col .d-flex .knopje:last-child {
            margin-right: 0;
        }
}