/* Variáveis de cor (--wc-exp-tracking-color-*, --wc-exp-tracking-gray-*) injetadas via inline style nas configurações. */
.wc-expedicao-tracking-page {
	max-width: 920px;
	margin: 0 auto;
	font-family: inherit;
	color: #1d2327;
}

.wc-exp-tracking-form {
	width: 100%;
	max-width: 420px;
	margin: 32px auto 0;
	box-sizing: border-box;
}

.wc-exp-tracking-form__heading {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
}

.wc-exp-tracking-form__panel .input-text {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

.wc-exp-tracking-form__panel p {
	margin: 0 0 12px;
}

.wc-exp-tracking-form__switch-wrap {
	margin: 4px 0 12px;
	text-align: left;
}

.wc-exp-tracking-form__actions {
	margin: 0;
}

.wc-exp-tracking-form__submit {
	width: 100%;
	text-align: center;
}

.wc-exp-tracking-form .wc-exp-tracking-form__switch {
	display: inline-block;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wc-exp-tracking-color-2, #2271b1);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	font-style: normal;
	line-height: 1.4;
	letter-spacing: 0;
	text-align: left;
	text-transform: none;
	text-decoration: underline;
	text-shadow: none;
	box-shadow: none;
	border-radius: 0;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: color 0.2s ease, opacity 0.2s ease;
}

.wc-exp-tracking-form .wc-exp-tracking-form__switch:hover,
.wc-exp-tracking-form .wc-exp-tracking-form__switch:focus {
	background: transparent;
	border: 0;
	color: var(--wc-exp-tracking-color-2, #2271b1);
	opacity: 0.85;
	text-decoration: underline;
	outline: none;
	box-shadow: none;
}

.wc-exp-tracking-form .wc-exp-tracking-form__switch:focus-visible {
	outline: 2px solid var(--wc-exp-tracking-color-2, #2271b1);
	outline-offset: 2px;
	border-radius: 2px;
	opacity: 1;
}

.wc-exp-tracking-result__header {
	margin-bottom: 24px;
}

.wc-exp-tracking-result__date {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	margin: 0 0 8px;
	font-size: 13px;
	line-height: 1.3;
	color: #1d2327;
}

.wc-exp-tracking-datetime__time {
	font-weight: 600;
}

.wc-exp-tracking-datetime__sep {
	color: var(--wc-exp-tracking-gray-sep, #8c8f94);
}

.wc-exp-tracking-datetime__day {
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.wc-exp-tracking-result__title {
	margin: 0 0 8px !important;
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

.wc-exp-tracking-result__subtitle {
	margin: 0;
	color: #50575e;
	font-size: 16px;
	line-height: 1.5;
}

.wc-exp-tracking-result__code {
	margin-bottom: 32px;
}

.wc-exp-tracking-result__code-label {
	display: block;
	font-size: 14px;
	color: var(--wc-exp-tracking-gray-muted, #646970);
	margin-bottom: 4px;
}

.wc-exp-tracking-result__code-value {
	display: inline-block;
	font-size: 16px;
	background: var(--wc-exp-tracking-gray-pending-bg, #f6f7f7);
	padding: 6px 10px;
	border-radius: 4px;
}

.wc-exp-tracking-result {
	--wc-exp-tracking-box-width: 100%;
	--wc-exp-progress-step-width: 25%;
}

.wc-exp-tracking-result__card {
	width: var(--wc-exp-tracking-box-width);
	max-width: 100%;
	box-sizing: border-box;
	background: #fff;
	border: 1px solid var(--wc-exp-tracking-gray-border, #dcdcde);
	border-radius: 12px;
	padding: 20px 24px 24px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* —— Barra de progresso —— */
.wc-exp-tracking-progress {
	width: var(--wc-exp-tracking-box-width);
	max-width: 100%;
	margin: 0 0 24px;
	padding: 0;
	box-sizing: border-box;
	--wc-exp-progress-step-gap: 120px;
	--wc-exp-progress-dot: 60px;
	--wc-exp-progress-icon: 25px;
	--wc-exp-progress-line: 3px;
}

.wc-exp-tracking-progress__steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--wc-exp-progress-step-gap);
	width: var(--wc-exp-tracking-box-width);
	max-width: 100%;
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc-exp-tracking-progress__step {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	min-width: 0;
	padding: 0;
	box-sizing: border-box;
	text-align: center;
}

.wc-exp-tracking-progress__step:not(:last-child)::after {
	content: '';
	position: absolute;
	top: calc(var(--wc-exp-progress-dot) / 2);
	left: calc(50% + var(--wc-exp-progress-dot) / 2 - 1px);
	width: calc(100% + var(--wc-exp-progress-step-gap) - var(--wc-exp-progress-dot) + 2px);
	height: var(--wc-exp-progress-line);
	background: var(--wc-exp-tracking-gray-line, #e2e4e7);
	transform: translateY(-50%);
	z-index: 1;
	pointer-events: none;
}

.wc-exp-tracking-progress__step.is-done:has(+ .is-done)::after {
	background: var(--wc-exp-tracking-color-1, #34a853);
}

.wc-exp-tracking-progress__step.is-done:has(+ .is-active)::after {
	background: linear-gradient(
		to right,
		var(--wc-exp-tracking-color-1, #34a853) 0%,
		var(--wc-exp-tracking-color-1, #34a853) 40%,
		var(--wc-exp-tracking-color-2, #2271b1) 100%
	);
}

.wc-exp-tracking-progress__step.is-done:has(+ .is-pending)::after {
	background: linear-gradient(
		to right,
		var(--wc-exp-tracking-color-1, #34a853) 0%,
		var(--wc-exp-tracking-color-1, #34a853) 40%,
		var(--wc-exp-tracking-gray-line, #e2e4e7) 100%
	);
}

.wc-exp-tracking-progress__step.is-active:has(+ .is-pending)::after {
	background: linear-gradient(
		to right,
		var(--wc-exp-tracking-color-2, #2271b1) 0%,
		var(--wc-exp-tracking-color-2, #2271b1) 40%,
		var(--wc-exp-tracking-gray-line, #e2e4e7) 100%
	);
}

.wc-exp-tracking-progress__dot {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--wc-exp-progress-dot);
	height: var(--wc-exp-progress-dot);
	margin: 0 0 8px;
	flex-shrink: 0;
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--wc-exp-tracking-gray-pending-bg, #f3f4f6);
	border: 2px solid var(--wc-exp-tracking-gray-line, #e2e4e7);
	color: var(--wc-exp-tracking-gray-muted, #9ca3af);
}

.wc-exp-tracking-progress__dot svg {
	width: var(--wc-exp-progress-icon);
	height: var(--wc-exp-progress-icon);
	display: block;
	flex-shrink: 0;
}

.wc-exp-tracking-progress__step.is-done .wc-exp-tracking-progress__dot {
	background: var(--wc-exp-tracking-color-1, #34a853);
	border-color: var(--wc-exp-tracking-color-1, #34a853);
	color: #fff;
}

.wc-exp-tracking-progress__step.is-active .wc-exp-tracking-progress__dot {
	background: var(--wc-exp-tracking-color-2, #2271b1);
	border-color: var(--wc-exp-tracking-color-2, #2271b1);
	color: #fff;
}

.wc-exp-tracking-progress__step.is-pending .wc-exp-tracking-progress__dot {
	background: var(--wc-exp-tracking-gray-pending-bg, #f3f4f6);
	border-color: var(--wc-exp-tracking-gray-line, #e2e4e7);
	color: var(--wc-exp-tracking-gray-muted, #9ca3af);
}

.wc-exp-tracking-progress.is-delivered .wc-exp-tracking-progress__step:last-child::after {
	display: none;
}

.wc-exp-tracking-progress__label {
	display: block;
	width: 100%;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	color: #1d2327;
}

.wc-exp-tracking-progress__meta {
	display: block;
	font-size: 12px;
	color: var(--wc-exp-tracking-gray-muted, #646970);
	text-transform: lowercase;
}

.wc-exp-tracking-timeline__title {
	margin: 0 0 20px;
	font-size: 16px;
	font-weight: 700;
}

.wc-exp-tracking-timeline__list-wrap {
	position: relative;
	overflow: hidden;
	transition: max-height 0.42s ease;
}

.wc-exp-tracking-timeline.has-more.is-collapsed .wc-exp-tracking-timeline__list-wrap {
	overflow: hidden;
}

.wc-exp-tracking-timeline__fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 88px;
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 55%, #fff 100%);
	opacity: 1;
	transition: opacity 0.35s ease;
	z-index: 2;
}

.wc-exp-tracking-timeline.is-expanded .wc-exp-tracking-timeline__fade {
	opacity: 0;
}

.wc-exp-tracking-timeline__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wc-exp-tracking-timeline__item {
	--wc-exp-timeline-marker: 12px;
	--wc-exp-timeline-date-h: 13px;
	--wc-exp-timeline-gap: 20px;
	display: grid;
	grid-template-columns: var(--wc-exp-timeline-marker) minmax(0, 1fr);
	grid-template-areas:
		'track date'
		'track details';
	column-gap: 16px;
	row-gap: 3px;
	align-items: stretch;
}

.wc-exp-tracking-timeline__item.is-hidden {
	display: none;
}

.wc-exp-tracking-timeline__track {
	grid-area: track;
	position: relative;
	width: var(--wc-exp-timeline-marker);
	align-self: stretch;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	padding-top: calc((var(--wc-exp-timeline-date-h) - var(--wc-exp-timeline-marker)) / 2);
}

.wc-exp-tracking-timeline__item:not(:first-child) .wc-exp-tracking-timeline__track::before,
.wc-exp-tracking-timeline__item:not(:last-child) .wc-exp-tracking-timeline__track::after {
	content: '';
	position: absolute;
	left: calc(var(--wc-exp-timeline-marker) / 2);
	transform: translateX(-50%);
	width: 2px;
	background: var(--wc-exp-tracking-gray-line, #dcdcde);
	z-index: 0;
}

.wc-exp-tracking-timeline__item:not(:first-child) .wc-exp-tracking-timeline__track::before {
	top: 0;
	height: calc(
		(var(--wc-exp-timeline-date-h) - var(--wc-exp-timeline-marker)) / 2 +
		var(--wc-exp-timeline-marker) / 2
	);
}

.wc-exp-tracking-timeline__item:not(:last-child) .wc-exp-tracking-timeline__track::after {
	top: calc(
		(var(--wc-exp-timeline-date-h) - var(--wc-exp-timeline-marker)) / 2 +
		var(--wc-exp-timeline-marker) / 2
	);
	bottom: 0;
}

.wc-exp-tracking-timeline__marker {
	position: relative;
	z-index: 1;
	flex-shrink: 0;
	width: var(--wc-exp-timeline-marker);
	height: var(--wc-exp-timeline-marker);
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--wc-exp-tracking-gray, #a7aaad);
	box-sizing: border-box;
}

.wc-exp-tracking-timeline__item.is-latest .wc-exp-tracking-timeline__marker {
	background: var(--wc-exp-tracking-color-2, #2271b1);
	border-color: var(--wc-exp-tracking-color-2, #2271b1);
	box-shadow: 0 0 0 4px var(--wc-exp-tracking-color-2-ring, rgba(34, 113, 177, 0.15));
}

.wc-exp-tracking-timeline__date {
	grid-area: date;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	min-height: var(--wc-exp-timeline-date-h);
	font-size: var(--wc-exp-timeline-date-h);
	line-height: 1.3;
	color: #1d2327;
	margin: 0;
}

.wc-exp-tracking-timeline__date--empty {
	visibility: hidden;
}

.wc-exp-tracking-timeline__details {
	grid-area: details;
	padding-bottom: var(--wc-exp-timeline-gap);
}

.wc-exp-tracking-timeline__item:last-child .wc-exp-tracking-timeline__details {
	padding-bottom: 0;
}

.wc-exp-tracking-timeline__event-title {
	display: block;
	font-size: 16px;
	margin-bottom: 2px;
}

.wc-exp-tracking-timeline__location {
	display: block;
	font-size: 14px;
	color: var(--wc-exp-tracking-gray-muted, #646970);
	margin-bottom: 4px;
}

.wc-exp-tracking-timeline__description {
	margin: 0;
	font-size: 14px;
	color: #50575e;
	line-height: 1.45;
}

.wc-exp-tracking-timeline__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 16px 0 0;
	padding: 10px 22px;
	border: 1px solid var(--wc-exp-tracking-color-2, #2271b1);
	border-radius: 8px;
	background: #fff;
	color: var(--wc-exp-tracking-color-2, #2271b1);
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	box-shadow: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.wc-exp-tracking-timeline__toggle:hover,
.wc-exp-tracking-timeline__toggle:focus {
	background: var(--wc-exp-tracking-color-2, #2271b1);
	border-color: var(--wc-exp-tracking-color-2, #2271b1);
	color: #fff;
	text-decoration: none;
	outline: none;
}

.wc-exp-tracking-timeline__toggle:focus-visible {
	outline: 2px solid var(--wc-exp-tracking-color-2, #2271b1);
	outline-offset: 2px;
}

.wc-exp-tracking-empty {
	margin: 0;
	color: var(--wc-exp-tracking-gray-muted, #646970);
}

@media (max-width: 768px) {
	.wc-exp-tracking-form {
		max-width: 100%;
		margin-top: 24px;
	}

	.wc-exp-tracking-result {
		--wc-exp-tracking-box-width: 100%;
		--wc-exp-progress-step-width: 25%;
	}

	.wc-exp-tracking-result__card {
		padding: 16px 16px 20px;
	}

	.wc-exp-tracking-progress {
		--wc-exp-progress-step-gap: 8px;
		--wc-exp-progress-dot: 34px;
		--wc-exp-progress-icon: 16px;
	}

	.wc-exp-tracking-progress__label {
		font-size: 10px;
	}

	.wc-exp-tracking-progress__meta {
		font-size: 10px;
	}

	.wc-exp-tracking-timeline__item {
		--wc-exp-timeline-marker: 10px;
		column-gap: 12px;
	}
}