/**
 * Luxee WidgetKit — Global Sticky Extension CSS
 *
 * Menggunakan CSS Variables yang diinjeksi via JavaScript:
 * --lxwdk-sticky-zindex : z-index saat sticky aktif
 * --lxwdk-sticky-offset : jarak dari tepi layar (px)
 *
 * Semua style dikendalikan oleh class `.lxwdk-is-sticky`
 * yang ditambahkan/dihapus oleh JS engine.
 *
 * TIDAK menggunakan wrapper div tambahan.
 */

/* ─── Base State (sebelum sticky aktif) ─────────────────────────────────── */

[data-lxwdk-sticky="true"] {
    transition: box-shadow 0.25s ease, transform 0.15s ease;
    /* Fallback CSS variables */
    --lxwdk-sticky-zindex: 999;
    --lxwdk-sticky-offset: 0px;
}

/* ─── Sentinel (invisible anchor point) ─────────────────────────────────── */

.lxwdk-sticky-sentinel,
.lxwdk-sticky-spacer {
    display: block;
    width: 100%;
}

/* ─── Sticky Active State ────────────────────────────────────────────────── */

[data-lxwdk-sticky="true"].lxwdk-is-sticky {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: var(--lxwdk-sticky-zindex, 999) !important;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.12);
    /* Sedikit shadow untuk visual feedback */
    margin: 0 !important;
}

/* ─── Position: Top ──────────────────────────────────────────────────────── */

[data-lxwdk-sticky="true"][data-position="top"].lxwdk-is-sticky {
    top: var(--lxwdk-sticky-offset, var(--lxwdk-js-offset, 0px)) !important;
    bottom: auto !important;
}

/* ─── Position: Bottom ───────────────────────────────────────────────────── */

[data-lxwdk-sticky="true"][data-position="bottom"].lxwdk-is-sticky {
    bottom: var(--lxwdk-sticky-offset, var(--lxwdk-js-offset, 0px)) !important;
    top: auto !important;
}

/* ─── iOS Safe Area (env() — hanya support di browser modern) ─────────────── */

@supports (padding-bottom: env(safe-area-inset-bottom)) {
    [data-lxwdk-sticky="true"][data-position="bottom"][data-safe-area="true"].lxwdk-is-sticky {
        /* Tambah padding bottom untuk home indicator iPhone */
        padding-bottom: calc(var(--lxwdk-sticky-offset, var(--lxwdk-js-offset, 0px)) + env(safe-area-inset-bottom)) !important;
        bottom: 0 !important;
        /* reset ke 0, padding yang handle jarak */
    }
}

/* ─── Animasi masuk saat sticky aktif ────────────────────────────────────── */

[data-lxwdk-sticky="true"][data-position="top"].lxwdk-is-sticky {
    animation: lxwdkStickySlideDown 0.2s ease forwards;
}

[data-lxwdk-sticky="true"][data-position="bottom"].lxwdk-is-sticky {
    animation: lxwdkStickySlideUp 0.2s ease forwards;
}

@keyframes lxwdkStickySlideDown {
    from {
        transform: translateY(-8px);
        opacity: 0.85;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes lxwdkStickySlideUp {
    from {
        transform: translateY(8px);
        opacity: 0.85;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ══════════════════════════════════════════════════════════════════════════
   EDITOR NOTE:
   Tidak ada override di sini! position:fixed bekerja di dalam iframe Elementor
   sama persis dengan WeddingPress dan Elementor Pro — relative to iframe viewport.
   Badge di-inject JS sebagai elemen terpisah SETELAH elemen sticky.
   ══════════════════════════════════════════════════════════════════════════ */

/* ─── Editor Live Preview via prefix_class ────────────────────────────────
   prefix_class='lxwdk-sticky--' ditambahkan Elementor langsung ke wrapper
   TANPA page reload, sehingga preview WYSIWYG bekerja seperti WeddingPress.
   Ini hanya aktif di editor (bukan frontend yang pakai .lxwdk-is-sticky).
   ───────────────────────────────────────────────────────────────────────── */

/* Ketika sticky diaktifkan di editor: posisikan elemen secara fixed */
.elementor-editor-active .lxwdk-sticky--yes {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    z-index: 998 !important;
    margin: 0 !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.15) !important;
    outline: 2px dashed rgba(155, 89, 182, 0.7) !important;
    outline-offset: -2px !important;
}

/* Position: Top */
.elementor-editor-active .lxwdk-sticky--yes.lxwdk-sticky-pos--top {
    top: var(--lxwdk-sticky-offset, var(--lxwdk-js-offset, 0px)) !important;
    bottom: auto !important;
}

/* Position: Bottom */
.elementor-editor-active .lxwdk-sticky--yes.lxwdk-sticky-pos--bottom {
    bottom: var(--lxwdk-sticky-offset, var(--lxwdk-js-offset, 0px)) !important;
    top: auto !important;
}

/* Fallback: jika lxwdk-sticky-pos-- belum diset, default ke top */
.elementor-editor-active .lxwdk-sticky--yes:not([class*="lxwdk-sticky-pos--"]) {
    top: var(--lxwdk-sticky-offset, var(--lxwdk-js-offset, 0px)) !important;
    bottom: auto !important;
}

/* ── WYSIWYG Responsive Disable ──
   Matikan CSS "fixed" jika editor mode tidak memiliki relasi lxwdk-view-* 
   (Artinya device dihapus dari control 'Sticky On' oleh user)
*/
.elementor-editor-active body.elementor-device-desktop .lxwdk-sticky--yes:not(.lxwdk-view-desktop),
.elementor-editor-active body.elementor-device-tablet .lxwdk-sticky--yes:not(.lxwdk-view-tablet),
.elementor-editor-active body.elementor-device-mobile .lxwdk-sticky--yes:not(.lxwdk-view-mobile) {
    position: relative !important;
    outline: none !important;
    box-shadow: none !important;
    /* hapus style sticky fallback supaya preview tetap natural saat inaktif */
}



/* ─── Badge (injeksi via JS, position:fixed mengikuti elemen sticky) ──────── */

.lxwdk-sticky-badge {
    position: fixed !important;
    /* ikut elemen yang fixed */
    z-index: 100000 !important;
    pointer-events: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    padding: 3px 8px;
    display: flex;
    align-items: center;
    gap: 4px;
    letter-spacing: 0.4px;
    color: #fff;
    opacity: 0.92;
}

.lxwdk-sticky-badge--top {
    /* Muncul di atas elemen top-sticky */
    bottom: auto;
    background: linear-gradient(135deg, rgba(142, 68, 173, 0.9), rgba(108, 52, 131, 0.9));
    border-radius: 0 0 5px 5px;
}

.lxwdk-sticky-badge--bottom {
    /* Muncul di bawah elemen bottom-sticky */
    top: auto;
    background: linear-gradient(135deg, rgba(26, 107, 191, 0.9), rgba(21, 79, 140, 0.9));
    border-radius: 5px 5px 0 0;
}

@keyframes lxwdkBadgePop {
    from {
        opacity: 0;
        transform: scaleY(0.6);
    }

    to {
        opacity: 0.92;
        transform: scaleY(1);
    }
}

/* ─── Preview Bar di tepi canvas editor ──────────────────────────────────── */

.lxwdk-editor-preview-bar {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 99998;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.95);
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.lxwdk-editor-preview-bar--top {
    top: 0;
    padding: 5px 16px;
    background: linear-gradient(to right, rgba(142, 68, 173, 0.9), rgba(108, 52, 131, 0.9));
    border-bottom: 2px solid rgba(155, 89, 182, 0.7);
    backdrop-filter: blur(4px);
}

.lxwdk-editor-preview-bar--bottom {
    bottom: 0;
    padding: 5px 16px;
    background: linear-gradient(to right, rgba(26, 107, 191, 0.9), rgba(21, 79, 140, 0.9));
    border-top: 2px solid rgba(52, 152, 219, 0.7);
    backdrop-filter: blur(4px);
}

.lxwdk-editor-preview-bar__dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    animation: lxwdkDotPulse 1.5s ease-in-out infinite;
}

@keyframes lxwdkDotPulse {

    0%,
    100% {
        opacity: 0.5;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.4);
    }
}