/*
 * APD 558 — final mobile touch feedback and flicker-free bottom navigation.
 * Higher specificity is intentional: the theme still ships historical APD214,
 * APD175/APD181 and APD480 rules, but only this class controls the final paint.
 */

@media (max-width: 767px) {
  /* Complete 3D category sprites: one compact request, no mismatched photos. */
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon {
    background-size: 900% 100% !important;
    background-position-y: center !important;
  }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-photo { background-position-x: 0% !important; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-chef { background-position-x: 12.5% !important; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-massage { background-position-x: 25% !important; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-fitness { background-position-x: 37.5% !important; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-meals { background-position-x: 50% !important; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-hair { background-position-x: 62.5% !important; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-makeup { background-position-x: 75% !important; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-spa { background-position-x: 87.5% !important; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd556-service-3d-icon.is-catering { background-position-x: 100% !important; }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-picker {
    width: 100%;
    margin: 0 0 24px;
    overflow: hidden;
  }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-picker-track {
    box-sizing: border-box;
    width: 100vw;
    padding: 0 20px 4px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-picker-track::-webkit-scrollbar { display: none; }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-picker a {
    flex: 0 0 104px;
    width: 104px;
    color: #222;
    text-decoration: none;
    scroll-snap-align: start;
  }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-picker-media {
    box-sizing: border-box;
    width: 104px;
    height: 78px;
    display: block;
    overflow: hidden;
    border: 1px solid #f0f0f0;
    border-radius: 14px;
    background: linear-gradient(145deg, #fbfbfb, #f4f4f4);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
  }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-3d-icon {
    width: 100%;
    height: 100%;
    display: block;
    background-repeat: no-repeat;
    background-size: 600% 100%;
    background-position-y: center;
  }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-3d-icon.is-pottery { background-position-x: 0%; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-3d-icon.is-kayak { background-position-x: 20%; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-3d-icon.is-cooking { background-position-x: 40%; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-3d-icon.is-camera { background-position-x: 60%; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-3d-icon.is-nature { background-position-x: 80%; }
  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-3d-icon.is-wellness { background-position-x: 100%; }

  html body#apd556-discovery-app.apd557-mobile-interaction .apd557-experience-picker strong {
    display: block;
    margin-top: 7px;
    overflow: hidden;
    color: #222;
    font-size: 13.5px;
    line-height: 1.16;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /*
   * Reference category pills: the inactive filters remain raised, while the
   * selected route stays physically depressed after the finger is released.
   */
  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction:not(.apd5-search-results-page):not(.apd186-search-modal-open):not(.apd5-search-open)
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] {
    height: 48px !important;
    min-height: 48px !important;
    padding-inline: 24px !important;
    gap: 10px !important;
    scroll-padding-inline: 24px !important;
    border: 0 !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a {
    height: 38px !important;
    min-height: 38px !important;
    padding-inline: 16px !important;
    gap: 8px !important;
    border-color: rgba(0, 0, 0, .10) !important;
    background: linear-gradient(180deg, #f8f8f8 0%, #fff 56%, #fff 100%) !important;
    box-shadow:
      inset 0 1px 2px rgba(0, 0, 0, .055),
      inset 0 -1px 0 rgba(255, 255, 255, .98),
      0 1px 1px rgba(0, 0, 0, .13),
      0 3px 4px rgba(0, 0, 0, .20),
      0 8px 16px rgba(0, 0, 0, .05) !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    transform-origin: 50% 52% !important;
    backface-visibility: hidden !important;
    will-change: transform, box-shadow !important;
    transition:
      transform 135ms cubic-bezier(.2, .82, .2, 1),
      border-color 150ms ease,
      background 150ms ease,
      box-shadow 160ms cubic-bezier(.2, .82, .2, 1) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a > strong {
    color: #222 !important;
    font-size: 16px !important;
    line-height: 20px !important;
    font-weight: 400 !important;
    letter-spacing: -.10px !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform 110ms cubic-bezier(.2, .82, .2, 1) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a > span {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 20px !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: translate3d(0, 0, 0) !important;
    transition: transform 110ms cubic-bezier(.2, .82, .2, 1) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a > span.is-all {
    --apd558-icon-glow: rgba(38, 120, 214, .34);
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a > span.is-stays {
    --apd558-icon-glow: rgba(24, 67, 159, .31);
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a > span.is-experiences {
    --apd558-icon-glow: rgba(230, 30, 77, .34);
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a > span.is-services {
    --apd558-icon-glow: rgba(21, 37, 54, .27);
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a > span > .apd15-nav-svg {
    width: 20px !important;
    height: 20px !important;
    transform: translate3d(0, 0, 0) !important;
    transform-origin: 50% 52% !important;
    opacity: .96 !important;
    filter: saturate(.94) brightness(.98) contrast(1) !important;
    transition: opacity 170ms ease, filter 180ms ease !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a:is(
    .is-active,
    [aria-current="page"],
    .is-apd555-pending
  ) {
    border-color: rgba(0, 0, 0, .09) !important;
    background: linear-gradient(180deg, #f3f3f3 0%, #fff 54%, #f8f8f8 100%) !important;
    box-shadow:
      inset 0 4px 8px rgba(0, 0, 0, .235),
      inset 3px 0 7px rgba(0, 0, 0, .07),
      inset -3px 0 7px rgba(0, 0, 0, .07),
      inset 0 -2px 3px rgba(255, 255, 255, .98),
      0 0 12px rgba(0, 0, 0, .09) !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a:is(
    .is-active,
    [aria-current="page"],
    .is-apd555-pending
  ) > strong {
    font-weight: 400 !important;
    transform: translate3d(0, 2px, 0) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a:is(
    .is-active,
    [aria-current="page"],
    .is-apd555-pending
  ) > span {
    transform: translate3d(0, 2px, 0) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a:is(
    .is-active,
    [aria-current="page"],
    .is-apd555-pending
  ) > span > .apd15-nav-svg {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter:
      saturate(1.12)
      brightness(1.16)
      contrast(1.02)
      drop-shadow(0 0 3px var(--apd558-icon-glow, rgba(0, 0, 0, .22))) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a:is(
    :active,
    .apd557-pressing
  ) {
    transform: translate3d(0, 0, 0) scale(1) !important;
    border-color: #cacaca !important;
    background: linear-gradient(180deg, #f0f0f0 0%, #fff 58%, #f7f7f7 100%) !important;
    box-shadow:
      inset 0 5px 9px rgba(0, 0, 0, .255),
      inset 3px 0 7px rgba(0, 0, 0, .075),
      inset -3px 0 7px rgba(0, 0, 0, .075),
      inset 0 -2px 3px rgba(255, 255, 255, .98),
      0 0 10px rgba(0, 0, 0, .08) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a:is(
    :active,
    .apd557-pressing
  ) > :is(span, strong) {
    transform: translate3d(0, 2px, 0) !important;
  }

  html body#apd556-discovery-app.apd556-discovery-fidelity.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a:is(
    :active,
    .apd557-pressing
  ) > span > .apd15-nav-svg {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    filter:
      saturate(1.12)
      brightness(1.16)
      contrast(1.02)
      drop-shadow(0 0 3px var(--apd558-icon-glow, rgba(0, 0, 0, .2))) !important;
  }

  /*
   * Neutralize every historical hide class at the paint layer. Their legacy
   * listeners can still compute harmlessly, but cannot fight APD558 and flash
   * the navigation back into view on iOS visualViewport scroll events.
   */
  html body#apd556-discovery-app.apd557-mobile-interaction:not(.apd557-bottom-nav-hidden):is(
    .apd480-nav-hidden,
    .apd175-bottom-nav-hidden,
    .apd181-bottom-nav-hidden,
    .apd182-bottom-nav-hidden
  ) :is(
    .apd10-mobile-nav,
    .apd267-mobile-nav,
    .apd264-mobile-nav,
    [data-apd267-nav]
  ) {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  html body#apd556-discovery-app.apd557-mobile-interaction :is(
    .apd10-mobile-nav,
    .apd267-mobile-nav,
    .apd264-mobile-nav,
    [data-apd267-nav]
  ) {
    transform: translate3d(0, 0, 0) !important;
    opacity: 1 !important;
    visibility: visible !important;
    backface-visibility: hidden !important;
    will-change: transform, opacity !important;
    transition:
      transform 280ms cubic-bezier(.22, 1, .36, 1),
      opacity 170ms ease,
      visibility 0s linear 0s !important;
  }

  html body#apd556-discovery-app.apd557-mobile-interaction.apd557-bottom-nav-hidden:not(
    .apd5-search-open
  ):not(.apd5-modal-open):not(.apd15-favorites-open):not(.apd17-auth-open) :is(
    .apd10-mobile-nav,
    .apd267-mobile-nav,
    .apd264-mobile-nav,
    [data-apd267-nav]
  ) {
    transform: translate3d(0, calc(100% + env(safe-area-inset-bottom, 0px) + 12px), 0) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transition:
      transform 280ms cubic-bezier(.22, 1, .36, 1),
      opacity 160ms ease,
      visibility 0s linear 280ms !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body#apd556-discovery-app.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a,
  html body#apd556-discovery-app.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] > a > :is(span, strong),
  html body#apd556-discovery-app.apd557-mobile-interaction
  #apd5-header.is-discovery-context .apd5-main-nav[data-apd-clean-navigation] .apd15-nav-svg,
  html body#apd556-discovery-app.apd557-mobile-interaction :is(
    .apd10-mobile-nav,
    .apd267-mobile-nav,
    .apd264-mobile-nav,
    [data-apd267-nav]
  ) {
    transition-duration: 1ms !important;
  }
}