/* Woven Kargo Barkod — customer tracking page */
.wkb-track {
	--wkb-accent: #1f6feb;
	--wkb-ink: #14181f;
	--wkb-line: #e4e8ee;
	max-width: 560px;
	margin: 0 auto;
	font-family: inherit;
	color: var(--wkb-ink);
}
.wkb-track * { box-sizing: border-box; }

.wkb-track-form {
	background: #fff;
	border: 1px solid var(--wkb-line);
	border-radius: 14px;
	padding: 28px;
	box-shadow: 0 6px 24px rgba(20, 24, 31, 0.06);
}
.wkb-track-title { margin: 0 0 4px; font-size: 22px; font-weight: 800; }
.wkb-track-sub { margin: 0 0 18px; color: #5b6573; font-size: 14px; }

.wkb-track-fields { display: flex; gap: 14px; flex-wrap: wrap; }
.wkb-track-fields label { flex: 1 1 200px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; font-weight: 600; }
.wkb-track-fields input {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--wkb-line);
	border-radius: 9px;
	font-size: 15px;
	background: #fbfcfe;
}
.wkb-track-fields input:focus { outline: none; border-color: var(--wkb-accent); box-shadow: 0 0 0 3px rgba(31, 111, 235, 0.15); }

.wkb-track-btn {
	margin-top: 16px;
	width: 100%;
	padding: 13px 18px;
	border: 0;
	border-radius: 9px;
	background: var(--wkb-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	transition: filter 0.15s ease;
}
.wkb-track-btn:hover { filter: brightness(0.94); }

.wkb-track-error {
	margin-top: 16px;
	padding: 14px 16px;
	border-radius: 10px;
	background: #fff2f2;
	border: 1px solid #ffd2d2;
	color: #b42318;
	font-size: 14px;
}

.wkb-track-result {
	margin-top: 18px;
	background: #fff;
	border: 1px solid var(--wkb-line);
	border-radius: 14px;
	padding: 24px;
	box-shadow: 0 6px 24px rgba(20, 24, 31, 0.06);
}
.wkb-track-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.wkb-track-label { font-size: 12px; color: #8a93a1; text-transform: uppercase; letter-spacing: 0.5px; }
.wkb-track-value { font-size: 20px; font-weight: 800; }
.wkb-track-status {
	padding: 7px 14px;
	border-radius: 999px;
	font-weight: 700;
	font-size: 13px;
	background: #eef4ff;
	color: var(--wkb-accent);
	white-space: nowrap;
}
.wkb-st-completed { background: #e8f7ee; color: #1a7f43; }
.wkb-st-cancelled, .wkb-st-failed, .wkb-st-refunded { background: #fdecea; color: #b42318; }

.wkb-track-info { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 4px; font-size: 14px; color: #5b6573; border-top: 1px solid var(--wkb-line); padding-top: 16px; }

.wkb-track-steps { list-style: none; margin: 18px 0 0; padding: 0; }
.wkb-track-steps li { position: relative; padding: 0 0 22px 28px; color: #98a1ae; font-weight: 600; }
.wkb-track-steps li:last-child { padding-bottom: 0; }
.wkb-track-steps li::before {
	content: ""; position: absolute; left: 8px; top: 16px; bottom: -6px; width: 2px; background: var(--wkb-line);
}
.wkb-track-steps li:last-child::before { display: none; }
.wkb-track-steps .wkb-dot {
	position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
	background: #fff; border: 2px solid var(--wkb-line);
}
.wkb-track-steps li.is-done { color: var(--wkb-ink); }
.wkb-track-steps li.is-done .wkb-dot { background: var(--wkb-accent); border-color: var(--wkb-accent); }
.wkb-track-steps li.is-done::before { background: var(--wkb-accent); }

.wkb-track-credit { text-align: center; margin-top: 16px; }
.wkb-track-credit a { font-size: 12px; color: #98a1ae; text-decoration: none; }
.wkb-track-credit a:hover { color: var(--wkb-accent); }