/* =========================================================
   DAMIAN PHILPOTT — STEP 2 INTERNAL SERVICE SCROLL V2
   ---------------------------------------------------------
   Desktop Step 2 only.

   Correct behaviour:
   - SELECT SERVICE header remains fixed
   - BACK / NEXT footer remains fixed at the true bottom
   - service + package accordion content scrolls BETWEEN them
   - opening long service/package accordions no longer runs
     underneath the footer

   This deliberately replaces the v1.0.121 "grow the shell"
   approach with a dedicated internal scroll viewport.
   ========================================================= */

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

    /* -----------------------------------------------------
       STEP 2 SHELL
       Keep a stable viewport so the internal content has
       somewhere definite to scroll.
       ----------------------------------------------------- */
    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_appointment_container {
        position: relative !important;

        height: auto !important;
        min-height: 440px !important;
        max-height: none !important;

        padding-bottom: 62px !important;

        overflow: hidden !important;
        box-sizing: border-box !important;
    }

    /* -----------------------------------------------------
       BODY = SCROLL VIEWPORT
       Approx. the existing visible Step 2 body height.
       It stays between the header and footer.
       ----------------------------------------------------- */
    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_appointment_container_body {
        position: static !important;

        height: clamp(300px, 36vh, 350px) !important;
        min-height: 300px !important;
        max-height: 350px !important;

        padding:
            18px
            20px
            20px !important;

        overflow-y: auto !important;
        overflow-x: hidden !important;

        overscroll-behavior: contain !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;

        scrollbar-width: thin !important;
        scrollbar-color: rgba(255,255,255,.22) transparent !important;

        box-sizing: border-box !important;
    }

    /* WebKit scrollbar — deliberately quiet. */
    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_appointment_container_body::-webkit-scrollbar {
        width: 6px !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_appointment_container_body::-webkit-scrollbar-track {
        background: transparent !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_appointment_container_body::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.18) !important;
        border-radius: 6px !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_appointment_container_body::-webkit-scrollbar-thumb:hover {
        background: rgba(255,215,0,.62) !important;
    }

    /* -----------------------------------------------------
       SERVICE STEP CONTENT
       Let accordions be as tall as they need inside the
       scroll viewport.
       ----------------------------------------------------- */
    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"] {
        position: static !important;

        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;

        overflow: visible !important;

        padding-bottom: 12px !important;
        box-sizing: border-box !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"]
    ) [data-step-id="service"] .booknetic_category_accordion,

    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_card,

    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_package_card {
        max-height: none !important;
        overflow: visible !important;
    }

    /* -----------------------------------------------------
       SEARCH
       Preserve its header placement from v1.0.120.
       Because BODY is static, the absolute search remains
       positioned from the booking shell rather than scrolling
       away with the accordion content.
       ----------------------------------------------------- */
    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: -60px !important;
        right: 18px !important;
        z-index: 240 !important;
    }

    /* -----------------------------------------------------
       FOOTER
       Reaffirm the global true-bottom behaviour.
       ----------------------------------------------------- */
    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_appointment_container_footer {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;

        width: 100% !important;
        z-index: 250 !important;
    }
}