/** * Dark Header/Navigation Styles * Premium dark theme matching the mockup design */ /* ========================================= Main Header/Navigation - Dark Theme (DESKTOP ONLY) ========================================= */ @media (min-width: 992px) { /* Header container - dark background */ .lp-header, .lp-main-header, .navbar, .navbar-default, header#header, header.lp-header-page, .header-inner, .header-main, .top-header, .lp-header-v2, .lp-header-v3 { background: #0D1B2A !important; background-color: #0D1B2A !important; border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; } /* Sticky header */ .header-scroll-up, .lp-header.affix, .navbar.affix { background: #0D1B2A !important; } /* ========================================= Logo Styling - Larger and Vertically Centered ========================================= */ .hh-custom-logo, .lp-logo img, .userimage img, .navbar-brand img, .logo-img, .site-logo img, header a img { height: 42px !important; max-height: 42px !important; width: auto !important; max-width: 220px !important; vertical-align: middle !important; } /* Logo container - vertical centering */ .lp-logo, .userimage, .navbar-brand, .site-logo { display: flex !important; align-items: center !important; height: 100% !important; } /* ========================================= Navigation Links - White Text ========================================= */ .lp-header a, .navbar a, .navbar-nav>li>a, .menu-item a, header .nav-link, .lp-header-nav a { color: #ffffff !important; font-weight: 500; transition: color 0.2s ease; } .lp-header a:hover, .navbar a:hover, .navbar-nav>li>a:hover, .menu-item a:hover { color: #FF6B00 !important; text-decoration: none; } } /* ========================================= Search Bar - Consistent Styling for All Pages ========================================= */ /* Search container - all variations */ /* .lp-search-bar, .search-form-wrap, .header-search, .lp-listings-search, .search-form, .lp-header-search-form, .lp-search-form, .header-search-form, .lp-search-form-inner, .lp-header-search, .listing-search-form, .inner-header-search, form.lp-search-form { background: rgba(255, 255, 255, 0.08) !important; border-radius: 8px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } */ /* ALL search inputs - unified styling */ /* .lp-search-bar input, .search-form-wrap input, .lp-listings-search input, .header-search input, .lp-search-form input, .lp-header-search input, .listing-search-form input, .lp-search-form input[type="text"], .lp-search-form input[type="search"], input.lp-search-what, input.lp-search-where, #search_what, #search_where, #lpWhatsearch, #lpWheresearch, .lp-what-search, .lp-where-search, .what-search-field, .where-search-field, .lp-search-form .form-control, header input[type="text"], header input[type="search"] { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; border-radius: 6px !important; padding: 10px 14px !important; } */ /* .lp-search-bar input::placeholder, .header-search input::placeholder, .lp-search-form input::placeholder, input.lp-search-what::placeholder, input.lp-search-where::placeholder, #search_what::placeholder, #search_where::placeholder, #lpWhatsearch::placeholder, #lpWheresearch::placeholder, header input::placeholder { color: rgba(255, 255, 255, 0.5) !important; } .lp-search-form input:focus, .header-search input:focus, header input:focus { background: rgba(255, 255, 255, 0.15) !important; border-color: #FF6B00 !important; outline: none !important; box-shadow: 0 0 0 3px rgba(255, 107, 0, 0.2) !important; } */ /* .search-element-what, .search-element-where, .lp-search-element, .search-element, .lp-search-form .form-group, .lp-search-form .form-control-wrap, .lp-header-search .form-group, header .form-group, header .lp-search-form .form-group, .lp-search-form>div, .lp-search-what-wrap, .lp-search-where-wrap, .lp-search-wrap, .header-inner-page-wrap .form-group, .lp-search-form .lp-border-right, .lp-search-form .lp-border-left, .lp-listings-search .form-group, .inner-header-search .form-group { background: transparent !important; background-color: transparent !important; border: none !important; } .form-group:has(input.lp-search-input), .form-group:has(#lpWhatsearch), .form-group:has(#lpWheresearch) { background: transparent !important; } .lp-search-form *, .lp-header-search * { background-color: inherit; } .lp-search-form, .lp-header-search { background: rgba(255, 255, 255, 0.05) !important; } .lp-search-input, input.lp-search-input { background: rgba(255, 255, 255, 0.1) !important; color: #fff !important; } .chosen-container, .chosen-single, .chosen-container-single .chosen-single, .lp-search-form .chosen-container { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 6px !important; color: #fff !important; } .chosen-container-single .chosen-single span { color: rgba(255, 255, 255, 0.7) !important; } .chosen-container-single .chosen-single div b { filter: invert(1) !important; } .lp-search-form .fa, .lp-search-form i, header .lp-search-form i { color: rgba(255, 255, 255, 0.6) !important; } .ui-autocomplete, .lp-search-dropdown, .pac-container { background: #1A2B3C !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; } .ui-autocomplete li, .lp-search-dropdown li { color: #fff !important; } .ui-autocomplete li:hover, .lp-search-dropdown li:hover { background: rgba(255, 107, 0, 0.2) !important; } /* .lp-search-bar button, .lp-search-bar .search-btn, .header-search button, .lp-search-form button, .lp-search-form .search-submit, .search-form button[type="submit"] { background: #2458ff !important; color: #fff !important; border: none !important; border-radius: 6px !important; padding: 8px 16px !important; transition: all 0.2s ease !important; } .lp-search-bar button:hover, .lp-search-form button:hover { background: #1a45cc !important; transform: translateY(-1px) !important; } */ */ /* ========================================= Action Buttons - Brand Accent Color ========================================= */ /* Add Listing button - no outer border, just text and icon */ .lp-header .btn-add-listing, .lp-header .add-listing-btn, .lp-header .lp-add-listing-btn, header .add-listing, .navbar .btn-add-listing, .lp-header-v2 .add-listing-btn, a.lp-add-listing-btn, .lp-header a.lp-add-listing-btn, .header-list-icon-st6, a.header-list-icon-st6, div.lp-add-listing-btn { background: transparent !important; background-image: none !important; color: #fff !important; border: none !important; border-radius: 0 !important; padding: 10px 15px !important; font-weight: 600 !important; text-transform: none !important; box-shadow: none !important; transition: all 0.2s ease !important; } .lp-header .btn-add-listing:hover, .lp-header .add-listing-btn:hover, a.lp-add-listing-btn:hover, .header-list-icon-st6:hover, a.header-list-icon-st6:hover { background: transparent !important; background-image: none !important; transform: translateY(-1px) !important; box-shadow: none !important; opacity: 0.85 !important; } /* Add Listing icon - orange filled circle */ .header-list-icon-st6 i, .header-list-icon-st6 .fa, .header-list-icon-st6 .fa-plus-circle, a.header-list-icon-st6 i { color: #FF6B00 !important; font-size: 18px !important; margin-right: 6px !important; } /* Override parent theme's classic-header.css border */ .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6, .header-inner-page-wrap .lp-header-style-classic .header-list-icon-st6, body .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6, body.single-listing .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6, .lp-header-style-classic a.header-list-icon-st6 { background: transparent !important; background-image: none !important; border: none !important; border-width: 0 !important; border-style: none !important; border-color: transparent !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; } /* Sign In button - outlined style */ .lp-header .btn-login, .lp-header .sign-in-btn, .lp-header .login-btn, header .sign-in, .navbar .btn-login, .lp-button-login { background: transparent !important; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.3) !important; border-radius: 25px !important; padding: 8px 20px !important; font-weight: 500 !important; transition: all 0.2s ease !important; } .lp-header .btn-login:hover, .lp-header .sign-in-btn:hover, .lp-header .login-btn:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: #fff !important; } /* ========================================= Search Labels (What, Where) ========================================= */ /* .lp-search-bar label, .search-form-wrap label, .lp-search-form label, .header-search label { color: rgba(255, 255, 255, 0.7) !important; font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } */ /* ========================================= Dropdown Menus - Dark Theme ========================================= */ .dropdown-menu, .lp-header .dropdown-menu, .sub-menu { background: #1A2B3C !important; border: 1px solid rgba(255, 255, 255, 0.1) !important; border-radius: 8px !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important; } .dropdown-menu a, .dropdown-menu li a, .sub-menu a { color: rgba(255, 255, 255, 0.8) !important; padding: 10px 16px !important; transition: all 0.15s ease !important; } .dropdown-menu a:hover, .dropdown-menu li a:hover, .sub-menu a:hover { background: rgba(255, 107, 0, 0.15) !important; color: #FF6B00 !important; } /* ========================================= Mobile Menu Toggle ========================================= */ .navbar-toggle, .menu-toggle, .hamburger-menu { border-color: rgba(255, 255, 255, 0.3) !important; } .navbar-toggle .icon-bar, .hamburger-menu span { background-color: #fff !important; } /* ========================================= Location/Autocomplete Icons ========================================= */ /* .lp-search-bar i, .lp-search-form i, .header-search i { color: rgba(255, 255, 255, 0.5) !important; } */ /* ========================================= Fix for parent theme overrides ========================================= */ /* Ensure text is readable */ .lp-header *, .navbar * { text-shadow: none !important; } /* Remove any conflicting backgrounds */ .lp-header .container, .lp-header .container-fluid, .lp-header .row { background: transparent !important; } /* Sticky header adjustments */ @media (min-width: 992px) { .lp-header.affix .hh-custom-logo { height: 32px; } } /* Inner page headers */ .header-inner-page-wrap { background: #0D1B2A !important; } /* ========================================= FIX: Search Bar Layout Issues ========================================= */ /* Hide overlapping labels (What, Where) - they overlap placeholder text */ /* Exact selectors from DOM inspection */ /* .input-group-addon, .input-group-addon.lp-border, .input-group-addon.lp-border.lp-where, .lp-suggested-search .input-group-addon, .lp-location-search .input-group-addon, .lp-search-bar .input-group-addon, .lp-search-form label, .lp-search-form .form-group label, header label.visible-xs, .lp-search-form .control-label, .search-what-label, .search-where-label { display: none !important; visibility: hidden !important; opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; left: -9999px !important; } */ /* Fix search bar container layout - no gaps */ /* .lp-search-form { display: flex !important; align-items: stretch !important; gap: 0 !important; padding: 0 !important; margin: 0 !important; border-radius: 8px !important; overflow: hidden !important; } .lp-search-form .form-group, .lp-search-form>div { margin: 0 !important; padding: 0 !important; border: none !important; } .lp-search-form input.lp-search-input, .lp-search-form #lpWhatsearch, .lp-search-form .lp-search-what { border-radius: 8px 0 0 8px !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; margin: 0 !important; height: 44px !important; min-width: 180px !important; } .lp-search-form .chosen-container, .lp-search-form .chosen-single { border-radius: 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; border-left: none !important; margin: 0 !important; height: 44px !important; min-width: 140px !important; display: flex !important; align-items: center !important; } .lp-search-form button, .lp-search-form .lp-search-btn, button.lp-search-btn { border-radius: 0 8px 8px 0 !important; margin: 0 !important; padding: 12px 16px !important; height: 44px !important; min-width: 44px !important; background: #2458ff !important; border: none !important; display: flex !important; align-items: center !important; justify-content: center !important; } .lp-search-form .lp-border-right, .lp-search-form .lp-border-left, .lp-search-form .separator { display: none !important; width: 0 !important; } */ /* ========================================= FIX: Consistent Button Styling Across Pages ========================================= */ /* Add Listing button - no outer border, orange icon */ .header-list-icon-st6, a.header-list-icon-st6, .lp-add-listing-btn, a.lp-add-listing-btn, header .header-list-icon-st6, .lp-header .header-list-icon-st6, .lp-header-style-classic .header-list-icon-st6, .lp-header-style-classic a.header-list-icon-st6, body .lp-header-style-classic .header-list-icon-st6 { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 6px !important; /* Space between + icon and text */ height: 40px !important; padding: 0 15px !important; font-size: 14px !important; font-weight: 600 !important; white-space: nowrap !important; min-width: auto !important; background: transparent !important; color: #fff !important; border: none !important; border-radius: 0 !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; } .header-list-icon-st6:hover, a.header-list-icon-st6:hover { background: transparent !important; transform: translateY(-1px) !important; box-shadow: none !important; opacity: 0.85 !important; } /* Add Listing icon - orange filled circle */ .header-list-icon-st6 i, .header-list-icon-st6 .fa, .header-list-icon-st6 .fa-plus-circle, .header-list-icon-st6 svg, a.header-list-icon-st6 i { color: #FF6B00 !important; font-size: 18px !important; margin: 0 !important; } /* Sign In button - consistent size, matching height */ .sign-btn, .lp-button-login, a.sign-btn, header .sign-in-btn, .lpl-button.md-trigger, a.lpl-button.md-trigger, .md-trigger, header .md-trigger, .lp-header .md-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 40px !important; padding: 0 24px !important; font-size: 14px !important; font-weight: 500 !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 25px !important; color: #fff !important; white-space: nowrap !important; outline: none !important; box-shadow: none !important; text-decoration: none !important; } .sign-btn:hover, .lp-button-login:hover, a.sign-btn:hover, .lpl-button.md-trigger:hover, .md-trigger:hover { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.6) !important; } /* Sign In icon styling */ .lpl-button i, .md-trigger i, .sign-btn i { font-size: 14px !important; margin: 0 !important; color: #fff !important; } /* Header buttons container alignment */ .header-action-buttons, .header-icons, .lp-header-right { display: flex !important; align-items: center !important; gap: 12px !important; } /* ========================================= FIX: Homepage Header - Show search bar if exists ========================================= */ /* Ensure header elements are visible on all pages */ .lp-search-form { visibility: visible !important; opacity: 1 !important; } /* Header row alignment */ header .container, header .container-fluid { display: flex !important; align-items: center !important; justify-content: space-between !important; } /* ========================================= FIX: Select dropdown styling (What field on some pages) ========================================= */ /* .lp-search-form select, .lp-search-form .form-control, #select { background: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; color: #fff !important; border-radius: 8px 0 0 8px !important; height: 44px !important; padding: 0 12px !important; appearance: none !important; -webkit-appearance: none !important; } .lp-search-form select+.select-arrow, .lp-search-form .select-wrapper::after { color: rgba(255, 255, 255, 0.6) !important; } */ /* ========================================= FIX: lp-search-bar Container Layout (Exact from DOM) ========================================= */ /* Main search bar container */ /* .lp-search-bar, .lp-search-bar-header { display: flex !important; align-items: stretch !important; background: rgba(255, 255, 255, 0.05) !important; border-radius: 8px !important; overflow: hidden !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; } .lp-search-bar .form-inline, .lp-search-bar form { display: flex !important; align-items: stretch !important; flex: 1 !important; margin: 0 !important; padding: 0 !important; } .lp-suggested-search { flex: 1 !important; display: flex !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; } .lp-suggested-search .pos-relative, .lp-suggested-search .what-placeholder { flex: 1 !important; display: flex !important; } .lp-suggested-search input.lp-search-input, .lp-suggested-search input#select { flex: 1 !important; height: 44px !important; padding: 0 12px !important; background: transparent !important; border: none !important; color: #fff !important; border-radius: 0 !important; } .lp-location-search { flex: 0 0 auto !important; display: flex !important; align-items: stretch !important; margin: 0 !important; padding: 0 !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; min-width: 120px !important; } .lp-location-search .ui-widget, .lp-location-search .border-dropdown { flex: 1 !important; display: flex !important; align-items: center !important; padding: 0 10px !important; background: transparent !important; border: none !important; } .lp-location-search .fa-crosshairs { color: rgba(255, 255, 255, 0.5) !important; margin-right: 8px !important; } */ /* .lp-header-search-button, .lp-search-bar-right { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; } input.lp-search-btn, .lp-search-bar .lp-search-btn { width: 44px !important; height: 44px !important; min-width: 44px !important; background: #FF6B00 !important; border: none !important; border-radius: 0 8px 8px 0 !important; cursor: pointer !important; margin: 0 !important; padding: 0 !important; position: relative !important; top: auto !important; left: auto !important; } .lp-search-icon, .lp-header-search-button .fa-magnifying-glass, .lp-search-bar-right i.lp-search-icon { position: absolute !important; color: #fff !important; font-size: 16px !important; pointer-events: none !important; z-index: 10 !important; background: transparent !important; } /* Force orange background for search button container/wrapper */ .lp-search-btn-container, .lp-search-bar-right, .lp-header-search-wrap .lp-search-bar-right { background-color: #FF6B00 !important; border-radius: 50% !important; border: none !important; width: 44px !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; } .cross-search-q { color: rgba(255, 255, 255, 0.4) !important; } .loadinerSearch, .searchloading { display: none !important; } /* ========================================= FIX: Homepage Hero Search Bar Ensure ALL elements have transparent backgrounds ========================================= */ /* Homepage hero/banner search form */ /* IMPORTANT: DO NOT STYLE .lp-search-bar.classic-search here! It has specific WHITE background styling at lines 1374-1890 */ .lp-banner-search:not(.classic-search), .lp-hero-search:not(.classic-search), .banner-search:not(.classic-search), .hero-search-form:not(.classic-search), section.banner .lp-search-form:not(.classic-search), .home-search-form:not(.classic-search), .lp-home-search:not(.classic-search) { background: rgba(255, 255, 255, 0.08) !important; border-radius: 50px !important; border: 1px solid rgba(255, 255, 255, 0.15) !important; overflow: hidden !important; } .lp-location-search, .lp-location-search *, .lp-location-search .ui-widget, .lp-location-search .border-dropdown, .lp-location-search .chosen-container, .lp-location-search .chosen-single, .lp-location-search span, .lp-location-search div, .lp-location-search input, .lp-location-search select, .lp-location-search .dropdown, .lp-location-search .form-control, .lp-location-search button, .lp-listingpro-location-search, .lp-listingpro-location-search * { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; } .lp-location-search { flex: 0 0 180px !important; min-width: 120px !important; max-width: 200px !important; display: flex !important; align-items: center !important; padding: 0 12px !important; border-left: 1px solid rgba(255, 255, 255, 0.15) !important; border-right: 1px solid rgba(255, 255, 255, 0.15) !important; color: rgba(255, 255, 255, 0.7) !important; } .lp-location-search span, .lp-location-search .chosen-single span, .lp-location-search input, .border-dropdown span { color: rgba(255, 255, 255, 0.7) !important; font-size: 14px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; } .lp-location-search i, .lp-location-search .fa, .lp-location-search .fa-crosshairs, .lp-location-search .fa-map-marker { color: rgba(255, 255, 255, 0.6) !important; margin-right: 6px !important; font-size: 14px !important; } .lp-search-btn, input.lp-search-btn, button.lp-search-btn, .lp-header-search-button input, .search-submit, button[type="submit"].lp-search-btn { width: 80px !important; min-width: 80px !important; height: 44px !important; background: #2458ff !important; color: #fff !important; border: none !important; border-radius: 0 50px 50px 0 !important; font-size: 14px !important; font-weight: 600 !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 16px !important; margin: 0 !important; position: relative !important; } .lp-search-btn:hover, input.lp-search-btn:hover, button.lp-search-btn:hover { background: #1a45cc !important; } .lp-header-search-button { flex: 0 0 80px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; padding: 0 !important; position: static !important; } .lp-suggested-search { flex: 1 1 auto !important; min-width: 150px !important; display: flex !important; align-items: center !important; padding: 0 16px !important; background: transparent !important; } .lp-suggested-search input, .lp-suggested-search input.lp-search-input, .lp-suggested-search input#select { flex: 1 !important; background: transparent !important; border: none !important; color: #fff !important; font-size: 14px !important; padding: 12px 0 !important; height: 44px !important; outline: none !important; } .lp-suggested-search input::placeholder { color: rgba(255, 255, 255, 0.5) !important; } .lp-search-bar .form-inline, .lp-banner-search form, .lp-hero-search form { display: flex !important; align-items: stretch !important; flex: 1 !important; margin: 0 !important; padding: 0 !important; width: 100% !important; max-width: 100% !important; background: transparent !important; } .lp-search-bar .form-group, .lp-banner-search .form-group, .lp-hero-search .form-group, form .form-group { background: transparent !important; margin: 0 !important; padding: 0 !important; } .chosen-container, .chosen-container-single, .chosen-container-single .chosen-single, .chosen-drop { background: transparent !important; border: none !important; box-shadow: none !important; color: rgba(255, 255, 255, 0.7) !important; } .chosen-container-single .chosen-single div b { background-position: 0 7px !important; filter: invert(1) brightness(0.7) !important; } /* REMOVED: These rules conflicted with white .classic-search homepage search bar body.home .lp-search-bar:not(.classic-search), body.home .lp-banner-search:not(.classic-search), .page-template-page-home .lp-search-bar:not(.classic-search) { background: rgba(255, 255, 255, 0.08) !important; border-radius: 50px !important; } */ /* ========================================= FIX: Header Layout - All Elements Inline Order: Logo | Search | Nav Links | Add Listing | Sign In ========================================= */ /* Main header container - single row */ /* .lp-header .container, .lp-header .container-fluid, header .container, header .container-fluid { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 16px !important; padding: 10px 15px !important; } */ /* Logo section - far left, vertically centered */ .header-left-panel, .lp-logo-wrap, .userimage, .lp-logo-container { flex: 0 0 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; order: 1 !important; height: 100% !important; min-height: 50px !important; } /* Logo image vertical centering */ .lp-logo-container img, .header-left-panel img, header .logo img, .userimage img { vertical-align: middle !important; margin: auto 0 !important; } /* Header right panel - contains everything else */ .header-right-panel { display: flex !important; align-items: center !important; justify-content: flex-start !important; /* Move search closer to logo */ gap: 15px !important; padding-left: 0 !important; /* Gap between logo and search */ flex-wrap: nowrap !important; flex: 1 1 auto !important; order: 2 !important; } /* Search bar container - first in right panel, constrained width */ .lp-search-header-style-outer { flex: 0 1 auto !important; display: inline-flex !important; align-items: center !important; order: 1 !important; max-width: 450px !important; } .lp-search-bar, .header-filter-search { max-width: 100% !important; } .lp-search-bar input, .header-filter-search input, .lp-search-bar .lp-search-input { padding: 8px 10px !important; font-size: 13px !important; } .lp-search-bar input::placeholder, .header-filter-search input::placeholder { color: transparent !important; } .lp-search-bar label, .header-filter-search label { display: none !important; } /* Menu container - flex inline, contains nav + buttons */ /* Override col-md-6 constraint to allow full width */ .lp-menu-container, .lp-menu-container.col-md-6 { display: flex !important; align-items: center !important; gap: 10px !important; float: none !important; flex-wrap: nowrap !important; order: 2 !important; width: auto !important; max-width: none !important; flex: 0 0 auto !important; margin-left: auto !important; /* Push nav and buttons to the right */ } /* Navigation links container - BETWEEN search and buttons */ .lp-menu-container .padding-right-10, .lp-menu-container>div:has(.inner_menu), .lp-menu, .lp-menu .inner_menu, .inner_menu { display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 !important; margin: 0 !important; order: 1 !important; /* Nav links first in menu container */ } /* Buttons container - AFTER nav links */ .contentlogin-flex { display: flex !important; align-items: center !important; gap: 8px !important; order: 2 !important; /* Buttons after nav links */ flex-wrap: nowrap !important; } /* Navigation menu list */ .inner_menu ul, .lp-menu ul, .navbar-nav { display: flex !important; align-items: center !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; flex-wrap: nowrap !important; } /* Navigation menu items */ .inner_menu ul li, .lp-menu ul li, .navbar-nav>li { display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* Navigation links styling - compact padding to fit all elements */ .inner_menu ul li a, .lp-menu ul li a, .navbar-nav>li>a { color: #fff !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 8px !important; white-space: nowrap !important; text-decoration: none !important; } .inner_menu ul li a:hover, .lp-menu ul li a:hover, .navbar-nav>li>a:hover { color: #FF6B00 !important; } /* Clear floats that break layout */ .lp-menu-container::after { display: none !important; } /* Sign In button - keep text on same line */ .md-trigger, .lpl-button.md-trigger, a.lpl-button.md-trigger, .sign-btn, header .md-trigger { display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 40px !important; padding: 0 20px !important; font-size: 14px !important; font-weight: 500 !important; background: transparent !important; border: 1px solid rgba(255, 255, 255, 0.4) !important; border-radius: 25px !important; color: #fff !important; white-space: nowrap !important; flex-wrap: nowrap !important; min-width: max-content !important; } /* Sign In icon + text stay together */ .md-trigger i, .md-trigger span, .md-trigger .fa { flex-shrink: 0 !important; } /* Add Listing button - consistent styling, compact */ .header-list-icon-st6, a.header-list-icon-st6 { white-space: nowrap !important; flex-wrap: nowrap !important; min-width: auto !important; padding: 0 16px !important; font-size: 13px !important; } /* Sign In / Join button - ensure visible */ .lp-join-now, .lp-joinus-icon-outer, .lpl-button.lp-right-15 { display: inline-flex !important; align-items: center !important; flex-shrink: 0 !important; } /* Header row for inner pages */ /* header .row, .lp-header .row { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; width: 100% !important; } /* ========================================= REFINED FIX: Homepage Banner Mockup Match (VER 4 - Row Layout) ========================================= */ /* 1. Reset overlap and background */ .lp-header-search-wrap, .header-container-height { height: 750px !important; min-height: 750px !important; margin: 0 !important; padding: 0 !important; position: relative !important; background-size: cover !important; background-position: center !important; } .lp-header-overlay { position: absolute !important; top: 0 !important; left: 0 !important; height: 100% !important; width: 100% !important; background: rgba(0, 0, 0, 0.4) !important; z-index: 1 !important; } /* 2. Unified Flexbox on the ROW */ .lp-header-search { position: relative !important; z-index: 10 !important; height: 100% !important; display: flex !important; align-items: flex-start !important; justify-content: center !important; padding-top: 140px !important; } .lp-header-search .container, .lp-header-search .row { width: 100% !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 20px !important; } /* Reset Bootstrap column behavior that breaks centering */ .lp-header-search .col-md-12 { width: 100% !important; height: auto !important; flex: 0 0 auto !important; padding: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } /* 3. Logo & Tagline styling */ .lp-header-search-logo { display: block !important; margin-bottom: 20px !important; } .lp-header-search-logo img { height: 260px !important; width: auto !important; } /* Mobile responsiveness */ @media (max-width: 768px) { .lp-header-search-logo img { height: 120px !important; } } .lp-header-search-tagline { display: block !important; font-size: 26px !important; color: #fff !important; font-weight: 600 !important; margin-bottom: 25px !important; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5) !important; text-align: center !important; } /* Mobile responsiveness */ @media (max-width: 768px) { .lp-header-search-tagline { font-size: 20px !important; } } .lp-header-search-tagline .hh-dynamic-city { color: #fff !important; } /* ========================================= DESKTOP-ONLY SEARCH BAR STYLES Wrapped in media query to not break mobile ========================================= */ @media (min-width: 992px) { /* 4. Horizontal Search Bar Style */ /* 4. Horizontal Search Bar Style - WHITE BACKGROUND */ /* Total: 670px (405px What + 200px Where + 65px Button) */ .lp-search-bar.classic-search { background: #FFFFFF !important; background-color: #FFFFFF !important; border-radius: 5px !important; padding: 0 !important; width: 670px !important; max-width: 670px !important; min-width: 670px !important; height: 46px !important; margin: 0 auto !important; display: flex !important; align-items: stretch !important; overflow: visible !important; border: none !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important; } .lp-search-bar.classic-search form { display: flex !important; flex-direction: row !important; align-items: stretch !important; flex: 1 1 auto !important; width: 100% !important; height: 46px !important; padding: 0 !important; margin: 0 !important; } /* Force dark text for all elements inside search bar */ .lp-search-bar.classic-search *, .lp-search-bar.classic-search input, .lp-search-bar.classic-search select, .lp-search-bar.classic-search .input-group-addon, .lp-search-bar.classic-search .chosen-single span, .lp-search-bar.classic-search .chosen-single div b { color: #1a1a1a !important; } .lp-search-bar.classic-search .lp-search-bar-inner, .lp-search-bar.classic-search form, .lp-search-bar.classic-search .lp-search-bar-right, .lp-search-bar.classic-search .form-group.pull-right { padding: 0 !important; margin: 0 !important; border: none !important; } .lp-search-bar.classic-search .form-group { margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; height: 46px !important; position: relative; background: transparent !important; background-color: transparent !important; } /* What field: 405px x 46px - Square corners, WHITE background */ .lp-search-bar.classic-search .form-group.lp-suggested-search { flex: 0 0 405px !important; width: 405px !important; min-width: 405px !important; max-width: 405px !important; height: 46px !important; border-right: 1px solid #CCCCCC !important; border-radius: 0 !important; display: flex !important; align-items: center !important; background: #FFFFFF !important; background-color: #FFFFFF !important; } /* Where field: 200px x 46px - Square corners, WHITE background (matches What field) */ .lp-search-bar.classic-search .form-group.lp-location-search { flex: 0 0 200px !important; width: 200px !important; min-width: 200px !important; max-width: 200px !important; height: 46px !important; border-radius: 0 !important; display: flex !important; align-items: center !important; background: #FFFFFF !important; background-color: #FFFFFF !important; } .lp-search-bar.classic-search .form-group.lp-location-search .ui-widget, .lp-search-bar.classic-search .form-group.lp-location-search .chosen-container, .lp-search-bar.classic-search .form-group.lp-location-search input { width: 100% !important; flex: 1 !important; } /* Specific inner spacing for fields */ .lp-search-bar.classic-search .form-group.lp-suggested-search .pos-relative, .lp-search-bar.classic-search .form-group.lp-location-search .ui-widget { flex: 1 !important; display: flex !important; height: 46px !important; align-items: center !important; background: #FFFFFF !important; background-color: #FFFFFF !important; } /* Ensure "What" placeholder container doesn't interfere */ .lp-search-bar.classic-search .what-placeholder, .lp-search-bar.classic-search .pos-relative { width: 100% !important; height: 46px !important; display: flex !important; align-items: center !important; background: transparent !important; background-color: transparent !important; } /* Input Styling - Vertically Centered, Square Corners */ .lp-search-bar.classic-search input.form-control, .lp-search-bar.classic-search .lp-suggested-search input, .lp-search-bar.classic-search .lp-location-search input, .lp-search-bar.classic-search #select, .lp-search-bar.classic-search #cities { color: #1a1a1a !important; background-color: transparent !important; background: transparent !important; border: none !important; border-radius: 0 !important; height: 46px !important; line-height: 46px !important; font-size: 14px !important; font-weight: 400 !important; font-family: 'Open Sans', sans-serif !important; padding: 0 10px !important; box-shadow: none !important; width: 100% !important; position: relative !important; top: 0 !important; margin: 0 !important; } /* Ultra-specific "What" field input selectors */ .lp-search-bar.classic-search .lp-suggested-search input.lp-suggested-search, .lp-search-bar.classic-search .lp-suggested-search input.js-typeahead-input, .lp-search-bar.classic-search .lp-suggested-search input.lp-search-input, .lp-search-bar.classic-search .lp-suggested-search input.ui-autocomplete-input, .lp-search-bar.classic-search .lp-suggested-search input.dropdown_fields, .lp-search-bar.classic-search input.lp-search-input, .lp-search-bar.classic-search input#select, .lp-search-bar.classic-search input#skeyword-filter { background: transparent !important; background-color: transparent !important; color: #1a1a1a !important; box-shadow: none !important; border: none !important; } /* What field focus and active states - stay white */ .lp-search-bar.classic-search .lp-suggested-search input:focus, .lp-search-bar.classic-search .lp-suggested-search input:active, .lp-search-bar.classic-search .lp-suggested-search input.focus, .lp-search-bar.classic-search input#select:focus, .lp-search-bar.classic-search input#skeyword-filter:focus { background: transparent !important; background-color: transparent !important; color: #1a1a1a !important; outline: none !important; box-shadow: none !important; } .lp-search-bar.classic-search input.form-control::placeholder, .lp-search-bar.classic-search input::placeholder { color: #999999 !important; opacity: 1 !important; } /* Labels "What" and "Where" - Vertically Centered */ .lp-search-bar.classic-search .input-group-addon { background: transparent !important; border: none !important; font-family: 'Open Sans', sans-serif !important; font-size: 14px !important; line-height: 46px !important; padding: 0 0 0 15px !important; width: auto !important; min-width: 60px !important; text-align: left !important; display: flex !important; align-items: center !important; height: 46px !important; border-radius: 0 !important; position: relative !important; top: 0 !important; margin: 0 !important; left: auto !important; z-index: 10 !important; } /* What Label - white background */ .lp-search-bar.classic-search .lp-suggested-search .input-group-addon { color: #7F7F7F !important; font-weight: 400 !important; background: #FFFFFF !important; border-radius: 0 !important; height: 46px !important; line-height: 46px !important; } .lp-search-bar.classic-search .lp-suggested-search .input-group-addon * { color: #7F7F7F !important; font-weight: 400 !important; } /* Where Label - white background */ .lp-search-bar.classic-search .lp-location-search .input-group-addon { color: #333333 !important; font-weight: 600 !important; background: #FFFFFF !important; border-radius: 0 !important; height: 46px !important; line-height: 46px !important; } .lp-search-bar.classic-search .lp-location-search .input-group-addon * { color: #333333 !important; font-weight: 600 !important; } /* Focus States - Keep white background */ .lp-search-bar.classic-search input:focus, .lp-search-bar.classic-search .form-control:focus, .lp-search-bar.classic-search select:focus, .lp-search-bar.classic-search .chosen-single:focus { background-color: #FFFFFF !important; background: #FFFFFF !important; color: #000 !important; outline: none !important; box-shadow: none !important; } /* Location group - WHITE background to match What field */ .home .lp-header-search .form-group.lp-location-search, .lp-search-bar.classic-search .form-group.lp-location-search { background-color: #FFFFFF !important; background: #FFFFFF !important; flex: 1 !important; /* Expand to fill remaining space */ } /* Specific Chosen dropdown overrides (Where field) - WHITE background */ .lp-search-bar.classic-search .chosen-container-single .chosen-single { background: #FFFFFF !important; background-color: #FFFFFF !important; border: none !important; box-shadow: none !important; height: 46px !important; line-height: 46px !important; width: 100% !important; display: flex !important; align-items: center !important; padding-left: 10px !important; padding-right: 10px !important; color: #1a1a1a !important; } .lp-search-bar.classic-search .chosen-container-single .chosen-single span { color: #1a1a1a !important; line-height: 46px !important; margin-top: 0 !important; } /* FIX: "Where" field active state - keep white background */ .lp-search-bar.classic-search .chosen-container.chosen-container-active .chosen-single, .lp-search-bar.classic-search .chosen-container-single .chosen-single:focus, .lp-search-bar.classic-search .chosen-container-active.chosen-with-drop .chosen-single, .lp-search-bar.classic-search .chosen-container.chosen-container-active, .lp-search-bar.classic-search .chosen-container.chosen-with-drop { background: #FFFFFF !important; background-color: #FFFFFF !important; box-shadow: none !important; border: none !important; color: #1a1a1a !important; } /* Chosen dropdown positioning and container */ .lp-search-bar.classic-search .chosen-container { position: relative !important; width: 100% !important; } /* Dropdown menu styling - Hidden by default */ .lp-search-bar.classic-search .chosen-container .chosen-drop { position: absolute !important; z-index: 1000 !important; top: 100% !important; left: -9999px !important; opacity: 0 !important; visibility: hidden !important; width: 100% !important; background: #fff !important; border: 1px solid #ddd !important; border-radius: 4px !important; margin-top: 5px !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; transition: opacity 0.2s ease, visibility 0.2s ease !important; } /* Show dropdown ONLY when active (.chosen-with-drop) */ .lp-search-bar.classic-search .chosen-container.chosen-with-drop .chosen-drop { left: 0 !important; opacity: 1 !important; visibility: visible !important; } /* Dropdown results list */ .lp-search-bar.classic-search .chosen-container .chosen-results { max-height: 240px !important; overflow-y: auto !important; padding: 0 !important; margin: 0 !important; } .lp-search-bar.classic-search .chosen-container .chosen-results li { color: #333 !important; padding: 8px 12px !important; font-size: 14px !important; list-style: none !important; background: #fff !important; } .lp-search-bar.classic-search .chosen-container .chosen-results li.highlighted { background-color: #D2691E !important; color: #fff !important; } .lp-search-bar.classic-search .chosen-container .chosen-results li:hover { background-color: #D2691E !important; color: #fff !important; } /* Dropdown arrow styling */ .lp-search-bar.classic-search .chosen-container-single .chosen-single div { width: auto !important; padding-right: 10px !important; } .lp-search-bar.classic-search .chosen-container-single .chosen-single div b { background-position: 0 2px !important; } .lp-search-bar.classic-search .chosen-container-active .chosen-single div b { background-position: -18px 2px !important; } /* Search Loading Spinner */ .lp-search-bar.classic-search .searchloading, .lp-search-bar.classic-search .loadinerSearch, .lp-search-bar.classic-search .lp-suggested-search .loadinerSearch { width: 20px !important; height: 20px !important; position: absolute !important; right: 15px !important; top: 50% !important; transform: translateY(-50%) !important; background: transparent !important; background-color: transparent !important; } /* Button section - 65px x 46px */ .lp-search-bar.classic-search .lp-search-bar-right, .lp-search-bar.classic-search .form-group.pull-right { width: 65px !important; min-width: 65px !important; max-width: 65px !important; height: 46px !important; border-radius: 0 !important; background: transparent !important; display: flex !important; align-items: stretch !important; justify-content: center !important; position: relative !important; flex: 0 0 65px !important; margin: 0 !important; padding: 0 !important; } .lp-search-bar.classic-search .lp-search-btn, .lp-search-bar.classic-search input.lp-search-btn { background: #D2691E !important; border: none !important; border-radius: 0 5px 5px 0 !important; width: 65px !important; min-width: 65px !important; max-width: 65px !important; height: 46px !important; min-height: 46px !important; max-height: 46px !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; transition: background 0.3s ease !important; color: transparent !important; position: relative !important; z-index: 1 !important; margin: 0 !important; } .lp-search-bar.classic-search .lp-search-btn:hover { background: #B45A1A !important; } .lp-search-bar.classic-search .lp-search-bar-right .lp-search-icon, .lp-search-bar.classic-search .lp-search-icon { color: #fff !important; font-size: 18px !important; position: absolute !important; left: 50% !important; top: 50% !important; margin: 0 !important; padding: 0 !important; transform: translate(-50%, -50%) !important; z-index: 10 !important; pointer-events: none !important; } /* Autocomplete/suggested results dropdown - "What" field */ .lp-search-bar.classic-search .ui-autocomplete, #input-dropdown { background: #FFFFFF !important; border: 1px solid #CCCCCC !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; z-index: 1000 !important; border-radius: 4px !important; margin-top: 5px !important; } .ui-autocomplete .lp-s-cat, #input-dropdown ul li { color: #333333 !important; background: #FFFFFF !important; padding: 8px 12px !important; } .ui-autocomplete li:hover, #input-dropdown ul li:hover, .lp-search-bar.classic-search .ui-autocomplete li:hover { background-color: #D2691E !important; color: #FFFFFF !important; } #input-dropdown ul li .lp-s-cat { color: inherit !important; } /* Fix for cross icon and search icon spacing */ .lp-search-bar.classic-search .cross-search-q, .lp-search-bar.classic-search .lp-suggested-search .cross-search-q { right: 40px !important; color: #999 !important; background: transparent !important; background-color: transparent !important; cursor: pointer !important; } .lp-search-bar.classic-search .cross-search-q:hover { color: #666 !important; } .lp-search-bar.classic-search .form-group i.fa-crosshairs { color: #999 !important; font-size: 16px !important; } } /* END: Desktop-only search bar styles */ /* 5. Banner Categories (Quick links) */ .lp-header-search-cats { margin-top: 25px !important; } .lp-header-search-cats ul { display: flex !important; justify-content: center !important; list-style: none !important; gap: 30px !important; padding: 0 !important; } .lp-header-search-cats ul li a { color: #fff !important; font-size: 14px !important; font-weight: 500 !important; display: flex !important; align-items: center !important; gap: 8px !important; opacity: 0.9; transition: opacity 0.2s ease, transform 0.2s ease; } .lp-header-search-cats ul li a:hover { opacity: 1; transform: translateY(-2px); color: #FF6B00 !important; } .lp-header-search-cats ul li a i { font-size: 16px !important; } /* 6. Fix for Happening Cities section overlap */ section#lp-happening-cities, div.lp-section-content { background: #fff !important; position: relative !important; z-index: 100 !important; padding-top: 50px !important; } /* ========================================= GLOBAL HEADER BUTTONS - SPECIFICITY FIX ========================================= */ /* 1. Add Listing Button - High Specificity Override */ /* Using body prefix to ensure higher specificity than parent ListingPro theme */ /* Target specific parent containers to win the specificity war against theme styles */ body .lp-menu-container .header-list-icon-st6, body .lp-menu-right .header-list-icon-st6, body .header-right-panel .header-list-icon-st6, body .header-list-icon-st6, body .lp-header .header-list-icon-st6, /* TARGET INNER PAGES EXPLICITLY */ body .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6, body .header-inner-page-wrap .header-list-icon-st6, /* TARGET SINGLE LISTING PAGES EXPLICITLY */ body.single-listing .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6, body.single-listing .header-inner-page-wrap .header-list-icon-st6 { background-color: var(--hh-orange-primary, rgb(255, 107, 0)) !important; background-image: none !important; border: none !important; border-radius: 4px !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; padding: 10px 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 40px !important; line-height: normal !important; white-space: nowrap !important; opacity: 1 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; text-shadow: none !important; } /* Add Listing - Hover State */ body .lp-menu-container .header-list-icon-st6:hover, body .lp-menu-right .header-list-icon-st6:hover, body .header-right-panel .header-list-icon-st6:hover, body .header-list-icon-st6:hover, body .lp-header .header-list-icon-st6:hover, /* TARGET INNER PAGES HOVER */ body .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6:hover, body .header-inner-page-wrap .header-list-icon-st6:hover, body.single-listing .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6:hover { background-color: var(--hh-orange-hover, rgb(230, 95, 0)) !important; background-image: none !important; border: none !important; color: #FFFFFF !important; opacity: 1 !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important; transform: translateY(-1px) !important; } /* Add Listing Icon - FORCE WHITE */ body .header-list-icon-st6 i, body .header-list-icon-st6 .fa, body .header-list-icon-st6 svg { color: #FFFFFF !important; font-size: 16px !important; background: none !important; margin: 0 !important; } /* 2. Sign In Button - CONTAINER STRATEGY PROBLEM: Parent theme applies blue border to inner element (.app-view-popup-style) on hover SOLUTION: Style the outer container (.lp-join-now) as the button, reset inner elements to plain text This ensures the white border wraps both icon and text as a unified visual element */ /* Container - This acts as the visual button */ body .lp-join-now, body .lpl-button, body .lpl-button.md-trigger { border: 1px solid #FFFFFF !important; border-radius: 4px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; padding: 0 15px !important; height: 40px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; line-height: normal !important; white-space: nowrap !important; text-transform: none !important; transition: all 0.3s ease !important; box-shadow: none !important; outline: none !important; } /* Hover State - Apply to CONTAINER */ body .lp-join-now:hover, body .lpl-button:hover, body .lpl-button.md-trigger:hover { border-color: var(--hh-orange-primary, rgb(255, 107, 0)) !important; background-color: rgba(255, 255, 255, 0.1) !important; background-image: none !important; outline: none !important; box-shadow: none !important; transform: translateY(-1px) !important; } /* Inner Link - Complete Reset to Plain Text */ body .lp-join-now .app-view-popup-style, body .lp-join-now a, body .lpl-button .app-view-popup-style, body .lpl-button a { border: none !important; background: none !important; background-color: transparent !important; background-image: none !important; padding: 0 !important; height: auto !important; margin: 0 !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } /* Ensure Inner Elements Stay Reset on Hover */ body .lp-join-now:hover .app-view-popup-style, body .lp-join-now:hover a, body .lpl-button:hover .app-view-popup-style, body .lpl-button:hover a { border: none !important; background: none !important; background-color: transparent !important; color: #FFFFFF !important; } /* Icon - Ensure White */ body .lp-join-now i, body .lp-join-now .fa, body .lpl-button i, body .lpl-button .fa { color: #FFFFFF !important; font-size: 16px !important; background: none !important; margin: 0 !important; } /* Ensure Icons Stay White on Hover */ body .lp-join-now:hover i, body .lp-join-now:hover .fa, body .lpl-button:hover i, body .lpl-button:hover .fa { color: #FFFFFF !important; background: none !important; background-color: transparent !important; border: none !important; } /* Mobile Responsiveness */ @media (max-width: 768px) { .header-list-icon-st6, .md-trigger { padding: 8px 16px !important; font-size: 13px !important; height: 36px !important; gap: 6px !important; } .header-list-icon-st6 i, .md-trigger i { font-size: 14px !important; } } /* Extra small devices */ @media (max-width: 480px) { .header-list-icon-st6, .md-trigger { padding: 6px 12px !important; font-size: 12px !important; height: 32px !important; } .header-list-icon-st6 i, .md-trigger i { font-size: 12px !important; } } /* ========================================= INNER PAGE SEARCH BAR - PHASE 5 (DUAL SELECTOR FIX) ========================================= */ /* Z-INDEX HIERARCHY FOR THIS SECTION: 1000 - Search icon (must be visible above button) 100 - Search button background 5 - Input labels (What?/Where?) */ /* 1. Main Search Bar Container */ /* IMPORTANT: Only targets INNER PAGES, NOT homepage hero search */ /* Excludes body.home to prevent conflict with homepage white search bar (lines 1374-1890) */ body:not(.home) .lp-search-bar-header, body:not(.home) .lp-search-bar.lp-header-search-form { background-color: #EEEEEE !important; background-image: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; height: 44px !important; /* Unified 44px Height */ display: flex !important; align-items: center !important; gap: 0 !important; /* Remove any flex gaps for flush layout */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; overflow: visible !important; max-width: none !important; width: auto !important; margin-left: -73px !important; /* Aligns left edge with page headline (compensates for container padding) */ margin-right: 0 !important; } /* 1a. Form Container - Force Height Match */ body:not(.home) .lp-search-bar-header form, body:not(.home) .lp-search-bar.lp-header-search-form form { height: 44px !important; max-height: 44px !important; min-height: 44px !important; } /* 1b. Button Wrapper Container - Force Width Match */ body:not(.home) .lp-search-bar-header .lp-header-search-button, body:not(.home) .lp-search-bar.lp-header-search-form .lp-header-search-button { flex: 0 0 60px !important; width: 60px !important; max-width: 60px !important; min-width: 60px !important; height: 44px !important; max-height: 44px !important; min-height: 44px !important; } /* 2. Fix Button Container via Parent */ body:not(.home) .lp-search-bar-header .lp-search-bar-right, body:not(.home) .lp-search-bar.lp-header-search-form .lp-search-bar-right { position: relative !important; top: 0 !important; right: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 44px !important; /* Force 44px to match container */ max-height: 44px !important; min-height: 44px !important; width: 60px !important; max-width: 60px !important; min-width: 60px !important; float: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; } /* 3. Search Button (Height Fix) */ body:not(.home) .lp-search-bar-header .lp-search-btn, body:not(.home) .lp-search-bar.lp-header-search-form .lp-search-btn { background-color: #D2691E !important; background-image: none !important; border: none !important; border-radius: 0 !important; width: 60px !important; max-width: 60px !important; min-width: 60px !important; height: 44px !important; max-height: 44px !important; min-height: 44px !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; transition: background 0.3s ease !important; outline: none !important; text-indent: -9999px !important; color: transparent !important; z-index: 100 !important; display: flex !important; align-items: center !important; justify-content: center !important; } body:not(.home) .lp-search-bar-header .lp-search-btn:hover, body:not(.home) .lp-search-bar.lp-header-search-form .lp-search-btn:hover { background-color: #B45A1A !important; } /* 4. "Where" Dropdown - Fix Blue Background & Corners - SCOPED */ body:not(.home) .lp-search-bar-header .chosen-container .chosen-drop, body:not(.home) .lp-search-bar.lp-header-search-form .chosen-container .chosen-drop { background-color: #ffffff !important; /* Force White Background */ border: 1px solid #ddd !important; border-radius: 0 !important; /* Kill Rounded Corners */ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; margin-top: 0 !important; } body:not(.home) .lp-search-bar-header .chosen-container .chosen-results, body:not(.home) .lp-search-bar.lp-header-search-form .chosen-container .chosen-results { background-color: #ffffff !important; border-radius: 0 !important; overflow-y: auto !important; } body:not(.home) .lp-search-bar-header .chosen-container .chosen-results li, body:not(.home) .lp-search-bar.lp-header-search-form .chosen-container .chosen-results li { color: #333333 !important; /* Ensure visible text */ } /* 5. Chosen.js Base Elements - SCOPED */ body:not(.home) .lp-search-bar-header .chosen-container, body:not(.home) .lp-search-bar-header .chosen-container .chosen-single, body:not(.home) .lp-search-bar-header .chosen-container .chosen-single div, body:not(.home) .lp-search-bar.lp-header-search-form .chosen-container, body:not(.home) .lp-search-bar.lp-header-search-form .chosen-container .chosen-single, body:not(.home) .lp-search-bar.lp-header-search-form .chosen-container .chosen-single div { border-radius: 0 !important; box-shadow: none !important; background-image: none !important; } /* 6. Input Fields & Text Hiding */ /* Hide placeholder text so only "What?"/"Where?" labels are visible */ body:not(.home) .lp-search-bar-header input::placeholder, body:not(.home) .lp-search-bar.lp-header-search-form input::placeholder { color: transparent !important; } body:not(.home) .lp-search-bar-header input.lp-suggested-search, body:not(.home) .lp-search-bar-header .chosen-single, body:not(.home) .lp-search-bar.lp-header-search-form input.lp-suggested-search, body:not(.home) .lp-search-bar.lp-header-search-form .chosen-single { border-radius: 0 !important; height: 44px !important; /* Unified 44px Height */ line-height: normal !important; box-shadow: none !important; border: none !important; outline: none !important; color: #1a1a1a !important; font-size: 14px !important; font-weight: 400 !important; background-color: transparent !important; padding-left: 60px !important; margin: 0 !important; } body:not(.home) .lp-search-bar-header .chosen-container-single .chosen-single, body:not(.home) .lp-search-bar.lp-header-search-form .chosen-container-single .chosen-single { padding-left: 65px !important; background-color: transparent !important; background-image: none !important; line-height: 44px !important; height: 44px !important; } /* 7. Fix Form Groups Height */ body:not(.home) .lp-search-bar-header .form-group, body:not(.home) .lp-search-bar.lp-header-search-form .form-group { height: 100% !important; position: relative !important; background-color: #FFFFFF !important; border: none !important; margin: 0 !important; display: flex !important; align-items: center !important; border-radius: 0 !important; } body:not(.home) .lp-search-bar-header .form-group.lp-suggested-search, body:not(.home) .lp-search-bar.lp-header-search-form .form-group.lp-suggested-search { border-right: 1px solid #DCDCDC !important; } /* 8. Search Icon Visibility */ body:not(.home) .lp-search-bar-header .lp-search-icon, body:not(.home) .lp-search-bar-header i.fa-search, body:not(.home) .lp-search-bar.lp-header-search-form .lp-search-icon, body:not(.home) .lp-search-bar.lp-header-search-form i.fa-search { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-size: 18px !important; pointer-events: none !important; z-index: 1000 !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; } /* 9. Labels (What?/Where?) */ body:not(.home) .lp-search-bar-header .input-group-addon, body:not(.home) .lp-search-bar.lp-header-search-form .input-group-addon { background-color: transparent !important; border: none !important; color: #7F7F7F !important; font-weight: 600 !important; position: absolute !important; left: 15px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 5 !important; padding: 0 !important; pointer-events: none !important; } /* ========================================= LISTING PAGE HEADER STANDARDIZATION ========================================= */ /* 1. Force Solid Background on Listing Page Header */ /* Matches inner pages: #0D1B2A */ body.single-listing .lp-header, body.single-listing header.lp-header-page, body.single-listing .header-inner-page-wrap { background: #0D1B2A !important; background-color: #0D1B2A !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; } /* 2. Ensure Add Listing Button is ORANGE (Overrides Transparent) */ /* The parent theme often forces this to transparent on single listings */ body.single-listing .header-right-panel .header-list-icon-st6, body.single-listing .lp-menu-right .header-list-icon-st6, body.single-listing a.header-list-icon-st6 { background-color: var(--hh-orange-primary, rgb(255, 107, 0)) !important; color: #FFFFFF !important; border: none !important; } /* 3. Ensure Search Bar Visibility */ /* In case it was hidden or styled transparently */ body.single-listing .lp-search-bar-header { visibility: visible !important; opacity: 1 !important; display: flex !important; } /* ========================================= PHASE 1: GLOBAL HEADER BUTTONS File: css/dark-header.css Version: 3.1 Implementation Date: 2026-01-20 ========================================= */ /* 1. Add Listing Button - High Specificity Override */ /* Using body prefix to ensure higher specificity than parent ListingPro theme */ body .lp-menu-container .header-list-icon-st6, body .lp-menu-right .header-list-icon-st6, body .header-right-panel .header-list-icon-st6, body .header-list-icon-st6, body .lp-header .header-list-icon-st6, /* TARGET INNER PAGES EXPLICITLY */ body .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6, body .header-inner-page-wrap .header-list-icon-st6, /* TARGET SINGLE LISTING PAGES EXPLICITLY */ body.single-listing .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6, body.single-listing .header-inner-page-wrap .header-list-icon-st6 { background-color: #D2691E !important; /* Brand Orange */ background-image: none !important; border: none !important; border-radius: 4px !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; padding: 10px 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 40px !important; /* NOTE: Test on mobile - may need @media for 44px */ line-height: normal !important; opacity: 1 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; white-space: nowrap !important; text-shadow: none !important; } /* Add Listing - Hover State */ body .lp-menu-container .header-list-icon-st6:hover, body .lp-menu-right .header-list-icon-st6:hover, body .header-right-panel .header-list-icon-st6:hover, body .header-list-icon-st6:hover, body .lp-header .header-list-icon-st6:hover, body .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6:hover, body .header-inner-page-wrap .header-list-icon-st6:hover, body.single-listing .header-inner-page-wrap .lp-header-style-classic a.header-list-icon-st6:hover { background-color: #FF8C42 !important; /* Lighter Orange */ background-image: none !important; color: #FFFFFF !important; transform: translateY(-1px) !important; opacity: 1 !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important; } /* Add Listing Icon - FORCE WHITE */ body .header-list-icon-st6 i, body .header-list-icon-st6 .fa, body .header-list-icon-st6 svg { color: #FFFFFF !important; font-size: 16px !important; background: none !important; margin: 0 !important; } /* 2. Sign In Button - CONTAINER STRATEGY PROBLEM: Parent theme applies blue border to inner element (.app-view-popup-style) on hover SOLUTION: Style the outer container (.lp-join-now) as the button, reset inner elements to plain text This ensures the white border wraps both icon and text as a unified visual element */ /* Container - This acts as the visual button */ body .lp-join-now { border: 1px solid #FFFFFF !important; border-radius: 4px !important; background: transparent !important; background-color: transparent !important; background-image: none !important; padding: 0 15px !important; height: 40px !important; /* NOTE: Test on mobile - may need @media for 44px */ display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; transition: all 0.3s ease !important; box-shadow: none !important; outline: none !important; } /* Normalize inner link color and remove borders */ body .lp-join-now .app-view-popup-style, body .lp-join-now a { border: none !important; background: none !important; padding: 0 !important; height: auto !important; margin: 0 !important; color: #FFFFFF !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: none !important; outline: none !important; text-decoration: none !important; } /* Icon - Ensure white */ body .lp-join-now i, body .lp-join-now .fa { color: #FFFFFF !important; font-size: 14px !important; } /* Hover State - Apply to CONTAINER */ body .lp-join-now:hover { border-color: #D2691E !important; /* Orange Border */ background: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important; } /* Ensure Inner Elements Stay Reset on Hover */ body .lp-join-now:hover .app-view-popup-style, body .lp-join-now:hover a, body .lp-join-now:hover i { color: #FFFFFF !important; background: none !important; border: none !important; padding: 0 !important; } /* 3. Button Alignment Fix */ body .lp-menu-right .header-list-icon-st6, body .lp-header .header-list-icon-st6, body .header-list-icon-st6 { height: 40px !important; line-height: normal !important; padding: 10px 20px !important; margin-top: 0 !important; margin-bottom: 0 !important; display: inline-flex !important; align-items: center !important; vertical-align: middle !important; transform: none !important; } body .lp-menu-right .header-list-icon-st6:hover, body .header-list-icon-st6:hover { transform: translateY(-1px) !important; } /* Sign In Button Alignment */ body .lp-menu-right .md-trigger, body .header-right-panel .md-trigger, body .lp-header .btn-login, body .sign-btn, body .lp-join-now { height: 40px !important; line-height: normal !important; padding: 0 15px !important; margin-top: 0 !important; margin-bottom: 0 !important; display: inline-flex !important; align-items: center !important; vertical-align: middle !important; } /* 4. Listing Page Header Standardization */ /* Force single listing pages to match inner search results pages */ body.single-listing .lp-header, body.single-listing header.lp-header-page, body.single-listing .header-inner-page-wrap { background: #0D1B2A !important; background-color: #0D1B2A !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important; } /* Ensure Add Listing Button is ORANGE on single listings (overrides transparent default) */ body.single-listing .header-right-panel .header-list-icon-st6, body.single-listing .lp-menu-right .header-list-icon-st6, body.single-listing a.header-list-icon-st6 { background-color: #D2691E !important; color: #FFFFFF !important; border: none !important; border-radius: 4px !important; font-size: 14px !important; font-weight: 500 !important; text-transform: none !important; padding: 10px 20px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; height: 40px !important; line-height: normal !important; opacity: 1 !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important; transition: all 0.3s ease !important; white-space: nowrap !important; text-shadow: none !important; } body.single-listing .lp-search-bar-header { visibility: visible !important; opacity: 1 !important; display: flex !important; } /* Mobile Responsiveness for Touch Targets */ @media (max-width: 768px) { /* Increase button height for better touch targets (Apple HIG: 44px minimum) */ body .header-list-icon-st6, body .lp-join-now { height: 44px !important; padding: 12px 20px !important; } } /* ========================================= PHASE 2: UNIFIED SEARCH BAR STYLING File: css/dark-header.css Version: 3.1 Consolidates: Homepage + Inner Pages + Listing Pages Implementation Date: 2026-01-20 ========================================= */ /* Z-INDEX HIERARCHY FOR THIS SECTION: 1000 - Search icon (must be visible above button) 100 - Search button background 5 - Input labels (What?/Where?) */ /* 1. Main Search Bar Container (Dual Selector for Cross-Page Compatibility) */ body .lp-search-bar-header, body .lp-search-bar.lp-header-search-form { background-color: #EEEEEE !important; background-image: none !important; border: none !important; border-radius: 0 !important; padding: 0 !important; height: 44px !important; display: flex !important; align-items: center !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1) !important; overflow: visible !important; max-width: none !important; width: auto !important; margin-left: -73px !important; /* MAGIC NUMBER: Aligns with page headline - TEST ON MOBILE */ margin-right: 0 !important; } /* 2. Search Button Container */ body .lp-search-bar-header .lp-search-bar-right, body .lp-search-bar.lp-header-search-form .lp-search-bar-right { position: relative !important; top: 0 !important; right: 0 !important; left: 0 !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 100% !important; width: 60px !important; float: none !important; background: transparent !important; border: none !important; border-radius: 0 !important; } /* 3. Search Button (Flush with inputs, no gaps) */ body .lp-search-bar-header .lp-search-btn, body .lp-search-bar.lp-header-search-form .lp-search-btn { background-color: #D2691E !important; background-image: none !important; border: none !important; border-radius: 0 !important; width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; transition: background 0.3s ease !important; outline: none !important; text-indent: -9999px !important; color: transparent !important; z-index: 100 !important; } body .lp-search-bar-header .lp-search-btn:hover, body .lp-search-bar.lp-header-search-form .lp-search-btn:hover { background-color: #B45A1A !important; /* Darker Orange */ } /* 4. Fix "Where" Dropdown (Blue Background & Rounded Corners) */ body .lp-search-bar-header .chosen-container .chosen-drop, body .lp-search-bar.lp-header-search-form .chosen-container .chosen-drop { background-color: #ffffff !important; border: 1px solid #ddd !important; border-radius: 0 !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important; margin-top: 0 !important; } body .lp-search-bar-header .chosen-container .chosen-results, body .lp-search-bar.lp-header-search-form .chosen-container .chosen-results { background-color: #ffffff !important; border-radius: 0 !important; overflow-y: auto !important; } body .lp-search-bar-header .chosen-container .chosen-results li, body .lp-search-bar.lp-header-search-form .chosen-container .chosen-results li { color: #333333 !important; } /* 5. Chosen.js Base Elements */ body .lp-search-bar-header .chosen-container, body .lp-search-bar-header .chosen-container .chosen-single, body .lp-search-bar-header .chosen-container .chosen-single div, body .lp-search-bar.lp-header-search-form .chosen-container, body .lp-search-bar.lp-header-search-form .chosen-container .chosen-single, body .lp-search-bar.lp-header-search-form .chosen-container .chosen-single div { border-radius: 0 !important; box-shadow: none !important; background-image: none !important; } /* 6. Input Fields */ body .lp-search-bar-header input::placeholder, body .lp-search-bar.lp-header-search-form input::placeholder { color: transparent !important; /* Hide placeholder so only labels show */ } body .lp-search-bar-header input.lp-suggested-search, body .lp-search-bar-header .chosen-single, body .lp-search-bar.lp-header-search-form input.lp-suggested-search, body .lp-search-bar.lp-header-search-form .chosen-single { border-radius: 0 !important; height: 44px !important; line-height: normal !important; box-shadow: none !important; border: none !important; outline: none !important; color: #1a1a1a !important; font-size: 14px !important; font-weight: 400 !important; background-color: transparent !important; padding-left: 60px !important; margin: 0 !important; } body .lp-search-bar-header .chosen-container-single .chosen-single, body .lp-search-bar.lp-header-search-form .chosen-container-single .chosen-single { padding-left: 65px !important; background-color: transparent !important; line-height: 44px !important; height: 44px !important; } /* 7. Form Groups Height */ body .lp-search-bar-header .form-group, body .lp-search-bar.lp-header-search-form .form-group { height: 44px !important; position: relative !important; background-color: #FFFFFF !important; border: none !important; margin: 0 !important; display: flex !important; align-items: center !important; border-radius: 0 !important; } body .lp-search-bar-header .form-group.lp-suggested-search, body .lp-search-bar.lp-header-search-form .form-group.lp-suggested-search { border-right: 1px solid #DCDCDC !important; } /* 8. Search Icon Visibility */ body .lp-search-bar-header .lp-search-icon, body .lp-search-bar-header i.fa-search, body .lp-search-bar.lp-header-search-form .lp-search-icon, body .lp-search-bar.lp-header-search-form i.fa-search { position: absolute !important; top: 50% !important; left: 50% !important; transform: translate(-50%, -50%) !important; margin: 0 !important; padding: 0 !important; color: #FFFFFF !important; font-size: 18px !important; pointer-events: none !important; z-index: 1000 !important; display: block !important; visibility: visible !important; opacity: 1 !important; width: auto !important; height: auto !important; } /* 9. Labels (What?/Where?) */ body .lp-search-bar-header .input-group-addon, body .lp-search-bar.lp-header-search-form .input-group-addon { background-color: transparent !important; border: none !important; color: #7F7F7F !important; font-weight: 600 !important; position: absolute !important; left: 15px !important; top: 50% !important; transform: translateY(-50%) !important; z-index: 5 !important; padding: 0 !important; pointer-events: none !important; } /* 10. HOMEPAGE SPECIFIC FIXES */ /* Fix 1: Remove "E" Symbol */ .lp-search-bar.classic-search .input-group-addon:before { content: none !important; display: none !important; } /* Fix 2: Text Overlap (What/Where Labels) */ body .lp-search-bar.classic-search .lp-suggested-search input.lp-suggested-search, body .lp-search-bar.classic-search .lp-location-search input { padding-left: 70px !important; } body .lp-search-bar.classic-search .input-group-addon { left: 15px !important; z-index: 20 !important; } /* Fix 3: Missing Search Icon (FontAwesome 4/5 Compatibility) */ body .lp-search-bar.classic-search .lp-search-btn .lp-search-icon:before { content: "\f002" !important; /* Unicode for fa-search */ font-family: "FontAwesome", "Font Awesome 5 Free" !important; font-weight: 900 !important; font-style: normal !important; visibility: visible !important; opacity: 1 !important; } /* 11. INNER PAGE SPECIFIC FIXES */ /* Fix 4: Remove Gaps Around Search Button */ body .lp-search-bar-header .lp-search-bar-right, body .lp-search-bar.lp-header-search-form .lp-search-bar-right { padding: 0 !important; margin: 0 !important; border: none !important; width: 60px !important; height: 44px !important; top: 0 !important; right: 0 !important; background: transparent !important; } body .lp-search-bar-header .lp-search-btn, body .lp-search-bar.lp-header-search-form .lp-search-btn { width: 100% !important; height: 100% !important; padding: 0 !important; margin: 0 !important; border-radius: 0 !important; } /* Ensure global search bar container has no gaps */ body .lp-search-bar-header, body .lp-search-bar.lp-header-search-form { gap: 0 !important; } /* Mobile Responsiveness */ @media (max-width: 768px) { /* Remove negative margin on mobile */ body .lp-search-bar-header, body .lp-search-bar.lp-header-search-form { margin-left: 0 !important; /* Reset magic number */ margin-right: 0 !important; } /* Stack search bar elements if needed */ body .lp-search-bar-header, body .lp-search-bar.lp-header-search-form { flex-wrap: wrap !important; height: auto !important; } } @media (max-width: 480px) { /* Further adjustments for small phones */ body .lp-search-bar-header input.lp-suggested-search, body .lp-search-bar.lp-header-search-form input.lp-suggested-search { padding-left: 50px !important; /* Reduce padding for narrow screens */ } }