.booking-panel .booking-datetime-field{position:relative;min-width:0;margin-bottom:17px;font-size:9px;letter-spacing:.06em;color:#5f686e}
.booking-panel .booking-date-trigger,.booking-panel .booking-time-trigger{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;height:44px;min-height:44px;margin:7px 0 0;padding:0 12px;border:1px solid #d3cec4;border-radius:2px;appearance:none;-webkit-appearance:none;background:#fff;color:#111d27;font:400 14px "Noto Sans SC","Noto Sans JP",sans-serif;line-height:1.4;text-align:left;letter-spacing:0;cursor:pointer}
.booking-date-icon,.booking-time-icon{font-size:17px;line-height:1;color:#7b6b4b}
.booking-panel .booking-calendar,.booking-panel .booking-time-popup{box-sizing:border-box;position:absolute;top:100%;width:260px;max-width:calc(100vw - 48px);z-index:10;margin-top:5px;padding:10px;background:#fff;border:1px solid #d3cec4;border-radius:3px;box-shadow:0 8px 22px #07131f26;color:#182633;letter-spacing:0}
.booking-calendar{left:0}.booking-time-popup{right:0}
.booking-calendar-head{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:4px;margin-bottom:4px}
.booking-calendar-head strong{text-align:center;font-size:13px;font-weight:500}
.booking-calendar button,.booking-time-foot button{border:0;border-radius:2px;background:transparent;color:#182633;cursor:pointer;font:400 12px "Noto Sans SC","Noto Sans JP",sans-serif;min-width:0;padding:0;min-height:28px}
.booking-calendar-head button{font-size:21px}
.booking-calendar-weekdays,.booking-calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px}
.booking-calendar-weekdays span{text-align:center;padding:4px 0;font-size:10px;color:#66727b}
.booking-calendar-days button{height:28px;min-height:28px;width:100%}
.booking-calendar button:hover:not(:disabled),.booking-time-option:hover{background:#f1e9db}
.booking-calendar button[aria-pressed="true"],.booking-time-option[aria-selected="true"]{background:#bfa470;color:#07131f;font-weight:600}
.booking-calendar button[aria-current="date"]{box-shadow:inset 0 0 0 1px #bfa470}
.booking-calendar button:disabled{opacity:.3;cursor:default}
.booking-calendar button:focus-visible,.booking-date-trigger:focus-visible,.booking-time-trigger:focus-visible,.booking-time-foot button:focus-visible{outline:2px solid #876c36;outline-offset:1px}
.booking-calendar-foot,.booking-time-foot{display:flex;justify-content:space-between;margin-top:6px;border-top:1px solid #e8e2d8;padding-top:4px}
.booking-calendar-foot button,.booking-time-foot button{padding:0 6px;color:#705622}
.booking-time-foot{justify-content:flex-end}
.booking-time-columns{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.booking-time-column-title{text-align:center;color:#66727b;font-size:11px;line-height:24px}
.booking-time-list{position:relative;box-sizing:content-box;height:192px;max-height:192px;overflow-x:hidden;overflow-y:scroll;overscroll-behavior:contain;scrollbar-gutter:stable;scrollbar-width:thin;scrollbar-color:#c4b69e #f6f3ed;border:1px solid #e8e2d8;border-radius:2px;padding:0;outline:none;touch-action:pan-y}
.booking-time-list:focus-visible{border-color:#876c36;box-shadow:0 0 0 1px #876c36}
.booking-time-list::-webkit-scrollbar{width:5px}.booking-time-list::-webkit-scrollbar-track{background:#f6f3ed}.booking-time-list::-webkit-scrollbar-thumb{background:#c4b69e;border-radius:3px}
.booking-time-option{box-sizing:border-box;height:32px;min-height:32px;display:flex;align-items:center;justify-content:center;padding:0;font:400 14px "Noto Sans SC","Noto Sans JP",sans-serif;cursor:pointer;user-select:none;scroll-snap-align:start}
@media(max-width:1180px){.booking-panel .booking-datetime-field{font-size:12px}}
@media(max-width:600px){.booking-panel .booking-date-trigger,.booking-panel .booking-time-trigger{font-size:16px}}

/* Keep short booking fields paired on phones; addresses and long text stay full width. */
.booking-panel .booking-party-fields { display: contents; }
@media (max-width: 600px) {
  .booking-panel #booking-form .field-row:has(#date),
  .booking-panel #booking-form .field-row:has(#passengers) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 12px;
    row-gap: 0;
  }
  /* The full localized date needs a little more room than the time. */
  .booking-panel #booking-form .field-row:has(#date) {
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  }
  .booking-panel #booking-form .field-row > label { min-width: 0; }
  .booking-panel #booking-form .booking-party-fields {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 8px;
    align-items: start;
  }
  .booking-panel #booking-form .booking-party-fields > .field-row { display: contents; }
  .booking-panel #booking-form .booking-party-fields label {
    min-width: 0;
    grid-row: 1;
    font-size: clamp(10px, 2.8vw, 12px);
    letter-spacing: 0;
  }
  .booking-panel #booking-form .booking-party-fields label > span {
    display: block;
    min-height: 18px;
    line-height: 18px;
  }
  .booking-panel #booking-form .booking-party-fields select {
    padding-inline: 8px;
    min-height: 44px;
  }
  .booking-panel #booking-form .booking-party-fields > .booking-capacity-notice {
    grid-column: 1 / -1;
  }
  .booking-panel .booking-date-trigger,
  .booking-panel .booking-time-trigger { gap: 4px; padding-inline: 9px; }
  .booking-panel #booking-date-value,
  .booking-panel #booking-time-value { white-space: nowrap; }
  .booking-panel .booking-date-icon,
  .booking-panel .booking-time-icon { flex-shrink: 0; }
  /* Keep full vehicle names clear of the native dropdown arrow on phones. */
  .booking-panel #booking-form #vehicle {
    font-size: clamp(11px, 3.1vw, 14px);
    letter-spacing: 0;
    padding-inline: 8px 24px;
    min-height: 44px;
  }
}
@media (max-width: 360px) {
  .booking-panel #booking-form #vehicle { font-size: 10px; }
  .booking-panel #booking-form .field-row:has(#date),
  .booking-panel #booking-form .field-row:has(#passengers) { column-gap: 10px; }
  .booking-panel .booking-date-trigger,
  .booking-panel .booking-time-trigger { font-size: 14px; padding-inline: 7px; }
  .booking-panel .booking-date-icon,
  .booking-panel .booking-time-icon { font-size: 14px; }
}