.field .booking-date-trigger { display:flex; align-items:center; justify-content:space-between; gap:6px; width:100%; min-width:0; height:42px; border:1px solid var(--line,#d6e5e1); border-radius:0; padding:12px 10px; background:white; color:#4d5753; text-align:left; font:12px 'DM Sans',Arial,sans-serif; cursor:pointer; }
.booking-date-trigger .bd-value { min-width:0; }
.booking-date-trigger svg { flex:none; }
.booking-date-trigger:focus-visible { outline:3px solid #087e82; outline-offset:2px; }
.booking-date-trigger.bd-empty .bd-value { color:#687974; }
@media(max-width:800px) { .field .booking-date-trigger { height:40px; padding:9px 7px; font-size:11px; } }
/* One mobile layout shared by the home and booking pages. The time stays
   compact, including Safari's native time editor; the calendar is unchanged. */
@media (max-width:600px) {
  :is(#reserver,.booking-page) #bookingForm {
    width:100%;
    margin:0;
    grid-template-columns:minmax(0,1fr) 104px;
    gap:10px;
    align-items:end;
  }
  :is(#reserver,.booking-page) #bookingForm > .field {
    grid-column:auto !important;
    min-width:0;
    width:100%;
  }
  :is(#reserver,.booking-page) #bookingForm .field label {
    margin:0 0 5px;
    font-size:11px;
    line-height:16px;
    white-space:nowrap;
  }
  :is(#reserver,.booking-page) #bookingForm .field :is(input[type=date],input[type=time],.booking-date-trigger) {
    box-sizing:border-box;
    display:flex;
    align-items:center;
    width:100%;
    min-width:0;
    max-width:100%;
    min-inline-size:0;
    -webkit-min-logical-width:0;
    /* Older theme rules use !important for native inputs. Keep both equal. */
    height:44px !important;
    min-height:44px;
    max-height:44px;
    margin:0;
    padding:0 10px;
    border:1px solid #cbdcd7;
    border-radius:8px;
    background:#fff;
    color:#163437;
    font:500 16px/1.25 'DM Sans',Arial,sans-serif;
    text-align:left;
    appearance:none;
    -webkit-appearance:none;
  }
  :is(#reserver,.booking-page) #bookingForm .field button.booking-date-trigger { font-size:14px; gap:6px; }
  :is(#reserver,.booking-page) #bookingForm .bd-value { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  :is(#reserver,.booking-page) #bookingForm .field input::-webkit-date-and-time-value {
    min-width:0;
    min-height:1.25em;
    margin:0;
    text-align:left;
  }
  :is(#reserver,.booking-page) #bookingForm .field input::-webkit-datetime-edit,
  :is(#reserver,.booking-page) #bookingForm .field input::-webkit-datetime-edit-fields-wrapper { padding:0; }
  :is(#reserver,.booking-page) #bookingForm .field input::-webkit-calendar-picker-indicator {
    flex:none;
    width:16px;
    height:16px;
    margin:0 0 0 4px;
    padding:0;
  }
  :is(#reserver,.booking-page) #bookingForm .field input:focus-visible {
    outline:3px solid #087e82;
    outline-offset:2px;
  }
  :is(#reserver,.booking-page) #bookingForm .search {
    grid-column:1 / -1 !important;
    width:100%;
    height:44px;
    min-height:44px;
    border-radius:8px;
    font-size:13px;
  }
}
@media (max-width:380px) {
  :is(#reserver,.booking-page) #bookingForm { grid-template-columns:minmax(0,1fr) 96px; }
  :is(#reserver,.booking-page) #bookingForm .field button.booking-date-trigger { padding:0 8px; }
  :is(#reserver,.booking-page) #bookingForm .field button.booking-date-trigger.bd-empty { font-size:13px; }
}
@media (min-width:601px) and (max-width:800px) {
  #reserver #bookingForm .search { grid-column:1 / -1 !important; }
}
.booking-date-picker { box-sizing:border-box; width:min(420px,calc(100% - 24px)); max-width:none; max-height:calc(100dvh - 24px); overflow:auto; overscroll-behavior:contain; margin:auto; padding:22px; border:1px solid #d6e5e1; border-radius:18px; background:white; color:#163437; box-shadow:0 18px 80px #10252740; font:14px/1.5 'DM Sans',Arial,sans-serif; }
.booking-date-picker::backdrop { background:#10252788; }
.booking-date-picker * { box-sizing:border-box; }
.bd-head,.bd-nav { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.bd-head { position:sticky; top:0; z-index:1; padding-bottom:4px; background:white; }
.bd-head h2 { margin:0; font:700 22px/1.2 'DM Sans',Arial,sans-serif; letter-spacing:-.4px; }
.booking-date-picker button { cursor:pointer; border:0; font:600 15px/1 'DM Sans',Arial,sans-serif; color:#163437; background:transparent; }
.booking-date-picker button:focus-visible { outline:3px solid #f5cc32; outline-offset:1px; }
.booking-date-picker .bd-close { flex:none; width:42px; height:42px; background:#f0f6f4; border-radius:50%; font-size:25px; }
.bd-step { min-height:42px; margin:12px 0; color:#08777b; font-size:13px; }
.bd-nav { margin:8px 0 14px; }
.bd-nav h3 { margin:0; text-transform:capitalize; font-size:17px; }
.bd-nav button { width:42px; height:42px; border:1px solid #d6e5e1; border-radius:9px; font-size:26px; }
.bd-week,.bd-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; text-align:center; }
.bd-week { margin-bottom:8px; color:#657975; font-size:12px; }
.bd-grid button { width:100%; height:44px; border-radius:8px; }
.bd-grid button:not(:disabled):hover { background:#dbf3ed; }
.bd-grid button.bd-between { background:#edf8f5; }
.bd-grid button.bd-selected { background:#087e82; color:white; }
.bd-grid button[aria-current=date] { box-shadow:inset 0 0 0 1px #087e82; }
.booking-date-picker button:disabled { color:#b1bdb9; background:#f7f9f8; cursor:not-allowed; }
.bd-help { margin:15px 0 0; color:#657975; font-size:12px; }
@media(max-width:380px) { .booking-date-picker { padding:16px 12px; } .bd-head h2 { font-size:20px; } .bd-week,.bd-grid { gap:2px; } }