/* ==========================================================================
   Location picker
   --------------------------------------------------------------------------
   The search box, map and pin from partials/location-picker, in one sheet
   pushed by the partial itself.

   It used to live in app.css, which is the storefront's sheet. The supplier
   panel loads the admin sheet instead, so when the panel started asking for
   the same address as the application form it got the markup with none of
   the styling: a map canvas with no height, which Leaflet duly measured at
   zero pixels and drew nothing into. One picker, one stylesheet, wherever it
   is included.

   The structure below is written against the storefront's tokens with the
   panel's as the fallback, so the same rules resolve under either sheet.
   ========================================================================== */

.bi-map { margin-top: 22px; }
.bi-map__head { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.bi-map__head > div { flex: 1; min-width: 200px; }

.bi-map__canvas {
  height: 300px; width: 100%;
  border: 1px solid var(--color-divider, var(--adm-line, #e3e8e4));
  background: var(--color-surface, var(--adm-sunken, #fafbfa));
  z-index: 0; /* keep Leaflet panes under the header dropdowns */
}

.bi-map__readout {
  margin: 8px 0 0; font-size: 12.5px; color: var(--ink-2, var(--adm-ink-2, #566058));
  font-variant-numeric: tabular-nums; direction: ltr;
}

/* "Finding the address for this spot…", or that it could not be read. */
.bi-map__status { margin: 4px 0 0; font-size: 12.5px; color: var(--ink-2, var(--adm-ink-2, #566058)); }

/* --- Map search ---------------------------------------------------------- */
.bi-mapsearch { position: relative; margin-bottom: 10px; }

.bi-mapsearch__icon {
  position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
  color: var(--ink-2, var(--adm-ink-2, #566058)); pointer-events: none; display: grid;
}

.bi-mapsearch__input { padding-inline-start: 38px; padding-inline-end: 38px; }
.bi-mapsearch__input::-webkit-search-cancel-button { display: none; }

.bi-mapsearch__clear {
  position: absolute; inset-inline-end: 8px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 0; background: none; cursor: pointer; color: var(--ink-2, var(--adm-ink-2, #566058));
}
.bi-mapsearch__clear:hover { color: var(--color-text, var(--adm-ink, #17211b)); }

.bi-mapsearch__results {
  position: absolute; inset-inline: 0; top: calc(100% + 4px); z-index: 20;
  margin: 0; padding: 4px; list-style: none; max-height: 260px; overflow-y: auto;
  background: var(--color-bg, var(--adm-surface, #fff));
  border: 1px solid var(--color-divider, var(--adm-line, #e3e8e4));
  box-shadow: 0 10px 26px rgba(23, 33, 27, .14);
}
.bi-mapsearch__results[hidden] { display: none; }

.bi-mapsearch__result { padding: 9px 11px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.bi-mapsearch__result:hover, .bi-mapsearch__result:focus-visible {
  background: var(--color-accent-100, var(--adm-accent-soft, #eaf7ef));
  color: var(--color-accent-800, var(--adm-accent-deep, #165b3a));
  outline: none;
}
.bi-mapsearch__empty { padding: 11px; font-size: 13.5px; color: var(--ink-2, var(--adm-ink-2, #566058)); }

/* What the map has to say about the City menu: it could not place the pin in
   a city we offer, or it has just travelled to the chosen city and wants a
   pin. Written under the field by the picker, in both forms. */
.bi-geohint {
  margin: 5px 0 0; font-size: 12.5px; line-height: 1.45;
  color: var(--ink-2, var(--adm-ink-2, #566058));
}

/* --------------------------------------------------------------------------
   The same picker, dressed for a panel.

   Its label, hint, button and search box are storefront classes, and the
   panels do not carry them. Scoped to .adm — the body class both panels set
   and the storefront never does — so dressing the panel's copy cannot touch
   the shop's.
   -------------------------------------------------------------------------- */
.adm .bi-map { margin-top: 4px; }

.adm .bi-map .bi-label {
  font-size: 13px; font-weight: 600; color: var(--adm-ink);
}

.adm .bi-map .bi-meta { font-size: 13px; color: var(--adm-ink-2); }

.adm .bi-map .bi-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 13px; font: inherit; font-size: 13px; font-weight: 500;
  color: var(--adm-ink); cursor: pointer;
  background: var(--adm-surface);
  border: 1px solid var(--adm-line-strong); border-radius: var(--adm-radius-sm);
}
.adm .bi-map .bi-btn:hover { background: var(--adm-sunken); border-color: var(--adm-ink-3); }
.adm .bi-map .bi-btn:focus-visible { outline: 2px solid var(--adm-accent); outline-offset: 2px; }

.adm .bi-map .bi-input {
  width: 100%; padding: 10px 12px; font: inherit; font-size: 14px;
  color: var(--adm-ink); background: var(--adm-surface);
  border: 1px solid var(--adm-line-strong); border-radius: var(--adm-radius-sm);
}
.adm .bi-map .bi-input:focus {
  outline: none; border-color: var(--adm-accent);
  box-shadow: 0 0 0 3px var(--adm-accent-soft);
}

/* The rule above is the panel dressing every input in the picker, and it was
   also flattening the room the search box leaves for its magnifier and its
   clear button — so the typed place name ran underneath the icon. Put the
   two gutters back, after it. */
.adm .bi-map .bi-mapsearch__input {
  padding-inline-start: 38px;
  padding-inline-end: 38px;
}

.adm .bi-map__canvas { border-radius: var(--adm-radius); }