/* ========================================================================== 
   APD 160.0 — final search interaction and header-control parity
   ========================================================================== */

/* The original SVG is optically bottom/left weighted. Draw three equal rules
   from the actual center of the circle so guest and signed-in headers match. */
html body.apd160-search-parity #apd5-header :is(
    .apd5-account-button.is-guest,
    .apd25-menu-circle
) {
    position: relative !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
}

html body.apd160-search-parity #apd5-header :is(
    .apd5-account-button.is-guest,
    .apd25-menu-circle
) > .apd5-icon {
    visibility: hidden !important;
}

html body.apd160-search-parity #apd5-header :is(
    .apd5-account-button.is-guest,
    .apd25-menu-circle
)::after {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 13px !important;
    height: 1.5px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translate(-50%, -50%) !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #222 !important;
    box-shadow: 0 -4px 0 #222, 0 4px 0 #222 !important;
    pointer-events: none !important;
}

@media (min-width: 768px) {
    html body.apd160-search-parity #apd5-search.apd5-search {
        isolation: isolate !important;
    }

    html body.apd160-search-parity #apd5-search .apd5-search-field {
        z-index: 1 !important;
        min-width: 0 !important;
    }

    html body.apd160-search-parity #apd5-search .apd5-search-field.is-open {
        z-index: 30 !important;
    }

    /* Closed segments have Airbnb's soft gray hover. The selected/open
       segment remains the raised white pill with a restrained shadow. */
    html body.apd160-search-parity #apd5-search .apd5-search-field:not(.is-open) > button:first-child:hover,
    html body.apd160-search-parity #apd5-search[data-hover-field="location"] [data-search-field="location"]:not(.is-open) > button:first-child,
    html body.apd160-search-parity #apd5-search[data-hover-field="dates"] [data-search-field="dates"]:not(.is-open) > button:first-child,
    html body.apd160-search-parity #apd5-search[data-hover-field="guests"] [data-search-field="guests"]:not(.is-open) > button:first-child,
    html body.apd160-search-parity #apd5-search[data-hover-field="service"] [data-search-field="service"]:not(.is-open) > button:first-child {
        background: #ebebeb !important;
        box-shadow: none !important;
    }

    html body.apd160-search-parity #apd5-search .apd5-search-field.is-open > button:first-child,
    html body.apd160-search-parity #apd5-search .apd5-search-field.is-open > button:first-child:hover {
        background: #fff !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .16) !important;
    }

    /* Preserve the final control as its own stacking/grid item. In particular,
       the Viajeros panel can no longer expand over or hide Buscar. */
    html body.apd160-search-parity #apd5-search .apd5-search-submit,
    html body.apd160-search-parity #apd5-search.has-open-panel .apd5-search-submit,
    html body.apd160-search-parity #apd5-search:has(.apd5-search-field.is-open) .apd5-search-submit {
        position: absolute !important;
        top: 50% !important;
        right: 8px !important;
        z-index: 60 !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    html body.apd160-search-parity #apd5-search .apd5-search-submit:active {
        transform: translateY(-50%) scale(.96) !important;
    }

    html body.apd160-search-parity #apd5-search .apd5-search-panel {
        z-index: 40 !important;
    }

    /* Leave room for the persistent submit pill in the final segment without
       changing any value/summary semantics. */
    html body.apd160-search-parity #apd5-search [data-search-field="guests"] > button:first-child,
    html body.apd160-search-parity #apd5-search [data-search-field="service"] > button:first-child {
        padding-right: 78px !important;
    }

    html body.apd160-search-parity #apd5-search.has-open-panel [data-search-field="guests"] > button:first-child,
    html body.apd160-search-parity #apd5-search:has(.apd5-search-field.is-open) [data-search-field="guests"] > button:first-child,
    html body.apd160-search-parity #apd5-search.has-open-panel [data-search-field="service"] > button:first-child,
    html body.apd160-search-parity #apd5-search:has(.apd5-search-field.is-open) [data-search-field="service"] > button:first-child {
        padding-right: 110px !important;
    }

    html body.apd160-search-parity #apd5-search .apd15-flexible-months {
        overscroll-behavior-inline: contain !important;
        touch-action: pan-x pan-y !important;
    }
}

/* Desktop panels are anchored to their segment. Tablet already uses the
   viewport-centred, fixed modal geometry supplied by the responsive layer;
   keeping this breakpoint separate prevents a fixed panel from inheriting a
   percentage-based top offset and jumping below the viewport. */
@media (min-width: 1180px) {
    html body.apd160-search-parity #apd5-search .apd5-search-panel {
        top: calc(100% + 12px) !important;
    }

    html body.apd160-search-parity #apd5-search .apd5-guests-panel,
    html body.apd160-search-parity #apd5-search .apd5-service-panel {
        right: 0 !important;
        left: auto !important;
    }
}

@media (min-width: 768px) and (max-width: 1179px) {
    html body.apd160-search-parity #apd5-search .apd5-search-submit,
    html body.apd160-search-parity #apd5-search.has-open-panel .apd5-search-submit,
    html body.apd160-search-parity #apd5-search:has(.apd5-search-field.is-open) .apd5-search-submit {
        right: 6px !important;
    }
}

@media (max-width: 767px) {
    /* Mobile search uses the existing full-screen flow; only normalize the
       menu glyph and guarantee the real action remains operable. */
    html body.apd160-search-parity #apd5-search .apd5-search-submit {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.apd160-search-parity #apd5-search *,
    html body.apd160-search-parity #apd5-header * {
        scroll-behavior: auto !important;
    }
}