/* ========================================================= DAMIAN PHILPOTT — STEP 2 SEARCH POPOVER HARD FIX V3 --------------------------------------------------------- Desktop Step 2 only. Fixes the missing search control by directly overriding the stronger v1.0.116 display:none!important rule. CSS only: - native Booknetic search becomes a 36x36 header icon - click/focus expands it into a compact search field - no injected JavaScript required - native Booknetic filtering remains unchanged ========================================================= */ @media screen and (min-width: 1001px) { /* Let the native search escape upward into the header. */ html 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="service"] ) .booknetic_appointment_container_body, html 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="service"] ) [data-step-id="service"] { position: static !important; overflow: visible !important; } /* The booking shell is already positioned by the global footer module; reaffirm it as the popup positioning context. */ html 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="service"] ) .booknetic_appointment_container { position: relative !important; overflow: hidden !important; } /* Hide any abandoned injected controls from v1.0.116. */ html body:has(#booknetic_theme_8) .dp-service-search-trigger, html body:has(#booknetic_theme_8) .dp-service-search-close, html body:has(#booknetic_theme_8) .dp-service-search-backdrop { display: none !important; } /* ----------------------------------------------------- COLLAPSED SEARCH — exact higher-specificity override. This deliberately beats v1.0.116's display:none!important. ----------------------------------------------------- */ html 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="service"] ) [data-step-id="service"] .booknetic_service_search_wrapper { display: block !important; position: absolute !important; top: 16px !important; right: 20px !important; bottom: auto !important; left: auto !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; background: rgba(15,15,15,.92) !important; border: 1px solid rgba(255,255,255,.18) !important; border-radius: 3px !important; box-shadow: none !important; transform: none !important; overflow: hidden !important; box-sizing: border-box !important; z-index: 120 !important; transition: width .20s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important; } /* Search icon */ html 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="service"] ) [data-step-id="service"] .booknetic_service_search_wrapper::before { content: "" !important; position: absolute !important; left: 10px !important; top: 50% !important; width: 15px !important; height: 15px !important; transform: translateY(-50%) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 15px 15px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='%23FFD700' stroke-width='1.7'/%3E%3Cpath d='M15.5 15.5L21 21' fill='none' stroke='%23FFD700' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") !important; pointer-events: none !important; z-index: 3 !important; } /* Native input fills the collapsed icon button. */ html 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="service"] ) [data-step-id="service"] .booknetic_service_search_input { position: relative !important; display: block !important; width: 100% !important; height: 34px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; color: transparent !important; caret-color: transparent !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; box-sizing: border-box !important; z-index: 4 !important; } html 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="service"] ) [data-step-id="service"] .booknetic_service_search_input::placeholder { color: transparent !important; opacity: 0 !important; } /* ----------------------------------------------------- OPEN STATE — focus expands within the header. ----------------------------------------------------- */ html 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="service"] ) [data-step-id="service"] .booknetic_service_search_wrapper:focus-within { width: min(320px, calc(100% - 40px)) !important; background: rgba(8,8,8,.97) !important; border-color: rgba(255,215,0,.74) !important; box-shadow: 0 14px 32px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.025) !important; } html 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="service"] ) [data-step-id="service"] .booknetic_service_search_wrapper:focus-within .booknetic_service_search_input { padding: 0 14px 0 38px !important; color: #FFFFFF !important; caret-color: #FFFFFF !important; cursor: text !important; } html 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="service"] ) [data-step-id="service"] .booknetic_service_search_wrapper:focus-within .booknetic_service_search_input::placeholder { color: #777777 !important; opacity: 1 !important; } html 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="service"] ) [data-step-id="service"] .booknetic_service_search_wrapper:hover, html 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="service"] ) [data-step-id="service"] .booknetic_service_search_wrapper:focus-within { border-color: rgba(255,215,0,.74) !important; } /* Keep the reclaimed vertical space. */ html 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="service"] ) [data-step-id="service"] .booknetic_category_accordion:first-of-type { margin-top: 0 !important; } }