/* Live Frontend Editor – Stylesheet  v3.4 */

/* ── Toolbar ─────────────────────────────────────────────────────────────── */
#lfe-toolbar {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 99999;
}
body.admin-bar #lfe-toolbar { top: 48px; }
/* Sinds 3.32.2: onzichtbaar tot hij naast de ronde headerknoppen staat (gebruikersmenu zet .lfe-geplaatst);
 * anders stond hij bij het laden heel even rechtsboven en sprong hij dan naar zijn plek. */
#lfe-toolbar:not(.lfe-geplaatst) { visibility: hidden; }
/* Sinds 3.32.3: in de rij met de ronde headerknoppen (gebruikersmenu zet hem daar); beweegt mee met de header */
#lfe-toolbar.lfe-in-header { position: absolute; margin: 0; }

@media (max-width: 768px) {
    #lfe-toolbar,
    body.admin-bar #lfe-toolbar {
        top: auto !important;
        bottom: 30px !important;
        left: 30px !important;
    }
       #lfe-toggle-btn {
        width: 60px !important;
        height: 60px !important;
    }

}





#lfe-toggle-btn {
    background: #1e86ff;
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    /* Sinds 3.19.1: dezelfde schaduw als de ronde knoppen in de header */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    /* Sinds 3.31.5 geen overgang op breedte: de knop staat naast de ronde headerknoppen en wordt bij elke breedte
     * opnieuw geplaatst; bij het verlaten van de bewerkmodus leek hij daardoor vanaf het hartje aan te komen schuiven. */
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s;
    letter-spacing: 0.03em;
    line-height: 1.4;
    overflow: hidden;
    white-space: nowrap;

    /* Collapsed state: just the icon. Sinds 3.19.1 even groot als de headerknoppen (--vps-knop, gemeten) */
    width: var(--vps-knop, 40px);
    height: var(--vps-knop, 40px);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lfe-toggle-btn:hover {
    background: #0070e0;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    transform: translateY(-1px);
}
#lfe-toggle-btn:active   { transform: translateY(0); }
#lfe-toggle-btn:disabled { opacity: 0.6; cursor: wait; }

/* Pencil icon */
#lfe-toggle-btn .lfe-btn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    opacity: 1;
    position: absolute;
}
#lfe-toggle-btn .lfe-btn-icon svg {
    width: 22px;
    height: 22px;
    fill: #fff;
}

/* Label text */
#lfe-toggle-btn .lfe-btn-label {
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 9px 24px;
    pointer-events: none;
}

/* Hover: expand and show label, hide icon */
#lfe-toggle-btn:not(.lfe-active):hover {
    width: auto;
    min-width: 120px;
    padding: 0;
}
#lfe-toggle-btn:not(.lfe-active):hover .lfe-btn-icon {
    opacity: 0;
    transform: scale(0.7);
}
#lfe-toggle-btn:not(.lfe-active):hover .lfe-btn-label {
    opacity: 1;
}

/* Active (edit mode): show label only, no icon */
#lfe-toggle-btn.lfe-active {
    background: #16a34a;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    width: auto;
    padding: 0 24px;
}
#lfe-toggle-btn.lfe-active:hover {
    background: #15803d;
    box-shadow: 0 6px 16px rgba(0,0,0,0.18);
    width: auto;
    padding: 0 24px;
}
#lfe-toggle-btn.lfe-active .lfe-btn-icon {
    display: none;
}
#lfe-toggle-btn.lfe-active .lfe-btn-label {
    opacity: 1;
    padding: 0;
}

/* ── Bewerkbare elementen ─────────────────────────────────────────────────── */
body.lfe-edit-mode [data-lfe-uid] {
    outline: none;
    background: transparent;
}
body.lfe-edit-mode [data-lfe-uid]:hover,
body.lfe-edit-mode [data-lfe-uid].lfe-toolbar-active {
    outline: 1px dashed #93c5fd;
    outline-offset: 4px;
    cursor: text;
    border-radius: 2px;
}
body.lfe-edit-mode [data-lfe-uid]:focus {
    outline: 2px solid #1e86ff;
    outline-offset: 3px;
    background-color: #eff6ff;
    border-radius: 3px;
    cursor: text;
}

/* ── Type toolbar (P / H2 / H3) ──────────────────────────────────────────── */
#lfe-type-toolbar {
    position: absolute;
    z-index: 25;
    display: flex;
    gap: 2px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 3px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
#lfe-type-toolbar[hidden] { display: none; }

#lfe-type-toolbar button {
    background: transparent;
    border: none;
    border-radius: 4px;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    font-family: inherit;
    color: #64748b;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    line-height: 1.6;
}
#lfe-type-toolbar button:hover   { background: #f1f5f9; color: #0f172a; }
#lfe-type-toolbar button.lfe-active { background: #1e86ff; color: #fff; }

/* Pijlknoppen in type-toolbar */
#lfe-el-btn-up, #lfe-el-btn-down {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3px 6px;
    color: #374151;
}
#lfe-el-btn-up svg, #lfe-el-btn-down svg { display: block; }
#lfe-el-btn-up.lfe-inactive,
#lfe-el-btn-down.lfe-inactive,
#lfe-el-btn-up:disabled,
#lfe-el-btn-down:disabled {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
/* Scheidingslijn vóór de pijlen */
#lfe-el-btn-up { border-left: 1px solid #e2e8f0; margin-left: 4px; padding-left: 8px; }

#lfe-delete-btn {
    color: #dc2626;
    margin-left: 4px;
    border-left: 1px solid #e2e8f0;
    padding-left: 10px;
}
#lfe-delete-btn:hover {
    background: #fef2f2 !important;
    color: #991b1b !important;
}
#lfe-el-btn-duplicate {
    margin-left: 2px;
}
#lfe-el-btn-duplicate:hover {
    color: #1e86ff !important;
}
.lfe-stack-btn-duplicate:hover {
    color: #1e86ff !important;
}

/* ── Stack hover-outline ──────────────────────────────────────────────────── */
/* Blauwe rand om een stack bij hover (en wanneer + Element knop zichtbaar is) */
[data-lfe-stack-uid].lfe-stack-hover {
    outline: 2px solid #1e86ff;
    outline-offset: 2px;
}
/* Als een element ínin de stack focus heeft: geen stack-outline */
[data-lfe-stack-uid]:focus-within {
    outline: none;
}

/* ── + Element knop ──────────────────────────────────────────────────────── */
#lfe-insert-btn {
    position: absolute;
    z-index: 20;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #1e86ff;
    color: #fff;
    border: none;
    border-radius: 9999px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(30,134,255,0.35);
    transition: background 0.15s;
    user-select: none;
    white-space: nowrap;
}
#lfe-insert-btn[hidden] { display: none !important; }
#lfe-insert-btn:hover   { background: #0070e0; }
#lfe-insert-btn span    { font-size: 16px; font-weight: 400; line-height: 1; }

/* ── Insert menu ─────────────────────────────────────────────────────────── */
#lfe-insert-menu {
    position: absolute;
    z-index: 25;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.13);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}
#lfe-insert-menu[hidden] { display: none !important; }

#lfe-insert-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s;
}
#lfe-insert-menu button:hover:not([disabled]) { background: #eff6ff; color: #1e86ff; }
#lfe-insert-menu button.lfe-menu-disabled {
    color: #9ca3af;
    cursor: not-allowed;
}
.lfe-menu-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    color: #6b7280;
}
#lfe-insert-menu button:hover:not([disabled]) .lfe-menu-icon { color: #1e86ff; }

/* ── Modal ───────────────────────────────────────────────────────────────── */
#lfe-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2147482000; /* boven de header van het thema (sinds 3.22.2) */
    display: flex;
    align-items: center;
    justify-content: center;
}
#lfe-modal-overlay[hidden] { display: none; }

#lfe-modal {
    background: #fff;
    border-radius: 10px;
    padding: 32px 36px;
    min-width: 300px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
}
#lfe-modal-title { font-size: 17px; font-weight: 600; margin: 0 0 24px; color: #1a1a2e; }
#lfe-modal-actions { display: flex; gap: 12px; justify-content: center; }
#lfe-modal-actions button {
    padding: 9px 28px;
    border: none;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
#lfe-modal-actions button:hover { opacity: 0.88; transform: translateY(-1px); }
#lfe-btn-save    { background: #16a34a; color: #fff; }
#lfe-btn-discard { background: #e5e7eb; color: #374151; }

/* ── Delete modal ────────────────────────────────────────────────────────── */
#lfe-delete-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2147482000; /* boven de header van het thema (sinds 3.22.2) */
    display: flex;
    align-items: center;
    justify-content: center;
}
#lfe-delete-overlay[hidden] { display: none; }
#lfe-delete-modal {
    background: #fff;
    border-radius: 10px;
    padding: 32px 36px;
    min-width: 300px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    text-align: center;
}
#lfe-delete-modal p { font-size: 17px; font-weight: 600; margin: 0 0 24px; color: #1a1a2e; }
#lfe-delete-modal-actions { display: flex; gap: 12px; justify-content: center; }
#lfe-delete-modal-actions button {
    padding: 9px 28px;
    border: none;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
#lfe-delete-modal-actions button:hover { opacity: 0.88; transform: translateY(-1px); }
#lfe-btn-delete-confirm { background: #dc2626; color: #fff; }
#lfe-btn-delete-cancel  { background: #e5e7eb; color: #374151; }

/* ── Toast ───────────────────────────────────────────────────────────────── */
#lfe-toast {
    position: fixed;
    top: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9001;
    background: #1e86ff;
    color: #fff;
    padding: 12px 22px;
    border-radius: 9999px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: opacity 0.4s;
    white-space: nowrap;
}
#lfe-toast[hidden]         { display: none; }
#lfe-toast.lfe-toast-error { background: #991b1b; }
#lfe-toast.lfe-toast-fade  { opacity: 0; }

/* ── Bestandsfout modal ──────────────────────────────────────────────────── */
#lfe-file-error-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lfe-file-error-popup {
    background: #fff;
    border-radius: 16px;
    padding: 36px 32px 28px;
    max-width: 380px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.lfe-file-error-icon { line-height: 1; }
.lfe-file-error-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #111;
}
.lfe-file-error-msg {
    margin: 0;
    font-size: 14px;
    color: #555;
    line-height: 1.6;
}
.lfe-file-error-btn {
    margin-top: 8px;
    padding: 11px 28px;
    background: #111;
    color: #fff;
    border: none;
    border-radius: 9999px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.lfe-file-error-btn:hover { background: #333; }
/* ── Stapel insert knoppen ───────────────────────────────────────────────── */
/* ── Stack gap-indicator (blauwe lijn tussen stacks) ─────────────────────── */
.lfe-stack-gap-zone {
    /* Onzichtbare hover-zone over het gap-gebied tussen twee stacks */
    background: transparent;
}

.lfe-stack-insert-btn {
    position: absolute;
    z-index: 20;
    display: flex;
    align-items: center;
    cursor: pointer;
    pointer-events: auto;
    height: 24px;
}
.lfe-stack-insert-btn[hidden] { display: none !important; }

/* Plus-knop: blauw (zelfde stijl als de blok-inserter) */
.lfe-stack-insert-btn span {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: #1e86ff;
    color: #fff;
    border-radius: 9999px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    font-weight: 400;
    box-shadow: 0 2px 6px rgba(30,134,255,0.40);
    transition: background 0.15s, transform 0.1s;
    user-select: none;
    z-index: 1;
}
.lfe-stack-insert-btn:hover span {
    background: #0070e0;
    transform: scale(1.1);
}

/* Blauwe lijn */
.lfe-stack-insert-line {
    flex: 1;
    height: 2px;
    background: #1e86ff;
    opacity: 0.7;
}

/* ── Stack toolbar (verplaatsen + verwijderen) ───────────────────────────── */
/* Toolbar is een child van de stack zelf, altijd zichtbaar in edit-mode */
.lfe-stack-toolbar {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 1px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 3px 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    user-select: none;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
}

.lfe-stack-toolbar button {
    background: transparent;
    border: none;
    border-radius: 5px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s;
    color: #374151;
    padding: 0;
}
.lfe-stack-toolbar button svg { display: block; }
.lfe-stack-toolbar button:hover:not(:disabled):not(.lfe-stack-btn-inactive) {
    background: #f1f5f9;
}
.lfe-stack-toolbar button:disabled,
.lfe-stack-toolbar button.lfe-stack-btn-inactive {
    opacity: 0.25;
    cursor: default;
    pointer-events: none;
}
.lfe-stack-btn-delete               { color: #dc2626 !important; }
.lfe-stack-btn-delete:hover         { background: #fef2f2 !important; }

/* ── Stack bevestigingsdialog ────────────────────────────────────────────── */
#lfe-stack-confirm {
    position: absolute;
    z-index: 25;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.14);
    min-width: 260px;
}
#lfe-stack-confirm[hidden] { display: none !important; }
#lfe-stack-confirm p {
    margin: 0 0 12px;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
}
.lfe-stack-confirm-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}
.lfe-stack-confirm-btns button {
    border: none;
    border-radius: 6px;
    padding: 7px 16px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
}
#lfe-stack-confirm-yes {
    background: #dc2626;
    color: #fff;
}
#lfe-stack-confirm-yes:hover { background: #b91c1c; }
#lfe-stack-confirm-no {
    background: #f1f5f9;
    color: #374151;
}
#lfe-stack-confirm-no:hover { background: #e2e8f0; }

/* ── Leeg kader (geen stacks aanwezig) ──────────────────────────────────── */
#lfe-empty-placeholder {
    height: 400px;
    width: 100%;
    box-sizing: border-box;
    background: #f3f4f6;
    border: 2px dashed #9ca3af;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: var(--wp--preset--spacing--40, 24px);
}

/* Buiten edit-mode: geen border, geen knop */
body:not(.lfe-edit-mode) #lfe-empty-placeholder {
    border-color: transparent;
}
body:not(.lfe-edit-mode) #lfe-empty-placeholder-btn {
    display: none;
}

#lfe-empty-placeholder-text {
    margin: 0;
    font-size: 16px;
    color: #6b7280;
    font-weight: 500;
    pointer-events: none;
    user-select: none;
}

#lfe-empty-placeholder-btn {
    width: 48px;
    height: 48px;
    border-radius: 9999px;
    background: #374151;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    transition: background 0.15s, transform 0.1s, color 0.15s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
    flex-shrink: 0;
}
#lfe-empty-placeholder-btn:hover {
    background: #1f2937;
    color: #d1d5db;
    transform: scale(1.08);
}

/* ── Image dropzone ──────────────────────────────────────────────────────── */
.lfe-image-dropzone {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-height: 160px;
    background: #eff6ff;
    border: 2px dashed #93c5fd;
    border-radius: 12px;
    padding: 32px 24px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    box-sizing: border-box;
    user-select: none;
}
.lfe-image-dropzone.lfe-dropzone-over {
    border-color: #1e86ff;
    border-style: solid;
}
.lfe-image-dropzone.lfe-dropzone-over::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    background: rgba(30, 134, 255, 0.25);
    pointer-events: none;
    z-index: 1;
}
.lfe-image-dropzone.lfe-dropzone-uploading {
    cursor: wait;
    pointer-events: none;
}
.lfe-dropzone-icon {
    color: #60a5fa;
    flex-shrink: 0;
}
.lfe-dropzone-text {
    margin: 0;
    font-size: 14px;
    color: #3b82f6;
    text-align: center;
    line-height: 1.5;
}
.lfe-dropzone-text span {
    font-size: 12px;
    color: #93c5fd;
}
.lfe-dropzone-progress-track {
    position: absolute;
    bottom: 12px;
    left: 16px;
    right: 16px;
    height: 4px;
    background: #bfdbfe;
    border-radius: 9999px;
    overflow: hidden;
}
.lfe-dropzone-progress-bar {
    height: 100%;
    background: #3b82f6;
    border-radius: 9999px;
    width: 0%;
    transition: width 0.2s ease;
}
.lfe-dropzone-pct {
    position: absolute;
    bottom: 20px;
    right: 16px;
    font-size: 11px;
    color: #3b82f6;
    font-weight: 600;
}
body.lfe-edit-mode figure[data-lfe-block-name="core/image"] {
    cursor: pointer;
    outline: none;
    position: relative;
    display: block;
    /* Voorkom uitrekken in verticale flex-container (stack = align-items:stretch standaard).
     * width:fit-content + align-self:flex-start zorgen dat de figure de breedte van het
     * beeld aanneemt, niet de volle containerbreedte. */
    width: fit-content;
    align-self: flex-start;
    max-width: 100%;
}

/* ── Hover-overlay "Wijzigen" ────────────────────────────────────────────── */
body.lfe-edit-mode .lfe-img-hover-overlay {
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 180ms ease;
    pointer-events: none;
    z-index: 2;
}
body.lfe-edit-mode .lfe-img-hover-overlay span {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    pointer-events: none;
}
body.lfe-edit-mode figure[data-lfe-block-name="core/image"]:hover .lfe-img-hover-overlay,
body.lfe-edit-mode figure[data-lfe-block-name="core/image"].lfe-toolbar-active .lfe-img-hover-overlay {
    opacity: 1;
}
/* Geen dubbele outline + hover-overlay tegelijk */
body.lfe-edit-mode figure[data-lfe-block-name="core/image"]:hover,
body.lfe-edit-mode figure[data-lfe-block-name="core/image"]:focus {
    outline: none;
}

/* ── Drag-overlay "Drop hem hier maar neer" ──────────────────────────────── */
body.lfe-edit-mode .lfe-img-drag-overlay {
    position: absolute;
    inset: 0;
    border-radius: 15px;
    background: rgba(30, 134, 255, 0.55);
    border: 3px dashed #1e86ff;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 120ms ease;
    pointer-events: none;
    z-index: 3;
}
body.lfe-edit-mode .lfe-img-drag-overlay span {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
    pointer-events: none;
    padding: 0 16px;
}
body.lfe-edit-mode figure[data-lfe-block-name="core/image"].lfe-img-drag-active .lfe-img-drag-overlay {
    opacity: 1;
}
/* Tijdens drag ook hover-overlay verbergen */
body.lfe-edit-mode figure[data-lfe-block-name="core/image"].lfe-img-drag-active .lfe-img-hover-overlay {
    opacity: 0;
}

/* Spinner tijdens vervangen */
body.lfe-edit-mode figure[data-lfe-block-name="core/image"].lfe-img-replacing {
    opacity: 0.6;
    cursor: wait;
}

body.lfe-edit-mode figure[data-lfe-block-name="core/image"] img {
    pointer-events: none;
    display: block;
    max-width: 100%;
    height: auto;
    width: auto;
}

/* Afgeronde hoeken op alle afbeeldingen */
.wp-block-image img {
    border-radius: 15px;
}

/* Marge boven en onder afbeeldingen */
.wp-block-image {
    margin-top: 10px !important;
    margin-bottom: 10px !important;
}

.lfe-drag-placeholder {
    background: #f3f4f6;
    border: 2px dashed #cbd5e1;
    border-radius: 6px;
    box-sizing: border-box;
    min-height: 40px;
    pointer-events: none;
}

/* ── Grip handle ─────────────────────────────────────────────────────────── */
/* Alle bewerkbare elementen krijgen position:relative zodat grip correct positioneert */
body.lfe-edit-mode [data-lfe-uid] {
    position: relative !important;
}
/* Alle bewerkbare elementen: position:relative zodat de grip correct positioneert */
body.lfe-edit-mode [data-lfe-uid] {
    position: relative !important;
}
/* Alleen tekstelementen krijgen extra rechterruimte voor de grip.
   Download-boxes, afbeeldingen en kleurenelementen zijn uitgesloten:
   zij hebben hun eigen grip-layout en mogen niet door padding-right verstoord worden.
   FIX: download-box-wrapper was niet uitgesloten, waardoor zijn klikoppervlak verschoof. */
/* Sinds 3.17.0 staat de grip buiten het element: de extra ruimte rechts in tekstelementen is niet meer nodig. */
.lfe-grip {
    display: none; /* standaard verborgen, ook buiten edit-mode */
}
body.lfe-edit-mode .lfe-grip {
    /* Sinds 3.17.0: voor alle elementen gelijk, rechtsboven BUITEN het element.
     * De grip begint direct tegen de rand (geen gat), zodat de hover niet wegvalt
     * als je van het element naar de grip beweegt. */
    position: absolute;
    right: -30px;
    top: 0;
    transform: none;
    width: 30px;
    height: 28px;
    padding-left: 8px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    cursor: grab;
    opacity: 0;
    transition: opacity 0.12s;
    pointer-events: auto;
    user-select: none;
    z-index: 16;
    background: none;
}
.lfe-grip span {
    display: block;
    width: 14px;
    height: 2px;
    background: #94a3b8;
    border-radius: 2px;
    flex-shrink: 0;
}
/* Toon bij hover op het element, alleen in edit-mode */
body.lfe-edit-mode [data-lfe-uid]:hover > .lfe-grip,
body.lfe-edit-mode [data-lfe-uid]:focus-within > .lfe-grip {
    opacity: 1;
}

/* (Download- en kleurelementen hadden een eigen grip binnen het element; sinds 3.17.0 gelijk aan de rest.) */

/* Cursor op tekstelement: open handje om drag aan te geven */
body.lfe-edit-mode [data-lfe-uid] {
    cursor: grab;
}
/* Op de tekst-inhoud zelf: text cursor */
body.lfe-edit-mode [data-lfe-uid][contenteditable="true"] {
    cursor: text;
}
/* Download-box: altijd pointer cursor zodat klikbaarheid duidelijk is.
   FIX: de generieke cursor:grab overschreef cursor:pointer van de download-box-wrapper. */
body.lfe-edit-mode [data-lfe-uid][data-lfe-block-name="shortcode/download_box"] {
    cursor: pointer;
}
/* Grip altijd grab */
body.lfe-edit-mode .lfe-grip {
    cursor: grab;
}
/* Tijdens drag: grijpend handje over hele pagina */
body.lfe-dragging,
body.lfe-dragging * {
    cursor: grabbing !important;
}

/* ── Stack toolbar: alleen zichtbaar bij hover/focus binnen de stack ─────── */
[data-lfe-stack-uid]:hover .lfe-stack-toolbar,
[data-lfe-stack-uid]:focus-within .lfe-stack-toolbar {
    opacity: 1;
    pointer-events: auto;
}

/* ── Download box in edit mode ───────────────────────────────────────────── */

/* Standaard: dunne grijze border, schaduw en hover-effect weg */
body.lfe-edit-mode .download-box-wrapper .custom-download-box {
    border: 1px solid #d1d5db !important;
    box-shadow: none !important;
    transform: none !important;
    cursor: pointer;
    pointer-events: none;
}

/* Wrapper zelf klikbaar en BOVEN de gap-inserter zones (z-index 99950).
   FIX: zonder eigen z-index had de wrapper geen stacking context en werden klikken
   onderschept door de lfe-egap-zone elementen (body-children, z-index 99950).
   Door z-index: 15 toe te voegen wint de wrapper de stacking-context slag. */
body.lfe-edit-mode .download-box-wrapper {
    cursor: pointer;
    position: relative;
    z-index: 15;
}
/* Sinds 3.12.2: lege regels die WordPress in de shortcode-uitvoer zet (<p>, <br>) maakten de wrapper
   hoger dan de zichtbare box. Omdat de wrapper boven de invoegzones ligt, bedekte hij zo de ruimte
   eronder en verscheen daar geen plusje. In bewerkmodus telt alleen de box zelf. */
body.lfe-edit-mode .download-box-wrapper > :not(.custom-download-box):not(.db-overlay-backdrop):not(.lfe-grip):not(script):not(style) {
    display: none !important;
}
body.lfe-edit-mode .download-box-wrapper > .db-overlay-backdrop:not(.active) { display: none !important; }

/* Beeld-dropzone en figure: ook boven de gap-inserter zones (zelfde reden als download).
   Een lege dropzone in een nieuwe stack kan anders niet geklikt/gedropt worden doordat
   de resterende gap-zone er transparant bovenop staat (z-index 99950). */
body.lfe-edit-mode .lfe-image-dropzone[data-lfe-uid],
body.lfe-edit-mode figure[data-lfe-block-name="core/image"][data-lfe-uid],
body.lfe-edit-mode [data-lfe-block-name="lfe/color-grid"][data-lfe-uid] {
    position: relative;
    z-index: 15;
}

/* Hover of toolbar actief: blauwe dashed border */
body.lfe-edit-mode .download-box-wrapper:hover .custom-download-box,
body.lfe-edit-mode .download-box-wrapper.lfe-toolbar-active .custom-download-box {
    border: 1px dashed #93c5fd !important;
}

/* Inner links en knoppen van de download box uitzetten zodat klik altijd naar de wrapper gaat */
body.lfe-edit-mode .download-box-wrapper > a,
body.lfe-edit-mode .download-box-wrapper .custom-download-box a,
body.lfe-edit-mode .download-box-wrapper .custom-download-box button {
    pointer-events: none;
}

/* Hart- en download-icoon onzichtbaar, maar op hun plek: zo heeft de naam evenveel ruimte als na Klaar en
 * verspringt er niets (sinds 3.26.3; eerder display:none, waardoor een lange naam anders afbrak) */
body.lfe-edit-mode .download-box-wrapper .fav-heart-btn,
body.lfe-edit-mode .download-box-wrapper .download-icon {
    visibility: hidden !important;
}
body.lfe-edit-mode .download-box-wrapper .custom-download-box { position: relative; }

/* Potlood-icoon rechts (op de plek van het downloadicoon), via pseudo-element */
body.lfe-edit-mode .download-box-wrapper .custom-download-box::after {
    content: '';
    display: block;
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    background-color: #1e86ff;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7'/%3E%3Cpath d='M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z'/%3E%3C/svg%3E");
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

/* ── Insert download popup ────────────────────────────────────────────────── */
#lfe-download-popup-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
}
#lfe-download-popup {
    background: #fff;
    border-radius: 30px;
    padding: 32px 32px 28px;
    width: 360px;
    max-width: 90vw;
    display: flex;
    flex-direction: column;
    gap: 8px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
}
.lfe-download-popup-title {
    font-size: 40px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 0 35px !important;
    color: #111 !important;
}
.lfe-download-popup-label {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}
.lfe-download-popup-input {
    width: 100%;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 6px;
}
.lfe-download-popup-input:focus {
    border-color: #1e86ff;
}
.lfe-download-popup-error {
    color: #dc2626;
    font-size: 13px;
    min-height: 18px;
    margin: 0;
}
.lfe-download-popup-actions {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    margin-top: 8px;
}
.lfe-download-popup-btn {
    border-radius: 9999px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    pointer-events: auto !important;
}
.lfe-download-popup-btn--confirm {
    background: #1e86ff;
    color: #fff;
}
.lfe-download-popup-btn--cancel {
    background: #fff;
    color: #333;
    border: 1px solid #d1d5db;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  KLEURENELEMENT
 * ══════════════════════════════════════════════════════════════════════════ */

/* Grid container — flush, geen extra marge */
.lfe-color-grid {
    width: 100%;
    box-sizing: border-box;
}

.lfe-cg-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 16px;
    width: 100%;
    box-sizing: border-box;
}

/* Kaart — max 3 kolommen */
.lfe-cg-card {
    height: 140px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
    cursor: default;
    box-sizing: border-box;
    width: calc((100% - 2 * 16px) / 3);
    flex-shrink: 0;
    flex-grow: 0;
}

@media screen and (max-width: 900px) {
    .lfe-cg-card { width: calc((100% - 16px) / 2); }
}

@media screen and (max-width: 560px) {
    .lfe-cg-cards { gap: 12px; }
    .lfe-cg-card  { width: 100%; }
}

.lfe-cg-name {
    position: absolute;
    top: 12px; left: 12px;
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 700;
    font-family: sans-serif;
    pointer-events: none;
    z-index: 5;
}

.lfe-cg-hover {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.92);
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 12px;
    box-sizing: border-box;
    opacity: 0;
    transition: opacity 0.18s ease;
    z-index: 10;
}

.lfe-cg-card:hover .lfe-cg-hover { opacity: 1; }

/* In edit mode: toon hover-info niet — dan opent klik de popup */
body.lfe-edit-mode .lfe-cg-card:hover .lfe-cg-hover { opacity: 0; }

.lfe-cg-row {
    color: #fff;
    font-size: 12px;
    line-height: 1.7;
    font-weight: 500;
    cursor: pointer;
    padding: 1px 8px;
    border-radius: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-family: sans-serif;
}
.lfe-cg-row:hover { background: rgba(255,255,255,0.15); }

/* Edit badge op kaart */
.lfe-cg-edit-badge {
    position: absolute;
    bottom: 8px; right: 8px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 14px;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    pointer-events: none;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.15s;
}
body.lfe-edit-mode .lfe-cg-card:hover .lfe-cg-edit-badge { opacity: 1; }
body.lfe-edit-mode .lfe-cg-card { cursor: pointer; }

/* "+ Kleur" knop */
.lfe-cg-add-btn {
    height: 140px;
    width: calc((100% - 2 * 16px) / 3);
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s, color 0.15s;
}
.lfe-cg-add-btn:hover { border-color: #1e86ff; color: #1e86ff; }

@media screen and (max-width: 900px) {
    .lfe-cg-add-btn { width: calc((100% - 16px) / 2); }
}
@media screen and (max-width: 560px) {
    .lfe-cg-add-btn { width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════════
 *  TYPOGRAFIE-ELEMENT  (één lettertype per regel, over de hele breedte)
 * ══════════════════════════════════════════════════════════════════════════ */

.lfe-font-grid {
    width: 100%;
    box-sizing: border-box;
}

.lfe-fg-cards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.lfe-fg-card {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 22px 26px 24px;
    border-radius: 10px;
    background: #f5f5f5;
    color: #111;
    overflow: hidden;
    container-type: inline-size;
}
body.lfe-edit-mode .lfe-fg-card { cursor: pointer; }
body.lfe-edit-mode .lfe-fg-card:hover .lfe-fg-edit-badge { opacity: 1; }

.lfe-fg-kop {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin-bottom: 14px;
    font-family: sans-serif;
}
.lfe-fg-name {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
}
.lfe-fg-info {
    font-size: 12px;
    color: #6b7280;
}

.lfe-fg-voorbeeld {
    font-size: clamp(16px, 3vw, 34px);
    font-size: clamp(14px, 4.6cqi, 40px); /* 26 hoofdletters passen op één regel */
    line-height: 1.3;
    font-weight: normal;
    font-style: normal;
}
.lfe-fg-regel {
    overflow-wrap: anywhere;
}

.lfe-fg-add-btn {
    height: 90px;
    width: 100%;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.15s, color 0.15s;
}
.lfe-fg-add-btn:hover,
.lfe-fg-add-btn.is-drag { border-color: #1e86ff; color: #1e86ff; }
.lfe-fg-add-btn { flex-direction: column; gap: 4px; }
.lfe-fg-add-btn.is-drag { background: #eff6ff; }
.lfe-fg-add-btn > span { pointer-events: none; }
.lfe-fg-add-hint { font-size: 12px; font-weight: 400; color: #9ca3af; }

/* "Set downloaden" (bewerkmodus) — zelfde stijl als de Download box */
.lfe-fg-set {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 16px;
    background: #fff;
    padding: 20px 25px;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    color: #000;
    cursor: pointer;
    font-family: inherit;
    box-sizing: border-box;
}
.lfe-fg-set-tekst { display: flex; flex-direction: column; gap: 2px; }
.lfe-fg-set-label { font-size: 16px; font-weight: 500; }
.lfe-fg-set-hint  { font-size: 12px; color: #6f6f6f; }
.lfe-fg-set-check { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.lfe-fg-switch {
    position: relative;
    flex-shrink: 0;
    width: 42px; height: 24px;
    border-radius: 12px;
    background: #d1d5db;
    transition: background 0.15s;
}
.lfe-fg-switch::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    transition: transform 0.15s;
}
.lfe-fg-set-check:checked + .lfe-fg-switch { background: #1e86ff; }
.lfe-fg-set-check:checked + .lfe-fg-switch::after { transform: translateX(18px); }
.lfe-fg-set-check:focus-visible + .lfe-fg-switch { outline: 2px solid #1e86ff; outline-offset: 2px; }

/* Download box onder het element (bekijkmodus); verborgen in bewerkmodus */
.lfe-fg-download { margin-top: 16px; }
body.lfe-edit-mode .lfe-fg-download { display: none; }
.lfe-fg-dl-link {
    display: block;
    padding: 20px 25px;
    border: 1px solid #e0e0e0;
    border-radius: 15px;
    color: #000;
    text-decoration: none;
    font-weight: 500;
}

/* Popup: bestand kiezen en voorbeeld */
.lfe-fg-bestand {
    display: block;
    border: 2px dashed #cbd5e1;
    border-radius: 10px;
    padding: 14px;
    text-align: center;
    font-size: 13px;
    color: #374151;
    cursor: pointer;
    overflow-wrap: anywhere;
}
.lfe-fg-bestand:hover,
.lfe-fg-bestand.is-drag { border-color: #1e86ff; color: #1e86ff; background: #eff6ff; }
.lfe-fg-bestand small { color: #9ca3af; font-size: 12px; }

/* Lijst met toe te voegen lettertypen in het venster */
.lfe-fg-lijst {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 45vh;
    overflow-y: auto;
    margin-top: 6px;
}
.lfe-fg-lijst:empty { display: none; }
.lfe-fg-rij {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 40px 12px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
}
.lfe-fg-rij.is-fout { border-color: #fecaca; background: #fef2f2; }
.lfe-fg-rij-preview { font-size: 26px; line-height: 1.2; color: #111; }
.lfe-fg-rij.is-fout .lfe-fg-rij-preview { display: none; }
.lfe-fg-rij-status { font-size: 12px; color: #6b7280; overflow-wrap: anywhere; }
.lfe-fg-rij.is-fout .lfe-fg-rij-status { color: #dc2626; }
.lfe-fg-rij-weg {
    position: absolute;
    top: 8px; right: 8px;
    width: 26px; height: 26px;
    border: none;
    border-radius: 50%;
    background: #f3f4f6;
    color: #6b7280;
    cursor: pointer;
    font-size: 12px;
    line-height: 1;
}
.lfe-fg-rij-weg:hover { background: #fee2e2; color: #dc2626; }
.lfe-fg-bestand input[type="file"] {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
}
.lfe-fg-preview {
    font-size: 30px;
    line-height: 1.2;
    padding: 6px 0 2px;
    color: #111;
}

/* ── Kleur editor popup ─────────────────────────────────────────────────── */

#lfe-cg-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
}

#lfe-cg-popup {
    background: #fff;
    border-radius: 30px;
    padding: 32px 32px 28px;
    width: 420px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lfe-cg-popup-title {
    font-size: 40px !important;
    font-weight: 600 !important;
    line-height: 1.1 !important;
    margin: 0 !important;
    padding: 0 0 20px !important;
    color: #111 !important;
}

/* Swatch rij */
.lfe-cg-popup-swatch-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 4px;
}

.lfe-cg-popup-swatch {
    flex: 1;
    height: 56px;
    border-radius: 10px;
    border: 1px solid rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: background 0.15s;
}

/* Verberg de native color input, maar laat hem klikbaar zijn via de swatch */
.lfe-cg-popup-swatch input[type="color"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    padding: 0;
}

/* Potlood-hint rechtsonder in de swatch */
.lfe-cg-swatch-hint {
    position: absolute;
    bottom: 6px;
    right: 8px;
    font-size: 14px;
    line-height: 1;
    color: rgba(255,255,255,0.7);
    text-shadow: 0 1px 2px rgba(0,0,0,0.4);
    pointer-events: none;
    user-select: none;
}


.lfe-cg-popup-lbl {
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 2px;
}

.lfe-cg-popup-inp {
    width: 100%;
    height: 40px;
    border: 1px solid #d1d5db;
    border-radius: 10px;
    padding: 0 12px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    margin-bottom: 6px;
}
.lfe-cg-popup-inp:focus { border-color: #1e86ff; }

.lfe-cg-popup-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.lfe-cg-popup-error {
    color: #dc2626;
    font-size: 13px;
    min-height: 18px;
    margin: 0;
}

.lfe-cg-popup-actions {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
    margin-top: 8px;
    align-items: center;
}

.lfe-cg-popup-btn {
    border-radius: 9999px;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    pointer-events: auto !important;
}
.lfe-cg-popup-btn--save   { background: #1e86ff; color: #fff; }
.lfe-cg-popup-btn--cancel { background: #fff; color: #333; border: 1px solid #d1d5db; }
.lfe-cg-popup-btn--delete { background: #fee2e2; color: #dc2626; margin-right: auto; }
.lfe-cg-popup-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
 *  DUPLICATE IMAGE POPUP
 * ══════════════════════════════════════════════════════════════════════════ */

#lfe-dup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}

#lfe-dup-popup {
    background: #fff;
    border-radius: 16px;
    padding: 28px 28px 22px;
    width: 480px;
    max-width: calc(100vw - 32px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.lfe-dup-title {
    font-size: 18px;
    font-weight: 700;
    color: #111;
    margin: 0 0 6px;
}

.lfe-dup-sub {
    font-size: 13px;
    color: #666;
    margin: 0 0 20px;
    line-height: 1.5;
}

.lfe-dup-thumbs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 16px;
}

.lfe-dup-thumb-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 10px 12px;
    border-radius: 12px;
    border: 2px solid #e5e7eb;
    transition: border-color 0.15s;
}

.lfe-dup-thumb-col:has(.lfe-dup-btn--old:hover) { border-color: #6b7280; }
.lfe-dup-thumb-col:has(.lfe-dup-btn--new:hover) { border-color: #1e86ff; }

.lfe-dup-thumb-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lfe-dup-thumb-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.lfe-dup-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
}

.lfe-dup-name {
    font-size: 12px;
    color: #374151;
    text-align: center;
    word-break: break-all;
    max-width: 100%;
}

.lfe-dup-btn {
    margin-top: 4px;
    width: 100%;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: opacity 0.12s, background 0.12s;
}
.lfe-dup-btn:hover { opacity: 0.85; }

.lfe-dup-btn--old {
    background: #f3f4f6;
    color: #374151;
}
.lfe-dup-btn--old:hover { background: #e5e7eb; opacity: 1; }

.lfe-dup-btn--new {
    background: #1e86ff;
    color: #fff;
}
.lfe-dup-btn--new:hover { background: #0d6edb; opacity: 1; }

.lfe-dup-cancel {
    display: block;
    margin: 0 auto;
    background: none;
    border: none;
    font-size: 13px;
    color: #9ca3af;
    cursor: pointer;
    padding: 4px 8px;
}
.lfe-dup-cancel:hover { color: #6b7280; }

/* ══════════════════════════════════════════════════════════════════════════
 *  LEGE CONTENTEDITABLE PARAGRAAF
 *  Zorgt dat een opgeslagen lege <p> in edit mode zichtbaar en klikbaar is,
 *  zodat de cursor op de juiste plek verschijnt.
 * ══════════════════════════════════════════════════════════════════════════ */

body.lfe-edit-mode p[data-lfe-uid][contenteditable] {
    min-height: 1.2em;
    min-height: 1lh;   /* sinds 3.26.3: precies één regel (1.5em was hoger dan een regel: alles schoof 2px op) */
    display: block;
}


/* ══════════════════════════════════════════════════════════════════════════
 *  IMAGE SOURCE MENU
 * ══════════════════════════════════════════════════════════════════════════ */

.lfe-img-source-menu {
    position: absolute;
    z-index: 30;
    background: #fff;
    border: 1px solid #e4e4e7;
    box-shadow: 0 8px 24px rgba(0,0,0,.13), 0 2px 6px rgba(0,0,0,.07);
    border-radius: 12px;
    overflow: hidden;
    min-width: 230px;
}
.lfe-img-source-btn {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 16px 22px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #18181b;
    font-family: inherit;
    transition: background .1s;
    text-align: left;
}
.lfe-img-source-btn:hover { background: #f4f4f5; }
.lfe-img-source-btn + .lfe-img-source-btn { border-top: 1px solid #e4e4e7; }

/* ══════════════════════════════════════════════════════════════════════════
 *  MEDIA LIBRARY MODAL  (~50% breedte, gecentreerd)
 * ══════════════════════════════════════════════════════════════════════════ */

#lfe-library-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lfe-library-modal {
    background: #fff;
    width: 60%;
    max-width: 900px;
    min-width: 560px;
    max-height: 82vh;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22), 0 4px 16px rgba(0,0,0,.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Header */
.lfe-lib-header {
    display: flex;
    align-items: stretch;
    padding: 0 24px;
    border-bottom: 1px solid #e4e4e7;
    flex-shrink: 0;
}
.lfe-lib-close-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #18181b;
    font-family: inherit;
    padding: 16px 0;
    margin-right: 32px;
    flex-shrink: 0;
}
.lfe-lib-close-btn:hover { color: #71717a; }
.lfe-lib-tabs { display: flex; }
.lfe-lib-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #71717a;
    font-family: inherit;
    padding: 16px 0;
    margin-right: 24px;
    transition: color .15s;
}
.lfe-lib-tab.lfe-lib-tab-active { color: #18181b; border-bottom-color: #18181b; }

/* Toolbar */
.lfe-lib-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-bottom: 1px solid #e4e4e7;
    flex-shrink: 0;
}
.lfe-lib-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}
.lfe-lib-search-wrap svg { color: #71717a; flex-shrink: 0; }
.lfe-lib-search-input {
    border: none;
    outline: none;
    font-size: 15px;
    color: #18181b;
    font-family: inherit;
    background: none;
    width: 100%;
}
.lfe-lib-search-input::placeholder { color: #a1a1aa; }

/* Body */
.lfe-lib-body {
    display: flex;
    flex: 1;
    overflow: hidden;
    position: relative;
    min-height: 0;
}
.lfe-lib-grid-wrap { flex: 1; overflow-y: auto; padding: 20px; }
.lfe-lib-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.lfe-lib-empty, .lfe-lib-loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 48px 20px;
    color: #71717a;
    font-size: 14px;
}

/* Grid items */
.lfe-lib-item { position: relative; cursor: pointer; padding: 8px; }
.lfe-lib-item-inner { position: relative; background: #f4f4f5; aspect-ratio: 1; overflow: hidden; }
.lfe-lib-item-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Checkbox */
.lfe-lib-check-wrap {
    position: absolute; top: 8px; left: 8px;
    width: 22px; height: 22px; z-index: 2;
    opacity: 0; transition: opacity .1s;
}
.lfe-lib-item:hover .lfe-lib-check-wrap,
.lfe-lib-item.lfe-lib-selected .lfe-lib-check-wrap { opacity: 1; }
.lfe-lib-check {
    appearance: none; -webkit-appearance: none;
    width: 22px; height: 22px;
    border: 2px solid #fff; border-radius: 4px;
    background: rgba(255,255,255,.85);
    cursor: pointer; display: block; position: relative;
    box-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.lfe-lib-check:checked { background: #18181b; border-color: #18181b; }
.lfe-lib-check:checked::after {
    content: ''; position: absolute;
    top: 3px; left: 6px; width: 5px; height: 9px;
    border: 2px solid #fff; border-top: none; border-left: none;
    transform: rotate(45deg);
}

/* Three-dots */
.lfe-lib-dots-btn {
    position: absolute; top: 8px; right: 8px;
    width: 30px; height: 26px;
    background: rgba(255,255,255,.92); border: none; border-radius: 4px;
    cursor: pointer; font-size: 16px; font-weight: 700; color: #18181b;
    display: flex; align-items: center; justify-content: center;
    z-index: 2; opacity: 0; transition: opacity .1s;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    letter-spacing: 1px; line-height: 1; padding-bottom: 2px;
}
.lfe-lib-item:hover .lfe-lib-dots-btn { opacity: 1; }
.lfe-lib-dots-btn:hover { background: #fff; }

/* Geselecteerd */
.lfe-lib-item.lfe-lib-selected .lfe-lib-item-inner::after {
    content: ''; position: absolute; inset: 0;
    border: 3px solid #18181b; pointer-events: none; box-sizing: border-box;
}

/* Naam */
.lfe-lib-item-name {
    margin-top: 5px; font-size: 12px; color: #18181b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px;
}

/* Load more */
.lfe-lib-load-more { grid-column: 1 / -1; display: flex; justify-content: center; padding: 16px 0 8px; }
.lfe-lib-load-more-btn {
    background: none; border: 1px solid #e4e4e7; cursor: pointer;
    font-size: 13px; color: #18181b; font-family: inherit;
    padding: 7px 20px; border-radius: 9999px; font-weight: 600;
}
.lfe-lib-load-more-btn:hover { background: #f4f4f5; }

/* Footer */
.lfe-lib-footer {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 24px; border-top: 1px solid #e4e4e7;
    background: #fff; flex-shrink: 0;
}
.lfe-lib-footer-left { display: flex; align-items: center; gap: 16px; }
.lfe-lib-sel-count { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #18181b; }
.lfe-lib-footer-delete {
    background: none; border: 1px solid #fca5a5; cursor: pointer;
    font-size: 12px; font-weight: 700; letter-spacing: .04em;
    color: #ef4444; font-family: inherit;
    padding: 6px 16px; border-radius: 9999px;
    transition: background .12s, color .12s;
}
.lfe-lib-footer-delete:hover { background: #fef2f2; }
.lfe-lib-footer-add {
    background: #18181b; color: #fff; border: none; cursor: pointer;
    font-size: 13px; font-weight: 700; letter-spacing: .04em;
    font-family: inherit; padding: 10px 28px; border-radius: 9999px;
    transition: background .15s;
}
.lfe-lib-footer-add:hover { background: #3f3f46; }

/* Info panel */
.lfe-lib-info-panel {
    position: absolute; top: 0; right: 0; bottom: 0;
    width: 52%; min-width: 300px;
    background: #fff; border-left: 1px solid #e4e4e7;
    display: flex; flex-direction: column;
    overflow-y: auto; z-index: 10;
    padding: 20px 24px; box-sizing: border-box;
    animation: lfe-info-in .16s ease;
}
@keyframes lfe-info-in {
    from { transform: translateX(12px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}
.lfe-lib-info-close-btn {
    background: none; border: none; cursor: pointer;
    font-size: 12px; font-weight: 700; letter-spacing: .08em;
    text-transform: uppercase; color: #18181b;
    font-family: inherit; padding: 0; margin-bottom: 16px;
    align-self: flex-start;
}
.lfe-lib-info-close-btn:hover { color: #71717a; }
.lfe-lib-info-preview {
    width: 100%; max-height: 200px;
    object-fit: contain; background: #f4f4f5;
    display: block; margin-bottom: 20px; border-radius: 4px;
}
.lfe-lib-info-table { width: 100%; border-collapse: collapse; }
.lfe-lib-info-table td { padding: 8px 0; font-size: 14px; vertical-align: top; }
.lfe-lib-info-table td:first-child { font-weight: 700; color: #18181b; width: 100px; padding-right: 12px; }
.lfe-lib-info-table td:last-child  { color: #71717a; }

/* Bestandsnaam bewerken in info-panel */
.lfe-lib-name-wrap { display: flex; align-items: center; gap: 8px; }
.lfe-lib-name-input {
    flex: 1; border: 1px solid #e4e4e7; border-radius: 4px;
    padding: 4px 8px; font-size: 14px; font-family: inherit;
    color: #18181b; outline: none;
    background: #fafafa;
}
.lfe-lib-name-input:focus { border-color: #a1a1aa; background: #fff; }
.lfe-lib-name-save {
    background: #18181b; color: #fff; border: none; cursor: pointer;
    font-size: 12px; font-weight: 700; font-family: inherit;
    padding: 5px 14px; border-radius: 9999px; white-space: nowrap;
    transition: background .15s;
}
.lfe-lib-name-save:hover { background: #3f3f46; }
.lfe-lib-name-saved { font-size: 11px; color: #22c55e; margin-left: 4px; opacity: 0; transition: opacity .3s; }
.lfe-lib-name-saved.lfe-visible { opacity: 1; }

/* Verwijder-popup */
#lfe-del-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.45);
    z-index: 9000;
    display: flex; align-items: center; justify-content: center;
}
#lfe-del-popup {
    background: #fff; border-radius: 10px;
    box-shadow: 0 16px 48px rgba(0,0,0,.2);
    padding: 32px 36px; max-width: 380px; width: 90%;
    text-align: center;
}
.lfe-del-title {
    font-size: 17px; font-weight: 700; color: #18181b;
    margin: 0 0 10px;
}
.lfe-del-sub {
    font-size: 14px; color: #71717a; margin: 0 0 28px; line-height: 1.5;
}
.lfe-del-btns { display: flex; gap: 12px; justify-content: center; }
.lfe-del-btn {
    border: none; cursor: pointer; font-size: 14px; font-weight: 700;
    font-family: inherit; padding: 11px 28px; border-radius: 9999px;
    transition: background .15s, color .15s;
}
.lfe-del-btn-cancel { background: #f4f4f5; color: #18181b; }
.lfe-del-btn-cancel:hover { background: #e4e4e7; }
.lfe-del-btn-confirm { background: #ef4444; color: #fff; }
.lfe-del-btn-confirm:hover { background: #dc2626; }



/* ══════════════════════════════════════════════════════════════════════════
 *  INLINE TOOLBAR (Vet + Link)
 * ══════════════════════════════════════════════════════════════════════════ */

/* ── Mini-toolbar (wit, boven selectie) ── */
#lfe-inline-toolbar {
    position: absolute;
    z-index: 30;
    display: flex;
    align-items: center;
    gap: 1px;
    background: #fff;
    border: 1px solid #d4d4d8;
    border-radius: 8px;
    padding: 4px 5px;
    box-shadow: 0 4px 14px rgba(0,0,0,.13), 0 1px 3px rgba(0,0,0,.08);
    pointer-events: auto;
}
#lfe-inline-toolbar[hidden] { display: none; }

#lfe-inline-toolbar button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 32px;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: #18181b;
    cursor: pointer;
    transition: background .12s;
    padding: 0;
    flex-shrink: 0;
}
#lfe-inline-toolbar button:hover { background: #f4f4f5; }
/* Sinds 3.19.0: meer knoppen, gescheiden door een streepje; actieve knop licht op */
#lfe-inline-toolbar .lfe-itb-scheiding { width: 1px; height: 22px; background: #e4e4e7; margin: 0 4px; flex-shrink: 0; }
#lfe-inline-toolbar button.lfe-itb-aan { background: #eff6ff; color: #1e86ff; }

/* ── Gedeelde popup base ── */
#lfe-link-popup {
    position: absolute;
    z-index: 35;
    width: 340px;
    background: #fff;
    border-radius: 6px;
    border: 1px solid #e4e4e7;
    box-shadow: 0 8px 30px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);
    font-family: inherit;
    overflow: hidden;
    pointer-events: auto;
}

/* ════════════════════════════════════════════
 *  BEKIJK-POPUP
 * ════════════════════════════════════════════ */
.lfe-lp-view .lfe-lv-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px 12px;
}
.lfe-lv-icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    background: #f4f4f5;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #52525b;
}
.lfe-lv-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.lfe-lv-title {
    font-size: 14px; font-weight: 600; color: #18181b;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lfe-lv-slug {
    font-size: 12px; color: #71717a;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.lfe-lp-view .lfe-lv-actions {
    display: flex;
    align-items: center;
    padding: 8px 10px 12px;
    border-top: 1px solid #f1f5f9;
    gap: 2px;
}
.lfe-lv-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 11px;
    font-weight: 700;
    font-family: inherit;
    letter-spacing: .5px;
    text-transform: uppercase;
    color: #3f3f46;
    padding: 7px 12px;
    border-radius: 4px;
    transition: background .12s, color .12s;
}
.lfe-lv-btn:hover { background: #f4f4f5; color: #18181b; }
.lfe-lv-btn--remove { margin-left: auto; color: #ef4444; }
.lfe-lv-btn--remove:hover { background: #fff1f2; color: #dc2626; }

/* ════════════════════════════════════════════
 *  INVOER-POPUP
 * ════════════════════════════════════════════ */

/* Grijs zoekveld — geen blauwe lijn */
.lfe-le-search {
    display: flex;
    align-items: center;
    background: #f0f0f0;
    margin: 14px 14px 0;
    border-radius: 6px;
    padding: 0 12px;
}
.lfe-le-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 13px;
    color: #18181b;
    font-family: inherit;
    padding: 11px 0;
    min-width: 0;
}
.lfe-le-input::placeholder { color: #a1a1aa; }

/* Zwart kruisje, geen rondje */
.lfe-le-clear {
    background: transparent;
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #52525b;
    padding: 0 0 0 6px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    transition: color .12s;
}
.lfe-le-clear:hover { color: #18181b; }
.lfe-le-clear[hidden] { display: none; }

/* Zoekresultaten */
.lfe-le-results {
    max-height: 220px;
    overflow-y: auto;
    overscroll-behavior: contain;
    margin-top: 8px;
    border-top: 1px solid #f1f5f9;
}
.lfe-le-results[hidden] { display: none; }

.lfe-le-group {
    padding: 8px 18px 4px;
    font-size: 10px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; color: #94a3b8;
}
.lfe-le-page {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 18px;
    cursor: pointer;
    transition: background .1s;
    border-bottom: 1px solid #f8fafc;
}
.lfe-le-page:last-child { border-bottom: none; }
.lfe-le-page:hover { background: #f0f7ff; }
.lfe-le-picon { color: #a1a1aa; flex-shrink: 0; display: flex; }
.lfe-le-pinfo { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.lfe-le-ptitle { font-size: 13px; font-weight: 500; color: #18181b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfe-le-pslug  { font-size: 11px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lfe-le-noresults { padding: 14px 18px; font-size: 13px; color: #94a3b8; }

/* Nieuw tabblad toggle */
.lfe-le-newtab {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px 10px;
    border-top: 1px solid #f1f5f9;
    margin-top: 10px;
}
.lfe-le-newtab-lbl { font-size: 13px; color: #3f3f46; }

.lfe-le-toggle {
    position: relative;
    width: 40px; height: 24px;
    background: #d4d4d8;
    border: none; border-radius: 12px;
    cursor: pointer; transition: background .2s; padding: 0; flex-shrink: 0;
}
.lfe-le-toggle[aria-checked="true"] { background: #1e86ff; }
.lfe-le-knob {
    position: absolute; top: 3px; left: 3px;
    width: 18px; height: 18px;
    background: #fff; border-radius: 50%;
    transition: transform .2s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
    pointer-events: none;
}
.lfe-le-toggle[aria-checked="true"] .lfe-le-knob { transform: translateX(16px); }

/* Actieknoppen */
.lfe-le-footer {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 8px; padding: 10px 14px 14px;
}
.lfe-le-btn {
    border: none; cursor: pointer;
    font-size: 13px; font-weight: 600; font-family: inherit;
    padding: 8px 20px; border-radius: 9999px; transition: background .15s;
}
.lfe-le-btn--cancel { background: #f4f4f5; color: #3f3f46; }
.lfe-le-btn--cancel:hover { background: #e4e4e7; }
.lfe-le-btn--ok     { background: #1e86ff; color: #fff; }
.lfe-le-btn--ok:hover { background: #1a75e8; }

/* ── Stijlen in bewerkbare elementen ── */
body.lfe-edit-mode [data-lfe-uid] strong,
body.lfe-edit-mode [data-lfe-uid] b { font-weight: 700; }   /* gelijk aan de gewone pagina (zie assets.php) */
body.lfe-edit-mode [data-lfe-uid] a {
    color: #1e86ff;
    text-decoration: underline;
    text-underline-offset: 2px;
    cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  ELEMENT GAP INSERTER  (hover-balken tussen elementen in een stack)
 * ══════════════════════════════════════════════════════════════════════════ */

/* Onzichtbare hover-zone */
.lfe-egap-zone {
    position: absolute;
    z-index: 10;
    cursor: pointer;
    background: transparent;
    pointer-events: auto;
}

/* Sinds 3.13.0: zone die (bij weinig ruimte) een paar pixels in een Download box steekt */
.lfe-egap-zone.lfe-egap-zone--boven {
    z-index: 16;
}

/* Lijn + plus indicator */
#lfe-egap-indicator {
    position: absolute;
    z-index: 17;
    display: flex;
    align-items: center;
    pointer-events: auto;
    height: 24px;
    cursor: pointer;
}
#lfe-egap-indicator[hidden] { display: none !important; }
/* Tussen twee boxen naast elkaar: alleen het plusje, geen lijn (sinds 3.20.0) */
#lfe-egap-indicator.lfe-egap-indicator--naast { justify-content: center; }
#lfe-egap-indicator.lfe-egap-indicator--naast .lfe-egap-line { display: none; }

.lfe-egap-line {
    flex: 1;
    height: 2px;
    background: #1e86ff;
    opacity: 0.7;
}

.lfe-egap-plus {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    background: #1e86ff;
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(30,134,255,.40);
    transition: background .12s, transform .1s;
    padding: 0;
    pointer-events: none;   /* klik gaat naar indicator zelf */
}
#lfe-egap-indicator:hover .lfe-egap-line { opacity: 1; }
#lfe-egap-indicator:hover .lfe-egap-plus {
    background: #0070e0;
    transform: scale(1.12);
}

/* Keuzemenu (zelfde stijl als lfe-insert-menu) */
#lfe-egap-menu {
    position: absolute;
    z-index: 25;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    padding: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.13);
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 200px;
}
#lfe-egap-menu[hidden] { display: none !important; }

#lfe-egap-menu button {
    display: flex;
    align-items: center;
    gap: 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 14px;
    font-weight: 500;
    font-family: inherit;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
    transition: background .12s;
    width: 100%;
}
#lfe-egap-menu button:hover:not([disabled]) { background: #eff6ff; color: #1e86ff; }
#lfe-egap-menu button:hover:not([disabled]) .lfe-menu-icon { color: #1e86ff; }
#lfe-egap-menu button.lfe-menu-disabled { color: #9ca3af; cursor: not-allowed; }

/* ══════════════════════════════════════════════════════════════════════════
 *  INHOUDSOPGAVE IN DE BEWERKMODUS  (sinds 3.14.0; balk + slepen sinds 3.15.0, alleen desktop)
 * ══════════════════════════════════════════════════════════════════════════ */
@media (max-width:781px) { .lfe-toc-zone, .lfe-toc-indicator, .lfe-toc-regel { display: none !important; } }
.lfe-toc-zone { position: absolute; z-index: 20; cursor: pointer; background: transparent; }
.lfe-toc-indicator {
    position: absolute; z-index: 21; display: flex; align-items: center; height: 24px; cursor: pointer; gap: 0;
}
.lfe-toc-indicator[hidden] { display: none !important; }
.lfe-toc-indicator:hover .lfe-egap-line { opacity: 1; }
.lfe-toc-indicator:hover .lfe-egap-plus { background: #0070e0; transform: scale(1.12); }
body.lfe-toc-actief .lwptoc_items .lwptoc_item,
body.lfe-toc-actief .simpletoc-list > li { cursor: grab; }
body.lfe-toc-slepen, body.lfe-toc-slepen * { cursor: grabbing !important; user-select: none !important; }
/* Gesleept item: lege plek in de lijst, H3's ingeklapt (sinds 3.16.0) */
.lfe-toc-sleept { background: #f3f4f6; border-radius: 6px; box-shadow: inset 0 0 0 2px #e5e7eb; }
.lfe-toc-sleept > * { visibility: hidden; }
.lfe-toc-sleept .lwptoc_itemWrap, .lfe-toc-sleept ul, .lfe-toc-sleept ol { display: none !important; }
.lfe-toc-kloon {
    z-index: 100000; pointer-events: none; opacity: .95; background: #fff; border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,.16); padding: 8px 14px; list-style: none;
}
.lfe-toc-kloon .lwptoc_itemWrap, .lfe-toc-kloon ul, .lfe-toc-kloon ol { display: none !important; }
/* Potloodje om een sectie te hernoemen */
body.lfe-toc-actief .lwptoc_items .lwptoc_item, body.lfe-toc-actief .simpletoc-list > li { position: relative; }
body.lfe-toc-actief .lwptoc_items .lwptoc_item > a, body.lfe-toc-actief .simpletoc-list > li > a { padding-right: 64px; }
.lfe-toc-potlood {
    position: absolute; right: 30px; top: 0; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%;
    background: transparent; color: #6b7280; display: flex; align-items: center; justify-content: center;
    cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .15s, color .15s, background .15s; z-index: 23;
}
.lfe-toc-hover > .lfe-toc-potlood { opacity: 1; pointer-events: auto; }
.lfe-toc-potlood:hover { color: #1e86ff; background: #eff6ff; }
body.lfe-toc-slepen .lfe-toc-potlood, body.lfe-toc-slepen .lfe-toc-greep { display: none; }
/* Sleephendel rechts naast het potloodje */
.lfe-toc-greep {
    position: absolute; right: 0; top: 0; width: 26px; height: 30px; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; cursor: grab; opacity: 0; pointer-events: none;
    transition: opacity .15s; z-index: 23; user-select: none;
}
.lfe-toc-greep span { display: block; width: 14px; height: 2px; background: #94a3b8; border-radius: 2px; }
.lfe-toc-hover > .lfe-toc-greep { opacity: 1; pointer-events: auto; }
.lfe-toc-regel { padding: 4px 0; list-style: none; }
.lfe-toc-veld {
    display: block; min-width: 140px; min-height: 1.4em; outline: 2px solid #1e86ff; outline-offset: 3px;
    background-color: #eff6ff; border-radius: 3px; cursor: text; white-space: normal; word-break: break-word;
}
.lfe-toc-veld:empty::before { content: attr(data-placeholder); color: #9ca3af; pointer-events: none; }
.lfe-toc-veld.lfe-toc-bezig { opacity: .5; outline-style: dashed; }
.lfe-toc-hernoem { margin-right: 64px; }

/* ── Tekstbalk: zonder selectie zijn vet/cursief/link gedimd (sinds 3.21.0) ── */
#lfe-inline-toolbar button.lfe-itb-uit { opacity: .3; pointer-events: none; }

/* ══════════════════════════════════════════════════════════════════════════
 *  HARMONICA IN DE BEWERKMODUS  (sinds 3.21.0)
 * ══════════════════════════════════════════════════════════════════════════ */
.lfe-hm-bewerk .lfe-hm-item { position: relative; }
.lfe-hm-bewerk .lfe-hm-titel { cursor: text; padding-right: 140px; }
/* In de bewerkmodus is het pijltje een eigen knop (een klik op de titel is om te typen) */
.lfe-hm-bewerk .lfe-hm-titel::after { display: none; }
/* Geen streep onder de titel tijdens het bewerken (sinds 3.22.1) */
.lfe-hm-bewerk .lfe-hm-titel:focus, .lfe-hm-bewerk .lfe-hm-titel:focus-visible { text-decoration: none !important; }
.lfe-hm-klap {
    position: absolute; top: 14px; right: 0; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
    background: none; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 5;
}
.lfe-hm-klap:hover { background: #f1f5f9; }
.lfe-hm-klap::before {
    content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg); transition: transform .2s ease;
}
.lfe-hm-item[open] > .lfe-hm-titel > .lfe-hm-klap::before { transform: translateY(2px) rotate(-135deg); }
.lfe-hm-bewerk .lfe-hm-titel:focus,
.lfe-hm-bewerk .lfe-hm-inhoud:focus { outline: 2px solid #1e86ff; outline-offset: 3px; background: #eff6ff; border-radius: 3px; }
.lfe-hm-bewerk .lfe-hm-inhoud { min-height: 1.4em; cursor: text; }
.lfe-hm-bewerk .lfe-hm-inhoud:empty::before { content: attr(data-placeholder); color: #9ca3af; }
.lfe-hm-knoppen {
    position: absolute; top: 12px; right: 36px; display: flex; gap: 2px; opacity: 0; transition: opacity .15s;
    background: #fff; border: 1px solid #e5e7eb; border-radius: 8px; padding: 2px; box-shadow: 0 2px 8px rgba(0,0,0,.08); z-index: 5;
}
.lfe-hm-item:hover > .lfe-hm-titel > .lfe-hm-knoppen, .lfe-hm-item:focus-within > .lfe-hm-titel > .lfe-hm-knoppen { opacity: 1; }
.lfe-hm-knoppen button {
    width: 26px; height: 26px; border: 0; background: none; border-radius: 6px; color: #475569; cursor: pointer;
    display: flex; align-items: center; justify-content: center; padding: 0;
}
.lfe-hm-knoppen button:hover { background: #f1f5f9; color: #1e86ff; }
.lfe-hm-knoppen button[title="Regel verwijderen"]:hover { color: #dc2626; background: #fef2f2; }
.lfe-hm-plus {
    display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 6px 14px;
    border: 1px dashed #93c5fd; border-radius: 9999px; background: #fff; color: #1e86ff;
    font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.lfe-hm-plus:hover { background: #eff6ff; }
.lfe-hm-plus span { font-size: 17px; line-height: 1; }

/* ── Bewerkknop op mobiel verborgen (sinds 3.21.0) ── */
@media (max-width: 768px) {
    #lfe-toolbar, body.admin-bar #lfe-toolbar { display: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════════
 *  KOLOMMEN IN EEN SECTIE  (sinds 3.23.0)
 * ══════════════════════════════════════════════════════════════════════════ */
/* Sinds 3.26.3: geen extra ruimte in de bewerkmodus (na Klaar verschoof anders alles). Alleen een lege kolom
 * krijgt hoogte, voor "+ Element". Het kader is een outline: die neemt geen ruimte in. */
body.lfe-edit-mode .wp-block-column.lfe-kolom {
    outline: 1px dashed #cbd5e1; outline-offset: 3px; border-radius: 2px;
}
body.lfe-edit-mode .wp-block-column.lfe-kolom:has(> .lfe-kolom-leeg) { min-height: 70px; }
.lfe-kolom-leeg { display: flex; align-items: center; justify-content: center; min-height: 70px; }
.lfe-kolom-leeg button {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px dashed #93c5fd;
    border-radius: 9999px; background: #fff; color: #1e86ff; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.lfe-kolom-leeg button:hover { background: #eff6ff; }
.lfe-kolom-leeg button span { font-size: 17px; line-height: 1; }
.wp-block-column:has(> .lfe-drag-placeholder) > .lfe-kolom-leeg { display: none; }
#lfe-egap-menu button[hidden] { display: none !important; }

/* Kolommenblok als eigen element in de sectie (sinds 3.25.0): kader. */
body.lfe-edit-mode [data-lfe-block-name="lfe/kolommen"] {
    position: relative; outline: 1px dashed #93c5fd; outline-offset: 8px; border-radius: 4px; cursor: default;
}
body.lfe-edit-mode [data-lfe-block-name="lfe/kolommen"].lfe-toolbar-active { outline-color: #1e86ff; }
/* (Tabje links en hendeltje rechts van het kolommenblok: sinds 3.28.0 vervangen door het blokje rechtsonder.) */
#lfe-type-toolbar button[hidden] { display: none !important; }
.lfe-kv-uitleg { margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: #52525b; }

/* Venster: aantal kolommen en verhouding */
.lfe-kolommen-venster {
    position: absolute; z-index: 2147482000; width: 320px; background: #fff; border-radius: 14px;
    box-shadow: 0 12px 40px rgba(0,0,0,.18); padding: 20px; font-family: inherit; color: #18181b; box-sizing: border-box;
}
.lfe-kv-kop { font-size: 13px; font-weight: 600; color: #52525b; margin: 0 0 10px; }
.lfe-kv-kop2 { margin-top: 18px; padding-top: 16px; border-top: 1px solid #e4e4e7; }
.lfe-kv-aantal { display: flex; border: 1px solid #e4e4e7; border-radius: 10px; overflow: hidden; }
.lfe-kv-aantal button { flex: 1; height: 40px; border: 0; background: #f4f4f5; font: inherit; font-size: 15px; cursor: pointer; color: #18181b; }
.lfe-kv-aantal button + button { border-left: 1px solid #e4e4e7; }
.lfe-kv-aantal button.lfe-kv-aan { background: #fff; box-shadow: inset 0 0 0 2px #18181b; border-radius: 8px; font-weight: 600; }
.lfe-kv-ratios { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lfe-kv-ratios button {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid #e4e4e7;
    border-radius: 10px; background: #fafafa; cursor: pointer; font: inherit;
}
.lfe-kv-ratios button.lfe-kv-aan { border-color: #18181b; background: #fff; box-shadow: 0 0 0 1px #18181b; }
.lfe-kv-voorbeeld { display: flex; gap: 4px; width: 100%; height: 34px; }
.lfe-kv-voorbeeld span { border: 1.5px solid #3f3f46; border-radius: 3px; background: #fff; }
.lfe-kv-label { font-size: 12px; font-weight: 600; color: #52525b; letter-spacing: .04em; }
.lfe-kv-omdraaien { width: 100%; margin-top: 10px; height: 38px; border: 0; border-radius: 8px; background: #f4f4f5; font: inherit; font-size: 14px; cursor: pointer; }
.lfe-kv-omdraaien:hover { background: #e4e4e7; }
.lfe-kv-acties { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; padding-top: 16px; border-top: 1px solid #e4e4e7; }
.lfe-kv-acties button { height: 38px; padding: 0 18px; border: 0; border-radius: 9999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lfe-kv-annuleer { background: #f4f4f5; color: #3f3f46; }
.lfe-kv-klaar { background: #18181b; color: #fff; }

/* ── Mijn Mediabank: tab "Niet in gebruik" (sinds 3.26.1) ── */
.lfe-lib-alles { font: inherit; font-size: 14px; padding: 8px 16px; border: 1px solid #e4e4e7; border-radius: 9999px; background: #fff; cursor: pointer; }
.lfe-lib-alles:hover { background: #f4f4f5; }
.lfe-lib-alles[hidden] { display: none; }

/* Reden van een mislukte upload in het beeldelement (sinds 3.26.2) */
.lfe-dropzone-fout { margin: 10px 16px 0; font-size: 13px; line-height: 1.45; color: #b91c1c; text-align: center; }

/* ── Tijdens slepen geen plus-knoppen (sinds 3.27.2) ──
 * Blauwe balk tussen elementen en tussen secties, hun menu's en "+ Element" bij een sectie. Ook hun (onzichtbare)
 * aanwijs-zones gaan uit, zodat ze tijdens het slepen niet kunnen verschijnen. Na het loslaten komen ze terug. */
body.lfe-dragging #lfe-egap-indicator, body.lfe-toc-slepen #lfe-egap-indicator,
body.lfe-dragging #lfe-egap-menu, body.lfe-toc-slepen #lfe-egap-menu,
body.lfe-dragging .lfe-egap-zone, body.lfe-toc-slepen .lfe-egap-zone,
body.lfe-dragging #lfe-stack-gap-indicator, body.lfe-toc-slepen #lfe-stack-gap-indicator,
body.lfe-dragging .lfe-stack-gap-zone, body.lfe-toc-slepen .lfe-stack-gap-zone,
body.lfe-dragging #lfe-insert-btn, body.lfe-toc-slepen #lfe-insert-btn,
body.lfe-dragging #lfe-insert-menu, body.lfe-toc-slepen #lfe-insert-menu,
body.lfe-net-gesleept #lfe-egap-indicator, body.lfe-net-gesleept #lfe-egap-menu,
body.lfe-net-gesleept #lfe-stack-gap-indicator, body.lfe-net-gesleept #lfe-insert-btn, body.lfe-net-gesleept #lfe-insert-menu {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
 *  BLOKJE VAN HET KOLOMMENBLOK  (sinds 3.28.0)
 *  Rechtsonder op het kader; zichtbaar zodra je ergens boven het kolommenblok bent (ook boven een element
 *  in een kolom). Met instellen, verslepen, omhoog, omlaag, dupliceren en verwijderen.
 * ══════════════════════════════════════════════════════════════════════════ */
.lfe-kolommen-balk { display: none; }
body.lfe-edit-mode [data-lfe-block-name="lfe/kolommen"] > .lfe-kolommen-balk {
    position: absolute; right: -8px; bottom: -26px; z-index: 22;
    display: flex; align-items: center; gap: 1px; padding: 3px 4px;
    opacity: 0; pointer-events: none; transition: opacity .12s; user-select: none;
}
body.lfe-edit-mode [data-lfe-block-name="lfe/kolommen"].lfe-kb-aan > .lfe-kolommen-balk,
body.lfe-edit-mode .lfe-kolommen-balk:hover { opacity: 1; pointer-events: auto; }
body.lfe-edit-mode [data-lfe-block-name="lfe/kolommen"].lfe-kb-aan { outline-color: #1e86ff; }
body.lfe-dragging .lfe-kolommen-balk { display: none !important; }
.lfe-kolommen-balk .lfe-kb-label { font-size: 11px; font-weight: 600; letter-spacing: .02em; padding: 0 6px 0 5px; opacity: .75; }
.lfe-kolommen-balk button {
    width: 28px; height: 28px; padding: 0; border: 0; border-radius: 5px; background: transparent; color: inherit;
    display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.lfe-kolommen-balk button svg { display: block; }
.lfe-kolommen-balk button:disabled { opacity: .3; cursor: default; }
/* Het hendeltje zit in het blokje (niet meer los rechts naast het kader) */
body.lfe-edit-mode .lfe-kolommen-balk > .lfe-grip.lfe-kb-grip {
    position: static; opacity: 1; width: 28px; height: 28px; padding: 0; gap: 3px; border-radius: 5px;
}
.lfe-kolommen-balk > .lfe-kb-grip span { width: 12px; }

/* ══════════════════════════════════════════════════════════════════════════
 *  DONKERE BEWERKBLOKJES  (sinds 3.28.0)
 *  Alle blokjes van de editor: donkergrijs met witte iconen. De actieve keuze (P/H3) blijft blauw.
 * ══════════════════════════════════════════════════════════════════════════ */
#lfe-type-toolbar, .lfe-stack-toolbar, #lfe-inline-toolbar, body.lfe-edit-mode .lfe-kolommen-balk {
    background: #27272a; border: 1px solid #3f3f46; color: #fff;
    box-shadow: 0 4px 14px rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.15);
}
#lfe-type-toolbar, body.lfe-edit-mode .lfe-kolommen-balk { border-radius: 8px; }
#lfe-type-toolbar button, .lfe-stack-toolbar button, #lfe-inline-toolbar button { color: #fff; }
#lfe-type-toolbar button:hover, .lfe-stack-toolbar button:hover:not(:disabled):not(.lfe-stack-btn-inactive),
#lfe-inline-toolbar button:hover, .lfe-kolommen-balk button:hover:not(:disabled),
body.lfe-edit-mode .lfe-kolommen-balk > .lfe-kb-grip:hover { background: #3f3f46; color: #fff; }
#lfe-type-toolbar button.lfe-active { background: #1e86ff; color: #fff; }
#lfe-type-toolbar button.lfe-inactive, #lfe-type-toolbar button:disabled { color: #fff; opacity: .3; }
#lfe-el-btn-up, #lfe-el-btn-down { opacity: 1; }
#lfe-type-toolbar #lfe-delete-btn, .lfe-stack-btn-delete { color: #fff !important; }
#lfe-type-toolbar #lfe-delete-btn:hover, .lfe-stack-btn-delete:hover, .lfe-kolommen-balk [data-kb="delete"]:hover { background: #dc2626 !important; color: #fff !important; }
#lfe-inline-toolbar .lfe-itb-scheiding { background: #52525b; }
#lfe-inline-toolbar button.lfe-itb-aan { background: #1e86ff; color: #fff; }
.lfe-kolommen-balk > .lfe-kb-grip span { background: #fff; }
#lfe-type-toolbar #lfe-el-btn-naar-kolommen, #lfe-type-toolbar [data-action] { display: flex; align-items: center; }
#lfe-type-toolbar button[hidden] { display: none !important; }
#lfe-type-toolbar #lfe-el-btn-up, #lfe-type-toolbar #lfe-delete-btn { border-left-color: #52525b; }

/* ── Element vastpakken door even vast te houden (sinds 3.29.0) ── */
body.lfe-vastpakken, body.lfe-vastpakken * { cursor: grabbing !important; user-select: none !important; }
body.lfe-edit-mode [data-lfe-uid].lfe-vastgepakt {
    outline: 2px solid #1e86ff !important; outline-offset: 3px; background-color: #eff6ff;
    box-shadow: 0 6px 18px rgba(30,134,255,.22); transition: box-shadow .15s;
}
/* Niet-tekst elementen zijn overal vast te pakken */
body.lfe-edit-mode figure[data-lfe-uid], body.lfe-edit-mode [data-lfe-block-name="lfe/kolommen"] { cursor: grab; }

/* ══════════════════════════════════════════════════════════════════════════
 *  MINDER BLOKJES TEGELIJK  (sinds 3.29.1)
 *  - Sectieblokje: niet als je boven een element (of kolommenblok) bent, en niet terwijl je in een
 *    element typt. Wel boven de sectie zelf (randen, witruimte) en de sectietitel.
 *  - Kolommenblokje: niet als je boven een element in een kolom bent; wel boven de kolom zelf. Onderin elke
 *    kolom is daarvoor 20px extra ruimte (alleen in de bewerkmodus).
 * ══════════════════════════════════════════════════════════════════════════ */
body.lfe-edit-mode [data-lfe-stack-uid]:has([data-lfe-uid]:not([data-lfe-stack-h2="true"]):hover) .lfe-stack-toolbar,
body.lfe-edit-mode [data-lfe-stack-uid]:has([data-lfe-uid]:not([data-lfe-stack-h2="true"]):focus) .lfe-stack-toolbar,
body.lfe-edit-mode [data-lfe-stack-uid]:has([data-lfe-uid]:not([data-lfe-stack-h2="true"]) [contenteditable="true"]:focus) .lfe-stack-toolbar,
body.lfe-dragging .lfe-stack-toolbar {
    opacity: 0 !important; pointer-events: none !important;
}
/* Kolommenblokje: zichtbaar via de klasse lfe-kb-aan (kolommen.js), niet boven een element in een kolom */
body.lfe-edit-mode .wp-block-column.lfe-kolom { padding-bottom: 20px; }

/* ══════════════════════════════════════════════════════════════════════════
 *  PAGINA'S IN DE HOOFDNAVIGATIE  (sinds 3.30.0)
 * ══════════════════════════════════════════════════════════════════════════ */
body.lfe-edit-mode .lfe-pg-li { position: relative; }
.lfe-pg-knop {
    /* Sinds 3.31.3 rechts naast de menunaam, verticaal in het midden. De knop is breder dan het rondje en sluit
     * direct aan op de link, zodat je er zonder "gat" naartoe kunt (anders verdween hij onderweg). */
    position: absolute; left: 100%; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 32px; height: 30px; padding: 0 0 0 2px; margin: 0; border: 0; background: transparent;
    display: flex; align-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.lfe-pg-rond {
    /* Zelfde uiterlijk als het potloodje in de inhoudsopgave (.lfe-toc-potlood): grijs, bij aanwijzen blauw */
    width: 30px; height: 30px; border-radius: 50%; background: transparent; color: #6b7280;
    display: flex; align-items: center; justify-content: center; transition: color .15s, background .15s;
}
.lfe-pg-li:hover > .lfe-pg-knop, .lfe-pg-knop:focus-visible { opacity: 1; pointer-events: auto; }
.lfe-pg-knop:hover .lfe-pg-rond { color: #1e86ff; background: #eff6ff; }
.lfe-pg-plus-li { list-style: none; display: flex; align-items: center; }
.lfe-pg-plus {
    /* Sinds 3.31.3 een blauwe pil met "+ pagina" */
    height: 30px; padding: 0 14px 0 11px; border: 0; border-radius: 9999px; background: #1e86ff; color: #fff;
    font: 600 14px/1 system-ui, -apple-system, sans-serif; letter-spacing: 0; white-space: nowrap;
    display: inline-flex; align-items: center; gap: 5px; cursor: pointer; box-shadow: 0 2px 6px rgba(30,134,255,.35);
}
.lfe-pg-plus span { font-size: 17px; font-weight: 500; line-height: 1; }
.lfe-pg-plus:hover { background: #1670d8; }

#lfe-pg-overlay {
    position: fixed; inset: 0; z-index: 2147482000; background: rgba(0,0,0,.45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.lfe-pg-kaart {
    width: 420px; max-width: 100%; background: #fff; border-radius: 14px; padding: 24px 24px 20px;
    box-shadow: 0 12px 40px rgba(0,0,0,.2); font-family: inherit; color: #18181b; box-sizing: border-box; text-align: left;
}
.lfe-pg-kop { margin: 0 0 18px !important; font-size: 19px !important; font-weight: 600; line-height: 1.3; border: 0 !important; padding: 0 !important; }
.lfe-pg-label { display: block; font-size: 13px; font-weight: 600; color: #52525b; margin: 14px 0 8px; }
.lfe-pg-invoer {
    width: 100%; box-sizing: border-box; height: 42px; padding: 0 12px; border: 1px solid #d4d4d8; border-radius: 9px;
    font: inherit; font-size: 15px; color: #18181b; background: #fff;
}
.lfe-pg-invoer:focus { outline: none; border-color: #1e86ff; box-shadow: 0 0 0 3px rgba(30,134,255,.15); }
.lfe-pg-hint { margin: 8px 0 0 !important; font-size: 12.5px; line-height: 1.45; color: #71717a; }
.lfe-pg-rollen { display: flex; flex-wrap: wrap; gap: 8px; }
.lfe-pg-rol {
    display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border: 1px solid #e4e4e7; border-radius: 9999px;
    font-size: 14px; cursor: pointer; user-select: none; background: #fafafa;
}
.lfe-pg-rol:has(input:checked) { border-color: #1e86ff; background: #eff6ff; }
.lfe-pg-rol input { margin: 0; accent-color: #1e86ff; }
.lfe-pg-acties { display: flex; align-items: center; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid #e4e4e7; }
.lfe-pg-acties[hidden] { display: none; }
.lfe-pg-ruimte { flex: 1; }
.lfe-pg-acties button { height: 38px; padding: 0 18px; border: 0; border-radius: 9999px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.lfe-pg-annuleer, .lfe-pg-terug { background: #f4f4f5; color: #3f3f46; }
.lfe-pg-ok { background: #18181b; color: #fff; }
.lfe-pg-verwijder { background: transparent; color: #dc2626; padding: 0 10px !important; }
.lfe-pg-verwijder:hover { background: #fef2f2; }
.lfe-pg-ja { background: #dc2626; color: #fff; }
.lfe-pg-acties button:disabled { opacity: .6; cursor: default; }
.lfe-pg-vast { font-size: 12.5px; color: #71717a; }
.lfe-pg-bevestig p { margin: 18px 0 0 !important; font-size: 14px; line-height: 1.5; color: #3f3f46; }
.lfe-pg-bevestig[hidden] { display: none; }

/* ── Menu-items verslepen (sinds 3.32.0) ── */
body.lfe-edit-mode .lfe-pg-sleepbaar > a { cursor: grab; }
.lfe-pg-greep {
    position: absolute; right: 100%; top: 50%; transform: translateY(-50%); z-index: 5;
    width: 24px; height: 26px; padding-right: 6px; box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    cursor: grab; opacity: 0; pointer-events: none; transition: opacity .12s;
}
.lfe-pg-greep span { display: block; width: 14px; height: 2px; border-radius: 2px; background: #94a3b8; }
.lfe-pg-sleepbaar:hover > .lfe-pg-greep { opacity: 1; pointer-events: auto; }
body.lfe-pg-slepen, body.lfe-pg-slepen * { cursor: grabbing !important; user-select: none !important; }
body.lfe-pg-slepen .lfe-pg-knop, body.lfe-pg-slepen .lfe-pg-greep { display: none !important; }
.lfe-pg-vak { list-style: none; box-sizing: border-box; border: 2px dashed #cbd5e1; border-radius: 8px; background: #f1f5f9; flex: none; }
.lfe-pg-kloon {
    list-style: none; z-index: 2147482500; pointer-events: none; display: flex; align-items: center;
    padding: 0; justify-content: center; box-sizing: border-box; background: #fff; border-radius: 8px; opacity: .92;
    box-shadow: 0 4px 16px rgba(0,0,0,.18);
}
.lfe-pg-kloon a { pointer-events: none; text-decoration: none; }

/* Twee kolommenblokken direct onder elkaar (sinds 3.32.4): in de bewerkmodus 10px extra (op de pagina 20px, zie
 * ajax-kolommen.php). De bewerkmodus heeft onderin elke kolom al 20px extra ruimte voor het kolommenblokje. */
body.lfe-edit-mode .wp-block-columns.lfe-kolommen + .wp-block-columns.lfe-kolommen { margin-top: 10px !important; }

/* "+ Element" in een lege kolom verticaal in het midden (sinds 3.32.6). De 20px extra onderin elke kolom (voor het
 * kolommenblokje) zat bij een lege kolom onder het vak, waardoor de knop te hoog stond. Nu hoort die ruimte bij het vak. */
/* Sinds 3.32.7: 15px boven en onder de knop */
body.lfe-edit-mode .wp-block-column.lfe-kolom:has(> .lfe-kolom-leeg) { padding-bottom: 0; min-height: 0; }
body.lfe-edit-mode .wp-block-column.lfe-kolom > .lfe-kolom-leeg { min-height: 0; padding: 15px 0; box-sizing: border-box; }

/* ── Tijdens het slepen geen hover-standen (sinds 3.32.13) ──
 * Geen hendeltjes, geen "Wijzigen" op een beeld en geen andere aanwijs-effecten van de elementen waar je overheen
 * sleept. De muis "ziet" de pagina tijdens het slepen niet (het slepen zelf rekent met posities, niet met hover). */
body.lfe-dragging [data-lfe-stack-uid],
body.lfe-dragging [data-lfe-stack-uid] * { pointer-events: none !important; }
body.lfe-dragging .lfe-grip,
body.lfe-dragging .lfe-img-hover-overlay,
body.lfe-dragging .lfe-cg-edit-badge,
body.lfe-dragging .lfe-fg-edit-badge,
body.lfe-dragging .lfe-hm-knoppen,
body.lfe-dragging .lfe-kolommen-balk { opacity: 0 !important; visibility: hidden !important; }

/* Tijdens het verslepen van menu-items geen hover-streep of andere aanwijs-effecten in de navigatie (sinds 3.32.14) */
body.lfe-pg-slepen .wp-block-navigation,
body.lfe-pg-slepen .wp-block-navigation * { pointer-events: none !important; }
body.lfe-pg-slepen .wp-block-navigation a:not([aria-current])::after,
.lfe-pg-kloon a::after { width: 0 !important; }