/* Multi Icon Divider for Elementor */

.mid-divider {
	display: flex;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
}

/* The two flanking lines. Border-top is used so style/weight/color
   controls map cleanly onto standard CSS border properties. */
.mid-divider .mid-line {
	flex: 1 1 auto;
	min-width: 0;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: currentColor;
	font-size: 0;
	line-height: 0;
	height: 0;
}

/* Middle content */
.mid-divider .mid-content {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	white-space: nowrap;
}

.mid-divider .mid-icons {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.mid-divider .mid-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	text-decoration: none;
	flex: 0 0 auto;
}

.mid-divider .mid-icon svg {
	display: block;
	width: 1em;
	height: 1em;
}

.mid-divider .mid-icon i {
	display: block;
	line-height: 1;
}

/* Small divider lines placed *between* icons */
.mid-divider .mid-inline-line {
	display: inline-block;
	flex: 0 0 auto;
	border-top-style: solid;
	border-top-width: 2px;
	border-top-color: currentColor;
	width: 40px;
	height: 0;
	font-size: 0;
	line-height: 0;
}

.mid-divider .mid-text {
	display: inline-block;
	line-height: 1.2;
}

/* Hiding lines: the switcher outputs .mid-lines-yes on the widget wrapper.
   When it's off, no class is added, so we target the absence of it. */
.elementor-widget-multi_icon_divider:not(.mid-lines-yes) .mid-divider .mid-line {
	display: none;
}

/* Element type "None": no .mid-content between the lines, so collapse the
   two halves into one continuous, unbroken rule. */
.mid-divider.mid-is-empty .mid-line-right {
	display: none;
}

.mid-divider.mid-is-empty .mid-line-left {
	flex: 1 1 100%;
}

.mid-hide-left-yes .mid-divider .mid-line-left {
	display: none;
}

.mid-hide-right-yes .mid-divider .mid-line-right {
	display: none;
}

/* Alignment: collapse the line on the side the content sits against */
.mid-align-left .mid-divider .mid-line-left {
	flex: 0 0 0;
	max-width: 0;
	border-top-width: 0;
}

.mid-align-left .mid-divider .mid-content {
	padding-left: 0 !important;
}

.mid-align-right .mid-divider .mid-line-right {
	flex: 0 0 0;
	max-width: 0;
	border-top-width: 0;
}

.mid-align-right .mid-divider .mid-content {
	padding-right: 0 !important;
}

/* Tablet / mobile alignment variants.
   Note: Elementor keeps the desktop prefix class on the element at every
   breakpoint, so a tablet/mobile choice must fully *undo* the desktop rule
   above (flex, max-width AND border-top-width), not just re-collapse a side. */
@media (max-width: 1024px) {
	/* Reset both lines first, then re-collapse per the tablet choice. */
	.mid-align-tablet-left .mid-divider .mid-line,
	.mid-align-tablet-center .mid-divider .mid-line,
	.mid-align-tablet-right .mid-divider .mid-line {
		flex: 1 1 auto;
		max-width: none;
		border-top-width: var(--mid-line-weight, 2px);
	}

	.mid-align-tablet-left .mid-divider .mid-content {
		padding-left: 0 !important;
	}
	.mid-align-tablet-left .mid-divider .mid-line-left {
		flex: 0 0 0;
		max-width: 0;
		border-top-width: 0;
	}

	.mid-align-tablet-right .mid-divider .mid-content {
		padding-right: 0 !important;
	}
	.mid-align-tablet-right .mid-divider .mid-line-right {
		flex: 0 0 0;
		max-width: 0;
		border-top-width: 0;
	}
}

@media (max-width: 767px) {
	.mid-align-mobile-left .mid-divider .mid-line,
	.mid-align-mobile-center .mid-divider .mid-line,
	.mid-align-mobile-right .mid-divider .mid-line {
		flex: 1 1 auto;
		max-width: none;
		border-top-width: var(--mid-line-weight, 2px);
	}

	.mid-align-mobile-left .mid-divider .mid-content {
		padding-left: 0 !important;
	}
	.mid-align-mobile-left .mid-divider .mid-line-left {
		flex: 0 0 0;
		max-width: 0;
		border-top-width: 0;
	}

	.mid-align-mobile-right .mid-divider .mid-content {
		padding-right: 0 !important;
	}
	.mid-align-mobile-right .mid-divider .mid-line-right {
		flex: 0 0 0;
		max-width: 0;
		border-top-width: 0;
	}
}