/* ============================================================
   floorplan-map.css — Floorplan Map Module
   ใช้ prefix "fp-" ทุก class เพื่อไม่ชนกับ viewer.css
   โครงสร้าง:
     1.  Toggle Button (กลางล่าง 10px จากขอบ)
     2.  Overlay
     3.  Panel
     4.  Panel Header
     5.  Map Image Wrapper
     6.  Pins + Pulse
     7.  Tooltip
     8.  Legend
     9.  Animations
    10.  Responsive ≤ 600px
   ============================================================ */


/* ============================================================
   1. Toggle Button — ลอยกลางจอ 10px จากขอบล่าง
   ============================================================ */

.fp-toggle {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 250;

  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px 0 11px;
  border: none;
  border-radius: 19px;
  cursor: pointer;
  white-space: nowrap;

  background: rgba(10,14,10,.78);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 4px 20px rgba(0,0,0,.45),
              0 1px 0 rgba(255,255,255,.06) inset;

  color: rgba(255,255,255,.90);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;

  transition: background 140ms ease, transform 140ms ease,
              border-color 140ms ease, box-shadow 140ms ease;
  user-select: none;
}

.fp-toggle:hover {
  background: rgba(26,115,232,.80);
  border-color: rgba(26,115,232,.55);
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 8px 28px rgba(26,115,232,.40);
  color: white;
}

.fp-toggle.is-active {
  background: rgba(26,115,232,.88);
  border-color: rgba(26,115,232,.6);
  color: white;
}

/* icon แผนผัง */
.fp-toggle__icon {
  width: 15px; height: 15px;
  fill: currentColor; flex-shrink: 0;
}

/* ชื่อ scene ปัจจุบัน */
.fp-toggle__label {
  max-width: 140px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* badge จำนวน pin */
.fp-toggle__count {
  font-size: 10px; font-weight: 700;
  background: rgba(255,255,255,.16);
  border-radius: 9px;
  padding: 1px 7px;
  color: rgba(255,255,255,.80);
  flex-shrink: 0;
}

/* pulse ring รอบปุ่ม */
.fp-toggle::after {
  content: '';
  position: absolute; inset: -4px;
  border-radius: 23px;
  border: 1.5px solid rgba(26,115,232,.55);
  animation: fp-btn-pulse 3s ease-out infinite;
  pointer-events: none;
}
.fp-toggle.is-active::after { display: none; }

@keyframes fp-btn-pulse {
  0%  { transform: scale(1);    opacity: .65; }
  65% { transform: scale(1.14); opacity: 0; }
  100%{ transform: scale(1.14); opacity: 0; }
}


/* ============================================================
   2. Overlay
   ============================================================ */

.fp-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.52);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  z-index: 800;
  opacity: 0; pointer-events: none;
  transition: opacity 260ms ease;
}
.fp-overlay.is-visible {
  opacity: 1; pointer-events: all;
}


/* ============================================================
   3. Panel — popup หลัก (เลื่อนขึ้นจากด้านล่าง)
   ============================================================ */

.fp-panel {
  position: fixed;
  bottom: 0; left: 50%;
  transform: translateX(-50%) translateY(40px);

  width: min(760px, 96vw);
  max-height: min(640px, 85vh);

  background: rgba(12,18,12,.96);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.09);
  border-bottom: none;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 60px rgba(0,0,0,.55);

  display: flex; flex-direction: column;
  overflow: hidden;
  z-index: 900;

  opacity: 0; pointer-events: none;
  transition: opacity 260ms ease,
              transform 260ms cubic-bezier(.4,0,.2,1);
}
.fp-panel.is-visible {
  opacity: 1; pointer-events: all;
  transform: translateX(-50%) translateY(0);
}


/* ============================================================
   4. Panel Header
   ============================================================ */

.fp-panel__header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}

.fp-panel__header-left {
  display: flex; align-items: center; gap: 8px;
}

.fp-panel__icon {
  width: 18px; height: 18px;
  fill: #4caf50; flex-shrink: 0;
}

.fp-panel__title {
  font-size: 14px; font-weight: 700;
  color: white; letter-spacing: .01em;
}

.fp-panel__close {
  width: 30px; height: 30px;
  border-radius: 50%; border: none;
  background: rgba(255,255,255,.08);
  color: rgba(255,255,255,.65);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 140ms ease, color 140ms ease;
  flex-shrink: 0;
}
.fp-panel__close svg { width: 16px; height: 16px; fill: currentColor; }
.fp-panel__close:hover {
  background: rgba(255,255,255,.18); color: white;
}


/* ============================================================
   5. Map Image Wrapper
   pins ใช้ position:absolute (%) บน wrapper นี้
   ============================================================ */

.fp-map-wrap {
  position: relative;
  flex: 1; overflow: hidden;
  background: #0d1a0d;
  cursor: default;
}

.fp-map__img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  user-select: none;
  -webkit-user-drag: none;
}


/* ============================================================
   6. Pins + Pulse
   ============================================================ */

.fp-pin {
  position: absolute;
  /* center ของ dot ตรงกับพิกัด x,y */
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 10;

  --pin-color: #1a73e8;  /* JS override ด้วย style.setProperty */
  --pin-size:  34px;
}

/* dot กลม */
.fp-pin__dot {
  position: relative;
  width: var(--pin-size); height: var(--pin-size);
  border-radius: 50%;
  background: var(--pin-color);
  border: 2.5px solid rgba(255,255,255,.88);
  box-shadow: 0 3px 10px rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center;
  transition: transform 140ms ease, box-shadow 140ms ease;
  z-index: 2;
}

/* icon ใน dot */
.fp-pin__icon {
  width: 16px; height: 16px;
  object-fit: contain; display: block;
  pointer-events: none;
  filter: brightness(0) invert(1); /* บังคับให้ icon เป็นสีขาว */
}

/* pulse ring */
.fp-pin__pulse {
  position: absolute; inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--pin-color);
  animation: fp-pin-pulse 2.4s ease-out infinite;
  pointer-events: none; z-index: 1;
}

@keyframes fp-pin-pulse {
  0%  { transform: scale(.85); opacity: .7; }
  70% { transform: scale(1.7);  opacity: 0; }
  100%{ transform: scale(1.7);  opacity: 0; }
}

/* hover */
.fp-pin:hover .fp-pin__dot {
  transform: scale(1.18) translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}

/* active — scene ที่กำลังดูอยู่ */
.fp-pin.is-active .fp-pin__dot {
  border-color: white;
  border-width: 3px;
  box-shadow: 0 0 0 3px var(--pin-color), 0 4px 16px rgba(0,0,0,.5);
}
.fp-pin.is-active .fp-pin__pulse {
  border-color: white;
  animation-duration: 1.5s;
}

/* label ใต้ dot สำหรับ active scene */
.fp-pin.is-active::after {
  content: attr(data-label);
  position: absolute;
  top: calc(var(--pin-size) + 6px);
  left: 50%; transform: translateX(-50%);
  background: var(--pin-color);
  color: white;
  font-size: 10px; font-weight: 700;
  padding: 2px 8px; border-radius: 8px;
  white-space: nowrap; pointer-events: none;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
  z-index: 3;
}


/* ============================================================
   7. Tooltip — ลอยตาม cursor (position:fixed)
   ============================================================ */

.fp-tooltip {
  position: fixed;
  z-index: 9999;
  display: flex; align-items: center; gap: 7px;
  padding: 7px 12px;
  background: rgba(8,14,8,.90);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px;
  box-shadow: 0 6px 24px rgba(0,0,0,.45);
  pointer-events: none;
  white-space: nowrap;

  opacity: 0; transform: translateY(4px);
  transition: opacity 120ms ease, transform 120ms ease;
}
.fp-tooltip.is-visible {
  opacity: 1; transform: none;
}

.fp-tooltip__dot {
  width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}
.fp-tooltip__label {
  font-size: 12px; font-weight: 600; color: white;
}
.fp-tooltip__group {
  font-size: 10px; color: rgba(255,255,255,.5);
  padding-left: 4px;
  border-left: 1px solid rgba(255,255,255,.15);
}


/* ============================================================
   8. Legend (Group)
   ============================================================ */

.fp-legend {
  position: absolute;
  top: 10px; left: 10px;
  display: flex; flex-direction: column; gap: 5px;
  background: rgba(8,14,8,.75);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 8px;
  padding: 8px 10px;
  z-index: 5; pointer-events: none;
}

.fp-legend__item {
  display: flex; align-items: center; gap: 6px;
  font-size: 10px; color: rgba(255,255,255,.75);
}

.fp-legend__dot {
  width: 8px; height: 8px;
  border-radius: 50%; flex-shrink: 0;
}


/* ============================================================
   9. Animations — pin เด้งขึ้นมาเมื่อ panel เปิด
   ============================================================ */

.fp-panel.is-visible .fp-pin {
  animation: fp-pin-appear .4s cubic-bezier(.34,1.56,.64,1) both;
}
.fp-panel.is-visible .fp-pin:nth-child(1) { animation-delay: .05s; }
.fp-panel.is-visible .fp-pin:nth-child(2) { animation-delay: .10s; }
.fp-panel.is-visible .fp-pin:nth-child(3) { animation-delay: .15s; }
.fp-panel.is-visible .fp-pin:nth-child(4) { animation-delay: .20s; }
.fp-panel.is-visible .fp-pin:nth-child(5) { animation-delay: .25s; }
.fp-panel.is-visible .fp-pin:nth-child(6) { animation-delay: .30s; }
.fp-panel.is-visible .fp-pin:nth-child(7) { animation-delay: .35s; }
.fp-panel.is-visible .fp-pin:nth-child(8) { animation-delay: .40s; }

@keyframes fp-pin-appear {
  from { opacity:0; transform:translate(-50%,-50%) scale(.3); }
  to   { opacity:1; transform:translate(-50%,-50%) scale(1); }
}


/* ============================================================
   10. Responsive ≤ 600px
   ============================================================ */

@media (max-width: 600px) {
  .fp-toggle {
    bottom: 10px; height: 34px;
    padding: 0 11px 0 9px; font-size: 12px;
  }
  .fp-toggle__label { max-width: 100px; }

  .fp-panel {
    width: 100%; max-height: 78vh;
    border-radius: 14px 14px 0 0;
  }

  .fp-pin { --pin-size: 28px; }
  .fp-pin__icon { width: 13px; height: 13px; }
  .fp-pin.is-active::after { font-size: 9px; }
}