﻿/* PMV Maps — visual language matched to the Proaudio store locator. */
.pmv-map-widget {
  --pmv-blue: #0057a8;
  --pmv-cyan: #1ba1d1;
  --pmv-ink: #172b54;
  --pmv-muted: #74777d;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  background: #fff;
  border: 1px solid #e2e8ee;
  border-radius: 0;
  color: var(--pmv-ink);
  font-family: "Poppins", "Montserrat", sans-serif;
}

.pmv-topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  min-height: 94px;
  padding: 24px 4.7%;
  background: #fff;
  border-bottom: 1px solid #edf0f2;
  box-sizing: border-box;
}

.pmv-topbar__search {
  position: relative;
  flex: 0 1 500px;
  min-width: 260px;
}
.pmv-topbar__search::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 50%;
  width: 16px;
  height: 16px;
  border: 1.8px solid #3e454d;
  border-radius: 50%;
  transform: translateY(-57%);
  pointer-events: none;
}
.pmv-topbar__search::after {
  content: "";
  position: absolute;
  left: 34px;
  top: 54%;
  width: 7px;
  height: 1.8px;
  background: #3e454d;
  transform: rotate(45deg);
  pointer-events: none;
}
.pmv-search-input {
  width: 100%;
  height: 60px;
  padding: 0 20px 0 52px;
  border: 2px solid #e2e7ec;
  border-radius: 11px;
  outline: 0;
  background: #f7f8fa;
  color: #333942;
  font: inherit;
  font-size: 15px;
  box-sizing: border-box;
  transition: border-color .18s, box-shadow .18s;
}
.pmv-search-input::placeholder { color: #a7a9ad; opacity: 1; }
.pmv-search-input:focus { border-color: var(--pmv-blue); box-shadow: 0 0 0 3px rgba(0,87,168,.1); }

.pmv-tabs { display: flex; flex: 1; flex-wrap: wrap; gap: 9px; min-width: 0; }
.pmv-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0 22px;
  border: 2px solid #e2e7ec;
  border-radius: 10px;
  background: #fff;
  color: #4b4c50;
  cursor: pointer;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  transition: color .18s, border-color .18s, background .18s;
}
.pmv-map-widget .pmv-tab:hover,
.pmv-map-widget .pmv-tab:focus { border-color: var(--pmv-blue); background: #f2f8fd; color: var(--pmv-blue); }
.pmv-map-widget .pmv-tab.is-active,
.pmv-map-widget .pmv-tab.is-active:hover,
.pmv-map-widget .pmv-tab.is-active:focus { border-color: var(--pmv-blue); background: var(--pmv-blue); color: #fff; }

.pmv-map-wrapper { display: flex; flex: 0 0 auto; height: 760px; min-height: 300px; overflow: hidden; }
.pmv-sidebar-right .pmv-map-wrapper { flex-direction: row-reverse; }
.pmv-map { flex: 1 1 auto; min-width: 0; min-height: 300px; height: 100%; }
.pmv-sidebar {
  width: 40%;
  max-width: 540px;
  min-width: 360px;
  flex: 0 0 40%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border-right: 1px solid #edf0f2;
}
.pmv-sidebar--right { border-right: 0; border-left: 1px solid #edf0f2; }
.pmv-sidebar__list { flex: 1; overflow-y: auto; padding: 0; scroll-behavior: smooth; }
.pmv-sidebar__list::-webkit-scrollbar { width: 5px; }
.pmv-sidebar__list::-webkit-scrollbar-track { background: #f1f3f6; }
.pmv-sidebar__list::-webkit-scrollbar-thumb { background: #c8d0da; border-radius: 3px; }

.pmv-location-card {
  position: relative;
  display: flex;
  gap: 12px;
  min-height: 92px;
  padding: 20px 27px;
  border: 0;
  border-bottom: 1px solid #edf0f2;
  border-left: 5px solid transparent;
  border-radius: 0;
  background: #fff;
  box-sizing: border-box;
  cursor: pointer;
  transition: background .16s, border-color .16s;
}
.pmv-location-card:hover { background: #f7fbfe; }
.pmv-location-card.is-active { background: #edf6ff; border-left-color: var(--pmv-blue); }
.pmv-location-card:focus-visible { outline: 2px solid var(--pmv-blue); outline-offset: -3px; }
.pmv-location-card__thumb { flex: 0 0 58px; }
.pmv-location-card__thumb img { width: 58px; height: 58px; object-fit: cover; border-radius: 7px; }
.pmv-location-card__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.pmv-location-card__heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pmv-location-card__title { margin: 0; color: var(--pmv-ink); font-size: 16px; font-weight: 650; line-height: 1.35; }
.pmv-location-card__cats { display: flex; flex: 0 0 auto; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.pmv-location-card__cat { padding: 5px 11px; border-radius: 999px; background: var(--pmv-cyan); color: #fff; font-size: 11px; font-weight: 600; line-height: 1.1; }
.pmv-location-card__line { display: flex; align-items: flex-start; gap: 8px; color: var(--pmv-muted); font-size: 13px; line-height: 1.45; }
.pmv-location-card__line svg { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 1px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.pmv-location-card__meta svg { color: var(--pmv-cyan); stroke-width: 1.8; }
.pmv-location-card__hours { align-items: center; color: #898b8e; }
.pmv-location-card__status { display: inline-flex; align-items: center; gap: 5px; margin-left: 3px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.pmv-location-card__status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; }
.pmv-location-card__status.is-open { color: #09b84f; }
.pmv-location-card__status.is-closed { color: #d74949; }

.pmv-badge { display: inline-block; padding: 3px 8px; border-radius: 99px; font-size: 11px; font-weight: 700; }
.pmv-badge--open { background: #e6f7ed; color: #10873c; }
.pmv-badge--closed { background: #fde8e8; color: #c0392b; }
.pmv-no-results { padding: 20px; text-align: center; color: #7b8492; }
.pmv-info-window { max-width: 260px; padding: 8px 38px 8px 2px; font-family: "Poppins", "Montserrat", sans-serif; line-height: 1.5; }
.pmv-info-thumb { display: block; width: 100%; height: 120px; margin-bottom: 8px; border-radius: 5px; object-fit: cover; }
.pmv-info-title { margin: 0 0 6px; color: var(--pmv-ink); font-size: 15px; }
.pmv-info-excerpt,.pmv-info-address,.pmv-info-phone,.pmv-info-website,.pmv-info-hours { margin: 5px 0 0; color: #5c6470; font-size: 12px; }
.pmv-info-window a { color: var(--pmv-blue); }
.pmv-info-gmaps-btn { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 13px; border-radius: 5px; background: var(--pmv-blue); color: #fff !important; font-size: 12px; font-weight: 600; text-decoration: none !important; }

/* Keep the native Google close control clear of this widget's content. */
.pmv-map-widget .gm-style-iw-chr {
  position: absolute;
  top: 4px;
  right: 4px;
  z-index: 2;
  height: 36px;
}
.pmv-map-widget .gm-style-iw-chr button.gm-ui-hover-effect {
  position: relative !important;
  inset: auto !important;
  width: 36px !important;
  height: 36px !important;
  margin: 0 !important;
  padding: 8px !important;
  opacity: .72;
}
.pmv-map-widget .gm-style-iw-chr button.gm-ui-hover-effect > span {
  width: auto !important;
  margin: 0 !important;
}
/* Keep cooperative scrolling without Google's Ctrl+scroll dimming prompt. */
.pmv-map-widget .gm-style-pbc,
.pmv-map-widget .gm-style-pbt {
  display: none !important;
  opacity: 0 !important;
}
.pmv-map-widget .gm-style-iw-chr button.gm-ui-hover-effect:hover,
.pmv-map-widget .gm-style-iw-chr button.gm-ui-hover-effect:focus-visible {
  background: #eef4f9 !important;
  opacity: 1;
}

@media (max-width: 1024px) {
  .pmv-topbar { padding-inline: 24px; }
  .pmv-topbar__search { flex-basis: 390px; }
  .pmv-sidebar { width: 42%; flex-basis: 42%; min-width: 330px; }
}
@media (max-width: 768px) {
  .pmv-topbar { flex-direction: column; align-items: stretch; padding: 16px; gap: 12px; }
  .pmv-topbar__search { flex: none; min-width: 0; }
  .pmv-search-input { height: 52px; }
  .pmv-tabs { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 3px; }
  .pmv-tab { min-height: 44px; padding-inline: 18px; }
  .pmv-map-wrapper { height: 820px; min-height: 820px; flex-direction: column !important; }
  .pmv-sidebar { width: 100%; min-width: 0; max-width: none; flex: 0 0 auto; max-height: 260px; border: 0; border-bottom: 1px solid #e2e8ee; }
  .pmv-sidebar--right { order: 2; border-top: 1px solid #e2e8ee; }
  .pmv-location-card { min-height: 84px; padding: 17px 18px; }
}
@media (max-width: 480px) {
  .pmv-location-card__heading { display: block; }
  .pmv-location-card__cats { justify-content: flex-start; margin-top: 6px; }
  .pmv-location-card__phone { display: none; }
}
