/* =============================================================================
   PEA STICKY SECTION
   ============================================================================= */

/* ── Active sticky state ──────────────────────────────────────────────────── */

.pea-is-sticky {
    position:   fixed !important;
    z-index:    9999  !important; /* fallback — JS overrides with cfg.zIndex */
    will-change: transform;       /* JS removes this when un-sticky */
}

/* ── Smooth transitions while sticky ─────────────────────────────────────── */

.pea-sticky-element {
    transition-property:        background-color, box-shadow, padding, top;
    transition-timing-function: ease;
    /* transition-duration is set inline by JS from user settings */
}

/* ── Hide-on-scroll-down state ────────────────────────────────────────────── */

.pea-is-sticky.pea-sticky-hidden {
    /* top is set inline by JS — this just ensures the transition fires */
    transition: top 300ms ease !important;
}

/* ── Placeholder ──────────────────────────────────────────────────────────── */
/*
   Invisible block that reserves vertical space so layout
   does not jump when the element lifts out of document flow.
*/
.pea-sticky-placeholder {
    display:        none;
    pointer-events: none;
    visibility:     hidden;
}

/* ── Column sticky mode ───────────────────────────────────────────────────── */
/*
   JS adds .pea-sticky-column and sets position:sticky inline.
   align-self:flex-start is required for sticky to work inside a flex parent.
*/
.pea-sticky-element.pea-sticky-column {
    align-self: flex-start;
}

/* ── Entrance animations ──────────────────────────────────────────────────── */

@keyframes pea-sticky-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pea-sticky-anim-fade {
    animation-name:           pea-sticky-fade;
    animation-fill-mode:      both;
    animation-timing-function: ease;
}

@keyframes pea-sticky-slide-down {
    from { transform: translateY(-100%); opacity: 0.6; }
    to   { transform: translateY(0);     opacity: 1;   }
}

.pea-sticky-anim-slide-down {
    animation-name:           pea-sticky-slide-down;
    animation-fill-mode:      both;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes pea-sticky-slide-up {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0);    opacity: 1;   }
}

.pea-sticky-anim-slide-up {
    animation-name:           pea-sticky-slide-up;
    animation-fill-mode:      both;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Elementor editor — visual indicator ──────────────────────────────────── */
/*
   Shows a pin icon in the element overlay so the editor
   knows sticky is enabled on that element.
*/
.elementor-editor-active
    .pea-sticky-element
    > .elementor-element-overlay::after {
    content:        "\e8b6"; /* eicon-pin */
    font-family:    eicons;
    position:       absolute;
    top:            4px;
    right:          32px;
    font-size:      13px;
    color:          #d72e2e;
    line-height:    1;
    pointer-events: none;
    z-index:        10;
}