.celebration-destination {
  text-align: left;
  margin: 14px 0;
  padding: 12px 14px;
  border: 1px solid #b7d8c8;
  border-radius: 12px;
  background: #f2fbf6;
}
.celebration-destination span,
.celebration-destination b,
.celebration-destination small { display: block; }
.celebration-destination span { color: #527063; font-size: 11px; font-weight: 800; text-transform: uppercase; }
.celebration-destination b { color: #153f31; margin-top: 6px; font-size: 13px; line-height: 1.45; }
.celebration-destination small { color: #33715a; margin-top: 7px; font-size: 11px; }

.stage-celebration::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 4px;
  background: #2e6be6;
  transform-origin: left;
  animation: celebration-autohide var(--celebration-duration,5.5s) linear forwards;
}
@keyframes celebration-autohide { to { transform: scaleX(0); } }

.shipping-refresh-confirmation {
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) auto;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  padding: 11px 14px;
  border: 1px solid #8bd1ad;
  border-radius: 12px;
  background: #effbf5;
  color: #185a3e;
}
.shipping-refresh-confirmation > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #1b9662; color: #fff; font-weight: 900; }
.shipping-refresh-confirmation b,
.shipping-refresh-confirmation small { display: block; }
.shipping-refresh-confirmation small { margin-top: 3px; color: #527263; }
.shipping-refresh-confirmation button { border: 0; border-radius: 9px; padding: 9px 13px; background: #187852; color: #fff; cursor: pointer; font: inherit; font-weight: 800; }
.shipping-card.shipping-just-sent { border-color: #20a36b; box-shadow: 0 0 0 3px #20a36b26, 0 10px 25px #174e3720; }

.shipping-status-tabs {
  display: grid;
  grid-template-columns: repeat(5,minmax(126px,1fr));
  gap: 9px;
  margin: 12px 0;
}
.shipping-status-tabs button {
  min-height: 76px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 8px;
  padding: 10px 12px;
  border: 2px solid transparent;
  border-radius: 12px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: #17324f;
  transition: transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.shipping-status-tabs button:hover { transform: translateY(-1px); }
.shipping-status-tabs button.active { border-color: currentColor; box-shadow: 0 5px 16px #17324f22; }
.shipping-status-tabs span { font-size: 13px; font-weight: 900; }
.shipping-status-tabs b { grid-row: 1 / 3; grid-column: 2; font-size: 25px; line-height: 1; }
.shipping-status-tabs small { font-size: 10px; opacity: .78; }
.shipping-status-tabs .stage-all { background: #f1f4f8; color: #42546a; }
.shipping-status-tabs .stage-pending { background: #fff3d6; color: #9a5a00; }
.shipping-status-tabs .stage-tracking { background: linear-gradient(135deg,#eaf2ff 0 50%,#e5f9fb 50%); color: #145f91; }
.shipping-status-tabs .stage-shipped { background: #e6f8ee; color: #14764e; }
.shipping-status-tabs .stage-manual-complete { background: #f2ecff; color: #6840a3; }

@media (max-width: 640px) {
  .shipping-status-tabs { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 3px; }
  .shipping-status-tabs button { min-width: 150px; scroll-snap-align: start; }
  .shipping-refresh-confirmation { grid-template-columns: 34px 1fr; }
  .shipping-refresh-confirmation button { grid-column: 1 / -1; width: 100%; }
  .celebration-destination { max-height: 165px; overflow: auto; }
}