/* =========================================================
   DAMIAN PHILPOTT — STEP 2 SERVICE SEARCH POPOVER V1
   ---------------------------------------------------------
   Desktop Step 2 only.

   Replaces the always-visible full-width service search bar
   with a compact search control in the Step 2 header.

   - Native Booknetic search input is preserved.
   - Search wrapper becomes a floating popover when opened.
   - Service categories move upward to reclaim the old search row.
   - Click outside / close / Escape handled by companion JS.
   - Mobile is intentionally untouched.
   ========================================================= */

@media screen and (min-width: 1001px) {

    /* Header becomes the anchor for the compact search trigger. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .booknetic_appointment_container_header {
        position: relative !important;
    }

    /* Small header search button. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .dp-service-search-trigger {
        position: absolute !important;
        top: 50% !important;
        right: 20px !important;
        transform: translateY(-50%) !important;

        width: 36px !important;
        height: 36px !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: rgba(15,15,15,.90) !important;
        border: 1px solid rgba(255,255,255,.18) !important;
        border-radius: 3px !important;

        color: #FFD700 !important;
        box-shadow: none !important;
        outline: none !important;

        cursor: pointer !important;
        z-index: 8 !important;

        transition:
            background-color .18s ease,
            border-color .18s ease,
            color .18s ease !important;
    }

    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .dp-service-search-trigger:hover,
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .dp-service-search-trigger:focus-visible,
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .dp-service-search-trigger[aria-expanded="true"] {
        background: #FFD700 !important;
        border-color: #FFD700 !important;
        color: #080808 !important;
    }

    .dp-service-search-trigger svg {
        width: 15px !important;
        height: 15px !important;
        display: block !important;
    }

    /* Service content is the positioning context for the popup. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) [data-step-id="service"] {
        position: relative !important;
    }

    /* Remove the normal search row from document flow. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) [data-step-id="service"] .booknetic_service_search_wrapper {
        display: none !important;

        position: absolute !important;
        top: 14px !important;
        right: 20px !important;
        left: auto !important;

        width: min(360px, calc(100% - 40px)) !important;
        margin: 0 !important;
        padding: 16px 52px 16px 16px !important;

        background: rgba(10,10,10,.97) !important;
        border: 1px solid rgba(255,255,255,.16) !important;
        border-radius: 4px !important;

        box-shadow: 0 18px 42px rgba(0,0,0,.38) !important;

        -webkit-backdrop-filter: blur(16px) saturate(105%) !important;
        backdrop-filter: blur(16px) saturate(105%) !important;

        box-sizing: border-box !important;
        z-index: 82 !important;
    }

    /* Open state. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) [data-step-id="service"] .booknetic_service_search_wrapper.dp-service-search-open {
        display: block !important;
    }

    /* Search icon is built into the popup wrapper. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) [data-step-id="service"] .booknetic_service_search_wrapper::before {
        left: 29px !important;
        top: 50% !important;
        z-index: 84 !important;
    }

    /* Native input, slightly tighter inside popup. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) [data-step-id="service"] .booknetic_service_search_input {
        height: 42px !important;
        padding-left: 42px !important;
        padding-right: 12px !important;
        background: #050505 !important;
        border-color: rgba(255,255,255,.16) !important;
    }

    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) [data-step-id="service"] .booknetic_service_search_input:focus {
        border-color: #FFD700 !important;
        box-shadow: none !important;
    }

    /* Close button injected inside the native search wrapper. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .dp-service-search-close {
        position: absolute !important;
        top: 50% !important;
        right: 17px !important;
        transform: translateY(-50%) !important;

        width: 28px !important;
        height: 28px !important;
        padding: 0 !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
        border: 0 !important;
        color: rgba(255,255,255,.62) !important;

        font-family: Helvetica, Arial, sans-serif !important;
        font-size: 22px !important;
        font-weight: 300 !important;
        line-height: 1 !important;

        cursor: pointer !important;
        z-index: 85 !important;
    }

    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .dp-service-search-close:hover {
        color: #FFD700 !important;
    }

    /* Dim only the Step 2 content behind the popup. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .dp-service-search-backdrop {
        display: none !important;
        position: absolute !important;
        inset: 0 !important;

        background: rgba(0,0,0,.44) !important;

        -webkit-backdrop-filter: blur(2px) !important;
        backdrop-filter: blur(2px) !important;

        z-index: 78 !important;
        cursor: pointer !important;
    }

    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) .dp-service-search-backdrop.dp-service-search-open {
        display: block !important;
    }

    /* The old search row's 16px bottom margin is gone, so the first
       category begins immediately at the top of the content area. */
    body:has(#booknetic_theme_8)
    .wp-block-booknetic-booking
    #booknetic_theme_8.booknetic_appointment:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="service"]
    ) [data-step-id="service"] .booknetic_category_accordion:first-of-type {
        margin-top: 0 !important;
    }
}