/* Property listing page styles.
   Moved out of propertylist.blade.php, where ~570 lines of CSS were
   inlined into every render of the page and could never be cached. */

.anuda-toast-wrap {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}

.anuda-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: #222;
  border-left: 4px solid #e40f15;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  border-radius: 6px;
  padding: 12px 16px;
  font-size: 14px;
  min-width: 220px;
  max-width: 320px;
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.anuda-toast.show {
  opacity: 1;
  transform: translateX(0);
}

.anuda-toast i {
  color: #e40f15;
  font-size: 16px;
}

.anuda-toast.anuda-toast-removed {
  border-left-color: #6c757d;
}

.anuda-toast.anuda-toast-removed i {
  color: #6c757d;
}

.slider-container {
  display: flex;
  gap: 10px;
  margin: 0px !important;
}

.swiper {
  width: 100%;
  height: 100%;
}

.main-slider {
  flex: 3;
  position: relative;
}

.main-slider img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 6px;
}

.thumb-slider {
  flex: 1;
  height: 280px;
}

.thumb-slider .swiper-slide {
  height: calc((100% - 50px) / 4) !important;
  opacity: 0.5;
  cursor: pointer;
}

.thumb-slider .swiper-slide-thumb-active {
  opacity: 1;
  border: 2px solid #ff3c00;
  border-radius: 4px;
}

.swiper-slide {
  width: 100% !important;
  box-shadow: inherit;
}

.thumb-slider img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 4px;
}

.swiper-button-next,
.swiper-button-prev {
  color: #ff3c00;
}

.disabled-label {
  display: none !important;
}

/* Yahan pehle ".switch-btn, .city { display: none; }" tha - hata diya.
     .city ab header khud render nahi karta, aur .switch-btn (Buy/Sell)
     dikhna chahiye, jaise property detail page par dikhta hai. Purana
     duplicate header inline style="display:block" se is rule ko beat
     karta tha; ab wo hack nahi hai. */

#map {
  float: left;
  overflow: hidden;
  height: 767px;
  width: 58%;
  border-radius: 8px;
  margin-left: 15px;
}

.property-card {
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  border: 1px solid #eee;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  cursor: pointer;
}

.property-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* The card the map is currently focused on, so a long list still shows which
   property the pin belongs to. Declared after :hover deliberately — both
   selectors have the same specificity, so source order is what keeps the ring
   visible while the pointer is over the card. */
.property-card.is-selected,
.property-card.is-selected:hover {
  border-color: #e40f15;
  box-shadow: 0 0 0 3px rgba(228, 15, 21, 0.18), 0 10px 28px rgba(0, 0, 0, 0.10);
}

/* IMAGE SLIDER */
.slider-container {
  position: relative;
  height: 200px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;
}

.slider-container img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  transition: transform 0.6s ease;
}

/* WISHLIST */
.ss-whishlist {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.ss-whishlist button {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.15);
}

.ss-whishlist button:hover {
  background: #fff;
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.ss-whishlist .wa-direct-share:hover {
  background: #25D366 !important;
  color: #fff !important;
}

/* WhatsApp brand green, in CSS rather than an inline style on the <i>. It has
   to beat `.ss-whishlist i { color: #7e7e7e }` in style.css, hence the extra
   class in the selector. */
.ss-whishlist .wa-direct-share i {
  color: #25D366;
}

/* On hover the button itself turns green, so the glyph has to go white or it
   disappears into the fill. Also outranks `.ss-whishlist i:hover`, which would
   otherwise turn it the theme red. */
.ss-whishlist .wa-direct-share:hover i,
.ss-whishlist .wa-direct-share:focus-visible i {
  color: #fff;
}

.ss-jda-whislist a {
  color: #000;
  font-weight: 600;
  font-size: 16px;
  text-decoration: none;
}

.ss-jda-whislist a:hover {
  text-decoration: underline;
}

/* AGENT OVERLAY */
.agent-overlay {
  position: absolute;
  bottom: 12px;
  left: 12px;
  right: 12px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 12px;
  padding: 6px 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  backdrop-filter: blur(5px);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.15);
}

.agent-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.agent-info img {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
}

.agent-info h6 {
  font-size: 13px;
  font-weight: 600;
  margin: 0;
  color: #000;
}

.agent-info p {
  font-size: 12px;
  margin: 0;
  color: #555;
}

.image-count {
  font-size: 12px;
  color: #333;
  background: #fff;
  border-radius: 50px;
  padding: 3px 8px;
  font-weight: 600;
}

/* PROPERTY INFO */
.property-info {
  background: #fff;
  padding: 10px 15px;
}

.price {
  font-size: 18px;
  font-weight: 700;
  color: #000;
  margin: 0;
}

.star-rating {
  font-size: 13px;
  color: #000;
  font-weight: 500;
  margin-top: 6px;
  margin-bottom: 6px;
}

.star-rating i {
  color: #ffbe0b;
  margin-right: 3px;
}

/* NEW PROPERTY TITLE */
.property-title {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #222;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* FEATURES */
.features {
  display: flex;
  gap: 12px;
  color: #555;
  font-size: 13px;
  margin-bottom: 5px;
}

.features i {
  color: #e40f15;
  margin-right: 3px;
}

.ss-map {
  color: #555;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
  transition: 0.3s;
}

.ss-map:hover {
  color: #000;
  text-decoration: underline;
}

.ss-divider {
  width: 1px;
  height: 14px;
  background-color: #ddd;
  display: inline-block;
}

/* PROPERTY TYPE & LOCATION */
.ss-jda {
  font-size: 14px;
  color: #666;
  margin-top: 4px;
}

.ss-jda i {
  color: #e40f15;
  margin-right: 6px;
}


.swiper-button-next,
.swiper-button-prev {
  color: #fff;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 50%;
  width: 36px !important;
  height: 36px !important;
  top: 50%;
  transform: translateY(30%);
  transition: all 0.3s ease;
  opacity: 0;
  visibility: hidden;
}

.swiper-button-next:after,
.swiper-button-prev:after {
  font-size: 16px !important;
  font-weight: 600;
}

.slider-container:hover .swiper-button-next,
.slider-container:hover .swiper-button-prev {
  opacity: 1;
  visibility: visible;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(0, 0, 0, 0.6);

}

/* dddddddddddddddddddddd */
/* Custom Leaflet Popup Overrides - Global */
.leaflet-popup-content-wrapper {
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

.leaflet-popup-content {
  margin: 0 !important;
  width: 270px !important;
  line-height: 1.4 !important;
}

.leaflet-popup-close-button {
  display: none !important;
}

/* Custom Leaflet Popup Overrides */
.custom-leaflet-popup .leaflet-popup-content-wrapper {
  padding: 0 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: transparent !important;
  box-shadow: none !important;
}

.custom-leaflet-popup .leaflet-popup-content {
  margin: 0 !important;
  width: 270px !important;
  line-height: 1.4 !important;
}

.custom-leaflet-popup .leaflet-popup-close-button {
  display: none !important;
}

.leaflet-container a.leaflet-popup-close-button {
  position: absolute;
  top: 1px;
  right: inherit;
  border: none;
  text-align: center;
  width: 35px;
  height: 36px;
  font: 19px / 24px Tahoma, Verdana, sans-serif;
  color: #757575;
  text-decoration: none;
  background: transparent;
}

.text-danger22 {
  color: #e40f15;
}

.slider_set {
  height: 150px;
}

.leaflet-top,
.leaflet-bottom {
  z-index: 555 !important;
}

.filter-wrapper {
  padding: 10px;
}

.filter-left {
  width: 180px;
  padding: 0px;
}

/* "Saved" toggle in the tab strip.
   The theme styles these tabs via an element selector — `.tbs-list-new ul li
   button` in frontend/assets/css/style.css — and this control is an <a>, not a
   <button>, because it navigates to a new URL rather than switching a pane.
   So the tab look is restated here to match its siblings exactly; keep these
   declarations in sync with that rule if the theme's tabs ever change.

   The active state is .is-on rather than Bootstrap's .active on purpose: the
   page's tab JS reads data-target off `.nav-link.active` to decide which pane
   to restore, and would break on a link that has no pane. */
.tbs-list-new ul li a.saved-toggle,
.tbs-list-new ul li a.tabstrip-link {
  text-transform: capitalize;
  font-weight: 600;
  position: relative;
  margin-right: 5px;
  background: #fff;
  border: 1px solid #dee2e6 !important;
  height: 38px;
  border-radius: 0 !important;
  border-top-left-radius: 10px !important;
  border-top-right-radius: 10px !important;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #000;
  font-size: 14px;
  padding: 0px 15px;
  text-decoration: none;
  white-space: nowrap;
}

.tbs-list-new ul li a.saved-toggle:hover,
.tbs-list-new ul li a.tabstrip-link:hover {
  color: #000;
}

.tbs-list-new ul li a.saved-toggle i {
  color: #e40f15;
}

/* Mirrors the theme's `ul li button.active` red fill. */
.tbs-list-new ul li a.saved-toggle.is-on {
  color: #ffffff !important;
  background-color: #e40f15 !important;
  border-color: #e40f15 !important;
}

.tbs-list-new ul li a.saved-toggle.is-on i {
  color: #fff;
}

/* Empty state shared by the main list and the map-view side list. */
.no-properties-box {
  text-align: center;
  padding: 48px 20px;
  color: #666;
}

.no-properties-box>i {
  font-size: 42px;
  color: #e40f15;
  opacity: 0.55;
  margin-bottom: 14px;
  display: block;
}

.no-properties-box h5 {
  color: #222;
  margin-bottom: 8px;
  font-weight: 600;
}

.no-properties-box p {
  margin-bottom: 18px;
  font-size: 0.95rem;
}

.no-properties-box .np-btn {
  display: inline-block;
  margin: 0 5px 8px;
  padding: 9px 20px;
  border-radius: 8px;
  border: 1px solid #e40f15;
  color: #e40f15;
  background: #fff;
  text-decoration: none;
  font-size: 0.9rem;
  transition: 0.2s;
}

.no-properties-box .np-btn:hover {
  background: #fff5f5;
}

.no-properties-box .np-btn-primary {
  background: #e40f15;
  color: #fff;
}

.no-properties-box .np-btn-primary:hover {
  background: #c30d12;
  color: #fff;
}

/* Hover tooltips for icon-only controls. Any element carrying [data-tip] gets
   one, so this covers the card's heart/share/WhatsApp buttons and anything
   added later.

   CSS rather than Bootstrap's Tooltip because the theme loads plain
   bootstrap.min.js with no Popper (footer.blade.php) — Bootstrap 5 tooltips
   depend on Popper and would silently never initialise. It also beats the
   native title attribute, which waits about a second before appearing and
   can't be styled.

   Opens DOWNWARD on purpose: these icons sit at the top of the card image, and
   both .property-card and .slider-container are overflow:hidden, so a tooltip
   above them would be clipped off. */
[data-tip] {
  position: relative;
}

[data-tip]::after,
[data-tip]::before {
  opacity: 0;
  visibility: hidden;
  transition: opacity .15s ease, visibility .15s ease;
  pointer-events: none;
  position: absolute;
  left: 50%;
  z-index: 20;
}

[data-tip]::after {
  content: attr(data-tip);
  top: calc(100% + 9px);
  transform: translateX(-50%);
  background: #2b2b2b;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  padding: 7px 10px;
  border-radius: 6px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
}

/* Little arrow pointing back up at the icon. */
[data-tip]::before {
  content: "";
  top: calc(100% + 4px);
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: #2b2b2b;
}

[data-tip]:hover::after,
[data-tip]:hover::before,
[data-tip]:focus-visible::after,
[data-tip]:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* The card's icon row is a right-aligned cluster, so the rightmost tooltip
   would overflow the card edge if it stayed centred. Pin those to the right. */
.ss-whishlist [data-tip]:last-child::after {
  left: auto;
  right: 0;
  transform: none;
}

.ss-whishlist [data-tip]:last-child::before {
  left: auto;
  right: 9px;
  transform: none;
}


/* =====================================================================
   Listing-page UI pass
   ===================================================================== */

/* ---- Result summary line ---- */

.rs-place {
  font-weight: 600;
  color: #222;
}

/* ---- Active filter chips ----

   The toolbar used to show nothing about which filters were applied: a user
   three filters deep saw only a result count and had no way to tell which one
   was hiding the properties they expected. Each chip links to the same search
   minus itself, so removing one never discards the rest. */

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  max-width: 100%;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 30px;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.5;
  color: #333;
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}

.filter-chip-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.filter-chip i {
  flex: 0 0 auto;
  font-size: 11px;
  color: #999;
  transition: color 0.2s ease;
}

.filter-chip:hover,
.filter-chip:focus-visible {
  border-color: #e40f15;
  background: #fff5f5;
  color: #e40f15;
}

.filter-chip:hover i,
.filter-chip:focus-visible i {
  color: #e40f15;
}

.filter-chip-clear {
  padding: 5px 4px;
  font-size: 12.5px;
  font-weight: 600;
  color: #e40f15;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.filter-chip-clear:hover,
.filter-chip-clear:focus-visible {
  color: #b70c11;
  border-bottom-color: currentColor;
}

/* ---- Card: unrated listings ----

   Replaces the hardcoded 5.0 that every listing used to show. */

.pc-new-tag {
  padding: 3px 9px;
  border-radius: 20px;
  background: #e8f6ee;
  color: #0a7c3f;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---- Card: type + location on one line ----

   These were two full-width rows carrying about six words between them. */

.pc-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #555;
}

.pc-meta>span {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.pc-meta i {
  margin-right: 4px;
  color: #e40f15;
}

.pc-meta-sep {
  flex: 0 0 auto;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #ccc;
}

/* ---- Card: primary action ----

   The whole tile was already clickable but nothing said so, and the only
   visible affordances were two secondary links. */

.pc-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.pc-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 16px;
  border-radius: 22px;
  background: #e40f15;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease;
}

.pc-cta:hover,
.pc-cta:focus-visible {
  background: #b70c11;
  color: #fff;
  transform: translateY(-1px);
}

/* ---- "Post your property" panel ----

   It was a full-height solid red block beside the results, competing with the
   red header and with the red Sell badge on every card - which left the actual
   listings as the least prominent thing on screen. Same content, quieter
   surface: the only saturated element left is the button. */

.sidebar-ads {
  padding: 10px;
  /* border: 1px solid #ececec; */
  border-radius: 14px;
  background: #fff;
  color: #333;
}

.sidebar-ads h3 {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.35;
  color: #1a1a1a;
}

.sidebar-ads p {
  padding: 10px 0 18px;
  text-align: left;
  font-size: 14px;
  line-height: 1.5;
  color: #666;
}

.sidebar-ads .main-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 11px 18px;
  border-radius: 26px;
  background: #e40f15;
  color: #fff;
  font-weight: 600;
  box-shadow: 0 6px 16px rgba(228, 15, 21, 0.22);
  transition: background 0.2s ease, transform 0.2s ease;
}

.sidebar-ads .main-btn:hover,
.sidebar-ads .main-btn:focus-visible {
  background: #b70c11;
  color: #fff;
  transform: translateY(-1px);
}

.sidebar-ads h4 {
  padding-top: 26px;
  padding-bottom: 14px;
  font-size: 15px;
  font-weight: 700;
  color: #1a1a1a;
}

.sidebar-ads ul li {
  padding-left: 24px;
  padding-bottom: 12px;
  line-height: 1.5;
  color: #555;
}

.sidebar-ads ul li i {
  color: #e40f15;
  top: 3px;
}

/* ---- Navigation feedback ----

   Sorting, removing a chip and paging are all full page loads, and nothing
   acknowledged the click - the stale list just sat there until the new page
   painted. #pageLoader was already in the markup but no code ever showed it;
   it now shows on those navigations, shaped like the cards it stands in for
   rather than a centred GIF. */

.pageLoader {
  display: none;
}

.pageLoader.is-loading {
  display: block;
}

.pl-skeletons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
}

.pl-skel-card {
  border: 1px solid #eee;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.pl-skel-img {
  height: 200px;
}

.pl-skel-line {
  height: 12px;
  margin: 12px 15px;
  border-radius: 6px;
}

.pl-skel-line-lg {
  height: 18px;
  width: 55%;
  margin-top: 16px;
}

.pl-skel-line-sm {
  width: 40%;
  margin-bottom: 18px;
}

.pl-skel-img,
.pl-skel-line {
  background: linear-gradient(90deg, #f0f0f0 25%, #e6e6e6 37%, #f0f0f0 63%);
  background-size: 400% 100%;
  animation: pl-skel-shimmer 1.3s ease-in-out infinite;
}

@keyframes pl-skel-shimmer {
  0% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0 50%;
  }
}

@media (prefers-reduced-motion: reduce) {

  .pl-skel-img,
  .pl-skel-line {
    animation: none;
  }
}

/* Screen-reader-only text, for the loading announcement. */
.pl-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Equal-height cards ----

   A listing with no bed/bath/area row (or no locality) rendered a shorter card
   than the one next to it, so a row of results had ragged bottoms.

   Not a fixed pixel height: that would clip a long title on one card and leave
   dead space on another. The Bootstrap row already stretches its columns to
   the tallest in the row - what was missing is the card filling that column,
   and the action row sitting at the bottom of the card rather than directly
   under whatever content happened to end last. */

.property-card-col {
  display: flex;
}

.property-card-col .property-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* The image + title block is a fixed 200px slider; as a flex item it would be
   the thing that gives if a card ever had to compress, so take it out of the
   shrinking entirely. Only .property-info flexes. */
.property-card-col .property-link {
  display: block;
  flex: 0 0 auto;
}

.property-card-col .property-info {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

/* Pins "See on map / Camera View / View Details" to the bottom edge on every
   card, which is what actually makes the row read as level. */
.property-card-col .pc-actions {
  margin-top: auto;
}