/* Le module n'a pas de charte : il emprunte celle du site.
   Chaque token suit la même chaîne — variable Bootstrap du thème (les thèmes
   PrestaShop en exposent), puis token de thème usuel, puis une valeur neutre en
   dernier recours. Un site qui redéfinit `--bs-primary` repeint donc la carte et
   les filtres sans toucher au module. */
:root {
  --mintyreseller-color-primary: var(--bs-primary, var(--color-primary, #3b6ea5));
  --mintyreseller-color-text: var(--bs-body-color, var(--color-text, #1e293b));
  --mintyreseller-color-muted: var(--bs-secondary-color, var(--color-text-muted, #64748b));
  --mintyreseller-color-border: var(--bs-border-color, var(--color-border, #e2e8f0));
  --mintyreseller-color-bg: var(--bs-body-bg, var(--color-surface, #ffffff));
  --mintyreseller-color-surface-muted: var(--bs-tertiary-bg, var(--color-surface-muted, #f3f4f6));
  --mintyreseller-radius: var(--bs-border-radius, var(--border-radius-base, 0.5rem));

  /* Pastilles de la carte : la couleur du site par défaut, surchargeables seules
     si une marque veut des points d'une autre teinte que ses boutons. */
  --mintyreseller-color-marker: var(--mintyreseller-color-primary);
  --mintyreseller-color-marker-ring: var(--mintyreseller-color-bg);
  --mintyreseller-color-user: var(--bs-secondary, var(--color-secondary, #334155));

  --mintyreseller-spacing-sm: 0.5rem;
  --mintyreseller-spacing-md: 1rem;
  --mintyreseller-spacing-lg: 1.5rem;
  --mintyreseller-spacing-xl: var(--spacing-xl, 3rem);
  /* Hauteur commune au <select> natif et au contrôle Tom Select qui le remplace :
     posée sur les deux, elles restent égales quoi que fasse la feuille livrée. */
  --mintyreseller-control-height: 2.375rem;
  --mintyreseller-list-height: 520px;
  --mintyreseller-breakpoint-md: 768px;
}

.mintyreseller {
  color: var(--mintyreseller-color-text);
}

/* Respiration par défaut, à spécificité NULLE : les marges réglées dans l'éditeur
   PrettyBlocks (portées par le wrapper [data-block]) reprennent la main dès
   qu'elles sont posées. Sans ça, la page colle au header et au footer. */
:where([data-block]:has(> .mintyreseller)) {
  padding-block: var(--mintyreseller-spacing-xl);
}

.mintyreseller__inner {
  display: flex;
  flex-direction: column;
  gap: var(--mintyreseller-spacing-lg);
}

.mintyreseller__header {
  text-align: center;
}

/* Sur-titre. Il portait `minty-section-eyebrow`, une classe du THÈME d'un autre
   projet : hors de ce thème, rien ne le stylait et il s'affichait à la taille du
   h1, collé au titre. Style à nous, tokens du site. */
.mintyreseller__eyebrow {
  margin: 0 0 var(--mintyreseller-spacing-sm);
  color: var(--mintyreseller-color-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* La taille du titre reste celle du h1 du thème : c'est sa page. */
.mintyreseller__title {
  margin: 0;
}

.mintyreseller__description {
  color: var(--mintyreseller-color-muted);
  margin: var(--mintyreseller-spacing-sm) 0 0;
}

.mintyreseller__filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mintyreseller-spacing-md);
  align-items: flex-end;
}

.mintyreseller__filter {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1 1 180px;
}

.mintyreseller__filter label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--mintyreseller-color-muted);
}

/* Les quatre contrôles doivent faire exactement la même boîte, avant comme après
   l'enrichissement par Tom Select (`.ts-control` : width 100%, padding .375rem
   .75rem, texte du corps). Sans ça le <select> natif fait sa largeur de contenu —
   mesuré 148 px contre 421 px une fois enrichi.

   Tout est posé EXPLICITEMENT — hauteur, interlignage, police, marge, habillage —
   parce que les navigateurs n'accordent pas la même boîte native à un <select> et à
   un <input type=search> : WebKit en particulier leur donne police et hauteur
   intrinsèques différentes. Ne rien laisser d'implicite est la seule façon d'obtenir
   le même rendu partout. */
.mintyreseller__filter select,
.mintyreseller__filter input[type='search'] {
  box-sizing: border-box;
  width: 100%;
  height: var(--mintyreseller-control-height);
  margin: 0;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--mintyreseller-color-border);
  border-radius: var(--mintyreseller-radius);
  background: var(--mintyreseller-color-bg);
  color: var(--mintyreseller-color-text);
  font: inherit;
  line-height: 1.5;
}

/* WebKit habille `type=search` en pilule et lui ajoute des décorations internes qui
   modifient la boîte. On retire les deux : le champ redevient une boîte ordinaire,
   identique aux listes. Le bouton d'effacement natif est conservé — il rend le même
   service que la croix de Tom Select sur les listes. */
.mintyreseller__filter input[type='search'] {
  -webkit-appearance: none;
  appearance: none;
}

.mintyreseller__filter input[type='search']::-webkit-search-decoration,
.mintyreseller__filter input[type='search']::-webkit-search-results-button,
.mintyreseller__filter input[type='search']::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.mintyreseller__filter select:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Tom Select : le rendu vient de la feuille livrée (thème `bootstrap5`), parce que
   les thèmes PrestaShop — classic, hummingbird et leurs enfants — sont bâtis sur
   Bootstrap 5 : les listes tombent alors exactement sur les champs du site.

   Ce qui suit n'est PAS une refonte de son style : ce sont les endroits où elle lit
   une variable `--bs-*` sans repli, et qui restent donc nus sur un thème sans
   Bootstrap (bordures, fond de la liste, option survolée, état désactivé). Nos tokens
   ont déjà la chaîne `--bs-* → token de thème → valeur neutre`, il suffit de les poser.

   ⚠️ Sélecteurs préfixés `.mintyreseller` À DESSEIN, et l'état de base AVANT l'état de
   focus : la feuille de la bibliothèque est injectée par le composant, donc après celle
   du module — à spécificité égale c'est elle qui gagnerait, et un raccourci `border`
   placé après reprendrait la bordure de focus. */
.mintyreseller__filter mintyreseller-select {
  display: block;
}

.mintyreseller .mintyreseller__filter .ts-control {
  min-height: var(--mintyreseller-control-height);
  font: inherit;
  line-height: 1.5;
  border: 1px solid var(--mintyreseller-color-border);
  border-radius: var(--mintyreseller-radius);
  background: var(--mintyreseller-color-bg);
  color: var(--mintyreseller-color-text);
}

.mintyreseller .mintyreseller__filter .ts-control input::placeholder {
  color: var(--mintyreseller-color-muted);
}

.mintyreseller .mintyreseller__filter.disabled .ts-control,
.mintyreseller .mintyreseller__filter .disabled .ts-control {
  background: var(--mintyreseller-color-surface-muted);
}

.mintyreseller .mintyreseller__filter .ts-dropdown {
  border: 1px solid var(--mintyreseller-color-border);
  background: var(--mintyreseller-color-bg);
  color: var(--mintyreseller-color-text);
  /* Au-dessus des calques Leaflet (panes jusqu'à 800, contrôles à 1000) : sinon la
     liste s'ouvre DERRIÈRE la carte. */
  z-index: 1100;
}

/* L'option survolée ou atteinte au clavier : sans Bootstrap elle n'avait aucun fond,
   c'est-à-dire aucun repère de sélection. */
.mintyreseller .mintyreseller__filter .ts-dropdown .active {
  background: var(--mintyreseller-color-surface-muted);
  color: var(--mintyreseller-color-text);
}

/* Focus — la feuille `bootstrap5` code EN DUR le bleu de Bootstrap (#86b7fe et
   rgba(13,110,253,.25)) au lieu de lire une variable : sur un site à la charte noire,
   le champ se cerclait de bleu. On reprend l'anneau du thème hôte, puis sa couleur
   d'anneau, puis notre primaire diluée. Les deux états sont visés : la bibliothèque
   remet la bordure à plat dès que la liste s'ouvre (`.focus.dropdown-active`). */
.mintyreseller .mintyreseller__filter .focus .ts-control,
.mintyreseller .mintyreseller__filter .focus.dropdown-active .ts-control,
.mintyreseller .mintyreseller__filter .focus .ts-dropdown .dropdown-input {
  border-color: var(--input-focus-border-color, var(--mintyreseller-color-primary));
  box-shadow: var(
    --input-focus-ring,
    0 0 0 0.25rem var(--bs-focus-ring-color, color-mix(in srgb, var(--mintyreseller-color-primary) 20%, transparent))
  );
}

/* L'anneau natif du navigateur sur l'input interne ferait doublon avec celui du contrôle. */
.mintyreseller .mintyreseller__filter .ts-control input:focus {
  outline: none;
  box-shadow: none;
}

/* Champs natifs (repli sans JS, et <select> avant enrichissement). */
.mintyreseller__filter input[type='search']:focus,
.mintyreseller__filter select:focus {
  border-color: var(--mintyreseller-color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--mintyreseller-color-primary) 20%, transparent);
  outline: none;
}

/* « Aucun point de vente au 69000. Voici les plus proches. » */
.mintyreseller__notice {
  margin: 0;
  color: var(--mintyreseller-color-muted);
}

.mintyreseller__layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--mintyreseller-spacing-lg);
}

@media (min-width: 768px) {
  .mintyreseller__layout {
    grid-template-columns: 2fr 1fr;
  }
}

.mintyreseller__map {
  width: 100%;
  min-height: 320px;
  border-radius: var(--mintyreseller-radius);
  overflow: hidden;
}

/* Avant que Leaflet ne prenne la main, le conteneur est un rectangle blanc : la
   hauteur est bien réservée, mais rien ne dit qu'une carte arrive. Le fond et le
   libellé disparaissent d'eux-mêmes quand Leaflet pose sa classe sur le conteneur
   — aucun JS à écrire, et ça couvre aussi l'attente du chargement différé.
   Le libellé vient d'un attribut pour rester traduisible. */
.mintyreseller__map:not(.leaflet-container) {
  display: grid;
  place-items: center;
  background: var(--mintyreseller-color-surface-muted);
}

.mintyreseller__map:not(.leaflet-container)::after {
  content: attr(data-loading-label);
  color: var(--mintyreseller-color-muted);
  font-size: 0.875rem;
}

.mintyreseller__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--mintyreseller-spacing-sm);
  max-height: var(--mintyreseller-list-height);
  overflow-y: auto;

  /* Ascenseur à la couleur du site : les tokens héritent de la charte de la
     boutique, donc chaque marque a le sien sans une ligne de plus.
     `scrollbar-color` couvre Firefox et Chrome 121+, les ::-webkit-* le reste. */
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--mintyreseller-color-primary) 45%, transparent) transparent;
}

.mintyreseller__list::-webkit-scrollbar {
  width: 8px;
}

.mintyreseller__list::-webkit-scrollbar-track {
  background: transparent;
}

.mintyreseller__list::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: color-mix(in srgb, var(--mintyreseller-color-primary) 45%, transparent);
}

.mintyreseller__list::-webkit-scrollbar-thumb:hover {
  background: var(--mintyreseller-color-primary);
}

.mintyreseller__item {
  position: relative;
  border: 1px solid var(--mintyreseller-color-border);
  border-radius: var(--mintyreseller-radius);
  padding: var(--mintyreseller-spacing-md);
  background: var(--mintyreseller-color-bg);
  cursor: pointer;
  transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}

.mintyreseller__item:hover,
.mintyreseller__item:focus-within {
  border-color: var(--mintyreseller-color-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.mintyreseller__name {
  font-weight: 600;
  margin: 0 0 var(--mintyreseller-spacing-sm);
}

.mintyreseller__item:has(.mintyreseller__distance) .mintyreseller__name {
  padding-right: 5rem;
}

.mintyreseller__addr {
  color: var(--mintyreseller-color-muted);
  font-size: 0.875rem;
  margin: 0 0 var(--mintyreseller-spacing-sm);
}

.mintyreseller__contact {
  display: flex;
  gap: var(--mintyreseller-spacing-md);
  font-size: 0.875rem;
}

/* Hors flux, dans le coin de la carte : ajoutée par le JS après le rendu, elle
   ne doit rien pousser. Mesuré en flux : +36 px sur chacune des 753 cartes. */
.mintyreseller__distance {
  position: absolute;
  top: var(--mintyreseller-spacing-md);
  right: var(--mintyreseller-spacing-md);
  padding: 0.125rem 0.5rem;
  border-radius: 999px;
  background: var(--mintyreseller-color-primary);
  /* Le texte de la pastille suit la couleur « sur primaire » du thème quand elle
     existe ; blanc sinon, qui convient à la grande majorité des primaires. */
  color: var(--bs-primary-color, var(--color-on-primary, #fff));
  font-size: 0.75rem;
  font-weight: 600;
}

.mintyreseller__website,
.mintyreseller__phone {
  color: var(--mintyreseller-color-primary);
  text-decoration: none;
}

.mintyreseller__empty {
  text-align: center;
  color: var(--mintyreseller-color-muted);
}

.mintyreseller-popup strong {
  display: block;
  margin-bottom: 0.25rem;
}

.mintyreseller-popup p {
  margin: 0 0 0.25rem;
  color: var(--mintyreseller-color-muted);
  font-size: 0.8125rem;
}

.mintyreseller-popup a {
  display: inline-block;
  margin-right: 0.5rem;
  color: var(--mintyreseller-color-primary);
  text-decoration: none;
}