/* ========================================================================== 
   APD 156.0 — search scroll stability
   Loaded after Visual Master 155. It deliberately leaves marketplace data,
   reservations and form submission to the existing APD/Homey controllers.
   ========================================================================== */

/* `overflow-x:hidden` on both html and body turns body into a second vertical
   scroll container in Chromium. A sticky child then scrolls out of view. Clip
   prevents horizontal paint without creating that extra scroll container. */
html {
    overflow-x: clip !important;
}

html body.apd156-search-scroll-fix {
    overflow-x: clip !important;
    overflow-y: visible !important;
}

html.apd156-search-panel-open {
    scroll-behavior: auto !important;
    scrollbar-gutter: stable;
}

html body.apd156-search-scroll-fix #apd5-header.apd5-header {
    position: sticky !important;
    top: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* The historical 120 px margin was compensating for a header that was no
   longer sticky. Once the real scroll container is restored it creates the
   large blank band shown in the report. */
@media (min-width: 1180px) {
    html body.apd156-search-scroll-fix.apd141-header-compact main.apd5-main,
    html body.apd156-search-scroll-fix.apd141-header-compact main.apd29-video-home,
    html body.apd156-search-scroll-fix.apd141-header-compact main.apd40-home,
    html body.apd156-search-scroll-fix.apd141-header-compact main.apd51-home-reference,
    html body.apd156-search-scroll-fix.apd141-header-compact main.apd23-discovery-page {
        margin-top: 0 !important;
    }
}

/* Native wheel hand-off: the list scrolls while it has content and the page
   resumes naturally at either edge. JS closes the popover on that hand-off. */
html body.apd156-search-scroll-fix #apd5-search .apd5-search-panel {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior-x: contain !important;
    overscroll-behavior-y: auto !important;
    scrollbar-gutter: stable;
    scrollbar-width: thin;
    scrollbar-color: #b7b7b7 transparent;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
    animation: apd156-popover-in .14s ease-out both !important;
}

html body.apd156-search-scroll-fix #apd5-search .apd5-search-panel::-webkit-scrollbar {
    width: 8px;
}

html body.apd156-search-scroll-fix #apd5-search .apd5-search-panel::-webkit-scrollbar-thumb {
    border: 2px solid transparent;
    border-radius: 999px;
    background: #b7b7b7;
    background-clip: padding-box;
}

@keyframes apd156-popover-in {
    from { opacity: .72; }
    to { opacity: 1; }
}

/* The active destination editor is one two-line field, not the original text
   plus a second input on top of it. */
html body.apd156-search-scroll-fix #apd5-search .apd5-search-field[data-search-field="location"].is-open > .apd26-inline-editor {
    inset: 0 42px 0 0 !important;
    padding: 0 18px 0 24px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    justify-content: center !important;
    gap: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    overflow: hidden !important;
}

html body.apd156-search-scroll-fix #apd5-search .apd26-inline-editor > span {
    width: 100% !important;
    display: block !important;
    color: #222 !important;
    font-size: 12px !important;
    line-height: 15px !important;
    font-weight: 650 !important;
    white-space: nowrap !important;
}

html body.apd156-search-scroll-fix #apd5-search .apd26-inline-editor > input.apd26-search-inline-input {
    width: 100% !important;
    height: 20px !important;
    min-height: 20px !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    color: #3f3f3f !important;
    font-size: 13px !important;
    line-height: 18px !important;
}

/* Airbnb's desktop/tablet popovers keep their controls in the search bar;
   the extra sheet title, duplicate filter and mobile action footer are only
   useful in the bottom-sheet layout. */
@media (min-width: 768px) {
    html body.apd156-search-scroll-fix #apd5-search .apd5-search-panel {
        max-height: min(620px, calc(100dvh - 176px)) !important;
    }

    html body.apd156-search-scroll-fix #apd5-search .apd5-search-panel > .apd5-panel-title,
    html body.apd156-search-scroll-fix #apd5-search .apd5-location-panel > .apd5-panel-filter,
    html body.apd156-search-scroll-fix #apd5-search .apd5-date-panel > .apd5-panel-footer {
        display: none !important;
    }

    html body.apd156-search-scroll-fix #apd5-search .apd5-location-panel {
        padding: 20px 16px !important;
    }

    html body.apd156-search-scroll-fix #apd5-search .apd5-date-panel {
        padding: 28px 24px 30px !important;
    }

    html body.apd156-search-scroll-fix #apd5-search .apd5-guests-panel,
    html body.apd156-search-scroll-fix #apd5-search .apd5-service-panel {
        padding: 28px 32px !important;
    }

    html body.apd156-search-scroll-fix:is(.apd155-search-open, .apd15-search-popover-open) {
        position: static !important;
        overflow-y: visible !important;
    }
}

/* Mobile uses a true bottom sheet. Fixing body at the current offset avoids
   Safari/Chrome jumping to the top and JS restores the exact offset on close. */
@media (max-width: 767px) {
    html body.apd156-search-scroll-fix.apd156-mobile-search-lock {
        position: fixed !important;
        top: var(--apd156-scroll-lock-top, 0px) !important;
        right: 0 !important;
        left: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        overscroll-behavior: none !important;
    }

    html body.apd156-search-scroll-fix #apd5-search .apd5-search-panel {
        overscroll-behavior-y: contain !important;
        scrollbar-gutter: auto;
    }

    html body.apd156-search-scroll-fix #apd5-search .apd26-inline-editor > span {
        display: none !important;
    }

    html body.apd156-search-scroll-fix #apd5-search .apd26-inline-editor > input.apd26-search-inline-input {
        height: 32px !important;
        min-height: 32px !important;
        text-align: center !important;
    }
}