:root{
  --dtp-bg: #fff;
  --dtp-border: rgba(0,0,0,0.08);
}

.dtp-popup{
  width: 300px;
  background: var(--dtp-bg);
  border: 1px solid var(--dtp-border);
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

.dtp-header{ background: transparent; }
.dtp-month-year{ min-width: 120px }

.dtp-weekdays{ padding: 6px 0; }
.dtp-weekday{ 
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

/* Force grid (override .d-flex on the element if you can't change HTML) */
.dtp-days {
  display: grid !important;
  grid-template-columns: repeat(7, minmax(0, 1fr)); /* exactly 7 columns */
  gap: 3px;
  width: 100%;
  box-sizing: border-box;
}

.dtp-day:hover{ background: rgba(0,0,0,0.03); }
.dtp-day.active{ background: var(--bs-primary); color: #fff; }
.dtp-day.dtp-other-month{ background: transparent; }
.dtp-day.dtp-today{ outline: 1px dashed rgba(0,0,0,0.12); }

.dtp-popup > .border-top.d-flex{ flex-wrap: wrap; gap: 0.5rem; }
.dtp-time{ flex: 1 1 auto; gap: 0.5rem; flex-wrap: wrap; }
.dtp-time-unit{ width: 6.75rem; }
.dtp-time-unit .btn{ width: 2rem; padding-left: 0; padding-right: 0; }
.dtp-time-unit .form-control{ padding-left: 0.25rem; padding-right: 0.25rem; text-align: center; }
.dtp-popup .dtp-apply{ white-space: nowrap; }

@media (max-width: 420px){
  .dtp-popup{ width: calc(100% - 20px); }
  .dtp-time{ gap: 0.35rem; }
  .dtp-time-unit{ width: 6.25rem; }
  .dtp-time-unit .btn{ width: 1.75rem; }
}