/* Datepicker and time list from 06-design-concepts/concept-16/datepicker.css (approved design), plus a
   reset against theme button rules (the popup sits on <body>) and RTL rules at the end.
   Theme it by overriding the custom properties on .dp-pop. */
.dp-pop :where(button) { padding: 0; min-height: 0; line-height: 1; letter-spacing: normal; text-transform: none; box-shadow: none; white-space: nowrap; word-break: normal; width: auto; }
.dp-pop :where(table, thead, tbody, tr, th, td) { padding: 0; border: 0; background: none; white-space: nowrap; }
.dp-pop {
  --dp-accent: #1B64D8;
  --dp-accent-dark: #1552B3;
  --dp-accent-soft: #E7EFFC;
  --dp-ink: #0B2447;
  --dp-text: #1A2233;
  --dp-muted: #55627A;
  --dp-off: #A3ACBB;
  --dp-line: #D6DCE6;
  --dp-bg: #FFFFFF;
  --dp-radius: 8px;
  --dp-cell: 44px;
  position: absolute; z-index: 1000; box-sizing: border-box; width: max-content; max-width: calc(100vw - 16px);
  padding: 16px 20px 14px; background: var(--dp-bg); color: var(--dp-text);
  border: 1px solid var(--dp-line); border-radius: var(--dp-radius);
  box-shadow: 0 2px 4px rgb(11 36 71 / 0.06), 0 16px 40px rgb(11 36 71 / 0.18);
  font: inherit; font-size: 15px; line-height: 1.3;
}
.dp-pop *, .dp-pop *::before, .dp-pop *::after { box-sizing: border-box; }
.dp-pop button { font: inherit; color: inherit; margin: 0; }
.dp-pop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.dp-pop :focus-visible { outline: 3px solid var(--dp-accent); outline-offset: 1px; }

.dp-head:empty { display: none; }
.dp-head { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 8px; }
.dp-title { margin: 0; font-size: 17px; font-weight: 700; color: var(--dp-ink); }
.dp-close {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-right: -10px;
  background: none; border: 0; border-radius: var(--dp-radius); cursor: pointer;
}
.dp-close:hover { background: var(--dp-accent-soft); }

.dp-nav { position: relative; height: 0; }
.dp-arrow {
  position: absolute; top: -4px; z-index: 1; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; background: var(--dp-bg); color: var(--dp-ink);
  border: 1px solid var(--dp-line); border-radius: 50%; cursor: pointer;
}
.dp-arrow:hover:not(:disabled) { border-color: var(--dp-accent); color: var(--dp-accent); }
.dp-arrow:disabled { opacity: 0.35; cursor: default; }
.dp-prev { left: -6px; }
.dp-next { right: -6px; }

.dp-months { display: flex; gap: 32px; }
.dp-month { flex: none; width: calc(var(--dp-cell) * 7); }
.dp-caption { margin: 0; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: var(--dp-ink); letter-spacing: 0; }
.dp-grid { width: 100%; border-collapse: collapse; table-layout: fixed; margin-top: 8px; }
.dp-grid th { height: 32px; font-size: 12px; font-weight: 600; color: var(--dp-muted); text-align: center; }
.dp-grid td { padding: 1px 0; text-align: center; }
.dp-day {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: var(--dp-cell); height: var(--dp-cell);
  background: none; border: 1px solid transparent; border-radius: var(--dp-radius);
  font-size: 15px; font-weight: 500; cursor: pointer;
}
.dp-day:hover:not(:disabled) { border-color: var(--dp-accent); background: var(--dp-accent-soft); }
.dp-day.is-today { font-weight: 700; color: var(--dp-accent-dark); box-shadow: inset 0 -3px 0 -1px var(--dp-accent); }
.dp-day.is-selected, .dp-day.is-selected:hover { background: var(--dp-accent); border-color: var(--dp-accent); color: #FFFFFF; font-weight: 700; box-shadow: none; }
.dp-day:disabled { color: var(--dp-off); cursor: default; font-weight: 400; box-shadow: none; }

.dp-foot { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--dp-line); font-size: 14px; color: var(--dp-muted); }
.dp-foot strong { color: var(--dp-text); }

/* Bottom sheet on phones */
.dp-backdrop { position: fixed; inset: 0; z-index: 999; background: rgb(11 36 71 / 0.5); }
.dp-lock, .dp-lock body { overflow: hidden; }
.dp-pop.dp-sheet {
  position: fixed; left: 0; right: 0; bottom: 0;
  max-height: 88vh; max-height: 88dvh; overflow-y: auto; overscroll-behavior: contain;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom));
  border-width: 1px 0 0; border-radius: var(--dp-radius) var(--dp-radius) 0 0;
}
.dp-pop.dp-sheet { width: auto; max-width: none; }
.dp-sheet .dp-month { flex: 1; width: auto; min-width: 0; }
.dp-sheet .dp-arrow { top: -2px; }
.dp-sheet .dp-prev { left: 0; }
.dp-sheet .dp-next { right: 0; }
@media (max-width: 359px) {
  .dp-pop.dp-sheet { padding-left: 4px; padding-right: 4px; }
  .dp-sheet .dp-head, .dp-sheet .dp-foot { padding-left: 8px; padding-right: 8px; }
}

/* Time list */
.tp-select { cursor: pointer; }
.tp-pop { padding: 8px; width: 344px; max-width: calc(100vw - 16px); }
.tp-list { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; max-height: 296px; overflow-y: auto; overscroll-behavior: contain; }
.tp-opt {
  min-height: 44px; padding: 0 4px; background: none; border: 1px solid transparent; border-radius: var(--dp-radius);
  font-size: 14px; font-weight: 500; white-space: nowrap; cursor: pointer;
}
.tp-opt:hover { border-color: var(--dp-accent); background: var(--dp-accent-soft); }
.tp-opt.is-selected, .tp-opt.is-selected:hover { background: var(--dp-accent); border-color: var(--dp-accent); color: #FFFFFF; font-weight: 700; }
.tp-pop :focus-visible { outline-offset: -3px; }

/* Right to left pages. */
[dir="rtl"] .dp-prev { left: auto; right: -6px; }
[dir="rtl"] .dp-next { right: auto; left: -6px; }
[dir="rtl"] .dp-sheet .dp-prev { right: 0; left: auto; }
[dir="rtl"] .dp-sheet .dp-next { left: 0; right: auto; }
[dir="rtl"] .dp-arrow svg { transform: scaleX(-1); }
[dir="rtl"] .dp-close { margin-right: 0; margin-left: -10px; }