/* ==========================================================================
   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;
	}

	.jami-tracker-inner {
		gap: 0;
	}

	.jami-tracker-step {
		min-width: 90px;
	}

	.jami-tracker-step-arrow {
		--jami-arrow-w: 14px;
		--jami-step-h:  60px;
	}

	.jami-tracker-step-content {
		padding: 6px 18px 6px 14px;
		gap: 4px;
	}

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

	.jami-tracker-step-title {
		font-size: 10px;
	}

	.jami-tracker-step-date {
		font-size: 9px;
	}
}

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

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

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