/* TIME SLOT BUTTON STATES */

/*  Base slot button */
.time-slot {
  position: relative;
  display:  inline-flex;
  align-items:     center;
  justify-content: center;
  gap: 6px;

  min-width:   90px;
  padding:     10px 16px;
  border:      2px solid #d1d9e6;
  border-radius: 10px;
  background:  #ffffff;
  color:       #2d3a4f;
  font-size:   0.95rem;
  font-weight: 600;
  cursor:      pointer;
  transition:  background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
  user-select: none;
}

/* Hover (available slots only)*/
.time-slot:not(:disabled):not(.slot-unavailable):hover {
  border-color: #1f74ea;
  background:   #f0f6ff;
  color:        #1f74ea;
}

/*  Selected / active */
.time-slot.active,
.time-slot[aria-pressed="true"] {
  background:   #1f74ea;
  border-color: #1f74ea;
  color:        #ffffff;
}

/* BOOKED / UNAVAILABLE*/
.time-slot.slot-unavailable,
.time-slot:disabled {
  background:      #f4f5f7;
  border-color:    #e2e5ea;
  color:           #9ba5b4;
  cursor:          not-allowed;
  opacity:         1;
  text-decoration: line-through;
  pointer-events:  none;
}


.time-slot.slot-unavailable::after {
  content:       "Booked";
  position:      absolute;
  top:           -9px;
  left:          50%;
  transform:     translateX(-50%);
  background:    #ef4444;
  color:         #fff;
  font-size:     0.6rem;
  font-weight:   700;
  letter-spacing: 0.04em;
  padding:       2px 6px;
  border-radius: 99px;
  white-space:   nowrap;
  pointer-events: none;
}


.time-slot:focus-visible {
  outline:        2px solid #1f74ea;
  outline-offset: 2px;
}


.time-slots-row {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
  margin-top: 10px;
}