.flatpickr-calendar.tdp-off { display: none !important; }

#tdp {
  --tdp-accent: var(--wcpabuttoncolor, #3340d3);
  --tdp-accent-fg: var(--wcpabuttontextcolor, #ffffff);
  --tdp-line: var(--wcpabordercolor, #c6d0e9);
  --tdp-focus: var(--wcpabordercolorfocus, #3561f3);
  --tdp-radius: var(--wcpaborderradius, 6px);
  --tdp-fg: #282828;
  --tdp-muted: #797979;
  --tdp-soft: #eef1fb;
  position: absolute; z-index: 100000; width: 320px; max-width: calc(100vw - 32px);
  box-sizing: border-box; padding: 12px; display: grid; gap: 10px;
  background: #ffffff; color: var(--tdp-fg); font-family: inherit; font-size: 15px; line-height: 1.3;
  border-radius: 8px; box-shadow: 0 4px 24px rgba(0, 0, 0, .14), 0 0 0 1px rgba(0, 0, 0, .04);
  text-align: left;
}
#tdp[hidden] { display: none; }
#tdp *, #tdp *::before, #tdp *::after { box-sizing: border-box; }
#tdp button {
  -webkit-appearance: none; appearance: none; margin: 0; padding: 0; min-width: 0; width: auto; height: auto;
  font: inherit; color: inherit; letter-spacing: normal; text-transform: none; text-shadow: none; box-shadow: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--tdp-radius); cursor: pointer; line-height: 1.2;
}
#tdp button:focus-visible, #tdp input:focus-visible { outline: 2px solid var(--tdp-focus); outline-offset: 1px; }

#tdp .tdp-head { display: grid; grid-template-columns: 36px 1fr auto 36px; gap: 4px; align-items: center; }
#tdp .tdp-nav { width: 36px; height: 36px; display: grid; place-items: center; color: var(--tdp-fg); }
#tdp .tdp-nav:hover { background: var(--tdp-soft); }
#tdp .tdp-nav:disabled { visibility: hidden; }
#tdp .tdp-pick {
  height: 38px; padding: 0 10px; border-color: var(--tdp-line); background: #ffffff; font-weight: 500;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap;
}
#tdp .tdp-pick::after {
  content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); opacity: .55;
}
#tdp .tdp-pick:hover { border-color: var(--tdp-focus); }
#tdp .tdp-pick.on { border-color: var(--tdp-accent); background: var(--tdp-soft); }

#tdp .tdp-body { min-height: 264px; display: grid; align-content: start; gap: 8px; }
#tdp .tdp-grid { display: grid; gap: 4px; }
#tdp .tdp-days { grid-template-columns: repeat(7, 1fr); gap: 2px; }
#tdp .tdp-months { grid-template-columns: repeat(3, 1fr); }
#tdp .tdp-years { grid-template-columns: repeat(4, 1fr); max-height: 216px; overflow-y: auto; position: relative; }
#tdp .tdp-wd { font-size: 12px; color: var(--tdp-muted); text-align: center; padding: 2px 0; }
#tdp .tdp-cell { min-height: 38px; font-variant-numeric: tabular-nums; }
#tdp .tdp-months .tdp-cell, #tdp .tdp-years .tdp-cell { background: #f5f6f9; min-height: 42px; }
#tdp .tdp-cell:hover:not(:disabled) { border-color: var(--tdp-focus); }
#tdp .tdp-cell:disabled { opacity: .3; cursor: default; }
#tdp .tdp-cell.now { color: var(--tdp-focus); font-weight: 600; }
#tdp .tdp-cell.on { background: var(--tdp-accent); border-color: var(--tdp-accent); color: var(--tdp-accent-fg); font-weight: 600; }

#tdp .tdp-type {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 42px; margin: 0; padding: 0 12px;
  font: inherit; font-size: 15px; color: var(--tdp-fg); background: #ffffff; box-shadow: none;
  border: 1px solid var(--tdp-line); border-radius: var(--tdp-radius); font-variant-numeric: tabular-nums;
}
#tdp .tdp-type:focus { outline: none; border-color: var(--tdp-focus); }
#tdp .tdp-type[aria-invalid] { border-color: var(--wcpaerrorcolor, #f55050); }

.tdp-scrim { position: fixed; inset: 0; z-index: 99999; background: rgba(0, 0, 0, .4); }
.tdp-scrim[hidden] { display: none; }

@media (max-width: 600px), (pointer: coarse) {
  #tdp {
    position: fixed; top: auto !important; left: 0 !important; right: 0; bottom: 0; width: auto; max-width: none;
    border-radius: 14px 14px 0 0; padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  }
  #tdp .tdp-head { grid-template-columns: 44px 1fr auto 44px; gap: 6px; }
  #tdp .tdp-nav { width: 44px; height: 44px; }
  #tdp .tdp-pick { height: 46px; font-size: 17px; }
  #tdp .tdp-cell { min-height: 46px; font-size: 17px; }
  #tdp .tdp-months .tdp-cell, #tdp .tdp-years .tdp-cell { min-height: 50px; }
  #tdp .tdp-years { max-height: 260px; }
  #tdp .tdp-type { height: 46px; font-size: 16px; }
}