/* ========================================================= DAMIAN PHILPOTT — STEP 1 FINAL POLISH V2 --------------------------------------------------------- DESKTOP VISUAL FINISH ONLY. Built on the approved v1.0.88 Step 1 layout. LOCKED / UNCHANGED: - shell width / height / right-shift position - true-bottom native footer mechanics - 220 x 220 stylist card dimensions - background image and scale - Step 7 compact layout - mobile - Booknetic JavaScript / booking behaviour REFINEMENTS: - softer shell edge + dividers - slightly richer central smoke haze - more presence inside same 220 x 220 card - quieter selected gold outline, stronger tick cue - wider NEXT STEP button - polished unselected / validation state - restrained hover states ========================================================= */ @media screen and (min-width: 1001px) { /* 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 { /* Let the glass, not the border, define the pane. */ border-color: rgba(255,255,255,.095) !important; box-shadow: 0 18px 44px rgba(0,0,0,.20), inset 0 1px 0 rgba(255,255,255,.018) !important; } /* Richer smoke through the centre without making the pane darker. */ 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 { background: radial-gradient(60% 78% at 48% 48%, rgba(150,150,150,.060) 0%, rgba(95,95,95,.028) 38%, rgba(0,0,0,0) 72%), radial-gradient(52% 95% at 14% 26%, rgba(145,145,145,.044) 0%, rgba(70,70,70,.014) 44%, rgba(0,0,0,0) 74%), radial-gradient(62% 105% at 88% 74%, rgba(105,105,105,.030) 0%, rgba(0,0,0,0) 70%) !important; } /* Quieter dividers — structure remains, but does not box the glass in. */ 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 { border-bottom-color: rgba(255,255,255,.072) !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 { border-top-color: rgba(255,255,255,.075) !important; } /* Same 220 x 220 card — only refine the content inside it. */ 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: rgba(5,5,5,.50) !important; border-color: rgba(255,255,255,.13) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.022), 0 9px 24px rgba(0,0,0,.12) !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_image { width: 76px !important; height: 76px !important; min-width: 76px !important; flex-basis: 76px !important; margin-bottom: 10px !important; border-color: rgba(255,255,255,.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_title_first { font-size: 15.5px !important; line-height: 19px !important; margin-bottom: 1px !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_staff_profession { margin-top: 3px !important; margin-bottom: 5px !important; letter-spacing: .78px !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_staff_profession::after { margin-top: 7px !important; color: #AAAAAA !important; line-height: 14px !important; } /* Selected state: quieter outline, tick remains the strongest gold cue. */ 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 { border-color: rgba(255,215,0,.72) !important; box-shadow: inset 0 0 0 1px rgba(255,215,0,.032), 0 10px 24px rgba(0,0,0,.14) !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::after { background: #FFD700 !important; box-shadow: 0 0 0 3px rgba(255,215,0,.035) !important; } /* Unselected card: clean neutral state with a little interaction feedback. */ 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:not(.booknetic_card_selected) { border-color: rgba(255,255,255,.13) !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:not(.booknetic_card_selected):hover { border-color: rgba(255,255,255,.27) !important; background: rgba(8,8,8,.56) !important; transform: translateY(-1px) !important; } /* Native validation message: quiet, informative, and aligned to the 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 { min-height: 36px !important; padding: 9px 13px 9px 34px !important; position: relative !important; background: rgba(10,10,10,.46) !important; border: 1px solid rgba(255,255,255,.12) !important; color: #CFCFCF !important; border-radius: 3px !important; font-size: 11px !important; line-height: 16px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.015) !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 .booknetic_warning_message::before { content: "!" !important; position: absolute !important; left: 12px !important; top: 50% !important; transform: translateY(-50%) !important; width: 14px !important; height: 14px !important; border: 1px solid rgba(255,255,255,.28) !important; border-radius: 50% !important; color: #D8D8D8 !important; font-size: 9px !important; font-weight: 700 !important; line-height: 12px !important; text-align: center !important; box-sizing: border-box !important; } /* Give the primary action slightly more visual authority, same height and 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_next_step_btn { min-width: 150px !important; padding-left: 20px !important; padding-right: 20px !important; box-shadow: 0 4px 12px rgba(0,0,0,.12) !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 .booknetic_next_step_btn:hover { box-shadow: 0 5px 16px rgba(0,0,0,.15), 0 0 16px rgba(255,215,0,.12) !important; } }