/*
Theme Name: WpRentals Child theme
Theme URI: http://themeforest.net/user/wpestate
Description: Ultimate WordPress Theme created by WpEstate for accommodation booking. WpRentals is clean, flexible, fully responsive and retina Ready. Its smart settings allow you to build outstanding renting websites easily and fast.
Version: 3.15.60
Author: wpestate.org
Author URI: http://themeforest.net/user/annapx
Tags: white, one-column, two-columns,left-sidebar, right-sidebar, fluid-layout , custom-menu, theme-options, translation-ready
License: GNU General Public License v2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: wprentals

-------------------------------------------------------------- */

/* Price text color and weight on property detail pages */
body.single-estate_property .listing_main_image_price {
  color: #050505 !important;
}
body.single-estate_property .listing_main_image_price .wprentals-price-line {
  font-weight: bold;
}

/* Two-column header layout: Title / Location / Reviews / Wishlist stacked on the
   left (.wprc-header-left), price on the right (.wprc-header-right) — both built
   by JS in functions.php, which moves the existing children (plus the sidebar's
   #add_favorites button) into these two wrappers on page load. */
.listing_type_5 .listing_type_title_wrapper {
  display: flex !important;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  flex-wrap: nowrap;
  /* Hidden until the restructuring JS (functions.php) finishes and adds
     .wprc-ready, so the page never flashes the original single-column layout
     first. visibility (not display/opacity) keeps the reserved space stable —
     no layout shift when it appears. Safety-net: if JS never runs (error, no
     jQuery), fall back to visible after a beat so the content isn't lost. */
  visibility: hidden;
  animation: wprc-header-reveal-fallback 0s 1.5s forwards;
}
.listing_type_5 .listing_type_title_wrapper.wprc-ready {
  visibility: visible;
  animation: none;
}
@keyframes wprc-header-reveal-fallback {
  to { visibility: visible; }
}

.wprc-header-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 70% of the row, minus its share of the 24px gap, so 70% + 30% + gap == 100%. */
  flex: 0 1 calc(70% - 12px);
  max-width: calc(70% - 12px);
  min-width: 0;
  box-sizing: border-box;
}
.wprc-header-left h1 {
  margin: 0;
  /* The parent theme's own .entry-prop rule (my_media.css, <=1220px) already
     sets width:100%, but its unqueried base rule in style.css sets a fixed
     1170px instead — depending on which one wins the cascade, the title can
     end up shrink-wrapped to its own text instead of filling the column.
     Force it explicitly so it always stretches full width here. */
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  align-self: stretch !important;
}
.wprc-header-left .listing_main_image_location {
  position: static !important;
  /* The parent theme's own rule sets margin-left:auto (meant to offset it inside
     its old absolutely-positioned/floated layout) — as a flex column item here,
     that auto margin centers it horizontally instead. */
  margin: 0 !important;
  float: none !important;
  width: auto !important;
  text-align: left !important;
}
.wprc-header-left .property_ratings {
  margin: 0 !important;
  float: none !important;
}

.wprc-header-right {
  flex: 0 1 calc(30% - 12px);
  max-width: calc(30% - 12px);
  box-sizing: border-box;
  text-align: right;
}
/* The link ships with an inline style="display:block" (functions.php), which
   stretches it to the full width of .wprc-header-right — same "whole row is
   clickable" issue as the wishlist button. Shrink it to fit its own text. */
.wprc-header-right .wprentals-custom-pricing-link {
  display: inline-block !important;
}
/* Emptied by the wp_footer JS once the price is relocated down into the
   category row at <=550px (see .wprc-category-price below) — collapse the
   now-empty column so it doesn't reserve space next to the full-width title. */
.wprc-header-right:empty {
  display: none;
}

/* Property categories pulled out of the inline icon bar (listing_page_5.php
   passes '' for $property_category to wprentals_icon_bar_classic()) and shown
   on their own line directly under the photo gallery, above the icon bar, as
   "Categories: Apartment, Beachfront, Cottage". The bar is a flex-nowrap row,
   so a 2-3 term category list used to crowd the Guests / Bedrooms items. */
.listing_type_5 .lus-property-categories {
  padding-top: 24px;
  font-size: 15px;
  line-height: 1.6;
  color: #5d6475;
}
/* The icon bar's own 30-38px top padding is too much now that the categories
   line sits right above it. */
.listing_type_5 .lus-property-categories + .category_wrapper {
  padding-top: 16px;
}
.listing_type_5 .lus-property-categories__label {
  margin-right: 6px;
  font-weight: 600;
  color: #050505;
}
.listing_type_5 .lus-property-categories__list a {
  color: #5d6475;
}
.listing_type_5 .lus-property-categories__list a:hover {
  color: #e52737; /* site primary red — parent theme's stock link hover is lilac (#b881fc) */
}

/* Wrapper around the sidebar's Terms and Conditions + Features panels
   (wprentals_property_sidebar_sections()). js/lus-property-mobile-sections.js
   moves it above the Availability calendar while the columns are stacked. It
   makes no box of its own, so the panels inside lay out exactly as if it
   weren't there, in either place. */
.lus-terms-features {
  display: contents;
}

/* <=991px the sidebar column stacks under the main one, so the 30px left
   gutter (parent style.css) and 30px top padding (parent my_media.css) that
   separate it from the main column when side by side just indent and push
   down its sections. */
@media (max-width: 991px) {
  #primary.listing_type_5.listingsidebar2 {
    padding: 0;
  }
}

/* <=550px: header goes full width, and the price (moved here by the wp_footer
   JS) sits beside the category details instead — each taking half the row,
   with the Check Availability button wrapping to its own line below since the
   two 50% items already fill the row. */
@media (max-width: 550px) {
  .wprc-header-left {
    flex: 0 1 100% !important;
    max-width: 100% !important;
  }

  .listing_type_5 .category_wrapper {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .listing_type_5 .category_wrapper .category_details_wrapper {
    flex: 0 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    width: auto !important;
    box-sizing: border-box !important;
    padding-top: 0 !important;
  }
  .listing_type_5 .category_wrapper .wprc-category-price {
    flex: 0 1 calc(50% - 6px) !important;
    max-width: calc(50% - 6px) !important;
    box-sizing: border-box !important;
  }
  .listing_type_5 .category_wrapper .wprc-category-price .listing_main_image_price {
    position: static !important;
    width: auto !important;
    text-align: right !important;
  }
  .listing_type_5 .category_wrapper .check_avalability {
    flex: 0 1 100% !important;
    max-width: 100% !important;
    float: none !important;
    text-align: center !important;
  }
}

/* <400px (small phones): the icon bar (Entire home / Guests / Bedrooms) gets
   a narrower 40% column with smaller 22px icons and 13px text, and the price
   takes whatever width is left (the 12px row gap included) so its range
   wraps onto fewer lines. Overrides the 50/50 split above. */
@media (max-width: 399px) {
  .listing_type_5 .category_wrapper .category_details_wrapper {
    flex: 0 0 40% !important;
    max-width: 40% !important;
  }
  .listing_type_5 .category_wrapper .category_details_wrapper svg {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
  }
  /* "Entire home" is a link, which the theme sizes on its own (15px). */
  .listing_type_5 .category_wrapper .category_details_wrapper a,
  .listing_type_5 .category_wrapper .category_details_wrapper .no_link_details {
    font-size: 13px;
  }
  .listing_type_5 .category_wrapper .wprc-category-price {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}

/* #add_favorites moved out of the sidebar booking widget into the title column —
   strip its original bordered-button look down to just a circular heart-icon
   badge (appended in the JS in functions.php; the text label is hidden further
   down — see "Favorites + Share: icon-only"). */
.wprc-header-wishlist {
  position: static !important;
  float: none !important;
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center;
  gap: 10px;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  cursor: pointer;
  color: #050505 !important;
  font-weight: 600;
  font-size: 15px;
  text-align: left !important;
}
.wprc-header-wishlist:hover {
  color: #050505 !important;
  background: transparent !important;
  border-color: transparent !important;
}
.wprc-header-wishlist .wprc-wishlist-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eceff2;
  color: #555;
  flex-shrink: 0;
  line-height: 1;
}
.wprc-header-wishlist .wprc-wishlist-icon i {
  display: inline-block;
  line-height: 1;
  margin: 0 !important;
}

/* "Share this property" button — built fresh by the JS in functions.php
   (no parent-theme equivalent here), styled to match #add_favorites right
   next to it: circular icon badge (label hidden — see "Favorites + Share:
   icon-only" below). */
.wprc-header-share {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: #6b6b6b;
  font-weight: 500;
  font-size: 15px;
}
.wprc-header-share .wprc-share-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #eceff2;
  color: #555;
  flex-shrink: 0;
  line-height: 1;
}
.wprc-header-share .wprc-share-icon i {
  display: inline-block;
  line-height: 1;
}
.wprc-header-share:focus-visible {
  outline: 2px solid #6b6b6b;
  outline-offset: 4px;
}
/* Brief confirmation state after the link is copied to the clipboard
   (desktop/no native share sheet) — reverts automatically after 2s. */
.wprc-header-share.wprc-share-copied {
  color: #2e7d32;
}
.wprc-header-share.wprc-share-copied .wprc-share-icon {
  background: #e6f4ea;
  color: #2e7d32;
}

/* ── Favorites + Share: icon-only, side by side ─────────────────────────────
   Both buttons sit on one row under the title block, showing only their
   circular icon badge. The wishlist label is a bare text node the theme's
   AJAX toggle keeps rewriting ("Saving…" / "Add to" / "Remove from
   Favorites"), so font-size:0 is the reliable way to swallow it; the share
   label is a real <span>, so display:none is enough there. */
.wprc-header-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 4px;
}
.wprc-header-actions .wprc-header-wishlist {
  align-self: center !important;
  gap: 0 !important;
  font-size: 0 !important;
}
.wprc-header-actions .wprc-header-share {
  gap: 0;
}
.wprc-header-share .wprc-share-label {
  display: none;
}
/* give the glyph a real size back inside the font-size:0 wishlist */
.wprc-header-wishlist .wprc-wishlist-icon {
  font-size: 15px;
}
.wprc-header-actions .wprc-wishlist-icon,
.wprc-header-actions .wprc-share-icon {
  transition: background-color 0.12s ease, color 0.12s ease;
}
.wprc-header-wishlist:hover .wprc-wishlist-icon,
.wprc-header-share:hover .wprc-share-icon {
  background: #e2e5ea;
  color: #050505;
}

/* Booking widget's "Contact Owner" button (#contact_host) normally shares a
   50/50 row with #add_favorites (.third-form-wrapper > two .col-md-6
   .reservation_buttons columns) — but the wp_footer JS above relocates
   #add_favorites into the page header and removes its now-empty column, so
   #contact_host is left as the row's only child. Stretch it to the full
   width there, matching #submit_booking_front ("Book Now") right above it. */
.third-form-wrapper > .reservation_buttons:only-child {
  width: 100% !important;
  float: none !important;
}

/* Card layout type 3 (templates/property_unit_3.php): the star rating block
   is commented out there for now. It used to be the first thing inside
   .title-container, and its own top margin (.property-rating's 15px or
   .rating_placeholder's 20px, both in parent style.css) was what pushed the
   title down from the image above it — with that element gone, the title
   sits flush against the image. Restore the gap directly on the container
   instead, matching the parent theme's own .property_unit_v1 .title-container
   rule (style.css) which does the same for that card type. */
.property_unit_v3 .title-container {
  padding-top: 20px;
}

/* Same fix, same reason, for the "wide" row card (templates/property_unit_wide.php,
   type 3 branch) used on Properties List - Half Map and similar pages. This card
   already carried its own 15px padding-top (parent style.css:
   .wide_property.property_flex.property_unit_type_3 .title-container) meant to sit
   on top of the rating's own margin (15-30px) - with the rating gone, bump it up to
   cover what that margin used to add. */
.wide_property.property_flex.property_unit_type_3 .title-container {
  padding-top: 30px;
}

/* Card layout type 3 (templates/property_unit_3.php): "City, Region,
   Province" address (wprc_card_address_parts(), functions.php) in place of
   the category/action text ("Bungalow / Entire home"), with a leading Font
   Awesome map-pin icon in place of the type icon the parent theme drew via
   `.actions_icon:after` (fontello house glyph) — that class is no longer on
   the markup, so this is the only icon on the line now. align-items:
   flex-start (not center) so the pin stays pinned to the top of the address
   text instead of re-centering itself against the whole block whenever the
   address wraps to two lines. */
.wprc-card-address {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
}
.wprc-card-address i {
  /* Same grey the parent theme used for the house icon it's replacing
     (.property_unit_v3 .category_tagline.actions_icon:after, style.css). */
  color: #5d6475;
  font-size: 13px;
  line-height: 1.4;
  flex-shrink: 0;
}
.wprc-card-address span {
  line-height: 1.4;
}
/* City is the leading, most relevant part of the address — medium weight
   sets it apart from the lighter Region/Province text that follows it. */
.wprc-card-address-city {
  font-weight: 500;
}

/* Property cards: stack the address parts (City / Region / Province) one
   per line rather than a single wrapped "City, Region, Province" run. The
   pin stays top-aligned thanks to .wprc-card-address's
   align-items: flex-start. wprc_card_address_html() (functions.php) emits
   the per-part spans for every card that uses .wprc-card-address
   (property_unit_3.php, property_unit_wide.php). */
.wprc-card-address .wprc-card-address-part {
  display: block;
}

/* Map marker popup (js/lus-map-popup-address.js override of the parent
   theme's wprentals_createMarker_leaflet): same city/area + pin icon swap,
   inside .prop_detailsx. It used to hold short "Type / Action" text on one
   fixed 45px line (parent style.css), inside a popup card (.info_details)
   that's `position: absolute` with hand-calibrated negative margins/height
   — a fixed-size box the theme manually centers over the marker, instead
   of letting Leaflet size and position the popup itself the way it
   normally does for arbitrary content. A full "City, Area, ..." address
   doesn't fit that one fixed line. A first attempt grew the fixed height
   by a guessed amount and shifted everything positioned relative to it to
   match — fragile (wrong for any address longer/shorter than guessed) and
   still looked cramped.
   This instead removes the manual sizing for the Leaflet card entirely:
   position: relative (keeps #infocloser's absolute close-button anchored
   to this card, same as before) with no fixed height/margin lets the
   browser size the card from its actual content, and Leaflet's own popup
   positioning (it measures .leaflet-popup-content's real rendered size
   and centers/repositions on that, standard Leaflet behavior) takes over
   instead of the theme's manual math. Address and the bed/guest icons
   switch from side-by-side floats to stacked full-width rows, each only
   as tall as its own content needs — address first, icons below, per the
   layout requested. #infobox_title/.prop_pricex, previously positioned
   `bottom: ...` relative to the whole (now variable-height) card, are
   repointed at the image specifically (always a fixed 175px, per parent
   style.css .infoimage) via `top` instead, so they stay put regardless of
   how tall the address grows. */
.leaflet-popup-content .info_details,
.leaflet-popup-content .openstreet_map_price_infobox {
  position: relative;
  height: auto;
  margin-top: 0;
  margin-left: 0;
}
#infobox_title {
  bottom: auto;
  top: 130px;
}
/* Originally an overlay near the image's bottom-right corner (parent
   style.css: position:absolute; right:15px; bottom:66px — which, on the
   old fixed 220px card, placed it inside the gradient at roughly 154px
   from the top). Restored as an overlay in the same spot, but anchored
   with `top` off the image's own fixed 175px height (like #infobox_title
   above) instead of `bottom` off the card's now-variable total height —
   moving it into normal flow put it below the icons instead of on the
   image. */
.prop_pricex {
  position: absolute;
  top: 138px;
  right: 15px;
  bottom: auto;
  float: none;
  padding: 0;
}
.prop_detailsx {
  float: none;
  display: flex;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  max-width: none;
  height: auto;
  line-height: 1.3;
  padding: 8px 15px 4px;
}
.prop_detailsx i {
  /* Same grey the normal listing card's address icon uses
     (.wprc-card-address i, above) instead of the map's purple accent. */
  color: #5d6475;
  font-size: 12px;
  flex-shrink: 0;
  margin-top: 0.2em;
}
.wprc-popup-address-text {
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  min-width: 0;
}
.infodetails {
  float: none;
  display: flex;
  /* DOM order is guest-count then room-count (js/lus-map-popup-address.js),
     but both were float:right before, which visually reversed them (room
     count first/left, guest count second/right, as seen on the card
     today) — row-reverse keeps that same visual order now that they're
     flex items instead of floats. */
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin: 0;
  padding: 4px 15px 10px;
}
.infodetails #infoguest,
.infodetails #inforoom {
  float: none;
  margin-left: 0;
}

/* "No reviews yet" state — grayed-out stars + label, used instead of either a
   fake rating (parent theme trusts stale property_stars demo data blindly) or
   blank space, wherever a property genuinely has 0 published reviews. */
.wprc-no-reviews {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.wprc-no-reviews-stars {
  color: #d5d5d5;
  font-size: 13px;
  letter-spacing: 2px;
}
/* Parent theme's .property_ratings i { color: #ffc662 } targets the icons
   directly and outranks the rule above (which only colors the wrapping
   span), so it paints these "no reviews" stars gold. Beat it on specificity. */
.property_ratings .wprc-no-reviews-stars i {
  color: #d5d5d5;
}
.wprc-no-reviews-label {
  font-size: 13px;
  color: rgba(0, 0, 0, 0.45);
}

/* Multi-line price ranges: plain in-flow block instead of the base theme's
   absolute-positioned single-line price. */
.listing_type_5 .listing_main_image_price {
  position: static !important;
  width: auto !important;
  margin: 0 !important;
  text-align: right;
  font-size: 18px;
}
/* Extra specificity (body.single-estate_property + .listing_type_5) needed to beat
   the earlier "Price text color ... on property detail pages" rule above, which
   also targets .listing_main_image_price with !important. */
body.single-estate_property .listing_type_5 .listing_main_image_price {
  color: rgba(0, 0, 0, 0.6) !important;
}
.listing_type_5 .listing_main_image_price .wprentals-price-line {
  line-height: 1.2;
}

/* Each rate-type price line */
.wprentals-price-line {
  display: block;
  line-height: 1.5;
}

.wprentals-price-line .wprentals-price-unit {
  font-size: 0.75em;
  font-weight: normal;
}

/* "Show detailed pricing" link: sized down for mobile, where the default 18px read
   as oversized next to the price lines above it. */
.wprentals-custom-pricing-link {
  font-size: 16px;
}
@media only screen and (max-width: 768px) {
  .wprentals-custom-pricing-link {
    font-size: 13px;
  }
}

/* Mobile/tablet booking bar (price + "Booking Request"/"Reserve Now" button) and its interaction with
   the wp-bottom-menu plugin nav. The parent theme only shows .mobile_booking_wrapper
   at max-width:768px — extended here to 990px so tablets get it too, and every
   adjustment below is scoped to the same range. */
@media only screen and (max-width: 990px) {
  .mobile_booking_wrapper {
    display: block;
    /* The plugin nav (Home/Account/Cart/Search) and this bar are both
       position:fixed; bottom:0 — the plugin's z-index (9999) sits above this bar's
       (99), so it was covering it entirely. Lift this bar up by the nav's rendered
       height (~10px+10px padding + 22px icon + 5px gap + ~16px label ≈ 68px) so
       they stack instead of overlap. */
    bottom: 68px;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.12) !important;
  }

  /* The wp-bottom-menu plugin's own shadow (box-shadow: 0 -5px 10px ...) sits right
     above the booking bar — remove it only on the single property page, where the
     booking bar now stacks directly on top of the nav; leave it everywhere else. */
  body.single-estate_property .wp-bottom-menu {
    box-shadow: none !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
  }

  /* Shrink and keep the "$X/period" price on one line in the booking
     bar — at the default 15px it wrapped to two lines and crowded the button. */
  .mobile_booking_wrapper .listing_main_image_price {
    font-size: 13px;
    white-space: nowrap;
  }
  .mobile_booking_wrapper .listing_main_image_price .pernight_label {
    font-size: 11px;
  }

  /* Price-range info icon ("$min – $max" bubble, see .wprentals-price-range
     above): the price sits against the bar's left edge, so the default
     right-anchored bubble (grows leftward from the icon) would run off-screen.
     Open it rightward from the icon instead — still upward over the page. */
  .mobile_booking_wrapper .wprentals-price-range-pop {
    right: auto;
    left: 0;
    text-align: left;
  }
  .mobile_booking_wrapper .wprentals-price-range-pop::after {
    right: auto;
    left: 9px;
  }

  /* Star rating removed from the booking bar per request. */
  .mobile_booking_wrapper .property_ratings {
    display: none;
  }

  /* The booking-form slide-up panel (#booking_form_request.booking_on_mobile)
     only has a uniform 30px padding, which isn't enough clearance at the bottom to
     clear the two stacked fixed bars (booking bar ~60px + wp-bottom-menu ~68px) —
     its last buttons end up hidden behind them when scrolled to the end. */
  #booking_form_request.booking_on_mobile {
    padding-bottom: 160px;
  }
}

/* "Show detailed pricing" / "Price" tab both jump to #listing_price. The tab menu
   (.property_menu_wrapper_hidden) is position:fixed and sits on top of the page once
   its sticky state kicks in, so a plain anchor jump lands with the target's heading
   hidden underneath it. scroll-margin-top pushes the landing point down by the fixed
   bar's height (plus the WP admin bar, when logged in) so the heading stays visible. */
#listing_price {
  scroll-margin-top: 190px;
}
.admin-bar #listing_price {
  scroll-margin-top: 242px;
}

/* Properties List - Half Map: the card-level price panel
   (.wprentals-card-price-corner, printed by the child theme's
   templates/property_unit_wide.php only on this page) shows the same full
   nightly/weekend/weekly/monthly breakdown as the property detail page's
   own price panel (wprentals_detail_page_price_html() in functions.php),
   replacing the parent theme's original bottom-left overlay on the
   thumbnail at every width. Above 425px it's a small stacked panel in the
   card's BOTTOM-right corner — deliberately not the top-right, where the
   "verified"/status badge already sits (.property_listing
   .property_status_wrapper, parent style.css) and a panel tall enough for
   several rate lines would run straight into it; bottom-right is free
   once the original overlay (below) is hidden, so the two badges never
   compete for the same space regardless of how many rate lines a given
   property has. Below 425px, the card already stacks (image on top,
   details below — see the parent theme's own max-width:430px block) — the
   price panel moves out of the image corner into its own column, sitting
   beside the title+category block instead (60% title/category, 40%
   price), via a CSS grid on .property_listing itself (its four relevant
   children — image, title-container, category_tagline_wrapper, the price
   panel — are already siblings, so this needs no markup changes, just
   grid-area assignment). :has() scopes all of this to cards that
   actually have the panel, so other pages sharing this same "wide" card
   template (e.g. search results) are untouched. The "Show detailed
   pricing" link + per-line min-stay/weekend-nights notes the shared
   function prints are hidden here (needs !important — the function
   ships them with an inline style="display:..." for their original,
   detail-page context, which otherwise wins) — #listing_price only
   exists on the property's own detail page, and there's no room for them
   in a card. */
.property_listing:has(.wprentals-card-price-corner) > .listing-unit-img-wrapper .price_unit_wrapper,
.property_listing:has(.wprentals-card-price-corner) > .listing-unit-img-wrapper > [itemprop="offers"] {
  display: none;
}

.wprentals-card-price-corner {
  position: absolute;
  top: 50%;
  bottom: auto;
  right: 15px;
  transform: translateY(-50%);
  /* Above the parent theme's .wide_property.property_flex .title-container
     (position:relative; z-index:99) — that box is full-width and transparent
     and comes later in the DOM, so at an equal z-index it was painting over
     this panel and eating the price-range icon's hover/click. */
  z-index: 104;
  max-width: 170px;
  text-align: right;
  pointer-events: auto;
}

.wprentals-card-price-corner .wprentals-price-line {
  font-size: 14px;
  font-weight: 600;
  color: #222;
  line-height: 1.35;
}

.wprentals-card-price-corner .wprentals-price-unit {
  font-size: 0.75em;
  font-weight: 400;
  color: #777;
}

.wprentals-card-price-corner .wprentals-price-meta,
.wprentals-card-price-corner .wprentals-custom-pricing-link {
  display: none !important;
}

/* Compressed price ranges. On a rate that spans a range the card shows
   only the lowest price, followed by this info icon; the full "$min – $max"
   sits in .wprentals-price-range-pop, revealed on hover, keyboard focus, or
   tap — the tap toggle (.is-open) is js/lus-card-price-range.js, which is
   event-delegated so it survives the sort/filter AJAX card refresh.
   Used by the half-map card price panel (.wprentals-card-price-corner,
   wprentals_detail_page_price_html()) and the grid/list card price badge
   (.price_unit, wprentals_card_property_price()). */
.wprentals-price-range {
  position: relative;
  /* vertical-align:middle centres the icon on the parent's x-height, which
     reads low next to the taller price digits — lift it a couple px so it
     sits on their optical centre. */
  top: -2px;
  display: inline-block;
  margin: 0 2px;
  padding: 3px 4px;
  color: #999;
  font-weight: 400;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  pointer-events: auto;
}

.wprentals-price-range > i {
  font-size: 0.8em;
  pointer-events: none;
}

.wprentals-price-range-pop {
  position: absolute;
  right: 0;
  bottom: calc(100% + 7px);
  z-index: 120;
  padding: 5px 9px;
  border-radius: 6px;
  background: #222;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  text-align: center;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}

.wprentals-price-range-pop::after {
  content: "";
  position: absolute;
  top: 100%;
  right: 9px;
  border: 5px solid transparent;
  border-top-color: #222;
}

.wprentals-price-range:hover .wprentals-price-range-pop,
.wprentals-price-range:focus .wprentals-price-range-pop,
.wprentals-price-range:focus-within .wprentals-price-range-pop,
.wprentals-price-range.is-open .wprentals-price-range-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Grid/list card badge (.price_unit): the icon sits inside the coloured
   badge next to white price text — inherit that colour instead of the grey
   the half-map panel uses. The badge hugs the image's bottom-left corner,
   so open the range bubble toward the right (left:0) rather than hard
   against the icon's right edge, where it would spill off the image. */
.price_unit .wprentals-price-range {
  color: currentColor;
  padding: 0 1px;
}

.price_unit .wprentals-price-range-pop {
  right: auto;
  left: 0;
  text-align: left;
}

.price_unit .wprentals-price-range-pop::after {
  right: auto;
  left: 9px;
}

/* .pernight is the "/period" suffix in the badge; the parent theme ships it
   with a leading space we no longer want ($650/week, not $650 /week). */
.price_unit .pernight {
  margin-left: 0;
}

/* Half-map card "See Details" button (templates/property_unit_wide.php) -
   an explicit, unmissable link to the property page alongside the
   existing (but easy-to-miss) clickable title/image. Printed inside
   .wprentals-card-price-corner itself, right after the rate lines/"Show
   detailed pricing" link (above), so it reads as "act on this price"
   rather than sitting off in the card's other text column. Static/in-flow
   by design (not absolutely positioned like that panel itself) so it
   simply stacks below the price content there, in both this panel's
   normal desktop layout and the <=425px grid layout that panel's own CSS
   below switches into (position:static; grid-area:price) - no separate
   breakpoint rules needed here since it just follows the panel. */
.wprentals-card-see-details {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  padding: 6px 14px;
  background-color: #e52737;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  border-radius: 20px;
  text-decoration: none;
  transition: background-color 0.15s ease;
}

.wprentals-card-see-details:hover,
.wprentals-card-see-details:focus {
  background-color: #c31f2d;
  color: #fff;
  text-decoration: none;
}

.wprentals-card-see-details i {
  font-size: 10px;
}

/* "verified"/status badge: the parent theme positions it at top-right of
   .property_listing (style.css: ".property_listing .property_status_wrapper
   { right:15px; left:auto; }") — fine for a card whose image fills the
   whole row, but this "wide" card's image only occupies the left portion
   (it's float:left within .property_listing, both sharing the same
   positioning context), so that lands the badge off to the right of the
   title text instead of on the photo. Moved to the image's bottom-left
   inset instead of top-left — top-left is already the "featured" ribbon's
   corner (.featured_div, rotated diagonally there), and bottom-right is
   now the price panel above, so bottom-left is the one corner of the
   image nothing else claims. Needs z-index above 100: now that this
   badge actually overlaps the image, it was rendering underneath it —
   .wide_property.property_flex .listing-unit-img-wrapper (parent
   style.css) sets the image's stacking context to z-index:100, higher
   than this badge's default 99, so the (opaque) photo was painting over
   it even though it's visually "in front" in the markup. */
.property_listing:has(.wprentals-card-price-corner) .property_status_wrapper {
  top: auto;
  bottom: 15px;
  right: auto;
  left: 15px;
  z-index: 101;
}

/* .title-container/.category_tagline_wrapper both stretch to the row's
   full width regardless of the price panel floating on top of them (it's
   position:absolute, so it takes up no layout space they'd know to avoid)
   — a property with several rate lines (e.g. custom pricing with nightly/
   weekend/mid-week/weekly/monthly all set) grows the panel tall and wide
   enough to sit directly over the title text. Reserve the same width on
   the right that the panel is capped to (plus its inset from the edge),
   so text wraps clear of it instead. */
.property_listing:has(.wprentals-card-price-corner) > .title-container,
.property_listing:has(.wprentals-card-price-corner) > .category_tagline_wrapper {
  padding-right: 185px !important;
  box-sizing: border-box;
}

/* Every half-map "wide card" enhancement below this point (title spacing,
   image size, bed/bath/guest icon+number sizing) is meant for the wide
   side-by-side layout only, and only kicks in once there's actually room
   for it — min-width: 650px, one consistent line for all of them, chosen
   over the parent theme's own two mobile breakpoints (my_media.css:
   <=667px narrows the same image/padding pairing, <=430px drops the
   side-by-side layout entirely). An earlier version of these rules shipped
   some of them !important with no media query at all, which (being
   unconditional !important) beat the parent's plain, non-!important
   narrower-width values regardless of source order — forcing the wide
   layout's spacing onto the parent's own already-correctly-narrowed and
   fully-stacked layouts and running the image and text into each other.
   Below 650px this whole block simply doesn't apply, so those narrower
   layouts fall through to the parent theme's own values untouched (and,
   at <=425px specifically, to this same file's own :has()-scoped grid
   takeover below, which remains separate from this block). */
@media (min-width: 650px) {
  /* Parent theme's wp_estate_listing_unit_type=3 card style sets
     `.title-container { padding-top: 15px; }` — this used to be zeroed out
     entirely here on the theory that the box holding the bed/bath/guest
     icon row below the title didn't need it now the rating above the
     title is disabled (see .wide_property.property_flex.property_unit_type_3
     .title-container above) — but with nothing above it at all, the title
     sat flush against the image's top edge, cramped. Keep a small gap
     instead of the parent's full 15px — this box is vertically centered
     against the price panel beside it (no :has() grid here, that's the
     <=649px tier below), so a big top padding would visibly push the
     title down off-center rather than just adding breathing room above it.
     padding-left is widened to match the taller image below (225px was
     sized for the parent's own 165px-tall image) — otherwise a wider
     rendered photo at the new height would run under this box's text
     instead of stopping short of it. !important needed for both: the
     parent's own rule has higher (4-class) specificity. */
  .property_listing:has(.wprentals-card-price-corner) > .title-container {
    padding-top: 24px !important;
    padding-left: 270px !important;
  }

  /* Parent theme caps this listing type's card image at max-height: 165px
     (style.css, same rule as above) — with the row's text column now
     taller (bigger bed/bath/guest icons, the price panel's own "See
     Details" button below it), that image reads as small/thin against
     it. wpestate_property_listings (the size these are served in) is a
     hard-cropped 400x314 (general-settings.php) — its native 314px
     height is the point past which this stops being a sharper image and
     starts being the same 400x314 file stretched past its own
     resolution, so treat that as the ceiling here, not just a number to
     keep raising. width:auto scales predictably off height alone below
     that point — 200px works out to ~255px wide, which is why
     .title-container's padding-left above grew to 270px to match (a
     ~15px gap, roughly the same proportion the parent theme's own
     165px/225px pairing kept). */
  .property_listing:has(.wprentals-card-price-corner) img {
    max-height: 200px !important;
  }

}

/* Was max-width: 425px — raised to meet the min-width: 650px block above
   exactly (no gap between them), since the parent theme's own default
   side-by-side layout otherwise keeps rendering as "wide" all the way
   down to 431px (its own stacking breakpoint is 430px, well below where
   the enhancements above start applying), not just below 425px. This
   grid takeover was already built and working for narrow phones; reusing
   it up to 649px rather than inventing a separate mid-range layout — it's
   percentage-based (60%/40%), so it already scales reasonably across
   that wider range without further tuning. */
@media (max-width: 649px) {
  .property_listing:has(.wprentals-card-price-corner) {
    display: grid;
    grid-template-columns: 60% 40%;
    grid-template-areas:
      "image image"
      "info price";
    /* Centers BOTH the info block and the price block within the row's
       height — which auto-sizes to whichever of the two is taller (a
       property with every rate type set makes for a much taller price
       block than a plain one-line title). Using two rows spanned by
       price ("title price" / "tagline price", one row each for
       title-container/category_tagline_wrapper) doesn't auto-grow to fit
       a spanning item reliably — it undersized the combined row height
       to the title+tagline rows' own natural (short) content, so
       align-self:center on the taller price panel overflowed out of its
       cell into the image above instead of the row actually growing to
       fit it. Sharing one area ("info") lets .title-container and
       .category_tagline_wrapper simply stack in DOM order inside it
       (fine — neither is absolutely positioned once the rules below take
       over), so this row's auto height is a plain max() of that stack's
       height vs. the price panel's, with no spanning involved. */
    align-items: center;
    column-gap: 10px;
    /* Space between the image and the info/price row below it — added
       here (between rows) rather than as padding/margin on .title-container
       or .wprentals-card-price-corner directly, so it doesn't skew the
       centering math above (which compares their relative heights within
       that shared row; padding on just one of them, or asymmetric amounts
       on both, would throw that off). */
    row-gap: 15px;
  }

  .property_listing:has(.wprentals-card-price-corner) > .listing-unit-img-wrapper {
    grid-area: image;
    width: 100% !important;
  }

  /* The wrapper above is full-width, but the <img> itself isn't — it's
     still carrying width:auto off whichever max-height rule applies at
     this width (165px from the parent theme's own <=667px tier for most
     of this range), so it renders at that small scaled-down size and
     leaves visible empty space on both sides inside the now much wider
     wrapper. Let it actually fill the wrapper's width, height following
     proportionally. */
  .property_listing:has(.wprentals-card-price-corner) > .listing-unit-img-wrapper img {
    width: 100% !important;
    height: auto !important;
    max-height: none !important;
  }

  .property_listing:has(.wprentals-card-price-corner) > .title-container {
    grid-area: info;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .property_listing:has(.wprentals-card-price-corner) > .category_tagline_wrapper {
    grid-area: info;
    position: static !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* Parent style.css sets .category_tagline at 13px - a couple px too
     large next to everything else in this cramped stacked mobile layout. */
  .property_listing:has(.wprentals-card-price-corner) .category_tagline {
    font-size: 11px;
  }

  .property_listing:has(.wprentals-card-price-corner) .wprentals-card-price-corner {
    grid-area: price;
    position: static;
    /* transform applies regardless of position — the base rule's
       translateY(-50%) (its half of the absolute-positioned desktop
       centering trick) was carrying over here and shifting this by half
       its own height on top of the grid's align-items:center, which
       alone already centers it correctly in static position. */
    transform: none;
    max-width: 100%;
    text-align: left;
    background: transparent;
    box-shadow: none;
    padding: 0;
  }

  .property_listing:has(.wprentals-card-price-corner) .wprentals-card-price-corner .wprentals-price-line {
    font-size: 13px;
  }

  /* Panel is left-aligned in this stacked layout and sits in a narrow 40%
     column — flip the range popover to open toward the roomy left side of
     the card instead of hugging the icon's right edge (where it would clip). */
  .property_listing:has(.wprentals-card-price-corner) .wprentals-price-range-pop {
    right: auto;
    left: 0;
  }

  .property_listing:has(.wprentals-card-price-corner) .wprentals-price-range-pop::after {
    right: auto;
    left: 9px;
  }

  /* .title-container's box IS correctly centered against the price panel
     (align-items:center on the grid), but the parent theme reserves
     phantom space above the title text itself, inside that box, for the
     rating row: 30px margin-top on the empty .rating_placeholder (shown
     when a property has no real reviews yet — see functions.php's
     wprentals_real_review_count() gating) or 15px on .property-rating
     (shown instead when it does). Either way, that pushes the VISIBLE
     title text down inside its own already-centered box, so it reads as
     top-aligned with the price text next to it rather than centered.
     Zeroing it here doesn't touch the desktop layout (that margin still
     serves its original purpose there, above the image-height text
     column) — only this stacked mobile arrangement, where the box being
     centered is the whole point. */
  .property_listing:has(.wprentals-card-price-corner) .rating_placeholder,
  .property_listing:has(.wprentals-card-price-corner) .property-rating {
    margin-top: 0 !important;
  }

  /* The image's own top-right is already taken here, by the favorite/
     heart icon (wprentals_unit_card_favorite() — nested inside
     .listing-unit-img-wrapper, unlike this badge — child theme's
     libs/unitcard-functions.php); its one free corner is bottom-right.
     grid-area:image (rather than leaving this un-placed) matters here:
     an absolutely positioned grid item's containing block is its
     assigned grid AREA, not the whole grid container — without it,
     bottom:15px would anchor to the bottom of the entire stacked card
     (image + title/price rows below it), landing well past the actual
     photo. Still needs the raised z-index — .listing-unit-img-wrapper's
     z-index:100 (parent style.css) would otherwise paint over it here
     too. */
  .property_listing:has(.wprentals-card-price-corner) .property_status_wrapper {
    grid-area: image;
    top: auto;
    bottom: 15px;
    left: auto;
    right: 15px;
    z-index: 101;
  }
}

/* Half-map sidebar search form (#advanced_search_map_list): every field's
   outer wrapper is sized off the theme's "fields per row" option
   (calculate_field_length() in wprentals/classes/rentalsSearch.php), and
   the price field doubles whatever that works out to — with fewer fields
   per row than there are grid columns, that lands short of the full form
   width, stranding the slider mid-row with empty space to its right.
   Force just that field's wrapper (identified structurally, since its
   class also carries the translatable field label) to the full row. */
#advanced_search_map_list [class*="col-md-"]:has(> .adv_search_slider) {
  width: 100%;
  float: none;
}

/* Scroll-to-top button (parent theme's a.backtop, templates/footer_buttons.php):
   its 50px circle sits right above the fixed mobile booking bar
   and crowds it. Scaling from the bottom-right corner shrinks it in place
   without needing to recompute the parent's off-center icon padding. */
@media (max-width: 649px) {
  a.backtop {
    transform: scale(0.7);
    transform-origin: bottom right;
  }

  /* Property detail pages show a fixed booking bar along the
     bottom (.mobile_booking_wrapper, wprentals/templates/mobile_booking.php,
     ~120px tall: my_media.css's .mobile_booking_wrapper_flex height:66px
     plus the button row below it). The parent theme's own mobile lift for
     this button (my_media.css: .islive{bottom:80px}) still isn't enough
     clearance and the two overlap here — raise it further, just on this
     template. */
  body.single-estate_property a.backtop.islive {
    bottom: 140px;
  }
}

/* Sub-footer (copyright + footer menu, wprentals/templates/footer_template.php).
   .subfooter_menu is display:inline-flex unconditionally, so its <li> links
   ("Terms and Conditions", "Privacy Policy") wrap as plain inline text once
   the viewport gets too narrow, breaking mid-phrase and colliding with the
   fixed scroll-to-top button (a.backtop) parked at the right edge. Below
   425px, stack the copyright line and each menu link on its own centered
   line instead. */
@media only screen and (max-width: 425px) {
  .sub_footer_content {
    height: auto;
    align-items: center;
    padding: 15px 0;
    row-gap: 8px;
  }

  .copyright {
    float: none;
    width: 100%;
    text-align: center;
    padding-top: 12px;
  }

  .subfooter_menu {
    float: none;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    width: 100%;
    text-align: center;
  }

  /* wp_nav_menu's default container div, and the <ul> inside it, both shrink-wrap
     to their widest link by default — which then also caps every other <li>'s
     width:auto to that same shrunk box, so text-align:center on the <li> only
     centers text within an already off-center box. Force the whole chain to
     100% so each link's own text-align:center centers against the real width. */
  .subfooter_menu > div,
  .subfooter_menu ul {
    width: 100%;
  }

  .subfooter_menu li {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
    margin: 6px 0 0 0 !important;
  }
}

/* Dashboard Edit/Add Listing > Description: the inline editor that
   appears next to a City/Area/Province/Region <select> after picking
   "+ Add new..." (js/lus-taxonomy-add-new.js) -- text box, Add button,
   and a link back to the dropdown. */
.wprc-add-new-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}

.wprc-add-new-wrap .wprc-add-new-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 34px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}

.wprc-add-new-confirm {
  white-space: nowrap;
  font-size: 12px;
  padding: 8px 12px;
  border: 1px solid #cccccc;
  border-radius: 3px;
  background: #f2f2f2;
  color: #333;
  cursor: pointer;
}

.wprc-add-new-confirm:hover {
  background: #e6e6e6;
}

.wprc-add-new-back {
  white-space: nowrap;
  font-size: 12px;
  cursor: pointer;
}

/* Main header nav (#access, templates/footer_filter_functions.php ->
   wpestate_custom_walker): top-level items with a submenu (WP core adds
   .menu-item-has-children automatically) had no visual cue that they open a
   dropdown on hover. Add a chevron that flips to point up while the flyout
   is open, mirroring the existing right-pointing chevron already used one
   level down (parent theme's .sub-menu .menu-item-has-children > a:after). */
#access > .menu > li.menu-item-has-children > a.menu-item-link::after,
#access > .menu > li.menu-item-has-children > .megamenu-title > a::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 10px;
  margin-left: 6px;
  display: inline-block;
  vertical-align: 1px;
  transition: transform 0.2s ease;
}

#access > .menu > li.menu-item-has-children:hover > a.menu-item-link::after,
#access > .menu > li.menu-item-has-children:hover > .megamenu-title > a::after {
  transform: rotate(180deg);
}

/* Property detail page sidebar owner card (parent theme's
   wprentals_property_sidebar_owner_card(), libs/listing_functions.php):
   the parent theme lays this out as avatar-float-left + name pushed right by
   a fixed margin-left:113px to clear it, with "See Owner Profile" right after
   relying on that same float to get nudged clear on the same line. That's
   fragile for a long one-word business name (e.g. "Frasercottagecollection" -
   owners often have no space-separated first/last name here): it can't wrap
   at a word boundary, so it either overflows the card or drops below the
   float and the link snaps back to the left edge, landing under/over the
   name. Centering the avatar + name + link in a column instead avoids all of
   that - it looks the same for a short name and just grows vertically for a
   long one, no fixed offsets to fight with. */
.owner_area_wrapper_sidebar .agentpic-wrapper:first-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.owner_area_wrapper_sidebar .owner_listing_image {
  float: none;
  margin-bottom: 6px;
}
.owner_area_wrapper_sidebar h3 {
  width: 100%;
  max-width: 100%;
  margin: 4px 0 0 0 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.owner_area_wrapper_sidebar .owner_read_more {
  display: inline-block;
  margin: 5px 0 0 0 !important;
}

/* The second .agentpic-wrapper (owner bio + the "Contact Owner" trigger,
   shown only when wpestate_decide_to_use_contact_form() is false for this
   property - see wprentals_property_sidebar_owner_card()) isn't part of the
   centered block above, but the button in it should still be centered to
   match. Centering via the button's own margin (not the wrapper's
   text-align) keeps the bio paragraph left-aligned and readable. */
.owner_area_wrapper_sidebar #contact_me_long {
  display: block;
  width: fit-content;
  margin: 15px auto 0 !important;
  float: none;
}

/* Owner profile page (/owners/{slug}/): the Advanced Search widget (its
   wrapper class comes straight from the widget's own registration -
   Wpestate_Advanced_Search_widget in wprentals-core/widgets/advanced_search.php
   - classname: 'advanced_search_sidebar') doesn't belong on a visitor-facing
   owner profile; it's leftover from whichever sidebar/template this page
   reuses. It's placed by the WP Rentals Studio "Single Agent" template
   (wpestate_render_single_agent(), a page-builder layout edited in
   wp-admin), not a theme PHP file, so it can't be removed by overriding a
   template - hide it here instead. */
body.single-estate_agent .advanced_search_sidebar {
  display: none !important;
}


/* Host hid the availability calendar: drop the jump links to it too. */
.lus-calendar-hidden .check_avalability {
    display: none !important;
}

/* The dashboard sidebar's per-listing submenu (Description / Price / Images /
   Details / Location / Amenities / Calendar). Listings are edited through the
   Add New Listing flow now, so only "Add New Listing" stays in the sidebar. */
.property_edit_menu {
    display: none !important;
}

/* My Listings: drafts get their own grey status instead of the "Waiting for approval" look */
.wprentals_status_draft { color: #6b7280; }
.wprentals_status_draft .wprentals_status_circle { background-color: #9ca3af; }