/* =========================================================
   DAMIAN PHILPOTT — BOOKING GLASS REFINEMENT V2
   ---------------------------------------------------------
   DESKTOP VISUAL REFINEMENT ONLY.

   Purpose:
   - Keep the original square Step 1 staff card and native
     Booknetic footer flow.
   - Improve the smoked-glass effect without changing shell
     dimensions, footer position, or Booknetic logic.
   - Keep the warning and action buttons in the native footer.

   No injected markup. No JavaScript. No shell height rules.
   ========================================================= */

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

    /* Main booking glass — more visible artwork, still dark/readable. */
    body:has(#booknetic_theme_8) #booknetic_theme_8 .booknetic_appointment_container {
        background-color: rgba(5, 5, 5, 0.68) !important;
        background-image: none !important;
        border: 1px solid rgba(255, 255, 255, 0.11) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,0.045),
            0 20px 46px rgba(0,0,0,0.24) !important;
        -webkit-backdrop-filter: blur(12px) saturate(104%) !important;
        backdrop-filter: blur(12px) saturate(104%) !important;
    }

    /* Let the background read through the shell instead of stacking
       multiple near-opaque black layers. */
    body:has(#booknetic_theme_8) #booknetic_theme_8 .booknetic_appointment_container_header {
        background: rgba(3, 3, 3, 0.26) !important;
        border-bottom-color: rgba(255,255,255,0.10) !important;
    }

    body:has(#booknetic_theme_8) #booknetic_theme_8 .booknetic_appointment_container_body {
        background: rgba(3, 3, 3, 0.08) !important;
    }

    body:has(#booknetic_theme_8) #booknetic_theme_8 .booknetic_appointment_container_footer {
        background: rgba(3, 3, 3, 0.42) !important;
        border-top: 1px solid rgba(255,255,255,0.10) !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: blur(10px) saturate(102%) !important;
        backdrop-filter: blur(10px) saturate(102%) !important;
    }

    /* STEP 1 — retain the original square staff-card geometry.
       Only refine the surface so it belongs to the same glass system. */
    #booknetic_theme_8:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"]
    ) [data-step-id="staff"] .booknetic_card {
        background: rgba(7,7,7,0.58) !important;
        border-color: rgba(255,255,255,0.13) !important;
        box-shadow: none !important;
        -webkit-backdrop-filter: blur(7px) saturate(102%) !important;
        backdrop-filter: blur(7px) saturate(102%) !important;
    }

    #booknetic_theme_8:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"]
    ) [data-step-id="staff"] .booknetic_card:hover {
        background: rgba(10,10,10,0.66) !important;
        border-color: rgba(255,255,255,0.28) !important;
    }

    #booknetic_theme_8:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"]
    ) [data-step-id="staff"] .booknetic_card.booknetic_card_selected {
        background: rgba(8,8,8,0.64) !important;
        border-color: #FFD700 !important;
        box-shadow: inset 0 0 0 1px rgba(255,215,0,0.05) !important;
    }

    /* Keep Booknetic's own warning node in the footer. Styling only;
       no absolute/fixed positioning and no footer geometry changes. */
    #booknetic_theme_8:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"]
    ) .booknetic_appointment_container_footer .booknetic_warning_message {
        align-self: center !important;
        background: rgba(10,10,10,0.62) !important;
        color: #C8C8C8 !important;
        border: 1px solid rgba(255,255,255,0.14) !important;
        box-shadow: none !important;
    }

    /* Small concept detail, without changing the button box itself. */
    #booknetic_theme_8:has(
        .booknetic_appointment_step_element.booknetic_active_step[data-step-id="staff"]
    ) .booknetic_next_step_btn::after {
        content: "→" !important;
        display: inline-block !important;
        margin-left: 9px !important;
        line-height: 1 !important;
    }
}