/**
 * APD 438 — Airbnb-style mobile exact-date calendar.
 * One fixed weekday rail (L M X J V S D) lives above the independently scrolling
 * month list. Month-owned weekday rows are hidden on mobile so the rail never
 * repeats or jumps while the traveller scrolls August → September → October…
 */
@media (max-width: 767px) {
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] .apd410-shared-calendar {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #fff !important;
  }

  /* The weekday legend never participates in the month scroll. */
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] .apd438-calendar-weekdays-fixed {
    position: relative !important;
    z-index: 30 !important;
    display: grid !important;
    grid-template-columns: repeat(7, minmax(0, 1fr)) !important;
    flex: 0 0 30px !important;
    width: 100% !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    box-shadow: 0 1px 0 rgba(0,0,0,0) !important;
  }

  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] .apd438-calendar-weekdays-fixed > span {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    color: #717171 !important;
    font-size: 14.5px !important;
    line-height: 1 !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
  }

  /* Retire the repeated weekday strip generated inside every month. */
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] .apd5-calendar-month > .apd5-calendar-weekdays {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* Sticky descendants and Safari scrolling are more reliable without paint containment. */
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] .apd5-calendar-month {
    contain: none !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 0 14px !important;
  }

  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] .apd5-calendar-month > h3 {
    order: 1 !important;
    margin: 10px 0 14px !important;
    padding: 0 !important;
    color: #222 !important;
    font-size: 20px !important;
    line-height: 1.2 !important;
    font-weight: 650 !important;
    letter-spacing: -.025em !important;
  }

  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] .apd5-calendar-month > h3::first-letter {
    text-transform: uppercase !important;
  }

  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] .apd5-calendar-month > .apd5-calendar-days {
    order: 2 !important;
  }

  /* Keep the card geometry identical while dedicating 30 px to the fixed rail. */
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-apd370-context="stays"][data-active-panel="dates"] #apd5-calendar-months {
    flex: 1 1 auto !important;
    height: 230px !important;
    min-height: 230px !important;
    max-height: 230px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-y: contain !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y !important;
    scrollbar-width: none !important;
    scroll-behavior: auto !important;
    background: #fff !important;
  }

  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-apd370-context="stays"][data-active-panel="dates"] #apd5-calendar-months::-webkit-scrollbar {
    display: none !important;
  }

  /* Exact-date view owns a fixed legend + the month scroller + tolerance rail. */
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-apd370-context="stays"][data-active-panel="dates"]
  .apd15-date-view[data-apd-date-view="exact"] {
    height: 318px !important;
    min-height: 318px !important;
    padding: 0 0 58px !important;
    overflow: hidden !important;
  }

  /* The same fixed weekday language is shared by Experiencias / Servicios. */
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search:is([data-apd370-context="experiences"],[data-apd370-context="services"])[data-active-panel="dates"]
  #apd5-calendar-months {
    height: 270px !important;
    min-height: 270px !important;
    max-height: 270px !important;
    overflow-y: auto !important;
  }

  /* APD502 — native iPhone calendar scrolling, single gesture owner.
     The previous APD495 fallback accidentally left touch-action:none in this
     canonical sheet. That cancels Safari's vertical pan before the later fix can
     reliably take ownership. Keep one native momentum scroller instead. */
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] #apd5-calendar-months {
    position: relative !important;
    z-index: 2 !important;
    display: block !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: none !important;
    overscroll-behavior-y: contain !important;
    touch-action: pan-y !important;
    scroll-behavior: auto !important;
    scroll-snap-type: none !important;
    overflow-anchor: none !important;
    pointer-events: auto !important;
  }

  /* Old global precision CSS hid the second generated month. The canonical
     calendar owns all 12 generated months on mobile, so every month must stay
     in normal document flow and contribute to scrollHeight. */
  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] #apd5-calendar-months > .apd5-calendar-month {
    display: block !important;
    width: 100% !important;
    touch-action: pan-y !important;
  }

  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] #apd5-calendar-months :is(.apd5-calendar-days,.apd5-calendar-days > span) {
    touch-action: pan-y !important;
  }

  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] #apd5-calendar-months .apd5-calendar-days > button {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.apd380-mobile-search-canonical.apd186-search-modal-open
  #apd5-search[data-active-panel="dates"] #apd5-calendar-months .apd5-calendar-days > button[disabled] {
    pointer-events: none !important;
  }

}