.booking-calendar {
  padding: 90px max(24px, calc((100vw - 1180px) / 2));
  background: #eef1ed;
  color: #173c35;
}

.booking-calendar > header {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(260px, .85fr);
  gap: 60px;
  align-items: end;
  margin-bottom: 36px;
}

.booking-calendar > header span,
.booking-quote span,
.booking-success span {
  color: #a26d4b;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .15em;
  text-transform: uppercase;
}

.booking-calendar > header h2 {
  margin: 12px 0 0;
  font: 54px/1 Georgia, serif;
  font-weight: 400;
}

.booking-calendar > header p {
  margin: 0;
  color: #64746f;
  font-size: 12px;
  line-height: 1.75;
}

.availability-strip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(105px, 1fr);
  gap: 1px;
  overflow-x: auto;
  padding-bottom: 10px;
  background: #dbe1de;
}

.availability-strip article {
  min-height: 122px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  background: #fff;
}

.availability-strip article small { color: #8b9a95; font-size: 8px; text-transform: uppercase; }
.availability-strip article strong { margin: 7px 0 14px; font: 21px Georgia, serif; font-weight: 400; }
.availability-strip article span { font-size: 11px; font-weight: 700; }
.availability-strip article em { margin-top: 5px; color: #668279; font-size: 8px; font-style: normal; }
.availability-strip article.last em { color: #a26d4b; }
.availability-strip article.closed { opacity: .58; background: #e8ebe8; }
.availability-strip article.closed span { text-decoration: line-through; }

.booking-search,
.booking-request {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr auto;
  margin-top: 28px;
  background: #fff;
  border: 1px solid #d7dfdb;
}

.booking-search {
  grid-template-columns: 1.35fr repeat(4, minmax(112px, .75fr)) auto;
}

.booking-search.room-booking-search {
  grid-template-columns: 1fr 1fr .65fr 1fr auto;
}

.booking-search label,
.booking-request label {
  min-width: 0;
  min-height: 72px;
  padding: 13px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid #d7dfdb;
}

.booking-search label > span,
.booking-request label > span {
  margin-bottom: 7px;
  color: #889790;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.booking-search label > small,
.booking-request label > small {
  margin-top: 5px;
  color: #899791;
  font-size: 7px;
  line-height: 1.3;
}

.booking-search input,
.booking-search select,
.booking-request input,
.booking-request select {
  width: 100%;
  border: 0;
  outline: 0;
  color: #173c35;
  background: transparent;
  font: 11px Arial, sans-serif;
}

.booking-search button,
.booking-request button {
  min-height: 72px;
  padding: 0 22px;
  border: 0;
  color: #fff;
  background: #173c35;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  cursor: pointer;
}

.booking-quote {
  margin-top: 24px;
  padding: 27px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 30px;
  align-items: center;
  border-left: 4px solid #a26d4b;
  background: #fff;
}

.booking-quote.available { border-left-color: #2b7c63; }
.booking-quote h3 { margin: 8px 0 5px; font: 29px Georgia, serif; font-weight: 400; }
.booking-quote p { margin: 0; color: #64746f; font-size: 10px; }
.booking-quote > strong { text-align: right; font: 29px Georgia, serif; font-weight: 400; }
.booking-quote > strong small { margin-top: 6px; display: block; color: #71817b; font: 8px Arial, sans-serif; }

.booking-breakdown { margin-top: 2px; background: #fff; }
.booking-breakdown summary { min-height: 62px; padding: 17px 24px; display: flex; align-items: center; gap: 16px; color: #173c35; font-size: 14px; font-weight: 700; cursor: pointer; list-style: none; }
.booking-breakdown summary::-webkit-details-marker { display: none; }
.booking-breakdown summary span { margin-left: auto; color: #64746f; font-size: 12px; font-weight: 400; }
.booking-breakdown summary::after { content: '+'; width: 25px; height: 25px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #cad8d1; border-radius: 50%; color: #173c35; font-size: 20px; font-weight: 400; line-height: 1; }
.booking-breakdown[open] summary::after { content: '−'; }
.booking-breakdown-grid { padding: 0 24px 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 12px; }
.booking-breakdown-day { padding: 17px 18px; border: 1px solid #e0e8e2; border-radius: 12px; background: #f7f9f6; }
.booking-breakdown-day header, .booking-breakdown-day footer, .booking-breakdown-day dl > div, .booking-breakdown > footer { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; }
.booking-breakdown-day header { padding-bottom: 12px; border-bottom: 1px solid #dfe6df; }
.booking-breakdown-day time { font-size: 15px; font-weight: 700; }
.booking-breakdown-day header span { color: #64746f; font-size: 12px; }
.booking-breakdown-day dl { margin: 13px 0; display: grid; gap: 9px; }
.booking-breakdown-day dt, .booking-breakdown-day dd { margin: 0; font-size: 12px; line-height: 1.4; }
.booking-breakdown-day dt { color: #596d63; }
.booking-breakdown-day dd { flex: 0 0 auto; font-weight: 600; white-space: nowrap; }
.booking-breakdown-day footer { padding-top: 11px; border-top: 1px solid #dfe6df; }
.booking-breakdown-day footer span { color: #596d63; font-size: 12px; }
.booking-breakdown-day footer strong { font-size: 15px; }
.booking-breakdown > footer { padding: 17px 24px 20px; border-top: 1px solid #e0e8e2; font-size: 14px; font-weight: 700; }
.booking-breakdown > footer strong { font-size: 20px; }
.booking-error { margin: 20px 0 0; padding: 14px 16px; color: #873f32; background: #f7e9e5; font-size: 10px; }
.booking-date-notice, .booking-room-notice { margin: 1px 0 0; padding: 13px 18px; color: #704f22; border-left: 3px solid #c7954f; background: #fbf4e7; font-size: 13px; line-height: 1.45; }

.booking-request { grid-template-columns: repeat(3, 1fr) auto; }
.booking-success { margin-top: 25px; padding: 25px; display: flex; gap: 18px; align-items: center; color: #fff; background: #24624f; }
.booking-success i { width: 46px; height: 46px; border: 1px solid #ffffff52; border-radius: 50%; display: grid; place-items: center; font-style: normal; }
.booking-success span { color: #dfc9a3; }
.booking-success h3 { margin: 6px 0 0; font: 23px Georgia, serif; font-weight: 400; }
.booking-success p { margin: 8px 0 0; color: #dbe8e3; font-size: 9px; line-height: 1.45; }
.booking-success .booking-receipt-summary { color: #fff; font-size: 10px; }
.booking-success .booking-receipt-summary strong { color: #dfc9a3; }

@media (max-width: 920px) {
  .booking-calendar > header { grid-template-columns: 1fr; gap: 20px; }
  .booking-search,
  .booking-request { grid-template-columns: 1fr 1fr; }
  .booking-search.room-booking-search { grid-template-columns: 1fr 1fr; }
  .booking-search button,
  .booking-request button { min-height: 60px; }
}

@media (max-width: 620px) {
  .booking-calendar { padding: 65px 14px; }
  .booking-calendar > header h2 { font-size: 43px; }
  .booking-search,
  .booking-request { grid-template-columns: 1fr; }
  .booking-search.room-booking-search { grid-template-columns: 1fr; }
  .booking-search label,
  .booking-request label { border-right: 0; border-bottom: 1px solid #d7dfdb; }
  .booking-quote { grid-template-columns: 1fr; }
  .booking-quote > strong { text-align: left; }
  .booking-breakdown summary { flex-wrap: wrap; padding: 17px; }
  .booking-breakdown summary span { display: none; }
  .booking-breakdown-grid { padding: 0 17px 17px; grid-template-columns: 1fr; }
  .booking-breakdown > footer { padding: 17px; }
}

/* 0.40 guided availability */
.availability-planner { margin-top: 2px; }
.availability-planner > header {
  margin-bottom: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.availability-planner > header span {
  color: #8d5e43;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.availability-planner > header p {
  margin: 0;
  color: #71817b;
  font-size: 9px;
  line-height: 1.45;
  text-align: right;
}
.availability-planner .availability-strip {
  grid-auto-columns: minmax(148px, 1fr);
  gap: 8px;
  padding: 0 0 12px;
  background: transparent;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
  scrollbar-color: #b8c4be transparent;
}
.availability-strip button {
  min-height: 164px;
  padding: 17px 16px 15px;
  border: 1px solid #d6ded9;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  color: #173c35;
  background: rgba(255,255,255,.9);
  text-align: left;
  scroll-snap-align: start;
  cursor: pointer;
  transition: color .22s ease, background .22s ease, border-color .22s ease, transform .22s ease, box-shadow .22s ease;
}
.availability-strip button::after {
  width: 22px;
  height: 22px;
  border: 1px solid #d6ded9;
  border-radius: 50%;
  position: absolute;
  top: 14px;
  right: 14px;
  display: grid;
  place-items: center;
  color: transparent;
  content: '✓';
  font-size: 9px;
}
.availability-strip button:hover:not(:disabled) {
  border-color: #aebdb6;
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(24, 59, 50, .1);
}
.availability-strip button small { color: #8b9a95; font-size: 8px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.availability-strip button strong { margin: 8px 0 17px; font: 24px/1 Georgia, serif; font-weight: 400; }
.availability-strip button span { font-size: 12px; font-weight: 800; }
.availability-strip button em { margin-top: 6px; color: #668279; font-size: 8px; font-style: normal; }
.availability-strip button b { margin-top: auto; padding-top: 13px; color: #a05d40; font-size: 7px; letter-spacing: .08em; text-transform: uppercase; }
.availability-strip button.last em { color: #a05d40; }
.availability-strip button.selected {
  border-color: #173c35;
  color: #fff;
  background: #173c35;
  box-shadow: 0 16px 34px rgba(24, 59, 50, .18);
}
.availability-strip button.selected::after { border-color: #d9c297; color: #173c35; background: #d9c297; }
.availability-strip button.selected small,
.availability-strip button.selected em { color: rgba(255,255,255,.62); }
.availability-strip button.selected b { color: #dfc59e; }
.availability-strip button.closed {
  border-color: #e0e4e1;
  color: #8b9692;
  background: #e7ebe8;
  cursor: not-allowed;
  opacity: .72;
}
.availability-strip button.closed::after { display: none; }
.availability-strip button.closed b { color: #8b9692; }

@media (max-width: 620px) {
  .availability-planner > header { align-items: flex-start; flex-direction: column; gap: 7px; }
  .availability-planner > header p { max-width: 310px; text-align: left; }
  .availability-planner .availability-strip { grid-auto-columns: minmax(142px, 42vw); margin-right: -14px; }
  .availability-strip button { min-height: 158px; }
}

@media (prefers-reduced-motion: reduce) {
  .availability-strip button { transition: none; }
}

.booking-search:has(.rate-plan-picker),
.booking-search.room-booking-search:has(.rate-plan-picker) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.booking-search:has(.rate-plan-picker) > button,
.booking-request:has(.rate-plan-picker) > button { grid-column: 1 / -1; min-height: 54px; }
.booking-search .rate-plan-picker select,
.booking-request .rate-plan-picker select { font-size: 13px; font-weight: 700; }
.booking-search .rate-plan-picker small,
.booking-request .rate-plan-picker small { font-size: 10px; }
.rate-plan-summary {
  margin: 12px 0 0;
  padding: 18px 22px;
  color: #173c35;
  background: #f1f5f0;
  border-left: 3px solid #b78a58;
}
.rate-plan-summary strong { font: 21px/1.2 Georgia, serif; }
.rate-plan-summary p { margin: 7px 0; font-size: 13px; line-height: 1.5; }
.rate-plan-summary div { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.rate-plan-summary div span { padding: 5px 8px; background: #fff; font-size: 11px; }
.rate-plan-summary small { display: block; margin-top: 10px; font-size: 11px; line-height: 1.5; }
.booking-calendar [hidden] { display: none !important; }
@media (max-width: 920px) {
  .booking-search:has(.rate-plan-picker),
  .booking-search.room-booking-search:has(.rate-plan-picker) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .booking-search:has(.rate-plan-picker),
  .booking-search.room-booking-search:has(.rate-plan-picker) { grid-template-columns: 1fr; }
}