/**
 * Tracking page styles — Order Tracking by UUID
 * Design: Operational Flat / Linear-inspired
 *
 * @package OrderTrackingUUID
 */

/* ─────────────────────────────────────────────
   DESIGN TOKENS
───────────────────────────────────────────── */
.otuu-tracking {
	/* Text hierarchy */
	--otuu-ink:    #0f172a;   /* headings, primary values */
	--otuu-ink-2:  #475569;   /* secondary labels, body */
	--otuu-ink-3:  #94a3b8;   /* muted, placeholders */
	--otuu-ink-4:  #c8d3de;   /* disabled, future steps */

	/* Surfaces */
	--otuu-surface:   #ffffff;
	--otuu-surface-2: #f8fafc; /* card header, subtle bg */

	/* Borders */
	--otuu-line:   #e2e8f0;
	--otuu-line-2: #f1f5f9;

	/* Semantic — color system */
	--otuu-blue:   #1e40af;   /* completed steps */
	--otuu-green:  #16a34a;   /* current / active */
	--otuu-done:   #16a34a;   /* status dot */
	--otuu-danger: #dc2626;   /* cancelled / error */

	/* Shared */
	--otuu-radius: 6px;
	--otuu-shadow: 0 1px 3px rgb(0 0 0 / .07);
}

/* ─────────────────────────────────────────────
   CONTAINER
───────────────────────────────────────────── */
.otuu-tracking {
	font-family: "Assistant", ui-sans-serif, -apple-system, BlinkMacSystemFont,
	             "Segoe UI", Helvetica, Arial, "Noto Sans", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
	color: var(--otuu-ink);
	background: var(--otuu-surface);
	border: 1px solid var(--otuu-line);
	border-radius: 8px;
	max-width: 580px;
	margin: 2rem auto;
	overflow: hidden;
	box-shadow: var(--otuu-shadow);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* RTL */
.otuu-tracking[dir="rtl"] {
	direction: rtl;
	text-align: right;
}

/* ─────────────────────────────────────────────
   STEPS
───────────────────────────────────────────── */
.otuu-tracking__steps {
	display: flex;
	align-items: flex-start;
	padding: 1.75rem 2rem 1.5rem;
	border-bottom: 1px solid var(--otuu-line);
}

/* Individual step */
.otuu-step {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 1;
	min-width: 0;
	gap: 0.5rem;
}

/* Indicator circle */
.otuu-step__indicator {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--otuu-surface);
	border: 1.5px solid var(--otuu-ink-4);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

/* Step number */
.otuu-step__number {
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1;
	color: var(--otuu-ink-4);
}

/* Checkmark */
.otuu-step__check {
	font-size: 0.9375rem;
	line-height: 1;
	font-weight: 700;
	color: #fff;
}

/* Step label */
.otuu-step__label {
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--otuu-ink-4);
	text-align: center;
	line-height: 1.3;
	max-width: 80px;
	letter-spacing: 0.005em;
}

/* Connector line */
.otuu-step__connector {
	flex: 1;
	height: 1.5px;
	background: var(--otuu-line);
	flex-shrink: 0;
	min-width: 10px;
	align-self: flex-start;
	margin-top: 20px; /* visual center of 40px circle */
}

/* ── Completed state — deep blue ── */
.otuu-step--completed .otuu-step__indicator {
	background: var(--otuu-blue);
	border-color: var(--otuu-blue);
}

.otuu-step--completed .otuu-step__label {
	color: var(--otuu-blue);
	font-weight: 600;
}

.otuu-step__connector--completed {
	background: var(--otuu-blue);
}

/* ── Current state — green ── */
.otuu-step--current .otuu-step__indicator {
	border: 2.5px solid var(--otuu-green);
	background: var(--otuu-surface);
	/* Slightly larger border is fine at 40px */
}

.otuu-step--current .otuu-step__number {
	color: var(--otuu-green);
	font-weight: 700;
}

.otuu-step--current .otuu-step__label {
	color: var(--otuu-green);
	font-weight: 700;
	font-size: 0.75rem;
}

/* ─────────────────────────────────────────────
   STATUS MESSAGE
   Fix: flex-wrap:nowrap + flex:1 on <p> prevents
   the dot from falling to a second line.
───────────────────────────────────────────── */
.otuu-status-msg {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0.625rem;
	padding: 0.9375rem 2rem;
	border-bottom: 1px solid var(--otuu-line-2);
}

/* Animated green pulse dot */
.otuu-status-msg__dot {
	display: block;
	position: relative;
	width: 8px;
	height: 8px;
	flex-shrink: 0;
}

.otuu-status-msg__dot::before,
.otuu-status-msg__dot::after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	border-radius: 50%;
}

.otuu-status-msg__dot::before {
	background: var(--otuu-done);
}

.otuu-status-msg__dot::after {
	background: var(--otuu-done);
	opacity: 0.4;
	animation: otuu-pulse 2.4s ease-out infinite;
}

@keyframes otuu-pulse {
	0%   { transform: scale(1);   opacity: 0.5; }
	60%  { transform: scale(2.5); opacity: 0; }
	100% { transform: scale(2.5); opacity: 0; }
}

.otuu-status-msg p {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--otuu-ink-2);
	line-height: 1.4;
}

/* ─────────────────────────────────────────────
   INFO SECTION
───────────────────────────────────────────── */
.otuu-tracking__info {
	padding: 1.5rem 2rem 2rem;
}

/* Card shell */
.otuu-info-card {
	border: 1px solid var(--otuu-line);
	border-radius: var(--otuu-radius);
	overflow: hidden;
}

/* Card header */
.otuu-info-card__head {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--otuu-surface-2);
	border-bottom: 1px solid var(--otuu-line);
}

.otuu-info-card__icon {
	width: 14px;
	height: 14px;
	color: var(--otuu-ink-3);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.otuu-info-card__icon svg {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
}

/* High-specificity to override WordPress theme h3 rules */
.otuu-tracking .otuu-info-card__head h3 {
	margin: 0 !important;
	padding: 0 !important;
	font-size: 0.6875rem !important;
	font-weight: 600 !important;
	text-transform: uppercase !important;
	letter-spacing: 0.07em !important;
	color: var(--otuu-ink-3) !important;
	line-height: 1 !important;
}

/* Card body */
.otuu-info-card__body {
	padding: 0 1rem;
}

/* Card actions */
.otuu-info-card__actions {
	display: flex;
	gap: 0.5rem;
	padding: 0 1rem 1rem;
	flex-wrap: wrap;
}

/* ─────────────────────────────────────────────
   TEMPLATE CONTENT (key–value rows)
───────────────────────────────────────────── */
.otuu-template-content {
	display: flex;
	flex-direction: column;
}

/* Each row */
.otuu-template-line {
	padding: 0.6875rem 0;
	border-bottom: 1px solid var(--otuu-line-2);
	font-size: 0.9375rem;
	line-height: 1.5;
}

.otuu-template-line:last-child {
	border-bottom: none;
}

/* Key–value row layout */
.otuu-template-line--kv {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.otuu-template-key {
	color: var(--otuu-ink-3);
	font-size: 0.875rem;
	font-weight: 400;
	white-space: nowrap;
	flex-shrink: 0;
}

.otuu-template-val {
	color: var(--otuu-ink);
	font-weight: 600;
	font-size: 0.9375rem;
	text-align: end;
	word-break: break-word;
}

/* Plain text row */
.otuu-template-line--text {
	color: var(--otuu-ink-2);
	font-size: 0.9375rem;
}

/* ─────────────────────────────────────────────
   PLACEHOLDER STATE
───────────────────────────────────────────── */
.otuu-info-placeholder {
	padding: 1.75rem 0;
	text-align: center;
}

.otuu-info-placeholder p {
	margin: 0;
	color: var(--otuu-ink-3);
	font-size: 0.9375rem;
}

/* ─────────────────────────────────────────────
   BUTTONS
───────────────────────────────────────────── */
.otuu-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5625rem 1.125rem;
	border-radius: var(--otuu-radius);
	font-family: inherit;
	font-weight: 500;
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	-webkit-tap-highlight-color: transparent;
	flex: 1;
	min-width: 0;
	transition: background 0.12s ease, border-color 0.12s ease;
	border: 1px solid transparent;
}

/* Primary — solid dark navy */
.otuu-btn--track {
	background: var(--otuu-ink);
	color: #fff;
	border-color: var(--otuu-ink);
}

.otuu-btn--track:hover {
	background: #1e293b;
	border-color: #1e293b;
}

.otuu-btn--track:active {
	background: #334155;
	border-color: #334155;
}

/* Outline — navigate / phone */
.otuu-btn--navigate,
.otuu-btn--phone {
	background: var(--otuu-surface);
	color: var(--otuu-ink);
	border-color: var(--otuu-line);
}

.otuu-btn--navigate:hover,
.otuu-btn--phone:hover {
	background: var(--otuu-surface-2);
	border-color: #c8d3de;
}

.otuu-btn--navigate:active,
.otuu-btn--phone:active {
	background: #f1f5f9;
}

/* ─────────────────────────────────────────────
   EMPTY / ERROR STATES
───────────────────────────────────────────── */
.otuu-tracking.otuu-tracking--empty,
.otuu-tracking.otuu-tracking--error {
	text-align: center;
	padding: 3.5rem 2rem;
}

.otuu-tracking--empty h2 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--otuu-ink);
	letter-spacing: -0.01em;
}

.otuu-tracking--empty p {
	margin: 0;
	font-size: 1rem;
	color: var(--otuu-ink-2);
}

.otuu-tracking--error p {
	margin: 0;
	font-weight: 600;
	font-size: 1rem;
	color: var(--otuu-danger);
}

/* ─────────────────────────────────────────────
   CANCELLED STATE
───────────────────────────────────────────── */
.otuu-tracking.otuu-tracking--cancelled {
	text-align: center;
	padding: 3.5rem 2rem;
}

/* Red cancel icon circle */
.otuu-cancelled__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin: 0 auto 1.375rem;
	border-radius: 50%;
	background: #fef2f2;
	border: 1.5px solid #fca5a5;
	font-size: 1.25rem;
	font-weight: 400;
	color: var(--otuu-danger);
	line-height: 1;
}

.otuu-tracking--cancelled h2 {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 700;
	color: var(--otuu-ink);
	letter-spacing: -0.01em;
}

.otuu-tracking--cancelled p {
	margin: 0;
	font-size: 1rem;
	color: var(--otuu-ink-2);
}

/* ─────────────────────────────────────────────
   RESPONSIVE — TABLET (≤ 640px)
───────────────────────────────────────────── */
@media (max-width: 640px) {
	.otuu-tracking {
		margin: 1rem;
	}

	.otuu-tracking__steps {
		padding: 1.5rem 1.5rem 1.25rem;
	}

	.otuu-status-msg {
		padding: 0.875rem 1.5rem;
	}

	.otuu-tracking__info {
		padding: 1.25rem 1.5rem 1.5rem;
	}

	.otuu-info-card__head {
		padding: 0.625rem 0.875rem;
	}

	.otuu-info-card__body {
		padding: 0 0.875rem;
	}

	.otuu-info-card__actions {
		padding: 0 0.875rem 0.875rem;
	}
}

/* ─────────────────────────────────────────────
   RESPONSIVE — MOBILE (≤ 480px)
───────────────────────────────────────────── */
@media (max-width: 480px) {
	.otuu-tracking {
		margin: 0;
		border-radius: 0;
		border-top: 1px solid var(--otuu-line);
		border-bottom: 1px solid var(--otuu-line);
		border-left: none;
		border-right: none;
		min-height: 100dvh;
		box-shadow: none;
	}

	.otuu-tracking__steps {
		padding: 1.25rem 1rem 1rem;
	}

	.otuu-step__indicator {
		width: 34px;
		height: 34px;
	}

	.otuu-step__connector {
		margin-top: 17px; /* visual center of 34px circle */
		min-width: 6px;
	}

	.otuu-step__label {
		font-size: 0.625rem;
		max-width: 58px;
	}

	.otuu-step__number {
		font-size: 0.8125rem;
	}

	.otuu-step__check {
		font-size: 0.875rem;
	}

	.otuu-step--current .otuu-step__label {
		font-size: 0.6875rem;
	}

	.otuu-status-msg {
		padding: 0.875rem 1rem;
	}

	.otuu-tracking__info {
		padding: 1rem 1rem 1.5rem;
	}

	.otuu-info-card__head {
		padding: 0.625rem 0.75rem;
	}

	.otuu-info-card__body {
		padding: 0 0.75rem;
	}

	.otuu-info-card__actions {
		flex-direction: column;
		gap: 0.5rem;
		padding: 0 0.75rem 0.875rem;
	}

	.otuu-btn {
		flex: none;
		width: 100%;
		padding: 0.875rem 1rem;
		font-size: 1rem;
	}

	.otuu-template-line--kv {
		flex-direction: column;
		gap: 0.125rem;
	}

	.otuu-template-val {
		text-align: start;
	}

	.otuu-tracking.otuu-tracking--empty,
	.otuu-tracking.otuu-tracking--error,
	.otuu-tracking.otuu-tracking--cancelled {
		padding: 2.5rem 1.25rem;
	}
}

/* ─────────────────────────────────────────────
   DARK MODE
───────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
	.otuu-tracking {
		--otuu-ink:    #f1f5f9;
		--otuu-ink-2:  #94a3b8;
		--otuu-ink-3:  #475569;
		--otuu-ink-4:  #334155;

		--otuu-blue:   #3b82f6;   /* lighter blue for dark bg */
		--otuu-green:  #22c55e;   /* lighter green for dark bg */

		--otuu-surface:   #0f172a;
		--otuu-surface-2: #1e293b;

		--otuu-line:   #1e293b;
		--otuu-line-2: #162032;
	}

	/* Completed steps dark */
	.otuu-step--completed .otuu-step__label {
		color: #3b82f6;
	}

	/* Primary button inverted */
	.otuu-btn--track {
		background: #f1f5f9;
		border-color: #f1f5f9;
		color: #0f172a;
	}

	.otuu-btn--track:hover {
		background: #e2e8f0;
		border-color: #e2e8f0;
	}

	/* Outline buttons */
	.otuu-btn--navigate,
	.otuu-btn--phone {
		background: transparent;
		color: #f1f5f9;
		border-color: #1e293b;
	}

	.otuu-btn--navigate:hover,
	.otuu-btn--phone:hover {
		background: #1e293b;
	}

	/* Step states */
	.otuu-step--completed .otuu-step__indicator {
		background: #3b82f6;
		border-color: #3b82f6;
	}

	.otuu-step--completed .otuu-step__check {
		color: #ffffff;
	}

	.otuu-step--current .otuu-step__indicator {
		border-color: #22c55e;
		background: transparent;
	}

	.otuu-step--current .otuu-step__number {
		color: #22c55e;
	}

	.otuu-step--current .otuu-step__label {
		color: #22c55e;
	}

	.otuu-step__connector--completed {
		background: #3b82f6;
	}

	/* Cancelled icon */
	.otuu-cancelled__mark {
		background: #2d0a0a;
		border-color: #7f1d1d;
	}
}