/* ==========================================================
   cl-tracking.css — Shipment tracking widget styles
   No Bootstrap, no external CDN — theme CSS variables only.
   ========================================================== */

/* ── Section ─────────────────────────────────────────────── */
.section.tracking {
	padding-block: var(--section-gap, 5rem);
}

/* ── Card wrapper ────────────────────────────────────────── */
.cl-track__card {
	background    : var(--clr-navy-2, #1a2436);
	border-radius : 12px;
	padding       : 2rem;
	margin-top    : 2.5rem;
	border        : 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Tab bar ─────────────────────────────────────────────── */
.cl-track__tabs {
	display       : flex;
	border-bottom : 1px solid rgba(255, 255, 255, 0.1);
	margin-bottom : 2rem;
	gap           : 0;
}

.cl-tab {
	display         : inline-flex;
	align-items     : center;
	gap             : 0.5rem;
	padding         : 0.75rem 1.5rem;
	background      : none;
	border          : none;
	border-bottom   : 2px solid transparent;
	color           : rgba(255, 255, 255, 0.65);
	font-size       : 0.9375rem;
	font-weight     : 600;
	font-family     : inherit;
	cursor          : pointer;
	transition      : color 0.2s, border-color 0.2s;
	white-space     : nowrap;
	text-decoration : none;
}

.cl-tab:hover {
	color : rgba(255, 255, 255, 0.8);
}

.cl-tab--active,
.cl-tab[aria-selected="true"] {
	color             : var(--clr-amber, #f5a623);
	border-bottom-color : var(--clr-amber, #f5a623);
}

.cl-tab svg {
	flex-shrink : 0;
	opacity     : 0.75;
	transition  : opacity 0.2s;
}

.cl-tab--active svg,
.cl-tab[aria-selected="true"] svg {
	opacity : 1;
}

/* ── Field / input row ───────────────────────────────────── */
.cl-track__field {
	margin-bottom : 1.5rem;
}

.cl-track__label {
	display       : block;
	color         : rgba(255, 255, 255, 0.65);
	font-size     : 0.875rem;
	font-weight   : 500;
	margin-bottom : 0.5rem;
}

.cl-track__input-row {
	display     : flex;
	align-items : center;
	gap         : 0.75rem;
}

.cl-track__input {
	flex          : 1;
	min-width     : 0;
	height        : 3rem;
	padding       : 0 1rem;
	background    : rgba(255, 255, 255, 0.05);
	border        : 1px solid rgba(255, 255, 255, 0.14);
	border-radius : 6px;
	color         : #fff;
	font-size     : 1rem;
	font-family   : inherit;
	letter-spacing: 0.03em;
	transition    : border-color 0.2s, background 0.2s;
}

.cl-track__input::placeholder {
	color : rgba(255, 255, 255, 0.28);
}

.cl-track__input:focus {
	outline      : none;
	border-color : var(--clr-amber, #f5a623);
	background   : rgba(255, 255, 255, 0.07);
}

.cl-track__btn {
	flex-shrink : 0;
	white-space : nowrap;
	height      : 3rem;
}

/* ── Spinner ─────────────────────────────────────────────── */
.cl-track__spinner {
	width        : 22px;
	height       : 22px;
	border       : 3px solid rgba(255, 255, 255, 0.12);
	border-top-color : var(--clr-amber, #f5a623);
	border-radius    : 50%;
	animation    : cl-spin 0.65s linear infinite;
	display      : none;
	flex-shrink  : 0;
}

.cl-track__spinner.active {
	display : block;
}

@keyframes cl-spin {
	to { transform: rotate(360deg); }
}

/* ── Result wrapper ──────────────────────────────────────── */
.cl-track__result {
	margin-top : 1.5rem;
}

/* ── Notices ─────────────────────────────────────────────── */
.cl-track-notice {
	padding       : 1rem 1.25rem;
	border-radius : 6px;
	font-size     : 0.9375rem;
	line-height   : 1.5;
}

.cl-track-notice--error {
	background : rgba(220, 53, 69, 0.12);
	border     : 1px solid rgba(220, 53, 69, 0.3);
	color      : #f08080;
}

/* ── Meta grid (shipment details) ───────────────────────── */
.cl-track__meta {
	display               : grid;
	grid-template-columns : repeat(auto-fit, minmax(140px, 1fr));
	gap                   : 0.75rem 2rem;
	padding               : 1.25rem 1.5rem;
	background            : rgba(255, 255, 255, 0.04);
	border-radius         : 8px;
	margin-bottom         : 2rem;
	border                : 1px solid rgba(255, 255, 255, 0.07);
}

.cl-track__meta-row {
	display        : flex;
	flex-direction : column;
	gap            : 0.25rem;
}

.cl-track__meta-label {
	font-size      : 0.6875rem;
	text-transform : uppercase;
	letter-spacing : 0.08em;
	color          : rgba(255, 255, 255, 0.38);
	font-weight    : 600;
}

.cl-track__meta-value {
	font-size   : 0.9375rem;
	font-weight : 700;
	color       : var(--clr-amber, #f5a623);
	min-height  : 1.25em; /* reserve space while empty */
}

/* ── Progress tracker ────────────────────────────────────── */
.cl-track__steps {
	display        : flex;
	list-style     : none;
	padding        : 0;
	margin         : 0 0 2rem;
	position       : relative;
	counter-reset  : step;
}

/* Background track line */
.cl-track__steps::before {
	content    : '';
	position   : absolute;
	top        : 23px; /* vertically centred on the 48px circles */
	left       : calc(100% / 12);
	right      : calc(100% / 12);
	height     : 2px;
	background : rgba(255, 255, 255, 0.1);
	z-index    : 0;
}

.cl-track__step {
	flex           : 1;
	display        : flex;
	flex-direction : column;
	align-items    : center;
	gap            : 0.5rem;
	position       : relative;
	z-index        : 1;
}

/* Amber fill — extends line from current step to next */
.cl-track__step.step--done::after {
	content    : '';
	position   : absolute;
	top        : 23px;
	left       : 50%;
	right      : -50%;
	height     : 2px;
	background : var(--clr-amber, #f5a623);
	z-index    : 0;
}

.cl-track__step:last-child::after {
	display : none;
}

/* Step icon (decorative SVG above circle) */
.cl-track__step-icon {
	color      : rgba(255, 255, 255, 0.25);
	transition : color 0.3s;
	line-height: 1;
}

.cl-track__step.step--done .cl-track__step-icon {
	color : rgba(245, 166, 35, 0.8);
}

/* Numbered circle */
.cl-track__step-circle {
	position        : relative;
	z-index         : 1;
	width           : 48px;
	height          : 48px;
	border-radius   : 50%;
	border          : 2px solid rgba(255, 255, 255, 0.18);
	background      : rgba(255, 255, 255, 0.05);
	display         : flex;
	align-items     : center;
	justify-content : center;
	font-size       : 0.9375rem;
	font-weight     : 700;
	color           : rgba(255, 255, 255, 0.35);
	transition      : background 0.3s, border-color 0.3s, color 0.3s;
}

.cl-track__step.step--done .cl-track__step-circle {
	background   : var(--clr-amber, #f5a623);
	border-color : var(--clr-amber, #f5a623);
	color        : var(--clr-navy, #0a1628);
}

/* Toggle num / check ✓ */
.cl-track__step .step-check { display: none; font-weight: 900; }
.cl-track__step .step-num   { display: block; }

.cl-track__step.step--done .step-check { display: block; }
.cl-track__step.step--done .step-num   { display: none; }

/* Step label */
.cl-track__step-label {
	font-size   : 0.6875rem;
	text-align  : center;
	color       : rgba(255, 255, 255, 0.38);
	font-weight : 600;
	text-transform : uppercase;
	letter-spacing : 0.04em;
	transition  : color 0.3s;
	line-height : 1.3;
}

.cl-track__step.step--done .cl-track__step-label {
	color : rgba(255, 255, 255, 0.85);
}

/* ── Events table ────────────────────────────────────────── */
.cl-track__table {
	width            : 100%;
	border-collapse  : collapse;
	font-size        : 0.875rem;
}

.cl-track__table th {
	padding        : 0.625rem 1rem;
	text-align     : left;
	font-size      : 0.6875rem;
	text-transform : uppercase;
	letter-spacing : 0.07em;
	color          : rgba(255, 255, 255, 0.38);
	border-bottom  : 1px solid rgba(255, 255, 255, 0.1);
	font-weight    : 600;
}

.cl-track__table td {
	padding       : 0.75rem 1rem;
	color         : rgba(255, 255, 255, 0.78);
	border-bottom : 1px solid rgba(255, 255, 255, 0.05);
	vertical-align: top;
	line-height   : 1.4;
}

.cl-track__table tbody tr:last-child td {
	border-bottom : none;
}

.cl-track__table tbody tr:hover td {
	background : rgba(255, 255, 255, 0.025);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 768px) {
	.cl-track__card {
		padding : 1.25rem;
	}

	.cl-tab {
		padding   : 0.625rem 1rem;
		font-size : 0.875rem;
	}

	.cl-track__input-row {
		flex-wrap : wrap;
	}

	.cl-track__btn {
		width           : 100%;
		justify-content : center;
	}

	.cl-track__meta {
		grid-template-columns : repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.cl-track__steps {
		overflow-x     : auto;
		padding-bottom : 0.5rem;
	}

	.cl-track__step {
		min-width : 60px;
	}

	.cl-track__step-label {
		font-size : 0.6rem;
	}

	.cl-track__table {
		display    : block;
		overflow-x : auto;
	}
}