.map-page{position:relative;height:calc(100vh - 100px)}
#map{position:absolute;top:0;left:0;right:0;bottom:0}
#sidepanel{position:absolute;top:1rem;left:1rem;width:380px;max-height:calc(100% - 2rem);overflow:auto;border-radius:12px;z-index:1000}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  #sidepanel[style*="block"] {
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 100% !important;
    max-height: none !important;
    background: rgba(0, 0, 0, 0.5) !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: flex-start !important;
    padding: 1rem !important;
    padding-top: 2rem !important;
  }
  
  #sidepanel .card {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 12px;
  }
  
  #show-filters-btn {
    top: 0.5rem !important;
    left: 0.5rem !important;
  }
}
.list-item{display:flex;gap:12px;padding:12px}
.list-thumb{width:96px;height:72px;background:#f2f2f2;background-size:cover;background-position:center;border-radius:8px}
.list-body{flex:1}
.list-body .title{font-weight:600;margin-bottom:4px}
.list-body .meta{font-size:12px;color:var(--bs-secondary-color)}
.list-body .addr{font-size:12px;color:var(--bs-secondary-color);margin-top:2px}
.list-body .details{display:inline-block;margin-top:6px;font-size:12px}
.popup-card{display:flex;gap:12px;width:auto;max-width:460px;color:#111;align-items:flex-start}
.popup-card .thumb{width:120px;height:90px;background:#f2f2f2;background-size:cover;background-position:center;border-radius:10px}
.popup-card .body{flex:1;min-width:0}
.popup-card .title{
  font-weight:600;
  margin-bottom:6px;
  line-height:1.2;
  /* wrap naturally; allow long tokens to break */
  white-space:normal;
  overflow-wrap:anywhere;
}
.popup-card .status{margin-bottom:6px}
.maplibregl-popup-content{
  max-width:500px;
  padding:12px;
  border-radius:12px;
  box-sizing:border-box;
  overflow:visible;
}
.toggle-list{position:absolute;bottom:1rem;left:1rem}
.loader{position:absolute;top:1rem;right:1rem;background:#fff;padding:6px 10px;border-radius:6px;box-shadow:0 10px 20px rgba(0,0,0,.1)}

/* Dark-mode tuning for booking-style toggle buttons (Listing Status) */
/* Dark-mode tuning for booking-style toggle buttons */
[data-bs-theme="dark"] .map-page .btn-outline-secondary{
  color: var(--bs-body-color);
  border-color: rgba(255,255,255,.28);
  background-color: rgba(255,255,255,.05);
}
[data-bs-theme="dark"] .map-page .btn-outline-secondary:hover{
  background-color: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.35);
}
[data-bs-theme="dark"] .map-page .btn-check:checked + .btn-outline-secondary,
[data-bs-theme="dark"] .map-page .btn-check:active + .btn-outline-secondary{
  color:#fff;
  background-color: var(--bs-secondary);
  border-color: var(--bs-secondary);
}
[data-bs-theme="dark"] .map-page .btn-check:focus + .btn-outline-secondary,
[data-bs-theme="dark"] .map-page .btn-outline-secondary:focus{
  box-shadow: 0 0 0 0.2rem rgba(108,117,125,.25);
}