/* =============================================================
   Gloven IDX Map  -  bidx-map.css
   ============================================================= */

/* ?? Brand tokens ??????????????????????????????????????????? */
:root {
  --bidx-brand:      #003d53;
  --bidx-brand-mid:  #007582;
  --bidx-brand-pale: #e6f2f5;
  --bidx-radius:     8px;
  /* Height of your fixed site header - adjust if the sticky map
     sits too high or too low on the page.                       */
  --bidx-hdr: 80px;
}

/* ?? Results header layout fix ?????????????????????????????? */
/* Push the Sort dropdown to the right so per-page + toggle
   sit flush against it on the right side of the header.        */
#bidx-results-hdr #bidx-sort {
  margin-left: auto !important;
}

/* ?? Per-page selector ?????????????????????????????????????? */
.bidx-pp-wrap {
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  font-size:   13px !important;
  color:       #555 !important;
  font-family: inherit !important;
  white-space: nowrap !important;
  margin-left: 14px !important;
  cursor:      default !important;
}

.bidx-pp-sel {
  padding:       5px 8px !important;
  border:        1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-size:     13px !important;
  font-family:   inherit !important;
  background:    #fff !important;
  color:         #333 !important;
  cursor:        pointer !important;
  line-height:   1.4 !important;
}

.bidx-pp-sel:focus {
  outline:        2px solid var(--bidx-brand) !important;
  outline-offset: 2px !important;
  border-color:   transparent !important;
}

/* ?? View-toggle pill ??????????????????????????????????????? */
/* Dark-brand pill container; active button gets a white capsule
   so it's clearly distinct from the inactive button.           */
#bidx-view-toggle {
  display:       flex !important;
  gap:           2px !important;
  background:    var(--bidx-brand) !important;
  border-radius: 10px !important;
  padding:       3px !important;
  flex-shrink:   0 !important;
  margin-left:   12px !important;
  align-items:   center !important;
}

#bidx-view-toggle .bidx-toggle-btn {
  display:     flex !important;
  align-items: center !important;
  gap:         6px !important;
  padding:     7px 14px !important;
  border:      none !important;
  border-radius: 7px !important;
  background:  transparent !important;
  color:       rgba(255,255,255,.55) !important;
  font-size:   13px !important;
  font-weight: 500 !important;
  cursor:      pointer !important;
  transition:  all .18s !important;
  font-family: inherit !important;
  line-height: 1 !important;
  box-shadow:  none !important;
  text-shadow: none !important;
  white-space: nowrap !important;
}

#bidx-view-toggle .bidx-toggle-btn svg {
  width:       15px !important;
  height:      15px !important;
  flex-shrink: 0 !important;
}

/* Active state - white capsule, brand-colour text */
#bidx-view-toggle .bidx-toggle-btn.bidx-toggle-on {
  background: #fff !important;
  color:      var(--bidx-brand) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.18) !important;
}

/* Hover on inactive */
#bidx-view-toggle .bidx-toggle-btn:hover:not(.bidx-toggle-on) {
  background: rgba(255,255,255,.15) !important;
  color:      #fff !important;
}

/* ?? Split wrapper ?????????????????????????????????????????? */
#bidx-split {
  display: contents;   /* transparent in list mode */
}

#bidx-app.bidx-map-mode #bidx-split {
  display:     flex;
  align-items: flex-start;
  margin-top:  12px;
}

/* ?? List sidebar ??????????????????????????????????????????? */
#bidx-map-aside {
  display: contents;
}

#bidx-app.bidx-map-mode #bidx-map-aside {
  display:      block;
  flex:         0 0 38%;
  max-width:    38%;
  overflow-y:   auto;
  height:       calc(100vh - var(--bidx-hdr) - 56px);
  min-height:   500px;
  border-right: 1px solid #e5e7eb;
}

/* Compact 1-column cards in sidebar */
#bidx-app.bidx-map-mode #bidx-grid {
  grid-template-columns: 1fr !important;
  padding:               8px 10px !important;
  gap:                   8px !important;
}

#bidx-app.bidx-map-mode .bidx-card {
  display:        flex !important;
  flex-direction: row !important;
  border-radius:  var(--bidx-radius) !important;
  overflow:       hidden;
  cursor:         pointer;
  transition:     box-shadow .15s, background .15s;
}

#bidx-app.bidx-map-mode .bidx-card-img {
  width:       150px !important;
  min-width:       150px !important;
  height:      115px !important;
  flex-shrink: 0;
}

#bidx-app.bidx-map-mode .bidx-card-img img {
  width:      100% !important;
  height:     100% !important;
  object-fit: cover !important;
}

#bidx-app.bidx-map-mode .bidx-card-body {
  flex:      1;
  padding:   8px 10px !important;
  min-width: 0;
}

#bidx-app.bidx-map-mode .bidx-price       { font-size: 14px !important; }
#bidx-app.bidx-map-mode .bidx-stats       { font-size: 12px !important; margin: 3px 0 !important; }
#bidx-app.bidx-map-mode .bidx-address     { font-size: 12px !important; white-space: normal !important; overflow: visible !important; text-overflow: unset !important; line-height: 1.4 !important; }
#bidx-app.bidx-map-mode .bidx-meta        { font-size: 11px !important; }

/* Card highlighted from map hover */
.bidx-card.bidx-card-hi {
  background: var(--bidx-brand-pale) !important;
  box-shadow: 0 0 0 2px var(--bidx-brand) !important;
}

/* Pagination inside sidebar */
#bidx-app.bidx-map-mode #bidx-pages {
  padding: 8px 10px 12px !important;
}

/* ?? Map panel ?????????????????????????????????????????????? */
#bidx-map-pane {
  display: none;
}

#bidx-app.bidx-map-mode #bidx-map-pane {
  display:       block;
  flex:          1 1 0;
  position:      sticky;
  top:           var(--bidx-hdr);
  height:        calc(100vh - var(--bidx-hdr));
  overflow:      hidden;
  border-radius: 0 0 12px 0;
}

#bidx-map {
  width:      100%;
  height:     100%;
  background: #f3f4f6;
}

/* ?? Price-pin markers ?????????????????????????????????????? */
.bidx-pin {
  display:       inline-block;
  position:      absolute;
  transform:     translate(-50%, calc(-100% - 8px));
  background:    var(--bidx-brand);
  color:         #fff;
  padding:       5px 10px;
  border-radius: 20px;
  font-family:   -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:     12px;
  font-weight:   700;
  white-space:   nowrap;
  line-height:   1;
  box-shadow:    0 2px 8px rgba(0,0,0,.28);
  cursor:        pointer;
  transition:    transform .13s, background .13s, box-shadow .13s;
  border:        2px solid transparent;
}

.bidx-pin::after {
  content:    '';
  position:   absolute;
  bottom:     -7px;
  left:       50%;
  transform:  translateX(-50%);
  border:     4px solid transparent;
  border-top: 4px solid var(--bidx-brand);
  transition: border-top-color .13s;
}

.bidx-pin:hover {
  background: var(--bidx-brand-mid);
  transform:  translate(-50%, calc(-100% - 10px)) scale(1.06);
  box-shadow: 0 4px 14px rgba(0,0,0,.32);
  z-index:    9999 !important;
}

.bidx-pin:hover::after { border-top-color: var(--bidx-brand-mid); }

.bidx-pin.bidx-pin-on {
  background:  var(--bidx-brand-mid);
  border-color:#fff;
  transform:   translate(-50%, calc(-100% - 10px)) scale(1.1);
  box-shadow:  0 4px 16px rgba(0,0,0,.35);
  z-index:     9999 !important;
}

.bidx-pin.bidx-pin-on::after { border-top-color: var(--bidx-brand-mid); }

/* ?? Cluster icons ?????????????????????????????????????????? */
.bidx-cluster {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           100%;
  height:          100%;
  background:      var(--bidx-brand);
  color:           #fff;
  border-radius:   50%;
  font-family:     -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size:       13px;
  font-weight:     700;
  box-shadow:      0 2px 8px rgba(0,0,0,.25);
  border:          3px solid #fff;
  cursor:          pointer;
  transition:      background .15s;
}

.bidx-cluster:hover { background: var(--bidx-brand-mid); }

/* ?? Popup ?????????????????????????????????????????????????? */
.bidx-lf-popup .leaflet-popup-content-wrapper {
  border-radius: 10px;
  padding:       0;
  overflow:      hidden;
  box-shadow:    0 4px 22px rgba(0,0,0,.18);
}

.bidx-lf-popup .leaflet-popup-content {
  margin: 0;
  width:  240px !important;
}

.bidx-lf-popup .leaflet-popup-tip-container { margin-top: -1px; }

.bidx-pw-img          { width: 100%; height: 145px; overflow: hidden; }
.bidx-pw-img img      { width: 100%; height: 100%; object-fit: cover; display: block; }
.bidx-pw-body         { padding: 12px 14px 14px; }
.bidx-pw-body p       { margin: 0 0 4px; }
.bidx-pw-price        { font-size: 18px; font-weight: 700; color: var(--bidx-brand); }
.bidx-pw-stats        { font-size: 13px; color: #555; }
.bidx-pw-addr         { font-size: 12px; color: #444; line-height: 1.4; margin-top: 2px !important; }

.bidx-pw-btn {
  display:       block;
  width:         100%;
  margin-top:    10px;
  padding:       9px 0;
  background:    var(--bidx-brand);
  color:         #fff;
  border:        none;
  border-radius: 6px;
  font-size:     13px;
  font-weight:   600;
  cursor:        pointer;
  font-family:   inherit;
  text-align:    center;
  transition:    background .15s;
}

.bidx-pw-btn:hover { background: var(--bidx-brand-mid); }

/* ?? Mobile floating toggle ???????????????????????????????? */
#bidx-mob-toggle {
  display:       none;
  position:      fixed;
  bottom:        24px;
  left:          50%;
  transform:     translateX(-50%);
  background:    var(--bidx-brand);
  color:         #fff;
  padding:       12px 26px;
  border-radius: 40px;
  box-shadow:    0 4px 18px rgba(0,0,0,.28);
  border:        none;
  font-size:     15px;
  font-weight:   600;
  cursor:        pointer;
  z-index:       9990;
  font-family:   inherit;
  transition:    background .15s;
  align-items:   center;
  gap:           8px;
}

#bidx-mob-toggle svg   { width: 17px; height: 17px; }
#bidx-mob-toggle:hover { background: var(--bidx-brand-mid); }

/* ?? Responsive ???????????????????????????????????????????? */
@media (max-width: 960px) {
  #bidx-mob-toggle  { display: flex; }
  #bidx-view-toggle { display: none !important; }
  .bidx-pp-wrap     { display: none !important; }

  #bidx-app.bidx-map-mode #bidx-split { flex-direction: column; }

  #bidx-app.bidx-map-mode #bidx-map-aside {
    display:      none;
    flex:         none;
    width:        100%;
    max-width:    100%;
    height:       auto;
    max-height:   60vh;
    overflow-y:   auto;
    border-right: none;
  }

  #bidx-app.bidx-map-mode #bidx-map-pane {
    position:      relative;
    top:           0;
    width:         100%;
    height:        calc(100vh - var(--bidx-hdr) - 60px);
    min-height:    340px;
    border-radius: 0;
  }

  #bidx-app.bidx-map-mode.bidx-mob-list #bidx-map-aside { display: block; }
  #bidx-app.bidx-map-mode.bidx-mob-list #bidx-map-pane  { display: none; }

  #bidx-app.bidx-map-mode #bidx-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 480px) {
  .bidx-lf-popup .leaflet-popup-content { width: 200px !important; }
  .bidx-pw-img { height: 110px; }
}


/* -- Badge visibility overrides ----------------------------------- */
/* List view: hide status badges only (ACTIVE / PENDING / CLOSED / NEW) */
#bidx-app:not(.bidx-map-mode) .bidx-badge-active,
#bidx-app:not(.bidx-map-mode) .bidx-badge-pending,
#bidx-app:not(.bidx-map-mode) .bidx-badge-closed,
#bidx-app:not(.bidx-map-mode) .bidx-badge-new {
  display: none !important;
}

/* Map view: hide all photo overlays (status + property type) */
#bidx-app.bidx-map-mode .bidx-badges {
  display: none !important;
}