/* -- SLICE 108. Custom date/time popover ---------------------------------
   Progressive enhancement over label.booking-shell__control > span.field-
   control > input[type=date|time]. The native input stays in the DOM
   (aria-hidden, tabindex=-1 once JS enhances it) so the /book/ backend keeps
   receiving the exact same name/value pair it always has; only the visible,
   interactive surface changes. Sizing matches the existing .field-control
   box (52px min-height, 15px inline padding, 16px text) so the enhanced
   field sits pixel-for-pixel where the native one did. --------------------
*/
.field-control--picker{position:relative}
.field-control--picker > input[type="date"],
.field-control--picker > input[type="time"]{
  position:absolute; inset:0; width:100%; height:100%;
  opacity:0; pointer-events:none;
}
.field-control__trigger{
  display:flex; align-items:center; width:100%; min-width:0;
  min-height:52px; padding:0 15px;
  font-family:var(--corr-sans); font-size:1rem; line-height:1.3;
  color:var(--corr-ink); text-align:left;
  background:transparent; border:0; border-radius:var(--corr-r-sm);
  cursor:pointer;
}
.field-control__trigger:focus-visible{outline:2px solid var(--corr-action); outline-offset:-2px}
.field-control__value.is-placeholder{color:var(--corr-faint)}

.dtp-popover{
  z-index:80; background:var(--corr-surface); border:1px solid var(--corr-rule);
  border-radius:var(--corr-r-lg); box-shadow:var(--corr-sh-3);
  padding:14px; font-family:var(--corr-sans);
}

/* calendar */
.dtp-cal__header{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.dtp-cal__label{font-family:var(--corr-serif); font-size:1.0625rem; color:var(--corr-ink)}
.dtp-cal__nav{
  width:36px; height:36px; display:grid; place-items:center;
  border:1px solid var(--corr-rule); border-radius:var(--corr-r-sm);
  background:var(--corr-surface); color:var(--corr-ink); font-size:1.125rem; cursor:pointer;
}
.dtp-cal__nav:hover:not(:disabled){border-color:var(--corr-action); color:var(--corr-action)}
.dtp-cal__nav:disabled{opacity:.35; cursor:not-allowed}
.dtp-cal__dow{display:grid; grid-template-columns:repeat(7,1fr); gap:2px; margin-bottom:4px}
.dtp-cal__dow span{
  font-size:.6875rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--corr-mist); text-align:center;
}
.dtp-cal__days{display:grid; grid-template-columns:repeat(7,1fr); gap:2px}
.dtp-cal__day{
  min-height:40px; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:var(--corr-r-sm); background:transparent;
  font-family:var(--corr-sans); font-size:.9375rem; color:var(--corr-ink); cursor:pointer;
}
.dtp-cal__day:not(:disabled):hover{background:var(--corr-gold-wash)}
.dtp-cal__day.is-today{font-weight:700; color:var(--corr-action)}
.dtp-cal__day.is-selected{background:var(--corr-action); color:var(--corr-action-ink)}
.dtp-cal__day:disabled{color:var(--corr-faint); cursor:not-allowed}
.dtp-cal__day:focus-visible{outline:2px solid var(--corr-action); outline-offset:1px}

/* time list */
.dtp-popover--time{padding:8px}
.dtp-time__list{max-height:280px; overflow-y:auto; display:flex; flex-direction:column; gap:2px}
.dtp-time__slot{
  min-height:48px; display:flex; align-items:center; padding:0 14px;
  border:0; border-radius:var(--corr-r-sm); background:transparent;
  font-family:var(--corr-sans); font-size:.9375rem; color:var(--corr-ink);
  text-align:left; cursor:pointer;
}
.dtp-time__slot:hover{background:var(--corr-gold-wash)}
.dtp-time__slot.is-selected{background:var(--corr-action); color:var(--corr-action-ink)}
.dtp-time__slot:focus-visible{outline:2px solid var(--corr-action); outline-offset:-2px}

@media (max-width:560px){
  .dtp-popover{max-height:70vh; overflow-y:auto}
}