/* ═══════════════════════════════════════════════════════
   TrackShip — Branded Frontend Page
   ═══════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

body.trackship-standalone-page {
	margin: 0;
	padding: 0;
	background: #eef2f7;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	color: #1a2e4a;
	-webkit-font-smoothing: antialiased;
}

/* ─── Page Layout ─── */
.ts-page {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

/* ─── Header ─── */
.ts-header {
	background: linear-gradient(135deg, #0d1f35 0%, #1a3a5c 60%, #1e4d7b 100%);
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.25);
	position: sticky;
	top: 0;
	z-index: 100;
}

.ts-header-inner {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 24px;
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.ts-logo {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	color: #fff;
	flex-shrink: 0;
}

.ts-logo-icon {
	font-size: 26px;
	line-height: 1;
}

.ts-logo-text {
	font-size: 20px;
	font-weight: 800;
	letter-spacing: -0.4px;
	color: #fff;
}

/* ─── Navigation ─── */
.ts-nav {
	display: flex;
	align-items: center;
	gap: 4px;
}

.ts-nav-link {
	color: rgba(255, 255, 255, 0.8);
	text-decoration: none;
	font-size: 14px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 8px;
	transition: background 0.15s, color 0.15s;
	white-space: nowrap;
}

.ts-nav-link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
}

.ts-nav-link--active {
	background: rgba(255, 255, 255, 0.15);
	color: #fff;
}

.ts-nav-link--cta {
	background: var(--ts-brand, #2271b1);
	color: #fff;
	margin-left: 6px;
}

.ts-nav-link--cta:hover {
	background: #1a5a91;
	color: #fff;
}

/* ─── Main / Card ─── */
.ts-main {
	flex: 1;
	padding: 48px 24px 64px;
}

.ts-card {
	max-width: 680px;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	padding: 44px 48px;
	box-shadow: 0 8px 40px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ─── Footer ─── */
.ts-footer {
	text-align: center;
	padding: 20px 24px;
	font-size: 13px;
	color: #94a3b8;
}

.ts-footer strong {
	color: var(--ts-brand, #2271b1);
	font-weight: 600;
}

/* ─── Lookup Form (inside card) ─── */
.trackship-lookup {
	text-align: center;
}

.trackship-lookup h2 {
	font-size: 26px;
	font-weight: 800;
	color: #0d1f35;
	margin: 0 0 8px;
}

.trackship-lookup p {
	color: #64748b;
	font-size: 15px;
	margin: 0 0 28px;
}

.trackship-lookup-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	max-width: 360px;
	margin: 0 auto;
}

.trackship-lookup-form input[type="number"] {
	padding: 14px 18px;
	border: 2px solid #e2e8f0;
	border-radius: 10px;
	font-size: 16px;
	color: #1a2e4a;
	background: #f8fafc;
	transition: border-color 0.15s;
	width: 100%;
}

.trackship-lookup-form input[type="number"]:focus {
	outline: none;
	border-color: var(--ts-brand, #2271b1);
	background: #fff;
}

/* ─── Tracking Card ─── */
.trackship-tracking {
	max-width: 100%;
}

.trackship-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 28px;
	padding-bottom: 20px;
	border-bottom: 1px solid #e2e8f0;
}

.trackship-title {
	font-size: 22px;
	font-weight: 800;
	color: #0d1f35;
	margin: 0;
}

.trackship-status {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.3px;
	text-transform: uppercase;
}

.trackship-status--pending,
.trackship-status--on-hold { background: #fff3cd; color: #856404; }
.trackship-status--processing,
.trackship-status--confirmed { background: #dbeafe; color: #1e40af; }
.trackship-status--out_for_delivery { background: #dcfce7; color: #15803d; }
.trackship-status--delivered { background: #dcfce7; color: #15803d; }
.trackship-status--failed { background: #fee2e2; color: #b91c1c; }

/* ─── Timeline ─── */
.trackship-timeline {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 32px 0;
	gap: 0;
}

.trackship-step {
	text-align: center;
	flex-shrink: 0;
}

.trackship-step-dot {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #e2e8f0;
	color: #94a3b8;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	font-weight: 700;
	margin: 0 auto 8px;
	transition: all 0.3s;
}

.trackship-step--done .trackship-step-dot {
	background: #16a34a;
	color: #fff;
}

.trackship-step--active .trackship-step-dot {
	background: var(--ts-brand, #2271b1);
	color: #fff;
	box-shadow: 0 0 0 5px rgba(34, 113, 177, 0.18);
}

.trackship-step-label {
	font-size: 12px;
	color: #94a3b8;
	max-width: 80px;
	font-weight: 500;
}

.trackship-step--done .trackship-step-label,
.trackship-step--active .trackship-step-label {
	color: #0d1f35;
	font-weight: 700;
}

.trackship-step-line {
	flex: 1;
	height: 3px;
	background: #e2e8f0;
	margin: 0 8px;
	margin-bottom: 28px;
	border-radius: 2px;
	transition: background 0.3s;
}

.trackship-step-line--done {
	background: #16a34a;
}

/* ─── Live Tracking Panel ─── */
.trackship-live {
	background: linear-gradient(135deg, #0d1f35 0%, #1a3a5c 100%);
	padding: 28px 32px;
	border-radius: 16px;
	color: #fff;
	margin: 24px 0;
	box-shadow: 0 8px 24px rgba(13, 31, 53, 0.3);
}

.trackship-driver {
	font-size: 16px;
	font-weight: 600;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.trackship-route-notes {
	font-size: 14px;
	color: #555;
	background: #f6f7f7;
	border-left: 3px solid var(--ts-brand, #2271b1);
	padding: 8px 12px;
	border-radius: 0 4px 4px 0;
	margin-bottom: 20px;
}

/* Progress Bar */
.trackship-progress { margin: 16px 0; }

.trackship-progress-track {
	height: 8px;
	background: rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	position: relative;
	overflow: visible;
}

.trackship-progress-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--ts-brand, #2271b1), #38bdf8);
	border-radius: 4px;
	width: 5%;
	transition: width 2s ease;
}

.trackship-car-icon {
	position: absolute;
	top: -12px;
	left: 5%;
	font-size: 24px;
	transform: translateX(-50%) scaleX(-1);
	transition: left 2s ease;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ETA */
.trackship-eta {
	text-align: center;
	margin-top: 24px;
}

.trackship-eta-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	opacity: 0.6;
	font-weight: 600;
}

.trackship-eta-time {
	font-size: 42px;
	font-weight: 900;
	line-height: 1.1;
	margin: 6px 0 4px;
}

.trackship-eta-countdown {
	font-size: 15px;
	font-weight: 600;
	color: #38bdf8;
}

/* Live Map */
.trackship-map {
	height: 280px;
	border-radius: 12px;
	margin-top: 20px;
	overflow: hidden;
	border: 2px solid rgba(255, 255, 255, 0.1);
}

/* ─── Delivered State ─── */
.trackship-delivered {
	text-align: center;
	padding: 40px 20px;
	background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
	border-radius: 16px;
	margin: 24px 0;
	border: 1px solid #bbf7d0;
}

.trackship-delivered-icon { font-size: 64px; margin-bottom: 12px; }

.trackship-delivered h3 {
	color: #15803d;
	font-size: 20px;
	font-weight: 800;
	margin: 0 0 8px;
}

.trackship-delivered p { color: #166534; font-size: 14px; margin: 0; }

/* ─── Pending State ─── */
.trackship-pending {
	text-align: center;
	padding: 40px 20px;
	background: #f8fafc;
	border-radius: 16px;
	margin: 24px 0;
	border: 1px solid #e2e8f0;
	color: #64748b;
	font-size: 15px;
}

/* ─── Refresh Note ─── */
.trackship-refresh-note {
	text-align: center;
	font-size: 12px;
	color: #94a3b8;
	margin-top: 20px;
}

/* ─── Error ─── */
.trackship-error {
	text-align: center;
	padding: 24px;
	color: #b91c1c;
	background: #fee2e2;
	border-radius: 12px;
	margin-bottom: 20px;
	font-weight: 500;
}

/* ─── Button ─── */
.trackship-btn {
	display: inline-block;
	padding: 14px 28px;
	background: linear-gradient(135deg, var(--ts-brand, #2271b1) 0%, #1a5a91 100%);
	color: #fff;
	border: none;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 0.15s, transform 0.1s;
	width: 100%;
	text-align: center;
}

.trackship-btn:hover {
	opacity: 0.92;
	color: #fff;
	transform: translateY(-1px);
}

.trackship-btn:active { transform: translateY(0); }

/* ─── Login Form ─── */
.trackship-login-wrap { max-width: 400px; margin: 0 auto; }

/* ─── Account Page ─── */
.trackship-account { max-width: 560px; margin: 0 auto; }

/* ─── Responsive ─── */
@media (max-width: 600px) {
	.ts-card { padding: 28px 20px; border-radius: 14px; }
	.ts-header-inner { padding: 0 16px; }
	.ts-logo-text { font-size: 17px; }
	.ts-nav-link { padding: 6px 10px; font-size: 13px; }
	.ts-nav-link--cta { margin-left: 2px; }
	.trackship-eta-time { font-size: 32px; }
}