/* ============================================================
   service-booking.css — надстройка над booking.css для виджета записи на услугу.

   Токены (--bw-*), поля, легенда, сетка слотов, итог и тост приходят из
   booking.css: корень виджета несёт класс `booking-widget`, поэтому обе формы
   записи выглядят одинаково и перекрашиваются темой в одном месте. Здесь только
   то, чего в ресурсной форме нет, — каталог услуг, лента дат и блок автомобиля.

   ЛИТЕРАЛОВ ЦВЕТА В ПРАВИЛАХ НЕТ: всё через var(--bw-*), иначе тёмная тема и
   перекраска под бренд ломаются ровно на этих правилах.
   ============================================================ */

/* каталог услуг */
.booking-widget .sb-cat {
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--bw-muted); margin: 1rem 0 .45rem;
}
.booking-widget .sb-cat:first-child { margin-top: 0; }
.booking-widget .sb-cards { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.booking-widget .sb-card {
  display: flex; flex-direction: column; gap: .2rem; text-align: left;
  border: 1px solid var(--bw-border); border-radius: var(--bw-radius-sm);
  background: var(--bw-bg); color: var(--bw-text); padding: .8rem 1rem; cursor: pointer;
  transition: border-color .18s var(--bw-ease), background .18s var(--bw-ease);
}
.booking-widget .sb-card:hover { border-color: var(--bw-border-strong); }
.booking-widget .sb-card.is-active {
  border-color: var(--bw-accent); background: var(--bw-accent-soft);
  box-shadow: inset 0 0 0 1px var(--bw-accent);
}
.booking-widget .sb-card-name { font-weight: 600; }
.booking-widget .sb-card-meta { color: var(--bw-muted); font-size: .85rem; }
.booking-widget .sb-card.is-active .sb-card-meta { color: var(--bw-text-soft); }

/* лента дат */
.booking-widget .sb-dates {
  display: flex; gap: .45rem; overflow-x: auto; padding-bottom: .35rem;
  scrollbar-width: thin;
}
.booking-widget .sb-day {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: .1rem;
  min-width: 4rem; padding: .55rem .4rem;
  border: 1px solid var(--bw-border); border-radius: var(--bw-radius-sm);
  background: var(--bw-bg); color: var(--bw-text); cursor: pointer;
  transition: border-color .18s var(--bw-ease), background .18s var(--bw-ease);
}
.booking-widget .sb-day:hover { border-color: var(--bw-accent); }
.booking-widget .sb-day.is-active {
  background: var(--bw-accent); border-color: transparent; color: var(--bw-on-accent);
}
.booking-widget .sb-day-dow,
.booking-widget .sb-day-mon { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; opacity: .75; }
.booking-widget .sb-day-num { font-size: 1.15rem; font-weight: 700; line-height: 1.1; }

/* сообщение на всю ширину сетки слотов (загрузка / нет времени / нет услуги) */
.booking-widget .sb-span { grid-column: 1 / -1; }

@media (max-width: 575.98px) {
  .booking-widget .sb-cards { grid-template-columns: 1fr; }
}