/* ========================================================= DAMIAN PHILPOTT — BOOKING SATIN GLASS V1 --------------------------------------------------------- Visual direction based on the approved satin-glass concept. GOAL - Replace the heavier smoked-glass read with a softer, more satin-translucent panel. - Make header / body / footer feel like one continuous surface with refined transitions rather than stacked bars. - Preserve current shell position, shell size, square card, footer mechanics, background scale, Booknetic logic. SCOPE - Desktop only. - Surface styling only. ========================================================= */ @media screen and (min-width: 1001px) { /* ----------------------------------------------------- GLOBAL SHELL — continuous satin-glass surface. ----------------------------------------------------- */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container { background-color: rgba(12, 12, 12, 0.30) !important; background-image: linear-gradient(180deg, rgba(255,255,255,0.030) 0%, rgba(255,255,255,0.010) 18%, rgba(255,255,255,0.000) 48%, rgba(0,0,0,0.030) 100%), linear-gradient(135deg, rgba(255,255,255,0.020) 0%, rgba(255,255,255,0.000) 34%, rgba(0,0,0,0.045) 100%) !important; border: 1px solid rgba(255,255,255,0.10) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.040), inset 0 -1px 0 rgba(255,255,255,0.014), 0 20px 54px rgba(0,0,0,0.20) !important; -webkit-backdrop-filter: blur(20px) saturate(108%) brightness(92%) !important; backdrop-filter: blur(20px) saturate(108%) brightness(92%) !important; overflow: hidden !important; isolation: isolate !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container::before { content: "" !important; position: absolute !important; inset: 0 !important; z-index: 0 !important; pointer-events: none !important; background: radial-gradient(58% 88% at 18% 26%, rgba(215,215,215,0.060) 0%, rgba(118,118,118,0.020) 40%, rgba(0,0,0,0.000) 72%), radial-gradient(52% 72% at 76% 68%, rgba(185,185,185,0.038) 0%, rgba(95,95,95,0.014) 40%, rgba(0,0,0,0.000) 70%), linear-gradient(180deg, rgba(255,255,255,0.018) 0%, rgba(255,255,255,0.000) 32%) !important; opacity: .95 !important; } /* Keep the shell as one surface: only extremely faint section shifts. */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_header, body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_body, body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_footer { position: relative !important; z-index: 2 !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 .booknetic_appointment_container_header { background: linear-gradient(180deg, rgba(18,18,18,0.11) 0%, rgba(18,18,18,0.08) 100%) !important; border-bottom: 1px solid rgba(255,255,255,0.055) !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_body { background: rgba(18,18,18,0.035) !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_footer { background: linear-gradient(180deg, rgba(18,18,18,0.045) 0%, rgba(18,18,18,0.10) 100%) !important; border-top: 1px solid rgba(255,255,255,0.050) !important; } /* ----------------------------------------------------- STEP 1 — keep the approved geometry; only refine surfaces. ----------------------------------------------------- */ 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"] ) [data-step-id="staff"] .booknetic_card { background: linear-gradient(180deg, rgba(10,10,10,0.52) 0%, rgba(9,9,9,0.46) 100%) !important; border-color: rgba(255,255,255,0.11) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.020), 0 10px 24px rgba(0,0,0,0.12) !important; -webkit-backdrop-filter: blur(8px) saturate(103%) !important; backdrop-filter: blur(8px) saturate(103%) !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"] ) [data-step-id="staff"] .booknetic_card:hover { background: linear-gradient(180deg, rgba(12,12,12,0.58) 0%, rgba(10,10,10,0.50) 100%) !important; border-color: rgba(255,255,255,0.18) !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"] ) [data-step-id="staff"] .booknetic_card.booknetic_card_selected { background: linear-gradient(180deg, rgba(12,12,12,0.58) 0%, rgba(10,10,10,0.50) 100%) !important; border-color: rgba(255,215,0,0.68) !important; box-shadow: inset 0 0 0 1px rgba(255,215,0,0.025), 0 10px 24px rgba(0,0,0,0.12) !important; } /* Footer message and action should belong to the same satin surface. */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_footer .booknetic_warning_message { background: rgba(11,11,11,0.32) !important; border: 1px solid rgba(255,255,255,0.10) !important; color: #D0D0D0 !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.015) !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_footer .booknetic_next_step_btn { box-shadow: 0 5px 14px rgba(0,0,0,0.10), 0 0 0 1px rgba(255,215,0,0.05) inset !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_footer .booknetic_next_step_btn:hover { box-shadow: 0 7px 18px rgba(0,0,0,0.12), 0 0 18px rgba(255,215,0,0.10) !important; } }