/* ==========================================================
   Denah 3D Pasar Ciparay Baru — mengikuti Brand Guideline
   Semua style di-scope di .pcbd supaya aman di tema/Elementor
   ========================================================== */
.pcbd{
  --pcbd-primary:#056124; --pcbd-fresh:#098D28; --pcbd-leaf:#12A24A; --pcbd-deep:#0F5D2E;
  --pcbd-light:#EAF6EC; --pcbd-off:#FAFAF5; --pcbd-gray:#6B7280; --pcbd-char:#1F2937;
  --pcbd-orange:#F87603; --pcbd-yellow:#F9C522; --pcbd-line:#DCEBDF;
  --pcbd-head:'Montserrat',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pcbd-body:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pcbd-r:16px; --pcbd-r-sm:12px;
  --pcbd-shadow:0 10px 30px rgba(5,97,36,.08);
  font-family:var(--pcbd-body); color:var(--pcbd-char); line-height:1.6;
  -webkit-font-smoothing:antialiased; width:100%; max-width:1200px; margin:0 auto;
}
.pcbd *,.pcbd *::before,.pcbd *::after{box-sizing:border-box}

/* reset elemen agar tidak ditimpa style tema / Elementor kit */
.pcbd button,.pcbd input,.pcbd select{
  font-family:var(--pcbd-body); font-size:14px; line-height:1.2; letter-spacing:normal;
  text-transform:none; text-shadow:none; box-shadow:none; margin:0; min-height:0; min-width:0;
  -webkit-appearance:none; appearance:none;
}
.pcbd button{background:none; border:0; padding:0; color:inherit; cursor:pointer; border-radius:0}
.pcbd button:focus-visible,.pcbd input:focus-visible,.pcbd canvas:focus-visible{outline:2px solid var(--pcbd-yellow); outline-offset:2px}
.pcbd svg{display:inline-block; vertical-align:middle}

/* ---------- judul ---------- */
.pcbd-head{margin:0 0 22px}
.pcbd-eyebrow{display:flex; align-items:center; gap:8px; margin:0 0 10px; font:700 12.5px/1 var(--pcbd-body);
  letter-spacing:.14em; text-transform:uppercase; color:var(--pcbd-fresh)}
.pcbd-eyebrow::before{content:""; width:22px; height:3px; border-radius:3px; background:var(--pcbd-yellow)}
.pcbd .pcbd-title{font-family:var(--pcbd-head); font-weight:700; font-size:clamp(26px,3.2vw,36px);
  line-height:1.2; letter-spacing:-.01em; color:var(--pcbd-deep); margin:0 0 10px; padding:0; text-transform:none}
.pcbd-desc{margin:0; max-width:68ch; font-size:16px; color:var(--pcbd-gray)}

/* ---------- toolbar ---------- */
.pcbd-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:12px}
.pcbd-seg{display:inline-flex; gap:4px; padding:4px; background:#fff; border:1px solid var(--pcbd-line); border-radius:var(--pcbd-r-sm)}
.pcbd .pcbd-seg button{padding:10px 16px; border-radius:9px; font-weight:600; font-size:14px; color:var(--pcbd-char); white-space:nowrap; transition:background .15s,color .15s}
.pcbd .pcbd-seg button:hover{background:var(--pcbd-light); color:var(--pcbd-primary)}
.pcbd .pcbd-seg button[aria-pressed="true"]{background:var(--pcbd-primary); color:#fff}
.pcbd-tools{display:flex; gap:6px; align-items:center; flex-wrap:wrap}
.pcbd .pcbd-ic{width:42px; height:42px; display:inline-grid; place-items:center; border-radius:var(--pcbd-r-sm);
  background:#fff; border:1px solid var(--pcbd-line); color:var(--pcbd-primary); transition:background .15s,border-color .15s}
.pcbd .pcbd-ic:hover{background:var(--pcbd-light); border-color:var(--pcbd-leaf)}
.pcbd .pcbd-ic svg{width:19px; height:19px}
.pcbd-search{position:relative; display:flex; align-items:center}
.pcbd-search svg{position:absolute; left:12px; width:17px; height:17px; color:var(--pcbd-gray); pointer-events:none}
.pcbd .pcbd-search input{width:220px; height:42px; padding:0 12px 0 36px; border:1px solid var(--pcbd-line); border-radius:var(--pcbd-r-sm);
  background:#fff; color:var(--pcbd-char); font-size:14px}
.pcbd .pcbd-search input:focus{border-color:var(--pcbd-primary); outline:none; box-shadow:0 0 0 3px rgba(5,97,36,.12)}
.pcbd-tilt{display:inline-flex; align-items:center; gap:8px; padding:0 12px; height:42px; background:#fff; border:1px solid var(--pcbd-line); border-radius:var(--pcbd-r-sm); font-size:12.5px; color:var(--pcbd-gray)}
.pcbd .pcbd-tilt input{-webkit-appearance:auto; appearance:auto; width:96px; accent-color:var(--pcbd-primary); background:none; border:0; padding:0; height:auto}

/* ---------- stage ---------- */
.pcbd-map{position:relative}
.pcbd-stage{position:relative; overflow:hidden; border-radius:var(--pcbd-r); border:1px solid var(--pcbd-line);
  background:radial-gradient(120% 90% at 50% 38%,#FFFFFF 0%,#F2F8F3 55%,#E4F1E7 100%);
  aspect-ratio:16/10; min-height:340px; cursor:grab; touch-action:pan-y; user-select:none; -webkit-user-select:none;
  box-shadow:var(--pcbd-shadow)}
.pcbd-stage.is-drag{cursor:grabbing}
.pcbd-stage canvas{position:absolute; inset:0; width:100%; height:100%; display:block}
.pcbd-canopy{position:absolute; right:-40px; bottom:-90px; width:340px; opacity:.07; pointer-events:none; color:var(--pcbd-primary)}
.pcbd-chip{position:absolute; left:14px; bottom:14px; padding:6px 10px; border-radius:8px; background:rgba(15,93,46,.9);
  color:#fff; font:600 11px/1.2 var(--pcbd-body); letter-spacing:.03em; pointer-events:none}
.pcbd-floorchip{position:absolute; left:14px; top:14px; padding:7px 12px; border-radius:10px; background:#fff; border:1px solid var(--pcbd-line);
  font:700 13px/1 var(--pcbd-head); color:var(--pcbd-deep); pointer-events:none; box-shadow:0 4px 14px rgba(5,97,36,.08)}
.pcbd-floorchip span{font:500 11.5px/1 var(--pcbd-body); color:var(--pcbd-gray); margin-left:6px}
.pcbd-hint{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); padding:10px 16px; border-radius:10px;
  background:rgba(15,93,46,.92); color:#fff; font:600 13.5px/1.3 var(--pcbd-body); pointer-events:none; opacity:0; transition:opacity .2s}
.pcbd-hint.on{opacity:1}
.pcbd-tip{position:absolute; pointer-events:none; padding:7px 10px; border-radius:8px; background:var(--pcbd-deep); color:#fff;
  font:600 12px/1.25 var(--pcbd-body); white-space:nowrap; transform:translate(-50%,-135%); opacity:0; transition:opacity .1s;
  box-shadow:0 8px 20px rgba(0,0,0,.18); z-index:4}
.pcbd-tip.on{opacity:1}
.pcbd-tip i{font-style:normal; font-weight:500; opacity:.8}

/* ---------- panel detail unit ---------- */
.pcbd-panel{position:absolute; right:14px; top:14px; width:320px; max-width:calc(100% - 28px); z-index:5;
  background:#fff; border:1px solid var(--pcbd-line); border-radius:var(--pcbd-r); padding:18px;
  box-shadow:0 18px 44px rgba(5,97,36,.16); transform:translateY(-8px); opacity:0; pointer-events:none; transition:opacity .18s,transform .18s}
.pcbd-panel.on{opacity:1; transform:none; pointer-events:auto}
.pcbd .pcbd-x{position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:9px; display:grid; place-items:center; color:var(--pcbd-gray)}
.pcbd .pcbd-x:hover{background:var(--pcbd-light); color:var(--pcbd-primary)}
.pcbd-kat{display:inline-flex; align-items:center; gap:7px; padding:5px 10px; border-radius:100px; background:var(--pcbd-light);
  font:700 11.5px/1 var(--pcbd-body); color:var(--pcbd-deep); letter-spacing:.02em}
.pcbd-kat i{width:10px; height:10px; border-radius:3px; display:block}
.pcbd .pcbd-kode{font:800 30px/1.1 var(--pcbd-head); color:var(--pcbd-deep); margin:10px 0 2px; letter-spacing:-.01em}
.pcbd-katdesk{font-size:13px; color:var(--pcbd-gray); margin:0 0 12px}
.pcbd-dl{display:grid; grid-template-columns:auto 1fr; gap:7px 14px; margin:0 0 14px; padding:12px 0; border-top:1px solid var(--pcbd-line); border-bottom:1px solid var(--pcbd-line); font-size:13.5px}
.pcbd-dl dt{color:var(--pcbd-gray); margin:0}
.pcbd-dl dd{margin:0; text-align:right; font-weight:600; color:var(--pcbd-char)}
.pcbd-status{display:inline-flex; align-items:center; gap:6px}
.pcbd-status i{width:8px; height:8px; border-radius:50%; display:block}
.pcbd-harga{font:700 15px/1.3 var(--pcbd-head); color:var(--pcbd-primary); margin:0 0 12px}
.pcbd-harga.is-empty{font:500 13px/1.4 var(--pcbd-body); color:var(--pcbd-gray)}
.pcbd .pcbd-wa{display:flex; width:100%; align-items:center; justify-content:center; gap:9px; padding:13px 16px; border-radius:var(--pcbd-r-sm);
  background:var(--pcbd-primary); color:#fff; font:600 15px/1 var(--pcbd-body); text-decoration:none; transition:background .15s}
.pcbd .pcbd-wa:hover{background:#044d1c; color:#fff}
.pcbd .pcbd-wa svg{width:19px; height:19px}
.pcbd-wa.is-off{background:#E5E7EB; color:var(--pcbd-gray); pointer-events:none}
.pcbd-note{font-size:11.5px; color:var(--pcbd-gray); margin:9px 0 0; text-align:center}

/* ---------- legenda & statistik ---------- */
.pcbd-foot{display:grid; grid-template-columns:1fr auto; gap:16px 24px; align-items:start; margin-top:16px}
.pcbd-leg{display:flex; flex-wrap:wrap; gap:8px}
.pcbd .pcbd-leg button{display:inline-flex; align-items:center; gap:8px; padding:8px 12px; border-radius:100px; background:#fff;
  border:1px solid var(--pcbd-line); font-size:13px; font-weight:500; color:var(--pcbd-char); transition:border-color .15s,background .15s,opacity .15s}
.pcbd .pcbd-leg button:hover{border-color:var(--pcbd-leaf)}
.pcbd .pcbd-leg button[aria-pressed="true"]{border-color:var(--pcbd-primary); background:var(--pcbd-light); font-weight:700; color:var(--pcbd-deep)}
.pcbd-leg.has-filter button[aria-pressed="false"]{opacity:.5}
.pcbd-leg i{width:12px; height:12px; border-radius:4px; display:block; flex:none}
.pcbd-leg small{color:var(--pcbd-gray); font-size:11.5px}
.pcbd-leg2{display:flex; flex-wrap:wrap; gap:14px; margin-top:10px; font-size:12.5px; color:var(--pcbd-gray)}
.pcbd-leg2 span{display:inline-flex; align-items:center; gap:7px}
.pcbd-leg2 i{width:13px; height:11px; border-radius:3px; display:block}
.pcbd-stats{display:grid; grid-template-columns:repeat(3,minmax(92px,1fr)); gap:1px; background:var(--pcbd-line); border:1px solid var(--pcbd-line);
  border-radius:var(--pcbd-r-sm); overflow:hidden}
.pcbd-stats.x4{grid-template-columns:repeat(4,minmax(88px,1fr))}
.pcbd-stats div{background:#fff; padding:12px 14px}
.pcbd-stats b{display:block; font:800 22px/1 var(--pcbd-head); color:var(--pcbd-primary)}
.pcbd-stats span{display:block; margin-top:5px; font-size:11.5px; color:var(--pcbd-gray)}
.pcbd-msg{font-size:13px; color:var(--pcbd-orange); min-height:0; margin:6px 0 0}

/* ---------- responsif ---------- */
@media (max-width:900px){
  .pcbd-foot{grid-template-columns:1fr}
  .pcbd-stats.x4{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:720px){
  .pcbd-stage{aspect-ratio:1/1.05; min-height:300px}
  .pcbd-bar{flex-direction:column; align-items:stretch}
  .pcbd-seg{display:flex}
  .pcbd .pcbd-seg button{flex:1; padding:10px 8px; font-size:13px}
  .pcbd-tools{justify-content:space-between}
  .pcbd-search{flex:1 1 100%}
  .pcbd .pcbd-search input{width:100%}
  .pcbd-tilt{display:none}
  .pcbd-long{display:none}
  .pcbd-stats{grid-template-columns:repeat(3,1fr)}
  .pcbd-stats.x4{grid-template-columns:repeat(2,1fr)}
  .pcbd-stats div{padding:10px 12px}
  .pcbd-stats b{font-size:19px}
  /* panel jadi kartu di bawah peta */
  .pcbd-panel{position:relative; right:auto; top:auto; width:100%; max-width:none; margin-top:12px; display:none; transform:none}
  .pcbd-panel.on{display:block}
  .pcbd-canopy{display:none}
}
@media (prefers-reduced-motion:reduce){.pcbd *{transition:none!important}}