/*
 * Tradiva Shipment Tracking - front end.
 * Every rule is scoped to .tdv-trk and layout properties use !important so theme /
 * page-builder styles (lists, headings, paragraphs, alignwide, buttons) cannot break it.
 * Layout reacts to the width of the box itself (container queries), not the screen.
 */

/* ---------- Base & reset ---------- */
.tdv-trk {
	--tdv-navy: #0f2a52;
	--tdv-navy-deep: #0a1f3d;
	--tdv-gold: #c9a227;
	--tdv-gold-light: #e6c65c;
	--tdv-gold-soft: #f7f0d9;
	--tdv-ink: #1d2633;
	--tdv-gray: #6b7686;
	--tdv-line: #e3e8ef;
	--tdv-bg: #f5f7fa;
	display: block !important;
	width: 100% !important;
	max-width: 1100px !important;
	margin: 0 auto 48px !important;
	padding: 0 !important;
	float: none !important;
	position: relative !important;
	left: auto !important;
	right: auto !important;
	transform: none !important;
	color: var(--tdv-ink);
	font-size: 16px;
	line-height: 1.6;
	text-align: start;
	box-sizing: border-box;
	container-type: inline-size;
	container-name: tdvtrk;
}
.tdv-trk *,
.tdv-trk *::before,
.tdv-trk *::after { box-sizing: border-box !important; }
.tdv-trk br { display: none !important; }
.tdv-trk p:empty { display: none !important; }
/* Paragraph tags injected by wpautop / page builders around our elements are made layout-neutral. */
.tdv-trk p:not([class]) { display: contents !important; }
.tdv-trk h2, .tdv-trk h3 {
	margin: 0 !important; padding: 0 !important; border: 0 !important; background: none !important;
	line-height: 1.35 !important; letter-spacing: normal !important; text-transform: none !important;
	font-family: inherit; color: var(--tdv-navy);
}
.tdv-trk h2::before, .tdv-trk h2::after, .tdv-trk h3::before, .tdv-trk h3::after { content: none !important; display: none !important; }
.tdv-trk p { margin: 0 !important; padding: 0 !important; }
.tdv-trk ol, .tdv-trk ul { list-style: none !important; margin: 0 !important; padding: 0 !important; counter-reset: none !important; }
.tdv-trk li { list-style: none !important; margin: 0 !important; padding: 0 !important; background: none !important; border: 0 !important; }
.tdv-trk li::marker { content: "" !important; font-size: 0 !important; }
.tdv-trk li::before, .tdv-trk li::after { content: none !important; display: none !important; }
.tdv-trk dl, .tdv-trk dt, .tdv-trk dd { margin: 0 !important; padding: 0 !important; float: none !important; width: auto !important; }
.tdv-trk li, .tdv-trk div, .tdv-trk span, .tdv-trk strong, .tdv-trk time { float: none !important; }
.tdv-trk time, .tdv-trk em, .tdv-trk dt, .tdv-trk dd { font-style: normal !important; }
.tdv-trk svg.tdv-ico {
	display: inline-block !important; width: 1.15em !important; height: 1.15em !important;
	max-width: none !important; flex-shrink: 0 !important; vertical-align: middle !important;
	fill: none !important; margin: 0 !important;
}
.tdv-trk .tdv-trk-sr {
	position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important;
	clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: -1px !important; padding: 0 !important; border: 0 !important;
}
.tdv-trk .tdv-trk-hp { position: absolute !important; left: -9999px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }

/* ---------- Cards ---------- */
.tdv-trk .tdv-trk-card {
	display: block !important;
	background: #fff !important;
	border: 1px solid var(--tdv-line) !important;
	border-radius: 18px !important;
	box-shadow: 0 12px 34px rgba(15, 42, 82, .08) !important;
	padding: 32px !important;
	margin: 0 0 24px !important;
}

/* ---------- Search box ---------- */
.tdv-trk .tdv-trk-search {
	background: linear-gradient(150deg, var(--tdv-navy) 0%, var(--tdv-navy-deep) 100%) !important;
	border: 0 !important;
	color: #fff;
	position: relative !important;
	overflow: hidden !important;
	padding: 40px !important;
	text-align: center !important;
}
.tdv-trk .tdv-trk-search::before {
	content: "" !important; display: block !important; position: absolute !important;
	width: 260px; height: 260px; top: -110px; inset-inline-start: -90px;
	border-radius: 50%; background: radial-gradient(circle, rgba(201, 162, 39, .28) 0%, rgba(201, 162, 39, 0) 70%);
	pointer-events: none;
}
.tdv-trk .tdv-trk-search::after {
	content: "" !important; display: block !important; position: absolute !important;
	width: 320px; height: 320px; bottom: -190px; inset-inline-end: -110px;
	border-radius: 50%; border: 2px dashed rgba(201, 162, 39, .3); pointer-events: none;
}
.tdv-trk .tdv-trk-search > * { position: relative !important; z-index: 1; }
.tdv-trk .tdv-trk-search-head {
	display: flex !important; flex-direction: column !important; align-items: center !important;
	gap: 12px !important; margin: 0 0 26px !important; text-align: center !important;
}
.tdv-trk .tdv-trk-search-icon {
	width: 58px !important; height: 58px !important; border-radius: 16px !important;
	background: rgba(201, 162, 39, .16) !important; color: var(--tdv-gold) !important;
	display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important;
}
.tdv-trk .tdv-trk-search-icon svg.tdv-ico { width: 30px !important; height: 30px !important; }
.tdv-trk .tdv-trk-title { color: #fff !important; font-size: 28px !important; font-weight: 800 !important; text-align: center !important; }
.tdv-trk .tdv-trk-intro { color: #cfd8e6 !important; font-size: 15px !important; margin-top: 6px !important; text-align: center !important; }

.tdv-trk .tdv-trk-form {
	display: flex !important; flex-direction: row !important; flex-wrap: nowrap !important;
	gap: 12px !important; align-items: stretch !important;
	max-width: 720px !important; margin: 0 auto !important; padding: 0 !important;
}
.tdv-trk .tdv-trk-field { position: relative !important; flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; }
.tdv-trk .tdv-trk-field-ico {
	position: absolute !important; top: 50% !important; transform: translateY(-50%) !important;
	inset-inline-start: 18px !important; color: var(--tdv-gray) !important;
	display: flex !important; pointer-events: none !important; z-index: 2 !important;
}
.tdv-trk .tdv-trk-field-ico svg.tdv-ico { width: 22px !important; height: 22px !important; }
.tdv-trk .tdv-trk-field input.tdv-trk-input {
	display: block !important;
	width: 100% !important;
	max-width: 100% !important;
	height: 60px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 20px !important;
	padding-inline-start: 52px !important;
	border: 2px solid transparent !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--tdv-ink) !important;
	font-size: 18px !important;
	font-family: inherit !important;
	line-height: normal !important;
	letter-spacing: .4px !important;
	box-shadow: none !important;
	outline: none !important;
	transition: border-color .2s, box-shadow .2s;
}
.tdv-trk[dir="rtl"] .tdv-trk-field input.tdv-trk-input { text-align: right !important; direction: rtl !important; }
.tdv-trk[dir="ltr"] .tdv-trk-field input.tdv-trk-input { text-align: left !important; direction: ltr !important; }
.tdv-trk .tdv-trk-field input.tdv-trk-input::placeholder { color: #9aa4b2 !important; letter-spacing: 0 !important; opacity: 1 !important; }
.tdv-trk .tdv-trk-field input.tdv-trk-input:focus { border-color: var(--tdv-gold) !important; box-shadow: 0 0 0 4px rgba(201, 162, 39, .25) !important; }
.tdv-trk .tdv-trk-form button.tdv-trk-btn {
	display: inline-flex !important; align-items: center !important; justify-content: center !important;
	flex: 0 0 auto !important;
	width: auto !important;
	height: 60px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 40px !important;
	border: 0 !important;
	border-radius: 12px !important;
	background: var(--tdv-gold) !important;
	background-image: none !important;
	color: var(--tdv-navy) !important;
	font-size: 18px !important;
	font-weight: 800 !important;
	font-family: inherit !important;
	line-height: 1 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	text-decoration: none !important;
	white-space: nowrap !important;
	cursor: pointer !important;
	box-shadow: 0 10px 22px rgba(201, 162, 39, .3) !important;
	transition: background .2s, transform .2s;
}
.tdv-trk .tdv-trk-form button.tdv-trk-btn:hover,
.tdv-trk .tdv-trk-form button.tdv-trk-btn:focus-visible { background: #e0b832 !important; color: var(--tdv-navy) !important; transform: translateY(-2px); }
.tdv-trk .tdv-trk-form button.tdv-trk-btn:focus-visible { outline: 3px solid #fff !important; outline-offset: 2px !important; }

.tdv-trk .tdv-trk-trackby {
	display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: center !important;
	gap: 8px !important; margin: 20px auto 0 !important; padding: 0 !important;
}
.tdv-trk .tdv-trk-trackby-label { color: #cfd8e6 !important; font-size: 14px !important; margin-inline-end: 2px !important; }
.tdv-trk .tdv-trk-chip {
	display: inline-block !important; padding: 5px 14px !important; margin: 0 !important; border-radius: 30px !important;
	background: rgba(255, 255, 255, .08) !important; border: 1px solid rgba(201, 162, 39, .45) !important;
	color: var(--tdv-gold-light) !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.5 !important;
}
.tdv-trk .tdv-trk-disclaimer {
	display: flex !important; gap: 8px !important; align-items: flex-start !important; justify-content: center !important;
	max-width: 720px !important; margin: 18px auto 0 !important;
	color: #aebbd0 !important; font-size: 13px !important; line-height: 1.7 !important; text-align: start !important;
}
.tdv-trk .tdv-trk-disclaimer svg.tdv-ico { margin-top: 3px !important; color: var(--tdv-gold) !important; }

/* ---------- Messages ---------- */
.tdv-trk .tdv-trk-msg {
	display: flex !important; align-items: flex-start !important; gap: 10px !important;
	padding: 14px 18px !important; margin: 0 0 18px !important; border-radius: 12px !important;
	font-size: 15px !important; line-height: 1.7 !important; border: 1px solid !important;
}
.tdv-trk .tdv-trk-msg svg.tdv-ico { margin-top: 4px !important; }
.tdv-trk .tdv-trk-msg-error { background: #fdf0f0 !important; border-color: #f2c4c4 !important; color: #9b2c2c !important; }
.tdv-trk .tdv-trk-msg-info { background: #eef4fb !important; border-color: #c9dbf1 !important; color: var(--tdv-navy) !important; }
.tdv-trk .tdv-trk-msg-warning { background: #fdf6e6 !important; border-color: #f0dba5 !important; color: #8a5d00 !important; }

/* ---------- Shipment header ---------- */
.tdv-trk .tdv-trk-head {
	display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important;
	gap: 14px !important; padding: 0 0 22px !important; margin: 0 0 24px !important; border-bottom: 1px solid var(--tdv-line) !important;
}
.tdv-trk .tdv-trk-head-main { display: flex !important; flex-direction: column !important; gap: 2px !important; }
.tdv-trk .tdv-trk-label { display: block !important; color: var(--tdv-gray) !important; font-size: 13px !important; line-height: 1.4 !important; }
.tdv-trk .tdv-trk-number {
	display: block !important; font-size: 26px !important; font-weight: 800 !important; color: var(--tdv-navy) !important;
	letter-spacing: 1px !important; line-height: 1.3 !important; unicode-bidi: isolate !important;
}
.tdv-trk[dir="rtl"] .tdv-trk-number { text-align: right !important; }
.tdv-trk .tdv-trk-head-side { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; }
.tdv-trk .tdv-trk-mode {
	display: inline-flex !important; align-items: center !important; gap: 6px !important;
	padding: 7px 14px !important; border-radius: 30px !important;
	background: var(--tdv-bg) !important; color: var(--tdv-navy) !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important;
}
.tdv-trk .tdv-trk-mode svg.tdv-ico { color: var(--tdv-gold) !important; width: 18px !important; height: 18px !important; }
.tdv-trk .tdv-trk-status {
	display: inline-block !important; padding: 7px 16px !important; border-radius: 30px !important;
	font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important;
	background: #e7eefb !important; color: var(--tdv-navy) !important;
}
.tdv-trk .tdv-trk-status.tdv-st-delivered { background: #e3f6ee !important; color: #137a52 !important; }
.tdv-trk .tdv-trk-status.tdv-st-on_hold { background: #fdf3dd !important; color: #8a5d00 !important; }
.tdv-trk .tdv-trk-status.tdv-st-cancelled { background: #fbe5e5 !important; color: #a32d2d !important; }
.tdv-trk .tdv-trk-status.tdv-st-in_transit,
.tdv-trk .tdv-trk-status.tdv-st-departed { background: var(--tdv-gold-soft) !important; color: #7a5f08 !important; }

/* ---------- Route ---------- */
.tdv-trk .tdv-trk-route {
	display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(120px, 2fr) minmax(0, 1fr) !important;
	align-items: center !important; gap: 20px !important;
	background: var(--tdv-bg) !important; border-radius: 14px !important; padding: 24px 26px !important; margin: 0 0 8px !important;
}
.tdv-trk .tdv-trk-point { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; min-width: 0 !important; text-align: start !important; }
.tdv-trk .tdv-trk-point-end { align-items: flex-end !important; text-align: end !important; }
.tdv-trk .tdv-trk-point strong { display: block !important; color: var(--tdv-navy) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; }
.tdv-trk .tdv-trk-point-ico { color: var(--tdv-gold) !important; display: flex !important; }
.tdv-trk .tdv-trk-point-ico svg.tdv-ico { width: 22px !important; height: 22px !important; }
.tdv-trk .tdv-trk-route-line {
	display: block !important; position: relative !important; height: 4px !important; border-radius: 4px !important; margin: 0 20px !important;
	background: repeating-linear-gradient(90deg, #c7d0dc 0 8px, transparent 8px 14px) !important;
}
.tdv-trk .tdv-trk-route-fill {
	display: block !important; position: absolute !important; top: 0 !important; inset-inline-start: 0 !important; height: 100% !important;
	background: var(--tdv-gold) !important; border-radius: 4px !important;
}
.tdv-trk .tdv-trk-route-vehicle {
	position: absolute !important; top: 50% !important;
	width: 42px !important; height: 42px !important; margin-inline-start: -21px !important; margin-top: -21px !important;
	border-radius: 50% !important; background: var(--tdv-navy) !important; color: #fff !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	box-shadow: 0 0 0 6px rgba(15, 42, 82, .12) !important;
}
.tdv-trk .tdv-trk-route-vehicle svg.tdv-ico { width: 22px !important; height: 22px !important; }

/* ---------- Sections ---------- */
.tdv-trk .tdv-trk-section { display: block !important; margin: 30px 0 0 !important; padding: 0 !important; }
.tdv-trk .tdv-trk-section-head {
	display: flex !important; justify-content: space-between !important; align-items: center !important;
	gap: 10px !important; margin: 0 0 16px !important;
}
.tdv-trk .tdv-trk-section-head h3 { font-size: 18px !important; font-weight: 800 !important; }
.tdv-trk .tdv-trk-percent {
	display: inline-block !important; padding: 3px 12px !important; border-radius: 30px !important;
	background: var(--tdv-gold-soft) !important; color: #7a5f08 !important; font-weight: 800 !important; font-size: 14px !important; white-space: nowrap !important;
}

/* ---------- Progress bar ---------- */
.tdv-trk .tdv-trk-bar {
	display: block !important; position: relative !important; width: 100% !important; height: 10px !important;
	border-radius: 10px !important; background: var(--tdv-line) !important; overflow: hidden !important; margin: 0 0 26px !important; padding: 0 !important;
}
.tdv-trk .tdv-trk-bar > span {
	display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; inset-inline-start: 0 !important;
	height: 100% !important; margin: 0 !important; border-radius: 10px !important;
	background: linear-gradient(90deg, var(--tdv-navy), var(--tdv-gold)) !important;
}
.tdv-trk[dir="rtl"] .tdv-trk-bar > span { background: linear-gradient(270deg, var(--tdv-navy), var(--tdv-gold)) !important; }

/* ---------- Steps (horizontal by default) ---------- */
.tdv-trk ol.tdv-trk-steps {
	display: grid !important; grid-template-columns: repeat(9, minmax(0, 1fr)) !important;
	gap: 0 !important; align-items: start !important; width: 100% !important;
}
.tdv-trk ol.tdv-trk-steps > li {
	display: flex !important; flex-direction: column !important; align-items: center !important;
	position: relative !important; text-align: center !important; padding: 0 3px !important; min-width: 0 !important;
}
.tdv-trk ol.tdv-trk-steps > li::before {
	content: "" !important; display: block !important; position: absolute !important;
	top: 17px !important; height: 3px !important; width: auto !important; bottom: auto !important;
	inset-inline-start: calc(-50% + 21px) !important; inset-inline-end: calc(50% + 21px) !important;
	background: var(--tdv-line) !important; border-radius: 3px !important; z-index: 0 !important;
}
.tdv-trk ol.tdv-trk-steps > li:first-child::before { display: none !important; }
.tdv-trk ol.tdv-trk-steps > li.is-done::before,
.tdv-trk ol.tdv-trk-steps > li.is-current::before { background: var(--tdv-gold) !important; }
.tdv-trk .tdv-trk-dot {
	position: relative !important; z-index: 1 !important;
	width: 36px !important; height: 36px !important; min-width: 36px !important; margin: 0 0 8px !important; border-radius: 50% !important;
	display: flex !important; align-items: center !important; justify-content: center !important;
	background: #fff !important; border: 2px solid var(--tdv-line) !important; color: var(--tdv-gray) !important;
	font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important;
}
.tdv-trk .tdv-trk-dot svg.tdv-ico { width: 18px !important; height: 18px !important; }
.tdv-trk ol.tdv-trk-steps > li.is-done .tdv-trk-dot { background: var(--tdv-gold) !important; border-color: var(--tdv-gold) !important; color: #fff !important; }
.tdv-trk ol.tdv-trk-steps > li.is-current .tdv-trk-dot {
	background: var(--tdv-navy) !important; border-color: var(--tdv-navy) !important; color: #fff !important;
	box-shadow: 0 0 0 6px rgba(15, 42, 82, .14) !important; animation: tdv-pulse 2s infinite;
}
.tdv-trk .tdv-trk-step-label { display: block !important; font-size: 12px !important; line-height: 1.45 !important; color: var(--tdv-gray) !important; }
.tdv-trk ol.tdv-trk-steps > li.is-done .tdv-trk-step-label { color: var(--tdv-ink) !important; }
.tdv-trk ol.tdv-trk-steps > li.is-current .tdv-trk-step-label { color: var(--tdv-navy) !important; font-weight: 800 !important; }
@keyframes tdv-pulse {
	0%, 100% { box-shadow: 0 0 0 4px rgba(15, 42, 82, .16); }
	50% { box-shadow: 0 0 0 9px rgba(15, 42, 82, .06); }
}
@media (prefers-reduced-motion: reduce) {
	.tdv-trk ol.tdv-trk-steps > li.is-current .tdv-trk-dot { animation: none !important; }
}

/* ---------- Details ---------- */
.tdv-trk dl.tdv-trk-details { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; }
.tdv-trk .tdv-trk-detail { display: block !important; background: var(--tdv-bg) !important; border-radius: 12px !important; padding: 13px 16px !important; min-width: 0 !important; }
.tdv-trk .tdv-trk-detail dt { display: block !important; color: var(--tdv-gray) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; margin: 0 0 2px !important; }
.tdv-trk .tdv-trk-detail dd { display: block !important; color: var(--tdv-navy) !important; font-weight: 700 !important; font-size: 15px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; }
.tdv-trk[dir="rtl"] .tdv-trk-detail dd { text-align: right !important; }
.tdv-trk[dir="ltr"] .tdv-trk-detail dd { text-align: left !important; }
.tdv-trk .tdv-trk-note {
	display: block !important; margin: 14px 0 0 !important; padding: 14px 16px !important; border-radius: 12px !important;
	background: var(--tdv-gold-soft) !important; color: #5e4a08 !important; font-size: 15px !important;
	border-inline-start: 4px solid var(--tdv-gold) !important;
}

/* ---------- Timeline ---------- */
.tdv-trk ol.tdv-trk-timeline { display: block !important; position: relative !important; }
.tdv-trk ol.tdv-trk-timeline > li { display: block !important; position: relative !important; padding-inline-start: 34px !important; padding-bottom: 22px !important; }
.tdv-trk ol.tdv-trk-timeline > li::before {
	content: "" !important; display: block !important; position: absolute !important;
	top: 16px !important; bottom: -2px !important; height: auto !important;
	inset-inline-start: 8px !important; width: 2px !important; background: var(--tdv-line) !important;
}
.tdv-trk ol.tdv-trk-timeline > li:last-child { padding-bottom: 0 !important; }
.tdv-trk ol.tdv-trk-timeline > li:last-child::before { display: none !important; }
.tdv-trk .tdv-trk-tl-dot {
	display: block !important; position: absolute !important; top: 6px !important; inset-inline-start: 2px !important;
	width: 14px !important; height: 14px !important; border-radius: 50% !important;
	background: #fff !important; border: 3px solid #c7d0dc !important;
}
.tdv-trk ol.tdv-trk-timeline > li.is-latest .tdv-trk-tl-dot { border-color: var(--tdv-gold) !important; background: var(--tdv-gold) !important; box-shadow: 0 0 0 4px rgba(201, 162, 39, .22) !important; }
.tdv-trk .tdv-trk-tl-top { display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; align-items: center !important; gap: 4px 14px !important; }
.tdv-trk .tdv-trk-tl-top strong { color: var(--tdv-navy) !important; font-size: 16px !important; font-weight: 800 !important; }
.tdv-trk ol.tdv-trk-timeline > li.is-latest .tdv-trk-tl-top strong { color: #7a5f08 !important; }
.tdv-trk .tdv-trk-tl-top time { color: var(--tdv-gray) !important; font-size: 13px !important; display: inline-flex !important; align-items: center !important; gap: 5px !important; }
.tdv-trk .tdv-trk-tl-loc { color: #3c4757 !important; font-size: 14px !important; display: flex !important; align-items: center !important; gap: 5px !important; margin: 3px 0 0 !important; }
.tdv-trk .tdv-trk-tl-loc svg.tdv-ico { color: var(--tdv-gold) !important; }
.tdv-trk .tdv-trk-tl-note { color: var(--tdv-gray) !important; font-size: 14px !important; margin-top: 4px !important; }

/* ---------- Medium box width: vertical steps ---------- */
@container tdvtrk (max-width: 820px) {
	.tdv-trk dl.tdv-trk-details { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.tdv-trk ol.tdv-trk-steps { display: flex !important; flex-direction: column !important; }
	.tdv-trk ol.tdv-trk-steps > li {
		flex-direction: row !important; align-items: center !important; gap: 14px !important;
		text-align: start !important; padding: 0 0 14px !important;
	}
	.tdv-trk ol.tdv-trk-steps > li:last-child { padding-bottom: 0 !important; }
	.tdv-trk ol.tdv-trk-steps > li::before {
		top: -15px !important; height: 16px !important; width: 3px !important;
		inset-inline-start: 16.5px !important; inset-inline-end: auto !important;
	}
	.tdv-trk .tdv-trk-dot { margin: 0 !important; flex-shrink: 0 !important; }
	.tdv-trk .tdv-trk-step-label { font-size: 15px !important; }
}

/* ---------- Narrow box width (phones) ---------- */
@container tdvtrk (max-width: 560px) {
	.tdv-trk .tdv-trk-card { padding: 20px 16px !important; border-radius: 14px !important; }
	.tdv-trk .tdv-trk-search { padding: 28px 18px !important; }
	.tdv-trk .tdv-trk-search-icon { width: 48px !important; height: 48px !important; }
	.tdv-trk .tdv-trk-title { font-size: 22px !important; }
	.tdv-trk .tdv-trk-form { flex-direction: column !important; }
	.tdv-trk .tdv-trk-field input.tdv-trk-input { height: 54px !important; font-size: 16px !important; }
	.tdv-trk .tdv-trk-form button.tdv-trk-btn { width: 100% !important; height: 54px !important; font-size: 16px !important; }
	.tdv-trk .tdv-trk-trackby { justify-content: flex-start !important; }
	.tdv-trk .tdv-trk-number { font-size: 21px !important; }
	.tdv-trk .tdv-trk-route { grid-template-columns: 1fr !important; padding: 18px !important; gap: 14px !important; }
	.tdv-trk .tdv-trk-point, .tdv-trk .tdv-trk-point-end { align-items: flex-start !important; text-align: start !important; }
	.tdv-trk .tdv-trk-route-line { margin: 10px 21px !important; }
	.tdv-trk dl.tdv-trk-details { grid-template-columns: 1fr !important; }
}

/* Line breaks are kept inside notes written by the team. */
.tdv-trk .tdv-trk-note br,
.tdv-trk .tdv-trk-tl-note br { display: inline !important; }