.field-date-time { position: relative; }
.field-date-time.is-open { z-index: 35; }
.date-time-trigger {
  width: 100%; min-width: 0; height: 43px; padding: 0 11px; display: grid; grid-template-columns: 19px minmax(0,1fr) 18px;
  align-items: center; gap: 9px; color: #243f4e; background: var(--surface); border: 1px solid #cbd9e2; border-radius: 9px;
  box-shadow: 0 1px 1px rgba(15,54,80,.018); cursor: pointer; text-align: left;
}
.date-time-trigger:hover { border-color: #aebfca; }
.date-time-trigger:focus-visible, .field-date-time.is-open .date-time-trigger { border-color: #0d9fe6; box-shadow: 0 0 0 2px rgba(13,159,230,.13); }
.date-time-icon { width: 18px; height: 18px; display: block; object-fit: contain; object-position: center; }
.date-time-trigger-copy { min-width:0; display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:10px; overflow:hidden; }
.date-time-trigger-copy strong, .date-time-trigger-copy small { min-width:0; margin:0; color:#355568; font-size:11.7px; font-weight:500; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.date-time-trigger-copy strong { overflow:hidden; text-overflow:ellipsis; }
.date-time-trigger-copy small { padding-left:10px; color:#4e6d7f; border-left:1px solid #d8e4ea; }
.date-time-chevron { width:18px; height:18px; background:var(--select-arrow) center/18px 18px no-repeat; }
.field-date-time.is-open .date-time-chevron { transform:rotate(180deg); }
.date-time-popover { position:absolute; z-index:50; top:calc(100% + 9px); left:0; width:min(360px,calc(100vw - 36px)); max-height:min(560px,calc(100vh - 120px)); padding:15px; overflow:auto; overscroll-behavior:contain; color:var(--text-strong); background:rgba(255,255,255,.995); border:1px solid #d6e3ea; border-radius:16px; box-shadow:0 22px 54px rgba(21,62,88,.18),0 4px 12px rgba(21,62,88,.06); }
.date-time-popover[hidden] { display:none; }
.date-time-popover-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.date-time-popover-head > div:first-child { display:grid; gap:3px; }
.date-time-popover-head small { color:var(--text-soft); font-size:9.8px; font-weight:600; }
.date-time-popover-head strong { color:#2b4b5d; font-size:13.2px; line-height:1.2; }
.date-time-month-actions { display:inline-flex; gap:6px; }
.date-time-nav { width:30px; height:30px; display:grid; place-items:center; padding:0 0 2px; color:#547083; background:#f8fbfd; border:1px solid #dbe6ec; border-radius:9px; font-size:19px; line-height:1; cursor:pointer; }
.date-time-nav:hover { color:var(--brand-600); background:var(--brand-050); border-color:#c7dce8; }
.date-time-weekdays, .date-time-calendar { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.date-time-weekdays { margin:15px 0 6px; color:#8a9aa3; font-size:9.5px; font-weight:500; text-align:center; }
.date-time-weekdays span { padding-block:4px; }
.date-time-calendar { gap:3px; }
.date-time-day { aspect-ratio:1; min-width:0; padding:0; display:grid; place-items:center; color:#3e5968; background:transparent; border:1px solid transparent; border-radius:9px; font-size:10.8px; font-weight:600; cursor:pointer; }
.date-time-day:hover { color:var(--brand-600); background:#f0f8fc; border-color:#dcecf4; }
.date-time-day.is-muted { color:#b1bcc2; }
.date-time-day.is-today { color:var(--brand-600); border-color:#bcd9e8; }
.date-time-day.is-selected { color:#fff; background:var(--brand-600); border-color:var(--brand-600); }
.date-time-clock-row { margin-top:13px; padding:12px; display:flex; align-items:center; justify-content:space-between; gap:12px; background:#f7fbfd; border:1px solid #e2ebf0; border-radius:12px; }
.date-time-clock-copy { display:grid; gap:2px; }
.date-time-clock-copy > span { color:#3a596a; font-size:10.8px; font-weight:500; }
.date-time-clock-copy small { color:#8a9aa3; font-size:9.4px; }
.date-time-clock-inputs { display:inline-flex; align-items:center; gap:4px; color:#6f8490; font-weight:500; }
.date-time-clock-inputs input { width:40px; height:34px; padding:0 4px; border-radius:8px; text-align:center; font-size:12px; font-weight:600; -moz-appearance:textfield; }
.date-time-clock-inputs input::-webkit-outer-spin-button, .date-time-clock-inputs input::-webkit-inner-spin-button { margin:0; -webkit-appearance:none; }
.date-time-popover-actions { margin-top:13px; padding-top:12px; display:flex; align-items:center; gap:7px; border-top:1px solid #edf2f5; }
.date-time-action-spacer { flex:1 1 auto; }
.date-time-now, .date-time-cancel, .date-time-apply { height:33px; padding:0 11px; border-radius:9px; font-size:10.5px; font-weight:500; cursor:pointer; }
.date-time-now { color:var(--brand-600); background:var(--brand-050); border:1px solid #d4e7f1; }
.date-time-cancel { color:#607582; background:#fff; border:1px solid #dbe5ea; }
.date-time-apply { color:#fff; background:var(--brand-600); border:1px solid var(--brand-600); }
.date-time-nav:focus-visible, .date-time-day:focus-visible, .date-time-now:focus-visible, .date-time-cancel:focus-visible, .date-time-apply:focus-visible { box-shadow:0 0 0 3px var(--focus); }