/* Time-of-day slot grouping (Morning / Afternoon / Evening) for the public booking page.
   Kept separate from meeting-hub.css per instruction — loaded after it, only overrides/extends
   what's needed for the grouped slot view added in meeting.js (mhRenderSlots). Reuses the same
   color tokens already established in meeting-hub.css (#1a2332 / #8a8f97 / #e0dbd4) so it reads
   as one system, without editing that file. */

/* .mh-slots-grid was a 2-col grid of buttons; it's now the outer scroll container holding
   alternating group headers + .mh-slot-subgrid button grids stacked vertically. */
.mh-slots-grid {
  display: flex !important;
  flex-direction: column;
  gap: 4px;
}

.mh-slot-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-bottom: 4px;
}

.mh-slot-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 4px 6px;
  cursor: pointer;
  user-select: none;
  border-bottom: 1px solid #e0dbd4;
  margin-bottom: 6px;
}
.mh-slot-group-header:first-child { padding-top: 0; }
.mh-slot-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #1a2332;
}
.mh-slot-group-count { font-size: 0.75rem; color: #8a8f97; flex: 1; }
.mh-slot-group-chevron { font-size: 0.7rem; color: #8a8f97; }

@media (max-width: 640px) {
  .mh-slot-subgrid { grid-template-columns: repeat(3, 1fr); }
}