/**
 * BOUKI Logistics — public tracking styles.
 */

.bouki-track {
	--bt-navy: #0b2545;
	--bt-steel: #3b6ea5;
	--bt-amber: #f0a500;
	--bt-border: #dde4ec;
	--bt-muted: #64748b;

	max-width: 900px;
	margin: 0 auto;
	padding: 24px 16px 48px;
	color: #1c2733;
	font-size: 16px;
	line-height: 1.55;
}

.bouki-track__head {
	background: linear-gradient(120deg, var(--bt-navy), var(--bt-steel));
	color: #fff;
	border-radius: 14px;
	padding: 26px;
	margin-bottom: 22px;
}
.bouki-track__head h1 { margin: 0 0 6px; color: #fff; font-size: 26px; }
.bouki-track__head p { margin: 0; opacity: .85; }

.bouki-track__form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bouki-track__form input[type="text"] {
	flex: 1 1 240px;
	min-height: 46px;
	border: 0;
	border-radius: 10px;
	padding: 10px 14px;
	font-size: 16px;
}
.bouki-track__form button {
	min-height: 46px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	background: var(--bt-amber);
	color: #23282d;
	font-weight: 700;
	font-size: 15px;
	cursor: pointer;
}
.bouki-track__form button:hover { filter: brightness(1.05); }

.bouki-track__card {
	border: 1px solid var(--bt-border);
	border-radius: 14px;
	background: #fff;
	padding: 22px;
	margin-bottom: 20px;
	box-shadow: 0 10px 26px rgba(11, 37, 69, .07);
}
.bouki-track__number { font-size: 22px; font-weight: 700; color: var(--bt-navy); margin: 0 0 10px; }
.bouki-track__status {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--bt-steel);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
}
.bouki-track__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 18px; }
.bouki-track__item { border-top: 1px solid var(--bt-border); padding-top: 10px; }
.bouki-track__item span { display: block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--bt-muted); }
.bouki-track__item strong { font-size: 16px; color: var(--bt-navy); }

.bouki-track__steps { list-style: none; margin: 18px 0 0; padding: 0; }
.bouki-track__step { position: relative; padding: 0 0 20px 26px; border-left: 2px solid #e5eaf1; }
.bouki-track__step:last-child { border-left-color: transparent; padding-bottom: 0; }
.bouki-track__step i {
	position: absolute; left: -8px; top: 3px;
	width: 14px; height: 14px; border-radius: 50%;
	border: 3px solid #fff; background: var(--bt-steel);
}
.bouki-track__step b { display: block; color: var(--bt-navy); }
.bouki-track__step small { color: var(--bt-muted); }

.bouki-track__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.bouki-track__btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 10px 16px; border-radius: 10px;
	border: 1px solid var(--bt-border);
	background: #fff; color: var(--bt-navy);
	font-weight: 600; text-decoration: none;
}
.bouki-track__btn--wa { background: #25d366; border-color: #25d366; color: #063d1e; }

.bouki-track__error {
	border-left: 4px solid #c0392b;
	background: #fdecea;
	padding: 14px 16px;
	border-radius: 10px;
}
.bouki-track__qr { margin-top: 16px; }
.bouki-track__muted { color: var(--bt-muted); font-size: 14px; }

@media (max-width: 600px) {
	.bouki-track__head { padding: 20px; }
	.bouki-track__head h1 { font-size: 21px; }
}

.bouki-progress__bar{height:10px;border-radius:6px;background:rgba(255,255,255,.18);overflow:hidden;margin:6px 0 14px}
.bouki-progress__bar>span{display:block;height:100%;background:linear-gradient(90deg,#0ca678,#087f5b)}
.bouki-muted{opacity:.7;font-size:.85em}