.smd-public-tracking {
  --smd-green: #0f4b3b;
  --smd-coral: #f65461;
  margin: 28px 0;
  padding: clamp(20px, 3vw, 30px);
  border: 1px solid #e5ddd5;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff 0%, #f5faf7 100%);
  box-shadow: 0 14px 34px rgba(15, 75, 59, .08);
  color: var(--smd-green);
}

.smd-public-tracking__header,
.smd-public-tracking__package-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.smd-public-tracking__eyebrow {
  margin: 0 0 4px;
  color: var(--smd-coral);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.smd-public-tracking h2,
.smd-public-tracking h3 {
  margin: 0;
  color: var(--smd-green);
}

.smd-public-tracking h2 { font-size: clamp(24px, 3vw, 34px); }
.smd-public-tracking h3 { font-size: 18px; }

.smd-public-tracking__status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 11px;
  border-radius: 999px;
  background: #edf2ef;
  color: #56665f;
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
}

.smd-public-tracking__status::before {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.smd-public-tracking__status--waiting { color: #a37212; background: #fff6dc; }
.smd-public-tracking__status--picked { color: #2678ad; background: #e9f5fc; }
.smd-public-tracking__status--in_transit { color: #c75526; background: #fff0e9; }
.smd-public-tracking__status--delivered { color: #24784d; background: #e9f7ef; }
.smd-public-tracking__status--exception { color: #c53446; background: #fff0f1; }

.smd-public-tracking__packages {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.smd-public-tracking__package {
  padding: 17px;
  border: 1px solid #dce7e1;
  border-radius: 14px;
  background: rgba(255, 255, 255, .9);
}

.smd-public-tracking__details {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 30px;
  margin: 15px 0 0;
}

.smd-public-tracking__details div { min-width: 150px; }
.smd-public-tracking__details dt { color: #728078; font-size: 12px; }
.smd-public-tracking__details dd { margin: 2px 0 0; font-weight: 700; }

.smd-public-tracking__event {
  margin: 14px 0 0;
  padding: 11px 13px;
  border-left: 3px solid var(--smd-coral);
  border-radius: 8px;
  background: #fff8f5;
}

.smd-public-tracking__event time { display: block; margin-top: 3px; color: #728078; font-size: 12px; }

.smd-public-tracking .smd-public-tracking__link {
  margin-top: 14px;
  border: 0;
  border-radius: 9px;
  background: var(--smd-green);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}

.smd-public-tracking .smd-public-tracking__link:hover {
  background: var(--smd-coral);
  color: #fff;
}

@media (max-width: 640px) {
  .smd-public-tracking__header,
  .smd-public-tracking__package-heading {
    align-items: flex-start;
    flex-direction: column;
  }
}