/* =============================================================
   search-results.css — Search Results Page styles
   Prefix: sr-
   Inherits design tokens from css/style.css (:root vars)
   --sr-nav-h is set at runtime by search-results.js to the
   actual rendered navbar height, eliminating sticky gap.
   ============================================================= */

:root {
  --sr-nav-h: 64px;  /* fallback; overwritten by JS on load/resize */
  --sr-refine-h: 58px;
  /* Accent color for the reused Lead Capture Modal (matches property-detail.css) */
  --pd-red: #E53935;
  --pd-red-dark: #C62828;
}
/* ── Old Design Right Side Menu Listing ─────────────────────────────────────────────── */

.search-col         {position: sticky;top: 130px;}
.filter-CP 			{background: #fff;box-shadow: -1px 0 8px 1px rgba(0,0,0,0.1); margin-bottom:15px;}
.filter-CL 			{background: #fff;}
.filter-CL li       {border-bottom:none!important; display:inline-block!important;}
.filter-CL  .propertype-filter { margin: 0px -20px 0 -20px; padding: 0 15px 5px 15px;}
.filter-CL  ul       { padding-left:0px!important;}
.location-side-menu  .filter-CL  li a { padding:0px 20px!important;}
.location-fliter .filter-title 	{font-size: 15px;font-weight: 600;text-transform: uppercase;color: #000;background-color: #f8f9fa;padding: 15px 15px;letter-spacing: 0.5px;line-height: 22px;text-transform: capitalize;} 
.location-fliter .filter-title-sub 	{font-size: 15px;font-weight: 600;text-transform: uppercase;margin-bottom: 0px;color: #000;padding: 0px;letter-spacing: 0.5px;line-height: 26px;text-transform: capitalize;} 
.location-fliter .filter-title .fa-angle-down {  margin-top:5px;}
.location-side-menu  { padding:0px 10px;}
.location-side-menu li a{text-decoration: none;font-size: 14px;display: block;border: none;background: none;width: 100%;
 text-align: left;cursor: pointer;outline: none;padding: 12px 5px !important;color: #6f6f6f;}
.location-side-menu li .fa {color: #d46767;margin-right: 10px;}
.location-side-menu li {border-bottom:1px dotted #efefef; list-style-type: none;}
#sticky-top { position: sticky!important;top: 0;left: 0;}
.Related-searched ul li { width:33%; display:inline-block;}
.Related-searched .filter-CP {padding-bottom:3px!important;}
#srFilterSidebar {padding-left:15px;}
/* ── Refine bar ─────────────────────────────────────────────── */
.sr-refine-bar {
  background: #fff;
  border-bottom: 1px solid var(--rf-border);
  box-shadow: var(--rf-shadow-sm);
  position: sticky;
  top: var(--sr-nav-h);
  z-index: 90;
  /* Extend background upward by 2px so any sub-pixel gap between
     the nav bottom edge and this bar is covered, not transparent. */
  margin-top: -2px;
  padding-top: 2px;
}

.sr-refine-inner {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sr-refine-inner::-webkit-scrollbar { display: none; }

.sr-refine-field {
  position: relative;
  flex-shrink: 0;
}

.sr-refine-select {
  appearance: none;
  -webkit-appearance: none;
  background: var(--rf-bg-light);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  color: var(--rf-text);
  font: 500 0.8125rem/1 var(--rf-font);
  padding: 8px 30px 8px 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.18s;
  min-width: 110px;
}
.sr-refine-select:focus {
  outline: none;
  border-color: var(--rf-blue);
}

.sr-refine-pin {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--rf-text-muted);
  font-size: 0.875rem;
  pointer-events: none;
}
.sr-refine-field--city .sr-refine-select { padding-left: 26px; min-width: 120px; }

.sr-refine-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.75rem;
  color: var(--rf-text-muted);
  pointer-events: none;
}

.sr-refine-field--area { min-width: 0; }

.sr-refine-search-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--rf-blue);
  color: #fff;
  border: none;
  border-radius: var(--rf-r-sm);
  font: 600 0.8125rem/1 var(--rf-font);
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  transition: background 0.18s;
}
.sr-refine-search-btn:hover { background: var(--rf-blue-dark); }
.sr-refine-search-btn i { font-size: 0.875rem; }

.sr-refine-clear-btn {
  background: none;
  border: none;
  color: var(--rf-text-muted);
  font: 500 0.8125rem/1 var(--rf-font);
  padding: 8px 6px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
  text-decoration: underline;
  transition: color 0.18s;
}
.sr-refine-clear-btn:hover { color: var(--rf-text); }


/* ── Area searchable multi-select ──────────────────────────────
   Sample data only — production: PHP populates the option list
   from geo/locality data and reads selections from #srAreaValue
   (comma-separated) on submit. The input stays dedicated to typing;
   selected-area chips render in .sr-selected-areas below, not here. */
.sr-area-msel {
  position: relative;
  width: 190px;
  max-width: 46vw;
}

.sr-area-input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  background: var(--rf-bg-light);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  padding: 0 10px;
  cursor: text;
  transition: border-color 0.18s, background 0.18s;
}
.sr-area-input-wrap:focus-within {
  border-color: var(--rf-blue);
  background: #fff;
}

.sr-area-search-ico {
  color: var(--rf-text-muted);
  font-size: 0.8125rem;
  flex-shrink: 0;
  pointer-events: none;
}

.sr-area-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 9px;
  background: var(--rf-blue-soft);
  border: 1px solid #c0d4f7;
  border-radius: 999px;
  color: var(--rf-blue);
  font: 500 0.75rem var(--rf-font);
  white-space: nowrap;
  flex-shrink: 0;
}

.sr-area-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--rf-blue);
  font-size: 0.75rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  transition: background 0.16s;
}
.sr-area-chip-remove:hover { background: #c8dafc; }

.sr-area-input {
  flex: 1;
  min-width: 0;
  height: 100%;
  border: none;
  outline: none;
  background: none;
  color: var(--rf-text);
  font: 500 16px var(--rf-font); /* ≥16px prevents iOS Safari auto-zoom on focus */
  padding: 0;
}
.sr-area-input::placeholder { color: var(--rf-text-muted); }

.sr-area-dropdown {
  position: fixed;
  z-index: 200;
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  box-shadow: var(--rf-shadow-md);
  max-height: 240px;
  overflow-y: auto;
  padding: 6px;
}

.sr-area-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 10px;
  font: 500 0.8125rem var(--rf-font);
  color: var(--rf-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.sr-area-option:hover,
.sr-area-option.sr-area-option--active {
  background: var(--rf-blue-soft);
  color: var(--rf-blue);
}
.sr-area-option i { color: var(--rf-text-muted); font-size: 0.875rem; }

/* Real checkbox backs each option (name="localities[]") but stays
   visually hidden — the styled <label> row is the visible control;
   clicking/keyboard-selecting it natively toggles the checkbox. */
.sr-area-option-cb {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}
.sr-area-option:has(.sr-area-option-cb:focus-visible) {
  outline: 2px solid var(--rf-blue);
  outline-offset: -2px;
}

.sr-area-empty {
  padding: 10px;
  font: 500 0.8125rem var(--rf-font);
  color: var(--rf-text-muted);
  text-align: center;
}

@media (max-width: 575.98px) {
  .sr-area-msel { width: 160px; max-width: 60vw; }
}


/* ── Selected Areas ──────────────────────────────────────────────
   Sits immediately below the refine bar, visible only once 1+
   areas are chosen (toggled via the [hidden] attribute in JS).
   Reuses .sr-area-chip / .sr-area-chip-remove from the multi-select
   above so removal styling and behavior stay in one place. ────── */
.sr-selected-areas {
  background: #fff;
  border-bottom: 1px solid var(--rf-border);
}
.sr-selected-areas[hidden] { display: none; }

.sr-selected-areas-inner {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 0;
}

.sr-selected-areas-label {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 4px;
  font: 600 0.8125rem var(--rf-font);
  color: var(--rf-text-muted);
  flex-shrink: 0;
}
.sr-selected-areas-label i { color: var(--rf-blue); font-size: 0.8125rem; }

.sr-selected-areas-chips {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 6px;
  flex: 1;
  min-width: 0;
}


/* ── Main content ───────────────────────────────────────────── */
.sr-main {
  padding-top: 20px;
  padding-bottom: 48px;
  background: var(--rf-bg-light);
  min-height: 60vh;
}


/* ── Breadcrumb ─────────────────────────────────────────────── */
.sr-breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 16px;
  font-size: 0.8125rem;
  color: var(--rf-text-muted);
}
.sr-breadcrumb a {
  color: var(--rf-text-muted);
  text-decoration: none;
  transition: color 0.16s;
}
.sr-breadcrumb a:hover { color: var(--rf-blue); }
.sr-breadcrumb i { font-size: 0.625rem; color: var(--rf-border); }
.sr-breadcrumb span { color: var(--rf-text); font-weight: 500; }


/* ── Results top zone ───────────────────────────────────────────
   Grid reflows breadcrumb / summary / sort+filter / nearby-areas
   without changing DOM order. Desktop reproduces the previous
   2-column layout (info + controls side by side); mobile stacks
   everything into a single column with a sticky sort+filter bar,
   so the first listing card follows immediately after. ────────── */
.sr-topzone {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "breadcrumb breadcrumb"
    "info controls"
    "nearby nearby";
  column-gap: 12px;
}
.sr-breadcrumb { grid-area: breadcrumb; }
.sr-results-info { grid-area: info; margin-bottom: 14px; }
.sr-results-controls { grid-area: controls; margin-bottom: 14px; }
.sr-nearby-wrap { grid-area: nearby; }

.sr-results-title {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--rf-text);
  margin: 0 0 2px;
  line-height: 1.3;
}

.sr-results-sub {
  font-size: 0.8125rem;
  color: var(--rf-text-muted);
  margin: 0;
}

.sr-results-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.sr-sort-inner {
  position: relative;
}

.sr-sort-select {
  appearance: none;
  -webkit-appearance: none;
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  color: var(--rf-text);
  font: 500 0.8125rem/1 var(--rf-font);
  padding: 7px 28px 7px 10px;
  cursor: pointer;
  transition: border-color 0.18s;
}
.sr-sort-select:focus { outline: none; border-color: var(--rf-blue); }

.sr-sort-chevron {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.7rem;
  color: var(--rf-text-muted);
  pointer-events: none;
}

.sr-sort-divider {
  width: 1px;
  height: 22px;
  background: var(--rf-border);
}

.sr-filter-icon-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  color: var(--rf-text);
  font: 500 0.8125rem/1 var(--rf-font);
  padding: 7px 12px;
  cursor: pointer;
  transition: border-color 0.18s, background 0.18s;
}
.sr-filter-icon-btn:hover { border-color: var(--rf-blue); background: var(--rf-blue-soft); }

.sr-mobile-filter-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  color: var(--rf-text);
  font: 600 0.8125rem/1 var(--rf-font);
  padding: 7px 12px;
  cursor: pointer;
  position: relative;
  transition: border-color 0.18s;
}
.sr-mobile-filter-btn:hover { border-color: var(--rf-blue); }

/* Shared label text for the mobile Sort/Filter triggers — truncates
   gracefully at the narrowest widths instead of forcing overflow */
.sr-mobile-btn-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-filter-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rf-blue);
  color: #fff;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}


/* ── Sort Bottom Sheet options ──────────────────────────────────
   Single-choice list rendered inside the shared .sr-filter-drawer
   sheet (#srSortDrawer) — tapping an option applies it immediately
   and closes the sheet, so there's no separate Apply step. ────── */
.sr-sort-options { padding: 4px; }

.sr-sort-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  border-radius: var(--rf-r-sm);
  padding: 13px 12px;
  font: 500 0.9375rem var(--rf-font);
  color: var(--rf-text);
  text-align: left;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
}
.sr-sort-option:hover { background: var(--rf-bg-light); }
.sr-sort-option.active { color: var(--rf-blue); font-weight: 600; }

.sr-sort-option-check {
  color: var(--rf-blue);
  font-size: 1.0625rem;
  flex-shrink: 0;
  opacity: 0;
}
.sr-sort-option.active .sr-sort-option-check { opacity: 1; }


/* ── Nearby chips ───────────────────────────────────────────── */
.sr-nearby-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.sr-nearby-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--rf-text-muted);
  flex-shrink: 0;
}

.sr-chips-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.sr-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 5px 12px;
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: 999px;
  color: var(--rf-text);
  font: 500 0.8rem var(--rf-font);
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.16s, background 0.16s, color 0.16s;
}
.sr-chip:hover,
.sr-chip.active {
  border-color: var(--rf-blue);
  background: var(--rf-blue-soft);
  color: var(--rf-blue);
}
.sr-chip--more {
  appearance: none;
  -webkit-appearance: none;
  color: var(--rf-blue);
  border-color: var(--rf-blue);
  background: var(--rf-blue-soft);
  cursor: pointer;
}
.sr-chip--more:hover { background: #d4e4ff; }
.sr-chip--more[hidden] { display: none; }


/* ── 3-column layout ────────────────────────────────────────── */
.sr-layout {
  align-items: flex-start;
}


/* ── Filter sidebar (left col) ──────────────────────────────── */
.sr-filter-col {
  padding-right: 0;
}

.sr-filter-inner {
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  overflow: hidden;
  position: sticky;
  /* PHP: If navbar height changes, --sr-nav-h is updated by JS */
  top: calc(var(--sr-nav-h) + var(--sr-refine-h) + 12px);
  max-height: calc(100vh - var(--sr-nav-h) - var(--sr-refine-h) - 28px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--rf-border) transparent;
}

.sr-filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--rf-border);
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 2;
}

.sr-filter-heading {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--rf-text);
  margin: 0;
}

.sr-filter-reset {
  background: none;
  border: none;
  color: var(--rf-blue);
  font: 500 0.8125rem var(--rf-font);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.sr-filter-reset:hover { color: var(--rf-blue-dark); }


/* ── Filter groups ──────────────────────────────────────────── */
.sr-fg {
  border-bottom: 1px solid var(--rf-border);
}

.sr-fg-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: 12px 16px;
  font: 600 0.875rem var(--rf-font);
  color: var(--rf-text);
  cursor: pointer;
  text-align: left;
  gap: 8px;
}
.sr-fg-title:hover { background: var(--rf-bg-light); }

.sr-fg-chevron {
  color: var(--rf-text-muted);
  font-size: 0.75rem;
  flex-shrink: 0;
  transition: transform 0.22s;
}
.sr-fg-title[aria-expanded="false"] .sr-fg-chevron {
  transform: rotate(-180deg);
}

.sr-fg-body {
  padding: 4px 16px 14px;
  transition: none;
}
.sr-fg-body.sr-collapsed {
  display: none;
}


/* Property type button grid */
.sr-proptype-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  padding-top: 4px;
}

.sr-proptype-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 10px 6px;
  background: var(--rf-bg-light);
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  color: var(--rf-text-muted);
  font: 500 0.75rem var(--rf-font);
  cursor: pointer;
  text-align: center;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
}
.sr-proptype-btn i { font-size: 1.1rem; }
.sr-proptype-btn:hover {
  border-color: var(--rf-blue);
  color: var(--rf-blue);
  background: var(--rf-blue-soft);
}
/* .sr-proptype-btn is a <label> wrapping a real checkbox — the
   checkbox's checked state is the single source of truth for the
   submitted property_type[] value; :has(:checked) drives the
   "active" look, no JS required to construct the submitted value. */
.sr-proptype-btn:has(input:checked) {
  border-color: var(--rf-blue);
  background: var(--rf-blue-soft);
  color: var(--rf-blue);
  font-weight: 600;
}
.sr-proptype-btn:has(input:focus-visible) {
  outline: 2px solid var(--rf-blue);
  outline-offset: 2px;
}


/* Radio / checkbox rows */
.sr-radio-row,
.sr-check-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  font-size: 0.8125rem;
  color: var(--rf-text);
  cursor: pointer;
  border-radius: 4px;
  transition: color 0.15s;
}
.sr-radio-row:hover,
.sr-check-row:hover { color: var(--rf-blue); }
.sr-radio-row input,
.sr-check-row input {
  accent-color: var(--rf-blue);
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  cursor: pointer;
}
.sr-check-row i {
  color: var(--rf-text-muted);
  font-size: 0.875rem;
}


/* Range inputs */
.sr-range-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
}
.sr-range-input {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  font: 400 16px var(--rf-font); /* ≥16px prevents iOS Safari auto-zoom on focus */
  color: var(--rf-text);
  background: var(--rf-bg-light);
  transition: border-color 0.18s;
}
.sr-range-input::placeholder { color: var(--rf-text-muted); }
.sr-range-input:focus { outline: none; border-color: var(--rf-blue); background: #fff; }
.sr-range-sep { font-size: 0.8125rem; color: var(--rf-text-muted); flex-shrink: 0; }


/* More filters */
.sr-more-filters-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  border-top: 1px solid var(--rf-border);
  padding: 13px 16px;
  color: var(--rf-blue);
  font: 600 0.8125rem var(--rf-font);
  cursor: pointer;
  transition: background 0.16s;
}
.sr-more-filters-btn:hover { background: var(--rf-blue-soft); }
.sr-more-filters-btn i { font-size: 1rem; }


/* ── Results column ─────────────────────────────────────────── */
.sr-results-col {
  padding-left: 16px;
  padding-right: 0;
  min-width: 0;
}

@media (max-width: 991.98px) {
  .sr-results-col {
    padding-left: 0;
  }
}


/* ── Listing cards ──────────────────────────────────────────── */
.sr-listings-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sr-listing-card {
  display: flex;
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  box-shadow: var(--rf-shadow-sm);
  overflow: hidden;
  transition: box-shadow 0.22s, transform 0.22s;
  position: relative;
}

/* Project card only: image+content sit in their own row
   (.sr-project-card-main), with the agent/CTA row as a second,
   full-width row underneath — the card itself becomes a column of
   those two rows instead of Property card's single image+body row.
   Property card (.sr-listing-card without .sr-project-card) is
   untouched by every rule in this block. */
.sr-listing-card.sr-project-card {
  flex-direction: column;
}
.sr-project-card-main {
  display: flex;
}
.sr-project-card > .sr-card-agent-row {
  margin-top: 0;
  padding: 12px 16px 14px;
}

/* Raise interactive elements above stretched-link pseudo-overlay.
   .sr-read-more-btn is excluded here — it sets its own position:
   absolute + z-index (see its rule below) to overlay the description
   text; this compound selector's position:relative would otherwise
   win by specificity and break that. */
.sr-listing-card .sr-wishlist-btn,
.sr-listing-card .sr-cta-roofy,

.sr-listing-card .sr-cta-phone,
.sr-listing-card .sr-cta-contact,
.sr-listing-card .sr-compare-label,
.sr-listing-card .sr-project-name-link {
  position: relative;
  z-index: 2;
}
.sr-listing-card:hover {
  box-shadow: var(--rf-shadow-md);
  transform: translateY(-2px);
}


/* Image panel */
.sr-card-img-wrap {
  position: relative;
  width: 220px;
  min-width: 220px;
  flex-shrink: 0;
  background: var(--rf-bg-light);
  overflow: hidden;
}

.sr-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.36s;
}
.sr-listing-card:hover .sr-card-img { transform: scale(1.04); }

/* Project card only, desktop/tablet row layout: pin the image panel
   to a fixed height and stop it stretching to match .sr-card-body's
   height (which grows with the Configuration Summary + description).
   Property card is untouched — it keeps the default stretch-to-match
   behavior via .sr-card-img's height:100% above. Scoped to ≥576px so
   it never competes with the mobile .sr-card-img-wrap height override
   (≤575.98px, below), which stays in sole control there. */
@media (min-width: 576px) {
  .sr-project-card .sr-card-img-wrap {
    height: 200px;
    align-self: flex-start;
  }
}

.sr-card-badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  pointer-events: none;
}

.sr-badge {
  display: inline-block;
  padding: 3px 7px;
  border-radius: 4px;
  font: 700 0.65rem var(--rf-font);
  letter-spacing: 0.03em;
  color: #fff;
  text-transform: uppercase;
}
.sr-badge--new       { background: var(--rf-green); }
.sr-badge--owner     { background: var(--rf-orange); }
.sr-badge--featured  { background: var(--rf-blue); }
.sr-badge--ready     { background: #0891B2; }
.sr-badge--newlaunch { background: #7C3AED; }

.sr-wishlist-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.92);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--rf-text-muted);
  transition: color 0.18s, background 0.18s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}
.sr-wishlist-btn:hover,
.sr-wishlist-btn.active {
  color: #E11D48;
  background: #fff;
}
.sr-wishlist-btn.active i::before {
  content: "\f417"; /* bi-heart-fill */
}

.sr-photo-count {
  position: absolute;
  bottom: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(0,0,0,0.52);
  color: #fff;
  font: 500 0.7rem var(--rf-font);
  padding: 3px 7px;
  border-radius: 4px;
  pointer-events: none;
}
.sr-photo-count i { font-size: 0.75rem; }


/* Card body */
.sr-card-body {
  flex: 1;
  min-width: 0;
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.sr-card-top-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.sr-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--rf-text);
  margin: 0;
  line-height: 1.3;
  flex: 1;
  min-width: 0;
}
.sr-card-title a {
  color: inherit;
  text-decoration: none;
  transition: color 0.16s;
}
.sr-card-title a:hover { color: var(--rf-blue); }

/* Project card only: project name, shown one level below the main
   title (which is now the configuration/property title, not the
   project name — see .sr-card-title / renderProjectCard()). A real,
   independent <a> — never nested inside .sr-card-title's stretched-link
   anchor — elevated to z-index:2 (see the stretched-link rule above)
   so it stays clickable to the Project Page over the card-wide overlay. */
.sr-project-name {
  margin: -3px 0 0;
  font-size: 0.8125rem;
}
.sr-project-name-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--rf-text-muted);
  font-weight: 600;
  text-decoration: none;
}
.sr-project-name-link:hover,

.sr-project-name-link:focus-visible {
  color: var(--rf-blue);
  text-decoration: underline;
}
.sr-project-name-link i { font-size: 0.75rem; }

/* Sponsored badge — small, neutral disclosure pill beside the title.
   Deliberately not styled like the promo badges in .sr-card-badges
   (NEW/FEATURED/etc.) so a sponsored listing stays clearly identifiable
   as paid placement rather than blending in as another property attribute. */
.sr-sponsored-badge {
  display: inline-flex;
  align-items: center;
  position: relative;
  z-index: 2; /* sit above .sr-card-title a's .stretched-link overlay */
  font: 700 0.625rem var(--rf-font);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--rf-text-muted);
  background: var(--rf-bg-light);
  border: 1px solid var(--rf-border);
  border-radius: 4px;
  padding: 2px 6px;
  margin-left: 7px;
  white-space: nowrap;
  vertical-align: middle;
}

.sr-compare-label {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.75rem;
  color: var(--rf-text-muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  margin-top: 1px;
}
.sr-compare-cb { accent-color: var(--rf-blue); cursor: pointer; }

.sr-card-location {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--rf-text-muted);
  margin: 0;
  line-height: 1.4;
}
.sr-card-location i { color: var(--rf-blue); font-size: 0.875rem; flex-shrink: 0; margin-top: 1px; }

.sr-card-pricing {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.sr-price {
  font: 700 1.1rem var(--rf-font);
  color: var(--rf-text);
}
.sr-price-sqft {
  font: 400 0.8rem var(--rf-font);
  color: var(--rf-text-muted);
}

.sr-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.sr-tag {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  background: var(--rf-bg-light);
  border: 1px solid var(--rf-border);
  border-radius: 4px;
  font: 500 0.75rem var(--rf-font);
  color: var(--rf-text-muted);
  white-space: nowrap;
}
.sr-tag--listing-type {
  background: var(--rf-blue-soft);
  border-color: #c0d4f7;
  color: var(--rf-blue);
}

/* Read More/Read Less — the paragraph always holds the FULL
   description (single source of truth, never re-truncated in JS);
   .sr-card-desc-wrap just clips it to a fixed collapsed height and
   animates max-height to the real scrollHeight on expand, so there's
   no mismatch between the collapsed and re-collapsed text and no
   layout jump (see initReadMore() in js/search-results.js). */
.sr-card-desc-wrap {
  position: relative;
  overflow: hidden;
  max-height: 40px; /* ~2 lines at 0.8125rem / 1.5 line-height */
  transition: max-height 0.3s ease;
}
.sr-card-desc {
  font-size: 0.8125rem;
  color: var(--rf-text-muted);
  line-height: 1.5;
  margin: 0;
  padding-right: 74px; /* reserves room so text never renders under the overlaid Read More/Read Less button */
}
/* Overlaid at the wrap's bottom-right corner (not a separate row)
   with a fade so it reads as sitting inline at the end of the visible
   text, collapsed or expanded — bottom:0 always tracks the wrap's
   current (collapsed or scrollHeight-expanded) bottom edge. */
.sr-read-more-btn {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, transparent, #fff 14px);
  border: none;
  color: var(--rf-blue);
  font: 600 0.8125rem var(--rf-font);
  cursor: pointer;
  padding: 0 0 0 20px;
  white-space: nowrap;
  text-decoration: underline;
}
.sr-read-more-btn:hover { color: var(--rf-blue-dark); }


/* Agent row */
.sr-card-agent-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  border-top: 1px solid var(--rf-border);
  padding-top: 10px;
  margin-top: auto;
}

.sr-agent-info {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.sr-agent-avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 700 0.875rem var(--rf-font);
  flex-shrink: 0;
}

.sr-agent-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.sr-agent-name {
  font: 600 0.8125rem var(--rf-font);
  color: var(--rf-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sr-agent-meta {
  display: flex;
  align-items: center;
  gap: 4px;
  font: 400 0.7375rem var(--rf-font);
  color: var(--rf-text-muted);
  white-space: nowrap;
}

.sr-verified-icon {
  color: var(--rf-blue);
  font-size: 0.75rem;
}

.sr-card-ctas {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.sr-cta-roofy,
.sr-cta-phone,
.sr-cta-contact {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  border-radius: var(--rf-r-sm);
  font: 600 0.75rem var(--rf-font);
  padding: 7px 11px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.sr-cta-roofy {
  background: var(--rf-blue-soft);
  color: var(--rf-blue);
  border: 1px solid #c0d4f7;
}
.sr-cta-roofy:hover { background: #d4e4ff; }

.sr-cta-phone {
  background: #fff;
  color: var(--rf-text);
  border: 1px solid var(--rf-border);
}
.sr-cta-phone:hover { border-color: var(--rf-blue); color: var(--rf-blue); }

.sr-cta-contact {
  background: var(--rf-blue);
  color: #fff;
  border: 1px solid var(--rf-blue);
}
.sr-cta-contact:hover { background: var(--rf-blue-dark); border-color: var(--rf-blue-dark); }


/* ── Infinite scroll (replaces pagination) ───────────────────
   Sentinel is a zero-height marker observed by IntersectionObserver
   in initInfiniteScroll() (js/search-results.js) — rootMargin gives
   it a 200px lookahead so the next batch loads just before the user
   hits the true bottom, for smooth/no-jump loading. */
.sr-scroll-sentinel {
  height: 1px;
}

.sr-loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 0;
  font: 500 0.8125rem var(--rf-font);
  color: var(--rf-text-muted);
}

.sr-loading-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--rf-blue-soft);
  border-top-color: var(--rf-blue);
  border-radius: 50%;
  animation: sr-spin 0.7s linear infinite;
}

@keyframes sr-spin {
  to { transform: rotate(360deg); }
}

.sr-end-message {
  text-align: center;
  padding: 20px 0;
  margin: 0;
  font: 500 0.8125rem var(--rf-font);
  color: var(--rf-text-light);
  border-top: 1px solid var(--rf-border);
}


/* ── Mobile filter drawer ───────────────────────────────────── */
.sr-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 300;
  opacity: 0;
  transition: opacity 0.28s;
}
.sr-drawer-overlay.open {
  display: block;
  opacity: 1;
}

.sr-filter-drawer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 88dvh;
  background: #fff;
  border-radius: 16px 16px 0 0;
  z-index: 301;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.32,0.72,0,1);
  box-shadow: 0 -4px 20px rgba(0,0,0,0.12);
}
.sr-filter-drawer.open { transform: translateY(0); }

.sr-drawer-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--rf-border);
  flex-shrink: 0;
}

.sr-drawer-title {
  font: 700 1rem var(--rf-font);
  color: var(--rf-text);
  margin: 0;
}

.sr-drawer-close {
  background: none;
  border: none;
  color: var(--rf-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  transition: color 0.16s;
}
.sr-drawer-close:hover { color: var(--rf-text); }

.sr-drawer-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Hide the sticky filter header inside the drawer */
.sr-drawer-body .sr-filter-header { display: none; }

.sr-drawer-footer {
  display: flex;
  gap: 10px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rf-border);
  flex-shrink: 0;
  background: #fff;
}

.sr-drawer-reset-btn {
  flex: 1;
  padding: 11px;
  background: #fff;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-r-sm);
  color: var(--rf-text);
  font: 600 0.875rem var(--rf-font);
  cursor: pointer;
  transition: border-color 0.18s;
}
.sr-drawer-reset-btn:hover { border-color: var(--rf-blue); color: var(--rf-blue); }

.sr-drawer-apply-btn {
  flex: 2;
  padding: 11px;
  background: var(--rf-blue);
  border: none;
  border-radius: var(--rf-r-sm);
  color: #fff;
  font: 700 0.875rem var(--rf-font);
  cursor: pointer;
  transition: background 0.18s;
}
.sr-drawer-apply-btn:hover { background: var(--rf-blue-dark); }


/* ── Responsive — mobile card layout ───────────────────────── */
@media (max-width: 575.98px) {
  .sr-listing-card {
    flex-direction: column;
  }
  .sr-project-card-main {
    flex-direction: column;
  }
  .sr-card-img-wrap {
    width: 100%;
    min-width: 0;
    height: 190px;
  }
  .sr-results-title {
    font-size: 1.0625rem;
  }
  .sr-card-ctas {
    width: 100%;
    justify-content: stretch;
  }
  .sr-cta-roofy,
  .sr-cta-phone,
  .sr-cta-contact {
    flex: 1;
    justify-content: center;
  }
}

@media (min-width: 576px) and (max-width: 991.98px) {
  .sr-card-img-wrap {
    width: 200px;
    min-width: 200px;
    height: 185px;
  }
}

/* ── Tablet: refine-bar hide long labels ────────────────────── */
@media (max-width: 767.98px) {
  .sr-refine-search-btn span { display: none; }
  .sr-refine-search-btn { padding: 8px 12px; }
  .sr-pagination-bar { justify-content: center; }
  .sr-showing-text { width: 100%; text-align: center; }
}


/* ── Mobile top-zone reorganization (Search Results UX brief) ──
   Breadcrumb and nearby-areas stay full width; the results summary
   and sort+filter controls share the same grid row (2 columns, the
   same pattern desktop already uses) so the header stays short and
   the first listing appears with minimal scrolling. Sort and Filter
   are icon-only square buttons, right-aligned, so the summary column
   (flex:1) gets the maximum width and the title wraps to at most
   ~2 lines instead of 3 — both still open the same Bottom Sheets. ── */
@media (max-width: 991.98px) {
  /* Grid items default to a content-based automatic minimum size;
     force 0 so tracks don't inflate to fit unshrinkable content
     (notably the nearby-areas horizontal-scroll row). */
  .sr-breadcrumb,
  .sr-results-info,
  .sr-results-controls,
  .sr-nearby-wrap {
    min-width: 0;
  }

  .sr-breadcrumb { margin-bottom: 10px; }

  .sr-results-info { margin-bottom: 0; }
  .sr-results-title { font-size: 1.0625rem; }
  .sr-results-sub { font-size: 0.75rem; }

  /* Sort + Filter: identical 42px icon-only square buttons, right-aligned */
  .sr-results-controls {
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
  }
  .sr-mobile-filter-btn {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    padding: 0;
    justify-content: center;
  }
  .sr-mobile-filter-btn .bi {
    font-size: 1.0625rem;
  }
  /* Label stays in the DOM (JS keeps it in sync) but is hidden on
     mobile now that both triggers are icon-only */
  .sr-mobile-btn-label { display: none; }
  .sr-mobile-filter-btn .sr-filter-badge {
    position: absolute;
    top: -4px;
    right: -4px;
  }

  /* Nearby areas: label on its own row, chips in a single
     horizontally-scrollable row below (desktop keeps the original
     inline label + wrapping-chips layout, untouched) */
  .sr-nearby-wrap { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sr-chips-row {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .sr-chips-row::-webkit-scrollbar { display: none; }
  .sr-chip { flex-shrink: 0; }

  /* Selected Areas: label on its own row, chips in a single
     horizontally-scrollable row (desktop keeps wrapping chips) */
  .sr-selected-areas-inner { flex-direction: column; align-items: flex-start; gap: 6px; }
  .sr-selected-areas-chips {
    width: 100%;
    flex-wrap: nowrap;
    overflow-x: auto;
    min-width: 0;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .sr-selected-areas-chips::-webkit-scrollbar { display: none; }
  .sr-selected-areas-chips .sr-area-chip { flex-shrink: 0; }
}


/* =============================================================
   PROJECT SEARCH RESULT CARD — Configuration Summary component
   Reuses .sr-listing-card / .sr-card-agent-row / .sr-card-ctas as-is
   (see search-results.html). Replaces the old single-row
   Property Type/Area/Price/Rate-per-Sqft metadata line with a
   compact CSS Grid summarizing up to 3 configurations (e.g. 2 BHK /
   2.5 BHK / 3 BHK), each with its own area and price range — built
   with CSS Grid (not a table) per spec. Desktop: 3-column grid with
   a header row. Mobile (≤575.98px): Configuration spans full width,
   Area + Price sit as a 2-column row beneath it, so the layout still
   stacks predictably without losing column alignment.
   ============================================================= */
.sr-config-summary {
  margin: 10px 0 12px;
  padding: 10px 0;
  border-top: 1px solid var(--rf-border);
  border-bottom: 1px solid var(--rf-border);
}

.sr-config-summary-hd {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 6px 10px;
  font: 600 0.6875rem var(--rf-font);
  color: var(--rf-text-light);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-bottom: 4px;
}

.sr-config-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr 1fr;
  gap: 6px 10px;
  align-items: baseline;
  padding: 5px 0;
  border-top: 1px solid var(--rf-border);
}
.sr-config-row:first-of-type { border-top: none; }

.sr-config-label {
  font: 600 0.8125rem var(--rf-font);
  color: var(--rf-text);
}
.sr-config-area,
.sr-config-price {
  font: 500 0.8125rem var(--rf-font);
  color: var(--rf-text-muted);
}
.sr-config-price { font-weight: 600; color: var(--rf-text); }

@media (max-width: 575.98px) {
  /* Keep the SAME 3-column, label-above-value hierarchy as desktop —
     Configuration / Area / Price stay in one row, header included,
     instead of stacking into vertical sections. minmax(0,1fr) (plus
     min-width:0 on the cells themselves) lets each track shrink below
     its content's natural width so long values wrap instead of forcing
     the row wider than the card — see feedback-css-grid-min-width. */
  .sr-config-summary-hd,
  .sr-config-row {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: 6px;
  }
  .sr-config-summary-hd span,
  .sr-config-label,
  .sr-config-area,
  .sr-config-price {
    min-width: 0;
    overflow-wrap: break-word;
  }
  .sr-config-summary-hd span {
    font-size: 0.5625rem;
    letter-spacing: 0;
    white-space: nowrap;
  }
  .sr-config-label,
  .sr-config-area,
  .sr-config-price {
    font-size: 0.75rem;
  }
}


/* =============================================================
   LEAD CAPTURE MODAL — reusable across all CTAs (identical
   component/markup to css/property-detail.css's Lead Capture
   Modal; copied here since this static template project has no
   shared-include mechanism across pages). Used on this page for
   the "View Phone Number" CTA (ctaType: 'view_phone').
   ============================================================= */
.pd-lead-modal .modal-dialog { max-width: 460px; }

.pd-lead-modal .modal-content {
  border: none;
  border-radius: var(--rf-r-lg);
  overflow: visible;
  box-shadow: var(--rf-shadow-lg);
}

.pd-lead-modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
}

.pd-lead-modal-body {
  padding: 32px 28px 28px;
}

/* ── Form view ─────────────────────────────────────────────── */
.pd-lead-modal-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--rf-navy);
  margin: 0 0 6px;
  padding-right: 24px;
}

.pd-lead-modal-sub {
  font-size: 13px;
  color: var(--rf-text-muted);
  margin: 0 0 22px;
  line-height: 1.5;
}

.pd-lead-field { margin-bottom: 16px; }

.pd-lead-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--rf-text);
  margin-bottom: 7px;
}

.pd-lead-req { color: var(--pd-red); }
.pd-lead-optional { font-weight: 400; color: var(--rf-text-light); }

.pd-lead-input {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  padding: 0 14px;
  font-size: 16px;
  font-family: var(--rf-font);
  color: var(--rf-text);
  outline: none;
  transition: border-color var(--rf-t), box-shadow var(--rf-t);
  -webkit-appearance: none;
}

.pd-lead-input::placeholder { color: var(--rf-text-light); font-size: 13.5px; }
.pd-lead-input:focus { border-color: var(--rf-blue); box-shadow: 0 0 0 3px rgba(20, 85, 204, 0.11); }
.pd-lead-input.pd-lead-invalid { border-color: #dc3545; }

.pd-lead-err {
  display: block;
  visibility: hidden;
  font-size: 11.5px;
  line-height: 14px;
  color: #dc3545;
  margin-top: 6px;
}
.pd-lead-err.show { visibility: visible; }

/* Phone group + country selector */
.pd-lead-phone-group {
  position: relative;
  display: flex;
  gap: 8px;
}

.pd-lead-country-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 10px;
  height: 48px;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  background: #fff;
  cursor: pointer;
  font-size: 13.5px;
  font-family: var(--rf-font);
  color: var(--rf-text);
  flex-shrink: 0;
  transition: border-color var(--rf-t);
}
.pd-lead-country-btn:hover,
.pd-lead-country-btn[aria-expanded="true"] { border-color: var(--rf-blue); }
.pd-lead-country-flag { font-size: 17px; line-height: 1; }
.pd-lead-country-code { font-weight: 600; }
.pd-lead-country-btn .bi-chevron-down { font-size: 10px; margin-left: 1px; }

.pd-lead-phone-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  padding: 0 14px;
  font-size: 16px;
  font-family: var(--rf-font);
  color: var(--rf-text);
  outline: none;
  transition: border-color var(--rf-t), box-shadow var(--rf-t);
  -webkit-appearance: none;
}
.pd-lead-phone-input::placeholder { color: var(--rf-text-light); }
.pd-lead-phone-input:focus { border-color: var(--rf-blue); box-shadow: 0 0 0 3px rgba(20, 85, 204, 0.11); }
.pd-lead-phone-input.pd-lead-invalid { border-color: #dc3545; }

.pd-lead-country-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 290px;
  max-width: calc(100vw - 56px);
  background: #fff;
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  box-shadow: var(--rf-shadow-lg);
  z-index: 20;
  overflow: hidden;
}
.pd-lead-country-dropdown.show { display: block; }

.pd-lead-country-search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--rf-border);
  color: var(--rf-text-light);
}
.pd-lead-country-search-wrap i { font-size: 13px; }

.pd-lead-country-search {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: var(--rf-font);
  color: var(--rf-text);
  min-width: 0;
}
.pd-lead-country-search::placeholder { color: var(--rf-text-light); }

.pd-lead-country-list {
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 0;
}

.pd-lead-country-group-label {
  padding: 6px 14px 4px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--rf-text-light);
}

.pd-lead-country-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 14px;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--rf-font);
  font-size: 13.5px;
  color: var(--rf-text);
  text-align: left;
}
.pd-lead-country-opt:hover,
.pd-lead-country-opt[aria-selected="true"] { background: var(--rf-blue-soft); }
.pd-lead-country-opt-flag { font-size: 16px; flex-shrink: 0; }
.pd-lead-country-opt-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pd-lead-country-opt-dial { color: var(--rf-text-muted); flex-shrink: 0; }

.pd-lead-country-empty {
  padding: 20px 14px;
  text-align: center;
  font-size: 12.5px;
  color: var(--rf-text-muted);
  margin: 0;
}

/* Terms checkbox */
.pd-lead-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 20px 0 22px;
}

.pd-lead-checkbox {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--pd-red);
  cursor: pointer;
}

.pd-lead-checkbox-label {
  font-size: 12.5px;
  color: var(--rf-text-muted);
  line-height: 1.55;
  cursor: pointer;
}
.pd-lead-checkbox-label a { color: var(--rf-blue); text-decoration: underline; }
.pd-lead-checkbox-label a:hover { color: var(--rf-blue-dark); }

/* Submit button — dynamic label per CTA */
.pd-lead-submit-btn {
  width: 100%;
  height: 50px;
  border: none;
  border-radius: var(--rf-r-md);
  background: var(--pd-red);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--rf-font);
  cursor: pointer;
  transition: background var(--rf-t), box-shadow var(--rf-t), transform 0.14s ease;
}
.pd-lead-submit-btn:hover:not(:disabled) {
  background: var(--pd-red-dark);
  box-shadow: 0 4px 14px rgba(229, 57, 53, 0.30);
  transform: translateY(-1px);
}
.pd-lead-submit-btn:active:not(:disabled) { transform: translateY(0); }
.pd-lead-submit-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ── Success view ──────────────────────────────────────────── */
.pd-lead-success-view {
  text-align: center;
  padding: 12px 4px 4px;
}

.pd-lead-success-ico {
  font-size: 52px;
  color: var(--rf-green);
  margin-bottom: 14px;
  animation: srLeadFadeIn 0.3s ease;
}

.pd-lead-success-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--rf-navy);
  margin: 0 0 10px;
}

.pd-lead-success-desc {
  font-size: 13.5px;
  color: var(--rf-text-muted);
  line-height: 1.6;
  margin: 0 0 24px;
}

.pd-lead-success-close-btn {
  width: 100%;
  height: 48px;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  background: #fff;
  color: var(--rf-text);
  font-size: 14.5px;
  font-weight: 600;
  font-family: var(--rf-font);
  cursor: pointer;
  transition: border-color var(--rf-t), color var(--rf-t);
}
.pd-lead-success-close-btn:hover { border-color: var(--rf-blue); color: var(--rf-blue); }


/* =============================================================
   OTP VERIFICATION VIEW — reusable component (identical markup/
   CSS/JS to property-detail.css + property-detail.js's copy, per
   this project's no-shared-include convention). Sits between the
   Lead form view and the Success view inside #pdLeadModal; every
   CTA on this page must pass through it before its success action
   (view phone / download / acknowledgement) runs.
   ============================================================= */
.pd-lead-otp-view { text-align: center; }

.pd-otp-icon {
  width: 60px;
  height: 60px;
  background: var(--rf-blue-soft);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 14px;
}
.pd-otp-icon i { font-size: 24px; color: var(--rf-blue); }

.pd-otp-title { text-align: center; }

.pd-otp-sent {
  font-size: 13px;
  color: var(--rf-text-muted);
  text-align: center;
  margin: 0 0 20px;
}
.pd-otp-phone { color: var(--rf-text); font-weight: 700; }
.pd-otp-change-btn {
  background: none;
  border: none;
  color: var(--rf-blue);
  font: 600 12.5px var(--rf-font);
  cursor: pointer;
  padding: 0;
  margin-left: 4px;
  text-decoration: underline;
}

.pd-otp-boxes {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-bottom: 14px;
}

.pd-otp-digit {
  width: 44px;
  height: 52px;
  border: 1.5px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  font-family: var(--rf-font);
  color: var(--rf-text);
  outline: none;
  transition: border-color var(--rf-t), box-shadow var(--rf-t);
  -webkit-appearance: none;
}
.pd-otp-digit::-webkit-outer-spin-button,
.pd-otp-digit::-webkit-inner-spin-button { -webkit-appearance: none; }
.pd-otp-digit:focus { border-color: var(--rf-blue); box-shadow: 0 0 0 3px rgba(20, 85, 204, 0.11); }
.pd-otp-digit.filled { border-color: var(--rf-blue); }
.pd-otp-digit.error { border-color: #dc3545; animation: pd-otp-shake 0.38s ease; }

@keyframes pd-otp-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-5px); }
  40%       { transform: translateX(5px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(3px); }
}

.pd-otp-error {
  visibility: hidden;
  font-size: 12.5px;
  color: #dc3545;
  margin: 0 0 10px;
}
.pd-otp-error.show { visibility: visible; }

.pd-otp-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 13px;
  color: var(--rf-text-muted);
  margin-bottom: 14px;
}
.pd-otp-spinner {
  width: 15px;
  height: 15px;
  border: 2px solid var(--rf-blue-soft);
  border-top-color: var(--rf-blue);
  border-radius: 50%;
  animation: sr-spin 0.7s linear infinite;
}

.pd-otp-resend-row { margin-bottom: 18px; }
.pd-otp-resend-btn {
  background: none;
  border: none;
  color: var(--rf-text-light);
  font: 600 12.5px var(--rf-font);
  cursor: not-allowed;
  padding: 0;
}
.pd-otp-resend-btn.active { color: var(--rf-blue); cursor: pointer; }
.pd-otp-timer { font-weight: 700; color: var(--rf-blue); }

/* ── Success view — contact reveal / download / acknowledgement
   content variants, swapped in by handleVerifiedAction() ────── */
.pd-otp-contact-card {
  background: var(--rf-bg-light);
  border: 1px solid var(--rf-border);
  border-radius: var(--rf-r-md);
  padding: 16px;
  margin: 0 0 20px;
  text-align: left;
}
.pd-otp-contact-project {
  font: 700 15px var(--rf-font);
  color: var(--rf-navy);
  margin: 0 0 6px;
}
.pd-otp-contact-role {
  font-size: 12px;
  color: var(--rf-text-light);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin: 0 0 2px;
}
.pd-otp-contact-person {
  font: 600 14px var(--rf-font);
  color: var(--rf-text);
  margin: 0 0 10px;
}
.pd-otp-contact-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 700 17px var(--rf-font);
  color: var(--rf-blue);
  margin: 0;
}

/* ── Mobile — bottom sheet ─────────────────────────────────── */
@media (max-width: 767px) {
  .pd-lead-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
  }
  .pd-lead-modal .modal-content {
    width: 100%;
    max-height: 92vh;
    overflow-y: auto;
    border-radius: 20px 20px 0 0;
    animation: srLeadSheetUp 0.28s ease;
  }
  .pd-lead-modal-body { padding: 26px 20px 24px; }
  .pd-lead-country-dropdown { width: 100%; max-width: none; }
}

@keyframes srLeadSheetUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes srLeadFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pd-lead-modal .modal-content { animation: none; }
}