/* Live open/closed pill and hours list. Paired with open-status.js. */
.open-status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  width: fit-content;
  padding: .4rem .85rem;
  border-radius: 999px;
  background: #ffffff1f;
  color: inherit;
  font-family: var(--font-sans), Arial, sans-serif;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .04em;
  text-transform: uppercase;
  line-height: 1.2;
}
.open-status:empty { display: none; }
.open-status i {
  position: relative;
  flex: none;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: currentColor;
}
.open-status.is-open i { background: #2fbf5b; }
.open-status.is-soon i { background: #ffad32; }
.open-status.is-closed i { background: #e04452; }
.open-status.is-open i::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  animation: open-status-pulse 2s ease-out infinite;
}
@keyframes open-status-pulse {
  from { opacity: .7; scale: 1; }
  to { opacity: 0; scale: 2.8; }
}

/* On light backgrounds. */
.open-status-light .open-status,
.open-status.open-status-light {
  background: #7a10180f;
  color: #2a1212;
  border: 1px solid #7a101826;
}

/* Hero placement on the home page. */
.restaurant-hero-content .open-status {
  margin-top: 1.4rem;
  background: #0000004d;
  color: #fff;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid #ffffff33;
}
.motion-ready .restaurant-hero-content > .open-status { animation-delay: .95s; }

/* Hours list. */
.hours-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.hours-list li {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: .7rem .2rem;
  border-bottom: 1px solid #7a101820;
}
.hours-list li.is-today {
  font-weight: 800;
  color: #7a1018;
}
.hours-list li.is-today span:first-child::after {
  content: "Today";
  margin-left: .5rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: #ffad32;
  color: #1a0d0d;
  font-size: .65rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  vertical-align: .1em;
}
.contact-hours dl > div.is-today { font-weight: 800; }

@media (prefers-reduced-motion: reduce) {
  .open-status.is-open i::after { animation: none; }
}