/* the button that replaces the browser's own date control; the calendar itself is the shared flatpickr skin in main.css */
.wj-date { position: relative; }
.wj-date-native { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; }
.wj-date-btn {
    display: flex; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; height: 48px; padding: 0 14px; border: 1px solid var(--wj-line-strong, #C9C9C4); border-radius: 12px; background: var(--wj-card);
    color: var(--wj-ink, #252525); font: inherit; font-size: 16px; font-weight: 600; text-align: left; cursor: pointer;
}
.wj-date-btn::before {
    /* a small calendar drawn in CSS: a frame with a heavier top edge */
    content: ""; flex: 0 0 16px; width: 16px; height: 16px; box-sizing: border-box; border: 2px solid var(--wj-ink-2, #616161); border-top-width: 5px; border-radius: 4px;
}
.wj-date-btn:hover { border-color: var(--wj-ink-2, #616161); }
.wj-date-btn:focus-visible { border-color: var(--wj-orange-ink, #C73D00); outline: 3px solid var(--wj-focus, rgba(242, 76, 0, .45)); outline-offset: 1px; }
.wj-date-btn.is-empty { color: var(--wj-ink-3); font-weight: 400; }
.wj-date-btn[aria-invalid="true"] { border-color: var(--wj-danger-ink); }
.wj-date-btn:disabled { background: var(--wj-paper, #F6F7F8); color: var(--wj-ink-2, #616161); cursor: default; }
/* the calendar lives on <body> (class wj-date-cal) so a dialog never clips it; z-index 100000 comes from main.css */
.wj-date-cal { z-index: 100000; }
.wj-date-cal .wj-date-head { display: none; }
.wj-date-cal .flatpickr-day.selected, .wj-date-cal .flatpickr-day.selected:hover { border-color: transparent; background: transparent; }
@media (max-width: 767.98px) {
    .wj-date-cal .wj-date-head { display: flex; }
}
/* the order sheet and the stay form size their own controls */
.hp-order .wj-date-btn, .hp .wj-date-btn { height: 44px; font-size: 15px; }
.hp-order .wj-date-btn { padding: 0 12px; }

/* the month and year row: one line, centred, no spinner arrows */
.wj-date-cal .flatpickr-months .flatpickr-month { height: 44px; }
.wj-date-cal .flatpickr-current-month { position: static; display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; height: 44px; padding: 0; font-size: 15px; line-height: 1; }
.wj-date-cal .flatpickr-current-month .cur-month { margin: 0; font-weight: 700; }
.wj-date-cal .flatpickr-current-month .numInputWrapper { width: 64px; }
.wj-date-cal .flatpickr-current-month input.cur-year { height: 30px; padding: 0 4px; border-radius: 8px; font-size: 15px; font-weight: 700; }
.wj-date-cal .numInputWrapper span { display: none; }
.wj-date-cal .flatpickr-prev-month, .wj-date-cal .flatpickr-next-month { top: 0; height: 44px; display: flex; align-items: center; }