/* One date/time picker shared by conversation, steps and express. */
.booking-date-time-panel, .booking-date-time, .express-date-time { min-width: 0; max-width: 100%; }
.booking-date-time { display: grid; gap: 14px; }
.booking-days-heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 5px 12px; color: var(--ink); }
.booking-days-heading strong { font-size: 15px; font-weight: 700; }
.booking-days-heading > span { color: var(--muted); font-size: 11px; }
.booking-date-time .booking-days-strip { position: relative; width: 100%; min-width: 0; max-width: 100%; grid-auto-columns: 92px; gap: 8px; padding: 4px 4px 12px; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 4px; scrollbar-width: thin; }
.booking-date-time .booking-day { min-width: 0; min-height: 108px; padding: 10px 5px 8px; gap: 5px; background: var(--surface); border: 1px solid var(--line-strong); color: var(--ink); }
.booking-date-time .booking-day strong { font: 700 26px/1 'DM Sans', system-ui, sans-serif; }
.booking-date-time .booking-day > span { color: var(--muted); text-transform: none; font-size: 12px; }
.booking-date-time .booking-day small { color: var(--muted); font-size: 11px; }
.booking-date-time .booking-day em { display: grid; place-items: center; min-height: 28px; font: 400 11px/1.25 'DM Sans', system-ui, sans-serif; color: var(--muted); white-space: normal; }
.booking-date-time .booking-day.selected { color: var(--brand-label); border-color: var(--brand-label); background: var(--brand-soft); box-shadow: inset 0 0 0 1px var(--brand-label); }
.booking-date-time .booking-day.selected > :is(span, small, em) { color: inherit; }
.booking-date-time .booking-day[data-day-state=closed], .booking-date-time .booking-day[data-day-state=full] { border-style: dashed; }
.booking-date-time .booking-day:hover { transform: none; border-color: var(--brand-label); }
.booking-date-time :is(button, input, summary):focus-visible { outline: 3px solid var(--brand-label); outline-offset: 2px; box-shadow: none; }
.booking-calendar { min-width: 0; padding: 0 0 14px; border-bottom: 1px solid var(--line); }
.booking-calendar summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 8px 12px; color: var(--brand-label); background: var(--surface-soft); border: 1px solid var(--line-strong); border-radius: 10px; font-size: 13px; font-weight: 600; cursor: pointer; list-style: none; }
.booking-calendar summary::-webkit-details-marker { display: none; }
.booking-calendar summary > span { font-size: 18px; }
.booking-calendar[open] summary > span { transform: rotate(180deg); }
.booking-calendar .calendar-extra { width: 100%; max-width: 100%; margin-top: 12px; }
.booking-calendar .date-input { min-width: 0; max-width: 100%; width: 100%; min-height: 46px; }
.booking-slot-heading { min-width: 0; }
.booking-slot-heading strong { display: block; color: var(--ink); font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
.booking-slot-status { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.booking-slot-options, .booking-slot-options .slot-grid { width: 100%; min-width: 0; max-width: 100%; }
.booking-slot-options:empty { display: none; }
.booking-slot-options .slot-button { min-width: 0; min-height: 46px; padding-inline: 5px; }
.express-date-time { margin-top: 18px; }
html[data-client-design=classic] .booking-date-time :is(.booking-day, .booking-calendar summary) { border-radius: 4px; }
html[data-client-design=classic] .booking-date-time .booking-day strong { font-family: var(--design-serif, Georgia, serif); }
html[data-client-design=urban] .booking-date-time :is(.booking-day, .booking-calendar summary) { border-radius: 0; }
html[data-client-design=urban] .booking-date-time .booking-day.selected { border-width: 2px; box-shadow: 2px 2px 0 var(--accent); }
@media (max-width: 430px) {
  .booking-date-time { gap: 12px; }
  .booking-date-time .booking-days-strip { grid-auto-columns: 82px; gap: 7px; }
  .booking-date-time .booking-day { min-height: 104px; }
  .booking-days-heading { align-items: flex-start; flex-direction: column; }
  .booking-slot-options .slot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .booking-date-time *, .booking-date-time *::before, .booking-date-time *::after { transition: none; animation: none; scroll-behavior: auto; } }
@media (forced-colors: active) { .booking-date-time .booking-day.selected { outline: 2px solid Highlight; outline-offset: -3px; } }