/* BBP Separator widget — dark hexagon-textured strip with a thin
   fading-gradient line through the middle, used between sections.
   Deliberately has NO hardcoded padding/spacing of its own: Elementor's
   native Advanced > Padding/Margin controls (which target the exact
   selectors below) are the only source of spacing, so those controls
   fully drive how much breathing room and visible texture area there is. */

/* Elementor Containers default to flex_direction: row, which otherwise
   collapses this widget's wrapper to content-width and stretches it to
   the row's full height. Force it to always behave as a full-width,
   natural-height block regardless of the parent container's own layout. */
.elementor-widget-bbp-separator {
	width: 100%;
	flex: 0 0 100%;
	align-self: flex-start;
}

/* Elementor's own Padding control targets exactly this element
   ({{WRAPPER}} > .elementor-widget-container), so the background/texture
   live here too — the padding the user sets IS the visible texture area. */
.elementor-widget-bbp-separator > .elementor-widget-container {
	position: relative;
	width: 100%;
	background-color: var(--bbp-bg-section);
	overflow: hidden;
}

.bbp-separator-texture {
	position: absolute;
	inset: 0;
	background-image: url('../../images/homepage/shared/section-hexagon-bg.png');
	background-size: cover;
	background-position: center;
	opacity: 0.15;
	mix-blend-mode: luminosity;
	pointer-events: none;
	z-index: 0;
}

.bbp-separator-line {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 1px;
	background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.7) 50%, transparent 100%);
}