/* =========================================================================
   Distributor finder (Figma "Trouver un distributeur", 1139:8720)
   Loaded with the tool only (library syngenta_theme/dealer-map).
   ========================================================================= */
.dealers__search { padding-block: 88px; background: #f6f8f7; }
.dealers__search .eyebrow {
  margin-bottom: 24px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.dealers__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.dealers__title {
  margin: 0 0 10px;
  max-width: 820px;
  font-size: clamp(1.9rem, 3.4vw, 2.625rem);
  font-weight: 600;
  line-height: 1.24;
  color: #1f261c;
}
.dealers__intro { max-width: 760px; font-size: 1rem; line-height: 26px; color: #616e78; }
.dealers__count {
  flex: none;
  width: 220px;
  margin: 0;
  padding: 14px 20px;
  border-radius: var(--r-md);
  background: #f0f7f2;
}
.dealers__count-value {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 34px;
  color: #0e611f;
}
.dealers__count-label { font-size: 0.75rem; line-height: 18px; color: #616e78; }

/* Search panel. */
.dealers__panel {
  padding: 28px;
  border: 1px solid #d6e0db;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 12px 30px -10px rgba(13, 31, 13, 0.08);
}
.dealers__panel .views-exposed-form { margin: 0; }
/* Row 1: search, "use my position", submit. Row 2: the dropdowns, the
   filters in use and the reset link. */
.dealers__panel .filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 244px 212px;
  gap: 18px 14px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
.dealers__panel .filters__search { flex: none; grid-column: 1 / 2; grid-row: 1; }
.dealers__panel .filters__search input {
  height: 64px;
  padding-inline-start: 54px;
  border-radius: 13px;
  background-color: #fff;
  background-position: 20px center;
  background-size: 22px;
  font-size: 0.94rem;
}
.dealers__panel .filters__cluster {
  grid-column: 1 / -1;
  grid-row: 2;
  flex-wrap: nowrap;
  gap: 14px;
  min-height: 64px;
  padding: 0;
  background: none;
}
/* Each dropdown carries its name above the value (Figma "Filtre — Activité"). */
.dealers__panel .filters__cluster .form-item { position: relative; flex: 0 1 360px; min-width: 0; }
.dealers__panel .filters__cluster .form-item-region { flex-basis: 330px; }
.dealers__panel .filters__cluster label {
  display: block;
  position: absolute;
  top: 8px;
  inset-inline-start: 18px;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 16px;
  color: #616e78;
  pointer-events: none;
}
.dealers__panel .filters__cluster select {
  width: 100%;
  height: 56px;
  padding-block: 16px 0; padding-inline: 18px 44px;
  border-color: #d6e0db;
  border-radius: 12px;
  background-position: right 16px center;
  background-size: 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f261c;
}
/* A filter in use, removable (Figma "Filtre actif"). */
.dealers__chip {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 14px;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: #f0f7f2;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 18px;
  color: #0e611f;
}
.dealers__chip:hover { text-decoration: none; background: #e2efe6; }
.dealers__chip-remove { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; }
.dealers__reset {
  flex: none;
  margin-inline-start: auto;
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 20px;
  color: #006e7d;
}
/* The submit is the design's orange "Rechercher" button. */
.js .dealers__panel .filters__actions { display: flex; grid-column: 3 / 4; grid-row: 1; }
.dealers__panel .filters__actions .form-actions { width: 100%; }
.dealers__panel .filters__actions input[type="submit"] {
  width: 100%;
  min-height: 64px;
  padding-block: 0; padding-inline: 54px 24px;
  border-radius: 13px;
  background: var(--syn-orange) url("../../images/icon-meteo-search.svg") calc(50% - 44px) center / 20px no-repeat;
  font-family: var(--font-heading);
  font-size: 0.875rem;
}
.dealers__panel .filters__actions input[type="submit"]:hover { background-color: var(--syn-orange-600); }
/* The reset is the link on the filter row; the button stays for no-JS. */
.js .dealers__panel .filters__actions [id*="edit-reset"] { display: none; }

.dealers__locate {
  grid-column: 2 / 3;
  grid-row: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 64px;
  padding: 0 18px;
  border: 1px solid #d6e0db;
  border-radius: 13px;
  background: #f0f7f2;
  font: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: #0e611f;
  cursor: pointer;
}
.dealers__locate:hover { border-color: #0e611f; }
.dealers__locate[disabled] { opacity: 0.6; cursor: progress; }
.dealers__locate-icon {
  flex: none;
  width: 20px; height: 20px;
  background: url("../../images/icon-pin-outline.svg") center / contain no-repeat;
}

/* Results: the list beside the map. */
.dealers__results { padding-block: 88px; background: #fff; }
.dealers__results .eyebrow {
  margin-bottom: 8px;
  font-family: var(--font-heading);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0;
}
.dealers__results-title {
  margin: 0 0 8px;
  font-size: clamp(1.75rem, 3vw, 2.375rem);
  font-weight: 600;
  line-height: 1.26;
  color: #1f261c;
}
.dealers__results-intro { margin: 0 0 32px; font-size: 0.94rem; line-height: 24px; color: #616e78; }
.dealers__workspace {
  display: grid;
  grid-template-columns: minmax(0, 470px) minmax(0, 706px);
  justify-content: space-between;
  gap: 24px;
  align-items: start;
}
.dealers__list .views-element-container > div { display: flex; flex-direction: column; gap: 14px; }
.dealers__map {
  position: sticky;
  top: 24px;
  height: 880px;
  border: 1px solid #d6e0db;
  border-radius: 22px;
  overflow: hidden;
  background: #eef2f0;
}
.dealers__canvas { height: 100%; }
/* Panels floating over the map (Figma "Info carte", "Contrôles carte",
   "Localiser"). */
.dealers__map-info {
  position: absolute;
  z-index: 500;
  top: 23px;
  inset-inline-start: 23px;
  width: 236px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 8px 20px -8px rgba(13, 31, 13, 0.12);
  pointer-events: none;
}
.dealers__map-title {
  margin: 0 0 5px;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 600;
  line-height: 22px;
  color: #1f261c;
}
.dealers__map-meta { margin: 0; font-size: 0.6875rem; line-height: 17px; color: #616e78; }
.dealers__map-locate {
  position: absolute;
  z-index: 500;
  bottom: 23px;
  inset-inline-start: 23px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding-block: 0; padding-inline: 22px 28px;
  border: 0;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow: 0 8px 18px -8px rgba(13, 31, 13, 0.12);
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  color: #0e611f;
  cursor: pointer;
}
.dealers__map-locate .dealers__locate-icon { width: 18px; height: 18px; }
.dealers__map-locate[disabled] { opacity: 0.6; cursor: progress; }
.dealers__map .leaflet-top.leaflet-right { top: 13px; inset-inline-end: 13px; }
.dealers__map .leaflet-control-zoom {
  overflow: hidden;
  border: 0;
  border-radius: 12px;
  box-shadow: 0 8px 18px -8px rgba(13, 31, 13, 0.12);
}
.dealers__map .leaflet-control-zoom a {
  width: 44px;
  height: 44px;
  border: 0;
  background: rgba(255, 255, 255, 0.96);
  font-family: var(--font-heading);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 44px;
  color: #1f261c;
}
.dealers__map-fallback {
  display: grid;
  place-items: center;
  height: 100%;
  margin: 0;
  font-size: 0.875rem;
  color: var(--syn-gray-500);
}
.dealers__canvas.is-unavailable .dealers__map-fallback::after {
  content: " " attr(data-error);
}
.leaflet-container { height: 100%; font: inherit; }
/* Marker: the same pin as the "Utiliser ma position" icon, filled so it
   reads on the map; dealer-map.js inlines the SVG. */
.dealer-pin { color: #17631f; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3)); }
.dealer-pin svg { display: block; width: 100%; height: 100%; transition: color 0.2s ease; }
.dealer-pin.is-active { color: var(--syn-orange); }

/* Distributor card. */
.dealer {
  display: flex;
  flex-direction: column;
  gap: 11px;
  min-height: 232px;
  padding: 20px 20px 18px;
  border: 1px solid #d6e0db;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
/* The selected card is tinted with an orange rule (Figma "AFROSEEDS"). */
.dealer:hover,
.dealer.is-active { border-color: var(--syn-orange); }
.dealer.is-selected {
  padding: 19.5px 19.5px 17.5px;
  border: 1.5px solid var(--syn-orange);
  background: #f0f7f2;
  box-shadow: 0 10px 24px -10px rgba(13, 31, 13, 0.08);
}
.dealer__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.dealer__name {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 28px;
  color: #1f261c;
}
.dealer__region {
  flex: none;
  min-width: 116px;
  padding: 7px 12px;
  border-radius: 15px;
  background: #f0f7f2;
  font-size: 0.6875rem;
  line-height: 16px;
  text-align: center;
  font-weight: 600;
  color: #0e611f;
}
.dealer__activity,
.dealer__address {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0;
  color: #616e78;
}
.dealer__activity { align-items: center; font-size: 0.75rem; font-weight: 600; line-height: 18px; }
.dealer.is-selected .dealer__region { background: #fff; }
.dealer__dot { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--syn-orange); }
.dealer__address { min-height: 44px; font-size: 0.8125rem; line-height: 20px; }
.dealer__pin {
  flex: none;
  width: 17px; height: 17px;
  background: #616e78;
  -webkit-mask: var(--icon-pin) center / contain no-repeat;
  mask: var(--icon-pin) center / contain no-repeat;
}
.dealer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
.dealer__phone,
.dealer__email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 0 16px;
  border-radius: 11px;
  font-size: 0.75rem;
  font-weight: 600;
}
.dealer__phone { min-width: 164px; background: #0e611f; color: #fff; }
.dealer__phone:hover { background: #0a4a17; color: #fff; text-decoration: none; }
.dealer__email { min-width: 98px; border: 1px solid #d6e0db; background: #fff; color: #0e611f; }
.dealer__email:hover { text-decoration: none; border-color: #0e611f; }
.dealer__site {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-start: auto;
  font-size: 0.6875rem;
  font-weight: 600;
  color: #006e7d;
}
.dealer__site:hover { text-decoration: none; }
.dealer__site .card__arrow { width: 14px; height: 14px; background: #006e7d; }

/* "Résultats au Maroc" and the proximity sort, above the cards. */
.dealers__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 58px;
  margin-bottom: 14px;
  padding-inline: 2px;
}
.dealers__summary-title { margin: 0; font-size: 1.125rem; font-weight: 600; line-height: 26px; color: #1f261c; }
.dealers__sort {
  display: inline-flex;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 20px;
  color: #0e611f;
  cursor: pointer;
}
.dealers__sort:hover { text-decoration: underline; }
.dealers__sort[disabled] { opacity: 0.6; cursor: progress; }

/* Pagination under the list: round page numbers, ‹ › arrows, no first/last
   (Figma "Pagination"). */
.dealers__list .pager__items { align-items: center; justify-content: center; gap: 10px; margin-top: 14px; }
.dealers__list .pager__item--first,
.dealers__list .pager__item--last,
.dealers__list .pager__item--ellipsis { display: none; }
.dealers__list .pager__item a {
  min-width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  font-size: 0.75rem;
  font-weight: 600;
  color: #616e78;
}
.dealers__list .pager__item a:hover { background: #f0f7f2; color: #0e611f; }
.dealers__list .pager__item.is-active a { background: var(--syn-orange); color: #fff; }
.dealers__list .pager__item--previous a,
.dealers__list .pager__item--next a {
  min-width: 32px;
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 500;
}

/* Medium screens: the search row and the list beside the map hold, the
   buttons and columns just narrow. */
@media (max-width: 1024px) {
  .dealers__workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
  .dealers__panel .filters { grid-template-columns: minmax(0, 1fr) auto auto; }
  .dealers__locate { padding: 0 20px; }
  .dealers__panel .filters__actions input[type="submit"] { width: auto; min-width: 170px; }
  .dealers__panel .filters__cluster { flex-wrap: wrap; }
  /* The dropdowns share the row and fill it; below ~520px each takes it whole. */
  .dealers__panel .filters__cluster .form-item,
.dealers__panel .filters__cluster .form-item-region { flex: 1 1 240px; }
  .dealer__actions { gap: 8px; }
  .dealer__phone { min-width: 0; flex: 1 1 auto; }
}
/* Narrower: "Rechercher" drops under the search and position buttons. */
@media (max-width: 860px) {
  .dealers__panel .filters { grid-template-columns: minmax(0, 1fr) auto; }
  .js .dealers__panel .filters__actions { grid-column: 1 / -1; grid-row: 3; }
  .dealers__panel .filters__actions input[type="submit"] { width: 100%; }
  .dealer__site { margin-inline-start: 0; }
}
@media (max-width: 720px) {
  /* Phones: one column throughout, the map under the list. */
  .dealers__workspace { grid-template-columns: minmax(0, 1fr); }
  .dealers__map { position: relative; top: 0; height: 460px; }
  .dealers__panel .filters { grid-template-columns: minmax(0, 1fr); }
  .dealers__panel .filters__search,
.dealers__panel .filters__cluster,
.dealers__panel .dealers__locate,
.js .dealers__panel .filters__actions {
    grid-column: 1 / -1;
    grid-row: auto;
  }
  .dealer__phone { flex: none; }
  .dealers__search,
.dealers__results { padding-block: 48px; }
  .dealers__panel { padding: 18px; }
  .dealers__count { width: 100%; }
  .dealers__panel .filters__cluster { flex-direction: column; align-items: stretch; }
  .dealers__panel .filters__cluster .form-item { flex-basis: auto; }
  .dealers__panel .filters__cluster select { width: 100%; min-width: 0; }
  .dealers__chip { align-self: flex-start; }
  .dealers__reset { margin-inline-start: 0; }
  .dealers__map-info { width: auto; inset-inline-end: 80px; }
  .dealer__site { margin-inline-start: 0; }
}