/* Admin layout */
input.mcb-slot-has-type + select.mcb-slot-type { 
  vertical-align: middle; 
}
/* Front: purple style for group slots */
.mcb-slot--group,
.mcb-slot--group * {
  --mcb-purple: #7e57c2;
}
.mcb-slot--group {
  border-color: var(--mcb-purple) !important;
  color: #fff !important;
  background: var(--mcb-purple) !important;
}
/* If buttons need outline only */
button.mcb-slot--group.ty-btn--outlined,
.mcb-slot--group.ty-btn.ty-btn__secondary {
  background: transparent !important;
  color: var(--mcb-purple) !important;
  border-color: var(--mcb-purple) !important;
}

#mcb-schedule-table .mcb-chip .mcb-slot-type{margin-left:6px;font-size:12px;height:22px;padding:0 4px;}

/* Type badges on time buttons */
.mcb-time-btn .mcb-badge{display:inline-block;margin-left:6px;padding:0 6px;border-radius:10px;font-size:11px;line-height:18px;vertical-align:middle}
.mcb-badge--group{background:var(--mcb-purple,#7e57c2);color:#fff}

/* Keep group highlighting on frontend despite base #mcb-time-grid-front rules */
#mcb-time-grid-front .mcb-time-btn.mcb-slot--group:not(.is-on){
  border-color: var(--mcb-purple,#7e57c2) !important;
  color: var(--mcb-purple,#7e57c2) !important;
  background: #fff !important;
}

/* --- FRONT: "Сборный" под временем --- */
#mcb-time-grid-front .mcb-time-btn{
 display: flex;                 /* вертикальная компоновка */
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  text-align: center;
  gap: 6px;                      /* расстояние между временем и бейджем */
  min-height: 56px;              /* кнопка выше, чтобы влезали 2 строки */
  padding: 8px 10px; 
}

#mcb-time-grid-front .mcb-time-btn .mcb-badge{
  position: static !important;   /* не в углу, а обычной строкой */
  display: inline-block;
  margin: 0 !important;
  white-space: nowrap;
  height: 18px;
  line-height: 18px;
  font-size: 11px;
  padding: 0 8px;
  border-radius: 9px;
}

/* ещё компактнее на очень узких экранах */
@media (max-width: 360px){
  #mcb-time-grid-front .mcb-time-btn{ min-height: 52px; gap: 4px; }
  #mcb-time-grid-front .mcb-time-btn .mcb-badge{
    font-size: 10px; height: 16px; line-height: 16px; padding: 0 6px;
  }
}