/* -----------------------------------------------------------------------
 * LUS Map Collapse
 * On the "Properties List - Half Map" layout (half_map_core.php —
 * #google_map_prop_list_wrapper next to #google_map_prop_list_sidebar),
 * adds a floating pill button that hides the map panel so the listing
 * column can take the full width, at every screen size. At 1300px+,
 * freeing up the map's ~45-55% of the viewport leaves enough room per
 * card that the listing grid there switches from one card per row to two
 * while collapsed (body.lus-map-collapsed), with each card's existing
 * layout left untouched. Below that the map simply hides and the list
 * stays a single column, same as it already behaves without a map panel.
 * Pure CSS/JS on top of the plugin's existing markup — no plugin/parent
 * theme files touched.
 * -------------------------------------------------------------------- */

.lus-map-toggle {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #222;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: bottom 0.2s ease, background-color 0.15s ease, opacity 0.2s ease, visibility 0.2s ease;
}

.lus-map-toggle:hover,
.lus-map-toggle:focus-visible {
  background: #000;
}

/* Mobile only (lus-map-collapse.js gates this class to <=991px, matching
   the breakpoint below where the map moves into normal document flow):
   hidden while the map wrapper has scrolled out of the viewport. */
.lus-map-toggle.lus-map-toggle-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.lus-map-toggle svg {
  flex: none;
}

/* Desktop/tablet only, in both collapsed and expanded states (lus-map-collapse.js
   sets this class + the --lus-map-toggle-top/-right custom properties from
   the map wrapper's measured position — see that file for why it's measured
   rather than hardcoded here, and why the position is left untouched rather
   than re-measured once collapsed). Pins the pill to the map's top-right
   corner instead of the default bottom-center placement, so "Show map" sits
   in the exact same spot "Hide map" was in rather than jumping around. */
.lus-map-toggle.lus-map-toggle-anchored {
  top: var(--lus-map-toggle-top);
  right: var(--lus-map-toggle-right);
  left: auto;
  bottom: auto;
  transform: none;
}

/* Nothing to "collapse" once the map's own fullscreen button already
   covers the whole viewport. */
body:has(#google_map_prop_list_wrapper.halfmapfull) .lus-map-toggle {
  display: none;
}

/* ---- Desktop/tablet: the map is a fixed side panel next to the sidebar ---- */
@media only screen and (min-width: 992px) {
  body.lus-map-collapsed #google_map_prop_list_wrapper {
    display: none;
  }

  body.lus-map-collapsed #google_map_prop_list_sidebar {
    width: 100%;
    left: 0;
    right: 0;
  }
}

/* ---- Mobile/tablet: the map sits in normal flow above the listing ---- */
@media only screen and (max-width: 991px) {
  body.lus-map-collapsed #google_map_prop_list_wrapper {
    display: none;
  }

  /* Parent-theme bug fix: at <=1180px my_media.css gives the admin-bar
     case `top: 102px !important` on both the map wrapper AND the sidebar
     (correct while they're position:fixed panels that must clear the WP
     admin bar). At <=991px both become position:relative — and the theme
     re-zeroes the WRAPPER (`.admin-bar #google_map_prop_list_wrapper
     { top: 0px!important }`) but forgot the SIDEBAR, leaving it
     relatively shifted 102px down: a visible gap between the map and the
     filters, only for logged-in users. Zero it the same way. */
  .admin-bar #google_map_prop_list_sidebar {
    top: 0px !important;
  }
}

/* ---- Two cards per row while the map is collapsed, 1300px+ only ----
   Below 1300px a freed-up map panel still isn't enough extra width for two
   cards to look right side by side, so it stays the single column it
   already was (992-1299px keeps the map-visible layout's card width, just
   full-bleed across the freed space, from the rule above). Cards keep
   their existing layout untouched — only the grid changes. */
@media only screen and (min-width: 1300px) {
  body.lus-map-collapsed #listing_ajax_container {
    display: flex;
    flex-wrap: wrap;
    gap: 24px;
  }

  body.lus-map-collapsed #listing_ajax_container > .entry-title,
  body.lus-map-collapsed #listing_ajax_container > .single-content {
    flex: 0 0 100%;
    width: 100%;
  }

  body.lus-map-collapsed #listing_ajax_container > .listing_wrapper {
    flex: 0 0 calc(50% - 12px);
    max-width: calc(50% - 12px);
  }
}

/* ---- Narrow, centered search form while the map is collapsed, 1200px+ ----
   The full-width sidebar (rule above) is fine for the card grid, but the
   search form alone looks stretched-out edge to edge at that width — just
   the form narrows to a centered 60% column; the card list below is
   untouched. float:none is needed for margin:auto centering to apply —
   the base #advanced_search_map_list rule (parent style.css) floats it
   right. The sidebar itself defaults to an off-white #FCFCFC (parent
   style.css), a shade different enough from the form's own white to show
   as a visible band on either side of the centered 60% column — set to
   true white here too so the whole strip reads as one seamless block. */
@media only screen and (min-width: 1200px) {
  body.lus-map-collapsed #google_map_prop_list_sidebar {
    background-color: #fff;
  }

  body.lus-map-collapsed #advanced_search_map_list {
    width: 60%;
    float: none;
    margin: 0 auto;
    background-color: #fff;
  }
}

/* ---- Results count + sort dropdown row ----
   property_list_filters_search_hald_map.php's `.wprentals_adv_listing_filters_head`
   (`.half_map_results` text + the sort dropdown's `.col-md-3` wrapper) is a
   plain flex row at every width by default (parent style.css) — same class
   is also used on the non-half-map Properties List filters template, hence
   scoping every rule here to `.is_half_map`. */

/* The static "Sort By" label (wprentals_display_orderby_dropdown() override
   in functions.php) sits right before the dropdown box, inside the same
   `.col-md-3` wrapper — laid out as a small flex row of its own so the two
   sit side by side instead of the label pushing the box onto its own line. */
.is_half_map .wprentals_adv_listing_filters_head .col-md-3 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.is_half_map .wprentals_adv_listing_filters_head .lus-sort-by-label {
  font-size: 14px;
  font-weight: 400;
  color: #5D6475A6;
  white-space: nowrap;
}

.is_half_map .wprentals_adv_listing_filters_head .dropdown.listing_filter_select {
  flex: 1 1 auto;
  min-width: 0;
}

/* .caret:after (parent style.css) is the dropdown arrow glyph, absolutely
   positioned at `right: -10px; width: 20px;` off `.filter_menu_trigger`
   (its nearest `position: relative` ancestor) — so it always overlaps the
   trigger's own right edge by half its width. That's invisible everywhere
   else this trigger style is used because those boxes have plenty of
   spare width, but here the box now shrink-wraps to its own text (the
   nowrap rule below), so the label's last few characters ran right up to
   that edge with nothing reserved for the glyph. Padding it out reserves
   that room instead of relying on incidental slack. */
.is_half_map .wprentals_adv_listing_filters_head .filter_menu_trigger {
  padding-right: 24px;
}

/* "Price High to Low" / "Price Low to High" (data-price-sort, functions.php's
   wprentals_display_orderby_dropdown() override) only make sense once a
   Rate Plan disambiguates which of a stay's 4 prices to sort by. Server-
   rendered on `#filter_order` for the initial load; lus-half-map-stay-type.js
   toggles the same class after a Rate Plan click so it stays correct
   without a page reload. */
#filter_order.lus-price-sort-hidden li[data-price-sort] {
  display: none;
}

/* ---- >990px: let the sort box grow to fit its own label ----
   The trigger's text is just the chosen option's own label now ("Default",
   "Price High to Low", etc — see the functions.php override above), but the
   parent's fixed col-md-3 (25%) can still be narrower than the label once
   the "Sort By" span above shares that space with it, wrapping the box
   onto two lines. There's always slack in this row to grow into:
   `.half_map_results` carries `margin-right: auto` (parent style.css), so
   it's the only flexible-width item — widening the sort box just shrinks
   that auto margin, it never pushes the row's total width past 100%. */
@media only screen and (min-width: 991px) {
  .is_half_map .wprentals_adv_listing_filters_head .col-md-3 {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }

  .is_half_map .wprentals_adv_listing_filters_head .filter_menu_trigger {
    white-space: nowrap;
  }
}

@media only screen and (max-width: 990px) {
  .is_half_map .wprentals_adv_listing_filters_head {
    flex-wrap: wrap;
  }

  .is_half_map .wprentals_adv_listing_filters_head .half_map_results,
  .is_half_map .wprentals_adv_listing_filters_head .col-md-3 {
    flex: 0 0 50%;
    max-width: 50%;
    margin-right: 0;
    box-sizing: border-box;
  }

  .is_half_map .wprentals_adv_listing_filters_head .dropdown.custom_icon_class.form-control {
    max-width: none;
    width: 100%;
  }
}

/* ---- Map popup card: price badge ----
   Parent theme's .prop_pricex (style.css) sits at `position: absolute;
   right: 15px; bottom: 66px;` — almost the same vertical position as
   #infobox_title (`bottom: 58px`, spanning 85% of the card width from the
   left). Any title long enough to reach that last 15% runs straight into
   the price text. Move the price into its own badge in the image's
   top-right corner instead — clear of the title regardless of length.
   Parked to the left of #infocloser (style.css: the 24px close button
   pinned at `top: 10px; right: 10px`) rather than sharing its horizontal
   space, so the two never overlap. Colored to match the site's brand red
   already used for the "verified"/"featured" ribbons on the card list
   (.status_verified, .featured_div — #e52737, injected at wp_head by
   wpestate_generate_options_css()/customcss.php from the
   wp_estate_main_color option) so it reads as the same badge language,
   with its own background so it stays legible over any photo — the same
   way a title over an arbitrary photo needs .infogradient behind it.
   .info_details is already `position: absolute` (style.css), so this only
   needs to override top/right/bottom/left — no new positioning context.
   color needs !important: that same customcss.php also injects
   `.prop_pricex { color: <main-color> !important; }` (from the
   wp_estate_main_color option, the same #e52737 used for the background
   here) as an inline <style> block printed after every enqueued
   stylesheet — a plain `color` here loses to it regardless of selector
   specificity, rendering the text the same red as its own background. */
.leaflet-popup-content .info_details .prop_pricex {
  top: 12px;
  right: 42px;
  bottom: auto;
  left: auto;
  float: none;
  background: #e52737;
  color: #fff !important;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 600;
  z-index: 5;
}

/* ---- Map price labels: bold price, tight spacing ----
   pin_management.php's wpestate_pin_unit_creation() now builds this text
   as "<span class="wprentals-pin-price">$10</span><span
   class="wprentals-pin-period">/night</span>" — no spaces anywhere in that
   string (currency-to-amount and amount-to-period are both stripped in
   PHP), feeding both the always-visible on-map pin label
   (.interior_pin_price) and the popup card's price badge (.prop_pricex,
   above).

   style.css's `.wpestate_marker span { color: #fff; font-size: 13px; }`
   is meant for some other marker feature, but as a bare-tag selector it
   also catches these two new spans wherever they land inside a marker's
   own .wpestate_marker icon — turning them invisible-white against the
   pin label's white pill background. Both rules below need >= 2-class
   specificity (0,2,0) to outrank it (0,1,1); `color`/`font-size: inherit`
   restores each span to plain surrounding text before font-weight makes
   the price bold. .prop_pricex isn't a descendant of .wpestate_marker (a
   separate popup vs. marker-icon DOM subtree) so that rule never reaches
   it there, but the same restore keeps both contexts consistent.
   font-weight also needs resetting here specifically for the popup badge:
   .prop_pricex sets `font-weight: 600` on itself (above), which the period
   span would otherwise inherit — reading as bold too, right next to the
   price's own (bolder, 700) weight, instead of standing apart from it. */
.interior_pin_price .wprentals-pin-period,
.prop_pricex .wprentals-pin-period {
  color: inherit;
  font-size: inherit;
  font-weight: normal;
}

.interior_pin_price .wprentals-pin-price,
.prop_pricex .wprentals-pin-price {
  color: inherit;
  font-size: inherit;
  font-weight: 700;
}

/* ---- On-map price pill: brand red, home tab on top, range behind an icon ----
   wpestate_pin_unit_creation() (pin_management.php) now builds the on-map
   pill (.interior_pin_price, inside .wpestate_marker.openstreet_price_marker)
   as a home-icon tab + "<price><info icon>/<period>", and the popup badge
   (.prop_pricex, styled red further up) as the same minus the home tab —
   no "Starts from", no mid-week. The parent theme's pill is white with a
   white pointer triangle (style.css .wpestate_marker / :before); repaint
   both the brand red the popup badge and the verified/featured ribbons use
   (#e52737 = wp_estate_main_color, matching .prop_pricex above). */
.wpestate_marker.openstreet_price_marker {
  background-color: #e52737;
  color: #fff;
}

.wpestate_marker.openstreet_price_marker:before {
  border-top-color: #e52737;
}

/* Single property page ("On the Map", #google_map_on_list): the pin carries
   just a home icon rather than a price (built in lus-map-popup-address.js's
   wprentals_createMarker_leaflet). Shrink the price pill down to a compact
   icon marker — the red background + pointer triangle come from the rules
   above. */
.wpestate_marker.openstreet_price_marker.wprentals-pin-home-only {
  min-width: 0;
  padding: 6px 8px;
  border-radius: 6px;
}
.wprentals-pin-home-only .interior_pin_price {
  display: flex;
  align-items: center;
  justify-content: center;
}
.wprentals-pin-home-only .interior_pin_price i {
  font-size: 13px;
  line-height: 1;
  color: #fff;
}

/* Home icon, on the on-map pill only (the popup already shows the photo +
   title, so it doesn't need a "which listing is this" cue): a half-circle
   tab centred on top of the pill, with the price label sitting underneath
   it in normal flow. Anchored to .wpestate_marker (position: absolute in
   parent style.css) since .interior_pin_price is static — bottom: 100%
   parks the tab's flat edge flush on the pill's top edge. */
.interior_pin_price .wprentals-pin-home {
  position: absolute;
  left: 50%;
  bottom: 100%;
  margin-bottom: -1px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 16px;
  background: #e52737;
  border-radius: 30px 30px 0 0;
}

.interior_pin_price .wprentals-pin-home i {
  font-size: 10px;
  line-height: 1;
  color: #fff;
  position: relative;
  top: 1px;
}

/* Range info icon in either map context: take the pill/badge's own white
   text (not the grey it uses on the cards), tighten its padding for the
   small pill, and — since both sit near the top of their box — open the
   "$min – $max" bubble downward instead of up. */
.interior_pin_price .wprentals-price-range,
.prop_pricex .wprentals-price-range {
  color: currentColor;
  margin: 0 1px;
  padding: 0 2px;
}

.interior_pin_price .wprentals-price-range-pop,
.prop_pricex .wprentals-price-range-pop {
  bottom: auto;
  top: calc(100% + 7px);
}

.interior_pin_price .wprentals-price-range-pop::after,
.prop_pricex .wprentals-price-range-pop::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #222;
}

/* ---- Map control bar: stop it from blocking clicks in its empty space ----
   #gmap-control-list (parent theme's google_maps_base_map_list.php) is
   just a wrapper for 6 small icon buttons — #gmapzoomplus, #gmapzoomminus,
   #geolocation-button, #gmap-full, #gmap-prev, #gmap-next — clustered on
   its left edge, but the box itself (style.css: `left: 15px; right: 0px;
   height: 60px; z-index: 999`) spans almost the full map width. Since it's
   a real positioned, sized element (not just its icons) sitting above
   everything else in that strip, every pixel of it — including the empty
   space to the right of the actual buttons, where there's nothing to see —
   intercepts clicks meant for whatever renders underneath. That's exactly
   the top-left corner of the map where a popup for a marker near the top
   opens (keepPopupInView() above), so its close "x" and other controls
   could receive clicks that never actually happen: this container was on
   top and ate them first. Make the wrapper click-through and only let its
   actual buttons capture clicks. */
#gmap-control-list {
  pointer-events: none;
}

#gmap-control-list > * {
  pointer-events: auto;
}

/* ---- <=425px: same row stacks full-width, sort dropdown on top ---- */
@media only screen and (max-width: 425px) {
  .is_half_map .wprentals_adv_listing_filters_head {
    flex-direction: column;
    align-items: stretch;
  }

  .is_half_map .wprentals_adv_listing_filters_head .half_map_results,
  .is_half_map .wprentals_adv_listing_filters_head .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .is_half_map .wprentals_adv_listing_filters_head .col-md-3 {
    order: 1;
  }

  .is_half_map .wprentals_adv_listing_filters_head .half_map_results {
    order: 2;
    margin-right: 0;
    padding-top: 18px;
  }
}