/* ==========================================================================
   Booking modal (запись к специалисту) — step 1: выбор даты и слота
   Дизайн-токены из Figma: акцент #5BC5D0, карточки white/#F9F9F9, radius 16/8.
   Всё под префиксом .bm- чтобы не конфликтовать с .person-list__ (синий #01B1FE).
   ========================================================================== */

.bm-overlay {
   position: fixed;
   inset: 0;
   z-index: 100000;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 20px;
   background: rgba(30, 40, 45, 0.35);
   backdrop-filter: blur(6px);
   -webkit-backdrop-filter: blur(6px);
   opacity: 0;
   transition: opacity 0.2s ease;
   overflow-y: auto;
}
.bm-overlay--visible {
   opacity: 1;
}

.bm-modal {
   position: relative;
   width: 100%;
   max-width: 680px;
   display: flex;
   flex-direction: column;
   gap: 4px;
   font-family: 'Montserrat', system-ui, sans-serif;
   color: #000;
   transform: translateY(12px);
   transition: transform 0.2s ease;
}
.bm-overlay--visible .bm-modal {
   transform: translateY(0);
}

.bm-card {
   background: #fff;
   border-radius: 16px;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
}

/* обёртка тела+футера шага — тот же зазор между карточками, что и на уровне модалки */
.bm-step-wrap {
   display: flex;
   flex-direction: column;
   gap: 4px;
}

/* ==========================================================================
   Header — карточка специалиста
   ========================================================================== */
.bm-header {
   display: flex;
   align-items: center;
   gap: 20px;
   padding: 24px 32px;
   min-height: 120px;
   box-sizing: border-box;
}
.bm-header__avatar {
   flex: 0 0 72px;
   width: 72px;
   height: 72px;
   border-radius: 50%;
   overflow: hidden;
   border: 1px solid #f9f9f9;
   background: #f2f2f2;
}
.bm-header__avatar img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}
.bm-header__info {
   flex: 1 1 auto;
   min-width: 0;
   display: flex;
   flex-direction: column;
   gap: 2px;
}
.bm-header__top {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}
.bm-header__spec {
   font-size: 11px;
   font-weight: 500;
   color: #000;
}
.bm-badge {
   display: inline-flex;
   align-items: center;
   padding: 1px 8px;
   border: 1px solid #5bc5d0;
   border-radius: 13px;
   font-size: 11px;
   font-weight: 700;
   color: #5bc5d0;
   white-space: nowrap;
}
.bm-header__name {
   font-size: 14px;
   font-weight: 700;
   color: #6e6e6e;
   line-height: 22px;
}
.bm-header__price {
   flex: 0 0 auto;
   text-align: right;
   font-size: 11px;
   color: #000;
   line-height: 22px;
}
.bm-header__price b {
   display: block;
   font-size: 14px;
   font-weight: 700;
}

/* ==========================================================================
   Body — две колонки: календарь + слоты
   ========================================================================== */
.bm-body {
   display: flex;
   height: 310px;
   max-height: 310px;
   overflow: hidden;
}
.bm-body__col {
   flex: 1 1 0;
   min-width: 0;
   padding: 24px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
}
.bm-body__col--calendar {
   border-right: 1px solid #f1f1f1;
   display: flex;
   flex-direction: column;
}

/* --- Календарь --- */
.bm-cal__head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   margin-bottom: 14px;
}
.bm-cal__title {
   font-size: 14px;
   font-weight: 700;
   color: #6e6e6e;
   text-transform: capitalize;
}
.bm-cal__nav {
   width: 24px;
   height: 24px;
   border: none;
   background: transparent;
   color: #6e6e6e;
   cursor: pointer;
   font-size: 13px;
   border-radius: 6px;
   transition: background 0.15s ease, color 0.15s ease;
}
.bm-cal__nav:hover {
   background: #f2f2f2;
   color: #000;
}
.bm-cal__nav:disabled {
   opacity: 0.3;
   cursor: default;
}
/* лоадер вместо сетки, пока грузится get-seances */
.bm-cal__loader {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #5bc5d0;
   font-size: 26px;
}
/* строка дней недели */
.bm-cal__wd-row {
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   margin-bottom: 8px;
}
.bm-cal__wd {
   text-align: center;
   font-family: 'Montserrat', sans-serif;
   font-size: 11px;
   font-weight: 500;
   color: #d9d9d9;
}
/* сетка чисел — равномерно по ширине и высоте, заполняет весь блок */
.bm-cal__grid {
   flex: 1 1 auto;
   display: grid;
   grid-template-columns: repeat(7, 1fr);
   grid-auto-rows: minmax(34px, 1fr);
}
.bm-day {
   display: flex;
   align-items: center;
   justify-content: center;
   font-family: 'Montserrat', sans-serif;
   cursor: default;
}
/* число в круге — фиксированный круг по центру ячейки */
.bm-day__n {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 34px;
   height: 34px;
   border-radius: 50%;
   font-size: 14px;
   font-weight: 600;
   color: #cccccc; /* день без свободных слотов */
   transition: background 0.12s ease, color 0.12s ease;
}
.bm-day--past .bm-day__n {
   color: #e2e2e2; /* прошлое — неактивно */
}
/* день со свободными слотами — жирный, тёмный */
.bm-day--has .bm-day__n {
   color: #6e6e6e;
   font-weight: 700;
}
.bm-day--selectable {
   cursor: pointer;
}
/* наведение и выбор — круглые */
.bm-day--selectable:hover .bm-day__n {
   background: #eaf7f8;
   color: #5bc5d0;
}
.bm-day--selected .bm-day__n {
   background: #5bc5d0;
   color: #fff;
   font-weight: 700;
}

/* --- Слоты (правая колонка) --- */
.bm-slots {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
}
.bm-slots__grid {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 4px 8px;
   align-content: start;
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
}
.bm-slot {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 8px;
   background: #f9f9f9;
   border: 1px solid #f1f1f1;
   border-radius: 8px;
   font-size: 14px;
   font-weight: 600;
   color: #ababab;
   cursor: pointer;
   text-align: center;
   transition: all 0.12s ease;
}
.bm-slot:hover {
   border-color: #5bc5d0;
   color: #6e6e6e;
}
/* небазовый тип — свой цвет (через --sc) */
.bm-slot--accent {
   color: var(--sc, #5bc5d0);
}
.bm-slot--accent:hover {
   border-color: var(--sc, #5bc5d0);
   color: var(--sc, #5bc5d0);
}
/* выбранный слот — заливка цветом типа */
.bm-slot--selected,
.bm-slot--selected:hover {
   background: var(--sc, #5bc5d0);
   border-color: var(--sc, #5bc5d0);
   color: #fff;
}

/* --- Экран выбора типа сеанса --- */
.bm-slots__inner {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
}
.bm-slots__back {
   align-self: flex-start;
   border: none;
   background: transparent;
   color: #6e6e6e;
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   padding: 0 0 10px;
}
.bm-slots__back i {
   margin-right: 4px;
}
/* пустое состояние: в месяце нет сеансов */
.bm-noseances {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 12px;
   text-align: center;
   padding: 10px;
}
.bm-noseances__icon {
   font-size: 34px;
   color: #d9d9d9;
}
.bm-noseances__text {
   font-size: 13px;
   color: #6e6e6e;
   max-width: 220px;
   line-height: 1.4;
}
.bm-noseances .bm-request-cta {
   align-self: center;
   margin-top: 0;
}
.bm-types {
   display: flex;
   flex-direction: column;
   flex: 1 1 auto;
   min-height: 0;
}
.bm-types__title {
   font-size: 13px;
   font-weight: 600;
   color: #6e6e6e;
   margin-bottom: 12px;
}
.bm-types__list {
   display: flex;
   flex-direction: column;
   gap: 8px;
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
}
/* на выбранную дату нет сеансов */
.bm-types__empty {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 13px;
   color: #6e6e6e;
   padding: 10px;
}
.bm-type {
   display: flex;
   align-items: center;
   gap: 10px;
   padding: 14px 16px;
   border: 1px solid #eee;
   border-left: 3px solid var(--tc, #5bc5d0);
   border-radius: 10px;
   background: #fff;
   cursor: pointer;
   text-align: left;
   transition: border-color 0.12s ease, background 0.12s ease;
}
.bm-type:hover {
   border-color: var(--tc, #5bc5d0);
   background: #fafcfd;
}
.bm-type__name {
   flex: 1 1 auto;
   font-family: 'Montserrat', sans-serif;
   font-size: 14px;
   font-weight: 600;
   color: #333;
}
.bm-type__price {
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   font-weight: 700;
   color: var(--tc, #5bc5d0);
}
.bm-type__arrow {
   font-size: 12px;
   color: #cccccc;
}

/* Пустое состояние / плейсхолдер */
.bm-slots__empty {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   text-align: center;
   font-size: 13px;
   color: #ababab;
   padding: 10px;
}

/* Спиннер загрузки слотов */
.bm-slots__loader {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #5bc5d0;
   font-size: 22px;
}

/* CTA «Запрос по времени» */
.bm-request-cta {
   display: flex;
   align-items: center;
   gap: 10px;
   margin-top: 12px;
   padding: 4px;
   border: none;
   background: transparent;
   color: #94b3ef;
   font-family: 'Inter', 'Montserrat', sans-serif;
   font-size: 18px;
   font-weight: 700;
   cursor: pointer;
   align-self: flex-start;
}
.bm-request-cta i {
   font-size: 20px;
}
.bm-request-cta:hover {
   text-decoration: underline;
}

/* Режим запроса произвольного времени */
.bm-request {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   min-height: 0;
}
.bm-request__back {
   flex: 0 0 auto;
   align-self: flex-start;
   border: none;
   background: transparent;
   color: #6e6e6e;
   font-family: 'Montserrat', sans-serif;
   font-size: 13px;
   font-weight: 600;
   cursor: pointer;
   padding: 0 0 10px;
}
.bm-request__back i {
   margin-right: 4px;
}
/* центральная часть: лейбл + большой инпут + подсказка по центру */
.bm-request__mid {
   flex: 1 1 auto;
   min-height: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 16px;
   text-align: center;
}
.bm-request__label {
   font-size: 14px;
   font-weight: 600;
   color: #6e6e6e;
}
.bm-request__time {
   display: inline-flex;
   align-items: center;
   gap: 2px;
   padding: 10px 18px;
   border: 1px solid #e6e6e6;
   border-radius: 14px;
   background: #f9f9f9;
   transition: border-color 0.12s ease, background 0.12s ease;
}
.bm-request__time:focus-within {
   border-color: #5bc5d0;
}
.bm-request__sel {
   border: none;
   background: transparent;
   font-family: 'Montserrat', sans-serif;
   font-size: 36px;
   font-weight: 700;
   line-height: 1;
   color: #000;
   cursor: pointer;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   text-align: center;
   text-align-last: center;
   padding: 0 2px;
}
.bm-request__sel:focus {
   outline: none;
}
/* пункты выпадашки — обычного размера (иначе список огромный из-за 36px) */
.bm-request__sel option {
   font-size: 16px;
   font-weight: 400;
}
.bm-request__colon {
   font-size: 36px;
   font-weight: 700;
   color: #000;
   line-height: 1;
}
/* состояние ошибки валидации */
.bm-request__time--error {
   border-color: #e5484d;
   background: #fdf1f1;
}
.bm-request__error {
   font-size: 12px;
   line-height: 1.35;
   color: #e5484d;
}
.bm-request__hint {
   font-size: 11px;
   color: #ababab;
   max-width: 240px;
}

/* ==========================================================================
   Footer — кнопки
   ========================================================================== */
.bm-footer {
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 16px;
   padding: 16px 20px;
   min-height: 86px;
   box-sizing: border-box;
}
.bm-icon-btn {
   width: 54px;
   height: 54px;
   flex: 0 0 54px;
   border: 1px solid #e0e0e0;
   border-radius: 50%;
   background: #fff;
   color: #8a8a8a;
   font-size: 20px;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.bm-icon-btn:hover {
   border-color: #5bc5d0;
   color: #5bc5d0;
   background: #f7fdfd;
}
.bm-next {
   min-width: 174px;
   height: 54px;
   padding: 0 20px;
   border: 1px solid #5bc5d0;
   border-radius: 8px;
   background: transparent;
   color: #cccccc;
   font-family: 'Inter', 'Montserrat', sans-serif;
   font-size: 18px;
   font-weight: 700;
   cursor: default;
   transition: background 0.15s ease, color 0.15s ease;
}
.bm-next--active {
   background: #5bc5d0;
   color: #fff;
   cursor: pointer;
}
.bm-next--active:hover {
   background: #4bb3be;
}

/* ==========================================================================
   Step 2 — краткий обзор выбранных сеансов (каркас)
   ========================================================================== */
/* список сеансов — без общего фона, карточки лежат прямо на блюре */
.bm-summary {
   display: flex;
   flex-direction: column;
   gap: 4px;
   background: transparent;
}
.bm-sess {
   position: relative;
   display: flex;
   align-items: center;
   padding: 12px 32px;
   background: #5bc5d0; /* дефолт; фактический цвет типа — инлайном */
   border-radius: 16px;
   color: #fff;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
}
.bm-sess__label {
   font-size: 11px;
   font-weight: 400;
   opacity: 0.9;
}
.bm-sess__when {
   font-size: 14px;
   font-weight: 600;
}
.bm-sess__price {
   font-size: 11px;
   font-weight: 700;
}
.bm-sess__body {
   display: flex;
   flex-direction: column;
   gap: 2px;
}
.bm-sess__remove {
   position: absolute;
   top: 50%;
   right: 18px;
   transform: translateY(-50%);
   border: none;
   background: transparent;
   color: #fff;
   font-size: 14px;
   cursor: pointer;
   opacity: 0.85;
}
.bm-sess__remove:hover {
   opacity: 1;
}
/* «Добавить» — отдельная белая карточка */
.bm-add {
   display: flex;
   align-items: center;
   gap: 12px;
   padding: 20px 32px;
   border: 1px solid #ededed;
   border-radius: 16px;
   background: #fff;
   color: #333;
   font-size: 11px;
   font-weight: 700;
   cursor: pointer;
}
.bm-add__ico {
   width: 26px;
   height: 26px;
   flex: 0 0 26px;
   border: 1px solid #9a9a9a;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   color: #333;
   font-size: 11px;
}
.bm-add:hover {
   border-color: #5bc5d0;
}
.bm-add:hover .bm-add__ico {
   border-color: #5bc5d0;
   color: #5bc5d0;
}

/* «остров» с итоговой стоимостью на step 2 — только в мобильной вёрстке
   (заполняет пустоту между списком записей и футером) */
.bm-cost {
   display: none;
}

/* сообщение об ошибке отправки запроса */
.bm-submit-error {
   margin-top: 8px;
   padding: 10px 14px;
   border-radius: 12px;
   background: #fdecec;
   color: #c0392b;
   font-size: 12px;
   line-height: 1.4;
   text-align: center;
}

/* состояние загрузки на кнопке подтверждения */
.bm-next--loading {
   background: #5bc5d0;
   color: #fff;
   cursor: default;
   opacity: 0.85;
}

/* ==========================================================================
   Step 3 — подтверждение отправки запроса
   ========================================================================== */
.bm-done {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   gap: 12px;
   padding: 40px 24px;
   min-height: 240px;
}
.bm-done__icon {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   background: #5bc5d0;
   color: #fff;
   font-size: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   box-shadow: 0 10px 26px rgba(91, 197, 208, 0.4);
}
.bm-done__title {
   font-size: 20px;
   font-weight: 700;
   color: #2c2c2c;
}
.bm-done__when {
   font-size: 14px;
   font-weight: 600;
   color: #5bc5d0;
}
.bm-done__text {
   font-size: 13px;
   line-height: 1.5;
   color: #6e6e6e;
   max-width: 360px;
}

/* кнопка «Начать чат» в футере (экран оплаты и «Запрос отправлен») */
.bm-chat-btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   height: 54px;
   padding: 0 20px;
   border: 1px solid #5bc5d0;
   border-radius: 8px;
   background: #fff;
   color: #5bc5d0;
   font-family: 'Inter', 'Montserrat', sans-serif;
   font-size: 15px;
   font-weight: 700;
   white-space: nowrap;
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease;
}
.bm-chat-btn:hover {
   background: #5bc5d0;
   color: #fff;
}

/* ==========================================================================
   Экран оплаты (запись на слот) — аналог /payment/info/:id
   ========================================================================== */
.bm-pay {
   display: flex;
   flex-direction: column;
   padding: 24px 32px;
   gap: 4px;
}
.bm-pay__title {
   font-size: 16px;
   font-weight: 700;
   color: #2c2c2c;
   margin-bottom: 12px;
}
.bm-pay__row {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 16px;
   padding: 10px 0;
   border-bottom: 1px solid #f1f1f1;
}
.bm-pay__label {
   font-size: 13px;
   color: #6e6e6e;
}
.bm-pay__value {
   font-size: 13px;
   font-weight: 600;
   color: #2c2c2c;
   text-align: right;
}
.bm-pay__total {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 16px 0 4px;
   font-size: 16px;
   font-weight: 700;
   color: #2c2c2c;
}
.bm-pay__total-val {
   color: #5bc5d0;
}
.bm-pay__promo {
   display: flex;
   gap: 8px;
   margin-top: 16px;
}
.bm-pay__promo-input {
   flex: 1 1 auto;
   min-width: 0;
   height: 44px;
   padding: 0 14px;
   border: 1px solid #e0e0e0;
   border-radius: 8px;
   font-family: inherit;
   font-size: 13px;
   color: #2c2c2c;
   outline: none;
   transition: border-color 0.15s ease;
}
.bm-pay__promo-input:focus {
   border-color: #5bc5d0;
}
.bm-pay__promo-input:disabled {
   background: #f7f7f7;
   color: #9a9a9a;
}
.bm-pay__promo-btn {
   flex: 0 0 auto;
   height: 44px;
   padding: 0 20px;
   border: 1px solid #5bc5d0;
   border-radius: 8px;
   background: #fff;
   color: #5bc5d0;
   font-family: inherit;
   font-size: 13px;
   font-weight: 700;
   cursor: pointer;
   transition: background 0.15s ease, color 0.15s ease;
}
.bm-pay__promo-btn:hover {
   background: #5bc5d0;
   color: #fff;
}
.bm-pay__promo-btn:disabled {
   border-color: #e0e0e0;
   color: #cccccc;
   background: #fff;
   cursor: default;
}

/* ==========================================================================
   Адаптив — мобильный дизайн (Figma PopUpMob):
   модалка на весь экран с отступом 16px от краёв, секции — отдельные карточки,
   стек по вертикали заполняет высоту, длинный список слотов скроллится внутри.
   ========================================================================== */
@media (max-width: 720px) {
   /* модалка на весь экран, 16px от краёв */
   .bm-overlay {
      padding: 16px;
      align-items: stretch;
   }
   .bm-modal {
      max-width: none;
      height: 100%;
   }

   /* ---- header: аватар слева, инфо сверху-справа, цена под именем ---- */
   .bm-header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      column-gap: 16px;
      row-gap: 2px;
      align-items: start;
      padding: 16px 20px;
      min-height: 0;
   }
   .bm-header__avatar {
      grid-column: 1;
      grid-row: 1 / span 2;
   }
   .bm-header__info {
      grid-column: 2;
      grid-row: 1;
   }
   .bm-header__price {
      grid-column: 2;
      grid-row: 2;
      flex: none;
      text-align: left;
   }
   .bm-header__price span {
      display: none; /* «Стоимость сеанса:» — в моб. дизайне не показываем */
   }

   /* ---- контент шага заполняет высоту модалки, футер прижат вниз ---- */
   .bm-step-wrap {
      flex: 1 1 auto;
      min-height: 0;
   }
   .bm-step-wrap > :first-child {
      flex: 1 1 auto;
      min-height: 0;
   }

   /* ---- шаг 1: календарь и слоты — отдельные карточки ---- */
   .bm-body {
      flex-direction: column;
      height: auto;
      max-height: none;
      overflow: visible;
      background: transparent;
      box-shadow: none;
      border-radius: 0;
      gap: 4px;
   }
   .bm-body__col {
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      padding: 16px;
   }
   .bm-body__col--calendar {
      flex: 0 0 auto; /* календарь — натуральная высота */
      border-right: none;
      padding: 16px 20px;
   }
   .bm-body__col:not(.bm-body__col--calendar) {
      flex: 1 1 auto; /* слоты заполняют остаток высоты */
      min-height: 0;
   }
   .bm-cal__grid {
      grid-auto-rows: 38px;
   }

   /* слоты — три колонки, «Запрос по времени» по центру */
   .bm-slots__grid {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 6px 8px;
   }
   .bm-slot {
      padding: 8px 4px;
      white-space: nowrap;
   }
   .bm-slots .bm-request-cta {
      align-self: center;
      justify-content: center;
   }

   /* ---- шаг 2: карточки записи ---- */
   .bm-sess {
      padding: 14px 20px;
   }
   .bm-sess__remove {
      right: 14px;
   }
   /* остров стоимости заполняет свободное место до футера */
   .bm-cost {
      display: flex;
      flex: 1 1 auto;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
      padding: 24px;
      text-align: center;
   }
   .bm-cost__label {
      font-size: 14px;
      font-weight: 600;
      color: #6e6e6e;
   }
   .bm-cost__value {
      font-size: 30px;
      font-weight: 700;
      color: #2c2c2c;
   }

   /* ---- экран оплаты ---- */
   .bm-pay {
      padding: 20px;
      overflow-y: auto;
   }

   /* ---- футер ---- */
   .bm-footer {
      flex-wrap: wrap;
      padding: 16px;
      gap: 12px;
   }
   .bm-next {
      flex: 1 1 auto;
      min-width: 0;
   }
   .bm-chat-btn {
      flex: 1 1 auto;
      justify-content: center;
   }
}

/* очень узкие экраны — слоты в 2 колонки, чтобы время не обрезалось */
@media (max-width: 359px) {
   .bm-slots__grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}