/**
 * Grid Drop Text Shapes - background styles.
 *
 * The host element (an Elementor Container with the background enabled)
 * receives the `.grid-dts-bg-host` class. We inject `.grid-dts-physics-bg`
 * as its first child via JavaScript; it fills the host and sits behind the
 * host's normal content.
 */

.grid-dts-bg-host {
	position: relative;
}

.grid-dts-bg-host > .grid-dts-physics-bg {
	position: absolute;
	inset: 0;
	overflow: hidden;
	z-index: 1;
	pointer-events: auto;
	touch-action: none;
}

/* If Elementor's own Background (video/slideshow) is also enabled on this
 * container, make sure it covers the full container and sits behind the
 * physics pills - the pills should always remain visible on top of any
 * Elementor background type (color, gradient, video, slideshow). */
.grid-dts-bg-host > .elementor-background-video-container,
.grid-dts-bg-host > .elementor-background-slideshow {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* Keep the host's own (non-background) children visually above the
 * physics layer, but let mouse events pass through to the physics stage
 * underneath (so the Matter.js mouse constraint keeps working), except on
 * elements the visitor can actually interact with. */
.grid-dts-bg-host > :not(.grid-dts-physics-bg):not(.elementor-background-video-container):not(.elementor-background-slideshow) {
	position: relative;
	z-index: 2;
	pointer-events: none;
}

.grid-dts-bg-host > :not(.grid-dts-physics-bg):not(.elementor-background-video-container):not(.elementor-background-slideshow) a,
.grid-dts-bg-host > :not(.grid-dts-physics-bg):not(.elementor-background-video-container):not(.elementor-background-slideshow) button,
.grid-dts-bg-host > :not(.grid-dts-physics-bg):not(.elementor-background-video-container):not(.elementor-background-slideshow) input,
.grid-dts-bg-host > :not(.grid-dts-physics-bg):not(.elementor-background-video-container):not(.elementor-background-slideshow) textarea,
.grid-dts-bg-host > :not(.grid-dts-physics-bg):not(.elementor-background-video-container):not(.elementor-background-slideshow) select,
.grid-dts-bg-host > :not(.grid-dts-physics-bg):not(.elementor-background-video-container):not(.elementor-background-slideshow) [role="button"] {
	pointer-events: auto;
}

.grid-dts-physics-elements {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	justify-content: center;
	gap: 14px;
	padding: 24px;
	box-sizing: border-box;
	pointer-events: none;
}

.grid-dts-physics-element {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	line-height: 1;
	font-weight: 700;
	padding: 10px 18px;
	border-radius: 999px;
	background: #ffffff;
	color: #111827;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
	opacity: 1;
	user-select: none;
	will-change: transform;
	pointer-events: none;
}

.grid-dts-physics-bg[data-grid-dts-state="bodies-created"] .grid-dts-physics-elements,
.grid-dts-physics-bg[data-grid-dts-state="first-frame"] .grid-dts-physics-elements,
.grid-dts-physics-bg[data-grid-dts-state="engine-started"] .grid-dts-physics-elements {
	display: block;
	padding: 0;
}

.grid-dts-physics-bg[data-grid-dts-state^="error"] .grid-dts-physics-elements {
	position: relative;
	inset: auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-content: flex-start;
	justify-content: center;
	padding: 24px;
}

.grid-dts-physics-bg[data-grid-dts-state^="error"] .grid-dts-physics-element {
	position: relative;
	left: auto !important;
	top: auto !important;
	transform: none !important;
	opacity: 1;
}