/* =========================================
   SEARCH/LISTING PAGE - DARK THEME
   Custom overrides for the search results page
   ========================================= */

/* Main Page Background */
body.page-template-search-listing,
body.archive.post-type-archive-listing,
body.search-results,
body.tax-listing-category,
.lp-search-page,
.lp-grid-box-contianer,
.lp-listings-container,
section.aliceblue,
.lp-listingpro-search-result,
.lp-listing-inner {
    background: var(--bg-dark) !important;
}

/* Container Fix */
.container,
.page-container-five,
.lp-section-content {
    background: transparent !important;
}

/* Header Override */
header,
.lp-header,
#masthead {
    background: var(--bg-card) !important;
    border-bottom: 1px solid var(--border-color) !important;
}

/* Inner Page Header - Match Homepage Styling */
/* Navigation Links Inline */
.lp-header .lp-menu-right {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
}

.lp-header .main-menu,
.lp-header .navbar-nav {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.lp-header .navbar-nav>li>a {
    color: var(--text-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 8px 12px !important;
}

.lp-header .navbar-nav>li>a:hover {
    color: var(--primary-color) !important;
}

/* Search Button - Orange with Icon */
/*
.lp-header-search-wrap .btn-search,
.lp-search-btn,
.header-search-btn,
button.lp-search-btn,
button[type="submit"].lp-search-btn,
.lp-header-search-wrap button[type="submit"],
.header-style-one .lp-search-submit-btn,
.lp-header button.btn-search {
    background: var(--primary-color) !important;
    color: #fff !important;
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    min-width: 44px !important;
}

.lp-header-search-wrap .btn-search:hover,
.lp-search-btn:hover,
.header-search-btn:hover {
    background: #e65c00 !important;
}
*/

/* Add Listing Button - No outer border, orange icon */
.lp-menu-right .header-list-icon-st6,
.lp-header .header-list-icon-st6 {
    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;
    font-size: 14px !important;
    overflow: hidden !important;
    box-shadow: none !important;
}

/* Add Listing icon - orange */
.lp-menu-right .header-list-icon-st6 i,
.lp-menu-right .header-list-icon-st6 .fa,
.lp-menu-right .header-list-icon-st6 .fa-plus-circle,
.lp-header .header-list-icon-st6 i {
    color: #FF6B00 !important;
    font-size: 18px !important;
}

/* Sign In Button - Ghost Style */
.lp-menu-right .md-trigger,
.lp-header .md-trigger {
    background: var(--bg-card) !important;
    color: #fff !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 25px !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

.lp-menu-right .md-trigger:hover,
.lp-header .md-trigger:hover {
    background: var(--bg-card-elevated) !important;
    border-color: var(--text-secondary) !important;
}

/* Search Form */
/*
.lp-search-bar-input,
.lp-header-search-wrap input,
#what_search,
#location-search,
.lp-search-field {
    background: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

input::placeholder {
    color: var(--text-muted) !important;
}
*/

/* =========================================
   FILTER BAR - DARK STYLING
   ========================================= */
.lp-filter-bar,
.lp-taxonomy-filter,
.lp-filter-wrapper,
.lp-listing-filter-ajax-form,
.filter-bars,
.lp-grid-box-header,
.lp-filter-top-bar,
.lp-search-result-filters {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 20px !important;
}

/* Results Title */
.lp-grid-box-header h3,
.lp-filter-title,
.filter-result-count,
.lp-search-result-title,
h1,
h2,
h3,
h4 {
    color: var(--text-primary) !important;
}

/* Filter Buttons */
.lp-filter-btn,
.filter-btn,
.btn.dropdown-toggle,
.dropdown-toggle,
.lp-filter-select,
.lp-cat-filter-btn {
    background: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.lp-filter-btn:hover,
.filter-btn:hover,
.btn.dropdown-toggle:hover {
    border-color: var(--primary-color) !important;
    background: rgba(255, 107, 0, 0.1) !important;
}

/* Active Filter */
.lp-filter-btn.active,
.filter-btn.active,
.dropdown.open .dropdown-toggle {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

/* Dropdown Menus */
.dropdown-menu,
.lp-filter-dropdown-menu,
ul.dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4) !important;
    padding: 8px !important;
}

.dropdown-menu li a,
.dropdown-menu li span {
    color: var(--text-primary) !important;
    padding: 10px 16px !important;
    border-radius: 8px !important;
    display: block !important;
}

.dropdown-menu li a:hover,
.dropdown-menu li:hover a {
    background: var(--bg-card-elevated) !important;
    color: var(--primary-color) !important;
}

/* =========================================
   LISTING CARDS - DARK THEME
   ========================================= */
.lp-grid-box,
.lp-grid-box-contianer .lp-grid-box,
article.listing,
.lp-listing-box,
.listing-grid-item {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 16px !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2) !important;
}

.lp-grid-box:hover {
    border-color: var(--primary-color) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4) !important;
}

/* Card Image */
.lp-grid-box-thumb,
.lp-listing-img-wrap {
    position: relative !important;
}

/* Card Favorite Button - scoped to listing cards only */
.lp-grid-box-thumb .lp-add-to-fav,
.lp-grid-box-thumb .add-to-fav,
.lp-listing-img-wrap .lp-add-to-fav,
.lp-listing-img-wrap .add-to-fav,
.hh-listing-card .hh-favorite-btn {
    position: absolute !important;
    top: 12px !important;
    right: 12px !important;
    width: 36px !important;
    height: 36px !important;
    background: rgba(0, 0, 0, 0.6) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #fff !important;
    z-index: 5 !important;
    border: none !important;
}

.lp-add-to-fav:hover,
.lp-add-to-fav.active {
    background: var(--primary-color) !important;
}

/* Card Content */
.lp-grid-box-content,
.lp-listing-content {
    padding: 16px !important;
    background: var(--bg-card) !important;
}

/* Card Title */
.lp-grid-box-title h4,
.lp-grid-box-title h3,
.lp-grid-box-title a {
    color: var(--text-primary) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

.lp-grid-box-title a:hover {
    color: var(--primary-color) !important;
}

/* Card Category */
.lp-grid-box-categ,
.lp-grid-box-categ a {
    color: var(--primary-color) !important;
    font-size: 13px !important;
}

/* Card Location */
.lp-grid-box-location {
    color: var(--text-muted) !important;
    font-size: 13px !important;
}

/* Card Rating */
.lp-rating-stars,
.lp-grid-box-rating {
    color: var(--rating-gold) !important;
}

/* Status Badge */
.lp-grid-deal-status,
.open-close-badge {
    padding: 4px 10px !important;
    border-radius: 6px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.lp-grid-deal-status.open,
.open-close-badge.open {
    background: rgba(0, 200, 83, 0.2) !important;
    color: var(--verified-green) !important;
}

.lp-grid-deal-status.closed,
.open-close-badge.closed {
    background: rgba(255, 82, 82, 0.2) !important;
    color: #FF5252 !important;
}

/* Card Bottom Row */
.lp-grid-box-bottom {
    border-top: 1px solid var(--border-color) !important;
    padding-top: 12px !important;
    margin-top: 12px !important;
}

/* =========================================
   MAP CONTAINER
   ========================================= */
.lp-map-container,
#lp-google-map,
#lp_map,
.map-container,
.lp-listing-map-wrap {
    border-radius: 16px !important;
    overflow: hidden !important;
    border: 1px solid var(--border-color) !important;
}

/* =========================================
   SORT & VIEW CONTROLS
   ========================================= */
.lp-sort-dropdown,
.lp-view-options,
.sort-by-select {
    background: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

.lp-view-btn,
.view-toggle-btn {
    width: 36px !important;
    height: 36px !important;
    background: var(--bg-card-elevated) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
}

.lp-view-btn.active {
    background: var(--primary-color) !important;
    color: #fff !important;
}

/* =========================================
   PAGINATION
   ========================================= */
.lp-pagination,
.pagination {
    display: flex !important;
    gap: 8px !important;
    justify-content: center !important;
    margin: 30px 0 !important;
}

.lp-pagination a,
.page-numbers {
    width: 40px !important;
    height: 40px !important;
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
}

.page-numbers.current,
.lp-pagination .current {
    background: var(--primary-color) !important;
    color: #fff !important;
    border-color: var(--primary-color) !important;
}

/* =========================================
   GENERAL TEXT
   ========================================= */
p {
    color: var(--text-secondary) !important;
}

a {
    color: var(--primary-color) !important;
}

/* =========================================
   SIDEBAR
   ========================================= */
.sidebar,
aside,
.widget {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    padding: 16px !important;
    margin-bottom: 16px !important;
}

.widget-title {
    color: var(--text-primary) !important;
    border-bottom: 1px solid var(--border-color) !important;
    padding-bottom: 12px !important;
    margin-bottom: 12px !important;
}

/* =========================================
   FOOTER
   ========================================= */
footer,
.lp-footer,
#footer {
    background: var(--bg-card) !important;
    color: var(--text-secondary) !important;
    border-top: 1px solid var(--border-color) !important;
}

footer a {
    color: var(--text-primary) !important;
}

footer a:hover {
    color: var(--primary-color) !important;
}
/* =========================================
   MAP POPUP (INFOWINDOW) STYLING
   ========================================= */
/* Container override */
.gm-style .gm-style-iw-c {
    background: var(--bg-card) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
}

.gm-style .gm-style-iw-d {
    overflow: hidden !important; /* Prevent scrollbars */
    max-height: none !important;
    background: var(--bg-card) !important;
}

/* Close button - cleaner look */
.gm-style .gm-ui-hover-effect {
    background: rgba(0,0,0,0.5) !important;
    border-radius: 50% !important;
    top: 8px !important;
    right: 8px !important;
    opacity: 1 !important;
    width: 28px !important;
    height: 28px !important;
    z-index: 10 !important;
}

.gm-style .gm-ui-hover-effect > span {
    background-color: #fff !important; /* Make X white */
}

/* Listing Content Structure (from main.js) */
.map-post {
    width: 260px !important; /* Fixed width */
    font-family: inherit !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Thumb Image */
.map-post-thumb {
    width: 100% !important;
    height: 150px !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 12px 12px 0 0 !important; /* Rounded top only */
    background: #2a2a2a; /* Placeholder color before load */
}

.map-post-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Critical for nice fitting */
    display: block !important;
    border-radius: 0 !important;
}

/* Text Content Container */
.map-post-des {
    padding: 12px 16px !important;
}

/* Title */
.map-post-title h5 {
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.map-post-title h5 a {
    color: var(--text-primary) !important;
    text-decoration: none !important;
}

.map-post-title h5 a:hover {
    color: var(--primary-color) !important;
}

/* Address */
.map-post-address p {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    line-height: 1.4 !important;
}

.map-post-address i {
    color: var(--primary-color) !important;
    margin-top: 3px !important; /* Optical alignment */
}

/* Triangle/Arrow at bottom of popup - match background */
.gm-style .gm-style-iw-t::after {
    background: var(--bg-card) !important;
    box-shadow: -2px 2px 2px 0 rgba(0, 0, 0, 0.1) !important; /* Match shadow roughly */
}


/* =========================================
   LEAFLET POPUP STYLING (ListingPro uses Leaflet Popups)
   ========================================= */
.leaflet-popup-content-wrapper {
    background: var(--bg-card) !important;
    border-radius: 12px !important;
    padding: 0 !important;
    overflow: hidden !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4) !important;
    border: 1px solid var(--border-color) !important;
}

.leaflet-popup-content {
    margin: 0 !important;
    width: 260px !important;
}

.leaflet-popup-tip {
    background: var(--bg-card) !important;
    box-shadow: none !important;
}

/* Fix: Hide the white egg-shaped pseudo-element at bottom of map popup */
.map-post::after {
    display: none !important;
}

.leaflet-container a.leaflet-popup-close-button {
    color: #fff !important;
    background: rgba(0,0,0,0.5) !important;
    border-radius: 50% !important;
    top: 8px !important;
    right: 8px !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
}

.leaflet-container a.leaflet-popup-close-button:hover {
    background: var(--primary-color) !important;
}

/* Fix title text color in popup */
.map-post-title h5 a {
    color: var(--text-primary) !important;
}


/* =========================================
   STRENGTHENED POPUP STYLES
   ========================================= */
/* Force override of any inline styles or parent theme styles */
div.leaflet-popup-content-wrapper,
.leaflet-popup-content-wrapper {
    background: var(--bg-card) !important;
    color: var(--text-primary) !important;
}

/* Ensure inner containers are transparent or dark */
.map-post,
.map-post-des,
.map-post-thumb {
    background: transparent !important;
}

/* Force title visibility and color */
.map-post-title h5,
.map-post-title h5 a {
    color: var(--text-primary) !important;
    display: block !important;
    visibility: visible !important;
}

/* Address text color */
.map-post-address p {
    color: var(--text-secondary) !important;
}

/* Close button positioning fix */
.leaflet-container a.leaflet-popup-close-button {
    top: 10px !important;
    right: 10px !important;
}


/* Fix Leaflet Tip Background */
.leaflet-popup-tip {
    background: var(--bg-card) !important;
    box-shadow: none !important;
}

.leaflet-popup-content-wrapper .leaflet-popup-tip {
    background: var(--bg-card) !important;
}


/* Final Tip Fix */
.leaflet-popup-tip,
div.leaflet-popup-tip,
.leaflet-popup-tip-container .leaflet-popup-tip {
    background: #1B2838 !important; /* hardcoded var(--bg-card) value just in case */
    box-shadow: none !important;
}


/* =========================================
   MAP VISUAL POLISH (ROUND 2)
   ========================================= */

/* 1. Fix Popup Tip ('White Egg') */
.leaflet-popup-tip-container {
    overflow: visible !important;
}

.leaflet-popup-tip {
    background: #1B2838 !important; /* Forces dark theme color */
    box-shadow: none !important;    /* Removes white glow/shadow */
    border: none !important;
}

/* 2. Hide Google Maps POIs (CSS Nuclear Option) */
/* Targets Google Maps specific POI image tiles */
img[src*='spotlight'], 
img[src*='gum/maps'], 
img[src*='maps.gstatic.com/mapfiles/api-3/images/spotlight-poi'] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}


/* Fix White Egg (Icon Container) */
.lpmap-icon-contianer {
    background-color: #1B2838 !important; /* Dark theme background */
    box-shadow: none !important;
}

/* Ensure the pin content inside is visible (works with both img and Font Awesome icons) */
.lpmap-icon-contianer img,
.lpmap-icon-contianer i {
    visibility: visible !important;
    color: white !important; /* White color for icons */
}

/* Only apply filter to image icons (not Font Awesome) */
.lpmap-icon-contianer img {
    filter: brightness(0) invert(1) !important; /* Makes image icons white */
}


/* NUCLEAR OPTION FOR EGG */
body div.lpmap-icon-contianer,
#map .lpmap-icon-contianer {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
}


/* TRULY NUCLEAR OPTION FOR EGG/TIP */
.leaflet-popup-tip-container,
.leaflet-popup-tip,
div.leaflet-popup-tip-container {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Ensure wrapper doesn't have shadow creating the egg */
.leaflet-popup-content-wrapper {
    box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important; /* Clean shadow */
    border-radius: 12px !important;
}


/* =========================================
   PHASE 3: MAP INTERFACE POLISH
   File: css/search-page.css
   Version: 3.1
   Implementation Date: 2026-01-20
   ========================================= */

/* 1. Hide Google Maps POIs (CSS "Nuclear" Option) */
/* Targets spotlight POI images by URL pattern */
img[src*="spotlight"],
img[src*="gum/maps"],
img[src*="maps.gstatic.com/mapfiles/api-3/images/spotlight-poi"],
img[src*="maps.gstatic.com/mapfiles/place_api"] {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Hide POI labels */
.gm-style-pla,
.gm-style-mtl {
    display: none !important;
}

/* 2. Fix Map Popup "Egg" (Leaflet Tip) */
.leaflet-popup-tip,
.leaflet-popup-tip-container {
    background-color: #1B2838 !important; /* Match dark card background */
    border: none !important;
    box-shadow: none !important;
}

/* If using older Leaflet with border-based tip */
.leaflet-popup-tip {
    border-top-color: #1B2838 !important;
    border-right-color: transparent !important;
    border-left-color: transparent !important;
}

/* 3. Polish Popup Content */
.leaflet-popup-content-wrapper,
.gm-style-iw {
    background: #1B2838 !important;
    color: #FFFFFF !important;
    border-radius: 8px !important;
    padding: 12px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

.leaflet-popup-content,
.gm-style-iw .gm-style-iw-c {
    color: #FFFFFF !important;
}

/* Fix popup image size */
.leaflet-popup-content img,
.gm-style-iw img {
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
}

/* Close button styling */
.leaflet-popup-close-button,
.gm-ui-hover-effect {
    color: #FFFFFF !important;
    font-size: 20px !important;
    padding: 4px !important;
    opacity: 0.7 !important;
    transition: opacity 0.2s ease !important;
}

.leaflet-popup-close-button:hover,
.gm-ui-hover-effect:hover {
    opacity: 1 !important;
}

/* 4. Custom Pin Icon Fallback */
/* Ensure pin image loads from correct path */
.custom-map-pin,
.hh-map-marker {
    background-image: url('../images/pin.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    width: 32px !important;
    height: 40px !important;
}