/* Expand Container for Elementor - Frontend Styles */

.expandContainer {
	position: relative;
	overflow: hidden;
	max-height: var(--ece-height, 200px);
	transition: max-height var(--ece-duration, .6s) ease;
}

.expandContainer::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: var(--ece-gradient-height, 160px);
	width: 100%;
	left: 0;
	pointer-events: none;
	opacity: 1;
	transition: opacity .35s ease;
	/* width / position / background / clip-path / mask for the chosen fade shape are injected per-widget-instance inline */
}

.expandContainer.ece-open::after {
	opacity: 0;
}

.ece-expand-icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	width: fit-content;
	max-width: 100%;
	gap: var( --ece-content-gap, 8px );
	flex-wrap: wrap;
	overflow: visible;
}

.ece-icon-slot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	flex-shrink: 0;
	overflow: visible;
	line-height: 0;
}

.expandIcon-box {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	/* line-height:0 removes the invisible "phantom" space that inherited
	   line-height adds around inline icon content (this is what was showing
	   up as extra padding/gap even when the Padding control was set to 0). */
	line-height: 0;
	overflow: visible;
}

.ece-expand-icon-wrap .expandIcon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	transition: transform var(--ece-icon-duration, .45s) ease;
}

/* Font-icon <i> tags and inline <svg> icons are both `inline` by default,
   which reserves extra baseline/descender space around them. Forcing them
   to `display:block` removes that reserved space so the icon box hugs the
   icon exactly, with only the Padding control adding any extra room. */
.ece-expand-icon-wrap .expandIcon i,
.ece-expand-icon-wrap .expandIcon svg {
	display: block;
	line-height: 1;
}

.ece-content-slot {
	display: inline-flex;
	align-items: center;
	box-sizing: border-box;
	overflow: visible;
	gap: 4px;
}

.ece-content-before,
.ece-content-after {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.expandText {
	display: inline-flex;
	align-items: center;
	white-space: normal;
	word-break: break-word;
	overflow-wrap: break-word;
	line-height: 1.3;
	overflow: visible;
}

.ece-expand-icon-wrap.ece-open .expandIcon {
	transform: rotate(var(--ece-rotate, 180deg));
}

.ece-expand-icon-wrap.ece-expand-icon-hidden {
	display: none !important;
}

.ece-notice {
	padding: 10px 15px;
	background: #fff3cd;
	border: 1px solid #ffe08a;
	color: #856404;
	border-radius: 4px;
	font-size: 13px;
	line-height: 1.8;
}