/*
 * PGB Order Tracker: My Account order panel and Orders-list status.
 *
 * Plain unlayered CSS on plugin-owned classes. Colors come from the theme's
 * tokens with light-mode literal fallbacks; dark mode works because the theme
 * swaps those tokens under html[data-theme="dark"], so there are no
 * prefers-color-scheme rules and no hard-coded colors here. Every token used
 * below has a dark override in the theme except --font-* / --radius-* /
 * --spacing-*.
 */

/* ---- panel ------------------------------------------------------------- */

.pgb-ot {
	box-sizing: border-box;
	margin: 0 0 var(--spacing-6, 2rem);
	padding: var(--spacing-5, 1.5rem);
	border: 1px solid var(--color-border-2, #E2E6EA);
	border-radius: var(--radius-card, 14px);
	background: var(--color-surface-2, #FFFFFF);
	color: var(--color-text, #0A0A0A);
	font-family: var(--font-body, "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.55;
}

.pgb-ot *,
.pgb-ot *::before,
.pgb-ot *::after {
	box-sizing: border-box;
}

.pgb-ot--short,
.pgb-ot--review,
.pgb-ot--on-hold {
	border-color: var(--color-warning-wash-border, #F0C97A);
}

.pgb-ot__summary {
	margin: 0;
}

.pgb-ot .pgb-ot__headline {
	margin: 0;
	color: var(--color-text, #0A0A0A);
	font-family: var(--font-heading, "Geist", ui-sans-serif, system-ui, sans-serif);
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.35;
}

.pgb-ot--failed .pgb-ot__headline {
	color: var(--color-error, #B8353A);
}

.pgb-ot .pgb-ot__detail {
	margin: var(--spacing-2, 0.5rem) 0 0;
	color: var(--color-text, #0A0A0A);
	overflow-wrap: anywhere;
}

/* ---- progress bar ------------------------------------------------------- */

.pgb-ot .pgb-ot__steps {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	margin: var(--spacing-5, 1.5rem) 0 0;
	padding: 0;
	list-style: none;
}

.pgb-ot .pgb-ot__step {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 0;
	margin: 0;
	padding: 0 var(--spacing-1, 0.25rem);
	text-align: center;
	list-style: none;
}

/* Connector into each step from the previous one (decorative). */
.pgb-ot__step + .pgb-ot__step::before {
	content: "";
	position: absolute;
	top: 11px;
	right: 50%;
	width: 100%;
	height: 2px;
	background: var(--color-rule, #C7D0D8);
}

.pgb-ot__step--done + .pgb-ot__step::before {
	background: var(--color-status-complete, #2F7D4F);
}

.pgb-ot__marker {
	position: relative;
	z-index: 1;
	display: block;
	flex: none;
	width: 24px;
	height: 24px;
	/* Upcoming ring: control-border clears 3:1 in both modes (--color-rule does not). */
	border: 2px solid var(--color-control-border, #5B6675);
	border-radius: var(--radius-pill, 999px);
	background: var(--color-surface-2, #FFFFFF);
}

/* Done: filled dot with a check drawn in borders (data-URI SVGs can't read tokens). */
.pgb-ot__step--done .pgb-ot__marker {
	border-color: var(--color-status-complete, #2F7D4F);
	background: var(--color-status-complete, #2F7D4F);
}

.pgb-ot__step--done .pgb-ot__marker::after {
	content: "";
	position: absolute;
	top: 3px;
	left: 7px;
	width: 6px;
	height: 11px;
	border: solid var(--color-surface, #FFFFFF);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

/* Current: outlined ring with a center dot. */
.pgb-ot__step--current .pgb-ot__marker {
	border-color: var(--color-control-border, #5B6675);
}

.pgb-ot__step--current .pgb-ot__marker::after {
	content: "";
	position: absolute;
	top: 5px;
	left: 5px;
	width: 10px;
	height: 10px;
	border-radius: var(--radius-pill, 999px);
	background: var(--color-control-border, #5B6675);
}

/* Attention (on-hold, short, review): warning ring on a warning wash. */
.pgb-ot__step--attention .pgb-ot__marker {
	border-color: var(--color-warning, #8A5A1F);
	background: var(--color-warning-wash, #FFF7E6);
}

.pgb-ot__step--attention .pgb-ot__marker::after {
	background: var(--color-warning, #8A5A1F);
}

.pgb-ot__label {
	display: block;
	max-width: 100%;
	margin-top: var(--spacing-2, 0.5rem);
	color: var(--color-text, #0A0A0A);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.pgb-ot__step--upcoming .pgb-ot__label {
	color: var(--color-text-muted, #64748B);
	font-weight: 400;
}

.pgb-ot__step--attention .pgb-ot__label {
	color: var(--color-warning, #8A5A1F);
}

.pgb-ot__date {
	display: block;
	margin-top: 2px;
	color: var(--color-text-muted, #64748B);
	font-size: 12.5px;
	line-height: 1.3;
}

/* ---- tracking ----------------------------------------------------------- */

.pgb-ot__tracking {
	margin-top: var(--spacing-5, 1.5rem);
	padding-top: var(--spacing-4, 1rem);
	border-top: 1px solid var(--color-line, #EEF1F3);
}

.pgb-ot .pgb-ot__tracking-label {
	margin: 0 0 var(--spacing-2, 0.5rem);
	color: var(--color-text-muted, #64748B);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.pgb-ot .pgb-ot__tracking-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.pgb-ot .pgb-ot__tracking-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--spacing-1, 0.25rem) var(--spacing-3, 0.75rem);
	margin: 0;
	padding: var(--spacing-1, 0.25rem) 0;
	list-style: none;
}

.pgb-ot__carrier {
	font-weight: 500;
}

.pgb-ot__number {
	min-width: 0;
	font-family: var(--font-mono-2, "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace);
	font-size: 14px;
	overflow-wrap: anywhere;
}

.pgb-ot__link {
	font-size: 14px;
}

/* ---- screen-reader text ------------------------------------------------- */

.pgb-ot__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* ---- Orders list Status cell ------------------------------------------- */

.pgb-ot-compact {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	line-height: 1.35;
}

.pgb-ot-compact__dot {
	flex: none;
	width: 8px;
	height: 8px;
	border-radius: var(--radius-pill, 999px);
	background: var(--color-steel, #5E89A3);
}

.pgb-ot-compact--attention .pgb-ot-compact__dot {
	background: var(--color-warning, #8A5A1F);
}

.pgb-ot-compact--done .pgb-ot-compact__dot {
	background: var(--color-status-complete, #2F7D4F);
}

.pgb-ot-compact--muted .pgb-ot-compact__dot {
	background: var(--color-text-muted, #64748B);
}

.pgb-ot-compact--error .pgb-ot-compact__dot {
	background: var(--color-error, #B8353A);
}

/* ---- narrow screens ----------------------------------------------------- */

@media (max-width: 480px) {
	.pgb-ot {
		padding: var(--spacing-4, 1rem);
	}

	.pgb-ot__label {
		font-size: 13px;
	}

	.pgb-ot__date {
		font-size: 12px;
	}
}