/* ============================================================
 * Store Locator — CSS Custom Property vocabulary (v1.2.x)
 *
 * These tokens are the public theming contract for the Store Locator.
 * Any page-builder integration (Gutenberg block, future Elementor
 * widget, Divi module, etc.) overrides these tokens via the same
 * container data-tokens JSON contract documented in
 * docs/STORE_LOCATOR_BUILDER_CONTRACT.md. Renaming a token is a
 * breaking change — bump the plugin version and add a CHANGELOG
 * migration note.
 *
 * Groups (declaration order below mirrors this list):
 *   1.  Layout              (sizing, spacing, radii)
 *   2.  Typography          (system fonts only — no Google Fonts)
 *   3.  Colors — Background
 *   4.  Colors — Text
 *   5.  Colors — Brand      (accent + hover + contrast-text + subtle-bg)
 *   6.  Colors — Border & Divider
 *   7.  Colors — Feedback   (danger, success, warning)
 *   8.  Card                (logo size, border, shadow, hover shadow)
 *   9.  Search              (input + button dimensions, border)
 *   10. Badge               (retailer_type badge chrome)
 *   11. Map marker          (default color, size)
 *   12. Shadows & Elevation
 *   13. U1 legacy chrome    (suggest listbox, skip link — internal)
 *
 * The scoping on `.rmfw-store-locator` means these tokens don't leak
 * into the surrounding theme. The React admin app overrides these
 * with Tailwind classes once mounted.
 * ============================================================ */

.rmfw-store-locator {
  /* 1. Layout */
  --rmfw-sl-height: 600px;
  --rmfw-sl-sidebar-width: 360px;
  --rmfw-sl-border-radius: 8px;
  --rmfw-sl-card-radius: 8px;
  --rmfw-sl-input-radius: 6px;
  --rmfw-sl-btn-radius: 6px;
  --rmfw-sl-gap: 0px;
  --rmfw-sl-padding: 16px;

  /* 2. Typography — system fonts only; no Google Fonts in v1 customizer. */
  --rmfw-sl-font-family: inherit;
  --rmfw-sl-font-size-base: 14px;
  --rmfw-sl-font-size-sm: 12px;
  --rmfw-sl-font-size-lg: 16px;
  --rmfw-sl-font-weight-bold: 600;
  --rmfw-sl-line-height: 1.5;

  /* 3. Colors — Background */
  --rmfw-sl-bg: #ffffff;
  --rmfw-sl-sidebar-bg: #ffffff;
  --rmfw-sl-map-bg: #f3f4f6; /* T1.1: was #eef2f7 */
  --rmfw-sl-card-bg: #ffffff;
  --rmfw-sl-card-bg-hover: #f9fafb; /* T1.1: renamed from --rmfw-sl-card-hover-bg */
  --rmfw-sl-card-bg-active: #eff6ff;
  --rmfw-sl-input-bg: #f9fafb; /* T1.1: was #ffffff */
  --rmfw-sl-search-bg: #ffffff;

  /* 4. Colors — Text */
  --rmfw-sl-text: #111827; /* T1.1: was #151619 */
  --rmfw-sl-text-secondary: #6b7280; /* T1.1: renamed from --rmfw-sl-muted */
  --rmfw-sl-text-muted: #9ca3af;
  --rmfw-sl-text-inverse: #ffffff;

  /* 5. Colors — Brand */
  --rmfw-sl-accent: #2563eb;
  --rmfw-sl-accent-hover: #1d4ed8;
  --rmfw-sl-accent-text: #ffffff;
  --rmfw-sl-accent-light: #eff6ff;
  --rmfw-sl-user-location: #4285f4;

  /* 6. Colors — Border & Divider */
  --rmfw-sl-border: #e5e7eb;
  --rmfw-sl-border-focus: #2563eb;
  --rmfw-sl-divider: #f3f4f6;

  /* 7. Colors — Feedback */
  --rmfw-sl-danger: #dc2626;
  --rmfw-sl-success: #16a34a;
  --rmfw-sl-warning: #ca8a04;

  /* 8. Card */
  --rmfw-sl-card-logo-size: 48px;
  --rmfw-sl-card-border: 1px solid var(--rmfw-sl-border);
  --rmfw-sl-card-shadow: none;
  --rmfw-sl-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.08);

  /* 9. Search */
  --rmfw-sl-input-height: 40px;
  --rmfw-sl-input-border: 1px solid var(--rmfw-sl-border);
  --rmfw-sl-btn-height: 40px;

  /* 10. Badge */
  --rmfw-sl-badge-radius: 99px;
  --rmfw-sl-badge-font-size: 11px;

  /* 11. Map marker */
  --rmfw-sl-marker-color: var(--rmfw-sl-accent);
  --rmfw-sl-marker-size: 32px;

  /* 12. Shadows & Elevation */
  --rmfw-sl-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06);
  --rmfw-sl-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
  --rmfw-sl-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.14);

  /* 13. U1 legacy chrome — internal consumers in search-bar.js /
   * core.js. Reference the semantic tokens above so a single
   * --rmfw-sl-bg override (e.g. on a dark template) cascades through
   * the suggest listbox, skip link, and badge chrome for free. */
  --rmfw-sl-suggest-bg: var(--rmfw-sl-bg);
  --rmfw-sl-suggest-border: var(--rmfw-sl-border);
  --rmfw-sl-suggest-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  --rmfw-sl-suggest-max-height: 260px;
  --rmfw-sl-badge-bg: #e5e7eb;
  --rmfw-sl-badge-text: var(--rmfw-sl-text);
  --rmfw-sl-skip-bg: var(--rmfw-sl-bg);
  --rmfw-sl-skip-border: var(--rmfw-sl-accent);

  position: relative;
  width: 100%;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: 10px;
  background: var(--rmfw-sl-bg);
  overflow: hidden;
  font-family: var(--rmfw-sl-font-family);
  color: var(--rmfw-sl-text);
  box-sizing: border-box;
}

.rmfw-store-locator *,
.rmfw-store-locator *::before,
.rmfw-store-locator *::after {
  box-sizing: border-box;
}

.rmfw-store-locator__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--rmfw-sl-text-secondary);
  font-size: 0.875rem;
  background: #f9fafb;
}

/* Grid: split layout with results list + map at ≥ 768px.
 *
 * The root fills the container's bounded height — PHP emits an inline
 * `height` + `max-height` on `.rmfw-store-locator` so the `1fr` list row
 * has a resolved size for `overflow-y: auto` (below) to engage when
 * search returns many retailers. Without a bounded parent, the list
 * would grow to fit its content and scroll would never appear.
 * `min-height: 0` on the grid itself is the canonical fix preventing
 * grid children from overflowing their track when their content is
 * taller than the row. */
.rmfw-store-locator__root {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  height: 100%;
  min-height: 0;
}

@media (min-width: 768px) {
  .rmfw-store-locator__root[data-layout="split"] {
    grid-template-columns: 1fr minmax(320px, 420px);
    grid-template-rows: auto 1fr;
    grid-template-areas:
      "search search"
      "map list";
  }
  .rmfw-store-locator__root[data-layout="map-only"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "map";
  }
  .rmfw-store-locator__root[data-layout="list-only"] {
    grid-template-columns: 1fr;
    grid-template-areas:
      "search"
      "list";
  }
}

/* Intro text — optional prose block above the search row. Rendered
 * when the `introText` block attribute / `intro_text` shortcode attr
 * is non-empty. Kept muted so it reads as supporting copy rather than
 * competing with the search UI below it. */
.rmfw-store-locator__intro {
  padding: 0.9rem 1rem 0.25rem;
  font-size: 14px;
  line-height: 1.5;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__intro p {
  margin: 0 0 0.5rem;
}
.rmfw-store-locator__intro p:last-child {
  margin-bottom: 0;
}
.rmfw-store-locator__intro a {
  color: var(--rmfw-sl-accent);
  text-decoration: none;
}
.rmfw-store-locator__intro a:hover,
.rmfw-store-locator__intro a:focus-visible {
  text-decoration: underline;
}

.rmfw-store-locator__search {
  grid-area: search;
  padding: 1rem;
  border-bottom: 1px solid var(--rmfw-sl-border);
}
/* `min-height: 0` lets the grid row shrink to the track's computed
 * size so `overflow-y: auto` kicks in; without it the list's intrinsic
 * content height would expand the row and the scroll would never
 * appear when there are many retailers. */
.rmfw-store-locator__list {
  grid-area: list;
  overflow-y: auto;
  min-height: 0;
  max-height: 100%;
  border-right: 1px solid var(--rmfw-sl-border);
}
.rmfw-store-locator__map {
  grid-area: map;
  min-height: 320px;
  background: var(--rmfw-sl-map-bg);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
/* Inner canvas — provider (Leaflet / Google Maps) mounts onto THIS
 * element, not the outer `__map`. Separated so any children-wiping or
 * pane-reparenting the provider does stays scoped here and never
 * touches the popup sibling. `flex: 1` so it fills the outer
 * regardless of the `position: relative` that Leaflet forces on its
 * own container (flex sizing is independent of positioning). */
.rmfw-store-locator__map-canvas {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/* Leaflet divIcon wrapper for the shared coloured pin (lib/marker.js).
 * Strips Leaflet's default white-tile background + border so the SVG
 * pin renders cleanly with its own drop-shadow + gradient. */
.rmfw-store-locator__colored-pin {
  background: transparent !important;
  border: none !important;
}

@media (max-width: 767px) {
  .rmfw-store-locator__root[data-layout="split"] {
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(280px, 1fr) auto;
    grid-template-areas:
      "search"
      "map"
      "list";
  }
  .rmfw-store-locator__list {
    max-height: 50vh;
    border-right: 0;
    border-top: 1px solid var(--rmfw-sl-border);
  }
  .rmfw-store-locator__map {
    min-height: 280px;
  }
}

/* Search controls. */
.rmfw-store-locator__search-row {
  display: flex;
  gap: 0.5rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.rmfw-store-locator__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  max-width: 100%;
  height: 40px;
  padding: 0 0.75rem;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: 8px;
  background: var(--rmfw-sl-input-bg);
  font-size: 14px;
}
.rmfw-store-locator__input:focus {
  outline: 2px solid var(--rmfw-sl-accent);
  /* outline-offset: 1px; */
  border-color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__btn {
  height: 40px;
  padding: 0 0.9rem !important;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: 8px;
  background: var(--rmfw-sl-input-bg);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__btn:hover {
  background: var(--rmfw-sl-card-bg-hover);
}
.rmfw-store-locator__btn[data-variant="primary"] {
  background: var(--rmfw-sl-accent);
  border-color: var(--rmfw-sl-accent);
  color: #fff;
}
.rmfw-store-locator__btn[data-variant="primary"]:hover {
  background: var(--rmfw-sl-accent-hover);
  border-color: var(--rmfw-sl-accent-hover);
}
.rmfw-store-locator__btn:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}

.rmfw-store-locator__btn-icon {
  flex-shrink: 0;
  display: block;
  width: 18px;
  height: 18px;
}

/* Result card. */
.rmfw-store-locator__card {
  display: flex;
  gap: 0.75rem;
  padding: 0.9rem 1rem !important;
  border-bottom: 1px solid var(--rmfw-sl-border);
  cursor: pointer;
  transition: background 120ms ease;
}
.rmfw-store-locator__card:hover,
.rmfw-store-locator__card[aria-selected="true"] {
  background: var(--rmfw-sl-card-bg-hover);
}
.rmfw-store-locator__card:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: -2px;
  background: var(--rmfw-sl-card-bg-hover);
}
.rmfw-store-locator__card-logo {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  border: 1px solid var(--rmfw-sl-border);
  background: #f9fafb center/contain no-repeat;
}
.rmfw-store-locator__card-body {
  min-width: 0;
  flex: 1;
}
.rmfw-store-locator__card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rmfw-store-locator__card-head-main {
  min-width: 0;
  flex: 1;
}
.rmfw-store-locator__card-head-action {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 0.2rem;
}
.rmfw-store-locator__card-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}
.rmfw-store-locator__card-chevron svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}
.rmfw-store-locator__card[aria-selected="true"]
  .rmfw-store-locator__card-chevron
  svg {
  transform: rotate(180deg);
}
.rmfw-store-locator__card-title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 2px;
  color: var(--rmfw-sl-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Inline retailer-name anchor inside the result card title. Inherits the
 * title's weight/size/ellipsis so the only visual change on hover is a
 * color shift + underline — matches the other layouts' .rmfw-name-link. */
.rmfw-store-locator__card-title .rmfw-name-link {
  color: inherit;
  text-decoration: none;
  font-weight: inherit;
  font-size: inherit;
  line-height: inherit;
  transition: color 0.15s ease;
}

.rmfw-store-locator__card-title .rmfw-name-link:hover,
.rmfw-store-locator__card-title .rmfw-name-link:focus-visible {
  color: var(--rmfw-sl-accent, #2563eb);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.rmfw-store-locator__card-title .rmfw-name-link:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent, #2563eb);
  outline-offset: 2px;
  border-radius: 2px;
}
.rmfw-store-locator__card-meta {
  font-size: 12px;
  color: var(--rmfw-sl-text-secondary);
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 8px !important;
}
.rmfw-store-locator__card-accordion-panel {
  display: block;
}
.rmfw-store-locator__card-accordion-panel[data-expanded] {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition:
    max-height 0.3s ease,
    opacity 0.22s ease,
    transform 0.28s ease;
}
.rmfw-store-locator__card-accordion-panel[data-expanded="true"] {
  max-height: var(--rmfw-card-accordion-height, 0px);
  opacity: 1;
  transform: translateY(0);
}

.rmfw-store-locator__card-address {
  font-size: 12px;
  color: var(--rmfw-sl-text-secondary);
  margin: 2px 0 0;
}

.rmfw-store-locator__card-address-icon {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  color: var(--rmfw-sl-text-secondary);
}

.rmfw-store-locator__card-address-text {
  margin: 0;
  font-size: 14px;
}

.rmfw-store-locator__card-phone-icon,
.rmfw-store-locator__card-email-icon {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  color: var(--rmfw-sl-accent);
}

/* Actions row — "Visit site" + "Get Directions" as buttons on their own
 * line below the contact metadata. Mirrors the popup action styling so
 * the list card and popup read as the same component family. */
.rmfw-store-locator__card-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin: 8px 0 0;
}
.rmfw-store-locator__card-action {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid var(--rmfw-sl-border);
  background: var(--rmfw-sl-bg);
  color: var(--rmfw-sl-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}
.rmfw-store-locator__card-action:hover,
.rmfw-store-locator__card-action:focus-visible {
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}
.rmfw-store-locator__card-action:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}
.rmfw-store-locator__card-action--primary {
  background: var(--rmfw-sl-accent);
  border-color: var(--rmfw-sl-accent);
  color: #ffffff;
}
.rmfw-store-locator__card-action--primary:hover,
.rmfw-store-locator__card-action--primary:focus-visible {
  background: var(--rmfw-sl-accent-hover);
  border-color: var(--rmfw-sl-accent-hover);
  color: #ffffff;
}

/* T4.2 — Additional CTA button style modifiers for custom CTAs.
 * outline: transparent bg, accent border/text (reads as "secondary").
 * ghost:   transparent bg, accent text, no border (reads as "tertiary").
 * link:    no box chrome at all, just an accent-coloured underlined link. */
.rmfw-store-locator__card-action--outline {
  background: transparent;
  border-color: var(--rmfw-sl-accent);
  color: var(--rmfw-sl-accent);
}
.rmfw-store-locator__card-action--outline:hover,
.rmfw-store-locator__card-action--outline:focus-visible {
  background: var(--rmfw-sl-accent-light);
  border-color: var(--rmfw-sl-accent);
  color: var(--rmfw-sl-accent-hover);
}
.rmfw-store-locator__card-action--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--rmfw-sl-accent);
}
.rmfw-store-locator__card-action--ghost:hover,
.rmfw-store-locator__card-action--ghost:focus-visible {
  background: var(--rmfw-sl-accent-light);
  color: var(--rmfw-sl-accent-hover);
}
.rmfw-store-locator__card-action--link {
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rmfw-sl-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 500;
}
.rmfw-store-locator__card-action--link:hover,
.rmfw-store-locator__card-action--link:focus-visible {
  color: var(--rmfw-sl-accent-hover);
  text-decoration: underline;
  background: transparent;
}

/* Contact rows — phone and email each get their own `<p>` so they
 * stack vertically. The first row lifts off the address; consecutive
 * rows tighten to 2px so the contact lines read as one group above
 * the action buttons. */
.rmfw-store-locator__card-contact {
  margin-top: 6px !important;
}
.rmfw-store-locator__card-contact + .rmfw-store-locator__card-contact {
  margin-top: 2px;
}
.rmfw-store-locator__card-contact a {
  color: var(--rmfw-sl-accent);
  text-decoration: none;
  font-weight: 500;
  word-break: break-word;
}

.rmfw-store-locator__card-contact a:hover,
.rmfw-store-locator__card-contact a:focus-visible {
  text-decoration: underline;
}
.rmfw-store-locator__badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 500;
  background: var(--rmfw-sl-badge-bg);
  color: var(--rmfw-sl-badge-text);
}

/* -------------------------------------------------------------------------
   T1.4 — Card variants.

   The `.rmfw-store-locator__card` base rules above render the "horizontal"
   default variant (logo on left, body on right). The selectors below
   override for the three alternate variants — `vertical`, `compact`,
   `minimal` — driven by the `data-card-variant` attribute PHP emits on
   the container.

   CSS-only: the JS per-field card renderer (results-list.js::renderCard)
   always outputs the full DOM subtree — logo, title, meta, address,
   phone, email, actions. Hiding rows here means the DOM stays
   consistent across variants and the cardFields gate in context still
   works as the authoritative "don't render at all" switch.

   Scoped to `.rmfw-store-locator[data-card-variant="X"]` so a locator
   with `horizontal` on the same page as one with `minimal` keeps its
   own look (multi-instance safe).
   ------------------------------------------------------------------------- */

/* ---- vertical: logo full-width on top, body below ----
 *
 * Useful for product-tile catalogues or the "Vibrant" template where
 * the retailer logo doubles as brand hero. The card grows taller per
 * row; pair with a narrower sidebar in the split layout. */
.rmfw-store-locator[data-card-variant="vertical"] .rmfw-store-locator__card {
  flex-direction: column;
  align-items: stretch;
  gap: 0.6rem;
}
.rmfw-store-locator[data-card-variant="vertical"]
  .rmfw-store-locator__card-logo {
  flex: 0 0 auto;
  width: 100%;
  height: 96px;
  border-radius: calc(var(--rmfw-sl-card-radius) - 2px);
}

/* ---- compact: no logo, dense padding ----
 *
 * "List mode" look — pair with a long list where the user is scanning
 * many retailers quickly. Keeps CTAs and address visible, drops the
 * logo and tightens vertical rhythm. Address truncates to one line so
 * a wordy city never forces a taller card. */
.rmfw-store-locator[data-card-variant="compact"] .rmfw-store-locator__card {
  padding: 0.5rem 1rem;
  gap: 0.5rem;
}
.rmfw-store-locator[data-card-variant="compact"]
  .rmfw-store-locator__card-logo {
  display: none;
}
.rmfw-store-locator[data-card-variant="compact"]
  .rmfw-store-locator__card-title {
  font-size: 13px;
  margin-bottom: 0;
}
.rmfw-store-locator[data-card-variant="compact"]
  .rmfw-store-locator__card-address {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rmfw-store-locator[data-card-variant="compact"]
  .rmfw-store-locator__card-actions {
  margin-top: 4px;
}

/* ---- minimal: name + distance + chevron only ----
 *
 * Directory-style row. Hides logo, address, contact rows, actions row,
 * AND the retailer-type badge chip — leaves just the title, distance,
 * and a CSS chevron affordance on the right so the row reads as
 * "tap for detail". Divider border between rows instead of card
 * borders so the list feels like a flat table.
 *
 * NOTE: the chevron is a pure-CSS `::after` pseudo-element; no DOM
 * change in results-list.js. If a future variant needs a different
 * trailing icon, override this `::after` at that variant's selector. */
.rmfw-store-locator[data-card-variant="minimal"] .rmfw-store-locator__card {
  align-items: center;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--rmfw-sl-divider);
  gap: 0.5rem;
}

/* .rmfw-store-locator[data-card-variant="minimal"] .rmfw-store-locator__card-logo,
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-address,
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-contact,
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-actions {
  display: none;
} */

.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-meta
  .rmfw-store-locator__badge {
  display: none;
}
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}
.rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card-meta {
  margin: 0;
}
/* .rmfw-store-locator[data-card-variant="minimal"]
  .rmfw-store-locator__card::after {
  content: "›";
  font-size: 22px;
  line-height: 1;
  color: var(--rmfw-sl-text-secondary);
  margin-left: 0.25rem;
  flex: 0 0 auto;
} */

/* -------------------------------------------------------------------------
   T1.5 — Search bar variants.

   The `.rmfw-store-locator__search` base rules above render the "bar"
   default (flex row of input + radius select + buttons). Variant rules
   below override for `pill`, `floating`, `stacked`.

   Scoped to `.rmfw-store-locator[data-search-style="X"]` for
   multi-instance safety.

   Search DOM (from search-bar.js):
     .__search
       form.__search-row
         .__input-wrap  >  input.__input  +  ul.__suggest-list
         div.__input.__radius-select  >  button.__radius-trigger  +  ul.__radius-menu
         button.__btn (Use my location)
         button.__btn (Search)
       .__error.__search-error
   ------------------------------------------------------------------------- */

/* ---- pill: rounded-99px inputs + buttons, subtle shadow ----
 *
 * Google-search feel. Keeps the flex-row layout but swaps corner radii
 * and adds a slight elevation under the input. Taller row (44px) so the
 * pill reads as a primary search surface. */
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__input,
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__btn,
.rmfw-store-locator[data-search-style="pill"]
  .rmfw-store-locator__radius-select {
  border-radius: 99px;
  height: 44px;
}
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__input {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__input:focus {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.rmfw-store-locator[data-search-style="pill"] .rmfw-store-locator__btn {
  padding-left: 1.1rem;
  padding-right: 1.1rem;
}
.rmfw-store-locator[data-search-style="pill"]
  .rmfw-store-locator__suggest-list {
  border-radius: 16px;
  padding: 6px 0;
}

/* ---- floating: search overlaid on the map ----
 *
 * Only meaningful when `data-layout="map-only"` — on split / list-only
 * the grid-placed search row wins and we leave the layout alone.
 * Requires `position: relative` on the root so the absolute-positioned
 * search anchors to the locator instead of the document. */
.rmfw-store-locator[data-search-style="floating"]
  .rmfw-store-locator__root[data-layout="map-only"] {
  position: relative;
  grid-template-rows: 1fr;
  grid-template-areas: "map";
}
.rmfw-store-locator[data-search-style="floating"]
  .rmfw-store-locator__root[data-layout="map-only"]
  .rmfw-store-locator__search {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 2rem));
  z-index: 5;
  background: var(--rmfw-sl-search-bg);
  border: 1px solid var(--rmfw-sl-border);
  border-radius: calc(var(--rmfw-sl-border-radius) + 4px);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 0.75rem 0.9rem;
}
/* The suggest listbox needs to poke out of the floating card without
   being clipped by the parent's padding/border. It's already
   `position: absolute` within `.__input-wrap`, so no override needed —
   just bump the z-index above the map surface. */
.rmfw-store-locator[data-search-style="floating"]
  .rmfw-store-locator__root[data-layout="map-only"]
  .rmfw-store-locator__suggest-list {
  z-index: 6;
}

/* ---- stacked: input on its own row, controls below ----
 *
 * For narrow sidebars where the default bar layout wraps awkwardly.
 * Flex-wrap + a 100% flex-basis on the input-wrap forces the input
 * onto its own line; the radius select + buttons share the second
 * line with equal flex-grow. */
.rmfw-store-locator[data-search-style="stacked"]
  .rmfw-store-locator__search-row {
  flex-wrap: wrap;
  row-gap: 0.5rem;
}
.rmfw-store-locator[data-search-style="stacked"]
  .rmfw-store-locator__input-wrap {
  flex: 1 1 100%;
  margin-right: 0;
}
.rmfw-store-locator[data-search-style="stacked"]
  .rmfw-store-locator__radius-select {
  flex: 1 1 0;
}
.rmfw-store-locator[data-search-style="stacked"] .rmfw-store-locator__btn {
  flex: 1 1 0;
  justify-content: center;
}

/* U1 — classes that replace former inline styles in JS modules.
 * Putting the chrome here means template token overrides actually
 * reach the suggest listbox and skip link, which previously used
 * hardcoded white / accent-blue. */
.rmfw-store-locator__input-wrap {
  position: relative;
  flex: 1 1 220px;
  min-width: 0;
  width: min(100%, 400px);
  max-width: 400px;
  margin-right: auto;
}
.rmfw-store-locator__radius-select {
  position: relative;
  flex: 0 0 130px;
}

.rmfw-store-locator__radius-select.is-open {
  border-color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__radius-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.35rem;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  margin: 0;
  padding: 0 0.5rem 0 0.4rem;
  border: none;
  background: transparent;
  font: inherit;
  font-size: 14px;
  color: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: inherit;
}

.rmfw-store-locator__radius-trigger-main {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  min-width: 0;
  flex: 1 1 auto;
}

.rmfw-store-locator__radius-trigger-pin {
  flex-shrink: 0;
  color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__radius-trigger-label {
  font-weight: 600;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rmfw-store-locator__radius-trigger-chevron {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--rmfw-sl-text-secondary);
}

.rmfw-store-locator__radius-trigger-chevron-svg {
  display: block;
  transition: transform 0.2s ease;
}

.rmfw-store-locator__radius-select.is-open
  .rmfw-store-locator__radius-trigger-chevron-svg {
  transform: rotate(180deg);
}

.rmfw-store-locator__radius-select:focus-within {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 1px;
  border-color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__radius-menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: 25;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rmfw-sl-suggest-bg);
  border: 1px solid var(--rmfw-sl-suggest-border);
  border-radius: 10px;
  box-shadow: var(--rmfw-sl-suggest-shadow);
  max-height: var(--rmfw-sl-suggest-max-height);
  overflow-y: auto;
}

.rmfw-store-locator__radius-menu-item {
  margin: 0;
  padding: 0;
}

.rmfw-store-locator__radius-option {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  font: inherit;
  cursor: pointer;
  text-align: left;
  color: var(--rmfw-sl-text);
}

.rmfw-store-locator__radius-option-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.55rem 0.75rem;
  font-size: 14px;
}

.rmfw-store-locator__radius-option:hover .rmfw-store-locator__radius-option-row,
.rmfw-store-locator__radius-option:focus-visible
  .rmfw-store-locator__radius-option-row {
  background: var(--rmfw-sl-accent);
  opacity: 0.7;
  color: #ffffff;
}

.rmfw-store-locator__radius-option:hover[aria-selected="true"]
  .rmfw-store-locator__radius-option-text,
.rmfw-store-locator__radius-option:hover
  .rmfw-store-locator__radius-option-check {
  color: #ffffff;
}

.rmfw-store-locator__radius-option:focus-visible {
  outline: none;
}

.rmfw-store-locator__radius-option-text {
  flex: 1 1 auto;
  min-width: 0;
}

.rmfw-store-locator__radius-option-check {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  opacity: 0;
  color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__radius-option[aria-selected="true"]
  .rmfw-store-locator__radius-option-check {
  opacity: 1;
}

.rmfw-store-locator__radius-option[aria-selected="true"]
  .rmfw-store-locator__radius-option-text {
  font-weight: 600;
  color: var(--rmfw-sl-accent);
}

/* T6.2 — interactive retailer-type filter select. Inherits .__input
 * styling (border, radius, focus ring); flex is a little wider than
 * the radius select to give taxonomy labels breathing room. */
.rmfw-store-locator__type-filter {
  flex: 0 0 auto;
  min-width: 140px;
}
.rmfw-store-locator__suggest-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--rmfw-sl-suggest-bg);
  border: 1px solid var(--rmfw-sl-suggest-border);
  border-radius: 8px;
  box-shadow: var(--rmfw-sl-suggest-shadow);
  max-height: var(--rmfw-sl-suggest-max-height);
  overflow-y: auto;
}
.rmfw-store-locator__suggest-item {
  display: block;
  width: 100%;
  padding: 8px 12px;
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__suggest-item:hover,
.rmfw-store-locator__suggest-item:focus-visible {
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}
.rmfw-store-locator__skip-link {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 6px 10px;
  background: var(--rmfw-sl-skip-bg);
  color: var(--rmfw-sl-text);
  border: 1px solid var(--rmfw-sl-skip-border);
  border-radius: 4px;
  z-index: 30;
  text-decoration: none;
}
.rmfw-store-locator__skip-link:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}
.rmfw-store-locator__search-error {
  font-size: 12px;
  margin-top: 8px;
}
.rmfw-store-locator__result-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Empty / error / status bar (a11y live region). */
.rmfw-store-locator__status {
  padding: 0.75rem 1rem;
  font-size: 13px;
  color: var(--rmfw-sl-text-secondary);
  border-bottom: 1px solid var(--rmfw-sl-border);
  min-height: 38px;
}

/* T6.3 — sort row (select dropdown next to the result count).
 * Hidden until the list has ≥ 2 items; JS toggles `display: none`.
 * Sits between the status row and the list proper, sharing the
 * status row's border styling so the list chrome stays cohesive. */
.rmfw-store-locator__sort-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-bottom: 1px solid var(--rmfw-sl-divider);
}
.rmfw-store-locator__sort {
  padding: 4px 8px;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-input-radius);
  background: var(--rmfw-sl-input-bg);
  color: var(--rmfw-sl-text);
  font-size: 12px;
  cursor: pointer;
  flex: 1;
}
.rmfw-store-locator__sort:focus {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 1px;
}

/* T8 — "Saved stores" toggle button in the sort row. Matches the
 * other search-chrome buttons dimensionally; fills when active to
 * signal the filter-on state. */
.rmfw-store-locator__saved-toggle {
  padding: 4px 10px;
  border: 1px solid var(--rmfw-sl-border);
  border-radius: var(--rmfw-sl-btn-radius);
  background: var(--rmfw-sl-input-bg);
  color: var(--rmfw-sl-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.rmfw-store-locator__saved-toggle:hover,
.rmfw-store-locator__saved-toggle:focus-visible {
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}
.rmfw-store-locator__saved-toggle:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 1px;
}
.rmfw-store-locator__saved-toggle.is-active {
  background: var(--rmfw-sl-accent);
  border-color: var(--rmfw-sl-accent);
  color: #ffffff;
}
.rmfw-store-locator__saved-toggle.is-active:hover,
.rmfw-store-locator__saved-toggle.is-active:focus-visible {
  background: var(--rmfw-sl-accent-hover);
  border-color: var(--rmfw-sl-accent-hover);
  color: #ffffff;
}

/* T8 — Heart button inside result cards. Transparent frame so the
 * icon reads as a soft affordance next to the badge + distance. The
 * filled state uses --rmfw-sl-danger since "favourite" reads as a red
 * heart everywhere; keeps themeability via the token. */
.rmfw-store-locator__favorite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--rmfw-sl-text-secondary);
  cursor: pointer;
  border-radius: 50%;
  transition:
    color 120ms ease,
    background-color 120ms ease;
}
.rmfw-store-locator__favorite svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.rmfw-store-locator__favorite:hover,
.rmfw-store-locator__favorite:focus-visible {
  color: var(--rmfw-sl-danger);
  background: rgba(220, 38, 38, 0.08);
  outline: none;
}
.rmfw-store-locator__favorite:focus-visible {
  outline: 2px solid var(--rmfw-sl-accent);
  outline-offset: 2px;
}
.rmfw-store-locator__favorite.is-favorite {
  color: var(--rmfw-sl-danger);
}
.rmfw-store-locator__favorite.is-favorite svg {
  fill: currentColor;
  stroke: currentColor;
}
.rmfw-store-locator__error {
  color: var(--rmfw-sl-danger);
}

/* Pagination / load-more. */
.rmfw-store-locator__more {
  display: flex;
  justify-content: center;
  padding: 0.75rem;
}

/* Hide until JS mounts. */
.rmfw-store-locator[data-mounted="true"] .rmfw-store-locator__loading {
  display: none;
}

/* -------------------------------------------------------------------------
   Marker popup (popup.js).

   Mounted inside `.rmfw-store-locator__map`, absolutely positioned and
   centered at the top. Width capped so it reads as a floating card rather
   than overlaying the whole map surface. Pointer events stay interactive
   so users can click the action links inside.
   ------------------------------------------------------------------------- */
.rmfw-store-locator__popup {
  position: absolute;
  z-index: 10;
  width: 320px;
  max-width: calc(100vw - 24px);
  max-height: 420px;
  overflow-y: auto;
  padding: 14px 16px 12px;
  background: var(--rmfw-sl-bg, #fff);
  color: var(--rmfw-sl-text, #151619);
  border: 1px solid var(--rmfw-sl-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.5;
  pointer-events: auto;

  /* Cần thêm để ::after hoạt động đúng */
  overflow: visible; /* ⚠️ bỏ overflow-y: auto nếu muốn tam giác hiển thị */
}

.rmfw-store-locator__popup::after {
  content: "";
  position: absolute;
  bottom: -10px; /* Nhô ra ngoài đáy */
  left: 50%; /* Căn giữa — đổi thành giá trị px nếu muốn lệch */
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid var(--rmfw-sl-bg, #fff);
  filter: drop-shadow(
    0 2px 1px rgba(0, 0, 0, 0.08)
  ); /* bóng nhẹ cho tam giác */
}

/* Khi popup lật xuống dưới pin, đặt tam giác lên trên và chĩa lên pin. */
.rmfw-store-locator__popup.rmfw-store-locator__popup--below::after {
  top: -10px;
  bottom: auto;
  border-top: 0;
  border-bottom: 10px solid var(--rmfw-sl-bg, #fff);
  filter: drop-shadow(0 -2px 1px rgba(0, 0, 0, 0.08));
}

.rmfw-store-locator__popup[aria-hidden="true"] {
  display: none;
}

.rmfw-store-locator__popup-close {
  position: absolute;
  top: 4px;
  right: 6px;
  width: 26px;
  height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  color: var(--rmfw-sl-text-secondary);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  border-radius: 6px;
}
.rmfw-store-locator__popup-close:hover,
.rmfw-store-locator__popup-close:focus-visible {
  color: var(--rmfw-sl-text);
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}

.rmfw-store-locator__popup-header {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding-right: 26px; /* reserve space for close button */
}

.rmfw-store-locator__popup-logo {
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background-color: var(--rmfw-sl-card-bg-hover);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border: 1px solid var(--rmfw-sl-border);
}

.rmfw-store-locator__popup-heading {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rmfw-store-locator__popup-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--rmfw-sl-text);
}
.rmfw-store-locator__popup-title a {
  color: inherit;
  text-decoration: none;
}
.rmfw-store-locator__popup-title a:hover,
.rmfw-store-locator__popup-title a:focus-visible {
  color: var(--rmfw-sl-accent);
  text-decoration: underline;
}

.rmfw-store-locator__popup-meta {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--rmfw-sl-text-secondary);
}

.rmfw-store-locator__popup-body {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.rmfw-store-locator__popup-address {
  margin: 0;
  color: var(--rmfw-sl-text);
}

.rmfw-store-locator__popup-address-text {
  font-size: 13px;
}
/* Each contact line (phone, email) is its own `<p>` so they stack
 * vertically. Margin kept tight so the two rows read as a single
 * grouped block above the action buttons. */
.rmfw-store-locator__popup-contact {
  margin: 0;
  font-size: 12px;
  color: var(--rmfw-sl-text-secondary);
}
.rmfw-store-locator__popup-contact + .rmfw-store-locator__popup-contact {
  margin-top: 2px;
}

.rmfw-store-locator__popup-link {
  color: var(--rmfw-sl-accent);
  text-decoration: none;
  font-weight: 500;
}

.rmfw-store-locator__card-contact a:hover,
.rmfw-store-locator__card-contact a:hover svg,
.rmfw-store-locator__popup-link:hover,
.rmfw-store-locator__popup-link:hover svg,
.rmfw-store-locator__popup-link:focus-visible {
  color: var(--rmfw-sl-accent-hover);
  text-decoration: underline;
}

/* Inline icons next to address / phone / email — mirror the result-card
 * iconography. Address uses the muted text colour to sit on top of the
 * paragraph baseline, phone/email pick up --rmfw-sl-accent so they read
 * as actionable links even before hover. */
.rmfw-store-locator__popup-address-icon {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  color: var(--rmfw-sl-text-secondary);
}

.rmfw-store-locator__popup-phone-icon,
.rmfw-store-locator__popup-email-icon {
  display: inline-block;
  vertical-align: -3px;
  width: 16px;
  height: 16px;
  margin-right: 0.25rem;
  color: var(--rmfw-sl-accent);
}

.rmfw-store-locator__popup-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.rmfw-store-locator__popup-action {
  flex: 1 1 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--rmfw-sl-border);
  background: var(--rmfw-sl-bg);
  color: var(--rmfw-sl-text);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition:
    background-color 120ms ease,
    color 120ms ease,
    border-color 120ms ease;
}
.rmfw-store-locator__popup-action:hover,
.rmfw-store-locator__popup-action:focus-visible {
  background: var(--rmfw-sl-card-bg-hover);
  outline: none;
}

.rmfw-store-locator__popup-action--primary {
  background: var(--rmfw-sl-accent);
  border-color: var(--rmfw-sl-accent);
  color: #ffffff;
}
.rmfw-store-locator__popup-action--primary:hover,
.rmfw-store-locator__popup-action--primary:focus-visible {
  background: var(--rmfw-sl-accent-hover);
  border-color: var(--rmfw-sl-accent-hover);
  color: #ffffff;
}

/* `position: relative` on .rmfw-store-locator__map is declared inline
 * at the top of this file together with the flex-column layout that
 * makes the inner `__map-canvas` fill the wrapper. */

/* -------------------------------------------------------------------------
   T4.3 — "Showing products from X" banner on the WooCommerce shop
   archive. Not scoped under .rmfw-store-locator because it renders
   outside the locator (`woocommerce_before_shop_loop` hook). Uses
   conservative styling that won't clash with themes; fonts and line-
   height inherit from the theme's shop area.
   ------------------------------------------------------------------------- */
.rmfw-retailer-products-banner {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 6px;
  color: #1e3a8a;
  font-size: 14px;
}
.rmfw-retailer-products-banner strong {
  font-weight: 600;
}
.rmfw-retailer-products-banner__clear {
  color: #1e3a8a;
  text-decoration: underline;
  font-weight: 500;
}
.rmfw-retailer-products-banner__clear:hover,
.rmfw-retailer-products-banner__clear:focus-visible {
  color: #1e40af;
  text-decoration: underline;
}