.time-option[data-availability="available"] {
  background: #ffffff;
  color: #302e2a;
  cursor: pointer;
  opacity: 1;
}

.time-option[data-availability="available"].selected {
  background: #eee3c8;
  border-color: #c8a24d;
  color: #302e2a;
  opacity: 1;
}

.time-option[data-availability="unavailable"],
.time-option[data-availability="unavailable"]:disabled {
  min-height: 52px;
  background: #e7e5e1;
  border-color: #d7d4cf;
  color: #89857e;
  cursor: not-allowed;
  opacity: 0.62;
}

.time-option[data-availability="unavailable"]::after {
  display: block;
  margin-top: 3px;
  color: #89857e;
  content: "Indisponível";
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
}

.time-option[data-availability="loading"],
.time-option[data-availability="loading"]:disabled {
  cursor: wait;
  opacity: 0.55;
}

@media (max-width: 640px) {
  .time-option[data-availability="unavailable"],
  .time-option[data-availability="unavailable"]:disabled {
    min-height: 50px;
    padding: 8px 4px;
    font-size: 12px;
  }

  .time-option[data-availability="unavailable"]::after {
    font-size: 7px;
    letter-spacing: 0;
  }
}