/* ==========================================================================
   EMOVR - Dealer zoeken
   Everything is prefixed with .emovr-dealers / .ed- so none of it touches
   the theme or Elementor.

   Values come from the design's own stylesheet. The blocks marked "plugin
   addition" cover states the static export did not have to deal with:
   progressive enhancement, hiding filtered cards, and the distance readout
   that comes with radius search.
   ========================================================================== */

.emovr-dealers {
  --ed-accent: #3EA636;
  --ed-dark: #1C1F1D;
  --ed-body: #5C625E;
  --ed-muted: #8A918B;
  --ed-bg: #F3F4F2;
  --ed-card: #FFFFFF;
  --ed-line: #EBEEE9;

  font-family: Manrope, Helvetica, Arial, sans-serif;
  color: var(--ed-dark);
  background: var(--ed-bg);
  padding: clamp(40px, 6vw, 72px) 24px;
  box-sizing: border-box;
}
.emovr-dealers *,
.emovr-dealers *::before,
.emovr-dealers *::after { box-sizing: border-box; }

.emovr-dealers .ed-inner { margin: 0 auto; }

/* ---------- plugin addition: progressive enhancement ----------
   Without JavaScript the map is an empty grey box and the tabs do nothing,
   so until the script marks the section ready the list is what shows. */
.emovr-dealers:not(.is-ready) .ed-tabs,
.emovr-dealers:not(.is-ready) .ed-mapwrap { display: none; }

.emovr-dealers [hidden] { display: none !important; }

.emovr-dealers .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- kop + tabs ---------- */
.emovr-dealers .ed-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px 32px;
  margin-bottom: 24px;
}
.emovr-dealers .ed-intro { max-width: 620px; }
.emovr-dealers .ed-title {
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: clamp(28px, 3.4vw, 40px);
  line-height: 1.04;
  letter-spacing: -0.03em;
  margin: 0 0 12px;
  color: var(--ed-dark);
}
.emovr-dealers .ed-lead {
  font-size: 16.5px;
  line-height: 1.6;
  color: var(--ed-body);
  margin: 0;
  text-wrap: pretty;
}
.emovr-dealers .ed-tabs {
  display: flex;
  gap: 8px;
  padding: 5px;
  border-radius: 999px;
  background: #E7EAE6;
  flex: none;
}
.emovr-dealers .ed-tab {
  cursor: pointer;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  background: transparent;
  color: var(--ed-body);
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  transition: background .2s ease, color .2s ease;
}
.emovr-dealers .ed-tab.is-active { background: var(--ed-dark); color: #FFFFFF; }

/* ---------- layout ---------- */
.emovr-dealers .ed-body {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}
.emovr-dealers .ed-panel {
  background: var(--ed-card);
  border-radius: 20px;
  padding: 26px;
  flex: 0 1 340px;
  min-width: 0;
}
.emovr-dealers .ed-content {
  flex: 1 1 480px;
  min-width: 0;
  display: grid;
  gap: 20px;
}

/* ---------- filterpaneel ---------- */
.emovr-dealers .ed-label {
  display: block;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ed-body);
  margin-bottom: 8px;
}
.emovr-dealers .ed-search { display: flex; gap: 10px; margin-bottom: 22px; }
.emovr-dealers .ed-input,
.emovr-dealers .ed-select {
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #DCE0DB;
  outline: 0;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ed-dark);
  background: #FAFBF9;
}
.emovr-dealers .ed-input { flex: 1 1 auto; min-width: 0; width: auto; }
/* width:auto is not decoration: themes routinely set select { width: 100% },
   which with flex-basis auto lets the radius dropdown swallow the row and
   squeeze the search field down to nothing. */
.emovr-dealers .ed-select { flex: 0 0 auto; width: auto; max-width: 45%; padding: 12px; }
.emovr-dealers .ed-input:focus,
.emovr-dealers .ed-select:focus { border-color: var(--ed-dark); }

.emovr-dealers .ed-filters {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 22px;
}
.emovr-dealers .ed-filter { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.emovr-dealers .ed-filter input {
  margin-top: 3px;
  width: 17px;
  height: 17px;
  accent-color: var(--ed-dark);
  cursor: pointer;
  flex: none;
}
.emovr-dealers .ed-filter-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 600;
}
.emovr-dealers .ed-filter-desc {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  color: #7E857F;
  margin-top: 3px;
}
.emovr-dealers .ed-dot { width: 10px; height: 10px; border-radius: 999px; flex: none; }

.emovr-dealers .ed-foot { padding-top: 18px; border-top: 1px solid var(--ed-line); }
.emovr-dealers .ed-count { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.emovr-dealers .ed-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 700;
  color: #2F8F28;
  text-decoration: none;
}
.emovr-dealers .ed-link:hover { color: var(--ed-dark); }
.emovr-dealers .ed-link svg { width: 0.9em; height: 0.9em; }

/* ---------- kaart ---------- */
.emovr-dealers .ed-mapwrap {
  position: relative;
  /*
   * Leaflet gives its own panes and controls z-indexes up to 1000, and with
   * z-index:auto here those numbers compete with the whole page: the map then
   * slides over a sticky header instead of under it. isolation:isolate makes
   * this element a stacking context, so all of that is sealed inside one
   * layer that takes its turn in normal document order. Fixing it here rather
   * than raising the site's menu keeps the plugin from dictating the theme's
   * z-index scale.
   */
  isolation: isolate;
  border-radius: 20px;
  overflow: hidden;
  background: #E4E7E3;
  min-height: 460px;
}
.emovr-dealers .ed-map { position: absolute; inset: 0; }
.emovr-dealers .ed-legend {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 500;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding: 11px 15px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 22px rgba(10, 14, 10, 0.14);
}
.emovr-dealers .ed-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
}
.ed-pin {
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, .3);
}

/* ---------- plugin addition: marker popup ----------
   The popup holds a clone of the card, so it only needs the chrome around it
   flattening: Leaflet's own padding and radius would sit on top of the card's. */
.emovr-dealers .ed-popup .leaflet-popup-content-wrapper {
  padding: 0;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(10, 14, 10, 0.22);
}
.emovr-dealers .ed-popup .leaflet-popup-content {
  /* Only the margin is ours. Leaflet measures this element and writes an
     explicit width onto it, clamped to the popup's minWidth/maxWidth, so
     overriding that width collapses the popup. */
  margin: 0;
}
.emovr-dealers .ed-popup .ed-card {
  border-radius: 0;
  padding: 20px;
  height: 100%;
}
.emovr-dealers .ed-popup .ed-card-distance:not([hidden]) { display: block; }
.emovr-dealers .ed-popup a { color: inherit; }
.emovr-dealers .ed-popup .leaflet-popup-tip { box-shadow: none; }

/* ---------- lijstweergave ---------- */
.emovr-dealers .ed-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.emovr-dealers .ed-card {
  background: var(--ed-card);
  border-radius: 16px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--ed-accent);
}
.emovr-dealers .ed-card-country {
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--ed-muted);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.emovr-dealers .ed-card-name {
  font-family: Archivo, Helvetica, Arial, sans-serif;
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 6px;
}
.emovr-dealers .ed-card-type {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 10px;
}
.emovr-dealers .ed-card-type .ed-dot { width: 8px; height: 8px; }
.emovr-dealers .ed-card-address {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ed-body);
  margin: 0 0 12px;
}
.emovr-dealers .ed-card-links {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: flex-start;
}
.emovr-dealers .ed-card-mail,
.emovr-dealers .ed-card-site {
  font-size: 13px;
  font-weight: 700;
  color: var(--ed-dark);
  text-decoration: none;
  word-break: break-word;
}
.emovr-dealers .ed-card-site { color: var(--ed-accent); }
.emovr-dealers .ed-card-mail:hover,
.emovr-dealers .ed-card-site:hover { color: var(--ed-accent); text-decoration: underline; }

/* plugin addition: distance, shown once a search has an origin */
.emovr-dealers .ed-card-distance {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ed-accent);
  margin: 0 0 10px;
}

.emovr-dealers .ed-empty {
  grid-column: 1 / -1;
  background: var(--ed-card);
  border-radius: 16px;
  padding: 28px;
  font-size: 14.5px;
  color: var(--ed-body);
}

/* ---------- mobiel ---------- */
@media (max-width: 720px) {
  .emovr-dealers { padding-left: 16px; padding-right: 16px; }
  .emovr-dealers .ed-panel { flex: 1 1 100%; }
  .emovr-dealers .ed-mapwrap { min-height: 380px; }
}