/* ================================================================
   GhanaTRVL — Interactive Map Page Addon Stylesheet
   interactive-map-addon-v4.css

   /interactive-map/ (_map_body.php) - map on top (properly sized,
   not the 380px .rp-map-body collapsible-panel height used
   elsewhere - this page's map IS the page, not a secondary panel),
   filter pills, results list below.

   Loaded AFTER custom-v4.css and result-pages-addon-v4.css (reuses
   .fpill/.rp-wrap from there - no need to redefine the filter pill
   look for a third time). Popup classes are prefixed .im- rather
   than reusing .rp-map-popup-*, since this page's popup has two
   extra states (.rp-map-popup-* has none) - published vs draft, an
   image, and a "Coming soon" badge that page never needed.

   Sections:
   01. Map container (#interactive-map)
   02. Popup (.im-map-popup-*)
   03. Marker cluster colours (scoped to #interactive-map only)
   04. Filter panel (.im-filter-bar)
   05. Results list (.im-list / .im-list-item)
================================================================ */

/* ================================================================
   01. MAP CONTAINER
================================================================ */
#interactive-map {
  width: 100%;
  height: 65vh;
  min-height: 480px;
  max-height: 720px;
  border-radius: 6px;
  border: 1px solid var(--rule);
  overflow: hidden;
  background: var(--wh2);
  position: relative;
  z-index: 0;
  margin-bottom: 28px;
}

@media (max-width: 767.98px) {
  #interactive-map {
    height: 50vh;
    min-height: 340px;
  }
}

#interactive-map .leaflet-top,
#interactive-map .leaflet-bottom { z-index: 400 !important; }

#interactive-map .leaflet-control-attribution {
  font-family: var(--ff-h) !important;
  font-size: 9px !important;
  color: var(--mu) !important;
  background: rgba(255,255,255,.85) !important;
}

/* ================================================================
   02. POPUP
================================================================ */
.im-map-popup .leaflet-popup-content-wrapper {
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(35,15,66,.2);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
}
.im-map-popup .leaflet-popup-content { margin: 0; }
.im-map-popup .leaflet-popup-close-button {
  color: var(--mu) !important;
  font-size: 16px !important;
  padding: 4px 6px !important;
}

.im-map-popup-inner {
  padding: 0 0 11px;
  min-width: 170px;
  max-width: 220px;
}
.im-map-popup-img {
  width: 100%;
  height: 90px;
  object-fit: cover;
  display: block;
  margin-bottom: 8px;
}
.im-map-popup-badge {
  display: inline-block;
  font-family: var(--ff-h);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #fff;
  background: var(--mu);
  padding: 2px 7px;
  border-radius: 2px;
  margin: 11px 13px 4px;
}
.im-map-popup-cat {
  font-family: var(--ff-h);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--mv);
  background: rgba(89,45,140,.08);
  padding: 2px 7px;
  border-radius: 2px;
  display: inline-block;
  margin: 11px 13px 6px;
}
.im-map-popup-img + .im-map-popup-cat,
.im-map-popup-badge + .im-map-popup-cat {
  margin-top: 0;
}
.im-map-popup-title {
  font-family: var(--ff-h);
  font-size: .8rem;
  font-weight: 700;
  color: var(--dv);
  line-height: 1.3;
  margin: 0 13px 6px;
}
.im-map-popup-link {
  font-family: var(--ff-h);
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mv);
  text-decoration: none;
  transition: color .15s;
  margin: 0 13px;
  display: inline-block;
}
.im-map-popup-link:hover { color: var(--dv); }

/* ================================================================
   03. MARKER CLUSTER COLOURS — scoped to #interactive-map only
================================================================ */
#interactive-map .marker-cluster-small        { background-color: rgba(89,45,140,.5); }
#interactive-map .marker-cluster-small div    { background-color: rgba(89,45,140,.8); }
#interactive-map .marker-cluster-medium       { background-color: rgba(35,15,66,.5); }
#interactive-map .marker-cluster-medium div   { background-color: rgba(35,15,66,.8); }
#interactive-map .marker-cluster-large        { background-color: rgba(35,15,66,.6); }
#interactive-map .marker-cluster-large div    { background-color: rgba(35,15,66,.9); }
#interactive-map .marker-cluster span {
  color: #fff;
  font-family: var(--ff-h);
  font-weight: 700;
}

/* ================================================================
   04. FILTER PANEL
   Reuses .fpill verbatim (result-pages-addon-v4.css) for the pills
   themselves - only the panel/group chrome is new.
================================================================ */
.im-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  margin-bottom: 20px;
}
.im-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.im-filter-group-label {
  font-family: var(--ff-h);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--mu);
  margin-right: 2px;
}

.im-filter-search {
  font-family: var(--ff-h);
  font-size: 12px;
  color: var(--dv);
  background: #fff;
  border: 1.5px solid var(--rule);
  border-radius: 20px;
  padding: 5px 14px;
  min-width: 200px;
  transition: border-color .18s;
}
.im-filter-search:focus {
  outline: none;
  border-color: var(--mv);
}
.im-filter-search::placeholder {
  color: var(--mu);
}

/* Count badge inside a .fpill - local equivalent of .evt-sidebar-count (events-css-additions.css),
   not reused directly since that file isn't loaded on this page. */
.im-filter-bar .fpill .evt-sidebar-count,
.im-filter-count {
  font-size: 10px;
  font-weight: 800;
  background: rgba(89,45,140,.1);
  border-radius: 10px;
  padding: 1px 7px;
  color: var(--mv);
  margin-left: 4px;
}
.im-filter-bar .fpill:hover .evt-sidebar-count,
.im-filter-bar .fpill.active .evt-sidebar-count {
  background: rgba(255,255,255,.2);
  color: #fff;
}

/* ================================================================
   05. RESULTS LIST
================================================================ */
.im-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}

.im-list-item {
  display: flex;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 10px;
  cursor: pointer;
  transition: border-color .15s, transform .15s;
}
.im-list-item:hover { border-color: var(--mv); transform: translateY(-1px); }
.im-list-item--active { border-color: var(--ye); box-shadow: 0 0 0 1px var(--ye); }

.im-list-item-img {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 4px;
  overflow: hidden;
  background: var(--wh2);
}
.im-list-item-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.im-list-item-img--empty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mu);
  font-size: 16px;
}

.im-list-item-body { min-width: 0; }
.im-list-item-cat {
  font-family: var(--ff-h);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mv);
  margin-bottom: 3px;
  display: block;
}
.im-list-item-title {
  font-family: var(--ff-h);
  font-size: .82rem;
  font-weight: 700;
  color: var(--dv);
  line-height: 1.3;
  margin-bottom: 2px;
}
.im-list-item--draft .im-list-item-title { color: var(--mu); }
.im-list-item-meta {
  font-family: var(--ff-h);
  font-size: 10.5px;
  color: var(--mu);
  margin-bottom: 2px;
}
.im-list-item-meta i {
  color: var(--mv);
  font-size: 9px;
  margin-right: 4px;
}
.im-list-item-badge {
  font-family: var(--ff-h);
  font-size: 8px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mu);
}