/* ========================================================= DAMIAN PHILPOTT — STEP 1 SOFT-INSET GLASS BUTTON V6 --------------------------------------------------------- Desktop Step 1 only. Inspired by the supplied soft/neumorphic button reference, adapted to the Damian Philpott dark glass system. STATES - Default: dark charcoal smoked-glass, softly moulded into footer - Hover: Damian yellow with tactile soft-edge depth - Ready/selected: refined muted gold - Active: visibly presses further into the surface - Arrow movement retained No shell, card, portrait, footer layout or booking-logic changes. ========================================================= */ @media screen and (min-width: 1001px) { /* ----------------------------------------------------- BASE — exact native Booknetic NEXT STEP button ----------------------------------------------------- */ 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 { position: relative !important; overflow: hidden !important; border-radius: 4px !important; border: 1px solid rgba(255,255,255,.11) !important; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important; font-weight: 350 !important; font-variation-settings: "wght" 350 !important; letter-spacing: .07em !important; text-shadow: none !important; -webkit-font-smoothing: antialiased !important; text-rendering: geometricPrecision !important; -webkit-backdrop-filter: blur(14px) saturate(105%) !important; backdrop-filter: blur(14px) saturate(105%) !important; transition: background-color .20s ease, background-image .20s ease, border-color .20s ease, box-shadow .20s ease, color .20s ease !important; } /* ----------------------------------------------------- DEFAULT — dark soft-inset charcoal glass. Multiple inset/highlight shadows recreate the supplied soft-button feel without making it silver/light. ----------------------------------------------------- */ 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(25,25,25,.76) !important; background-image: linear-gradient( to bottom, rgba(255,255,255,.080) 0%, rgba(255,255,255,.025) 24%, rgba(0,0,0,.040) 65%, rgba(0,0,0,.120) 100% ) !important; border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.82) !important; box-shadow: 0 1px 0 rgba(255,255,255,.035), 0 3px 8px rgba(0,0,0,.16), inset 0 1px 1px rgba(255,255,255,.10), inset 0 -2px 4px rgba(0,0,0,.36), inset 2px 0 3px rgba(255,255,255,.018), inset -2px 0 3px rgba(0,0,0,.12) !important; } /* ----------------------------------------------------- HOVER / FOCUS — yellow, but still soft and moulded. The button does not jump upward; only the arrow moves. ----------------------------------------------------- */ 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( to bottom, rgba(255,255,255,.28) 0%, rgba(255,255,255,.08) 28%, rgba(160,122,0,.06) 68%, rgba(102,78,0,.15) 100% ) !important; border-color: rgba(255,215,0,.94) !important; color: #080808 !important; box-shadow: 0 1px 0 rgba(255,239,158,.42), 0 4px 10px rgba(0,0,0,.13), inset 0 1px 2px rgba(255,255,255,.30), inset 0 -2px 4px rgba(104,78,0,.20), inset 2px 0 3px rgba(255,255,255,.06), inset -2px 0 3px rgba(117,89,0,.10) !important; transform: none !important; } /* ----------------------------------------------------- READY / SELECTED — muted gold soft-glass state. ----------------------------------------------------- */ 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,.76) !important; background-image: linear-gradient( to bottom, rgba(255,255,255,.16) 0%, rgba(255,255,255,.04) 28%, rgba(116,88,24,.06) 68%, rgba(76,57,14,.14) 100% ) !important; border-color: rgba(217,187,96,.76) !important; color: #090909 !important; box-shadow: 0 1px 0 rgba(255,233,161,.18), 0 3px 8px rgba(0,0,0,.13), inset 0 1px 2px rgba(255,255,255,.20), inset 0 -2px 4px rgba(79,58,10,.24), inset 2px 0 3px rgba(255,255,255,.035), inset -2px 0 3px rgba(77,57,12,.10) !important; } /* ----------------------------------------------------- ACTIVE — definite physical press. ----------------------------------------------------- */ 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 4px 8px rgba(0,0,0,.38), inset 0 -1px 1px rgba(255,255,255,.12), inset 2px 0 4px rgba(0,0,0,.12), inset -2px 0 4px rgba(0,0,0,.12) !important; transform: translateY(1px) !important; } /* ----------------------------------------------------- ARROW — retain the approved movement. ----------------------------------------------------- */ 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::after { color: currentColor !important; transition: transform .20s ease !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_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; } }