/**
 * SITS Sticky Controls – Frontend Styles
 *
 * Handles fixed positioning, transitions, animations, and
 * the hidden-on-scroll-down state for sticky Elementor elements.
 *
 * @package Softech_Addons_for_Elementor
 */

/* ── Base sticky state ───────────────────────────────────────── */

/* AFTER */
.sits-is-sticky {
    position: fixed !important;
    z-index: 999;
    box-sizing: border-box;
    transition-property: background, box-shadow, opacity, transform;
    transition-duration: 0.3s;
    transition-timing-function: ease;
    /* will-change removed — it breaks fixed children like mega menus */
}

/* ── Direction variants ──────────────────────────────────────── */

.sits-sticky-top {
	top: 0; /* refined at runtime via JS + user offset */
}

.sits-sticky-bottom {
	bottom: 0; /* refined at runtime via JS + user offset */
}

/* ── Hide on scroll down ─────────────────────────────────────── */

.sits-is-sticky.sits-sticky-hidden {
	opacity: 0 !important;
	pointer-events: none;
	/* Use the correct direction so the element slides off screen */
}

.sits-is-sticky.sits-sticky-top.sits-sticky-hidden {
	transform: translateY(-110%) !important;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.sits-is-sticky.sits-sticky-bottom.sits-sticky-hidden {
	transform: translateY(110%) !important;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

/* ── Fade animation ──────────────────────────────────────────── */

.sits-is-sticky.sits-sticky-anim-fade {
	/* Opacity transition handled inline by JS for the entrance;
	   CSS provides the ongoing transition for background changes etc. */
	transition: background 0.3s ease,
	            box-shadow 0.3s ease,
	            opacity    0.3s ease;
}

/* ── Slide animation ─────────────────────────────────────────── */

.sits-is-sticky.sits-sticky-anim-slide {
	transition: background  0.3s ease,
	            box-shadow  0.3s ease,
	            transform   0.3s ease;
}

/* ── Placeholder (prevents layout jump) ─────────────────────── */

.sits-sticky-placeholder {
	display: block;
	visibility: hidden;
	pointer-events: none;
}

/* ── Background colour ───────────────────────────────────────── */
/*
 * Background is applied inline by JS so it takes the user-supplied colour.
 * This rule provides a smooth transition when the value changes.
 */
.sits-is-sticky {
	transition-property: background, box-shadow, opacity, transform !important;
}

/* ── Box shadow ──────────────────────────────────────────────── */
/*
 * Box shadow is handled by Elementor's group control selector:
 *   {{WRAPPER}}.sits-is-sticky { box-shadow: …; }
 * The rule below ensures the transition is smooth.
 */
.sits-is-sticky {
	-webkit-transition: background 0.3s ease,
	                    box-shadow 0.3s ease,
	                    opacity    0.3s ease,
	                    transform  0.3s ease;
	        transition: background 0.3s ease,
	                    box-shadow 0.3s ease,
	                    opacity    0.3s ease,
	                    transform  0.3s ease;
}

/* ── Elementor container / section resets ────────────────────── */

/* Prevent Elementor's own position:relative from conflicting. */
.elementor-section.sits-is-sticky,
.e-con.sits-is-sticky,
.elementor-widget-wrap.sits-is-sticky {
	position: fixed !important;
}

/* Full-width sections: stretch to the viewport. */
.elementor-section.elementor-section-full_width.sits-is-sticky {
	width: 100% !important;
	left: 0 !important;
}