/* 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; }

@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;
    box-shadow: 0 2px 8px rgba(30,134,255,0.35);
    transition: background 0.2s, box-shadow 0.2s, transform 0.1s, width 0.3s ease, padding 0.3s ease;
    letter-spacing: 0.03em;
    line-height: 1.4;
    overflow: hidden;
    white-space: nowrap;

    /* Collapsed state: just the icon */
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lfe-toggle-btn:hover {
    background: #0070e0;
    box-shadow: 0 3px 12px rgba(30,134,255,0.45);
    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: 18px;
    height: 18px;
    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 2px 8px rgba(22,163,74,0.35);
    width: auto;
    padding: 9px 24px;
}
#lfe-toggle-btn.lfe-active:hover {
    background: #15803d;
    box-shadow: 0 3px 12px rgba(22,163,74,0.45);
    width: auto;
    padding: 9px 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: 9000;
    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: 9000;
    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. */
body.lfe-edit-mode [data-lfe-uid]:not([data-lfe-block-name="core/image"]):not([data-lfe-block-name="lfe/color-grid"]):not([data-lfe-block-name="shortcode/download_box"]) {
    padding-right: 32px !important;
}
.lfe-grip {
    display: none; /* standaard verborgen, ook buiten edit-mode */
}
body.lfe-edit-mode .lfe-grip {
    position: absolute;
    right: 4px;    /* BINNEN de padding-ruimte (padding-right:32px), nooit buiten border-box.
                    * Was: right:-22px (buiten) → geclipt door overflow:hidden van parent/stack.
                    * Nu: 4px van rechts → altijd klikbaar ongeacht overflow op parent. */
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 32px;
    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: 2;
}
.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;
}

/* Grip voor download en kleur-elementen: rechtsboven BINNEN het element.
   Download/color hebben geen padding-right, dus de grip moet expliciet
   rechtsonder of rechtsboven zitten waar het element ruimte heeft. */
body.lfe-edit-mode [data-lfe-uid][data-lfe-block-name="shortcode/download_box"] > .lfe-grip,
body.lfe-edit-mode [data-lfe-uid][data-lfe-block-name="lfe/color-grid"] > .lfe-grip {
    right: 8px;
    top: 8px;
    transform: none;
    background: rgba(255,255,255,0.9);
    border-radius: 4px;
    padding: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* 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;
}

/* 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 verbergen */
body.lfe-edit-mode .download-box-wrapper .fav-heart-btn,
body.lfe-edit-mode .download-box-wrapper .download-icon {
    display: none !important;
}

/* Potlood-icoon rechts via pseudo-element */
body.lfe-edit-mode .download-box-wrapper .custom-download-box::after {
    content: '';
    display: block;
    width: 18px;
    height: 18px;
    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%; }
}

/* ── 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.5em;
    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; }
#lfe-inline-toolbar button + button {
    border-left: 1px solid #e4e4e7;
    border-radius: 0 5px 5px 0;
    margin-left: 2px;
    padding-left: 2px;
}
#lfe-inline-toolbar #lfe-itb-bold { border-radius: 5px 0 0 5px; }

/* ── 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: 900; }
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;
}

/* Lijn + plus indicator */
#lfe-egap-indicator {
    position: absolute;
    z-index: 15;
    display: flex;
    align-items: center;
    pointer-events: auto;
    height: 24px;
    cursor: pointer;
}
#lfe-egap-indicator[hidden] { display: none !important; }

.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; }