/* Property-card carousel controls */
.property-card{position:relative}
.pc-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;
  background:rgba(0,0,0,.45);color:#fff;border:0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;opacity:0;transition:opacity .2s;z-index:2
}
.property-card:hover .pc-nav{opacity:1}
.pc-prev{left:6px} .pc-next{right:6px}
.pc-dots{position:absolute;left:8px;bottom:8px;display:flex;gap:6px;z-index:3}
.pc-dot{
  width:8px;height:4px;
  background:rgba(255,255,255,.6);border:0;cursor:pointer;opacity:.9
}
.pc-dot.active{background:#fff}

.price-marker{
  font: 600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:#111; color:#fff;
  padding:6px 8px; border-radius:6px;
  box-shadow:0 2px 8px rgba(0,0,0,.25);
  transform: translateY(-4px);
  white-space: nowrap;
}
.price-marker:hover{ box-shadow:0 4px 14px rgba(0,0,0,.35); }

  /* More Filters dropdown */
  .more-filters-panel{
    position: fixed;                /* fixed so we position vs viewport */
    z-index: 10000;
    background:#fff;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
    border-radius:8px;
    padding:16px 16px 12px;
    width: min(900px, 96vw);
    max-width: calc(100vw - 32px);  /* keep inside viewport */
    max-height: 70vh;
    overflow:auto;
  }
  .more-filters-header{
    display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;
  }
  .mf-grid .form-label{ font-weight:600; font-size:.95rem; }
  .mf-chip{ font-size:.85rem; color:#666; }
  /* make CBLs compact */
  .mf-cbl label{ display:block; margin:0; padding:2px 0; cursor:pointer;}
  .mf-actions{ display:flex; gap:8px; justify-content:flex-end; padding-top:10px; border-top:1px solid #eee; margin-top:10px;}
  @media (max-width: 576px){
    .more-filters-panel{ left: 2% !important; right: 2% !important; width: 96vw !important; }
  }
</style>
    <style>
        /* --- Pretty chip buttons for panel actions --- */
.panel-actions{ display:flex; gap:6px; margin-bottom:6px; }

.chip-btn{
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; line-height:1; font-weight:600;
  padding:6px 10px; border-radius:9999px; border:1px solid transparent;
  background:#f7f8fa; color:#333; cursor:pointer;
  transition:background .15s ease, border-color .15s ease, box-shadow .15s ease, transform .04s ease;
}
.chip-btn i{ font-size:12px; }
.chip-btn:active{ transform:translateY(1px); }

.chip-primary{
  background:#eef6ff; color:#0b63ce; border-color:#cfe5ff;
}
.chip-primary:hover{ background:#e3f0ff; }

.chip-ghost{
  background:#fff; color:#666; border-color:#e6e6e6;
}
.chip-ghost:hover{ background:#fafafa; }

.chip-btn:focus{ outline: none; box-shadow:0 0 0 3px rgba(76,159,254,.25); }

/* Keep rows full-width and aligned */
.padcheckbox label{
background:white;
  display:flex;
  align-items:center;
  width:100%;
  padding:6px 8px;     /* right padding = distance from panel edge */
  gap:0 !important;    /* we’ll control the visual gap ourselves */
  justify-content:flex-start !important;
}

/* Text should size to content (no flex-grow) */
.padcheckbox .cb-text{
  flex:0 1 auto;
  text-align:left;
}

/* Invisible spacer pushes the checkbox to the far right */
.padcheckbox label::after{
  content:"";
  flex:1 1 auto;       /* takes all remaining space */
}

/* Checkbox: tiny, constant gap from the text; sits at the right due to ::after */
.padcheckbox input[type="checkbox"]{
  order:2;
  margin-left:8px;     /* <-- the visible gap between text and checkbox */
  margin-right:0;      /* stays inside the row’s right padding */
}

/* if you want the checkbox literally at the panel edge, use this: */
/* .padcheckbox label{ padding-right:0; } */


.padcheckbox label:hover{ background:#f6f8fb; }

/* optional: make the panel interior a touch padded */
.multi-ddl-panel .padcheckbox{ padding: 4px 2px; }


        .form-select {
            --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
            display: block; width: 100%; padding: 8px; font-size: unset; font-weight: 400; line-height: 1.5;
            color: var(--bs-body-color); background-color: var(--bs-body-bg);
            background-image: var(--bs-form-select-bg-img),var(--bs-form-select-bg-icon,none);
            background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
            border: none; border-radius: 0px; transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
            -webkit-appearance: none; -moz-appearance: none; appearance: none;
        }

        .multi-ddl{ display:flex; align-items:center; justify-content:space-between; padding:8px 10px; min-height:38px; cursor:pointer; background:#fff; max-width:340px; }
        .multi-ddl:focus{ outline:2px solid #4c9ffe; }
        .multi-ddl .chevron{ margin-left:8px;font: normal normal normal 14px / 1 FontAwesome; }

        .multi-ddl-panel{
  position: absolute;         /* <- back to absolute */
  z-index: 9999;
  margin-top: 0;
  min-width: 180px;
  background: #fff;
  box-shadow: 0 10px 25px rgba(0,0,0,.12);
  max-height: 260px;
  overflow: auto;
  width: 340px;
}


        .panel-actions{ display:flex; gap:8px; margin-bottom:6px; }
        .panel-actions button{ font-size:12px; padding:4px 8px; }
        .cbl td{ padding:2px 6px; }

        .map-container { height: 400px; width: 100%; margin-bottom: 20px; }

        .property-card {
            height: 100%; border: none; display: flex; flex-direction: column; justify-content: space-between;
            height:230px; margin-bottom: 33px;
        }
        .property-card .box-featured-text { position: relative; bottom: -65px; }

        .property-card img { transition: opacity 0.2s ease; }
        .property-card a:hover img { opacity: 0.85; }

        .highlight-marker { outline: 3px solid #007bff; box-shadow: 0 0 10px rgba(0, 123, 255, 0.6); transition: outline 0.3s ease; }
        
        /* TOGGLE: when results are full width, let them grow */
        .results-full .overflow-auto { max-height: none !important; }
        #resultsGrid.one-per-row > .col,
        #resultsGrid.one-per-row > [class*="col-"]{
          flex: 0 0 50% !important;
          max-width: 100% !important;
          width: 100% !important;
          float: none !important; /* beat any legacy float grid */
        }
        .property-card { margin-bottom: 0 !important; }
.multi-ddl {
    min-height: unset;
    border: 1px solid #ccc;
    max-height: 36px;
}
        @media only screen and (max-width: 1100px) {

        #resultsGrid.one-per-row > [class*="col-"]{
          flex: 0 0 100% !important;
}
}
        .mt-2 {
    margin-top: .0rem !important; 
}
.multi-ddl {max-height:36px}
        }

        /* ensure native selects never flash when replaced by multi-ddl */
        .ms-src { display: none !important; }
@media (max-width: 767.98px) {
  #resultsCol .overflow-auto {
    overflow: visible !important;   /* undo Bootstrap's overflow-auto */
    max-height: none !important;    /* beats the inline 600px style */
margin-bottom:20px;
  }
}
.btn-icon{    width: 36px;
    height: 38px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    font-size: 20px;
    color: var(--first-color);
    background: none;
    text-decoration: none;
    opacity: 0.5;
}
.btn-icon:hover {opacity:1.0}

.runsearch {    color: white;
    background: var(--first-color);
    padding: 7px;
    border-radius: 3px;
    font-size: 22px;
}

.srchbtn {
    opacity: 1.0;
}
.srchbtn:hover {
    opacity: 0.5;
}
.resultsdetail {
    margin:10px 0px 0px;
    width: 100%;
	display: flex;
    justify-content: space-between;
    z-index:1;
}
.resultsdetail .btn-icon {
    height: 25px;
font-size: 25px;
}@media only screen and (max-width: 1500px){ 
.results-sort, .results-sort h6 {font-size:13px;margin-bottom:16px}
}
@media only screen and (max-width: 1080px){ 
	.filters-row{flex-wrap:nowrap;} 
	/*.resultsdetail, .results-sort{flex-direction:column;text-align:center;    justify-content: center;}*/
	.results-sort, .results-sort h6 {font-size:13px;margin-bottom:16px}
}