/* ========================================================= DAMIAN PHILPOTT — STEP 1 RECESSED GLASS BUTTON V5 --------------------------------------------------------- Desktop Step 1 only. Makes NEXT STEP feel pressed/recessed into the footer: - deeper charcoal glass - inset inner shadow - darker upper edge / softer lower highlight - restrained depth rather than a floating button - keeps lighter typography, yellow hover, gold ready state and arrow movement ========================================================= */ @media screen and (min-width: 1001px) { /* Base geometry / typography stays the same, but remove the floating read and give the button an inset/recessed surface. */ 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 button.booknetic_btn_primary.booknetic_next_step.booknetic_next_step_btn { border-radius: 3px !important; font-weight: 400 !important; font-variation-settings: "wght" 400 !important; letter-spacing: .065em !important; transform: none !important; transition: background-color .18s ease, background-image .18s ease, border-color .18s ease, box-shadow .18s ease, color .18s ease !important; } /* DEFAULT — dark recessed smoked glass */ 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"] ):not(:has([data-step-id="staff"] .booknetic_card.booknetic_card_selected)) .booknetic_appointment_container_footer button.booknetic_btn_primary.booknetic_next_step.booknetic_next_step_btn { background-color: rgba(20,20,20,.84) !important; background-image: linear-gradient( 180deg, rgba(0,0,0,.18) 0%, rgba(255,255,255,.020) 46%, rgba(255,255,255,.050) 100% ) !important; border-top: 1px solid rgba(0,0,0,.48) !important; border-right: 1px solid rgba(255,255,255,.10) !important; border-bottom: 1px solid rgba(255,255,255,.16) !important; border-left: 1px solid rgba(0,0,0,.34) !important; color: rgba(255,255,255,.82) !important; -webkit-backdrop-filter: blur(14px) saturate(104%) !important; backdrop-filter: blur(14px) saturate(104%) !important; box-shadow: inset 0 3px 8px rgba(0,0,0,.46), inset 0 -1px 0 rgba(255,255,255,.07), 0 1px 0 rgba(255,255,255,.025) !important; } /* READY — recessed muted-gold glass, not a floating gold block */ 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"] ):has([data-step-id="staff"] .booknetic_card.booknetic_card_selected) .booknetic_appointment_container_footer button.booknetic_btn_primary.booknetic_next_step.booknetic_next_step_btn:not(:hover):not(:focus-visible) { background-color: rgba(201,169,75,.72) !important; background-image: linear-gradient( 180deg, rgba(87,67,15,.20) 0%, rgba(255,255,255,.030) 48%, rgba(255,255,255,.075) 100% ) !important; border-top-color: rgba(97,75,16,.52) !important; border-right-color: rgba(225,196,105,.46) !important; border-bottom-color: rgba(255,224,126,.64) !important; border-left-color: rgba(97,75,16,.42) !important; color: #0A0A0A !important; box-shadow: inset 0 3px 8px rgba(88,65,8,.26), inset 0 -1px 0 rgba(255,255,255,.18), 0 1px 0 rgba(255,215,0,.04) !important; } /* HOVER / FOCUS — still yellow, but keeps the inset language */ 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 button.booknetic_btn_primary.booknetic_next_step.booknetic_next_step_btn:hover, 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 button.booknetic_btn_primary.booknetic_next_step.booknetic_next_step_btn:focus-visible { background-color: #FFD700 !important; background-image: linear-gradient( 180deg, rgba(153,117,0,.12) 0%, rgba(255,255,255,.025) 46%, rgba(255,255,255,.10) 100% ) !important; border-top-color: rgba(120,92,0,.42) !important; border-right-color: rgba(255,225,98,.92) !important; border-bottom-color: rgba(255,235,151,.96) !important; border-left-color: rgba(120,92,0,.34) !important; color: #070707 !important; transform: none !important; box-shadow: inset 0 3px 7px rgba(126,95,0,.20), inset 0 -1px 0 rgba(255,255,255,.34), 0 1px 0 rgba(255,215,0,.08) !important; } /* PRESSED — deepen the inset just a touch on click */ 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 button.booknetic_btn_primary.booknetic_next_step.booknetic_next_step_btn:active { box-shadow: inset 0 5px 10px rgba(0,0,0,.30), inset 0 -1px 0 rgba(255,255,255,.16) !important; } /* Keep the existing arrow motion. */ 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 button.booknetic_btn_primary.booknetic_next_step.booknetic_next_step_btn:hover::after, 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 button.booknetic_btn_primary.booknetic_next_step.booknetic_next_step_btn:focus-visible::after { transform: translateX(5px) !important; } }