/* =============================================================
   CaptWiki Advanced Separator – v2.0.0
   BEM-based, performance-optimised, SEO-friendly
   ============================================================= */

/* ── Base wrapper ────────────────────────────────────────────── */
.cwk-separator {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
	overflow: hidden;
	/* clips wave / zigzag SVGs */
}

/* Alignment helpers applied to wrapper */
.cwk-separator--align-left {
	justify-content: flex-start;
}

.cwk-separator--align-center {
	justify-content: center;
}

.cwk-separator--align-right {
	justify-content: flex-end;
}

/* ── Line element shared base ────────────────────────────────── */
.cwk-separator__line {
	display: block;
	width: 100%;
	height: 0;
	border: none;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: #333;
	margin: 0;
	padding: 0;
}

/* ── Style modifiers ─────────────────────────────────────────── */
.cwk-separator__line--solid {
	border-top-style: solid;
}

.cwk-separator__line--double {
	border-top-style: double;
	border-top-width: 4px;
}

.cwk-separator__line--dashed {
	border-top-style: dashed;
}

.cwk-separator__line--dotted {
	border-top-style: dotted;
}

/* Groove / Ridge (3-D effects) */
.cwk-separator__line--groove {
	border-top-style: groove;
	border-top-width: 4px;
}

.cwk-separator__line--ridge {
	border-top-style: ridge;
	border-top-width: 4px;
}

/* Gradient line – colour set via inline CSS var */
.cwk-separator__line--gradient {
	border: none;
	height: 2px;
	/* thickness controlled via JS selector */
	background: var(--cwk-sep-gradient, linear-gradient(90deg, transparent, #333, transparent));
}

/* Zigzag / Wave / Ornamental – rendered as inline SVG wrapper */
.cwk-separator__svg-wrap {
	display: block;
	width: 100%;
	overflow: hidden;
	line-height: 0;
	/* remove inline gap */
}

.cwk-separator__svg-wrap svg {
	display: block;
	width: 100%;
}

/* ── Text style ──────────────────────────────────────────────── */
.cwk-separator--text {
	gap: 0;
	/* lines are pseudo-elements on inner element */
}

.cwk-separator__text-inner {
	display: flex;
	align-items: center;
	width: 100%;
	gap: 12px;
}

.cwk-separator__text-line {
	flex: 1;
	height: 0;
	border: none;
	border-top-width: 2px;
	border-top-style: solid;
	border-top-color: inherit;
}

.cwk-separator__text-label {
	display: inline-block;
	flex-shrink: 0;
	font-weight: 600;
	padding: 0 15px;
	white-space: nowrap;
}

/* ── Icon style ──────────────────────────────────────────────── */
.cwk-separator--icon .cwk-separator__text-inner {
	gap: 12px;
}

.cwk-separator__icon-wrap {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.cwk-separator__icon-wrap i,
.cwk-separator__icon-wrap svg {
	display: block;
}

/* ── Image style ─────────────────────────────────────────────── */
.cwk-separator__image {
	display: block;
	max-width: 100%;
	height: auto;
	flex-shrink: 0;
}

/* ── Ornamental / Fancy lines (flanking the icon/text) ──────── */
.cwk-separator--ornamental .cwk-separator__text-line {
	background: repeating-linear-gradient(90deg,
			currentColor 0,
			currentColor 4px,
			transparent 4px,
			transparent 10px);
	border: none;
	height: 2px;
}

/* ── Shadow line ─────────────────────────────────────────────── */
.cwk-separator__line--shadow {
	border: none;
	height: 4px;
	background: transparent;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* ── Glow line ───────────────────────────────────────────────── */
.cwk-separator__line--glow {
	border: none;
	height: 2px;
	background: var(--cwk-sep-color, #333);
	box-shadow: 0 0 8px 3px var(--cwk-sep-color, #333);
}

/* ── Animations ──────────────────────────────────────────────── */
/* Fade in */
@keyframes cwk-sep-fadein {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Expand from centre */
@keyframes cwk-sep-expand {
	from {
		transform: scaleX(0);
	}

	to {
		transform: scaleX(1);
	}
}

/* Slide from left */
@keyframes cwk-sep-slide-left {
	from {
		transform: translateX(-100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Slide from right */
@keyframes cwk-sep-slide-right {
	from {
		transform: translateX(100%);
		opacity: 0;
	}

	to {
		transform: translateX(0);
		opacity: 1;
	}
}

/* Bounce in */
@keyframes cwk-sep-bounce {
	0% {
		transform: scaleX(0);
	}

	60% {
		transform: scaleX(1.06);
	}

	80% {
		transform: scaleX(0.97);
	}

	100% {
		transform: scaleX(1);
	}
}

/* Pulse glow (for glow style) */
@keyframes cwk-sep-pulse {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0.4;
	}
}

/* Animation applicators */
.cwk-separator--anim-fadein {
	animation: cwk-sep-fadein 0.6s ease forwards;
}

.cwk-separator--anim-expand {
	animation: cwk-sep-expand 0.6s ease forwards;
	transform-origin: center;
}

.cwk-separator--anim-slide-left {
	animation: cwk-sep-slide-left 0.6s ease forwards;
}

.cwk-separator--anim-slide-right {
	animation: cwk-sep-slide-right 0.6s ease forwards;
}

.cwk-separator--anim-bounce {
	animation: cwk-sep-bounce 0.7s cubic-bezier(.36, .07, .19, .97) forwards;
	transform-origin: center;
}

.cwk-separator--anim-pulse {
	animation: cwk-sep-pulse 2s ease-in-out infinite;
}

/* ── Vertical separator ──────────────────────────────────────── */
.cwk-separator--vertical {
	flex-direction: column;
	width: auto;
	height: 100%;
	justify-content: center;
	align-items: center;
}

.cwk-separator--vertical .cwk-separator__line {
	width: 0;
	height: 100%;
	border-top: none;
	border-left-width: 2px;
	border-left-style: solid;
	border-left-color: #333;
}

/* ── Accessibility: respect prefers-reduced-motion ───────────── */
@media (prefers-reduced-motion: reduce) {

	.cwk-separator,
	.cwk-separator * {
		animation: none !important;
		transition: none !important;
	}
}