#playbus-calendar-wrapper {
  display: flex;
  gap: 20px;
}

.playbus-month {
  flex: 1;
}

.playbus-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.playbus-day,
.playbus-head,
.playbus-empty {
  text-align: center;
  padding: 8px;
  border-radius: 6px;
}

.playbus-head {
  font-weight: bold;
  background: #f5f5f5;
}

.playbus-day.available {
  cursor: pointer;
  background: #e8f7e8;
}

.playbus-day.available:hover {
  background: #c6f3c6;
  outline: 2px solid #4c8bf5;
}

.playbus-day.past {
  background: #eee;
  color: #aaa;
}

.playbus-day.blocked {
  background: #ffd6d6;
  color: #8b0000;
  border: 1px solid #ff4d4f;
  cursor: not-allowed;
}

.playbus-day.cutoff {
  background: #fff3cd;
  color: #7a5d00;
  cursor: not-allowed;
  border: 1px dashed #d4a400;
}

.playbus-day.cutoff-special {
  background: #ffe69c;
  color: #5c4700;
  cursor: not-allowed;
  border: 1px dashed #b88900;
}

.playbus-day.cutoff:hover,
.playbus-day.cutoff-special:hover {
  outline: none;
  filter: brightness(0.98);
}

.playbus-day.selected {
  outline: 2px solid #1a73e8;
  box-shadow: inset 0 0 0 2px #1a73e8;
  background: #0098d9;
  color: #fff;
  font-weight: bold;
}

#playbus-calendar-nav {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 24px;
  margin-bottom: 32px;
  border-bottom: 2px dashed #0098d9;
  padding: 12px;
  border-top: 2px dashed #0098d9;
}

#playbus-next,
#playbus-prev {
  padding: 8px 14px;
}

#playbus-next:hover,
#playbus-prev:hover {
  background-color: white;
  color: #0098d9;
}