.mpa-package-tracker {
    --mpa-tracker-accent: var(--awb-color4, #d7194b);
    --mpa-tracker-text: var(--awb-color3, #ffffff);
    --mpa-tracker-muted: rgba(255,255,255,.78);
    width: 100%;
}

.mpa-package-tracker--surface-dark {
    --mpa-tracker-text: #ffffff;
    --mpa-tracker-muted: rgba(255,255,255,.78);
    --mpa-tracker-error: #ffd4df;
}

.mpa-package-tracker--surface-light {
    --mpa-tracker-text: #172b43;
    --mpa-tracker-muted: rgba(23,43,67,.72);
    --mpa-tracker-error: #b42348;
}

.mpa-tracker__field {
    margin-bottom: 16px;
}

.mpa-tracker__label {
    display: block;
    margin-bottom: 6px;
    color: var(--mpa-tracker-text);
    font-weight: 500;
}

.mpa-tracker__required {
    color: var(--mpa-tracker-accent);
    font-size: .78em;
}

.mpa-tracker__input {
    display: block;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--awb-color5, #d9d9d9);
    border-radius: 4px;
    background: #fff;
    color: #161616;
    font: inherit;
}

.mpa-tracker__input:focus {
    outline: 2px solid var(--awb-color4, #1683d8);
    outline-offset: 1px;
}

.mpa-tracker__carriers {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px 28px;
    margin: 4px 0 12px;
}

.mpa-tracker__carrier {
    appearance: none;
    border: 0;
    padding: 4px;
    margin: 0;
    background: transparent;
    color: var(--mpa-tracker-text);
    cursor: pointer;
    opacity: .78;
    transition: color .16s ease, opacity .16s ease, transform .16s ease;
}

.mpa-tracker__carrier i {
    display: inline-block;
    width: 48px;
    height: auto;
    line-height: normal;
    font-size: 48px;
    color: currentColor;
}

.mpa-tracker__carrier:hover,
.mpa-tracker__carrier:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}

.mpa-tracker__carrier.is-highlighted,
.mpa-tracker__carrier.is-selected {
    color: var(--mpa-tracker-accent);
    opacity: 1;
}

.mpa-tracker__carrier.is-selected {
    transform: scale(1.06);
}

.mpa-tracker__status {
    min-height: 1.4em;
    margin: 4px 0 12px;
    color: var(--mpa-tracker-muted);
    font-size: .92em;
}

.mpa-tracker__status[data-state="high"],
.mpa-tracker__status[data-state="medium"],
.mpa-tracker__status[data-state="manual"] {
    color: var(--mpa-tracker-text);
}

.mpa-tracker__status[data-state="ambiguous"],
.mpa-tracker__status[data-state="near"],
.mpa-tracker__status[data-state="error"] {
    color: var(--mpa-tracker-error, #ffd4df);
}

.mpa-tracker__consent {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    margin: 10px 0 16px;
    color: var(--mpa-tracker-text);
    font-size: .88em;
    line-height: 1.45;
}

.mpa-tracker__consent-input {
    flex: 0 0 auto;
    margin-top: .25em;
}

.mpa-tracker__consent a {
    color: inherit;
    text-decoration: underline;
}

.mpa-tracker__button {
    width: 100%;
    cursor: pointer;
}

.mpa-package-tracker--mini .mpa-tracker__field {
    margin-bottom: 10px;
}

.mpa-package-tracker--mini .mpa-tracker__carriers {
    gap: 10px 18px;
}

.mpa-package-tracker--mini .mpa-tracker__carrier i {
    width: 36px;
    font-size: 36px;
}

.mpa-package-tracker--mini .mpa-tracker__status {
    font-size: .82em;
    margin-bottom: 8px;
}

.mpa-package-tracker--mini .mpa-tracker__consent {
    font-size: .78em;
    margin: 8px 0 10px;
}

@media (max-width: 640px) {
    .mpa-tracker__carriers {
        gap: 12px 20px;
    }

    .mpa-tracker__carrier i {
        width: 40px;
        font-size: 40px;
    }
}

/* Keep the mega-menu mini tracker visually separated from the store buttons below it. */
.mpa-package-tracker--mini.mpa-package-tracker--surface-light .mpa-tracker__button {
    margin-bottom: 20px;
}
