:root {
  --booking-meta-day: #e36b91;
  --booking-meta-date: #f3ead4;
  --booking-meta-time: #b8d6a0;
  --booking-meta-colon: #e1bd73;
  --booking-meta-separator: #b7bdb8;
}

.reference-card #booking-reference {
  direction: ltr;
  unicode-bidi: isolate;
  white-space: nowrap;
}

.booking-created-at {
  margin-top: 10px;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 6px;
  direction: rtl;
  white-space: nowrap;
  font-size: clamp(.84rem, 3.55vw, 1.10rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.booking-day {
  color: var(--booking-meta-day);
  text-shadow: 0 0 8px rgba(227, 107, 145, .22);
}

.booking-date,
.booking-time {
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  direction: ltr;
  unicode-bidi: isolate;
}

.booking-date-day,
.booking-date-month,
.booking-date-year {
  color: var(--booking-meta-date);
  text-shadow: 0 0 6px rgba(243, 234, 212, .10);
}

.booking-date-separator {
  color: var(--booking-meta-separator);
  font-weight: 700;
}

.booking-time-hour,
.booking-time-minute,
.booking-time-period {
  color: var(--booking-meta-time);
  text-shadow: 0 0 7px rgba(184, 214, 160, .16);
}

.booking-time-colon {
  padding-inline: 1px;
  color: var(--booking-meta-colon);
  text-shadow: 0 0 5px rgba(225, 189, 115, .16);
}

.booking-time-period {
  margin-inline-start: 1px;
  font-size: .86em;
  text-transform: lowercase;
}

@media (max-width: 420px) {
  .booking-created-at {
    gap: 4px;
    font-size: clamp(.78rem, 3.8vw, .95rem);
  }
}