/* Shipment tracking box above the order details (VapeEra Core shipment_tracking module, markup in
   its template shipment-tracking/details.php). Loaded only on My Account › View order and the Track
   Order page. ".woocommerce a.button" (WooCommerce) outranks a plain class, hence the longer selectors. */
.vc-tracking {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--vc-line);
	border-radius: var(--vc-radius);
	background: var(--vc-primary-tint);
}

.vc-tracking__title {
	margin: 0 0 0.75rem;
	font-size: 1.125rem;
}

.vc-tracking__list {
	display: grid;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.vc-tracking__item {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 0.75rem 1rem;
	border-radius: var(--vc-radius-sm);
	background: var(--vc-surface);
}

.vc-tracking__info {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.vc-tracking__carrier {
	font-weight: 700;
}

.vc-tracking__number {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	overflow-wrap: anywhere;
}

.vc-tracking__date {
	color: var(--vc-muted);
	font-size: 0.875rem;
}

.vc-tracking a.vc-tracking__link.button,
.woocommerce .vc-tracking a.vc-tracking__link.button {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	padding: 0.5rem 1.25rem;
	border-radius: var(--vc-radius-pill);
	background: var(--vc-primary-deep);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.vc-tracking a.vc-tracking__link.button:hover,
.vc-tracking a.vc-tracking__link.button:focus-visible,
.woocommerce .vc-tracking a.vc-tracking__link.button:hover,
.woocommerce .vc-tracking a.vc-tracking__link.button:focus-visible {
	background: var(--vc-ink);
	color: #fff;
}

.vc-tracking__title {
	font-family: var(--vc-font-heading);
	letter-spacing: -0.01em;
}

@media (max-width: 479px) {
	.vc-tracking {
		padding: 0.875rem;
	}

	.vc-tracking__item {
		flex-direction: column;
		align-items: stretch;
	}

	.vc-tracking a.vc-tracking__link.button,
	.woocommerce .vc-tracking a.vc-tracking__link.button {
		justify-content: center;
		width: 100%;
	}
}