/* Local date/guest selection only: this component never submits a form. */
.stay-booking__field { cursor: pointer; transition: border-color 180ms ease, background-color 180ms ease; }
.stay-booking__field:focus-within { border-color: #53624a; background-color: #fffdf8; }
.stay-booking__value { position: relative; }
.stay-booking input[type="date"],
.stay-booking select { cursor: pointer; }
.stay-booking input[type="date"] { position: relative; height: 100%; }
.stay-booking input::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: auto;
  height: auto;
  opacity: 0;
  cursor: pointer;
}
.stay-booking input::-webkit-date-and-time-value { text-align: left; }
.stay-booking__chevron { pointer-events: none; }
.stay-booking select option { color: #172820; background: #f8f5ef; font-size: 16px; }

/* Make this newly active component usable on touch screens independently. */
@media (max-width: 767px) {
  .stay-options { display: flow-root; height: auto; padding-bottom: 20px; }
  .stay-booking {
    position: relative;
    inset: auto;
    height: auto;
    padding: 20px;
    margin: calc(745 * var(--s)) 16px 0;
    border-radius: 18px;
  }
  .stay-booking__intro { position: static; }
  .stay-booking .stay-options__eyebrow { font-size: 10px; line-height: 16px; letter-spacing: 2px; gap: 16px; }
  .stay-booking .stay-options__eyebrow::after { width: 48px; }
  .stay-booking h2 { margin-top: 8px; font-size: 28px; line-height: 1.2; letter-spacing: -0.8px; }
  .stay-booking .stay-options__subtitle { margin-top: 10px; font-size: 15px; line-height: 1.5; }
  .stay-booking__lettering { display: none; }
  .stay-booking__forest { width: 75%; opacity: 0.18; }
  .stay-booking__form { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; }
  .stay-booking__field { height: 64px; padding: 6px 14px; border-radius: 14px; }
  .stay-booking__label { font-size: 12px; line-height: 18px; }
  .stay-booking__value { height: 32px; gap: 10px; }
  .stay-booking__value img { width: 22px; height: 22px; }
  .stay-booking__value .stay-booking__chevron { width: 16px; height: 16px; }
  .stay-booking input, .stay-booking select { font-size: 16px; line-height: 24px; }
  .stay-booking__submit { min-height: 64px; height: auto; font-size: 15px; line-height: 22px; gap: 12px; border-radius: 14px; }
  .stay-booking__submit .stay-options__arrow { width: 22px; height: 22px; }
  .stay-booking__provider { position: static; align-items: flex-start; gap: 8px; margin-top: 14px; font-size: 12px; line-height: 1.5; }
  .stay-booking__provider img { flex: none; width: 18px; height: 18px; }
}
@media (max-width: 480px) { .stay-booking__form { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .stay-booking__field { transition: none; } }

.booking-notice {
  box-sizing: border-box;
  width: min(480px, calc(100vw - 48px));
  padding: 56px 40px 40px;
  border: 1px solid #e3ded3;
  border-radius: 20px;
  color: #102b22;
  background: #faf8f3;
  font-family: "Manrope", sans-serif;
  text-align: center;
  box-shadow: 0 20px 70px rgb(7 24 15 / 20%);
}
.booking-notice::backdrop { background: rgb(7 17 12 / 65%); }
.booking-notice p { margin: 0; font-size: 26px; line-height: 1.4; font-weight: 500; }
.booking-notice__close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #102b22;
  background: transparent;
  cursor: pointer;
}
.booking-notice__close:hover { background: #eee7d7; }
.booking-notice__close:focus-visible { outline: 2px solid #53624a; outline-offset: 2px; }