/**
 * Elementor Network Templates - Conditional Visibility CSS
 *
 * This CSS file provides the visibility control for conditional inner sections.
 * Sections with the ent-conditional-hidden class are hidden via display: none.
 *
 * OPTION 1 ARCHITECTURE: Post-render CSS class injection
 * All sections are always rendered into the DOM. Visibility is controlled
 * by adding/removing the ent-conditional-hidden CSS class.
 *
 * Visual badge: ent-conditional-section shows a badge with the checkbox label
 * in the editor only (main site template + subsite widget preview). Never on frontend.
 */

.ent-conditional-hidden {
	display: none !important;
}

/* Conditional inner section badge - editor/preview only, always visible (not tied to selection) */
.ent-conditional-section {
	position: relative;
	outline: 1px dashed #2271b1;
	outline-offset: 2px;
}

.ent-conditional-section::before {
	content: attr(data-ent-label);
	position: absolute;
	top: -20px;
	left: 0;
	font-size: 10px;
	font-weight: 600;
	color: #2271b1;
	background: #f0f6fc;
	padding: 3px 8px;
	border-radius: 2px;
	border: 1px solid #2271b1;
	z-index: 10;
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	pointer-events: none;
}