#calendarSection { scroll-margin-top: 110px; }
#calendarSection button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
#calendarSection button:focus-visible { outline: 3px solid #227bb0; outline-offset: 2px; z-index: 1; }
.calendar-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.calendar-heading p { margin: 0; color: #627b89; font-size: 13px; line-height: 1.6; }
.calendar-navigation { display: flex; flex-shrink: 0; gap: 6px; }
.calendar-navigation button { display: grid; width: 38px; height: 38px; place-items: center; padding: 0 0 3px; border: 1px solid #dbe7eb; border-radius: 50%; background: #fff; color: #244f60; font-size: 27px; line-height: 1; cursor: pointer; }
.calendar-navigation button:hover:not(:disabled) { background: #edf7f5; border-color: #a8cdc3; }
.calendar-navigation button:disabled { opacity: .35; cursor: default; }
.calendar-selection { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 20px; margin: 22px 0 18px; padding: 15px 18px; border: 1px solid #dceae7; border-radius: 14px; background: #f6faf9; }
.calendar-selection > div { display: grid; flex: 1; min-width: 90px; gap: 3px; }
.calendar-selection span { font-size: 11px; color: #657f86; }
.calendar-selection strong { color: #224e54; font-size: 14px; font-weight: 600; }
#calendarNights { border-radius: 20px; padding: 5px 10px; color: #176952; background: #e0f0e9; font-size: 12px; white-space: nowrap; }
#calendarNights:empty { display: none; }
#clearCalendarDates, #retryCalendar { border: 0; border-radius: 5px; background: transparent; padding: 6px 0; color: #346c74; font-size: 12px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
#clearCalendarDates:disabled { opacity: .4; cursor: default; }
.calendar-months { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
.calendar-month { min-width: 0; padding: 16px 10px 10px; border: 1px solid #e0e9ed; border-radius: 16px; background: #fff; }
.calendar-month h3 { margin: 0 0 16px; text-align: center; text-transform: capitalize; font-size: 15px; font-weight: 650; color: #224958; }
.calendar-week, .calendar-row { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); }
.calendar-week span { padding: 0 0 10px; color: #71838d; font-size: 10px; text-align: center; }
.calendar-row { margin-bottom: 3px; }
.calendar-cell { min-width: 0; padding: 1px; }
#calendarSection .calendar-day { position: relative; display: grid; width: 100%; min-height: 40px; padding: 0; place-items: center; border: 1px solid transparent; border-radius: 9px; background: #f4f8fa; color: #315566; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: pan-y; }
#calendarSection .calendar-day:hover:not(:disabled) { background: #e4f1eb; border-color: #b1d5c8; }
#calendarSection .calendar-day[aria-current="date"]::after { position: absolute; bottom: 5px; width: 3px; height: 3px; border-radius: 50%; background: currentColor; content: ''; }
#calendarSection .calendar-day.is-occupied, #calendarSection .calendar-day.is-past { background: #f5f5f5; color: #a5afb5; text-decoration: line-through; cursor: not-allowed; }
#calendarSection .calendar-day.is-in-range { border-radius: 3px; background: #e0f1e9; color: #176952; }
#calendarSection .calendar-day.is-start, #calendarSection .calendar-day.is-end { background: #177d66; color: #fff; font-weight: 700; border-color: #177d66; }
#calendarSection .calendar-day.is-start:hover:not(:disabled), #calendarSection .calendar-day.is-end:hover:not(:disabled) { background: #116d58; border-color: #116d58; }
#calendarSection .calendar-day.is-start { touch-action: none; }
#calendarSection .calendar-day.is-checkout { background: linear-gradient(135deg,#e0f1e9 50%,#f1f3f3 50%); color: #36665b; text-decoration: none; cursor: pointer; border-color: #b7d4ca; }
#calendarSection .calendar-day.is-end.is-occupied { text-decoration: none; background: #177d66; color: #fff; }
#calendarSection .calendar-day.is-invalid-range { background: #fbe8e6; color: #a13c39; border-color: #edc4bf; }
#calendarSection .calendar-day:disabled:not(.is-occupied):not(.is-past):not(.is-end) { opacity: .45; cursor: wait; }
#calendarSection.is-dragging, #calendarSection.is-dragging .calendar-day { cursor: grabbing; }
.calendar-legend { display: flex; flex-wrap: wrap; gap: 10px 18px; margin-top: 17px; }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; color: #657a86; font-size: 11px; }
.calendar-legend i { display: inline-block; width: 10px; height: 10px; border: 1px solid #c9dbe4; border-radius: 3px; background: #f4f8fa; }
.calendar-legend i.occupied { background: linear-gradient(135deg,#eee 45%,#a5afb5 45%,#a5afb5 55%,#eee 55%); border-color: #d8dddf; }
.calendar-legend i.selected { background: #177d66; border-color: #177d66; }
.calendar-feedback { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 15px; margin-top: 10px; }
#calendarStatus { flex: 1 1 230px; min-height: 20px; margin: 0; color: #57746e; font-size: 12px; line-height: 1.65; }
#calendarStatus.is-error, .booking-card #detailAvailability.is-error { color: #a44840; }
.calendar-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#bookingStaySummary { margin: 8px 0 0; color: #17745f; font-size: 13px; font-weight: 600; }
#bookingStaySummary:empty { display: none; }
@media (min-width: 901px) and (max-width: 1120px) { .product-layout { gap: 30px; grid-template-columns: minmax(0,1fr) 330px; } }
@media (max-width: 650px) {
  .calendar-months { grid-template-columns: minmax(0,1fr); gap: 14px; }
  .calendar-month { padding: 16px 12px 10px; }
  .calendar-heading { gap: 10px; }
  #calendarSection h2 { font-size: 23px; }
  .calendar-heading p { font-size: 12px; }
  .calendar-selection { gap: 12px; padding: 14px; }
  .calendar-selection > div { flex-basis: calc(50% - 12px); }
  #clearCalendarDates { margin-left: auto; }
  #calendarSection .calendar-day { min-height: 42px; }
}
/* The reservation fields open this single calendar, including on touch devices. */
.booking-date-field { min-width: 0; padding: 12px; }
.booking-date-field:first-child { border-right: 1px solid #d5e2ea; }
.booking-fields .booking-date-field > label { display: block; padding: 0; margin: 0 0 5px; border: 0; }
.booking-date-field > [hidden] { display: none !important; }
.booking-date-trigger { display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-width: 0; min-height: 34px; padding: 3px 0; border: 0; border-radius: 5px; background: transparent; color: #244d60; cursor: pointer; text-align: left; }
.booking-fields .booking-date-value { color: #244d60; font: inherit; font-size: 13px; font-weight: 500; }
.booking-date-trigger svg { flex: 0 0 17px; width: 17px; height: 17px; color: #558377; }
.booking-date-field:has(.booking-date-trigger:hover), .booking-date-field:has(.booking-date-trigger[aria-expanded="true"]) { background: #f0f8f5; }
.booking-date-trigger:focus-visible { outline: 2px solid #227bb0; outline-offset: 3px; }
#stayDateDialog { position: fixed; inset: auto; margin: 0; width: min(752px,calc(100% - 24px)); max-width: none; height: fit-content; max-height: calc(100dvh - 24px); padding: 0; overflow: hidden; border: 1px solid #dce9e5; border-radius: 22px; color: #153449; background: #fff; box-shadow: 0 20px 70px #143e3b30; }
#stayDateDialog[open] { display: flex; flex-direction: column; }
#stayDateDialog::backdrop { background: #15344926; }
.stay-date-header { display: flex; flex-shrink: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 22px 0; }
#stayDateProduct { margin: 0; font-size: 12px; font-weight: 600; color: #59827b; }
#closeStayDates { display: grid; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; place-items: center; border: 1px solid #dae7e2; border-radius: 50%; color: #386659; background: #f7faf9; cursor: pointer; }
#closeStayDates svg { width: 17px; height: 17px; }
#closeStayDates:hover { background: #e8f3ee; }
#stayDateDialog #calendarSection { min-height: 0; margin: 0; padding: 12px 22px 18px; overflow-y: auto; overscroll-behavior: contain; border: 0; }
#stayDateDialog #calendarTitle { margin: 0 0 7px; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; }
#stayDateDialog .calendar-heading { align-items: center; }
#stayDateDialog .calendar-selection { margin: 16px 0; }
.calendar-date-summary { display: grid; flex: 1; min-width: 90px; min-height: 42px; gap: 3px; padding: 4px 0; border: 0; border-bottom: 2px solid transparent; border-radius: 3px; background: transparent; text-align: left; cursor: pointer; }
.calendar-date-summary.is-editing { border-bottom-color: #177d66; }
.calendar-date-summary:hover { background: #eaf5ef; }
.has-invalid-range #calendarNights { background: #fbe8e6; color: #a13c39; }
#calendarSection .calendar-day.is-invalid-range:hover:not(:disabled) { background: #fbe8e6; color: #a13c39; border-color: #edc4bf; }
.stay-date-footer { display: flex; flex-shrink: 0; justify-content: flex-end; padding: 14px 22px; border-top: 1px solid #e3ece8; background: #fff; }
#applyStayDates { min-height: 44px; padding: 11px 24px; border: 0; border-radius: 11px; background: #177d66; color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
#applyStayDates:hover:not(:disabled) { background: #116d58; }
#applyStayDates:disabled { background: #dfece7; color: #638276; cursor: default; }
#closeStayDates:focus-visible, #applyStayDates:focus-visible { outline: 3px solid #227bb0; outline-offset: 3px; }
@media (max-width: 650px) {
  #stayDateDialog { border-radius: 20px; }
  .stay-date-header { padding: 12px 16px 0; }
  #stayDateDialog #calendarSection { padding: 12px 16px 18px; }
  #stayDateDialog #calendarTitle { font-size: 22px; }
  #stayDateDialog .calendar-selection { gap: 10px; padding: 10px 12px; }
  .calendar-date-summary { flex-basis: calc(50% - 10px); }
  .stay-date-footer { padding: 12px 16px; }
  #applyStayDates { width: 100%; }
}