/* =========================================================
   DAMIAN PHILPOTT — STEP 2 SEARCH HEADER POSITION + CLOSE V4
   ---------------------------------------------------------
   Desktop Step 2 only.

   Refinement over v1.0.118:
   - moves the compact native search control up into the
     top-right of the SELECT SERVICE header area
   - expanded search opens leftwards from that position
   - adds styling for an explicit × close button
   - preserves native Booknetic search/filtering

   Global flat satin glass remains unchanged.
   ========================================================= */

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

    /* Move the native search control out of the first service row
       and visually into the right side of the Step 2 header. */
    html 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 {
        top: -54px !important;
        right: 18px !important;
        left: auto !important;
        bottom: auto !important;

        z-index: 220 !important;
    }

    /* Expanded search stays anchored at the same header position
       and grows leftwards so it does not cover the service cards. */
    html 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:focus-within,

    html 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-expanded {
        width: min(320px, calc(100% - 40px)) !important;
        padding-right: 34px !important;
    }

    /* Explicit close control, injected by JS. */
    html 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-native-service-search-close {
        display: none !important;

        position: absolute !important;
        top: 50% !important;
        right: 7px !important;
        transform: translateY(-50%) !important;

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

        align-items: center !important;
        justify-content: center !important;

        background: transparent !important;
        border: 0 !important;
        outline: none !important;

        color: rgba(255,255,255,.62) !important;

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

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

        transition: color .18s ease !important;
    }

    html 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_service_search_wrapper:focus-within
    .dp-native-service-search-close,

    html 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_service_search_wrapper.dp-service-search-expanded
    .dp-native-service-search-close {
        display: inline-flex !important;
    }

    html 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-native-service-search-close:hover,

    html 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-native-service-search-close:focus-visible {
        color: #FFD700 !important;
    }
}