/* Scoped to the white receipt/status card; never affects order lists or the matching dialog. */
.receive-page .receive-match-card .order-countdown {
  display: inline-block !important;
  box-sizing: border-box;
  width: fit-content;
  max-width: 100%;
  margin: 4px 0 0;
  padding: 8px 12px;
  border: 1px solid rgba(201, 93, 43, .2);
  border-radius: 11px;
  color: #9a3412 !important;
  background: var(--peach, #fff0e5);
  font-family: inherit;
  font-size: clamp(30px, 8.5vw, 40px) !important;
  font-weight: 800 !important;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  line-height: 1.2 !important;
  letter-spacing: 0;
  white-space: nowrap;
}

@supports selector(:has(*)) {
  .receive-page .receive-match-card:has(.order-countdown) {
    flex-wrap: wrap;
    gap: 10px;
    padding: 16px 18px;
  }

  .receive-page .receive-match-card:has(.order-countdown) > div {
    display: grid;
    flex: 1 1 240px;
    min-width: 0;
    gap: 6px;
    justify-items: start;
  }

  .receive-page .receive-match-card:has(.order-countdown) > div > small {
    font-size: 12px;
    line-height: 1.4;
  }

  .receive-page .receive-match-card:has(.order-countdown) > div > strong {
    color: var(--ink, #2a201c);
    font-size: 17px;
    font-weight: 750;
    line-height: 1.4;
  }
}

@media (max-width: 359px) {
  .receive-page .receive-match-card .order-countdown {
    padding: 8px 10px;
    font-size: 26px !important;
  }
}