.crm-date-picker,
.crm-date-popover {
  --crm-date-primary: #3E63DD;
  --crm-date-primary-strong: #3451B2;
  --crm-date-primary-soft: #F0F4FF;
  --crm-date-surface: #FFFFFF;
  --crm-date-text: #333333;
  --crm-date-muted: #667085;
  --crm-date-disabled: #999999;
  --crm-date-border: #EBEBEB;
  --crm-date-control-border: #D6D6D6;
  --crm-date-danger: #B4233B;
  --crm-date-shadow: rgb(51 51 51 / 8%);
  --crm-date-focus: var(--crm-date-primary);
}

.crm-date-input,
input[data-crm-date-picker][data-crm-date-ready="true"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.crm-date-picker { position: relative; display: block; min-width: 0; }
.crm-date-picker > button.crm-date-trigger { display: flex; width: 100%; min-height: 44px; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .35rem; padding: .7rem .85rem; border: 1px solid var(--crm-date-control-border); border-radius: 10px; background: var(--crm-date-surface); color: var(--crm-date-text); font: inherit; font-weight: 750; cursor: pointer; }
.crm-date-trigger::after { content: "▦"; color: var(--crm-date-primary-strong); font-size: 1.1rem; }
.crm-date-popover { position: fixed; z-index: 10000; top: 0; left: 0; width: min(340px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 1.5rem); box-sizing: border-box; padding: .9rem; overflow: auto; overscroll-behavior: contain; border: 1px solid var(--crm-date-border); border-radius: 14px; background: var(--crm-date-surface); box-shadow: 0 18px 42px var(--crm-date-shadow); color: var(--crm-date-text); font-family: inherit; }
.crm-date-popover[hidden] { display: none; }
.crm-date-month { display: grid; grid-template-columns: 40px 1fr 40px; align-items: center; gap: .4rem; }
.crm-date-month button, .crm-date-day { margin: 0 !important; border: 0 !important; background: transparent !important; color: var(--crm-date-text) !important; box-shadow: none !important; }
.crm-date-month button { display: grid !important; width: 40px !important; height: 40px !important; padding: 0 !important; place-items: center !important; border-radius: 10px !important; cursor: pointer !important; font-size: 1.05rem !important; }
.crm-date-month button:hover, .crm-date-month button:focus-visible { background: var(--crm-date-primary-soft) !important; outline: 2px solid var(--crm-date-focus) !important; }
.crm-date-month strong { text-align: center; text-transform: capitalize; }
.crm-date-week, .crm-date-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .2rem; }
.crm-date-week { margin: .75rem 0 .3rem; color: var(--crm-date-muted); font-size: .72rem; text-align: center; }
.crm-date-day, .crm-date-empty { display: grid; min-height: 36px; place-items: center; border-radius: 8px; }
.crm-date-day { cursor: pointer; }
.crm-date-day:hover, .crm-date-day:focus-visible { outline: 2px solid var(--crm-date-focus); background: var(--crm-date-primary-soft) !important; }
.crm-date-day.is-today { box-shadow: inset 0 0 0 1px var(--crm-date-primary) !important; }
.crm-date-day.is-selected { background: var(--crm-date-primary) !important; color: var(--crm-date-surface) !important; font-weight: 800; }
.crm-date-day:disabled { color: var(--crm-date-disabled) !important; cursor: not-allowed; }
.crm-date-picker-error { margin: .45rem 0 0; color: var(--crm-date-danger); font-size: .82rem; }

@media (max-width: 640px) {
  .crm-date-popover { inset: auto .75rem 5.2rem; width: auto; max-height: 70vh; }
  .crm-date-day, .crm-date-empty { min-height: 42px; }
}