/*
 * Public order tracking screen ([wi-order-tracking] shortcode).
 * Mobile-first: base rules target narrow viewports; `min-width` queries
 * layer on room for wider screens. Visual language (color, radius,
 * type) matches the site's existing custom styling of the original
 * plugin's own tracking screen, so both feel like the same product
 * while they run side by side.
 */

.wiot-tracking-page,
.wiot-search-form,
.wiot-error,
.wiot-picker-intro,
.wiot-picker-list {
	--wiot-navy: #17324a;
	--wiot-blue: #1f6ea8;
	--wiot-orange: #ff6a00;
	--wiot-orange-dark: #e95f00;
	--wiot-ink: #25364b;
	--wiot-muted: #667085;
	--wiot-faint: #98a2b3;
	--wiot-border: #e6eaf0;
	--wiot-surface: #f6f8fb;
	--wiot-success: #16a34a;
	--wiot-warning: #f59e0b;
	--wiot-danger: #dc2626;

	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--wiot-ink);
}

.wiot-tracking-page h2,
.wiot-tracking-page h3,
.wiot-tracking-page .wiot-hero-status,
.wiot-search-form h3 {
	font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- Search form ---------- */

.wiot-search-form {
	max-width: 26em;
	margin: 0 0 1.5em;
}

.wiot-search-form .wiot-field {
	margin: 0 0 1em;
}

.wiot-search-form label {
	display: block;
	margin: 0 0 0.4em;
	font-size: 0.9em;
	font-weight: 600;
	color: var(--wiot-muted);
}

.wiot-search-form input[type="text"],
.wiot-search-form input[type="email"] {
	width: 100%;
	max-width: 100%;
	padding: 0.75em 0.85em;
	box-sizing: border-box;
	border: 1px solid var(--wiot-border);
	border-radius: 10px;
	font-size: 1em;
}

.wiot-search-form input[type="text"]:focus,
.wiot-search-form input[type="email"]:focus {
	outline: 2px solid var(--wiot-blue);
	outline-offset: 1px;
	border-color: var(--wiot-blue);
}

.wiot-search-form .wiot-submit {
	width: 100%;
	padding: 0.9em 1.4em;
	border: 0;
	border-radius: 10px;
	background: var(--wiot-orange);
	color: #ffffff;
	font-size: 1em;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
}

.wiot-search-form .wiot-submit:hover {
	background: var(--wiot-orange-dark);
}

.wiot-search-form .wiot-submit:active {
	transform: translateY(1px);
}

.wiot-search-form .wiot-submit:focus-visible {
	outline: 2px solid var(--wiot-navy);
	outline-offset: 2px;
}

@media (min-width: 480px) {
	.wiot-search-form .wiot-submit {
		width: auto;
	}
}

.wiot-error {
	padding: 0.9em 1.1em;
	margin: 0 0 1.5em;
	border-left: 4px solid var(--wiot-danger);
	border-radius: 8px;
	background: #fdecea;
	color: #611a15;
}

.wiot-search-hint {
	margin: 0 0 1.1em;
	font-size: 0.88em;
	color: var(--wiot-muted);
}

/* ---------- Email-search order picker ---------- */

.wiot-picker-intro {
	max-width: 26em;
	margin: 0 0 1em;
	font-weight: 600;
}

.wiot-picker-list {
	max-width: 26em;
	list-style: none;
	margin: 0 0 1.5em;
	padding: 0;
}

.wiot-picker-item + .wiot-picker-item {
	margin-top: 0.6em;
}

.wiot-picker-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75em;
	padding: 0.85em 1em;
	border: 1px solid var(--wiot-border);
	border-radius: 10px;
	text-decoration: none;
	color: inherit;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.wiot-picker-item a:hover,
.wiot-picker-item a:focus-visible {
	border-color: var(--wiot-blue);
	background: var(--wiot-surface);
}

.wiot-picker-number {
	font-weight: 600;
	color: var(--wiot-navy);
}

.wiot-picker-status {
	font-size: 0.85em;
	color: var(--wiot-muted);
}

/* ---------- Page shell ---------- */

.wiot-tracking-page {
	max-width: 640px;
}

.wiot-eyebrow {
	margin: 0 0 0.75em;
	font-size: 0.85em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wiot-faint);
}

/* ---------- Hero: current status ---------- */

.wiot-hero {
	padding: 22px 24px;
	margin: 0 0 1.5em;
	border-radius: 18px;
	background: linear-gradient(135deg, var(--wiot-navy) 0%, var(--wiot-blue) 100%);
	box-shadow: 0 14px 32px rgba(23, 50, 74, 0.18);
}

.wiot-hero-kicker {
	margin: 0 0 6px;
	font-size: 0.8em;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.wiot-hero-status {
	margin: 0;
	font-size: 1.5em;
	font-weight: 800;
	line-height: 1.25;
	color: var(--wiot-orange);
	overflow-wrap: break-word;
}

.wiot-hero-date,
.wiot-hero-location {
	margin: 8px 0 0;
	font-size: 0.9em;
	color: rgba(255, 255, 255, 0.86);
}

.wiot-hero--success .wiot-hero-status {
	color: #4ade80;
}

.wiot-hero--warning {
	background: linear-gradient(135deg, var(--wiot-navy) 0%, #92400e 100%);
}

.wiot-hero--warning .wiot-hero-status {
	color: #fbbf24;
}

.wiot-hero--stopped {
	background: linear-gradient(135deg, var(--wiot-navy) 0%, #7f1d1d 100%);
}

.wiot-hero--stopped .wiot-hero-status {
	color: #fca5a5;
}

@media (min-width: 640px) {
	.wiot-hero {
		padding: 28px 32px;
	}

	.wiot-hero-status {
		font-size: 1.75em;
	}
}

/* ---------- Progress: start -> current -> final ---------- */

.wiot-progress {
	margin: 0 0 1.75em;
}

.wiot-progress-track {
	position: relative;
	height: 6px;
	margin: 0 8px;
	background: var(--wiot-border);
	border-radius: 3px;
}

.wiot-progress-fill {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	background: var(--wiot-blue);
	border-radius: 3px;
	transition: width 0.2s ease;
}

.wiot-progress-steps {
	display: flex;
	justify-content: space-between;
	margin-top: 10px;
}

.wiot-progress-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1 1 0;
	text-align: center;
	min-width: 0;
}

.wiot-progress-step:first-child {
	align-items: flex-start;
	text-align: left;
}

.wiot-progress-step:last-child {
	align-items: flex-end;
	text-align: right;
}

.wiot-progress-dot {
	display: block;
	width: 14px;
	height: 14px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: #ffffff;
	border: 3px solid var(--wiot-faint);
	box-sizing: border-box;
}

.wiot-progress-step--done .wiot-progress-dot {
	border-color: var(--wiot-blue);
}

.wiot-progress-step--current .wiot-progress-dot {
	border-color: var(--wiot-blue);
	background: var(--wiot-blue);
	box-shadow: 0 0 0 5px rgba(31, 110, 168, 0.15);
}

.wiot-progress-label {
	font-size: 0.75em;
	line-height: 1.3;
	color: var(--wiot-faint);
	overflow-wrap: break-word;
	hyphens: auto;
}

.wiot-progress-step--current .wiot-progress-label {
	font-weight: 700;
	color: var(--wiot-navy);
}

@media (min-width: 640px) {
	.wiot-progress-label {
		font-size: 0.85em;
	}
}

/* ---------- Detail card ---------- */

.wiot-card {
	padding: 20px;
	margin: 0 0 1.75em;
	background: #ffffff;
	border: 1px solid var(--wiot-border);
	border-radius: 16px;
}

.wiot-detail-fields {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.wiot-detail-label {
	display: block;
	margin: 0 0 0.3em;
	font-size: 0.78em;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--wiot-muted);
}

.wiot-detail-value {
	display: block;
	font-size: 0.98em;
	line-height: 1.5;
	overflow-wrap: break-word;
}

@media (min-width: 480px) {
	.wiot-detail-fields {
		grid-template-columns: 1fr 1fr;
	}

	.wiot-detail-field--wide {
		grid-column: 1 / -1;
	}
}

/* ---------- History timeline ---------- */

.wiot-history-title {
	margin: 0 0 1em;
	font-size: 1.1em;
}

.wiot-history-empty {
	color: var(--wiot-muted);
}

.wiot-timeline {
	list-style: none;
	margin: 0;
	padding: 0 0 0 4px;
}

.wiot-timeline-item {
	position: relative;
	padding: 2px 0 20px 28px;
	border-left: 2px solid var(--wiot-border);
}

.wiot-timeline-item:last-child {
	padding-bottom: 2px;
	border-left-color: transparent;
}

.wiot-timeline-item::before {
	content: "";
	position: absolute;
	left: -9px;
	top: 1px;
	width: 16px;
	height: 16px;
	background-color: var(--wiot-faint);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l2.29 3H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 8h-3V4H3c-1.1 0-2 .9-2 2v11h2c0 1.66 1.34 3 3 3s3-1.34 3-3h6c0 1.66 1.34 3 3 3s3-1.34 3-3h2v-5l-3-4zM6 18.5c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm13.5-9l2.29 3H17V9.5h2.5zm-1.5 9c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5z'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
}

.wiot-timeline-item--current::before {
	background-color: var(--wiot-blue);
}

.wiot-timeline-status {
	display: block;
	font-weight: 600;
	color: var(--wiot-ink);
}

.wiot-timeline-item--current .wiot-timeline-status {
	color: var(--wiot-navy);
}

.wiot-timeline-date {
	display: block;
	margin-top: 2px;
	font-size: 0.85em;
	color: var(--wiot-faint);
}

.wiot-timeline-location {
	display: block;
	margin-top: 2px;
	font-size: 0.85em;
	color: var(--wiot-muted);
}

@media (min-width: 480px) {
	.wiot-timeline-item {
		display: flex;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0 0.75em;
	}

	.wiot-timeline-date {
		margin-top: 0;
		order: 2;
	}

	.wiot-timeline-location {
		margin-top: 0;
		flex-basis: 100%;
		order: 3;
	}
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
	.wiot-progress-fill,
	.wiot-search-form .wiot-submit {
		transition: none;
	}
}