/* ============================================================
   Hanuman PropWorks — map.css v3.9.22
   Redesign: sidebar scroll-lock, modern filter bar, full responsive
   ============================================================ */

/* ── Root tokens ──────────────────────────────────────────── */
.hpw-map-wrapper {
    --green-dark:   var(--hpw-brand-deep);
    --green-main:   var(--hpw-brand-ink);
    --green-mid:    #1D9E75;
    --green-light:  #27c48f;
    --green-glow:   rgba(29,158,117,.12);
    --white:        #ffffff;
    --off-white:    #f6faf8;
    --gray-light:   #e8f0eb;
    --gray-mid:     #c4d4cb;
    --gray-text:    #4a6357;
    --text-dark:    #1a2e25;
    --gold:         #c9a84c;
    --red:          #e05050;
    --shadow:       0 8px 40px rgba(var(--hpw-brand-deep-rgb),.14);
    --radius:       16px;
    --font:         var(--hpw-font);
    --map-height:   550px; /* ← ตัวแปรหลัก ควบคุมความสูงแผนที่ทั้งหมด */
}

.hpw-map-wrapper *,
.hpw-map-wrapper *::before,
.hpw-map-wrapper *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hpw-map-wrapper {
    font-family:   var(--font);
    background:    var(--white);
    border-radius: var(--radius);
    overflow:      hidden;
    box-shadow:    var(--shadow);
    max-width:     1320px;
    margin:        0 auto;
    border:        1px solid var(--gray-light);
}

/* ── Header ───────────────────────────────────────────────── */
.hpw-map-header {
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-main) 60%, #217a58 100%);
    padding: 20px 24px 18px;
    color: var(--white);
    position: relative;
}

.hpw-map-logo-row {
    display:         flex;
    align-items:     center;
    gap:             14px;
    margin-bottom:   14px;
}

/* v3.57.0: กรอบขาวรองโลโก้ — ให้โลโก้ธีม (custom logo) เด่นบนพื้นเขียวหัวแผนที่ */
.hpw-map-logo {
    height:        44px;
    width:         auto;
    max-width:     150px;
    object-fit:    contain;
    padding:       6px 10px;
    background:    #fff;
    border-radius: 10px;
    box-shadow:    0 4px 14px rgba(0,0,0,.22);
}

.hpw-map-eyebrow {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: 2.5px;
    color:          var(--green-light);
    text-transform: uppercase;
    margin-bottom:  2px;
}

.hpw-map-title {
    font-size:   20px;
    font-weight: 800;
    color:       var(--white);
    line-height: 1.2;
}

/* ── Filter bar (tabs style) ──────────────────────────────── */
.hpw-map-filters {
    display:     flex;
    gap:         8px;
    align-items: center;
    flex-wrap:   wrap;
    padding:     14px 0 0;
}

.hpw-map-filter-group {
    display:        flex;
    flex-direction: column;
    gap:            3px;
    flex:           0 0 auto;
}

.hpw-map-filter-label {
    font-size:      10px;
    font-weight:    700;
    letter-spacing: .5px;
    color:          rgba(255,255,255,.6);
    text-transform: uppercase;
}

.hpw-map-select {
    background:  rgba(255,255,255,.13);
    border:      1.5px solid rgba(255,255,255,.22);
    border-radius: 8px;
    color:       var(--white);
    font-family: var(--font);
    font-size:   13px;
    font-weight: 600;
    padding:     8px 14px;
    cursor:      pointer;
    outline:     none;
    min-width:   130px;
    transition:  border-color .2s, background .2s;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='rgba(255,255,255,0.5)'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}
.hpw-map-select:focus { background-color: rgba(255,255,255,.22); border-color: var(--green-light); }
.hpw-map-select option { color: var(--text-dark); background: var(--white); }

.hpw-map-search-wrap {
    flex:        1;
    min-width:   160px;
    max-width:   260px;
    position:    relative;
}
.hpw-map-search-wrap::before {
    content:  '🔍';
    position: absolute;
    left:     10px; top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    pointer-events: none;
}

.hpw-map-input {
    background:  rgba(255,255,255,.13);
    border:      1.5px solid rgba(255,255,255,.22);
    border-radius: 8px;
    color:       var(--white);
    font-family: var(--font);
    font-size:   13px;
    padding:     8px 12px 8px 30px;
    outline:     none;
    width:       100%;
    transition:  border-color .2s;
}
.hpw-map-input:focus { border-color: var(--green-light); background: rgba(255,255,255,.2); }
.hpw-map-input::placeholder { color: rgba(255,255,255,.4); }

.hpw-map-btn-search {
    background:    var(--green-mid);
    border:        none;
    border-radius: 8px;
    color:         var(--white);
    font-family:   var(--font);
    font-size:     13px;
    font-weight:   700;
    padding:       8px 16px;
    cursor:        pointer;
    transition:    background .15s;
    white-space:   nowrap;
}
.hpw-map-btn-search:hover { background: var(--green-light); }

.hpw-map-btn-reset {
    background:    rgba(255,255,255,.12);
    border:        1.5px solid rgba(255,255,255,.22);
    border-radius: 8px;
    color:         rgba(255,255,255,.8);
    font-family:   var(--font);
    font-size:     12px;
    font-weight:   600;
    padding:       8px 12px;
    cursor:        pointer;
    transition:    background .15s;
}
.hpw-map-btn-reset:hover { background: rgba(255,255,255,.22); }

/* ── Stats tabs (เปลี่ยนเป็น pill row) ────────────────────── */
/* v4.25.0: การ์ดเปลี่ยนจาก 5 ใบตายตัวเป็นหนึ่งใบต่อสถานะ จำนวนจึงโตตามทะเบียน
   — ต้องขึ้นบรรทัดใหม่ได้ ไม่งั้นการ์ดจะบีบจนป้ายอ่านไม่ออกเมื่อมีสถานะใหม่ */
.hpw-map-stats {
    display:     flex;
    flex-wrap:   wrap;
    gap:         0;
    margin-top:  16px;
    border-top:  1px solid rgba(255,255,255,.12);
    background:  rgba(255,255,255,.045);
    border-radius: 12px;
    overflow: hidden;
}

.hpw-map-stat {
    flex:            1 1 auto;
    min-width:       92px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    padding:         10px 8px;
    border-right:    1px solid rgba(255,255,255,.1);
    cursor:          default;
    transition:      background .15s;
}
.hpw-map-stat:last-child { border-right: none; }
.hpw-map-stat:hover { background: rgba(255,255,255,.06); }

.hpw-map-stat-val {
    font-size:   22px;
    font-weight: 800;
    color:       var(--green-light);
    line-height: 1;
}

.hpw-map-stat-label {
    font-size:   11px;
    color:       rgba(255,255,255,.6);
    margin-top:  3px;
    white-space: nowrap;
}
/* สีเฉพาะแต่ละสถิติ */
.hpw-map-stat--all      .hpw-map-stat-val { color: #93c5fd; }  /* ทั้งหมด = น้ำเงิน */
/* ★ v4.25.0: การ์ดต่อสถานะรับสีจากทะเบียนผ่าน --st ที่ PHP ใส่ให้
   ผสมขาวเข้าไปเพราะพื้นหลังหัวแผนที่เป็นเขียวเข้ม สีดิบจากทะเบียน (ซึ่งเลือกมา
   ให้อ่านบนพื้นขาว) จะจมหายไปทั้งใบ · เบราว์เซอร์ที่ไม่รู้จัก color-mix ตกไปใช้ขาว
   ซึ่งอ่านได้เสมอ แค่ไม่มีสีบอกสถานะ — ดีกว่าตัวเลขที่มองไม่เห็น */
.hpw-map-stat--st .hpw-map-stat-val { color: color-mix(in srgb, var(--st, #4ade80) 55%, #ffffff); }
.hpw-map-stat--st { box-shadow: inset 0 2px 0 0 color-mix(in srgb, var(--st, #4ade80) 70%, transparent); }
@supports not (color: color-mix(in srgb, red 50%, white)) {
    .hpw-map-stat--st .hpw-map-stat-val { color: #fff; }
    .hpw-map-stat--st { box-shadow: none; }
}
/* ป้ายของการ์ดสถานะยาวกว่าเดิม (มีไอคอน + ชื่อเต็ม) — ให้ตัดบรรทัดได้ */
.hpw-map-stat--st .hpw-map-stat-label { white-space: normal; text-align: center; line-height: 1.3; }

/* v3.34.1: ซ่อนการ์ด KPI ที่ซ้ำซ้อน/ไม่มีค่า (เช่น โครงการ 1 ห้องว่าง — ไม่โชว์ ไม่ว่าง 0 / ทั้งหมด 1) */
.hpw-map-stat.hpw-stat-hidden { display: none !important; }

/* ── Body: sidebar + map — KEY FIX ────────────────────────── */
.hpw-map-body {
    display:              grid;
    grid-template-columns: 320px 1fr;
    /* สูงคงที่ = ความสูงแผนที่ ทำให้ sidebar scroll แทนที่จะยืด */
    height:               var(--map-height);
    border-top:           1px solid var(--gray-light);
}

/* ── Sidebar (scroll lock) ─────────────────────────────────── */
.hpw-map-sidebar {
    background:      var(--off-white);
    border-right:    1px solid var(--gray-light);
    display:         flex;
    flex-direction:  column;
    height:          100%; /* เต็มความสูงของ body */
    overflow:        hidden; /* list จะ scroll ภายใน */
}

.hpw-map-sidebar-title {
    font-size:      11px;
    font-weight:    950;
    letter-spacing: .06em;
    text-transform: uppercase;
    color:          var(--green-dark);
    padding:        11px 14px 9px;
    border-bottom:  1px solid #ddebe4;
    background:     linear-gradient(180deg,#ffffff,#f5fbf8);
    flex:           0 0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.hpw-map-sidebar-title::before {
    content:"";
    width:7px;
    height:7px;
    border-radius:999px;
    background:var(--green-mid);
    box-shadow:0 0 0 4px rgba(29,158,117,.12);
    margin-right:7px;
}

.hpw-map-unit-legend {
    display:flex;
    flex-wrap:wrap;
    gap:8px 10px;
    padding:10px 14px;
    border-bottom:1px solid var(--gray-light);
    background:linear-gradient(135deg,#fff,#f3fbf7);
    color:var(--gray-text);
    font-size:11px;
    font-weight:800;
}
.hpw-unit-legend-dot {
    width:10px;
    height:10px;
    display:inline-block;
    border-radius:999px;
    margin-right:-5px;
    box-shadow:0 0 0 3px rgba(255,255,255,.92),0 3px 8px rgba(var(--hpw-brand-deep-rgb),.16);
}
.hpw-unit-legend-dot.type-warehouse { background:#1D9E75; }
.hpw-unit-legend-dot.type-office { background:#2563eb; }
.hpw-unit-legend-dot.type-shop { background:#f59e0b; }
.hpw-unit-legend-dot.type-parking { background:#64748b; }

.hpw-map-list {
    overflow-y: auto;   /* scroll เฉพาะ list */
    flex:       1;      /* กิน space ที่เหลือ */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--gray-mid) transparent;
}
.hpw-map-list::-webkit-scrollbar { width: 4px; }
.hpw-map-list::-webkit-scrollbar-thumb { background: var(--gray-mid); border-radius: 2px; }

.hpw-map-list-item {
    margin:6px 8px;
    padding:8px 9px 8px 11px;
    border:1px solid #deebe4;
    border-radius:11px;
    cursor:pointer;
    transition:background .15s, border-color .15s, box-shadow .15s, transform .15s;
    border-left:4px solid transparent;
    position:relative;
    background:rgba(255,255,255,.72);
    box-shadow:0 4px 12px rgba(var(--hpw-brand-deep-rgb),.045);
}
.hpw-map-list-item:hover,
.hpw-map-list-item.active {
    background:#fff;
    border-color:rgba(29,158,117,.35);
    border-left-color:var(--green-mid);
    box-shadow:0 10px 22px rgba(var(--hpw-brand-deep-rgb),.10);
    transform:translateX(2px);
}
.hpw-map-list-item:not(.active):not(:hover) {
    /* compact neutral card */
}
.hpw-map-list-item.type-warehouse { border-left-color:#1D9E75; }
.hpw-map-list-item.type-office { border-left-color:#2563eb; }
.hpw-map-list-item.type-shop { border-left-color:#f59e0b; }
.hpw-map-list-item.type-parking { border-left-color:#64748b; }

.hpw-map-item-header {
    display:         flex;
    justify-content: space-between;
    align-items:     flex-start;
    gap:             6px;
    margin-bottom:   2px;
}

.hpw-map-item-title {
    font-size:12px;
    font-weight:950;
    color:var(--text-dark);
    line-height:1.3;
    flex:1;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.hpw-map-item-prov {
    font-size:10px;
    color:#60766d;
    margin-top:3px;
    line-height:1.3;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
/* ── chips พื้นที่ + ราคาค่าเช่า ใน list item (unit map) — v3.39.1 compact ── */
.hpw-map-item-chips {
    display:flex;
    flex-wrap:wrap;
    gap:4px;
    margin-top:5px;
}
.hpw-uchip {
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:10.5px;
    font-weight:700;
    line-height:1;
    padding:3px 6px;
    border-radius:6px;
    white-space:nowrap;
}
.hpw-uchip i { font-style:normal; font-size:10.5px; }
.hpw-uchip-area {
    background:#eff6ff;
    color:#1d4ed8;
    border:1px solid #bfdbfe;
}
/* v3.38.0: chips รายละเอียดห้อง — ขนาดกว้า×ยาว×สูง / สำนักงาน / ห้องนอนน้ำอเนกประสงค์ */
.hpw-uchip-dim {
    background:#f5f3ff;
    color:#6d28d9;
    border:1px solid #ddd6fe;
}
.hpw-uchip-office {
    background:#f8fafc;
    color:#475569;
    border:1px solid #e2e8f0;
}
.hpw-uchip-room {
    background:#f0f9ff;
    color:#0369a1;
    border:1px solid #bae6fd;
}
.hpw-uchip-price {
    background:#ecfdf5;
    color:#047857;
    border:1px solid #a7f3d0;
}
.hpw-uchip-price b { font-weight:800; }
.hpw-uchip-price del {
    font-weight:600;
    font-size:10px;
    color:#94a3b8;
    text-decoration:line-through;
    margin-left:2px;
}
.hpw-uchip-price.has-promo {
    background:#fff7ed;
    color:#c2410c;
    border-color:#fed7aa;
}
/* แถวสถิติย่อยในการ์ดโครงการ (ว่าง/ไม่ว่าง/ทั้งหมด) */
.hpw-map-item-stats {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:8px;
}
.hpw-mis {
    display:inline-flex;
    align-items:center;
    gap:3px;
    font-size:10.5px;
    font-weight:700;
    padding:3px 8px;
    border-radius:999px;
    line-height:1;
}
.hpw-mis b { font-weight:900; }
/* v4.28.0: .hpw-mis-vacant / .hpw-mis-occ ตายตั้งแต่ v4.25.0 ที่เปลี่ยนไปใช้
   .hpw-mis-st ตัวเดียวรับสีจากทะเบียนผ่าน --st — เหลือไว้ก็มีแต่จะถูกหยิบ
   ไปใช้ใหม่แล้วได้สีที่ไม่ตรงทะเบียน */
.hpw-mis-total  { background:#e0edff; color:#1d4ed8; }
.hpw-map-badge {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:10px;
    font-weight:950;
    line-height:1;
    border-radius:999px;
    padding:5px 8px;
    white-space:nowrap;
    flex:0 0 auto;
    box-shadow:0 5px 14px rgba(var(--hpw-brand-deep-rgb),.08);
}
/* v4.25.0: ป้ายชุดนี้บอก "สภาพหมุด" (ว่าง/เต็ม/อนาคต) ไม่ใช่สถานะห้องรายห้อง
   จึงเปลี่ยนชื่อคลาสให้ไม่ชนกับ .badge-<คีย์สถานะ> ที่ประกอบจากทะเบียน */
.hpw-map-badge--vacant { background:#16a365; color:#fff; }
.hpw-map-badge--full   { background:#64748b; color:#fff; }
/* v3.95.0: โครงการในอนาคต — ม่วง แยกจาก "ไม่ว่าง" ชัดเจน เพราะจองได้ ไม่ใช่เต็ม */
.hpw-map-badge--future { background:#7c3aed; color:#fff; }

.hpw-map-empty {
    padding:    40px 20px;
    text-align: center;
    color:      var(--gray-text);
    font-size:  13px;
    line-height: 1.7;
}

/* ── Map canvas ────────────────────────────────────────────── */
.hpw-map-canvas-wrap {
    position:   relative;
    height:     var(--map-height); /* ต้องมี height px ให้ Leaflet */
    overflow:   hidden;
}

.hpw-map-canvas {
    width:      100%;
    /* ใช้ px ตรงๆ เพื่อให้ Leaflet คำนวณ height ได้ถูกต้อง */
    height:     var(--map-height) !important;
    min-height: 400px;
}

/* ── Leaflet popup — compact warehouse mini-card ───────────── */
.hpw-leaflet-popup .leaflet-popup-content {
    width: 206px !important;
    margin: 0;
}
.hpw-leaflet-popup .leaflet-popup-content-wrapper {
    padding:0;
    overflow:hidden;
    border: 1px solid rgba(29,158,117,.5);
    border-radius: 16px;
    background:#fff;
    box-shadow: 0 18px 42px rgba(var(--hpw-brand-deep-rgb),.22);
}
/* v4.37.4: หางป้ายถูกซ่อนที่ hpw_enqueue_leaflet() แล้ว — เงาของมันคือสิ่งที่
   ทำให้จุดขาวเด่นจนบังหมุด · ลบทิ้งไม่ให้เหลือกฎที่แต่งของที่ไม่แสดง */
.hpw-popup {
    display:flex;
    flex-direction:column;
    font-family:var(--font);
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#f5fbf8 100%);
}
.hpw-popup-media {
    position:relative;
    height:86px;
    overflow:hidden;
    background:
        radial-gradient(circle at 16% 18%, rgba(255,255,255,.22), transparent 30%),
        linear-gradient(135deg,var(--green-dark),var(--green-mid));
}
.hpw-popup-img { width:100%; height:100%; object-fit:cover; display:block; }
.hpw-popup-media::after {
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg,rgba(0,0,0,0) 42%,rgba(7,53,31,.34) 100%);
    pointer-events:none;
}
.hpw-popup-media.is-placeholder::before {
    content:"";
    position:absolute;
    inset:10px;
    border:1px dashed rgba(255,255,255,.25);
    border-radius:10px;
    z-index:1;
}
.hpw-popup-img-placeholder {
    position:relative;
    z-index:2;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:3px;
    color:#fff;
    text-align:center;
}
.hpw-popup-placeholder-logo {
    position:absolute;
    z-index:0;
    width:74%;
    height:58%;
    object-fit:contain;
    opacity:.2;
    filter:brightness(1.2) drop-shadow(0 10px 18px rgba(0,0,0,.28));
}
.hpw-popup-img-placeholder b,
.hpw-popup-img-placeholder small { position:relative; z-index:2; }
.hpw-popup-img-placeholder b { font-size:16px; line-height:1; font-weight:950; text-shadow:0 3px 14px rgba(0,0,0,.24); }
.hpw-popup-img-placeholder small { font-size:8px; font-weight:950; letter-spacing:.14em; color:#fbbf24; }
.hpw-popup-floating-status {
    position:absolute;
    left:8px;
    bottom:7px;
    z-index:3;
    display:inline-flex;
    align-items:center;
    min-height:22px;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,.65);
    background:rgba(255,255,255,.92);
    color:var(--hpw-brand-deep);
    font-size:10px;
    font-weight:950;
    line-height:1;
    box-shadow:0 8px 18px rgba(0,0,0,.16);
}
.hpw-popup-floating-status.full { color:#64748b; }
.hpw-popup-body { padding:10px 10px 11px; min-width:0; }
.hpw-popup-title {
    color:var(--text-dark);
    font-size:12px;
    font-weight:950;
    line-height:1.32;
    margin:0 0 6px;
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
}
.hpw-popup-prov { color:#64756d; font-size:10px; line-height:1.35; margin:-2px 0 6px; }
.hpw-popup-unit-meta { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 6px; }
.hpw-popup-unit-meta span { display:inline-flex; align-items:center; padding:3px 6px; border-radius:999px; background:#edf8f2; color:var(--hpw-brand-deep); font-size:9px; font-weight:900; }
.hpw-popup-contact {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin:7px 0 0;
    padding:6px 7px;
    border-radius:10px;
    background:#eef8f2;
    color:#3d5b50;
    font-size:10px;
    font-weight:800;
}
.hpw-popup-contact span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hpw-popup-contact a { color:#0b7a54!important; font-weight:950; text-decoration:none!important; white-space:nowrap; }
.hpw-popup-cta-btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:8px;
    padding:9px 10px;
    border-radius:11px;
    background:linear-gradient(135deg,var(--green-main),var(--green-dark));
    color:var(--white)!important;
    font-size:12px;
    font-weight:950;
    line-height:1.1;
    text-decoration:none!important;
    box-shadow:0 10px 20px rgba(var(--hpw-brand-deep-rgb),.18);
}
.hpw-popup-cta-btn:hover,
.hpw-popup-cta-btn.has-vacant:hover { transform:translateY(-1px); background:linear-gradient(135deg,var(--green-mid),var(--green-main)); }

@media (max-width: 600px) {
    .hpw-leaflet-popup .leaflet-popup-content {
        width: 170px !important;
    }

    .hpw-popup {
        gap: 6px;
        padding: 8px;
    }

    .hpw-popup-img,
    .hpw-popup-img-placeholder {
        height: 54px;
        border-radius: 8px;
    }
}

/* ── Detail popup ──────────────────────────────────────────── */
.hpw-map-detail {
    position:      absolute;
    bottom:        16px;
    right:         16px;
    width:         320px;
    max-width:     calc(100% - 32px);
    background:    var(--white);
    border-radius: 14px;
    box-shadow:    0 8px 32px rgba(0,0,0,.18);
    z-index:       800;
    overflow:      hidden;
    border:        1px solid var(--gray-light);
    animation:     hpwDetailIn .25s ease;
}
@keyframes hpwDetailIn {
    from { opacity:0; transform: translateY(12px) scale(.97); }
    to   { opacity:1; transform: translateY(0) scale(1); }
}

.hpw-map-detail-close {
    position:   absolute;
    top:        10px; right:10px;
    background: rgba(0,0,0,.08);
    border:     none;
    border-radius: 50%;
    width:  28px; height:28px;
    cursor: pointer;
    font-size: 14px;
    z-index: 2;
    display: flex; align-items:center; justify-content:center;
    transition: background .15s;
}
.hpw-map-detail-close:hover { background: rgba(0,0,0,.16); }

.hpw-map-detail-img {
    width:  100%;
    height: 140px;
    object-fit: cover;
    display: block;
}
.hpw-map-detail-img-placeholder {
    width:  100%;
    height: 100px;
    background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}

.hpw-map-detail-body {
    padding: 14px 16px 16px;
}

.hpw-map-detail-name {
    font-size:   15px;
    font-weight: 800;
    color:       var(--text-dark);
    margin-bottom: 4px;
    line-height: 1.3;
}

.hpw-map-detail-addr {
    font-size:   12px;
    color:       var(--gray-text);
    margin-bottom: 10px;
    line-height: 1.5;
}

.hpw-map-detail-stats {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.hpw-map-detail-stat {
    background:    var(--off-white);
    border-radius: 8px;
    padding:       6px 10px;
    font-size:     12px;
    font-weight:   700;
    color:         var(--green-main);
    border:        1px solid var(--gray-light);
}

.hpw-map-detail-actions {
    display: flex;
    gap: 8px;
}

.hpw-map-detail-btn {
    flex:          1;
    display:       inline-flex;
    align-items:   center;
    justify-content: center;
    gap:           6px;
    padding:       9px 14px;
    border-radius: 9px;
    font-size:     13px;
    font-weight:   700;
    text-decoration: none;
    border:        none;
    cursor:        pointer;
    transition:    all .2s;
}
.hpw-map-detail-btn.primary {
    background: var(--green-main);
    color:      var(--white);
}
.hpw-map-detail-btn.primary:hover { background: var(--green-dark); }
.hpw-map-detail-btn.secondary {
    background: var(--off-white);
    color:      var(--green-main);
    border:     1.5px solid var(--gray-light);
}
.hpw-map-detail-btn.secondary:hover { border-color: var(--green-mid); background: var(--green-glow); }

/* ── Footer ────────────────────────────────────────────────── */
.hpw-map-footer {
    padding:     10px 18px;
    font-size:   11px;
    color:       var(--gray-text);
    background:  var(--off-white);
    border-top:  1px solid var(--gray-light);
    display:     flex;
    align-items: center;
    gap:         4px;
    flex-wrap:   wrap;
}
.hpw-map-footer a { color: var(--green-mid); text-decoration: none; }
.hpw-map-footer a:hover { text-decoration: underline; }

/* ── Map marker custom styles ──────────────────────────────── */
.hpw-marker-label {
    background:    var(--green-main);
    color:         var(--white);
    font-family:   var(--font);
    font-size:     11px;
    font-weight:   800;
    border-radius: 20px;
    padding:       4px 10px;
    white-space:   nowrap;
    box-shadow:    0 2px 8px rgba(0,0,0,.25);
    border:        2px solid rgba(255,255,255,.6);
    cursor:        pointer;
    transition:    transform .15s, box-shadow .15s;
}
.hpw-marker-label:hover,
.hpw-marker-label.active { transform: scale(1.12); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.hpw-marker-label.vacant  { background: var(--green-mid); }
.hpw-marker-label.full    { background: var(--gray-text); }

/* ── Admin map section ─────────────────────────────────────── */
.hpw-map-admin-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   28px;
    align-items:           start;
}
.hpw-map-admin-fields { /* natural flow */ }
/* v4.39.1: ค่าเดียวกับใน admin.css เป๊ะ — เดิมสองไฟล์ตั้งคนละค่า (80 vs 32)
   ใครโหลดทีหลังชนะ ซึ่งอ่านโค้ดแล้วเดาไม่ออกว่าผลจริงเป็นเท่าไหร่ */
.hpw-map-admin-picker { position: sticky; top: var(--hpw-below-topbar); }
.hpw-map-picker-label {
    font-size:   12px;
    font-weight: 600;
    color:       #7a95b0;
    margin-bottom: 8px;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 960px) {
    .hpw-map-wrapper { --map-height: 550px; }
    .hpw-map-body {
        grid-template-columns: 1fr;
        /* mobile: sidebar ด้านบน (fixed height) + map ด้านล่าง */
        grid-template-rows: 240px 1fr;
        height: auto;
    }
    .hpw-map-sidebar {
        height:       240px;
        border-right: none;
        border-bottom: 1px solid var(--gray-light);
    }
    .hpw-map-canvas-wrap { height: var(--map-height); }
    .hpw-map-canvas { height: var(--map-height) !important; }
    .hpw-map-admin-grid { grid-template-columns: 1fr; }
    .hpw-map-admin-picker { position: static; }
    .hpw-map-detail { width: calc(100% - 24px); }
    .hpw-map-filters { gap: 6px; }
    .hpw-map-search-wrap { max-width: none; flex: 1 1 100%; }
    .hpw-map-stats { gap: 0; flex-wrap: wrap; }
    /* KPI 4 การ์ด → 2x2 บนจอแคบ */
    .hpw-map-stat { flex: 1 1 45%; }
    .hpw-map-stat:nth-child(2) { border-right: none; }
    .hpw-map-stat:nth-child(1), .hpw-map-stat:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.1); }
}

@media (max-width: 600px) {
    .hpw-map-header { padding: 16px 14px 16px; }
    .hpw-map-filters { flex-direction: column; align-items: stretch; }
    .hpw-map-select { min-width: unset; width: 100%; }
    .hpw-map-search-wrap { max-width: 100%; }
    .hpw-map-stat-val { font-size: 18px; }
    .hpw-map-stat-label { font-size: 10px; }
    .hpw-map-title { font-size: 17px; }
    .hpw-map-detail { bottom: 8px; right: 8px; width: calc(100% - 16px); }
    .hpw-map-canvas { min-height: 360px; }
}


/* ══════════════════════════════════════════════════
   ห้องที่ยังไม่ได้ปักหมุด (v3.91.0)
   เดิมห้องพวกนี้ถูกกรองออกตั้งแต่คิวรี จึงหายไปทั้งจากแผนที่และจากรายการ
   โครงการที่มีห้อง 16 ห้องเลยขึ้นว่า "0 ตำแหน่ง" โดยไม่มีอะไรบอกว่าทำไม
   ══════════════════════════════════════════════════ */
.hpw-map-pin-notice {
    margin: 8px;
    padding: 9px 11px;
    border-radius: 10px;
    background: #fff7ed;
    border: 1px solid #fed7aa;
    color: #9a3412;
    font-size: 12px;
    line-height: 1.65;
}
.hpw-map-pin-notice small { color: #b45309; font-size: 11px; }

.hpw-map-list-item.is-unpinned { opacity: .82; border-left-color: #fdba74; }
.hpw-map-list-item.is-unpinned:hover { opacity: 1; }
.hpw-map-item-nopin {
    margin-top: 4px;
    font-size: 11px;
    line-height: 1.5;
    color: #b45309;
}

/* ============================================================
   v3.97.0 — หมุดแผนที่แบบใหม่
   เดิมหมุดเป็นเขียวเข้ม #1D9E75 ซึ่งอยู่ช่วงเดียวกับพืชพรรณในภาพถ่าย
   ดาวเทียม พอ v3.96.1 เปลี่ยนแผนที่เริ่มต้นเป็นดาวเทียม หมุดจึงหายไป
   กับพื้นหลัง — ตัวใหม่แก้ด้วยขอบขาว เงาเข้ม และสีที่ไม่มีในภาพถ่ายทางอากาศ
   ============================================================ */
.hpw-pin{background:none !important;border:0 !important}
.hpw-pin .hpw-pin-svg{display:block;overflow:visible}
.hpw-pin{transition:transform .14s ease}
.hpw-pin:hover{transform:translateY(-3px) scale(1.06);z-index:1000 !important}

/* หมุดโครงการในอนาคตต้องเด่นกว่าเพื่อน — เป็นของที่ยังไม่มีอยู่จริง
   คนดูจึงต้องแยกออกตั้งแต่ก่อนคลิก ไม่ใช่ไปรู้ตอนเปิดป๊อปอัป
   วงกระเพื่อมช้า ๆ ดึงสายตาโดยไม่กวนเหมือนไฟกะพริบ */
.hpw-pin.is-future{position:relative}
.hpw-pin.is-future::before{content:"";position:absolute;left:50%;bottom:2px;width:34px;height:34px;
    margin-left:-17px;border-radius:50%;background:rgba(124,58,237,.34);
    animation:hpw-pin-pulse 2.4s ease-out infinite;pointer-events:none;z-index:-1}
@keyframes hpw-pin-pulse{
    0%  {transform:scale(.55);opacity:.85}
    70% {transform:scale(1.75);opacity:0}
    100%{transform:scale(1.75);opacity:0}
}
@media (prefers-reduced-motion:reduce){
    .hpw-pin.is-future::before{animation:none;transform:scale(1.25);opacity:.4}
    .hpw-pin{transition:none}
}

/* ── คำอธิบายสัญลักษณ์ ──
   บนแผนที่เส้นคนเดาสีได้จากบริบท บนภาพดาวเทียมเดาไม่ได้เลย
   จึงต้องมีตารางแปลสีติดอยู่กับแผนที่ */
/* ★ v4.51.2: กฎกล่องของ v3.97.0 (z-index:650 · max-width:200px) ถูกลบทิ้ง
   บล็อก v4.27.1 ท้ายไฟล์เขียนทับทุกคุณสมบัติอยู่แล้ว มันจึงเป็นโค้ดตาย —
   แต่เป็นโค้ดตายที่ถือ "เลข z-index ชุดที่สอง" ของกล่องเดียวกันไว้
   ซึ่งคือรูปหนึ่งของสำเนากติกา (บทเรียน v4.39.1: เลขดิบที่ไม่มีชื่อ)
   ตัวตรวจ map-stacking ฟ้องทันทีที่กล่องเดียวมี z-index สองค่า */
.hpw-map-legend-title{font-weight:800;color:#0f172a;margin-bottom:6px;font-size:11px;
    letter-spacing:.02em;text-transform:uppercase}
.hpw-map-legend-row{display:flex;align-items:center;gap:7px;margin-top:4px;color:#334155}
.hpw-map-legend-dot{width:13px;height:13px;border-radius:50%;flex:0 0 auto;
    border:2px solid #fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.hpw-map-legend-dot.is-vacant{background:#0EA84A}
.hpw-map-legend-dot.is-full{background:#334155}
.hpw-map-legend-dot.is-future{background:#7C3AED}
.hpw-map-legend-row b{font-weight:700;color:#0f172a}
.hpw-map-legend-toggle{display:none}

/* v3.98.0: ชิป "โครงการในอนาคต" ในการ์ดรายการโครงการ
   ใช้ม่วงชุดเดียวกับหมุดบนแผนที่และป้ายสถานะในระบบจัดการ — ถ้าสามที่นี้
   ไม่ตรงกัน คนอ่านต้องจำสีสามชุดสำหรับเรื่องเดียวกัน */
.hpw-mis.hpw-mis-future{background:#ede9fe;color:#6d28d9;border-color:#ddd6fe}
.hpw-mis.hpw-mis-future b{color:#5b21b6}
/* v3.98.0: จุดคำอธิบายที่มีสถานะรอง — ล้อกับจุดม่วงมุมหมุดบนแผนที่ */
.hpw-map-legend-dot.has-sub{position:relative}
.hpw-map-legend-dot.has-sub::after{content:"";position:absolute;left:-4px;bottom:-4px;
    width:8px;height:8px;border-radius:50%;background:#7C3AED;border:1.5px solid #fff}

/* ══════════════════════════════════════════════════════════════
   v4.25.0 — ชิปสถานะในการ์ดข้างแผนที่ วนจากทะเบียน
   --------------------------------------------------------------
   ★ ไม่มีชื่อสถานะอยู่ในไฟล์นี้เลย — สีมาทางตัวแปร --st ที่ฝั่ง PHP ใส่มา
   จากทะเบียน สถานะใหม่จึงมีสีเองทันทีโดยไม่ต้องมาเพิ่มกฎที่นี่
   (ของเดิมมีกฎ .hpw-mis-vacant / -occ / -future เขียนสีไว้ทีละสถานะ ซึ่งเป็น
   เหตุผลหนึ่งที่สถานะ จอง ไม่มีสีบนแผนที่มาตั้งแต่ v4.15.0)
   ══════════════════════════════════════════════════════════════ */
.hpw-mis-st {
    background:color-mix(in srgb, var(--st) 14%, #fff);
    color:color-mix(in srgb, var(--st) 72%, #111);
    border-color:color-mix(in srgb, var(--st) 32%, #fff);
}
/* เบราว์เซอร์ที่ยังไม่รู้จัก color-mix — ถอยไปใช้สีเต็มบนพื้นจาง
   (ไม่สวยเท่า แต่ยังอ่านออกและแยกสถานะได้ ซึ่งเป็นหน้าที่จริงของชิป) */
@supports not (color: color-mix(in srgb, red 50%, blue)) {
    .hpw-mis-st { background:#f1f5f9; color:var(--st); border-color:var(--st); }
}
/* สถานะที่ไม่เข้าตัวหารของอัตราการเช่า — เส้นประ กติกาเดียวกับการ์ดในระบบจัดการ */
.hpw-mis-st.is-off { border-style:dashed; }

.hpw-map-legend-sub {
    margin-top:8px; padding-top:6px;
    border-top:1px solid rgba(15,23,42,.10);
    font-size:10.5px; font-weight:800; letter-spacing:.02em; opacity:.7;
}
.hpw-map-legend-row i { font-style:normal; opacity:.65; font-size:10.5px; }

/* ── v4.25.0: ชิปสถานะใน popup ของหมุด ──────────────────────────
   สีมาจากตัวแปร --st ที่ JS ใส่ให้ต่อชิป ซึ่งอ่านมาจากทะเบียนสถานะอีกที
   จึงไม่มีรายชื่อสถานะอยู่ในไฟล์ CSS นี้เลย — สถานะใหม่ได้สีเองทันที */
.hpw-popup-sts { display:flex; flex-wrap:wrap; gap:4px; margin:6px 0 2px; }
.hpw-popup-st {
    display:inline-flex; align-items:center; gap:4px;
    padding:2px 7px; border-radius:999px;
    font-size:10.5px; font-weight:700; line-height:1.5;
    color:var(--st, #475569);
    border:1px solid var(--st, #cbd5e1);
    background:color-mix(in srgb, var(--st, #94a3b8) 10%, transparent);
}
@supports not (background: color-mix(in srgb, red 10%, transparent)) {
    .hpw-popup-st { background:#f8fafc; }
}
.hpw-popup-st b { font-weight:900; }
/* v4.25.0: หมายเหตุ "ไม่นับในอัตราการเช่า" ยาวกว่าความกว้างของกล่องคำอธิบาย
   ให้ลงบรรทัดของตัวเองแทนที่จะไปบีบชื่อสถานะจนแตกเป็นสองบรรทัด */
.hpw-map-legend-row i { flex: 1 0 100%; margin-left: 18px; }
/* ชื่อสถานะห้ามแตกกลางคำ — ภาษาไทยไม่มีช่องว่าง เบราว์เซอร์จึงตัดตรงไหนก็ได้
   แล้วอ่านออกยากมาก · ให้ทั้งกล่องกว้างขึ้นแทนการบีบชื่อ */
.hpw-map-legend-row { flex-wrap: wrap; }
.hpw-map-legend-row b { white-space: nowrap; }


/* ── v4.26.1: ป้ายสถานะในการ์ดของแผนที่รายห้อง ──────────────────
   สีมาทางตัวแปร --st จากทะเบียนสถานะ · ไฟล์นี้จึงไม่มีชื่อสถานะอยู่เลย
   สถานะใหม่ได้ป้ายสีของตัวเองทันทีโดยไม่ต้องแก้ CSS */
.hpw-map-badge--st { background:var(--st,#64748b); color:#fff; }

/* ══════════════════════════════════════════════════════════════
   v4.27.1 — กล่องคำอธิบายสัญลักษณ์: พับได้ + ไม่บังแผนที่
   --------------------------------------------------------------
   ★ ปัญหาที่แก้: ตั้งแต่ v4.25.0 ที่เพิ่มรายการสถานะเข้าไป กล่องนี้สูงขึ้น
     ตามจำนวนสถานะที่โครงการมี · บนมือถือมันบังทั้งแผนที่และป๊อปอัปของหมุด
     — ของที่ "อธิบายแผนที่" ไม่ควรกินพื้นที่มากกว่าตัวแผนที่เอง
   ★ เป็น <details> ของเบราว์เซอร์ ไม่ได้เขียน JS toggle เอง
   ══════════════════════════════════════════════════════════════ */
.hpw-map-legend {
    position:absolute; left:10px; bottom:22px; z-index:640;
    max-width:min(268px, calc(100% - 20px));
    padding:0; overflow:hidden;
    border:1px solid rgba(15,23,42,.12);
    border-radius:14px;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    box-shadow:0 10px 30px rgba(15,23,42,.22);
    font-size:11.5px; line-height:1.5;
    transition:box-shadow .18s ease;
}
/* หัวกล่อง = ปุ่มพับ · ลูกศรของ <summary> ของเบราว์เซอร์ถูกซ่อน ใช้ของเราแทน
   เพราะรูปร่างต่างกันคนละแบบในแต่ละเบราว์เซอร์ */
.hpw-map-legend > summary {
    list-style:none; cursor:pointer; user-select:none;
    display:flex; align-items:center; gap:7px;
    padding:9px 11px;
    font-weight:800; color:#0f172a; font-size:11.5px;
    letter-spacing:.01em;
}
.hpw-map-legend > summary::-webkit-details-marker { display:none; }
.hpw-map-legend > summary:hover { background:rgba(var(--hpw-brand-deep-rgb),.06); }
.hpw-map-legend > summary:focus-visible { outline:2px solid #0e7c5a; outline-offset:-2px; }
.hpw-map-legend-ic { font-size:12px; line-height:1; }
.hpw-map-legend-title { flex:1 1 auto; text-transform:none; }
.hpw-map-legend-caret { flex:0 0 auto; font-size:10px; opacity:.55; transition:transform .18s ease; }
.hpw-map-legend[open] > summary { border-bottom:1px solid rgba(15,23,42,.09); }
.hpw-map-legend[open] .hpw-map-legend-caret { transform:rotate(180deg); }

/* ★ เนื้อในเลื่อนเองเมื่อยาว — เพดานเป็นสัดส่วนของแผนที่ ไม่ใช่ค่าคงที่
   โครงการที่มีทุกสถานะจึงไม่ดันกล่องจนเต็มจอเหมือนเดิม */
.hpw-map-legend-body {
    padding:8px 11px 10px;
    max-height:min(38vh, calc(var(--map-height, 550px) * .52));
    overflow-y:auto; overscroll-behavior:contain;
}
.hpw-map-legend-row {
    display:flex; align-items:center; gap:7px;
    margin-top:5px; color:#334155; flex-wrap:wrap;
}
.hpw-map-legend-row:first-child { margin-top:0; }
.hpw-map-legend-row b { font-weight:700; color:#0f172a; white-space:nowrap; }
.hpw-map-legend-row i { font-style:normal; opacity:.6; font-size:10.5px; white-space:nowrap; }
.hpw-map-legend-sub {
    margin:9px 0 5px; padding-top:8px;
    border-top:1px dashed rgba(15,23,42,.14);
    font-size:10px; font-weight:800; letter-spacing:.04em;
    text-transform:uppercase; color:#64748b;
}
.hpw-map-legend-dot { width:11px; height:11px; border-radius:50%; flex:0 0 auto;
    border:2px solid #fff; box-shadow:0 1px 3px rgba(0,0,0,.35); }

/* จอแคบ: กล่องพับอยู่เป็นเม็ดเล็ก ๆ มุมล่างซ้าย กดแล้วค่อยกาง
   ตอนกางให้กว้างเกือบเต็มเพื่อไม่ต้องตัดคำ แต่ยังเห็นแผนที่ด้านบน */
@media (max-width:640px) {
    .hpw-map-legend { left:8px; right:8px; bottom:12px; max-width:none; font-size:11px; }
    .hpw-map-legend:not([open]) { width:max-content; right:auto; }
    .hpw-map-legend > summary { padding:8px 12px; }
    .hpw-map-legend-body { max-height:34vh; }
    /* สองคอลัมน์ตอนกาง — รายการสถานะสั้น ๆ ทำให้กล่องเตี้ยลงเกือบครึ่ง */
    .hpw-map-legend[open] .hpw-map-legend-body {
        display:grid; grid-template-columns:1fr 1fr; gap:4px 12px;
    }
    .hpw-map-legend[open] .hpw-map-legend-sub { grid-column:1 / -1; }
    .hpw-map-legend[open] .hpw-map-legend-row { margin-top:0; }
}
/* คำขยายท้ายบรรทัด — แยกเป็นชิ้นของตัวเองจะได้สั่งให้ลงบรรทัดใหม่ทั้งก้อน
   แทนที่จะปล่อยให้เบราว์เซอร์ตัดคำกลางประโยค (ภาษาไทยไม่มีช่องว่าง
   จุดตัดจึงตกตรงไหนก็ได้ แล้วอ่านสะดุด) */
.hpw-map-legend-hint { color:#64748b; font-size:10.5px; }
.hpw-map-legend-hint::before { content:'— '; }
@media (max-width:640px) {
    .hpw-map-legend[open] .hpw-map-legend-hint {
        flex:1 0 100%; margin-left:18px; font-size:10px; opacity:.75;
    }
}
/* ป้ายสถานะมุมรูปในป๊อปอัป — สีมาจากทะเบียนผ่าน --st (v4.27.1)
   พื้นขาวขุ่นเหมือนป้ายเดิม ตัวอักษรเป็นสีสถานะ จะได้อ่านออกบนรูปทุกแบบ */
.hpw-popup-floating-status.is-st { color:var(--st, #64748b); }

/* ============================================================
   v4.28.0 — สีสถานะบนรายการข้างแผนที่ (โหมดรายห้องเท่านั้น)

   ผู้ใช้กวาดตาจาก "รายการ" ไปหา "หมุด" ด้วยสีเป็นหลัก ถ้ารายการใช้สีตาม
   ประเภทห้อง (โกดัง/สำนักงาน) แต่หมุดใช้สีตามสถานะ ก็จับคู่กันไม่ได้เลย
   โหมดรายห้องจึงให้สถานะชนะ — โหมดระดับโครงการยังใช้สีตามประเภทเหมือนเดิม
   เพราะหนึ่งหมุดมีหลายสถานะปนกัน ไม่มีสีสถานะเดียวที่ถูกต้อง

   ★ ต้องอยู่ท้ายไฟล์ต่อจากกฎ .type-* และ :hover ซึ่งมีน้ำหนักเท่ากัน (0,2,0)
     ตัวที่มาทีหลังเป็นตัวชนะ — ย้ายบล็อกนี้ขึ้นไปข้างบนเมื่อไหร่ สีสถานะหายทันที
   ============================================================ */
.hpw-map-list-item.has-st { border-left-color: var(--st, #6b7a8d); }
.hpw-map-list-item.has-st:hover,
.hpw-map-list-item.has-st.active {
    border-left-color: var(--st, #6b7a8d);
    border-left-width: 5px;
    padding-left: 10px;                     /* ชดเชยความหนาที่เพิ่ม ไม่ให้ข้อความขยับ */
    border-color: color-mix(in srgb, var(--st, #6b7a8d) 40%, transparent);
    border-left-color: var(--st, #6b7a8d);
}
/* เบราว์เซอร์ที่ยังไม่มี color-mix() จะข้าม border-color บรรทัดบนไปเอง
   แล้วตกไปใช้ค่าเดิมจากกฎ :hover ซึ่งยังอ่านออก ไม่ใช่ไม่มีเส้น */
.hpw-map-list-item.has-st.is-unpinned { border-left-color: var(--st, #6b7a8d); opacity: .78; }