/* =========================================================
   SMALL TOWN MAHJ — LIVE AVAILABILITY + BOOKING
   Calendar-first and intentionally limited to this route.
   ========================================================= */

.availability-page {
  padding: clamp(1.8rem, 4vw, 3.6rem) 0 clamp(3.8rem, 7vw, 6rem);
}

.availability-page > .shell {
  width: min(100%, 1080px);
}

.availability-page__intro {
  max-width: 660px;
  margin: 0 auto clamp(1.6rem, 3.4vw, 2.6rem);
  text-align: center;
}

.availability-page__intro h1 {
  margin: 0 0 .65rem;
  color: var(--blue-deep);
  font-size: clamp(2.6rem, 5vw, 4.15rem);
  line-height: .98;
}

.availability-page__intro p {
  max-width: 36rem;
  margin: 0 auto;
  color: var(--muted);
  font-size: clamp(.94rem, 1.35vw, 1.04rem);
}

.availability-page .booking-layout {
  width: 100%;
  margin: 0 auto;
  gap: clamp(1.8rem, 4vw, 3.2rem);
  grid-template-columns: minmax(0, 1.42fr) minmax(285px, .58fr);
}

.availability-page .booking-calendar {
  border: 1px solid rgba(18,56,102,.24);
  border-radius: 8px;
  background: var(--paper);
  box-shadow: 0 6px 20px rgba(18,56,102,.045);
  padding: clamp(1.05rem, 2.6vw, 1.8rem);
}

.availability-page .booking-calendar__head {
  align-items: center;
  margin-bottom: .45rem;
  padding-bottom: .8rem;
}

.availability-page .booking-calendar__title-row {
  display: grid;
  align-items: center;
  gap: .65rem;
  grid-template-columns: 42px minmax(0, 1fr) 42px;
}

.availability-page .booking-calendar__month {
  min-width: 9.5em;
  font-size: clamp(1.9rem, 3.7vw, 2.7rem);
  text-align: center;
}

.calendar-nav-button {
  display: inline-grid;
  width: 42px;
  min-width: 42px;
  height: 42px;
  place-items: center;
  border: 1px solid rgba(18,56,102,.22);
  border-radius: 50%;
  background: transparent;
  color: var(--blue-deep);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
}

.calendar-nav-button:hover:not(:disabled) {
  border-color: var(--blue-deep);
  background: rgba(20,80,154,.055);
}

.calendar-nav-button:disabled {
  cursor: default;
  opacity: .28;
}

.availability-page .booking-calendar__legend {
  gap: .7rem;
  font-size: .68rem;
}

.availability-page .calendar-status {
  min-height: 1.5em;
  margin: 0 0 .65rem;
  color: var(--muted);
  font-size: .72rem;
  text-align: center;
}

.availability-page .calendar-status[data-error] {
  color: #9a332c;
}

.availability-page .calendar-grid {
  gap: clamp(.2rem, .6vw, .4rem);
}

.availability-page .calendar-day {
  min-width: 0;
  border-radius: 6px;
}

.availability-page .calendar-day:disabled {
  border-color: rgba(18,56,102,.08);
  background: rgba(18,56,102,.025);
  color: rgba(36,55,77,.38);
  cursor: default;
}

.availability-page .calendar-day.is-open {
  border-color: #174b8f;
  background: #edf4fb;
  color: #103a70;
}

.availability-page .calendar-day.is-open:hover {
  border-color: #103a70;
  background: #e2edf8;
}

.availability-page .calendar-day[aria-pressed='true'] {
  border-color: #103a70;
  background: #103a70;
  color: #fff;
}

.availability-page .booking-panel {
  top: calc(var(--site-header-height) + 22px);
  border: 0;
  border-left: 1px solid rgba(18,56,102,.18);
  border-radius: 0;
  background: transparent;
  padding: .15rem 0 .15rem clamp(1.4rem, 3vw, 2.2rem);
}

.availability-page .booking-panel h2 {
  margin-bottom: .4rem;
  font-size: clamp(1.8rem, 2.8vw, 2.4rem);
}

.availability-page .selected-date {
  margin-bottom: 1.2rem;
  color: var(--blue-deep);
  font-size: 1.08rem;
  font-weight: 600;
}

.availability-page .request-fields {
  display: grid;
  gap: .95rem;
}

.availability-page .request-fields[hidden] {
  display: none;
}

.availability-page .field textarea {
  min-height: 92px;
}

.availability-page .experience-field {
  position: relative;
  z-index: 8;
}

.availability-page .experience-dropdown {
  position: relative;
  width: 100%;
}

.availability-page .experience-dropdown__trigger {
  display: flex;
  width: 100%;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  border: 1px solid rgba(18,56,102,.34);
  border-radius: 4px;
  background: var(--paper, #fffdf7);
  color: #24374d;
  cursor: pointer;
  font: inherit;
  font-size: 1rem;
  line-height: 1.25;
  padding: .8rem .95rem;
  text-align: left;
}

.availability-page .experience-dropdown__trigger:hover:not(:disabled),
.availability-page .experience-dropdown__trigger:focus-visible,
.availability-page .experience-dropdown[data-open] .experience-dropdown__trigger {
  border-color: #d99a2b;
  outline: 2px solid rgba(217,154,43,.24);
  outline-offset: 2px;
}

.availability-page .experience-dropdown[data-open] .experience-dropdown__trigger {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  outline-offset: 0;
}

.availability-page .experience-dropdown__trigger[aria-invalid='true'] {
  border-color: #a33a32;
}

.availability-page .experience-dropdown__trigger:disabled {
  cursor: default;
  opacity: .55;
}

.availability-page .experience-dropdown__chevron {
  flex: 0 0 auto;
  color: var(--blue-deep);
  font-size: 1.45rem;
  line-height: 1;
  transform: translateY(-2px);
  transition: transform 160ms ease;
}

.availability-page .experience-dropdown[data-open] .experience-dropdown__chevron {
  transform: rotate(180deg) translateY(2px);
}

.availability-page .experience-dropdown__menu {
  position: absolute;
  top: calc(100% - 1px);
  right: 0;
  left: 0;
  z-index: 30;
  display: grid;
  overflow: hidden;
  border: 1px solid #d99a2b;
  border-top: 0;
  border-radius: 0 0 6px 6px;
  background: var(--paper, #fffdf7);
  box-shadow: 0 12px 28px rgba(18,56,102,.16);
}

.availability-page .experience-dropdown__menu[hidden] {
  display: none;
}

.availability-page .experience-dropdown__menu [role='option'] {
  width: 100%;
  min-height: 52px;
  border: 0;
  border-top: 1px solid rgba(18,56,102,.12);
  background: transparent;
  color: #24374d;
  cursor: pointer;
  font: inherit;
  font-size: .96rem;
  line-height: 1.3;
  padding: .8rem .95rem;
  text-align: left;
  white-space: normal;
}

.availability-page .experience-dropdown__menu [role='option']:first-child {
  border-top: 0;
}

.availability-page .experience-dropdown__menu [role='option']:hover,
.availability-page .experience-dropdown__menu [role='option']:focus-visible {
  background: #edf4fb;
  color: #103a70;
  outline: none;
}

.availability-page .experience-dropdown__menu [role='option'][aria-selected='true'] {
  background: #f8eed8;
  color: var(--blue-deep);
  font-weight: 700;
}

.booking-honeypot {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

.payment-fieldset {
  min-width: 0;
  margin: .2rem 0 0;
  border: 1px solid rgba(18,56,102,.16);
  border-radius: 6px;
  padding: .85rem;
}

.payment-fieldset legend {
  color: var(--blue-deep);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.payment-fieldset > p:first-of-type {
  margin: 0 0 .7rem;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.45;
}

.payment-options {
  display: grid;
  gap: .45rem;
}

.payment-options label {
  display: flex;
  min-height: 42px;
  align-items: center;
  border: 1px solid rgba(18,56,102,.12);
  border-radius: 5px;
  cursor: pointer;
  gap: .6rem;
  padding: .55rem .7rem;
}

.payment-options label:has(input:checked) {
  border-color: var(--blue-deep);
  background: rgba(20,80,154,.055);
  color: var(--blue-deep);
}

.payment-options input {
  width: 18px;
  height: 18px;
  margin: 0;
}

.booking-form__status {
  min-height: 1.4em;
  margin: 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.45;
}

.booking-form__status[data-error] {
  color: #9a332c;
}

.availability-page .booking-submit {
  width: 100%;
}

@media (max-width: 820px) {
  .availability-page .booking-layout {
    grid-template-columns: 1fr;
  }

  .availability-page .booking-panel {
    position: static;
    border-left: 0;
    border-top: 1px solid rgba(18,56,102,.18);
    padding: 1.35rem 0 0;
  }
}

@media (max-width: 560px) {
  .availability-page {
    padding-top: 1.05rem;
  }

  .availability-page__intro {
    margin-bottom: 1.25rem;
  }

  .availability-page__intro h1 {
    font-size: clamp(2.35rem, 11vw, 3.05rem);
  }

  .availability-page__intro p {
    font-size: .9rem;
    line-height: 1.55;
  }

  .availability-page .booking-calendar {
    padding: .7rem .5rem .75rem;
    border-radius: 6px;
    box-shadow: none;
  }

  .availability-page .booking-calendar__head {
    display: grid;
    align-items: start;
    gap: .55rem;
    margin-bottom: .25rem;
    padding-bottom: .6rem;
  }

  .availability-page .booking-calendar__title-row {
    width: 100%;
    grid-template-columns: 40px minmax(0, 1fr) 40px;
  }

  .availability-page .booking-calendar__month {
    min-width: 0;
    font-size: clamp(1.7rem, 7.8vw, 2.1rem);
  }

  .calendar-nav-button {
    width: 40px;
    min-width: 40px;
    height: 40px;
  }

  .availability-page .booking-calendar__legend {
    justify-content: center;
    gap: .45rem .75rem;
    font-size: .62rem;
  }

  .availability-page .calendar-grid {
    gap: .16rem;
  }

  .availability-page .calendar-grid__weekday {
    padding: .28rem 0;
    font-size: .53rem;
    letter-spacing: .025em;
  }

  .availability-page .calendar-day {
    min-height: 44px;
    aspect-ratio: auto;
    border-radius: 5px;
    font-size: .76rem;
  }

  .availability-page .booking-panel {
    padding-top: 1.15rem;
  }

  .availability-page .booking-panel h2 {
    font-size: 1.9rem;
  }

  .availability-page .selected-date {
    margin-bottom: 1rem;
    font-size: 1rem;
  }

  .availability-page .experience-dropdown__trigger,
  .availability-page .experience-dropdown__menu [role='option'] {
    font-size: 1rem;
  }
}