/* =========================================================
   DAMIAN PHILPOTT — STEP 1 REAL SMOKE RESET V9
   ---------------------------------------------------------
   Built from the last approved Step 1 card baseline (v1.0.80).

   IMPORTANT:
   - Does NOT alter staff-card geometry or vertical placement.
   - Does NOT alter the circular portrait geometry.
   - Does NOT alter shell width/height.
   - Pins only the native Step 1 footer to the bottom.
   - Uses deliberately high-specificity selectors to override the
     original legacy !important solid-black Booknetic paint.
   - One parent glass layer; header/body/footer are translucent
     overlays rather than stacked opaque panels.
   ========================================================= */

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

    /* High-specificity Step 1 scope. */
    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="staff"]
    ) .booknetic_appointment_container {
        position: relative !important;

        /* Actual smoked glass — deliberately translucent enough for
           the page artwork/smoke to remain visible behind the shell. */
        background-color: rgba(6, 6, 6, 0.46) !important;
        background-image:
            linear-gradient(135deg,
                rgba(255,255,255,0.035) 0%,
                rgba(255,255,255,0.010) 38%,
                rgba(0,0,0,0.080) 100%) !important;

        border: 1px solid rgba(255,255,255,0.13) !important;
        box-shadow: 0 20px 48px rgba(0,0,0,0.22) !important;
        -webkit-backdrop-filter: blur(18px) saturate(82%) brightness(86%) !important;
        backdrop-filter: blur(18px) saturate(82%) brightness(86%) !important;
        isolation: isolate !important;
    }

    /* A very subtle internal haze so the panel still reads as smoke
       even over the darkest part of the background artwork. */
    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="staff"]
    ) .booknetic_appointment_container::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        z-index: 0 !important;
        pointer-events: none !important;
        background:
            radial-gradient(55% 95% at 16% 28%,
                rgba(150,150,150,0.055) 0%,
                rgba(90,90,90,0.018) 42%,
                rgba(0,0,0,0) 72%),
            radial-gradient(70% 110% at 88% 72%,
                rgba(115,115,115,0.035) 0%,
                rgba(0,0,0,0) 68%) !important;
    }

    /* Beat the legacy solid-black header/body/footer rules. These are
       light overlays on the ONE glass parent, not separate black panes. */
    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="staff"]
    ) .booknetic_appointment_container_header {
        position: relative !important;
        z-index: 2 !important;
        background-color: rgba(5,5,5,0.12) !important;
        background-image: none !important;
        border-bottom: 1px solid rgba(255,255,255,0.10) !important;
        box-shadow: none !important;
        filter: none !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="staff"]
    ) .booknetic_appointment_container_body {
        position: relative !important;
        z-index: 1 !important;
        background-color: rgba(5,5,5,0.025) !important;
        background-image: none !important;
        box-shadow: none !important;
        filter: none !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="staff"]
    ) .booknetic_appointment_container_body .booknetic_need_copy,
    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="staff"]
    ) .booknetic_appointment_container_body [data-step-id="staff"] {
        background-color: transparent !important;
        background-image: none !important;
    }

    /* TRUE BOTTOM — native footer stays one unit: BACK / warning / NEXT. */
    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="staff"]
    ) .booknetic_appointment_container_footer {
        position: absolute !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 5 !important;
        width: 100% !important;
        margin: 0 !important;
        transform: none !important;
        box-sizing: border-box !important;

        background-color: rgba(5,5,5,0.18) !important;
        background-image: none !important;
        border-top: 1px solid rgba(255,255,255,0.10) !important;
        box-shadow: none !important;
        filter: none !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }

    /* Keep the native warning visually inside the same glass footer. */
    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="staff"]
    ) .booknetic_appointment_container_footer .booknetic_warning_message {
        background-color: rgba(10,10,10,0.36) !important;
        color: #D0D0D0 !important;
        border: 1px solid rgba(255,255,255,0.13) !important;
        box-shadow: none !important;
    }
}