/* =========================================================
   Dewandaru — Half-Map Listing page (page-scoped)
   Dimuat HANYA di halaman property listing (guest/property).
   Memperbaiki: map fixed menutupi footer saat scroll penuh.

   Root cause template (style.css .half-map-sec #map-container): 
   position: fixed => element terikat viewport, terus berada
   di bawah layar meski dokumen sudah di bawah -> nutup footer.

   Solusi: fixed -> sticky DI DALAM kolom listing.
   Body.half_map + flexbox membuat kolom kiri (col-xl-6) 
   setinggi konten kolom kanan (listing), sehingga sticky map
   menempel top layar selama listing scroll (UX half-map asli),
   TAPI berhenti di ujung kolom -> footer bebas muncul,
   mapping kiri tak pernah menutup footer.

   Responsive: breakpoint <=1200px (responsive.css:73) tetap
   position:static width:100% — tidak disentuh.
   ========================================================= */

@media (min-width: 1201px) {
  body.half_map .half-map-sec #map-container.fullwidth-home-map {
    position: sticky;
    top: 0;            /* di-override inline oleh scripts.js (top: header height) */
    width: 100%;       /* isi kolom kiri (col-xl-6, 50% container full-width) */
    height: 100vh;     /* tinggi area scroll sama seperti versi fixed */
    z-index: 50;       /* pertahankan prioritas layering map */
    margin-bottom: 0;
    overflow: hidden;
  }
}

/* ---------------------------------------------------------
   Filter panel: hapus kotak putih rounded (template .banner-search
   background:#fff + border-radius:50px) — field tetap utuh.
   Scoped .half-map-sec, tidak menyentuh pemakaian lain.
   Address input tetap punya border 1px #e0e1e6 dari
   .widget-property-search .form-control, jadi tidak "naked".
   --------------------------------------------------------- */
.half-map-sec .widget-property-search,
.half-map-sec .widget-property-search form.banner-search {
  background: transparent;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Address input: kotak putih solid — serasi dengan dropdown .drop-menu. */
.half-map-sec .widget-property-search .form_field.full .form-control {
  background-color: #ffffff;
  border: 1px solid #e0e1e6;
  border-radius: 0;
}

/* Dropdown select: putih solid, serasi dengan input address. */
.half-map-sec .widget-property-search .drop-menu,
.half-map-sec .widget-property-search .drop-menu .select {
  background-color: #ffffff;
}

/* ---------------------------------------------------------
   Empty state — ditampilkan saat filter tidak menghasilkan
   properti. Pakai token brand (ab-theme.css :root).
   --------------------------------------------------------- */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 24px;
  margin: 24px 0;
  background: var(--ab-bg);
  border: 1px dashed var(--ab-accent);
  border-radius: var(--ab-radius-lg);
  color: var(--ab-accent);
}
.empty-state-icon {
  margin-bottom: 20px;
  color: var(--ab-accent);
}
.empty-state h3 {
  font-family: var(--ab-font-heading);
  font-weight: var(--ab-font-heading-weight);
  color: var(--ab-primary);
  font-size: 26px;
  margin: 0 0 10px;
}
.empty-state p {
  color: var(--ab-text-muted);
  max-width: 420px;
  margin: 0 0 24px;
  font-family: var(--ab-font-body);
  line-height: var(--ab-line-height-body);
}
.empty-state-reset {
  background: var(--ab-accent);
  border: 1px solid var(--ab-accent);
  color: #ffffff;
  border-radius: var(--ab-radius-pill);
  padding: 10px 28px;
  font-family: var(--ab-font-body);
  font-weight: 600;
  transition: background var(--ab-transition), border-color var(--ab-transition);
}
.empty-state-reset:hover {
  background: var(--ab-primary);
  border-color: var(--ab-primary);
  color: #ffffff;
}

/* ---------------------------------------------------------
   Price range + currency selects (brand-styled native selects)
   --------------------------------------------------------- */
.range-select {
  width: 100%;
  background-color: #ffffff;
  border: 1px solid #e0e1e6;
  border-radius: 0;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--ab-font-body);
  color: var(--ab-text);
  cursor: pointer;
}
.range-select:focus {
  border-color: var(--ab-accent);
  outline: none;
  box-shadow: none;
}

/* Uniform control heights: keyword (48px) + drop-menu .select (48px)
   already set by style.css; force the same on native selects + bedrooms
   toggle so the whole filter row aligns. */
.half-map-sec .widget-property-search .range-select,
.half-map-sec .widget-property-search .bedrooms-select {
  height: 48px;
  min-height: 48px;
  line-height: 1.5;
}

/* ---------------------------------------------------------
   Bedrooms multi-select checkbox dropdown
   --------------------------------------------------------- */
.bedrooms-drop {
  position: relative;
  z-index: 1050;
  width: 100%;
}
.bedrooms-select {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #ffffff;
  border: 1px solid #e0e1e6;
  border-radius: 0;
  padding: 12px 14px;
  font-size: 14px;
  font-family: var(--ab-font-body);
  color: var(--ab-text);
  text-align: left;
  cursor: pointer;
}
.bedrooms-select i {
  color: var(--ab-accent);
  margin-left: 6px;
}
.bedrooms-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1055 !important;
  background: #ffffff;
  border: 1px solid var(--ab-border);
  box-shadow: var(--ab-shadow-md);
  padding: 8px 0;
  max-height: 260px;
  overflow-y: auto;
}
.bedrooms-panel.open {
  display: block;
}
.bedroom-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  margin: 0;
  font-size: 14px;
  font-family: var(--ab-font-body);
  color: var(--ab-text);
  cursor: pointer;
  white-space: nowrap;
}
.bedroom-option:hover {
  background: color-mix(in srgb, var(--ab-accent) 12%, #ffffff);
}
.bedroom-option input {
  accent-color: var(--ab-accent);
  margin: 0;
  flex-shrink: 0;
}