/* APD 227 — mobile Experiences parity: dates, travelers and empty results. */
@media (max-width: 767px) {
  /* EXPERIENCES — DATE CARD ------------------------------------------------ */
  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"][data-active-panel="dates"]
  > [data-search-panel="dates"] {
    max-height: min(61dvh, 570px) !important;
    padding: 22px 20px 14px !important;
    border-radius: 28px !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"][data-active-panel="dates"]
  .apd15-date-panel-heading {
    margin: 0 0 16px !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"][data-active-panel="dates"]
  .apd15-date-panel-heading strong {
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", Inter, sans-serif !important;
    font-size: 27px !important;
    line-height: 1.12 !important;
    font-weight: 650 !important;
    letter-spacing: -0.45px !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-single-date-layout {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-date-shortcuts {
    display: grid !important;
    grid-template-columns: .82fr 1.04fr 1.82fr !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
    margin: 0 0 22px !important;
    padding: 0 !important;
    overflow: visible !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-date-shortcuts button {
    width: 100% !important;
    min-width: 0 !important;
    height: 78px !important;
    min-height: 78px !important;
    margin: 0 !important;
    padding: 12px 14px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1.25px solid #d6d6d6 !important;
    border-radius: 16px !important;
    background: #fff !important;
    color: #222 !important;
    box-shadow: none !important;
    text-align: left !important;
    overflow: hidden !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-date-shortcuts button.is-selected,
  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-date-shortcuts button[aria-pressed="true"] {
    border-color: #222 !important;
    box-shadow: inset 0 0 0 1px #222 !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-date-shortcuts strong {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    overflow: hidden !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif !important;
    font-size: 15.5px !important;
    line-height: 1.18 !important;
    font-weight: 600 !important;
    letter-spacing: -0.1px !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-date-shortcuts small {
    display: block !important;
    width: 100% !important;
    margin: 0 !important;
    color: #6a6a6a !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif !important;
    font-size: 13.5px !important;
    line-height: 1.2 !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    white-space: nowrap !important;
  }

  /* Divider and month body match the supplied reference instead of the gray,
     merged quick-date pills that were visible in APD 226. */
  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-single-calendar {
    position: relative !important;
    width: calc(100% + 40px) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 -20px !important;
    padding: 17px 20px 0 !important;
    border-top: 1px solid #ededed !important;
    box-sizing: border-box !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-single-calendar .apd5-calendar-nav {
    display: none !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-single-calendar .apd5-calendar-month h3 {
    margin: 0 0 12px !important;
    padding: 0 1px !important;
    color: #222 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif !important;
    font-size: 20px !important;
    line-height: 1.25 !important;
    font-weight: 500 !important;
    letter-spacing: -0.25px !important;
    text-transform: none !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-single-calendar .apd5-calendar-weekdays {
    margin-bottom: 8px !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-single-calendar .apd5-calendar-weekdays > * {
    color: #717171 !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-single-calendar .apd5-calendar-days {
    row-gap: 7px !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd141-single-calendar .apd5-calendar-days button {
    height: 40px !important;
    min-height: 40px !important;
    max-height: 40px !important;
    line-height: 40px !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
  }

  /* Core calendar already paints start/end/in-range. Give weekend exactly the
     dark endpoints + light bridge shown in the reference. */
  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd5-calendar-days button.is-start,
  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd5-calendar-days button.is-end,
  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd5-calendar-days button.is-selected {
    background: #222 !important;
    color: #fff !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd5-calendar-days button.is-in-range {
    border-radius: 0 !important;
    background: #f2f2f2 !important;
    color: #222 !important;
  }

  /* EXPERIENCES — TRAVELERS --------------------------------------------- */
  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"]
  .apd5-guests-panel .apd5-guest-row[data-guest-row="pets"] {
    display: none !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd5-guests-panel {
    min-height: 292px !important;
    height: auto !important;
    padding-bottom: 20px !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd5-guests-panel .apd5-guest-row {
    min-height: 74px !important;
    height: 74px !important;
  }

  html body.apd227-mobile-experience-search.apd227-experience-mode.apd186-search-modal-open
  .apd186-search-portal #apd5-search[data-context="experiences"] .apd5-guests-panel .apd5-guest-row span {
    display: none !important;
  }

  /* FILTERED EXPERIENCES — NO EXACT MATCHES ----------------------------- */
  body.apd227-mobile-experience-search .apd23-experiences-page .apd31-empty-state.apd227-experience-empty {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: min(62vh, 520px) !important;
    margin: 0 !important;
    padding: 86px 24px 48px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    border: 0 !important;
    background: #fff !important;
    text-align: center !important;
  }

  body.apd227-mobile-experience-search .apd23-experiences-page .apd31-catalog-grid:has(.apd227-experience-empty) {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
  }

  body.apd227-mobile-experience-search .apd23-experiences-page .apd31-catalog-skeleton:has(+ .apd31-catalog-grid .apd227-experience-empty),
  body.apd227-mobile-experience-search .apd23-experiences-page .apd31-catalog-heading:has(+ .apd31-catalog-skeleton + .apd31-catalog-grid .apd227-experience-empty) {
    display: none !important;
  }

  body.apd227-mobile-experience-search .apd227-empty-collage {
    position: relative !important;
    width: 214px !important;
    height: 142px !important;
    margin: 0 auto 30px !important;
  }

  body.apd227-mobile-experience-search .apd227-empty-collage img {
    position: absolute !important;
    width: 112px !important;
    height: 112px !important;
    object-fit: cover !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.08) !important;
    background: #f2f2f2 !important;
  }

  body.apd227-mobile-experience-search .apd227-empty-collage img:nth-child(1) {
    top: 0 !important;
    left: 76px !important;
    transform: rotate(5deg) !important;
    z-index: 1 !important;
  }
  body.apd227-mobile-experience-search .apd227-empty-collage img:nth-child(2) {
    top: 42px !important;
    left: 8px !important;
    transform: rotate(-8deg) !important;
    z-index: 2 !important;
  }
  body.apd227-mobile-experience-search .apd227-empty-collage img:nth-child(3) {
    top: 52px !important;
    right: 0 !important;
    transform: rotate(4deg) !important;
    z-index: 3 !important;
  }

  body.apd227-mobile-experience-search .apd23-experiences-page .apd227-experience-empty h2 {
    max-width: 290px !important;
    margin: 0 0 12px !important;
    color: #222 !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", Inter, sans-serif !important;
    font-size: 25px !important;
    line-height: 1.08 !important;
    font-weight: 650 !important;
    letter-spacing: -0.55px !important;
  }

  body.apd227-mobile-experience-search .apd23-experiences-page .apd227-experience-empty p {
    max-width: 310px !important;
    margin: 0 !important;
    color: #6a6a6a !important;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, sans-serif !important;
    font-size: 17px !important;
    line-height: 1.34 !important;
    font-weight: 400 !important;
  }

  body.apd227-mobile-experience-search .apd23-experiences-page .apd227-experience-empty a {
    display: none !important;
  }
}