/* ─────────────────────────────────────────────────────────────────────────────
   Lottie Animation — bkbg-lt-
   ───────────────────────────────────────────────────────────────────────────── */

.bkbg-lt-outer {
    display: flex;
    width: 100%;
}

/* Alignment */
.bkbg-lt-align-center { justify-content: center; }
.bkbg-lt-align-left   { justify-content: flex-start; }
.bkbg-lt-align-right  { justify-content: flex-end; }

/* align* support from block supports */
.bkbg-lt-outer.alignfull,
.bkbg-lt-outer.alignwide { width: 100%; }

/* ── Wrap ─────────────────────────────────────────────────────────────────── */
.bkbg-lt-wrap {
    overflow: hidden;
    box-sizing: border-box;
    position: relative;
}

/* ── Player (Lottie renders here) ─────────────────────────────────────────── */
.bkbg-lt-player {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── Editor placeholder ───────────────────────────────────────────────────── */
.bkbg-lt-editor-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px;
    text-align: center;
    min-height: 120px;
}

.bkbg-lt-editor-preview.bkbg-lt-empty {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    background: #f9fafb;
    width: 100%;
}

/* ── Cursor hint for click trigger ───────────────────────────────────────── */
.bkbg-lt-outer[data-trigger="click"] .bkbg-lt-wrap {
    cursor: pointer;
}

.bkbg-lt-outer[data-trigger="hover"] .bkbg-lt-wrap {
    cursor: default;
}