/* ========================================================= DAMIAN PHILPOTT — STEP 2 NATIVE SEARCH POPOVER V2 --------------------------------------------------------- Desktop Step 2 only. CSS-ONLY FIX for v1.0.116. The Hub is clearly loading the CSS but the injected JS trigger did not appear. This version removes that dependency entirely. The native Booknetic search wrapper itself becomes: - a 36x36 search button while idle - an expanded dark search popover while focused No injected search trigger is required. Native Booknetic filtering remains untouched. ========================================================= */ @media screen and (min-width: 1001px) { /* Kill the v1.0.116 injected UI if its JS ever happens to run. */ body:has(#booknetic_theme_8) .dp-service-search-trigger, body:has(#booknetic_theme_8) .dp-service-search-close, body:has(#booknetic_theme_8) .dp-service-search-backdrop { display: none !important; } /* Step 2 remains the positioning reference. */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] { position: relative !important; } /* ----------------------------------------------------- COLLAPSED STATE Native wrapper becomes the actual search button. Positioned up into the Step 2 header area. ----------------------------------------------------- */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper { display: block !important; position: absolute !important; top: -55px !important; right: 20px !important; left: auto !important; bottom: auto !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; background: rgba(15,15,15,.94) !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: 90 !important; transition: width .20s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease !important; } /* Search symbol in collapsed and expanded states. */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [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: 4 !important; } /* ----------------------------------------------------- NATIVE INPUT — fills the small trigger while collapsed. Its text is visually hidden until focus expands it. ----------------------------------------------------- */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input { position: relative !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; font-size: 12px !important; box-shadow: none !important; outline: none !important; cursor: pointer !important; box-sizing: border-box !important; z-index: 3 !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_input::placeholder { color: transparent !important; opacity: 0 !important; } /* ----------------------------------------------------- OPEN / FOCUSED STATE Expands like a compact popup without consuming a row. ----------------------------------------------------- */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper:focus-within { width: min(330px, calc(100% - 40px)) !important; background: rgba(8,8,8,.98) !important; border-color: rgba(255,215,0,.70) !important; box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.025) !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper:focus-within .booknetic_service_search_input { height: 34px !important; padding: 0 14px 0 38px !important; color: #FFFFFF !important; caret-color: #FFFFFF !important; cursor: text !important; } body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper:focus-within .booknetic_service_search_input::placeholder { color: #777777 !important; opacity: 1 !important; } /* Yellow trigger treatment on hover/focus. */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper:hover, body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_search_wrapper:focus-within { border-color: rgba(255,215,0,.72) !important; } /* Categories keep the reclaimed vertical space. */ body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_service_categories, body:has(#booknetic_theme_8) .wp-block-booknetic-booking #booknetic_theme_8 [data-step-id="service"] .booknetic_category_accordion:first-of-type { margin-top: 0 !important; } }