/* ============================================================
   หน้ารายการประกาศ: ตัวกรองย่อได้ / ช่องค้นหาจังหวัด / มุมมองแผนที่
   ============================================================ */

/* --- กล่องตัวกรอง + ปุ่ม "..." --- */
.filter-box {
  background: var(--card, #161d31);
  border: 1px solid var(--line, #24304d);
  border-radius: 14px;
  padding: .9rem 1rem 1rem;
}
.filter-box-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: .5rem; margin-bottom: .9rem; white-space: nowrap;
}
.filter-box-actions { display: flex; align-items: center; gap: .5rem; }
.filter-clear { font-size: .8rem; color: var(--brand-text); }

.filter-toggle {
  width: 32px; height: 30px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--line, #24304d);
  border-radius: 9px; color: var(--muted, #9aa6c4); cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}
.filter-toggle:hover { background: rgba(255,255,255,.06); color: var(--brand-text); }
.filter-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ย่อ: ซ่อนเนื้อหา เหลือแถบหัวไว้กดเปิดอีกครั้ง */
.filter-box.is-collapsed .filter-bar { display: none; }
.filter-box.is-collapsed .filter-box-head { margin-bottom: 0; }
.filter-box.is-collapsed .filter-toggle { color: var(--brand); border-color: var(--brand); }

/* --- ช่องค้นหาจังหวัด --- */
.combo { position: relative; }
.combo-input { position: relative; }
.combo-input > i {
  position: absolute; left: .7rem; top: 50%; transform: translateY(-50%);
  color: var(--muted, #9aa6c4); font-size: .8rem; pointer-events: none;
}
.combo-input .input { padding-left: 2.1rem; padding-right: 2.1rem; }
.combo-clear {
  position: absolute; right: .45rem; top: 50%; transform: translateY(-50%);
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: 0; border-radius: 50%;
  color: var(--muted, #9aa6c4); cursor: pointer; font-size: .8rem;
}
.combo-clear:hover { color: #fff; background: rgba(255,255,255,.1); }

.combo-list {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  margin: 0; padding: .3rem 0; list-style: none;
  max-height: 260px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--card, #161d31); border: 1px solid var(--line, #24304d);
  border-radius: 11px; box-shadow: 0 12px 30px rgba(0,0,0,.45);
}
.combo-opt {
  padding: .5rem .8rem; font-size: .9rem; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.combo-opt:hover, .combo-opt.is-active { background: rgba(52,211,153,.14); color: var(--brand-text); }
.combo-opt.is-on::after {
  content: "\f00c"; float: right;
  font-family: "Font Awesome 6 Free"; font-weight: 900;
}

/* --- ปุ่มสลับมุมมอง --- */
.view-switch {
  display: inline-flex; flex: 0 0 auto;
  background: var(--card, #161d31); border: 1px solid var(--line, #24304d);
  border-radius: 10px; overflow: hidden;
}
.view-btn {
  padding: .45rem .8rem; background: transparent; border: 0;
  color: var(--muted, #9aa6c4); font-size: .85rem; cursor: pointer;
  white-space: nowrap; display: inline-flex; align-items: center; gap: .35rem;
}
.view-btn:hover { color: var(--brand-text); }
.view-btn.is-on { background: var(--brand); color: #06281d; font-weight: 600; }

/* --- มุมมองแผนที่ --- */
.map-view[hidden], .list-view[hidden] { display: none; }
.map-frame-wrap {
  border: 1px solid var(--line, #24304d); border-radius: 14px;
  overflow: hidden; background: var(--surface-2);
}
.map-frame { display: block; width: 100%; height: clamp(280px, 46vh, 480px); border: 0; }
.map-note {
  display: flex; align-items: flex-start; gap: .45rem;
  font-size: .82rem; color: var(--muted, #9aa6c4);
  margin: .6rem 0 .9rem; line-height: 1.5;
}
.map-note i { margin-top: .15rem; color: var(--brand); }
.map-list { display: flex; flex-direction: column; gap: .5rem; }
.map-item {
  display: flex; align-items: center; gap: .7rem; padding: .5rem;
  background: var(--card, #161d31); border: 1px solid var(--line, #24304d);
  border-radius: 12px; color: inherit; text-decoration: none;
  transition: border-color .15s, transform .12s;
}
.map-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.map-item.is-active { border-color: var(--brand); background: var(--surface-2, #1c2440); }
.map-item.is-active .map-item-ic { transform: scale(1.15); }
.map-item-ic { transition: transform .15s; }
.map-item img {
  width: 74px; height: 56px; flex: 0 0 auto;
  object-fit: cover; border-radius: 9px; background: var(--surface-2);
}
.map-item-txt { min-width: 0; flex: 1 1 auto; }
.map-item-txt b, .map-item-txt small {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-item-txt b { font-size: .9rem; font-weight: 600; }
.map-item-txt small { font-size: .78rem; color: var(--muted, #9aa6c4); }
.map-item-ic { color: var(--brand); font-size: .9rem; flex: 0 0 auto; }
.map-item-ic.is-dim { opacity: .35; }

@media (max-width: 640px) {
  .filter-box { padding: .8rem .85rem .9rem; }
  .view-switch { width: 100%; }
  .view-btn { flex: 1 1 50%; justify-content: center; }
  .map-item img { width: 62px; height: 48px; }
}

/* ============================================================
   แผนที่ประกาศ (Leaflet + OpenStreetMap)
   หมุดแบบป้ายราคา กดแล้วขึ้นการ์ดรูป + หัวข้อ + รายละเอียด
   ============================================================ */

/* Leaflet ต้องรู้ขนาดตอนสร้าง -> บังคับความสูงให้ชัดเจน */
#propertyMap {
  width: 100%;
  height: clamp(300px, 52vh, 560px);
  background: var(--surface-2);
  z-index: 1;
}

/* ป้ายราคาบนหมุด
   ยึดกึ่งกลางป้ายให้ตรงพิกัดด้วย transform
   (Leaflet วางกล่องไว้ที่มุมซ้ายบนตาม iconAnchor [0,0]) */
.tp-pin {
  position: relative;
  display: inline-block;
  white-space: nowrap;
  background: var(--brand, #16a34a);
  color: var(--on-brand, #ffffff);
  font-weight: 600;
  font-size: .78rem;
  line-height: 1.2;
  padding: .32rem .55rem;
  border-radius: 999px;
  border: 2px solid var(--brand-dark, #047857);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
  transform: translate(-50%, -100%);
  transition: transform .12s, background .12s;
}

/* หางป้ายชี้ลงหมุด */
.tp-pin::after {
  content: '';
  position: absolute;
  left: 50%; bottom: -6px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-top-color: var(--brand-dark, #047857);
  transform: translateX(-50%);
}
.tp-pin:hover, .tp-pin.is-active { background: var(--ink, #0f172a); color: var(--bg, #f8fafc); }
.tp-pin:hover::after, .tp-pin.is-active::after { border-top-color: var(--ink, #0f172a); }

/* หมุดที่มีหลายประกาศซ้อนกัน ให้ใช้สีต่างออก */
.tp-pin.is-multi { background: #f59e0b; color: #1c1917; border-color: #b45309; }
.tp-pin.is-multi::after { border-top-color: #b45309; }

/* หมุดที่เลือกอยู่ */
.tp-pin.is-active { transform: translate(-50%, -100%) scale(1.12); z-index: 500; }

/* กล่องห่อหมุด */
.tp-pin-wrap {
  background: none;
  border: 0;
  white-space: nowrap;
  line-height: 0;
}

/* --- การ์ดรายละเอียดใน popup --- */
.leaflet-popup-content-wrapper {
  border-radius: 14px;
  padding: 0;
  background: var(--card, #161d31);
  color: var(--text, #e8ecf7);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .45);
}
.leaflet-popup-content { margin: 0; width: 268px !important; line-height: 1.45; }
.leaflet-popup-tip { background: var(--card, #161d31); }
.leaflet-popup-close-button {
  color: var(--ink, #e8ecf7) !important;
  width: 28px; height: 28px; padding: 0; font-size: 20px; line-height: 26px;
  background: var(--surface-2, #16233c); border-radius: 50%; top: 6px; right: 6px;
}

.tp-pop { display: block; }
.tp-pop a { color: inherit; text-decoration: none; }
.tp-pop img {
  display: block; width: 100%; height: 148px; object-fit: cover;
  border-radius: 14px 14px 0 0; background: var(--surface-2);
}
.tp-pop-body { padding: .6rem .7rem .7rem; }
.tp-pop-title {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .92rem; font-weight: 600; margin: 0 0 .25rem;
}
.tp-pop-meta { font-size: .78rem; color: var(--muted, #9aa6c4); margin: 0 0 .4rem; }
.tp-pop-price {
  display: inline-block; font-size: .95rem; font-weight: 700;
  color: var(--brand-text, #4ade80); margin-bottom: .45rem;
}
.tp-pop-link {
  display: block; text-align: center; font-size: .8rem; font-weight: 500;
  background: var(--brand, #16a34a); color: #06281d;
  border-radius: 9px; padding: .38rem .5rem;
}

/* กรณีหมุดเดียวมีหลายประกาศซ้อนกัน */
.tp-pop-group { max-height: 250px; overflow-y: auto; }
.tp-pop-item {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .5rem .7rem; border-top: 1px solid var(--line, #24304d);
}
.tp-pop-item:first-child { border-top: 0; }
.tp-pop-item img {
  width: 62px; height: 46px; border-radius: 8px; flex: 0 0 auto;
  object-fit: cover; background: var(--surface-2); margin: 0;
}
.tp-pop-item-txt { min-width: 0; flex: 1 1 auto; }
.tp-pop-item-txt b {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .84rem; font-weight: 600; margin: 0 0 .1rem;
}
.tp-pop-item-txt small {
  display: block; font-size: .74rem; color: var(--muted, #9aa6c4);
}
.tp-pop-item-txt em {
  display: block; font-style: normal; font-size: .82rem; font-weight: 700;
  color: var(--brand-text, #4ade80);
}

/* --- ปุ่มเลือกซ้อนหมุด --- */
.tp-pop-more {
  display: block; text-align: center; font-size: .78rem;
  padding: .45rem; border-top: 1px solid var(--line, #24304d);
  background: rgba(255, 255, 255, .04);
}

/* โหมดมืด: กระเบื้อง OSM เป็นสีอยู่ ใช้ filter กลืนให้เข้ากับธีม
   (invert กลับความสว่าง + hue-rotate ดันสีน้ำเงินกลับเป็นเขียว + ลดความสว่าง) */
#propertyMap.tp-map-dark .leaflet-tile-pane {
  filter: invert(1) hue-rotate(180deg) brightness(.72) contrast(1.15) saturate(.7);
}

/* --- ปุ่มสลับโหมดกระเบื้อง (แผนที่สี / ดาวเทียด) --- */
.tp-mode-ctrl { margin-top: 10px; }
.tp-mode-btn {
  display: flex; align-items: center; gap: .4rem;
  width: 100%; padding: .45rem .6rem;
  font: inherit; font-size: .8rem; font-weight: 600;
  color: var(--ink, #e8ecf7);
  background: var(--card, #161d31);
  border: 1px solid var(--line, #24304d);
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.tp-mode-btn:hover { background: var(--brand, #16a34a); color: var(--brand-text, #06281d); border-color: var(--brand-dark, #047857); }
.tp-mode-btn:focus-visible { outline: 2px solid var(--brand-light, #4ade80); outline-offset: 2px; }
.tp-mode-btn i { font-size: .85rem; }

/* ------------------------------------------------------------
   แก้การล้นแนวนอนบนมือถือ
   คอลัมน์กริดไม่ยอมหดเล็กกว่าเนื้อหา (min-width:auto) ทำให้
   แถบชิปที่เลื่อนแนวนอนดันหน้าจนล้น → ต้องกำหนด min-width:0
   ------------------------------------------------------------ */
@media (max-width: 900px) {
  #layout > * { min-width: 0; }
  .filter-box, .filter-bar, .form-row, .chip-row { min-width: 0; }
  .map-list, .map-item, .map-item-txt { min-width: 0; }
}