/* PNF Track2 — customer order tracking view
   (Deduplicated: every selector that appeared twice — once in the original
   pass and once in the later "professional customer tracking experience"
   patch — has been merged into a single rule using the cascade-final
   values, so the rendered result is unchanged.) */

.pnf-track2 {
	--pnf-purple: #690b78;
	--pnf-purple-light: #f3e9f5;
	--pnf-gold: #f3a712;
	--pnf-success: #1f9d55;
	max-width: 700px;
	margin: 0 auto;
	padding: 34px 20px 56px;
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #172033;
}

.pnf-track2-card {
	background: #fff;
	border: 1px solid #e6eaf0;
	border-radius: 20px;
	padding: clamp(24px, 5vw, 34px);
	box-shadow: 0 16px 45px rgba(23,32,51,.08);
}

.pnf-track2-brand {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 12px;
	font-weight: 700;
	color: #5b176d;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.pnf-track2-order {
	font-size: 27px;
	font-weight: 700;
	margin-top: 17px;
	color: #1a1a1a;
	letter-spacing: -.6px;
}

/* ---- Progress steps ---- */
.pnf-track2-steps {
	display: flex;
	align-items: center;
	margin: 35px 0 25px;
}
.pnf-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 0 auto;
	width: 72px;
}
.pnf-step-dot {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #e4d8e7;
	border: 4px solid #e4d8e7;
	display: block;
	transition: all .3s ease;
}
.pnf-step-label {
	width: 100px;
	font-size: 11px;
	color: #667085;
	margin-top: 8px;
	text-align: center;
	font-weight: 600;
}
.pnf-step-line {
	flex: 1 1 auto;
	height: 4px;
	background: #e4e7ec;
	margin: 0 -6px;
	margin-bottom: 20px;
	border-radius: 4px;
	transition: background .3s ease;
}

.pnf-step.pnf-step-done .pnf-step-dot,
.pnf-step.pnf-step-active .pnf-step-dot {
	background: var(--pnf-purple);
	border-color: var(--pnf-purple);
}
.pnf-step.pnf-step-done .pnf-step-label,
.pnf-step.pnf-step-active .pnf-step-label { color: var(--pnf-purple); }
.pnf-step.pnf-step-active .pnf-step-dot {
	box-shadow: 0 0 0 5px rgba(105, 11, 120, 0.15);
}
.pnf-step-line.pnf-line-done { background: var(--pnf-purple); }

.pnf-step[data-step="delivered"].pnf-step-done .pnf-step-dot,
.pnf-step[data-step="delivered"].pnf-step-active .pnf-step-dot {
	background: var(--pnf-success);
	border-color: var(--pnf-success);
}
.pnf-step[data-step="delivered"].pnf-step-done .pnf-step-label,
.pnf-step[data-step="delivered"].pnf-step-active .pnf-step-label { color: var(--pnf-success); }

.pnf-track2-headline {
	font-size: 14px;
	font-weight: 600;
	background: var(--pnf-purple-light);
	color: var(--pnf-purple);
	border: 1px solid #ead8ee;
	border-radius: 12px;
	padding: 15px 17px;
	text-align: center;
}
.pnf-track2-headline.pnf-headline-success {
	background: #e3f6ea;
	color: var(--pnf-success);
}
.pnf-track2-headline.pnf-headline-voided {
	background: #fdecea;
	color: #b3261e;
}
.pnf-track2-headline.pnf-headline-rescheduled {
	background: #e6eefc;
	color: #2454a6;
	border:1px #c7d7f5 solid;
}

/* ---- Estimated delivery ---- */
.pnf-track2-estimate {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	padding: 14px 16px;
	border-radius: 12px;
	background: #fff9eb;
	border: 1px solid #f6dfaa;
}
.pnf-track2-estimate-icon {
	font-size: 16px;
	line-height: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.pnf-track2-estimate-icon svg {
	width: 19px; height: 19px;
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
}
.pnf-track2-estimate-text {
	font-size: 13px;
	color: #6b5a2a;
	font-weight: 500;
}
.pnf-track2-estimate-text strong {
	color: var(--pnf-gold);
	font-weight: 700;
}

/* Rescheduled delivery — reuses the same box but in the same blue used for
   the "Rescheduled" headline/status pill, so it doesn't read like a normal
   on-track estimate. */
.pnf-track2-estimate.pnf-estimate-rescheduled {
	background: #eef3fd;
	border-color: #c7d7f5;
}
.pnf-track2-estimate.pnf-estimate-rescheduled .pnf-track2-estimate-text { color: #2454a6; }
.pnf-track2-estimate.pnf-estimate-rescheduled .pnf-track2-estimate-text strong { color: #2454a6; }

/* ---- Driver card ---- */
.pnf-track2-driver-card {
	margin-top: 16px;
	background: #fff;
	border: 1px solid #e6eaf0;
	border-radius: 16px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 12px;
	box-shadow: 0 8px 22px rgba(23,32,51,.06);
}
.pnf-track2-driver-avatar {
	width: 46px; height: 46px;
	border-radius: 13px;
	background: #f7f1f9;
	color: #5b176d;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	flex: 0 0 auto;
}
.pnf-track2-driver-avatar svg {
	width: 24px;
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
}
.pnf-track2-driver-info { flex: 1 1 auto; min-width: 0; }
.pnf-track2-driver-name { font-weight: 700; font-size: 14.5px; }
.pnf-track2-driver-sub { font-size: 12.5px; color: #888; }

.pnf-track2-call-btn {
	display: inline-flex;
	align-items: center;
	background: #5b176d;
	color: #fff;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	padding: 10px 10px;
	border-radius: 10px;
	white-space: nowrap;
	flex: 0 0 auto;
}
.pnf-track2-call-btn:active { background: #4d0859; }
.pnf-track2-call-btn:hover { background-color: #fbbc34; color: #000; }
.pnf-track2-call-btn svg {
    width: 25px;
    height: 25px;
    display: block;
    fill: #fff;
    stroke: #fff;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: fill 0.2s ease, stroke 0.2s ease;
}

.pnf-track2-call-btn:hover svg {
    fill: #000;
    stroke: #000;
}
/* ---- Map ---- */
.pnf-track2-map { margin-top: 16px; }
#pnf-track-map-canvas {
	height: 280px;
	border: 1px solid #e6eaf0;
	border-radius: 16px;
	background: #eef3f7;
	position: relative;
	display: flex; align-items: center; justify-content: center;
	overflow: hidden;
}
#pnf-track-map-canvas > div:not(.pnf-track2-map-pulse) {
	/* Google Maps injects its own divs once loaded — let them fill the canvas */
	border-radius: 16px;
}
.pnf-track2-map-pulse {
	width: 18px; height: 18px; border-radius: 50%;
	background: var(--pnf-purple);
	position: relative;
	box-shadow: 0 0 0 0 rgba(105, 11, 120, 0.5);
	animation: pnf-pulse 1.8s infinite;
}
@keyframes pnf-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(105, 11, 120, 0.45); }
	70%  { box-shadow: 0 0 0 22px rgba(105, 11, 120, 0); }
	100% { box-shadow: 0 0 0 0 rgba(105, 11, 120, 0); }
}
.pnf-track2-map-hint {
	position: absolute; bottom: 12px; font-size: 12px; color: var(--pnf-purple);
	font-weight: 600; background: rgba(255,255,255,0.85); padding: 4px 10px; border-radius: 20px;
}

/* ---- Truck marker (replaces the plain pulse dot once the map loads) ---- */
.pnf-track2-truck-marker {
	width: 40px; height: 40px;
	display: flex; align-items: center; justify-content: center;
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 3px 10px rgba(0,0,0,0.25), 0 0 0 3px var(--pnf-purple);
	color: #5b176d;
	font-size: 0; /* text/emoji fallback hidden now that .pnf-truck-svg renders the icon */
	line-height: 1;
	position: absolute;
	/* This transform only centers the badge on the exact projected
	   lat/lng point — nothing here animates, so the truck itself never
	   drifts off the real driver position. */
	transform: translate(-50%, -50%);
	z-index: 2;
}
.pnf-truck-svg {
	width: 22px; height: 22px;
	fill: none; stroke: currentColor; stroke-width: 1.7;
	stroke-linecap: round; stroke-linejoin: round;
}
/* Pulse ring: a separate layer centered on the same point, behind the
   truck (z-index/negative offset), so its scale animation radiates
   outward without ever moving or resizing the truck badge itself. */
.pnf-track2-truck-pulse {
	position: absolute;
	top: 50%; left: 50%;
	width: 40px; height: 40px;
	margin: -20px 0 0 -20px;
	border-radius: 50%;
	background: var(--pnf-purple);
	opacity: 0.55;
	z-index: 1;
	animation: pnf-truck-pulse 1.8s ease-out infinite;
	pointer-events: none;
}
@keyframes pnf-truck-pulse {
	0%   { transform: scale(1);   opacity: 0.55; }
	70%  { transform: scale(2.4); opacity: 0; }
	100% { transform: scale(2.4); opacity: 0; }
}

/* ---- Order lookup form ---- */
.pnf-track2-lookup-form {
	display: flex;
	flex-direction: column;
	margin-top: 18px;
}
.pnf-track2-lookup-label {
	font-size: 12.5px;
	font-weight: 600;
	color: #555;
	margin: 14px 0 6px;
}
.pnf-track2-lookup-label:first-child { margin-top: 0; }
.pnf-track2-lookup-form input {
	font-family: inherit;
	font-size: 15px;
	padding: 13px 14px;
	border: 1.5px solid #d7dce5;
	border-radius: 11px;
	background: #fff;
	color: #2a2a2a;
	outline: none;
	transition: border-color .2s ease;
}
.pnf-track2-lookup-form input:focus {
	border-color: #5b176d;
	box-shadow: 0 0 0 4px rgba(91,23,109,.10);
}
.pnf-track2-lookup-btn {
	margin-top: 20px !important;
	background: #5b176d !important;
	color: #fff !important;
	font-family: inherit;
	font-size: 15px !important;
	font-weight: 700 !important;
	border: none !important;
	border-radius: 11px !important;
	padding: 13px 16px !important;
	cursor: pointer !important;
	transition: background .2s ease !important;
	box-shadow: 0 5px 12px rgba(91,23,109,.18);
}
.pnf-track2-lookup-btn:hover { background: #591065 !important; }
.pnf-track2-lookup-btn:disabled {
	background: #b79cbd !important;
	cursor: default !important;
}
.pnf-track2-lookup-error {
	margin-top: 12px;
	font-size: 13px;
	font-weight: 500;
	color: #b3261e;
	background: #fdecea;
	border-radius: 10px;
	padding: 10px 12px;
	text-align: center;
}

/* ---- Customer self-service: cancel / reschedule ---- */
.pnf-track2-actions {
	display: flex;
	gap: 10px;
	margin-top: 18px;
}
.pnf-track2-action-btn {
	flex: 1 1 0;
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 700;
	border-radius: 11px;
	padding: 12px 10px;
	cursor: pointer;
	border: 1.5px solid transparent;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.pnf-track2-action-reschedule {
	background: #eef3fd;
	border-color: #c7d7f5;
	color: #2454a6;
}
.pnf-track2-action-reschedule:hover { background: #dfe9fb; }
.pnf-track2-action-cancel {
	background: #fdecea;
	border-color: #f3c6c1;
	color: #b3261e;
}
.pnf-track2-action-cancel:hover { background: #fbdedb; }

/* ---- Modal ---- */
.pnf-track2-modal-overlay {
	position: fixed;
	inset: 0;
	background: rgba(23, 32, 51, 0.55);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
	z-index: 1000;
}
.pnf-track2-modal {
	background: #fff;
	border-radius: 18px;
	padding: 26px 24px;
	max-width: 420px;
	width: 100%;
	box-shadow: 0 20px 60px rgba(23,32,51,.25);
	font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: #172033;
}
.pnf-track2-modal h3 {
	margin: 0 0 10px;
	font-size: 18px;
	font-weight: 700;
	color: #1a1a1a;
}
.pnf-track2-modal p {
	margin: 0 0 14px;
	font-size: 13.5px;
	color: #555;
	line-height: 1.5;
}
.pnf-track2-modal-note {
	background: #fff9eb;
	border: 1px solid #f6dfaa;
	color: #6b5a2a;
	border-radius: 10px;
	padding: 10px 12px;
	font-size: 12.5px;
	font-weight: 500;
}
.pnf-track2-modal-options {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 14px;
}
.pnf-track2-radio {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #333;
	cursor: pointer;
}
.pnf-track2-date-input,
.pnf-track2-textarea {
	width: 100%;
	font-family: inherit;
	font-size: 14px;
	padding: 12px 14px;
	border: 1.5px solid #d7dce5;
	border-radius: 11px;
	background: #fff;
	color: #2a2a2a;
	outline: none;
	box-sizing: border-box;
	margin-bottom: 14px;
	transition: border-color .2s ease;
}
.pnf-track2-textarea {
	resize: vertical;
	min-height: 70px;
	font-family: inherit;
}
.pnf-track2-date-input:focus,
.pnf-track2-textarea:focus {
	border-color: #5b176d;
	box-shadow: 0 0 0 4px rgba(91,23,109,.10);
}
.pnf-track2-modal-error {
	font-size: 13px;
	font-weight: 500;
	color: #b3261e;
	background: #fdecea;
	border-radius: 10px;
	padding: 10px 12px;
	margin-bottom: 14px;
}
.pnf-track2-modal-buttons {
	display: flex;
	gap: 10px;
	margin-top: 4px;
}
.pnf-track2-modal-btn-secondary,
.pnf-track2-modal-btn-primary,
.pnf-track2-modal-btn-danger {
	flex: 1 1 0;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	border-radius: 11px;
	padding: 12px 10px;
	cursor: pointer;
	border: none;
	transition: background .2s ease;
}
.pnf-track2-modal-btn-secondary {
	background: #f1f2f5;
	color: #333;
}
.pnf-track2-modal-btn-secondary:hover { background: #e4e6eb; }
.pnf-track2-modal-btn-primary {
	background: #5b176d;
	color: #fff;
}
.pnf-track2-modal-btn-primary:hover { background: #4d0859; }
.pnf-track2-modal-btn-primary:disabled,
.pnf-track2-modal-btn-danger:disabled {
	background: #cfcfd4 !important;
	cursor: default;
}
.pnf-track2-modal-btn-danger {
	background: #b3261e;
	color: #fff;
}
.pnf-track2-modal-btn-danger:hover { background: #921e17; }

.pnf-track2-footer {
	text-align: center; font-size: 12px; color: #999; margin-top: 22px;
}

@media (max-width: 480px) {
	.pnf-track2 { padding: 18px 12px 38px; }
	.pnf-track2-card { padding: 22px 18px; }
	.pnf-step { width: 66px; }
	.pnf-step-label { width: 84px; font-size: 10px; }
	.pnf-track2-call-btn { padding: 10px 10px; }
	.pnf-track2-actions { flex-direction: column; }
	.pnf-track2-modal { padding: 22px 18px; }
}