/**
 * Hanuman PropWorks — map-focus.css v4.28.0
 * คู่กับ assets/js/map-focus.js — โหลดคู่กันเสมอ ทั้งแผนที่ [propworks_map]
 * และ [propworks_all_map] ซึ่งไม่ได้โหลด map.css ตัวเต็ม
 */
/* ============================================================
   v4.28.0 — ป้ายบอกว่ากำลังโฟกัสหมุดเดียวอยู่

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

   z-index: เหนือ pane ของ Leaflet (400-700) แต่ต่ำกว่าป๊อปอัป (700)
   จึงตั้งที่ 650 เท่ากับชั้นควบคุม ไม่ไปบังเนื้อหาที่ผู้ใช้กำลังอ่าน
   ============================================================ */
.hpw-map-focus-chip {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translate(-50%, 8px);
    z-index: 650;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: calc(100% - 24px);
    margin: 0;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(17, 34, 27, .86);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #eafaf2;
    font: 700 12px/1.35 inherit;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.hpw-map-focus-chip.is-on {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
}
.hpw-map-focus-chip i { font-style: normal; font-size: 13px; line-height: 1; }
.hpw-map-focus-chip:hover,
.hpw-map-focus-chip:focus-visible { background: rgba(17, 34, 27, .96); }
.hpw-map-focus-chip:focus-visible { outline: 2px solid #7ee2b8; outline-offset: 2px; }

@media (max-width: 480px) {
    /* จอแคบ: ข้อความเต็มยาวเกินความกว้างแผนที่ เหลือแค่คำสั่งที่ต้องรู้ */
    .hpw-map-focus-chip span { font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
    .hpw-map-focus-chip { transition: none; }
}
