/* MLR Menu Core — baseline styles for [mlr_location_finder].
 * White-label: the accent colour is the CSS variable --mlr-accent (set it in your
 * theme / Elementor to the brand colour). Everything else is neutral and easy to
 * override. Loaded site-wide so it is present wherever the gate popup renders.
 * Class map: .mlr-location-finder > .mlr-location-search, .mlr-detect,
 * ul.mlr-location-list > li.mlr-location-item > a[data-mlr-location]
 * ( .mlr-loc-name / .mlr-loc-addr / .mlr-loc-phone / .mlr-loc-status.is-open|.is-closed ).
 */

.mlr-location-finder{
  /* --mlr-accent is inherited from the theme (set it on :root/body). We do NOT redefine it
   * here — a self-referential `--mlr-accent: var(--mlr-accent, #e11d48)` is a CSS cycle that
   * computes to invalid, which left the accent (and the geolocate button's background) empty.
   * Instead every use below carries the #e11d48 fallback, so it works with or without a theme value. */
  --mlr-line: #ececec;
  --mlr-muted: #8a8a8a;
  --mlr-ink: #111;
  max-width: 720px;
  margin: 0 auto;
}

/* Search + geolocate */
.mlr-location-finder .mlr-location-search{
  width: 100%;
  padding: 14px 18px;
  border: 1px solid #d0cccc;
  border-radius: 100px;
  font: inherit;
  font-size: 16px;
  outline: none;
  margin-bottom: 12px;
}
.mlr-location-finder .mlr-location-search:focus{ border-color: var(--mlr-accent, #e11d48); }
.mlr-location-finder .mlr-detect{
  display: inline-block;
  background: var(--mlr-accent, #e11d48);
  color: #fff;
  border: 0;
  border-radius: 100px;
  padding: 12px 22px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 18px;
}
.mlr-location-finder .mlr-detect:hover{ filter: brightness(0.94); }
.mlr-location-finder .mlr-detect.mlr-loading{ opacity: .6; pointer-events: none; }
.mlr-location-finder .mlr-location-search.mlr-loading{ opacity: .6; }

/* List of locations */
.mlr-location-finder .mlr-location-list{ list-style: none; margin: 0; padding: 0; }
.mlr-location-finder .mlr-location-item{ border-bottom: 1px solid var(--mlr-line); }
.mlr-location-finder .mlr-location-item > a{
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 4px 16px;
  align-items: center;
  padding: 16px 8px;
  text-decoration: none;
  color: inherit;
}
.mlr-location-finder .mlr-location-item > a:hover{ background: #fafafa; }

/* Pin (inline SVG, tinted with --mlr-accent). Swap the background for your own asset if desired. */
.mlr-location-finder .mlr-location-item > a::before{
  content: "";
  grid-row: 1 / 5;
  align-self: start;
  width: 24px; height: 24px;
  background: var(--mlr-accent, #e11d48);
  -webkit-mask: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z" fill="none" stroke="black" stroke-width="2"/><circle cx="12" cy="10" r="2.5" fill="none" stroke="black" stroke-width="2"/></svg>');
          mask: no-repeat center/contain url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12 22s7-6.2 7-11a7 7 0 1 0-14 0c0 4.8 7 11 7 11z" fill="none" stroke="black" stroke-width="2"/><circle cx="12" cy="10" r="2.5" fill="none" stroke="black" stroke-width="2"/></svg>');
}

.mlr-location-finder .mlr-loc-name{ grid-column: 2; font-weight: 700; font-size: 18px; color: var(--mlr-ink); }
.mlr-location-finder .mlr-loc-addr{ grid-column: 2; color: var(--mlr-muted); font-size: 14px; }
.mlr-location-finder .mlr-loc-phone{ grid-column: 2; color: var(--mlr-muted); font-size: 13px; }
.mlr-location-finder .mlr-loc-status{
  grid-column: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mlr-muted);
}
.mlr-location-finder .mlr-loc-status .dot{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.mlr-location-finder .mlr-loc-status.is-open .dot{ background: #2fbf4b; }
.mlr-location-finder .mlr-loc-status.is-closed .dot{ background: var(--mlr-accent, #e11d48); }

/* Optional "View menu" CTA. The MLR Location Finder widget's CTA-label control (or the
 * shortcode's cta_label="") prints a .mlr-loc-cta span, written per language so no UI text
 * is hardcoded. Baseline placement + accent tint; the widget overrides typography/colour/align. */
.mlr-location-finder .mlr-loc-cta{
  grid-column: 2;
  font-size: 13px;
  font-weight: 600;
  color: var(--mlr-accent, #e11d48);
}

.mlr-location-finder .mlr-no-results{ padding: 16px 8px; color: var(--mlr-muted); }

@media (max-width: 480px){
  .mlr-location-finder .mlr-location-item > a{ grid-template-columns: 24px 1fr; }
}