/* ==========================================================================
   Map (map.html)
   ========================================================================== */

/* fullscreenControl: false is set on the Map constructor (app.js) but
   Google's control still renders in this setup regardless -- hiding it
   directly is the reliable fix, and harmless either way if the JS option
   ever does take effect on its own. */
.gm-fullscreen-control {
  display: none !important;
}

/* Google Places Autocomplete renders its own dropdown outside our markup;
   hidden in favour of the custom suggestions dropdown (js/location-suggest.js)
   -- the autocomplete instance itself stays wired up in app.js for its
   fallback role in triggerMapSearch(), just never shown to the user. */
.pac-container {
  display: none !important;
}

.map_status {
  font-size: 1.6rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  justify-content: center;
}

@media (max-width: 768px) {
  .map_status {
    font-size: 1.1rem;
  }
}

/* ==========================================================================
   Panel
   ========================================================================== */
#panel.closed {
  display: none;
}

/* ==========================================================================
   Home button (mobile navbar)
   ========================================================================== */
.home-btn {
  width: 56px;
  height: 56px;
  background: #dedfe0;
  border-radius: 50%;
  color: #000;
  text-decoration: none;
  margin-left: -5px;
  transition: all 0.2s ease;
}

.home-btn:hover {
  background-color: #e9ecef;
  color: #000;
  transform: scale(1.05);
}

.home-btn:active {
  transform: scale(0.95);
}

.home-btn i {
  font-size: 1.5rem;
  line-height: 1;
}

.home-text {
  font-size: 10px;
  line-height: 1;
  margin-top: 2px;
  color: #1f2937;
}

/* ==========================================================================
   Search bar + filter pills (control strip)
   ========================================================================== */
.search-container {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.search-input-wrap {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* Explicit Search button -- shown on both desktop and mobile so users
   don't have to rely on the keyboard's Return key / autocomplete
   selection to submit. */
#mapSearchBtn {
  width: 54px;
  height: 54px;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-full);
  background: var(--cta-green);
  color: #fff;
  cursor: pointer;
  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

#mapSearchBtn:hover {
  background: var(--cta-green-dark);
}

#mapSearchBtn:active {
  transform: scale(0.95);
}

#pac-input {
  width: 100%;
  height: 46px;
  padding: 0 42px 0 42px;
  font-size: 0.95rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface);
  box-shadow: var(--shadow-md);
  box-sizing: border-box;
  transition:
    box-shadow 0.15s ease,
    transform 0.1s ease;
}

#pac-input:focus {
  outline: none;
  box-shadow:
    var(--shadow-md),
    var(--focus-ring);
}

.search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: var(--text-muted);
  pointer-events: none;
}

#pac-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  display: none;
  z-index: 10;
}

@media (max-width: 768px) {
  #pac-clear-btn {
    top: 43%;
  }
}

#pac-clear-btn img {
  width: 24px;
  height: 24px;
  display: block;
  opacity: 0.6;
  transition: opacity 0.15s ease;
}

#pac-clear-btn:hover img {
  opacity: 1;
}

.filters-container {
  display: flex;
  gap: var(--space-2);
  width: 100%;
  margin-top: 2px;
}

.filters-container > * {
  flex: 1 1 50%;
}

/* Shared pill treatment for the "Change category" link and the
   type-filter select -- deliberately matches .account-chip's visual
   language (rounded-full, subtle shadow, primary-tinted hover/focus)
   so the map page reads consistently with the rest of the site. */
.down_note {
  height: 44px;
  padding: 0 var(--space-4);
  font-size: 0.9rem;
  font-weight: var(--font-weight-semibold);
  border-radius: var(--radius-full);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background-color: var(--surface);
  color: var(--text-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition:
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

/* Use background-color (not the `background` shorthand) so this doesn't
   reset select.down_note's chevron background-image -- a shorthand here
   previously wiped the chevron out on hover since .down_note:hover beats
   select.down_note on specificity. */
.down_note:hover {
  background-color: var(--light);
  color: var(--primary);
  box-shadow: var(--shadow-md);
}

.down_note:focus-visible {
  outline: none;
  box-shadow:
    var(--shadow-sm),
    var(--focus-ring);
}

select.down_note {
  justify-content: flex-start;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e60aa' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 13px;
}

@media (max-width: 768px) {
  .search-icon {
    left: 14px;
    top: 43%;
  }

  #pac-input {
    height: 42px;
  }

  #mapSearchBtn {
    margin-top: -6px;
    display: flex;
    width: 42px;
    height: 42px;
    font-size: 1.15rem;
    box-shadow: var(--shadow-sm);
  }

  .filters-container {
    gap: var(--space-1);
  }

  .down_note {
    height: 38px;
    font-size: 0.82rem;
    padding: 0 var(--space-3);
  }

  select.down_note {
    padding-right: 26px;
    background-position: right 8px center;
  }
}

/* ==========================================================================
   Status tags (matches search.css) -- shown just below the name on
   panel tiles and marker InfoWindows for helper-type listings.
   ========================================================================== */
.status-pill {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 3px 8px;
  border-radius: var(--radius-full);
  border: 1px solid rgba(0, 0, 0, 0.06);
  font-size: 0.8rem;
  color: var(--text-muted);
  background: #f2f5f952;
  width: fit-content;
  max-width: 100%;
  white-space: normal;
}

.live-pill {
  font-size: 0.85rem;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  vertical-align: middle;
  line-height: 1;
}

.live-pill > span:last-child {
  line-height: 1.2;
}

.live-dot {
  margin-left: 4px;
  width: 10px;
  height: 10px;
  min-width: 10px;
  min-height: 10px;
  border-radius: 50%;
  background: var(--cta-green);
  position: relative;
  display: inline-block;
  flex: 0 0 10px;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  animation: livePulse 1.8s infinite ease-out;
}

.live-dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.35);
  animation: liveRipple 1.8s infinite ease-out;
}

@keyframes livePulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.12);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
  }
}

@keyframes liveRipple {
  0% {
    transform: scale(1);
    opacity: 0.65;
  }
  70% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@media (max-width: 768px) {
  .status-pill {
    padding: 3px 4px;
    font-size: 0.6rem;
  }

  .live-dot {
    margin-left: 0px;
  }

  .live-pill {
    font-size: 0.7rem;
  }

  /* .view-full-post-btn's base look is inline (Google Maps InfoWindow
     content), so !important is needed to override it here -- only
     when a "Recently active" tag pushed it down. */
  .view-full-post-btn.has-status-tag {
    padding: 6px 4px !important;
    font-size: 0.65rem !important;
  }
}