/* ========================================================= DAMIAN PHILPOTT — STEP 1 LUXURY POLISH V1 --------------------------------------------------------- LOW-RISK DESKTOP POLISH ONLY. LOCKED / UNCHANGED: - shell width and height - footer bottom mechanics from V1.0.87 - 220 x 220 square stylist card - page/background artwork and scale - Booknetic markup / JavaScript / booking behaviour - Steps 2–7 internal layouts - mobile POLISH: - modest desktop shell shift to the right - refined shell edge/corners - stronger Step 1 header hierarchy - larger circular portrait inside same square card - clearer selected state - refined warning/footer divider - stronger NEXT STEP button + restrained hover ========================================================= */ @media screen and (min-width: 1001px) { /* ----------------------------------------------------- GLOBAL DESKTOP SHELL POSITION Transform only: no width/height/layout-flow change. ----------------------------------------------------- */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container { transform: translateX(clamp(24px, 2.8vw, 52px)) !important; border-radius: 7px !important; border-color: rgba(255,255,255,0.16) !important; background-clip: padding-box !important; transition: border-color .20s ease, box-shadow .20s ease !important; } /* Keep the glass sections visually joined without changing geometry. */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_header { border-radius: 7px 7px 0 0 !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8.booknetic_appointment .booknetic_appointment_container_footer { border-radius: 0 0 7px 7px !important; } /* ----------------------------------------------------- STEP 1 ONLY ----------------------------------------------------- */ /* Header: same native node and dimensions, stronger hierarchy only. */ 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_text { color: #F4F4F4 !important; font-size: 16px !important; font-weight: 650 !important; line-height: 19px !important; letter-spacing: .55px !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_header_text::before { width: 31px !important; height: 31px !important; line-height: 31px !important; background: #FFD700 !important; border: 1px solid rgba(255,215,0,.82) !important; box-shadow: 0 0 0 4px rgba(255,215,0,.035) !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_header_text::after { color: #A4A4A4 !important; font-size: 10.5px !important; line-height: 14px !important; letter-spacing: .15px !important; margin-top: 3px !important; } /* Square card dimensions remain exactly 220 x 220. Surface polish only. */ 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 { border-radius: 3px !important; background: rgba(5,5,5,.56) !important; border: 1px solid rgba(255,255,255,.15) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.025), 0 8px 22px rgba(0,0,0,.12) !important; -webkit-backdrop-filter: blur(8px) saturate(96%) !important; backdrop-filter: blur(8px) saturate(96%) !important; transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease !important; } /* Slightly larger portrait, still fully circular, within same card. */ 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: 72px !important; height: 72px !important; min-width: 72px !important; flex: 0 0 72px !important; margin: 0 auto 9px !important; border-radius: 50% !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: 0 0 0 3px rgba(255,255,255,.018) !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 img, 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"] img.booknetic_card_staff_image { width: 100% !important; height: 100% !important; border-radius: 50% !important; object-fit: cover !important; display: block !important; } /* Typographic hierarchy inside the same square card. */ 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 { color: #FFD700 !important; font-size: 15px !important; font-weight: 650 !important; line-height: 18px !important; letter-spacing: -.08px !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 { color: #E8E8E8 !important; font-size: 9.5px !important; font-weight: 650 !important; line-height: 13px !important; letter-spacing: .9px !important; margin-top: 3px !important; margin-bottom: 4px !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 { color: #A2A2A2 !important; font-size: 10px !important; font-weight: 400 !important; line-height: 14px !important; margin-top: 8px !important; max-width: 180px !important; } /* Selected state: clear but restrained. */ 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: rgba(6,6,6,.61) !important; border-color: #FFD700 !important; box-shadow: inset 0 0 0 1px rgba(255,215,0,.055), 0 10px 26px rgba(0,0,0,.15) !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 { width: 20px !important; height: 20px !important; top: 10px !important; right: 10px !important; font-size: 11px !important; line-height: 20px !important; background: #FFD700 !important; color: #050505 !important; border-radius: 50% !important; box-shadow: 0 0 0 3px rgba(255,215,0,.045) !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: rgba(8,8,8,.63) !important; border-color: rgba(255,255,255,.28) !important; transform: translateY(-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_card.booknetic_card_selected:hover { border-color: #FFD700 !important; } /* Footer polish only — V1.0.87 still controls true-bottom positioning. */ 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,.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"] ) .booknetic_appointment_container_footer .booknetic_warning_message { min-height: 34px !important; padding: 8px 12px !important; border-radius: 2px !important; background: rgba(11,11,11,.50) !important; color: #C8C8C8 !important; border-color: rgba(255,255,255,.15) !important; font-size: 11px !important; line-height: 16px !important; } /* NEXT STEP: stronger presence, same native footer and booking action. */ 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: 132px !important; height: 38px !important; padding: 0 16px !important; background: #FFD700 !important; color: #050505 !important; border: 1px solid #FFD700 !important; border-radius: 1px !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .15px !important; box-shadow: none !important; transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s 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 .booknetic_next_step_btn:hover { background: #FFE033 !important; border-color: #FFE033 !important; box-shadow: 0 0 18px rgba(255,215,0,.14) !important; transform: translateY(-1px) !important; } }