/* ===== /rent-prices/ — Barcelona price choropleth ===== */
:root{
  --rp-accent:#10b981;
  --rp-ink:#0f172a;
  --rp-muted:#64748b;
  --rp-line:#e2e8f0;
  --rp-shadow:0 6px 24px rgba(15,23,42,.12);
  --rp-radius:14px;
}

/* ---------- header ---------- */
.rp-head{padding:28px 0 18px;background:#fff;border-bottom:1px solid var(--rp-line);}
.rp-head .container{display:flex;flex-direction:column;gap:6px;}
.rp-head h1{font-size:clamp(1.5rem,3.4vw,2.25rem);line-height:1.12;margin:0;color:var(--rp-ink);}
.rp-sub{margin:0;color:var(--rp-muted);font-size:1.02rem;}
.rp-cta-top{align-self:flex-start;display:inline-flex;gap:.4em;align-items:center;
  font-size:.86rem;font-weight:600;color:var(--rp-accent);text-decoration:none;
  background:rgba(16,185,129,.08);border:1px solid rgba(16,185,129,.22);
  padding:5px 12px;border-radius:999px;margin-bottom:8px;transition:background .15s;}
.rp-cta-top:hover{background:rgba(16,185,129,.16);}
.rp-cta-top span{color:var(--rp-ink);}

/* ---------- map shell ---------- */
.rp-mapwrap{background:#fff;}
.rp-map-shell{position:relative;height:clamp(480px,76vh,920px);width:100%;
  overflow:hidden;background:#eef2f6;border-bottom:1px solid var(--rp-line);}
#rp-map{position:absolute;inset:0;width:100%;height:100%;z-index:1;background:#eef2f6;}
.rp-meta{max-width:var(--container,1120px);margin:12px auto;padding:0 20px;
  color:var(--rp-muted);font-size:.82rem;line-height:1.5;}

/* ---------- overlays ---------- */
.rp-toggle{position:absolute;top:14px;left:14px;z-index:1000;display:flex;
  background:#fff;border-radius:999px;box-shadow:var(--rp-shadow);padding:4px;}
.rp-toggle button{border:0;background:transparent;cursor:pointer;font:inherit;font-weight:600;
  color:var(--rp-muted);padding:8px 16px;border-radius:999px;line-height:1;display:flex;
  align-items:baseline;gap:5px;transition:all .15s;}
.rp-toggle button small{font-size:.7em;font-weight:500;opacity:.7;}
.rp-toggle button.is-active{background:var(--rp-ink);color:#fff;}
.rp-toggle button.is-active small{opacity:.85;}

.rp-panel-btn{position:absolute;top:14px;right:14px;z-index:1000;border:0;cursor:pointer;
  font:inherit;font-weight:600;color:var(--rp-ink);background:#fff;box-shadow:var(--rp-shadow);
  padding:9px 14px;border-radius:999px;display:flex;align-items:center;gap:7px;}
.rp-panel-btn__icon{font-size:1.05em;line-height:1;}

.rp-legend{position:absolute;left:14px;bottom:20px;z-index:1000;background:#fff;
  box-shadow:var(--rp-shadow);border-radius:12px;padding:11px 13px;font-size:.74rem;
  color:var(--rp-ink);max-width:230px;}
.rp-legend[aria-hidden="true"]{display:none;}
.rp-legend__title{font-weight:700;margin-bottom:7px;font-size:.78rem;}
.rp-legend__row{display:flex;align-items:center;gap:7px;margin:3px 0;}
.rp-legend__sw{width:15px;height:11px;border-radius:3px;flex:0 0 auto;}
.rp-legend__row--nodata .rp-legend__sw{background:#dfe4ea;}

/* ---------- side panel / bottom sheet ---------- */
.rp-panel{position:absolute;top:0;right:0;bottom:0;width:320px;max-width:84%;z-index:1100;
  background:#fff;box-shadow:-8px 0 28px rgba(15,23,42,.16);display:flex;flex-direction:column;
  transform:translateX(102%);transition:transform .22s ease;}
.rp-panel.is-open{transform:translateX(0);}
.rp-panel__head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 16px 12px;border-bottom:1px solid var(--rp-line);}
.rp-panel__head h2{margin:0;font-size:1rem;color:var(--rp-ink);}
.rp-panel__close{border:0;background:transparent;font-size:1.5rem;line-height:1;cursor:pointer;
  color:var(--rp-muted);padding:0 4px;}
.rp-rank{list-style:none;margin:0;padding:6px 0;overflow-y:auto;flex:1;}
.rp-rank li{display:flex;align-items:center;gap:10px;padding:9px 16px;cursor:pointer;
  border-bottom:1px solid #f1f5f9;transition:background .12s;}
.rp-rank li:hover{background:#f8fafc;}
.rp-rank__rank{flex:0 0 22px;color:var(--rp-muted);font-size:.78rem;font-variant-numeric:tabular-nums;}
.rp-rank__body{flex:1;min-width:0;}
.rp-rank__name{font-weight:600;font-size:.86rem;color:var(--rp-ink);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;}
.rp-rank__bar{height:5px;border-radius:3px;margin-top:4px;min-width:3px;}
.rp-rank__val{flex:0 0 auto;font-weight:700;font-size:.84rem;color:var(--rp-ink);
  font-variant-numeric:tabular-nums;}
.rp-rank__sub{font-size:.7rem;color:var(--rp-muted);}

/* ---------- fixed info panel (top-right, under the Ranking button) ---------- */
.rp-info{position:absolute;top:58px;right:14px;z-index:1000;width:280px;
  background:#fff;border:1px solid var(--rp-line);border-radius:14px;
  box-shadow:var(--rp-shadow);padding:16px 20px;color:var(--rp-ink);}
.rp-info__empty{color:#94a3b8;font-size:14px;}
.rp-info__name{font-weight:700;font-size:16px;line-height:1.25;}
.rp-info__district{color:var(--rp-muted);font-size:13px;margin-top:2px;}
.rp-info__price{font-size:24px;font-weight:800;line-height:1.1;margin-top:14px;}
.rp-info__unit{font-size:13px;font-weight:600;color:var(--rp-muted);}
.rp-info__sub2{font-size:13px;color:var(--rp-muted);margin-top:3px;}   /* secondary metric: €/m² (rent) or total (sale) */
.rp-info__rows{margin-top:12px;}
.rp-info__row{font-size:13px;color:var(--rp-muted);margin-top:4px;}
.rp-info__delta{font-weight:700;color:var(--rp-muted);}            /* 0% = neutral */
.rp-info__delta--down{color:#0c8a5a;}   /* cheaper than city avg = good deal = green */
.rp-info__delta--up{color:#d6336c;}     /* pricier than city avg = red */
.rp-info__small{color:#b45309;}
.rp-info__nodata{color:var(--rp-muted);font-size:14px;margin-top:12px;}

/* BUG 1: kill the browser's default blue focus rectangle on SVG paths */
.leaflet-interactive{outline:none;}
.leaflet-interactive:focus,.leaflet-interactive:focus-visible{outline:none;}
.leaflet-bar a{color:var(--rp-ink);}
.leaflet-container{font-family:inherit;}

/* caption under the Rent/Buy toggle */
.rp-toggle-note{position:absolute;top:60px;left:16px;z-index:1000;font-size:.7rem;
  font-weight:600;color:#475569;background:rgba(255,255,255,.88);
  padding:3px 9px;border-radius:7px;box-shadow:0 2px 8px rgba(15,23,42,.08);}

/* SEO ordered lists */
.rp-seo-list{margin:14px 0;padding-left:1.3em;line-height:1.85;}
.rp-seo-list li{margin:2px 0;}

/* ---------- mobile: info panel docks to the bottom, full width ---------- */
@media (max-width:640px){
  .rp-map-shell{height:74vh;min-height:460px;}
  .rp-toggle button{padding:7px 13px;}
  /* fixed info panel -> bottom bar, full width, auto height */
  .rp-info{top:auto;bottom:0;left:0;right:0;width:auto;
    border-radius:16px 16px 0 0;border-left:0;border-right:0;border-bottom:0;
    padding:13px 18px;}
  .rp-info__price{margin-top:8px;}
  .rp-info__rows{margin-top:8px;}
  /* move the legend above the bottom info panel */
  .rp-legend{font-size:.66rem;bottom:auto;top:92px;padding:8px 10px;}
  /* ranking sheet slides up over the info panel when opened */
  .rp-panel{top:auto;left:0;right:0;bottom:0;width:100%;max-width:100%;height:62%;z-index:1200;
    border-radius:18px 18px 0 0;transform:translateY(102%);
    box-shadow:0 -8px 28px rgba(15,23,42,.18);}
  .rp-panel.is-open{transform:translateY(0);}
}