.booking-tools,
.booking-range,
.booking-day-head {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.booking-tools button,
.booking-range button,
.booking-days button {
  border: 1px solid currentColor;
  border-radius: 24px;
  background: transparent;
  color: inherit;
  padding: 0.32rem 0.78rem;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
}
.booking-tools button[aria-pressed="true"] {
  background: var(--booking-selected, #163747);
  color: white;
  border-color: transparent;
}
.booking-limits {
  margin: 0 0 0.65rem;
  font-size: 0.9rem;
}
.booking-range {
  justify-content: space-between;
  margin: 0.8rem 0;
}
.booking-days {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  gap: 0.6rem;
}
.booking-day {
  border: 1px solid #7893a44d;
  border-radius: 12px;
  padding: 0.6rem 0.8rem;
}
.booking-day-head {
  justify-content: space-between;
}
.booking-resource {
  display: grid;
  gap: 0.21rem;
  margin: 0.55rem 0;
}
.booking-resource strong,
.booking-resource small {
  font-size: 0.8rem;
  font-weight: 500;
}
.booking-timeline {
  height: 7px;
  background: repeating-linear-gradient(
    to right,
    #647c8b33 0,
    #647c8b33 calc(25% - 1px),
    #647c8b88 calc(25% - 1px),
    #647c8b88 25%
  );
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.booking-timeline span {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #dd6543;
  border-radius: 4px;
}
