/* SmartPekua — মানচিত্র র‍্যাপার ও টুলটিপ স্টাইল
   (SVG-র নিজের হোভার/রঙের স্টাইল ফাইলটার ভেতরেই আছে) */

.pekua-map-wrap {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.pekua-map-wrap > svg {
  width: 100%;
  height: auto;
  display: block;
}

.pekua-map-tip {
  position: absolute;
  z-index: 5;
  min-width: 168px;
  padding: 10px 14px;
  background: var(--sp-bg-surface, #fff);
  color: var(--sp-text-primary, #161614);
  border: 1px solid var(--sp-border, #DEDEDA);
  border-left: 4px solid var(--sp-primary-500, #0B6E4F);
  border-radius: var(--sp-radius-md, 10px);
  box-shadow: var(--sp-shadow-lg, 0 12px 32px rgba(4,38,27,.10));
  font-family: var(--sp-font-body, "Hind Siliguri", sans-serif);
  font-size: 0.875rem;
  line-height: 1.7;
  pointer-events: none;
}

.pekua-map-tip[hidden] { display: none; }

.pekua-map-tip strong {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: var(--sp-primary-600, #0A5E44);
  margin-bottom: 2px;
}

.pekua-map-tip span {
  display: block;
  color: var(--sp-text-secondary, #57574F);
}

/* মানচিত্রের পাশে ইউনিয়নের তালিকা — মোবাইলে এটাই প্রধান নেভিগেশন,
   কারণ ছোট স্ক্রিনে পলিগনে আঙুল দিয়ে ট্যাপ করা কঠিন */
.pekua-map-legend {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 8px;
  margin-top: 20px;
  padding: 0;
  list-style: none;
}

.pekua-map-legend a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  min-height: 44px;                /* টাচ টার্গেট */
  border: 1px solid var(--sp-border, #DEDEDA);
  border-radius: var(--sp-radius-md, 10px);
  background: var(--sp-bg-surface, #fff);
  color: var(--sp-text-primary, #161614);
  text-decoration: none;
  font-weight: 500;
  transition: border-color 200ms, background 200ms;
}

.pekua-map-legend a:hover,
.pekua-map-legend a:focus-visible {
  border-color: var(--sp-primary-500, #0B6E4F);
  background: var(--sp-primary-50, #E9F6F0);
}

.pekua-map-legend i {
  width: 14px; height: 14px;
  border-radius: 4px;
  flex: 0 0 auto;
  background: var(--swatch, #95D6BC);
}

@media (prefers-color-scheme: dark) {
  .pekua-map-legend a:hover { background: #1E2724; }
}