.flk-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 100000;
    align-items: center;
    justify-content: center;
    padding: 24px;
    box-sizing: border-box;
}

.flk-overlay.flk-open {
    display: flex;
}

.flk-modal {
    position: relative;
    display: flex;
    flex-direction: row;
    gap: 16px;
    max-width: 1200px;
    max-height: 90vh;
    width: 100%;
}

.flk-photo-pane {
    flex: 2 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.flk-photo {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    border-radius: 4px;
}

.flk-map-pane {
    flex: 1 1 320px;
    min-width: 280px;
    max-width: 420px;
}

.flk-map {
    width: 100%;
    height: 100%;
    min-height: 260px;
    border-radius: 4px;
    overflow: hidden;
}

.flk-close {
    /* Vast aan de viewport (niet aan de modal) zodat de knop altijd bereikbaar
       blijft, ook op mobiel waar de modal-inhoud kan scrollen. */
    position: fixed;
    top: 16px;
    right: 16px;
    background: rgba(0, 0, 0, 0.4);
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    color: #fff;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    z-index: 100001;
}

.flk-close:hover {
    opacity: 0.7;
}

/* Zonder kaartje: foto krijgt de volledige breedte van de modal. */
.flk-modal:not(.flk-has-map) .flk-photo-pane {
    flex: 1 1 100%;
}

@media (max-width: 780px) {
    .flk-modal {
        flex-direction: column;
        max-height: 95vh;
        overflow-y: auto;
    }

    .flk-photo-pane {
        max-height: 55vh;
    }

    .flk-map-pane {
        max-width: none;
        min-width: 0;
    }

    .flk-map {
        min-height: 220px;
        height: 220px;
    }
}

/* Padfilter boven de galerij */
.flk-gallery-wrap {
    width: 100%;
}

/* Normaal zorgt WordPress zelf voor ruimte tussen blokken die direct in de
   paginatekst staan. Omdat we meerdere galerijblokken samen in deze ene
   wrapper-div zetten (voor het gezamenlijke filter), vallen ze buiten die
   automatische afstand en gaan losse galerijen zonder tussenruimte tegen
   elkaar aan staan. Dit herstelt diezelfde afstand tussen alles wat direct
   in de wrapper zit (filterbalk, en elk los galerij-/foto-blok).  */
.flk-gallery-wrap > * + * {
    margin-top: var(--wp--style--block-gap, 2em);
}

.flk-filterbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.flk-filter-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 999px;
    padding: 6px 16px;
    font-size: 14px;
    line-height: 1.4;
    color: #333;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.flk-filter-btn:hover {
    background: #e2e2e2;
}

.flk-filter-btn.flk-filter-active {
    background: #2271b1;
    border-color: #2271b1;
    color: #fff;
}

/* Knop "Voeg toe", alleen zichtbaar voor wie de pagina mag bewerken */
.flk-admin-add-wrap {
    margin-top: 16px;
}

.flk-admin-add-btn {
    display: inline-block;
    background: #2271b1;
    color: #fff;
    text-decoration: none;
    border-radius: 4px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 500;
}

.flk-admin-add-btn:hover {
    background: #135e96;
    color: #fff;
}