.form {
  --control-height: 54px;
  --control-border: #aeb8b2;
  --control-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.25 6 6.25l5-5' fill='none' stroke='%2318231f' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.form .field input:not([type='hidden']), .form .field select, .date-toggle {
  height: var(--control-height);
  min-height: var(--control-height);
  border: 1px solid var(--control-border);
  border-radius: 0;
  background-color: #fff;
  color: var(--ink);
  line-height: 1.25;
}
.form .field input:not([type='hidden']), .form .field select { padding: 0 .9rem; }
.form .field select {
  appearance: none;
  padding-right: 2.75rem;
  background-image: var(--control-arrow);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  cursor: pointer;
}
.form .field select:disabled, .form .field input:disabled, .date-toggle:disabled {
  background-color: #edf0ee;
  color: #68736e;
  cursor: not-allowed;
}
.reservation-calendar { position: relative; }
.date-toggle {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 2.75rem 0 .9rem;
  background-image: var(--control-arrow);
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  text-align: left;
  cursor: pointer;
}
.date-toggle > [aria-hidden='true'] { display: none; }
.calendar-panel { position: absolute; inset: calc(100% + .4rem) auto auto 0; z-index: 12; width: min(340px, calc(100vw - 3rem)); padding: 1rem; border: 1px solid #aeb8b2; background: white; box-shadow: var(--shadow); }
.calendar-header { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: .5rem; margin-bottom: .7rem; text-align: center; }
.calendar-header button { min-height: 40px; border: 1px solid #cad1cd; background: var(--paper); color: var(--ink); font-size: 1.4rem; cursor: pointer; }
.calendar-header button:disabled { opacity: .35; cursor: default; }
.calendar-weekdays, .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: .2rem; }
.calendar-weekdays { margin-bottom: .25rem; color: #5c6963; font-size: .72rem; font-weight: 800; text-align: center; }
.calendar-day { aspect-ratio: 1; border: 0; background: var(--paper); color: var(--ink); cursor: pointer; }
.calendar-day:hover:not(:disabled), .calendar-day:focus-visible { background: var(--gold); color: #14221d; }
.calendar-day[aria-current="date"] { background: var(--green); color: white; font-weight: 800; }
.calendar-day:disabled { background: transparent; color: #a7afab; text-decoration: line-through; cursor: not-allowed; }
.calendar-day[data-outside="true"] { opacity: .45; }
.calendar-help { margin: .75rem 0 0; color: #5c6963; font-size: .78rem; }
.field small { color: #5c6963; line-height: 1.45; }
.form-error { margin: 0; padding: .75rem; border-left: 3px solid #a72030; background: #fff0f1; color: #7b1826; }

@media (max-width: 520px) {
  .calendar-panel { position: fixed; inset: 50% auto auto 50%; width: min(360px, calc(100vw - 2rem)); transform: translate(-50%, -50%); }
}