/* ==========================================================================
   By Jami Abbasi – Product Status Tracker
   Frontend CSS
   Prefix: .jami-tracker-*
   ========================================================================== */

/* ─── CSS Custom Properties ─── */
.jami-tracker-wrapper {
	--jami-primary:    #ffb751;
	--jami-secondary:  #ffd08e;
	--jami-bg:         #0b0b0b;
	--jami-text:       #ffffff;
	--jami-muted:      rgba(255, 255, 255, 0.35);
	--jami-completed:  rgba(255, 255, 255, 0.15);
	--jami-inactive:   rgba(255, 255, 255, 0.08);
	--jami-arrow-w:    22px;
	--jami-step-h:     72px;
	--jami-radius:     4px;
	--jami-font:       inherit;
	--jami-transition: 0.25s ease;
}

/* ─── Wrapper ─── */
.jami-tracker-wrapper {
	display:          block;
	width:            100%;
	background:       var(--jami-bg);
	padding:          28px 20px 24px;
	box-sizing:       border-box;
	border-radius:    8px;
	overflow:         hidden;
	font-family:      var(--jami-font);
}

/* ─── Inner scroll container ─── */
.jami-tracker-inner {
	display:          flex;
	align-items:      stretch;
	gap:              0;
	width:            100%;
	overflow-x:       auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width:  none;
}

.jami-tracker-inner::-webkit-scrollbar {
	display: none;
}

/* ─── Individual Step ─── */
.jami-tracker-step {
	flex:             1 1 0;
	min-width:        120px;
	position:         relative;
}

/* ─── Arrow Shape ─── */
.jami-tracker-step-arrow {
	display:          flex;
	align-items:      center;
	justify-content:  center;
	height:           var(--jami-step-h);
	position:         relative;
	background:       var(--jami-inactive);
	clip-path:        polygon(
		0% 0%,
		calc(100% - var(--jami-arrow-w)) 0%,
		100% 50%,
		calc(100% - var(--jami-arrow-w)) 100%,
		0% 100%,
		var(--jami-arrow-w) 50%
	);
	margin-right:     -2px;
	transition:       background var(--jami-transition);
}

/* First step – no left notch */
.jami-tracker-step:first-child .jami-tracker-step-arrow {
	clip-path: polygon(
		0% 0%,
		calc(100% - var(--jami-arrow-w)) 0%,
		100% 50%,
		calc(100% - var(--jami-arrow-w)) 100%,
		0% 100%
	);
	border-radius: var(--jami-radius) 0 0 var(--jami-radius);
}

/* Last step – no right point */
.jami-tracker-step--last .jami-tracker-step-arrow {
	clip-path: polygon(
		0% 0%,
		100% 0%,
		100% 100%,
		0% 100%,
		var(--jami-arrow-w) 50%
	);
	border-radius: 0 var(--jami-radius) var(--jami-radius) 0;
	margin-right: 0;
}

/* Only one step */
.jami-tracker-step:first-child.jami-tracker-step--last .jami-tracker-step-arrow {
	clip-path: none;
	border-radius: var(--jami-radius);
}

/* ─── State: Active ─── */
.jami-tracker-step--active .jami-tracker-step-arrow {
	background: var(--jami-primary);
}

.jami-tracker-step--active .jami-tracker-step-title,
.jami-tracker-step--active .jami-tracker-step-icon-wrap svg {
	color:  #0b0b0b;
	stroke: #0b0b0b;
}

.jami-tracker-step--active .jami-tracker-step-date {
	color: rgba(0, 0, 0, 0.65);
}

/* ─── State: Completed ─── */
.jami-tracker-step--completed .jami-tracker-step-arrow {
	background: var(--jami-completed);
}

.jami-tracker-step--completed .jami-tracker-step-icon-wrap svg {
	opacity: 0.45;
}

.jami-tracker-step-title--completed {
	text-decoration: line-through;
	opacity:         0.5;
}

/* ─── State: Inactive ─── */
.jami-tracker-step--inactive .jami-tracker-step-arrow {
	background: var(--jami-inactive);
}

/* ─── Content inside step ─── */
.jami-tracker-step-content {
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	justify-content:  center;
	gap:              6px;
	padding:          8px 28px 8px 20px;
	text-align:       center;
	position:         relative;
	z-index:          1;
	width:            100%;
}

.jami-tracker-step:first-child .jami-tracker-step-content {
	padding-left: 16px;
}

/* ─── Icon Wrapper ─── */
.jami-tracker-step-icon-wrap {
	position:         relative;
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	line-height:      1;
}

.jami-tracker-step-icon-wrap svg {
	display:          block;
	stroke:           var(--jami-text);
	fill:             none;
	transition:       stroke var(--jami-transition), opacity var(--jami-transition);
}

.jami-tracker-step--inactive .jami-tracker-step-icon-wrap svg {
	stroke:   var(--jami-muted);
	opacity:  0.6;
}

/* ─── Completed check badge ─── */
.jami-tracker-completed-check {
	display:          inline-flex;
	align-items:      center;
	justify-content:  center;
	position:         absolute;
	bottom:           -4px;
	right:            -6px;
	width:            18px;
	height:           18px;
	background:       var(--jami-primary);
	border-radius:    50%;
	color:            #0b0b0b;
}

.jami-tracker-completed-check svg {
	stroke:           #0b0b0b !important;
	width:            10px !important;
	height:           10px !important;
}

/* ─── Title ─── */
.jami-tracker-step-title-wrap {
	display:          flex;
	flex-direction:   column;
	align-items:      center;
	gap:              2px;
}

.jami-tracker-step-title {
	display:          block;
	font-size:        12px;
	font-weight:      700;
	letter-spacing:   0.02em;
	text-transform:   uppercase;
	color:            var(--jami-text);
	line-height:      1.25;
	white-space:      nowrap;
	transition:       color var(--jami-transition);
}

.jami-tracker-step--inactive .jami-tracker-step-title {
	color: var(--jami-muted);
}

/* ─── Date ─── */
.jami-tracker-step-date {
	display:          block;
	font-size:        10px;
	font-weight:      500;
	color:            var(--jami-secondary);
	letter-spacing:   0.03em;
	white-space:      nowrap;
}

.jami-tracker-step--inactive .jami-tracker-step-date {
	color: var(--jami-muted);
}

/* ─── Hover effect on inactive/completed ─── */
.jami-tracker-step--inactive:hover .jami-tracker-step-arrow,
.jami-tracker-step--completed:hover .jami-tracker-step-arrow {
	background: rgba(255, 183, 81, 0.12);
	transition: background var(--jami-transition);
}

/* ─── Responsive: Mobile ─── */
@media (max-width: 640px) {
	.jami-tracker-wrapper {
		padding: 18px 12px 18px;
	}

	/* Keep the desktop tracker untouched; on phones each arrow gets enough
	   width for its label and the row remains smoothly swipeable. */
	.jami-tracker-inner {
		gap: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scroll-snap-type: x proximity;
		overscroll-behavior-x: contain;
		scroll-padding-inline: 12px;
	}

	.jami-tracker-step {
		flex: 0 0 120px;
		min-width: 120px;
		scroll-snap-align: center;
		scroll-snap-stop: normal;
	}

	.jami-tracker-step-arrow {
		--jami-arrow-w: 16px;
		--jami-step-h:  82px;
	}

	.jami-tracker-step-content {
		box-sizing: border-box;
		padding: 7px 22px 7px 16px;
		gap: 4px;
		min-width: 0;
	}

	.jami-tracker-step:first-child .jami-tracker-step-content {
		padding-left: 14px;
	}

	.jami-tracker-step--last .jami-tracker-step-content {
		padding-right: 14px;
	}

	.jami-tracker-step-icon-wrap svg {
		width: 20px;
		height: 20px;
	}

	.jami-tracker-step-title-wrap {
		width: 100%;
		min-width: 0;
	}

	.jami-tracker-step-title {
		font-size: 10px;
		line-height: 1.15;
		white-space: normal;
		word-break: normal;
		overflow-wrap: normal;
		max-width: 88px;
		text-align: center;
	}

	.jami-tracker-step-date {
		font-size: 9px;
		line-height: 1.15;
		white-space: nowrap;
	}
}

@media (max-width: 480px) {
	.jami-tracker-step {
		flex-basis: 116px;
		min-width: 116px;
	}

	.jami-tracker-step-title {
		font-size: 9px;
		max-width: 90px;
	}

	.jami-tracker-step-icon-wrap svg {
		width: 18px;
		height: 18px;
	}
}