.shiptrack-widget {
	max-width: 720px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: #0f172a;
	box-sizing: border-box;
}
.shiptrack-widget *,
.shiptrack-widget *::before,
.shiptrack-widget *::after {
	box-sizing: inherit;
}

.shiptrack-input,
.shiptrack-widget select,
.shiptrack-widget input[type="text"],
.shiptrack-widget input[type="email"],
.shiptrack-widget input[type="number"],
.shiptrack-widget input[type="url"] {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #cbd5e1;
	border-radius: 6px;
	font-size: 14px;
	margin-bottom: 10px;
	background: #fff;
	color: #0f172a;
}

.shiptrack-btn {
	display: inline-block;
	padding: 10px 20px;
	background: #1d4ed8;
	color: #fff !important;
	border: none;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
}
.shiptrack-btn:hover {
	background: #1e40af;
	color: #fff !important;
}

.shiptrack-track-form {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	align-items: flex-start;
}
.shiptrack-track-form .shiptrack-input {
	flex: 1;
	min-width: 200px;
	margin-bottom: 0;
}

.shiptrack-quote-form,
.shiptrack-ship-form {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.shiptrack-quote-form .shiptrack-field label {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: #475569;
	margin-bottom: 4px;
}
.shiptrack-ship-form fieldset {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 16px;
	margin-bottom: 16px;
}
.shiptrack-ship-form legend {
	font-weight: 700;
	padding: 0 6px;
	font-size: 13px;
	color: #1d4ed8;
}

.shiptrack-error {
	color: #b91c1c;
	background: #fef2f2;
	border: 1px solid #fecaca;
	border-radius: 6px;
	padding: 10px 14px;
	font-size: 14px;
	margin-top: 12px;
}

/* The customer-facing tracking page only (search form + result) uses its own font, matching
   the USPS-style reference — scoped to .shiptrack-track (present only on the track
   shortcode's wrapper) rather than .shiptrack-widget, so the Quote and Ship forms keep the
   site-wide font stack untouched. */
.shiptrack-track {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.shiptrack-result {
	margin-top: 20px;
}
.shiptrack-tracking-number {
	font-size: 13px;
	letter-spacing: 0.05em;
	color: #64748b;
	font-weight: 600;
	margin-bottom: 12px;
}

/* Delivery estimate hero card */
.shiptrack-delivery-card {
	border-left: 4px solid #1e40af;
	background: #eff6ff;
	border-radius: 6px;
	padding: 16px 20px;
	margin: 12px 0 20px;
}
.shiptrack-delivery-card.is-delivered {
	border-left-color: #047857;
	background: #ecfdf5;
}
.shiptrack-delivery-card.is-voided {
	border-left-color: #94a3b8;
	background: #f8fafc;
}
.shiptrack-delivery-eyebrow {
	font-size: 16px;
	font-weight: 700;
	color: #1e3a8a;
	margin: 0 0 8px;
}
.is-delivered .shiptrack-delivery-eyebrow {
	color: #065f46;
}
.is-voided .shiptrack-delivery-eyebrow {
	color: #475569;
}
.shiptrack-delivery-sub {
	font-size: 14px;
	color: #334155;
	margin: 0 0 8px;
}
.shiptrack-delivery-main {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 24px;
}
.shiptrack-delivery-weekday {
	display: block;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #1e3a8a;
	margin: 0 0 4px;
}
.shiptrack-delivery-daymonth {
	display: flex;
	align-items: baseline;
	gap: 8px;
}
.shiptrack-delivery-day {
	font-size: 40px;
	font-weight: 700;
	color: #1e3a8a;
	line-height: 1;
}
.shiptrack-delivery-monthyear {
	font-size: 14px;
	font-weight: 600;
	color: #1e3a8a;
}
.shiptrack-delivery-time-block {
	border-left: 1px solid #bfdbfe;
	padding-left: 20px;
}
.shiptrack-delivery-by {
	font-size: 13px;
	color: #1e3a8a;
	margin: 0;
}
.shiptrack-delivery-time {
	font-size: 22px;
	font-weight: 700;
	color: #1e3a8a;
	margin: 0;
}
.shiptrack-delivery-scan {
	font-size: 13px;
	color: #334155;
	margin: 12px 0 0;
	padding-top: 12px;
	border-top: 1px solid rgba(30,58,138,0.15);
}

/* Timeline — newest at the top, progress conceptually moving upward. Two kinds of rows share
   this one list: the three permanent progress-spine stages ("is-stage" — Available for
   Delivery, Out for Delivery, Delivered), and the shipment's actual tracking events
   ("is-detail" — Label Created, Picked Up, In Transit, Arrived at Facility, On Hold, ...).
   Both read the same way — bold, uppercase, dark indigo once reached — EXCEPT the single
   current actual event, which gets a dynamic section heading above it (e.g. "On the Way",
   "Moving Through Network") plus its own medium steel-blue accent and normal-case title, so
   the one live update stands out from settled history.

   Each row draws its OWN connector segment (a ::before line spanning that row's full height,
   including its own bottom spacing) so the line can visually track progress, matching the
   reference USPS-style design: a thin, muted line with small dots above the active point
   (upcoming spine stages), thickening into a bolder dark indigo line with larger dots from
   the active point down through everything already completed — exactly mirroring that row's
   own dot state. Row spacing is deliberately padding, not margin — adjoining margins on
   sibling <li>s would collapse and leave a gap the line doesn't cover, while padding stays
   inside each row's own box, so consecutive rows' lines always touch with no seam. Heading
   rows always sit inside an already-reached run (a heading only ever precedes the current
   event), so their segment is always the thicker, dark style. "See All Tracking History"
   lives in its own block entirely outside this list (see .shiptrack-history below), so it
   never draws a segment or interrupts the line. */
.shiptrack-timeline {
	list-style: none;
	margin: 0 0 4px;
	padding: 0 0 0 20px;
	position: relative;
}
.shiptrack-timeline li {
	position: relative;
	margin: 0;
	padding: 0 0 18px 4px;
}
/* Once a progress-spine stage is actually reached, it carries real description/location/
   date lines and gets extra breathing room around it, same as any other real event getting
   more room for its content. */
.shiptrack-timeline li.is-stage.is-completed,
.shiptrack-timeline li.is-stage.is-current {
	padding-bottom: 40px;
}
.shiptrack-timeline li.is-stage:last-child {
	padding-bottom: 4px;
}
.shiptrack-timeline li:last-child {
	padding-bottom: 4px;
}
/* Every dot (placeholder or real event, any size) and this line share ONE anchor point:
   `left: -20px` plus `transform: translateX(-50%)`, which centers each element ON that exact
   x-coordinate regardless of its own width. That's what guarantees the line and every dot
   stay on a single straight vertical axis — a plain `left` value tuned per element size (the
   old approach) requires re-deriving the right offset by hand every time a size changes and
   is exactly how the line and dots can end up misaligned. Only the shared anchor value itself
   (desktop vs. mobile, in the media query below) ever needs to change. */
.shiptrack-timeline li::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 0;
	bottom: 0;
	width: 2px;
	transform: translateX(-50%);
	background: #cbd5e1;
}
.shiptrack-timeline li.is-completed::before,
.shiptrack-timeline li.is-current::before,
.shiptrack-timeline li.shiptrack-timeline-heading-row::before {
	width: 4px;
	background: #25245F;
}

.shiptrack-timeline-heading-row {
	padding-bottom: 10px;
	padding-left: 0;
}
.shiptrack-timeline-heading-row:not(:first-child) {
	padding-top: 8px;
}
.shiptrack-timeline-heading {
	margin: 0;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.01em;
	color: #3971A4;
}

.shiptrack-dot {
	position: absolute;
	left: -20px;
	top: 4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	border: 2px solid #fff;
	transform: translateX(-50%);
}
.shiptrack-dot.is-current {
	top: 1px;
	width: 16px;
	height: 16px;
}
/* Color follows state: a completed spine stage AND a completed (already-settled) actual
   event both read as standard dark-indigo progress. The single CURRENT event — whichever
   row it is, one of the three default stages that just became active or any other actual
   event — always gets the medium steel-blue active accent; a current detail event also gets
   its own dynamic section heading. Every other actual event, however recent, is just a
   plain, self-labeled past entry like the spine's own stage names. */
.shiptrack-dot.is-completed {
	background: #25245F;
	box-shadow: 0 0 0 1px #25245F;
}
.shiptrack-dot.is-current {
	background: #3971A4;
	box-shadow: 0 0 0 1px #3971A4, 0 0 0 4px rgba(57, 113, 164, 0.15);
}

/* A future default-stage placeholder (see shiptrack_render_placeholder_li()) is a completely
   separate, minimal element — not a shiptrack-event with an "upcoming" modifier — so it can
   never inherit real-event sizing, weight, or content by accident. Small dot, small muted
   text, standard (not the reached spine's extra-generous) row spacing. */
.shiptrack-placeholder-dot {
	position: absolute;
	left: -20px;
	top: 5px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #cbd5e1;
	transform: translateX(-50%);
}
.shiptrack-placeholder-label {
	margin: 0;
	font-size: 13px;
	font-weight: 500;
	color: #94a3b8;
}

.shiptrack-step-label {
	font-size: 14px;
	font-weight: 700;
	color: #0f172a;
	margin: 0;
}
.shiptrack-step-label.is-completed {
	color: #25245F;
}
.shiptrack-step-label.is-current {
	color: #3971A4;
}
.shiptrack-event-desc {
	font-size: 13px;
	color: #475569;
	margin: 2px 0;
}
.shiptrack-event-meta {
	font-size: 12px;
	color: #94a3b8;
	margin: 0;
}
.shiptrack-empty {
	color: #64748b;
	font-size: 14px;
}

/* "See All Tracking History" / "Hide Tracking History" — a plain control block placed well
   below the completed timeline, with no dot, no connector segment, and no participation in
   the timeline at all — it's a sibling <div> after the closing </ol>, not a node inside it.
   Collapsed by default only once JS confirms it can restore the content (the "js-collapsed"
   class is added at runtime by the enqueued script) — with no JS, the full history stays
   visible and both buttons are simply inert, so real tracking data is never hidden outright.
   The expanded log reuses the same .shiptrack-timeline row/dot/label styling (via
   .shiptrack-timeline-history) for one consistent visual language, but as its own <ol>,
   entirely separate from the main progress list above. */
.shiptrack-history {
	margin-top: 24px;
}
.shiptrack-history-btn {
	display: inline-block;
	background: none;
	border: none;
	padding: 6px 0;
	margin: 0;
	font: inherit;
	font-size: 13px;
	font-weight: 600;
	color: #3971A4;
	cursor: pointer;
}
.shiptrack-history-btn:hover {
	text-decoration: underline;
}
.shiptrack-history.js-collapsed .shiptrack-history-body {
	display: none;
}
.shiptrack-history:not(.js-collapsed) .shiptrack-history-btn-top {
	display: none;
}
.shiptrack-timeline-history {
	margin-top: 16px;
	margin-bottom: 0;
}
.shiptrack-history-btn-bottom {
	margin-top: 6px;
}

@media (max-width: 480px) {
	.shiptrack-timeline {
		padding-left: 16px;
	}
	/* Same shared-anchor rule as desktop, just moved in to match the narrower padding above —
	   the line, every real-event dot size, and the placeholder dot all move to the same
	   -16px anchor together, so they stay on one aligned axis on mobile too. */
	.shiptrack-timeline li::before,
	.shiptrack-dot,
	.shiptrack-placeholder-dot {
		left: -16px;
	}
	.shiptrack-timeline li.is-stage.is-completed,
	.shiptrack-timeline li.is-stage.is-current {
		padding-bottom: 32px;
	}
	.shiptrack-timeline li.is-stage:last-child {
		padding-bottom: 4px;
	}
	.shiptrack-history-btn {
		padding: 10px 0;
		font-size: 14px;
	}
}

/* Tabs (combined [shiptrack] view) */
.shiptrack-tabs {
	display: flex;
	gap: 4px;
	border-bottom: 2px solid #e2e8f0;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.shiptrack-tabs a {
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	color: #475569;
	text-decoration: none;
	border-bottom: 2px solid transparent;
	margin-bottom: -2px;
}
.shiptrack-tabs a.is-active {
	color: #1d4ed8;
	border-bottom-color: #1d4ed8;
}

.shiptrack-quote-result {
	margin-top: 16px;
	padding: 16px 20px;
	background: #eff6ff;
	border-left: 4px solid #1e40af;
	border-radius: 6px;
}
.shiptrack-quote-cost {
	font-size: 28px;
	font-weight: 700;
	color: #1e3a8a;
	margin: 0 0 4px;
}
.shiptrack-quote-meta {
	font-size: 13px;
	color: #334155;
	margin: 2px 0;
}

.shiptrack-ship-success {
	padding: 20px;
	background: #ecfdf5;
	border-left: 4px solid #047857;
	border-radius: 6px;
}

.shiptrack-ship-locked {
	padding: 16px 20px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 6px;
}
.shiptrack-ship-locked p {
	margin-top: 0;
}

@media (max-width: 480px) {
	.shiptrack-delivery-main {
		gap: 12px;
	}
	.shiptrack-delivery-day {
		font-size: 32px;
	}
	.shiptrack-delivery-time {
		font-size: 18px;
	}
	.shiptrack-time-block,
	.shiptrack-delivery-time-block {
		padding-left: 12px;
	}
}