/* Shopward Delivery — Customer-facing styles (LTR base) */

.shopward-tracking {
	margin: 32px 0;
	padding: 24px;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
	background: #ffffff;
	color: #111827;
	font-size: 14px;
	line-height: 1.5;
}
.shopward-tracking *,
.shopward-tracking *::before,
.shopward-tracking *::after { box-sizing: border-box; }

.shopward-tracking__title {
	margin: 0 0 16px;
	font-size: 20px;
	font-weight: 600;
}

.shopward-tracking__status {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	font-weight: 600;
	font-size: 13px;
	margin-bottom: 16px;
	background: #f3f4f6;
	color: #374151;
}
.shopward-tracking__status.sw-status--pending          { background: #fef3c7; color: #92400e; }
.shopward-tracking__status.sw-status--assigned         { background: #dbeafe; color: #1e40af; }
.shopward-tracking__status.sw-status--en_route_pickup  { background: #e0e7ff; color: #3730a3; }
.shopward-tracking__status.sw-status--picked_up        { background: #ede9fe; color: #5b21b6; }
.shopward-tracking__status.sw-status--en_route_dropoff { background: #d1fae5; color: #065f46; }
.shopward-tracking__status.sw-status--delivered        { background: #d1fae5; color: #065f46; }
.shopward-tracking__status.sw-status--failed,
.shopward-tracking__status.sw-status--returned         { background: #fee2e2; color: #991b1b; }
.shopward-tracking__status.sw-status--cancelled        { background: #f3f4f6; color: #6b7280; }

.shopward-tracking__link {
	display: inline-block;
	margin-bottom: 20px;
}

.shopward-rider {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: #f9fafb;
	border-radius: 10px;
	margin-bottom: 20px;
}
.shopward-rider__photo {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
}
.shopward-rider__details strong { display: block; font-size: 12px; color: #6b7280; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; }
.shopward-rider__details p      { margin: 4px 0 0; font-size: 15px; font-weight: 600; }

.shopward-steps {
	display: flex;
	gap: 6px;
	margin: 20px 0 28px;
	overflow-x: auto;
	padding-bottom: 4px;
}
.shopward-step {
	flex: 1 0 84px;
	min-width: 84px;
	text-align: center;
	padding: 14px 8px;
	border-radius: 10px;
	background: #f9fafb;
	font-size: 12px;
	color: #9ca3af;
	position: relative;
	transition: background 0.2s, color 0.2s, transform 0.2s;
}
.shopward-step--done    { background: #d1fae5; color: #065f46; }
.shopward-step--active  {
	background: #111827;
	color: #ffffff;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	transform: translateY(-2px);
}
.shopward-step__icon {
	display: block;
	width: 24px;
	height: 24px;
	margin: 0 auto 6px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}

/* Inline SVG icons via data URIs (currentColor friendly via mask). */
.shopward-step__icon--clipboard { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='8' y='2' width='8' height='4' rx='1'/><path d='M16 4h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h2'/><path d='M9 12h6M9 16h6'/></svg>"); }
.shopward-step__icon--bike      { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='6' cy='17' r='3'/><circle cx='18' cy='17' r='3'/><path d='M6 17l4-9h4l4 9M14 8l-2-3h-2'/></svg>"); }
.shopward-step__icon--pin       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21s-7-7.5-7-12a7 7 0 1 1 14 0c0 4.5-7 12-7 12z'/><circle cx='12' cy='9' r='2.5'/></svg>"); }
.shopward-step__icon--box       { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M21 8 12 3 3 8v8l9 5 9-5V8z'/><path d='M3 8l9 5 9-5M12 13v8'/></svg>"); }
.shopward-step__icon--scooter   { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='5' cy='18' r='2.5'/><circle cx='19' cy='18' r='2.5'/><path d='M14 18H8M14 18l-2-9h-2M14 9h3l2 6'/></svg>"); }
.shopward-step__icon--check     { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>"); }

.shopward-timeline { margin-top: 24px; }
.shopward-timeline__heading {
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
}
.shopward-timeline__list {
	list-style: none;
	padding: 0;
	margin: 12px 0;
	position: relative;
}
.shopward-timeline__list::before {
	content: '';
	position: absolute;
	left: 6px;
	top: 8px;
	bottom: 8px;
	width: 2px;
	background: #e5e7eb;
}
.shopward-timeline__item {
	padding-left: 24px;
	margin-bottom: 16px;
	position: relative;
}
.shopward-timeline__item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #e5e7eb;
	border: 3px solid #ffffff;
	box-shadow: 0 0 0 2px #e5e7eb;
}
.shopward-timeline__item--delivered::before  { background: #10b981; box-shadow: 0 0 0 2px #10b981; }
.shopward-timeline__item--picked_up::before  { background: #8b5cf6; box-shadow: 0 0 0 2px #8b5cf6; }
.shopward-timeline__item--failed::before,
.shopward-timeline__item--returned::before   { background: #ef4444; box-shadow: 0 0 0 2px #ef4444; }
.shopward-timeline__meta strong { display: block; font-size: 14px; }
.shopward-timeline__time { font-size: 12px; color: #9ca3af; }
.shopward-timeline__desc { font-size: 13px; color: #6b7280; margin: 4px 0 0; }