/* ═══════════════════════════════════════════════════════════════════════
   KP Timeline — Frontend Stylesheet v2.1.0
   ═══════════════════════════════════════════════════════════════════════ */

/* ── CSS tokens (overridden by Elementor selector controls) ─────────── */
.kp-timeline-wrap {
	--kp-circle-size : 110px;
	--kp-conn-color  : #c8c8c8;
	--kp-conn-style  : dashed;
	--kp-conn-width  : 2px;
}

/* ── Wrapper ─────────────────────────────────────────────────────────── */
.kp-timeline-wrap {
	box-sizing : border-box;
	padding    : 56px 24px;
	width      : 100%;
}

.kp-timeline-wrap *,
.kp-timeline-wrap *::before,
.kp-timeline-wrap *::after {
	box-sizing : inherit;
}

/* ── Inner row ───────────────────────────────────────────────────────── */
.kp-timeline-inner {
	position        : relative;
	display         : flex;
	flex-direction  : row;
	align-items     : flex-start;
	justify-content : center;
	flex-wrap       : nowrap;
	max-width       : 1200px;
	margin          : 0 auto;
}

/* ── Connector line (pseudo-element, spans circle-center to circle-center) */

/* Base shared by both directions — must be on every layout variant */
.kp-layout-horizontal .kp-timeline-inner::before,
.kp-layout-vertical .kp-timeline-inner::before {
	content        : '';
	display        : block;
	position       : absolute;
	pointer-events : none;
	z-index        : 0;
}

/* Horizontal: runs left-to-right at circle midpoint height */
.kp-layout-horizontal .kp-timeline-inner::before {
	top         : calc(var(--kp-circle-size) / 2 - var(--kp-conn-width) / 2);
	left        : calc(var(--kp-circle-size) / 2);
	right       : calc(var(--kp-circle-size) / 2);
	height      : 0;
	width       : auto;
	border-top  : var(--kp-conn-width) var(--kp-conn-style) var(--kp-conn-color);
	border-left : none;
}

/* Vertical: runs top-to-bottom at circle midpoint from left */
.kp-layout-vertical .kp-timeline-inner::before {
	top         : calc(var(--kp-circle-size) / 2);
	bottom      : calc(var(--kp-circle-size) / 2);
	left        : calc(var(--kp-circle-size) / 2 - var(--kp-conn-width) / 2);
	right       : auto;
	width       : 0;
	height      : auto;
	border-left : var(--kp-conn-width) var(--kp-conn-style) var(--kp-conn-color);
	border-top  : none;
}

/* Hide connector when toggled off */
.kp-no-connector .kp-timeline-inner::before {
	display : none;
}

/* ── Single step ─────────────────────────────────────────────────────── */
.kp-step {
	flex           : 1;
	min-width      : 0;
	display        : flex;
	flex-direction : column;
	align-items    : flex-start;
	text-align     : left;
	position       : relative;
	z-index        : 1; /* above the connector line */
}

/* ── Circle + icon wrapper ───────────────────────────────────────────── */
.kp-step-visual {
	position      : relative;
	width         : var(--kp-circle-size);
	height        : var(--kp-circle-size);
	flex-shrink   : 0;
	margin-bottom : 20px;
}

/* ── Main circle ─────────────────────────────────────────────────────── */
.kp-circle {
	--kp-item-c : #1E3A5F;            /* default; overridden per-item by {{CURRENT_ITEM}} selector */

	width            : var(--kp-circle-size);
	height           : var(--kp-circle-size);
	border-radius    : 50%;
	border           : 3px solid var(--kp-item-c);
	display          : flex;
	align-items      : center;
	justify-content  : center;
	position         : relative;
	background-color : transparent; /* overridden per-item by step_circle_fill {{CURRENT_ITEM}} selector */
}

.kp-step-number {
	font-size      : 2.4em;
	font-weight    : 800;
	line-height    : 1;
	letter-spacing : -0.03em;
	color          : #fff;           /* overridden per-item by {{CURRENT_ITEM}} selector */
	position       : relative;
	z-index        : 1;
}

/* ── Small icon circle — overlaps top-right of main circle ───────────── */
.kp-icon-circle {
	position        : absolute;
	top             : -6px;
	right           : -6px;
	width           : 36px;
	height          : 36px;
	border-radius   : 50%;
	display         : flex;
	align-items     : center;
	justify-content : center;
	border          : 3px solid #fff;
	overflow        : hidden;
	box-shadow      : 0 2px 8px rgba(0,0,0,.18);
	background-color: #2D9CDB;       /* overridden per-item by {{CURRENT_ITEM}} selector */
}

.kp-icon-circle i {
	font-size   : 1em;
	color       : #fff;
	line-height : 1;
}

.kp-icon-circle svg {
	width  : 60%;
	height : 60%;
	fill   : #fff;
	color  : #fff;
}

.kp-icon-circle--empty {
	background : transparent;
	border     : none;
	box-shadow : none;
}

/* ── Text content ────────────────────────────────────────────────────── */
.kp-step-content {
	padding    : 0;
	text-align : left;
}

.kp-step-title {
	font-size   : 1.35em;
	font-weight : 800;
	margin      : 0 0 6px;
	line-height : 1.2;
	color       : #1a1a1a;
}

.kp-step-subtitle {
	font-size      : 0.68em;
	font-weight    : 700;
	text-transform : uppercase;
	letter-spacing : 0.1em;
	margin         : 0 0 10px;
	line-height    : 1.2;
	color          : #2D9CDB;        /* overridden per-item by {{CURRENT_ITEM}} selector */
}

.kp-step-description {
	font-size   : 0.9em;
	line-height : 1.7;
	margin      : 0;
	color       : #555;
}

/* ── Vertical layout ─────────────────────────────────────────────────── */
.kp-layout-vertical .kp-timeline-inner {
	flex-direction : column;
	align-items    : flex-start;
}

/* Vertical connector: runs along the left edge from first to last circle */
.kp-layout-vertical .kp-timeline-inner::before {
	top          : calc(var(--kp-circle-size) / 2);
	left         : calc(var(--kp-circle-size) / 2 - var(--kp-conn-width) / 2);
	right        : auto;
	bottom       : calc(var(--kp-circle-size) / 2);
	height       : auto;
	width        : 0;
	border-top   : none;
	border-left  : var(--kp-conn-width) var(--kp-conn-style) var(--kp-conn-color);
}

.kp-layout-vertical .kp-step {
	flex-direction : row;
	align-items    : flex-start;
	width          : 100%;
}

.kp-layout-vertical .kp-step-visual {
	margin-bottom : 0;
	margin-right  : 24px;
	flex-shrink   : 0;
}

.kp-layout-vertical .kp-step-content {
	padding : 10px 0 0;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	.kp-layout-horizontal .kp-timeline-inner {
		flex-direction : column;
		align-items    : flex-start;
	}

	/* Switch horizontal connector to vertical on small screens */
	.kp-layout-horizontal .kp-timeline-inner::before {
		top         : calc(var(--kp-circle-size) / 2);
		bottom      : calc(var(--kp-circle-size) / 2);
		left        : calc(var(--kp-circle-size) / 2 - var(--kp-conn-width) / 2);
		right       : auto;
		width       : 0;
		height      : auto;
		border-left : var(--kp-conn-width) var(--kp-conn-style) var(--kp-conn-color);
		border-top  : none;
	}

	.kp-layout-horizontal .kp-step {
		flex-direction : row;
		align-items    : flex-start;
		width          : 100%;
	}

	.kp-layout-horizontal .kp-step-visual {
		margin-bottom : 0;
		margin-right  : 20px;
		flex-shrink   : 0;
	}

	.kp-layout-horizontal .kp-step-content {
		padding : 10px 0 0;
	}
}

@media (max-width: 480px) {
	.kp-timeline-wrap {
		--kp-circle-size : 80px;
		padding          : 36px 16px;
	}

	.kp-step-number { font-size : 1.8em; }

	.kp-step-visual { margin-right : 16px; }
}