/* =============================================================================
   Themed date & time picker (assets/js/datepicker.js) — replaces the browser's native picker on the lead forms
   and in the blog admin editor. Loaded only where a picker is rendered. Needs tokens.css + base.css (.btn).
   ============================================================================= */
.c-dtp { position: relative; }
.c-dtp.is-enhanced input[data-dtp-input] { padding-right: 3.2rem; }
.c-dtp__btn { position: absolute; top: 1px; right: 1px; bottom: 1px; display: grid; place-items: center; width: 2.8rem; padding: 0; border: 0; border-left: 1px solid var(--border); border-radius: 0 var(--radius-s) var(--radius-s) 0; background: transparent; color: var(--blue); cursor: pointer; transition: background-color var(--dur-1), color var(--dur-1); }
.c-dtp__btn:hover, .c-dtp__btn[aria-expanded="true"] { background: var(--tint); color: var(--navy); }
.c-dtp__btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); }
.c-dtp__panel { position: absolute; z-index: 40; top: calc(100% + 0.4rem); left: 0; width: 100%; min-width: 17rem; display: grid; gap: var(--space-s); padding: var(--space-s); background: #fff; color: var(--text); border: 1px solid var(--border); border-top: 3px solid var(--sky); border-radius: var(--radius-m); box-shadow: var(--shadow-3); animation: dtp-in var(--dur-2) var(--ease-out); }
.c-dtp__panel[hidden] { display: none; }
.c-dtp.is-flip .c-dtp__panel { left: auto; right: 0; }
@media (min-width: 40rem) {
    .c-dtp__panel { width: 33rem; grid-template-columns: minmax(0, 1fr) 8.5rem; padding: var(--space-m); column-gap: var(--space-m); }
    .c-dtp__foot { grid-column: 1 / -1; }
}
@keyframes dtp-in { from { opacity: 0; transform: translateY(-4px); } }
.c-dtp__head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; }
.c-dtp__month { font-weight: 700; color: var(--navy); }
.c-dtp__nav { display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1px solid var(--border); border-radius: var(--radius-pill); background: #fff; color: var(--navy); font-size: 1.25rem; line-height: 1; cursor: pointer; }
.c-dtp__nav:hover:not(:disabled) { background: var(--tint); border-color: var(--blue); }
.c-dtp__nav:disabled { opacity: 0.35; cursor: default; }
.c-dtp__grid { width: 100%; border-collapse: collapse; table-layout: fixed; }
.c-dtp__grid th { padding-bottom: 0.35rem; font: 600 var(--step--2) / 1 var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); text-align: center; }
.c-dtp__grid td { padding: 1px; text-align: center; }
.c-dtp__day { width: 100%; aspect-ratio: 1; max-height: 2.6rem; border: 1px solid transparent; border-radius: var(--radius-s); background: transparent; color: var(--text); font: inherit; font-size: var(--step--1); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1); }
.c-dtp__day:hover:not(:disabled) { background: var(--tint); border-color: var(--border); }
.c-dtp__day.is-sun:not(:disabled) { color: var(--text-muted); }
.c-dtp__day.is-today { border-color: var(--sky); font-weight: 700; }
.c-dtp__day[aria-pressed="true"], .c-dtp__slot[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.c-dtp__day:disabled { color: #9aa2bb; cursor: default; }
.c-dtp__day:focus-visible, .c-dtp__slot:focus-visible, .c-dtp__nav:focus-visible, .c-dtp__clear:focus-visible { outline: none; box-shadow: var(--shadow-focus); position: relative; z-index: 1; }
.c-dtp__label { font-size: var(--step--1); font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.c-dtp__label span { font-weight: 400; color: var(--text-muted); }
.c-dtp__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.25rem, 1fr)); gap: 0.35rem; max-height: 9.5rem; overflow-y: auto; padding: 2px; overscroll-behavior: contain; }
@media (min-width: 40rem) { .c-dtp__time { display: flex; flex-direction: column; min-height: 0; } .c-dtp__slots { grid-template-columns: minmax(0, 1fr); max-height: 15.5rem; } }
.c-dtp__slot { min-height: 2.25rem; border: 1px solid var(--border); border-radius: var(--radius-s); background: var(--bg-alt, var(--cool)); color: var(--navy); font: 500 var(--step--1) / 1 var(--font-mono); cursor: pointer; transition: background-color var(--dur-1), border-color var(--dur-1); }
.c-dtp__slot:hover:not(:disabled) { border-color: var(--blue); background: var(--tint); }
.c-dtp__slot:disabled { opacity: 0.4; cursor: default; }
.c-dtp__ist { margin-top: 0.5rem; font-size: var(--step--2); color: var(--text-muted); }
.c-dtp__ist:empty { display: none; }
.c-dtp__foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-s); padding-top: var(--space-s); border-top: 1px solid var(--border); }
.c-dtp__clear { padding: 0.5rem 0.25rem; border: 0; background: none; color: var(--blue); font: inherit; font-size: var(--step--1); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.c-dtp__done { min-height: 2.5rem; padding-block: 0.5rem; }
@media (prefers-reduced-motion: reduce) { .c-dtp__panel { animation: none; } }