/* Shiwara Order Tracking — frontend */

.sot-track-wrap {
	max-width: 640px;
}

.sot-order-meta {
	background: #fff8ec;
	border: 1px solid #f0d9b0;
	padding: 12px 16px;
	border-radius: 8px;
	margin-bottom: 22px;
}

/* Progress timeline */
.sot-timeline {
	display: flex;
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	counter-reset: step;
}

.sot-step {
	flex: 1;
	position: relative;
	text-align: center;
	font-size: 0.82em;
	color: #999;
}

.sot-step .sot-dot {
	display: block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #d6d6d6;
	margin: 0 auto 8px;
	position: relative;
	z-index: 2;
	border: 3px solid #fff;
	box-shadow: 0 0 0 1px #d6d6d6;
}

/* connecting line */
.sot-step::before {
	content: "";
	position: absolute;
	top: 9px;
	left: -50%;
	width: 100%;
	height: 3px;
	background: #d6d6d6;
	z-index: 1;
}

.sot-step:first-child::before {
	display: none;
}

.sot-step--done .sot-dot,
.sot-step--current .sot-dot {
	background: #1a7f37;
	box-shadow: 0 0 0 1px #1a7f37;
}

.sot-step--done::before,
.sot-step--current::before {
	background: #1a7f37;
}

.sot-step--done .sot-step-label,
.sot-step--current .sot-step-label {
	color: #1a7f37;
	font-weight: 600;
}

.sot-step--current .sot-dot {
	box-shadow: 0 0 0 4px rgba( 26, 127, 55, 0.2 );
}

/* Table */
.sot-track-table th {
	width: 180px;
	text-align: left;
}

.sot-status {
	display: inline-block;
	padding: 3px 12px;
	border-radius: 20px;
	font-size: 0.85em;
	font-weight: 600;
	background: #e0ecff;
	color: #1d4ed8;
}

.sot-status--received {
	background: #d8f3dd;
	color: #1a7f37;
}

.sot-track-btn {
	background: #156a8c !important;
	color: #fff !important;
	padding: 11px 24px !important;
	border-radius: 6px !important;
}

.sot-track-btn-wrap {
	margin: 18px 0;
}