.multi-date-picker {
  width: min(100%, 24rem);
  margin-top: .4rem;
  color: var(--bs-body-color, var(--mobile-ink, #212529));
}

.multi-date-actions,
.multi-date-month-nav,
.multi-date-footer {
  display: flex;
  align-items: center;
  gap: .5rem;
}

.multi-date-actions { flex-wrap: wrap; }
.multi-date-count { color: var(--bs-secondary-color, var(--mobile-muted, #667085)); font-size: .875rem; }
.multi-date-panel {
  position: relative;
  z-index: 4;
  margin-top: .4rem;
  padding: .7rem;
  border: 1px solid var(--bs-border-color, var(--mobile-line, #dfe3e8));
  border-radius: .75rem;
  background: var(--bs-body-bg, var(--mobile-surface, #fff));
  box-shadow: 0 .35rem 1.2rem rgba(24, 42, 31, .12);
}

.multi-date-month-nav { justify-content: space-between; }
.multi-date-heading { text-align: center; }
.multi-date-help { margin: .45rem 0; color: var(--bs-secondary-color, var(--mobile-muted, #667085)); font-size: .8rem; }
.multi-date-calendar { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: .15rem; }
.multi-date-calendar th { padding: .2rem 0; text-align: center; color: var(--bs-secondary-color, var(--mobile-muted, #667085)); font-size: .75rem; }
.multi-date-calendar abbr { text-decoration: none; }
.multi-date-calendar td { padding: 0; text-align: center; }

.multi-date-open,
.multi-date-prev,
.multi-date-next,
.multi-date-clear,
.multi-date-done,
.multi-date-day {
  min-height: 2.35rem;
  border: 1px solid var(--bs-border-color, var(--mobile-line, #dfe3e8));
  border-radius: .45rem;
  background: var(--bs-body-bg, var(--mobile-surface, #fff));
  color: inherit;
}

.multi-date-open { padding: .4rem .7rem; color: var(--bs-link-color, var(--mobile-accent, #0a58ca)); }
.multi-date-prev,
.multi-date-next { width: 2.5rem; padding: 0; font-size: 1.4rem; line-height: 1; }
.multi-date-day { width: 100%; padding: .25rem 0; border-color: transparent; }
.multi-date-day:hover { border-color: var(--bs-primary, var(--mobile-accent, #0a58ca)); }
.multi-date-day.outside-month { color: var(--bs-secondary-color, var(--mobile-muted, #667085)); opacity: .62; }
.multi-date-day.is-selected {
  border-color: var(--bs-primary, var(--mobile-accent, #0a58ca));
  background: var(--bs-primary, var(--mobile-accent, #0a58ca));
  color: #fff;
  font-weight: 700;
}

.multi-date-footer { justify-content: space-between; margin-top: .55rem; }
.multi-date-clear,
.multi-date-done { padding: .35rem .65rem; }
.multi-date-done { border-color: var(--bs-primary, var(--mobile-accent, #0a58ca)); background: var(--bs-primary, var(--mobile-accent, #0a58ca)); color: #fff; }

.multi-date-open:focus-visible,
.multi-date-prev:focus-visible,
.multi-date-next:focus-visible,
.multi-date-clear:focus-visible,
.multi-date-done:focus-visible,
.multi-date-day:focus-visible { outline: 3px solid #fd7e14; outline-offset: 1px; }

@media (max-width: 412px) {
  .multi-date-picker { width: 100%; }
  .multi-date-panel { padding: .55rem; }
  .multi-date-day { min-height: 2.55rem; }
  .multi-date-footer { align-items: stretch; flex-direction: column-reverse; }
  .multi-date-clear,
  .multi-date-done { width: 100%; }
}
