/* NetPlus Repair Tracker — customer-facing styles (matches NetPlus Circuit) */

.npr-tracker {
	--npr-accent: var(--np-accent, #d90429);
	--npr-hot: var(--np-hot, #f77f00);
	--npr-ink: var(--np-ink, #1b1f27);
	--npr-line: var(--np-line, #e6e4df);
	--npr-muted: var(--np-muted, #6b7280);
	--npr-radius: var(--np-radius, 14px);
	max-width: 860px;
	margin: 0 auto;
}

/* Console card */
.npr-tracker__head {
	background: linear-gradient(120deg, var(--npr-ink) 0%, #2a2027 70%, #33202a 100%);
	border-radius: var(--npr-radius) var(--npr-radius) 0 0;
	padding: 30px 32px 26px;
	color: #fff;
	position: relative;
	overflow: hidden;
}
.npr-tracker__head::after {
	content: "";
	position: absolute;
	right: -60px;
	top: -80px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(217, 4, 41, 0.25), transparent 65%);
}
.npr-tracker__title {
	color: #fff;
	margin: 0 0 6px;
	font-family: var(--np-font-display, "Chakra Petch", sans-serif);
	font-size: 1.6rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}
.npr-tracker__sub {
	margin: 0;
	color: #b9bec9;
	font-size: 0.92rem;
	max-width: 560px;
}

.npr-tracker__form {
	display: flex;
	gap: 10px;
	background: #fff;
	border: 1px solid var(--npr-line);
	border-top: 0;
	border-radius: 0 0 var(--npr-radius) var(--npr-radius);
	padding: 22px 32px 26px;
	flex-wrap: wrap;
}
.npr-tracker__form input[type="text"]#npr-query {
	flex: 1 1 260px;
	min-width: 0;
	padding: 13px 16px;
	border: 1.5px solid var(--npr-line);
	border-radius: 10px;
	font-size: 1rem;
}
.npr-tracker__form input#npr-query:focus {
	outline: none;
	border-color: var(--npr-accent);
	box-shadow: 0 0 0 3px rgba(217, 4, 41, 0.12);
}
.npr-tracker__form button {
	border: 0;
	border-radius: 10px;
	background: var(--npr-accent);
	color: #fff;
	padding: 13px 26px;
	font-family: var(--np-font-head, "Rajdhani", sans-serif);
	font-weight: 700;
	font-size: 1rem;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: transform 0.2s ease, background 0.2s ease;
}
.npr-tracker__form button:hover { background: var(--np-accent-dark, #a80321); transform: translateY(-2px); }
.npr-tracker__form button[disabled] { opacity: 0.6; transform: none; cursor: wait; }
.npr-hp { position: absolute !important; left: -9999px !important; opacity: 0; height: 1px; width: 1px; overflow: hidden; }

/* Result shell */
.npr-result { margin-top: 26px; }
.npr-notice {
	background: #fff;
	border: 1px solid var(--npr-line);
	border-left: 5px solid var(--npr-hot);
	border-radius: 12px;
	padding: 18px 22px;
	color: var(--npr-ink);
	font-size: 0.95rem;
	animation: nprFadeUp 0.4s ease both;
}

.npr-card {
	background: #fff;
	border: 1px solid var(--npr-line);
	border-radius: var(--npr-radius);
	overflow: hidden;
	animation: nprFadeUp 0.45s ease both;
}
.npr-card__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 28px 18px;
	border-bottom: 1px dashed var(--npr-line);
	flex-wrap: wrap;
}
.npr-card__model {
	margin: 0 0 4px;
	font-family: var(--np-font-display, "Chakra Petch", sans-serif);
	font-size: 1.35rem;
	color: var(--npr-ink);
}
.npr-card__meta { color: var(--npr-muted); font-size: 0.85rem; display: flex; gap: 14px; flex-wrap: wrap; }
.npr-card__meta strong { color: var(--npr-ink); font-weight: 600; }
.npr-pill {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 16px;
	border-radius: 999px;
	color: #fff;
	font-family: var(--np-font-head, "Rajdhani", sans-serif);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-size: 0.82rem;
	background: var(--npr-c, #6b7280);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}
.npr-pill::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #fff;
	animation: nprBlink 1.6s infinite;
}

/* Stepper */
.npr-steps {
	display: flex;
	padding: 26px 28px 8px;
	gap: 0;
	overflow-x: auto;
}
.npr-step {
	flex: 1 1 0;
	min-width: 86px;
	position: relative;
	text-align: center;
	padding-bottom: 6px;
}
.npr-step__dot {
	width: 34px;
	height: 34px;
	margin: 0 auto 8px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eef0f3;
	color: #9aa1ad;
	border: 2px solid #e2e5ea;
	position: relative;
	z-index: 2;
	transition: all 0.3s ease;
	font-size: 0.8rem;
	font-weight: 700;
}
.npr-step__label {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #9aa1ad;
	font-family: var(--np-font-head, "Rajdhani", sans-serif);
}
.npr-step::before {
	content: "";
	position: absolute;
	top: 17px;
	left: -50%;
	width: 100%;
	height: 3px;
	background: #e2e5ea;
	z-index: 1;
}
.npr-step:first-child::before { display: none; }
.npr-step.is-done .npr-step__dot { background: var(--npr-accent); border-color: var(--npr-accent); color: #fff; }
.npr-step.is-done .npr-step__label { color: var(--npr-ink); }
.npr-step.is-done::before { background: var(--npr-accent); }
.npr-step.is-current .npr-step__dot {
	background: #fff;
	border-color: var(--npr-accent);
	color: var(--npr-accent);
	animation: nprPulse 1.8s infinite;
}
.npr-step.is-current .npr-step__label { color: var(--npr-accent); }

/* Tiles */
.npr-tiles {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
	padding: 18px 28px;
}
.npr-tile {
	background: #f7f7f5;
	border: 1px solid var(--npr-line);
	border-left: 4px solid var(--npr-hot);
	border-radius: 10px;
	padding: 14px 16px;
}
.npr-tile--eta { border-left-color: var(--npr-accent); }
.npr-tile__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--npr-muted);
	margin-bottom: 5px;
}
.npr-tile__value { font-size: 0.95rem; color: var(--npr-ink); font-weight: 600; }
.npr-tile__chip {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	border-radius: 999px;
	font-size: 0.7rem;
	font-weight: 700;
	background: rgba(247, 127, 0, 0.14);
	color: #b45309;
}
.npr-tile__chip.is-late { background: rgba(217, 4, 41, 0.12); color: #b4243f; }

/* Public progress log timeline */
.npr-log {
	padding: 6px 28px 28px;
}
.npr-log__title {
	font-family: var(--np-font-display, "Chakra Petch", sans-serif);
	font-size: 1.02rem;
	color: var(--npr-ink);
	margin: 0 0 14px;
	display: flex;
	align-items: center;
	gap: 10px;
}
.npr-log__title span { color: var(--npr-muted); font-size: 0.8rem; font-weight: 600; }
.npr-log__list { position: relative; margin: 0; padding: 0 0 0 22px; list-style: none; }
.npr-log__list::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 6px;
	bottom: 6px;
	width: 2px;
	background: linear-gradient(180deg, var(--npr-accent), var(--npr-hot));
	border-radius: 2px;
	opacity: 0.35;
}
.npr-log__item {
	position: relative;
	background: #fbfbfa;
	border: 1px solid var(--npr-line);
	border-radius: 10px;
	padding: 13px 16px;
	margin-bottom: 12px;
	animation: nprFadeUp 0.5s ease both;
}
.npr-log__item::before {
	content: "";
	position: absolute;
	left: -21px;
	top: 18px;
	width: 12px;
	height: 12px;
	border-radius: 50%;
	background: #fff;
	border: 3px solid var(--npr-accent);
}
.npr-log__head {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 5px;
}
.npr-log__author { font-weight: 700; font-size: 0.86rem; color: var(--npr-ink); }
.npr-log__date { font-size: 0.76rem; color: var(--npr-muted); font-family: var(--np-font-mono, monospace); }
.npr-log__body { font-size: 0.9rem; color: #3d4451; line-height: 1.6; }

@keyframes nprFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes nprPulse {
	0% { box-shadow: 0 0 0 0 rgba(217, 4, 41, 0.35); }
	70% { box-shadow: 0 0 0 12px rgba(217, 4, 41, 0); }
	100% { box-shadow: 0 0 0 0 rgba(217, 4, 41, 0); }
}
@keyframes nprBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

@media (max-width: 700px) {
	.npr-tracker__head, .npr-tracker__form { padding-left: 20px; padding-right: 20px; }
	.npr-tiles { grid-template-columns: 1fr; padding: 16px 20px; }
	.npr-card__top, .npr-steps, .npr-log { padding-left: 20px; padding-right: 20px; }
	.npr-steps { gap: 4px; }
	.npr-step { min-width: 70px; }
	.npr-step__label { font-size: 0.62rem; }
}

/* Staff shortcut link (Admin/Manager only) */
.npr-staff-link {
	display: inline-block;
	margin-top: 14px;
	color: #ffd7dc;
	font-size: 0.82rem;
	font-weight: 600;
	text-decoration: underline;
	position: relative;
	z-index: 2;
}
.npr-staff-link:hover { color: #fff; }

/* Hide the duplicated page title when the tracker shortcode is inside the page content */
.np-single:has(.npr-tracker) .np-single__header { display: none; }

/* ========== v1.0.3: completed state, progress bar, WA card, interactivity ========== */

/* Green completed state */
.npr-steps.is-complete .npr-step.is-done .npr-step__dot {
	background: #17a558;
	border-color: #17a558;
}
.npr-steps.is-complete .npr-step.is-done::before { background: #17a558; }
.npr-steps.is-complete .npr-step.is-current .npr-step__dot {
	background: #fff;
	border-color: #17a558;
	color: #17a558;
	animation: nprPulseGreen 1.8s infinite;
}
.npr-steps.is-complete .npr-step.is-current .npr-step__label { color: #17a558; }
.npr-card.is-complete { border-color: rgba(23, 165, 88, 0.45); box-shadow: 0 10px 34px rgba(23, 165, 88, 0.14); }
@keyframes nprPulseGreen {
	0% { box-shadow: 0 0 0 0 rgba(23, 165, 88, 0.35); }
	70% { box-shadow: 0 0 0 12px rgba(23, 165, 88, 0); }
	100% { box-shadow: 0 0 0 0 rgba(23, 165, 88, 0); }
}

/* Progress bar under stepper */
.npr-progress {
	margin: 4px 28px 0;
	height: 8px;
	border-radius: 999px;
	background: #eceef1;
	overflow: hidden;
}
.npr-progress__fill {
	height: 100%;
	width: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--npr-accent), var(--npr-hot));
	transition: width 1s cubic-bezier(0.22, 0.9, 0.35, 1);
}
.npr-steps.is-complete + .npr-progress .npr-progress__fill,
.npr-card.is-complete .npr-progress__fill { background: linear-gradient(90deg, #17a558, #4ade80); }
.npr-progress__label {
	margin: 6px 28px 0;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--npr-muted);
	font-family: var(--np-font-head, "Rajdhani", sans-serif);
}

/* Completed chip on ETA tile */
.npr-tile__chip.is-done { background: rgba(23, 165, 88, 0.14); color: #0d7a41; }

/* Card actions row */
.npr-card__actions {
	display: flex;
	gap: 10px;
	align-items: center;
	flex-wrap: wrap;
	padding: 0 28px 24px;
}
.npr-card__wa {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #25d366;
	color: #fff;
	border-radius: 10px;
	padding: 10px 18px;
	font-family: var(--np-font-head, "Rajdhani", sans-serif);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease;
}
.npr-card__wa:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; }
.npr-print {
	border: 1.5px solid var(--npr-line);
	background: #fff;
	color: var(--npr-muted);
	border-radius: 10px;
	padding: 9px 16px;
	font-size: 0.82rem;
	font-weight: 600;
	cursor: pointer;
	transition: all 0.2s ease;
}
.npr-print:hover { border-color: var(--npr-accent); color: var(--npr-accent); }

/* Static WhatsApp contact card under the search form */
.npr-wa-card {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 18px;
	background: #fff;
	border: 1px solid var(--npr-line);
	border-left: 5px solid #25d366;
	border-radius: 12px;
	padding: 16px 20px;
	animation: nprFadeUp 0.5s ease both;
}
.npr-wa-card__icon {
	width: 46px;
	height: 46px;
	flex: 0 0 46px;
	border-radius: 12px;
	background: #e6fbef;
	color: #25d366;
	display: flex;
	align-items: center;
	justify-content: center;
}
.npr-wa-card__text { flex: 1 1 240px; display: flex; flex-direction: column; gap: 2px; }
.npr-wa-card__text strong { color: var(--npr-ink); font-size: 0.98rem; }
.npr-wa-card__text span { color: var(--npr-muted); font-size: 0.84rem; }
.npr-wa-card__btn {
	background: #25d366;
	color: #fff;
	border-radius: 10px;
	padding: 11px 20px;
	font-family: var(--np-font-head, "Rajdhani", sans-serif);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	transition: transform 0.2s ease, filter 0.2s ease;
}
.npr-wa-card__btn:hover { transform: translateY(-2px); filter: brightness(1.05); color: #fff; }

/* Expandable long log entries */
.npr-log__item.is-long .npr-log__body {
	max-height: 66px;
	overflow: hidden;
	position: relative;
	transition: max-height 0.35s ease;
}
.npr-log__item.is-long.is-open .npr-log__body { max-height: 600px; }
.npr-log__item.is-long .npr-log__body::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 26px;
	background: linear-gradient(180deg, transparent, #fbfbfa);
	pointer-events: none;
}
.npr-log__item.is-long.is-open .npr-log__body::after { display: none; }
.npr-log__more {
	border: 0;
	background: none;
	color: var(--npr-accent);
	font-size: 0.78rem;
	font-weight: 700;
	cursor: pointer;
	padding: 4px 0 0;
}
.npr-log__more:hover { text-decoration: underline; }

/* ========== restored: multi-job history styling (lost in print removal) ========== */
.npr-multi {
	background: linear-gradient(90deg, var(--npr-ink, #1b1f27), #2a2027);
	color: #fff;
	border-radius: 12px;
	padding: 12px 18px;
	font-family: var(--np-font-head, "Rajdhani", sans-serif);
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-size: 0.82rem;
	margin-bottom: 14px;
	animation: nprFadeUp 0.4s ease both;
}
.npr-card { margin-bottom: 18px; }
.npr-card__badges { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.npr-card__index {
	background: rgba(27, 31, 39, 0.08);
	border: 1px solid var(--npr-line, #e6e4df);
	color: var(--npr-muted, #6b7280);
	border-radius: 999px;
	padding: 5px 12px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	font-family: var(--np-font-head, "Rajdhani", sans-serif);
	white-space: nowrap;
}

/* New: no-code banner + custom-content blocks (Repair Jobs → Appearance).
   Scoped with fallbacks so they look right even before the tracker's own
   --npr-* variables are in scope (content-before sits outside .npr-tracker). */
.npr-banner {
	display: flex;
	gap: 20px;
	align-items: center;
	max-width: 860px;
	margin: 0 auto 18px;
	padding: 18px;
	border-radius: var(--npr-radius, 14px);
	background: #fff;
	border: 1px solid var(--npr-line, #e6e4df);
}
.npr-banner__img {
	width: 140px;
	height: 100px;
	object-fit: cover;
	border-radius: calc(var(--npr-radius, 14px) - 6px);
	flex: 0 0 auto;
}
.npr-banner__heading { margin: 0 0 4px; font-size: 1.1rem; }
.npr-banner__text { margin: 0 0 10px; color: var(--npr-muted, #6b7280); font-size: 0.92rem; }
.npr-banner__btn {
	display: inline-block;
	background: var(--npr-accent, #d90429);
	color: #fff;
	text-decoration: none;
	padding: 9px 18px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.88rem;
}
.npr-custom { max-width: 860px; margin: 0 auto 18px; }
.npr-custom--after { margin: 18px auto 0; }
@media (max-width: 600px) {
	.npr-banner { flex-direction: column; align-items: flex-start; }
	.npr-banner__img { width: 100%; height: 160px; }
}