/* ========================================================================== 
   APD 161.0 — anonymous entry and measured search-state parity
   ========================================================================== */

/* Defense in depth for cached guest HTML: personalized continuity can never be
   visible to an anonymous visitor. PHP also suppresses the data at source. */
html body.apd161-entry-search-parity.apd161-anonymous :is(
    .apd130-return,
    .apd130-recent,
    .apd130-journey,
    .apd130-compact-wrap,
    .apd131-trip-strip
) {
    display: none !important;
}

@media (min-width: 768px) {
    /* Closed reference state is white. Hover uses #ebebeb. Once a panel opens,
       the search shell becomes #ebebeb and only the active segment is raised
       white. This is the key visual difference visible in the supplied shots. */
    html body.apd161-entry-search-parity #apd5-search.apd5-search {
        background: #fff !important;
        border-color: #dddddd !important;
        box-shadow: 0 3px 12px rgba(0, 0, 0, .14) !important;
    }

    html body.apd161-entry-search-parity #apd5-search.has-open-panel,
    html body.apd161-entry-search-parity #apd5-search:has(.apd5-search-field.is-open) {
        background: #ebebeb !important;
    }

    html body.apd161-entry-search-parity #apd5-search .apd5-search-field > button:first-child {
        background: transparent !important;
        box-shadow: none !important;
        transition: background-color .16s ease, box-shadow .16s ease, transform .16s ease !important;
    }

    html body.apd161-entry-search-parity #apd5-search .apd5-search-field:not(.is-open) > button:first-child:hover,
    html body.apd161-entry-search-parity #apd5-search[data-hover-field="location"] [data-search-field="location"]:not(.is-open) > button:first-child,
    html body.apd161-entry-search-parity #apd5-search[data-hover-field="dates"] [data-search-field="dates"]:not(.is-open) > button:first-child,
    html body.apd161-entry-search-parity #apd5-search[data-hover-field="guests"] [data-search-field="guests"]:not(.is-open) > button:first-child,
    html body.apd161-entry-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.apd161-entry-search-parity #apd5-search .apd5-search-field.is-open > button:first-child,
    html body.apd161-entry-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;
    }

    /* Airbnb removes the divider touching the hovered/selected pill. */
    html body.apd161-entry-search-parity #apd5-search[data-hover-field="location"] .is-after-location,
    html body.apd161-entry-search-parity #apd5-search[data-hover-field="dates"] :is(.is-after-location, .is-after-dates),
    html body.apd161-entry-search-parity #apd5-search[data-hover-field="guests"] .is-after-dates,
    html body.apd161-entry-search-parity #apd5-search:has([data-search-field="location"].is-open) .is-after-location,
    html body.apd161-entry-search-parity #apd5-search:has([data-search-field="dates"].is-open) :is(.is-after-location, .is-after-dates),
    html body.apd161-entry-search-parity #apd5-search:has([data-search-field="guests"].is-open) .is-after-dates {
        opacity: 0 !important;
    }

    html body.apd161-entry-search-parity #apd5-search .apd5-search-separator {
        transition: opacity .12s ease !important;
    }

    /* Keep the action circle/pill optically centered in every state. */
    html body.apd161-entry-search-parity #apd5-search .apd5-search-submit,
    html body.apd161-entry-search-parity #apd5-search.has-open-panel .apd5-search-submit,
    html body.apd161-entry-search-parity #apd5-search:has(.apd5-search-field.is-open) .apd5-search-submit {
        top: 50% !important;
        right: 8px !important;
        margin: 0 !important;
        transform: translateY(-50%) !important;
    }

    html body.apd161-entry-search-parity #apd5-search.has-open-panel .apd5-search-submit,
    html body.apd161-entry-search-parity #apd5-search:has(.apd5-search-field.is-open) .apd5-search-submit {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 16px !important;
        gap: 7px !important;
    }

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

    /* The previous layer applied top + margin simultaneously, producing a
       ~22px gap. Reference panels sit about 12px beneath the search capsule. */
    html body.apd161-entry-search-parity #apd5-search .apd5-search-panel {
        margin-top: 0 !important;
    }

    /* Pet/service-animal helper has the same link-like underline as reference. */
    html body.apd161-entry-search-parity #apd5-search .apd5-guests-panel .apd5-guest-row[data-guest-row="pets"] > div:first-child span {
        text-decoration: underline !important;
        text-decoration-thickness: 1px !important;
        text-underline-offset: 2px !important;
    }
}

@media (min-width: 1180px) {
    html body.apd161-entry-search-parity #apd5-search .apd5-search-panel {
        top: calc(100% + 12px) !important;
    }

    /* Opening a field uses the full-size reference action even if another
       legacy header controller briefly reports compact during the transition. */
    html body.apd161-entry-search-parity #apd5-header:is(.is-compact, .is-detail-context) #apd5-search.has-open-panel .apd5-search-submit,
    html body.apd161-entry-search-parity #apd5-header:is(.is-compact, .is-detail-context) #apd5-search:has(.apd5-search-field.is-open) .apd5-search-submit {
        width: 96px !important;
        min-width: 96px !important;
        max-width: 96px !important;
        height: 48px !important;
        min-height: 48px !important;
        max-height: 48px !important;
        padding: 0 16px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html body.apd161-entry-search-parity #apd5-search * {
        transition-duration: .01ms !important;
    }
}