[data-datepicker] { position: relative; }
.booking-date__field { position: relative; }
.booking-date__field input, .field .booking-date__field input { padding-right: 56px; }
.booking-date__toggle {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; display: grid; place-items: center;
  color: var(--text); border: 0; background: transparent; cursor: pointer;
}
.booking-date__toggle svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.booking-date__calendar {
  position: absolute; top: calc(100% + 8px); left: 0; width: min(100%, 340px);
  padding: 16px; background: var(--bg-card, var(--panel-2, #17271e)); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 12px 36px #0006;
}
.booking-date__head { display: grid; grid-template-columns: 36px 1fr 36px; align-items: center; text-align: center; gap: 6px; margin-bottom: 12px; }
.booking-date__head strong { font-size: 14px; font-weight: 500; }
.booking-date__calendar button { min-height: 36px; border: 0; border-radius: 6px; color: var(--text); background: transparent; font: inherit; cursor: pointer; }
.booking-date__calendar button:hover:not(:disabled), .booking-date__calendar button[aria-pressed="true"] { background: var(--accent, #9dc79f); color: var(--bg, #0a1510); }
.booking-date__calendar button:disabled { opacity: .3; cursor: default; }
.booking-date__calendar button:focus-visible, .booking-date__toggle:focus-visible { outline: 2px solid var(--accent, #9dc79f); outline-offset: 2px; }
.booking-date__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; text-align: center; font-size: 13px; }
.booking-date__days > span { padding: 6px 0; color: var(--text-dim); }
.booking-date__clear { width: 100%; margin-top: 10px; font-size: 12px !important; }