/* ==========================================================================
   Carte OpenStreetMap intégrée.

   Les mêmes règles partout : site du client, application du livreur, caisse.
   Le style ne connaît que les jetons de la charte, donc la carte prend
   automatiquement les couleurs du restaurant.
   ========================================================================== */

.kmap {
  position: relative;
  overflow: hidden;
  background: #e8e2d8;              /* le beige d'OSM, le temps du chargement */
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  cursor: grab;
  touch-action: none;               /* le doigt déplace la carte, pas la page */
  -webkit-user-select: none; user-select: none;
}
.kmap.is-drag { cursor: grabbing; }

.kmap__pane { position: absolute; inset: 0; }

.kmap__tile {
  position: absolute;
  width: 256px; height: 256px;
  max-width: none;                  /* une tuile n'est pas une illustration */
  pointer-events: none;
  -webkit-user-drag: none;
}

.kmap__route { position: absolute; inset: 0; width: 100%; height: 100%;
               pointer-events: none; }
.kmap__halo { fill: none; stroke: #fff; stroke-width: 7;
              stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
/* LE CHEMIN DEJA PARCOURU : pointille et efface, pour qu'il se lise
   comme un souvenir et non comme la route a suivre. Sans distinction,
   les deux traces se confondaient et la carte devenait illisible des que
   le livreur avait tourne deux fois. */
.kmap__path--fait {
  stroke: var(--accent); stroke-width: 3;
  opacity: .32; stroke-dasharray: 6 7;
}

.kmap__path { fill: none; stroke: var(--accent); stroke-width: 4;
              stroke-linecap: round; stroke-linejoin: round; }

/* =============================================================== Repères */

.kmap__marks { position: absolute; inset: 0; pointer-events: none; }

.kmark {
  position: absolute;
  display: flex; flex-direction: column; align-items: center;
  transform: translate(-50%, -100%);
}
.kmark__pin {
  display: flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem;
  color: #fff; background: var(--accent);
  border: 2px solid #fff; border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  box-shadow: var(--shadow-2);
}
.kmark__pin svg { width: 1.0625rem; height: 1.0625rem; transform: rotate(45deg); }
.kmark--driver .kmark__pin { background: var(--success); }
.kmark--shop .kmark__pin { background: var(--text); }

.kmark__tag {
  margin-top: .1875rem;
  padding: .0625rem .375rem;
  font-size: .6875rem; font-weight: 700; white-space: nowrap;
  color: var(--text); background: rgba(255, 255, 255, .92);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-1);
}

/* =============================================================== Boutons */

.kmap__zoom {
  position: absolute; right: .5rem; top: .5rem;
  display: flex; flex-direction: column;
  border-radius: var(--r-sm); overflow: hidden;
  box-shadow: var(--shadow-2);
}
.kmap__zoom button {
  width: 2.125rem; height: 2.125rem;
  font-size: 1.125rem; font-weight: 600; line-height: 1;
  color: var(--text); background: #fff;
  border: 0; cursor: pointer;
}
.kmap__zoom button + button { border-top: 1px solid var(--border); }
.kmap__zoom button:active { background: var(--surface-2); }

.kmap__here {
  position: absolute; right: .5rem; bottom: 1.75rem;
  display: flex; align-items: center; justify-content: center;
  width: 2.125rem; height: 2.125rem;
  color: var(--text); background: #fff;
  border: 0; border-radius: var(--r-sm); cursor: pointer;
  box-shadow: var(--shadow-2);
}
.kmap__here svg { width: 1.0625rem; height: 1.0625rem; }

.kmap__credit {
  position: absolute; left: 0; bottom: 0;
  padding: .0625rem .375rem;
  font-size: .625rem; color: #33404f; text-decoration: none;
  background: rgba(255, 255, 255, .82);
  border-top-right-radius: var(--r-sm);
}