/* ============================================================
   Directory module — dir.css
   Loaded after mk.css and consumes ITS tokens only: no raw hex
   below, no second palette. Light + dark come free through
   mk.css's [data-mk-theme] switch; RTL comes free through
   logical properties.
   Bump ?v (config/marketplace.php asset_v) on every edit and
   keep the SW precache list in sync.

   P0-4/P0-5 ship the primitives the skeleton needs. L5 (T5-1…
   T5-3) owns everything below the "L5" marker — filter bar,
   cards, map. Keep additions token-driven.
   ============================================================ */

/* ---------- chips: cuisine filters, status pills ---------- */
.dir-chiprow {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 16px 20px;
}

.dir-chip {
  display: inline-flex;
  align-items: center;
  min-height: 40px;              /* ≥44px with padding — thumb target */
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--mk-surface);
  color: var(--mk-ink);
  border: 1px solid var(--mk-line);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
}

.dir-chip:hover,
.dir-chip:focus-visible {
  background: var(--mk-surface-2);
  border-color: var(--mk-line-2);
  color: var(--mk-ink);
}

.dir-chip:focus-visible {
  outline: 2px solid var(--mk-primary);
  outline-offset: 2px;
}

.dir-chip.is-on {
  background: var(--mk-primary);
  border-color: var(--mk-primary);
  color: var(--mk-primary-ink);
}

/* An unclaimed listing reads as provisional, not as a live store. */
.dir-chip--muted {
  background: transparent;
  color: var(--mk-ink-3);
  border-style: dashed;
  font-weight: 500;
}

/* DIRECTORY T4-4: paid placement must always be labelled, never silent (the
   failure mode that damaged Yelp's reputation) — a subtle tint, not a loud
   badge, so it reads as "sponsored" rather than "best". */
.dir-chip--featured {
  background: color-mix(in srgb, var(--mk-primary) 14%, var(--mk-surface));
  color: var(--mk-primary);
  border-color: color-mix(in srgb, var(--mk-primary) 40%, var(--mk-line));
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .dir-chip { transition: none; }
}

/* ---------- L1 T1-3: SEO grid extras (city/cuisine pages) ---------- */
/* The claimed-store card is the existing mk-storecard partial — no new CSS
   needed there. This modifier only mutes the SAME frame for an unclaimed
   listing (grey border, no rating/favorite UI — those simply aren't
   rendered by the unclaimed partial, this only handles the frame). */
.mk-storecard--muted {
  border: 1px dashed var(--mk-line-2);
  background: var(--mk-surface);
}

.mk-storecard--muted .mk-storecard__title {
  color: var(--mk-ink-2);
}

.dir-pagination {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-block: 20px;
}

.dir-attribution-line {
  margin-block-start: 24px;
  text-align: center;
}

/* ---------- L2 (T2-1…T2-4): store reviews ---------- */
/* Rating summary — shared by the store page header sheet, the reviews
   section and (via the same partial) the explore card meta line. Stars/
   histogram bars reuse mk.css's .mk-stars* primitives; only the review-
   specific shell lives here. */
.dir-revsummary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px;
  margin-block-end: 16px;
}

.dir-revavg {
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
}

.dir-revavg small {
  font-size: 14px;
  font-weight: 600;
  color: var(--mk-ink-3);
}

/* One review card: avatar initial, name row, criteria mini-row, body,
   photo strip, helpful button, nested owner reply. */
.dir-review {
  border-block-start: 1px solid var(--mk-line);
  padding-block: 16px;
}

.dir-review:first-child {
  border-block-start: 0;
  padding-block-start: 0;
}

.dir-review__head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.dir-review__avatar {
  inline-size: 36px;
  block-size: 36px;
  border-radius: 999px;
  background: var(--mk-surface-2);
  color: var(--mk-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.dir-review__verified {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mk-cta);
}

.dir-review__criteria {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 12px;
  color: var(--mk-ink-3);
  margin-block-start: 6px;
}

.dir-review__body {
  margin-block-start: 8px;
  white-space: pre-line;
}

.dir-review__photos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block-start: 10px;
}

.dir-review__photos img {
  inline-size: 72px;
  block-size: 72px;
  object-fit: cover;
  border-radius: 10px;
}

.dir-review__helpful {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 10px;
  margin-block-start: 8px;
  border-radius: 999px;
  border: 1px solid var(--mk-line);
  background: var(--mk-surface);
  color: var(--mk-ink-2);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}

.dir-review__helpful:hover,
.dir-review__helpful:focus-visible {
  border-color: var(--mk-line-2);
}

.dir-review__helpful.is-on {
  background: var(--mk-primary);
  border-color: var(--mk-primary);
  color: var(--mk-primary-ink);
}

.dir-review__reply {
  margin-block-start: 10px;
  padding: 10px 14px;
  border-inline-start: 3px solid var(--mk-primary);
  background: var(--mk-surface-2);
  border-radius: 0 10px 10px 0;
}

@media (prefers-reduced-motion: reduce) {
  .dir-review__helpful { transition: none; }
}


/* ---------- L3 (T3-3): unclaimed listing page ---------- */
/* The markup for these shipped without CSS (that lane did not touch assets/),
   so the page rendered as unstyled flow content with a default 300x150
   iframe. Token-driven, logical properties only. */
.dir-biz {
  max-inline-size: 900px;
  margin-inline: auto;
}

.dir-biz-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-block: 20px;
}

@media (min-width: 720px) {
  .dir-biz-grid { grid-template-columns: 1fr 1fr; }
}

.dir-biz-facts {
  padding: 16px 18px;
}

.dir-fact {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-block: 0 12px;
  color: var(--mk-ink-2);
  line-height: 1.5;
}

.dir-fact:last-child { margin-block-end: 0; }

.dir-fact__icon {
  flex-shrink: 0;
  font-style: normal;
  line-height: 1.5;
}

.dir-fact a { color: var(--mk-ink); }

.dir-biz-map {
  overflow: hidden;
  padding: 0;
  min-block-size: 220px;
}

.dir-biz-map .leaflet-container {
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 220px;
  border-radius: inherit;
  background: var(--mk-surface-2);
}

.dir-claim-cta {
  padding: 20px;
  text-align: center;
}

.dir-claim-cta__title {
  font-size: 20px;
  font-weight: 800;
  margin-block-end: 6px;
}

.dir-claim-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-block-start: 14px;
}

.dir-claim-cta__actions .mk-btn { min-height: 44px; }

.dir-attribution {
  margin-block-start: 24px;
  text-align: center;
}

/* ---------- L5 (T5-1…T5-3) owns everything below ---------- */

/* ---------- toolbar: filter toggle + list/map ---------- */
.dir-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-block-end: 14px;
}

/* The filter TOGGLE button only makes sense once JS can open/close the
   sheet it controls — without JS the sheet already renders inline below, so
   the button stays hidden and adds nothing to tab order. */
.dir-filtertoggle {
  display: none;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding-inline: 16px;
  border-radius: 999px;
  border: 1px solid var(--mk-line-2);
  background: var(--mk-surface);
  color: var(--mk-ink);
  font-weight: 600;
  font-size: 14px;
}
html.mk-js .dir-filtertoggle { display: inline-flex; }
.dir-filtertoggle:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: 2px; }

.dir-filterdot {
  inline-size: 8px;
  block-size: 8px;
  border-radius: 50%;
  background: var(--mk-primary);
  display: inline-block;
}

.dir-viewtoggle {
  display: inline-flex;
  margin-inline-start: auto;
  border: 1px solid var(--mk-line-2);
  border-radius: 999px;
  overflow: hidden;
}

.dir-viewbtn {
  min-height: 44px;
  min-width: 44px;
  padding-inline: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mk-ink-2);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
}
.dir-viewbtn.is-on { background: var(--mk-primary); color: var(--mk-primary-ink); }
.dir-viewbtn:focus-visible { outline: 2px solid var(--mk-primary); outline-offset: -2px; }

/* ---------- filter sheet: inline block (no-JS) → bottom sheet (JS) ---------- */
.dir-filtersheet {
  background: var(--mk-elev);
  border: 1px solid var(--mk-line);
  border-radius: var(--mk-r-lg);
  margin-block-end: 18px;
}
.dir-filtersheet[hidden] { display: none; }
.dir-filtersheet .mk-sheet__grab { display: none; }

html.mk-js .dir-filtersheet {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 60;
  margin-block-end: 0;
  border-radius: var(--mk-r-sheet) var(--mk-r-sheet) 0 0;
  max-block-size: 82vh;
  overflow-y: auto;
  box-shadow: var(--mk-shadow-sheet);
  transform: translateY(100%);
  transition: transform var(--mk-t-sheet, 380ms) var(--mk-ease, ease);
}
html.mk-js .dir-filtersheet.is-open { transform: translateY(0); }
html.mk-js .dir-filtersheet .mk-sheet__grab { display: block; margin-block: 8px auto; inline-size: 40px; block-size: 4px; border-radius: 999px; background: var(--mk-line-2); }

.dir-filtersheet__panel { padding: 4px 18px 18px; }
.dir-filtergroup { margin-block-end: 16px; }
.dir-filtergroup > b { display: block; margin-block-end: 8px; font-size: 13px; color: var(--mk-ink-2); }
.dir-radiorow { display: flex; flex-wrap: wrap; gap: 8px; }
.dir-radiorow .dir-chip { cursor: pointer; }
.dir-radiorow .dir-chip input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.dir-filtergroup .dir-chip:has(input:focus-visible) { outline: 2px solid var(--mk-primary); outline-offset: 2px; }

/* ---------- open-now badge ---------- */
.dir-openbadge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  margin-block-start: 4px;
}
.dir-openbadge i { inline-size: 7px; block-size: 7px; border-radius: 50%; display: inline-block; }
.dir-openbadge.is-open { color: var(--mk-cta); }
.dir-openbadge.is-open i { background: var(--mk-cta); }
.dir-openbadge.is-closed { color: var(--mk-ink-3); }
.dir-openbadge.is-closed i { background: var(--mk-ink-3); }

.dir-cardcuisines { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 4px; }
.dir-chip--sm { min-height: 26px; padding: 3px 10px; font-size: 12px; font-weight: 500; }

/* ---------- results grid ---------- */
.dir-grid { display: grid; gap: 18px; grid-template-columns: 1fr; padding-block: 8px 16px; }
@media (min-width: 640px) { .dir-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dir-grid { grid-template-columns: repeat(3, 1fr); } }

/* ---------- unclaimed listing card ---------- */
.dir-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  padding: 16px;
  border-radius: var(--mk-r);
  text-decoration: none;
  color: var(--mk-ink);
  min-height: 44px;
}
.dir-card--muted {
  background: transparent;
  border: 1px dashed var(--mk-line-2);
}
.dir-card--muted:hover, .dir-card--muted:focus-visible { border-color: var(--mk-primary); }
.dir-card__body { display: flex; flex-direction: column; gap: 4px; }
.dir-card__title { font-weight: 700; font-size: 15px; }
.dir-card__badge { align-self: flex-start; margin-block-start: 2px; }
.dir-card__meta { font-size: 13px; color: var(--mk-ink-3); }
.dir-card__cta {
  font-size: 13px;
  color: var(--mk-ink-2);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-start: 8px;
  border-block-start: 1px solid var(--mk-line);
}
.dir-card__cta b { color: var(--mk-primary); }

.dir-unclaimed-rail { margin-block-start: 22px; }

/* ---------- pagination ---------- */
.dir-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-block: 8px 20px;
}

/* ---------- map ---------- */
.dir-mapwrap {
  position: relative;
  block-size: 62vh;
  min-block-size: 340px;
  border-radius: var(--mk-r-lg);
  overflow: hidden;
  margin-block-end: 18px;
  background: var(--mk-surface-2);
}
@media (min-width: 1024px) { .dir-mapwrap { block-size: 72vh; } }

/* Wheel-zoom affordance: shown only while a PLAIN wheel is used over the map,
   which is the moment the reader needs to know the gesture exists. Sits above
   the tiles but below Leaflet's own controls, and never intercepts a pointer —
   it is a label, not a shield. */
.dir-map-hint {
  position: absolute;
  inset: 0;
  z-index: 450;
  display: none;
  place-items: center;
  padding: 16px;
  text-align: center;
  font-weight: 700;
  font-size: 14.5px;
  color: #fff;
  background: rgba(6, 8, 9, .55);
  pointer-events: none;
  opacity: 0;
}
.dir-mapwrap.is-hinting .dir-map-hint { display: grid; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .dir-map-hint { transition: opacity .18s var(--mk-ease, ease); }
}
/* No wheel to trap on a touch-only device, and pinch already zooms. */
@media (hover: none) and (pointer: coarse) {
  .dir-map-hint { display: none !important; }
}

.dir-mapwrap .leaflet-popup-content-wrapper,
.dir-mapwrap .leaflet-popup-tip {
  background: var(--mk-elev);
  color: var(--mk-ink);
}
.dir-pin-cluster {
  background: var(--mk-primary);
  color: var(--mk-primary-ink);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  box-shadow: var(--mk-shadow-sm);
}
.dir-pin-cluster--unclaimed { background: var(--mk-ink-3); color: var(--mk-bg); }
.dir-pin-dot {
  /* display:block is load-bearing — this is a <span>, and inline elements
     ignore inline-size/block-size, so the pin collapsed to a sliver. Only
     visible at zoom levels where a marker is NOT clustered, which is why the
     explore map never showed it. */
  display: block;
  inline-size: 16px;
  block-size: 16px;
  border-radius: 50%;
  background: var(--mk-primary);
  border: 2px solid var(--mk-cta-bg, #fff);
  box-shadow: var(--mk-shadow-sm);
}
.dir-pin-dot--unclaimed { background: var(--mk-ink-3); }

.dir-popup { min-inline-size: 180px; }
.dir-popup__title { font-weight: 700; margin-block-end: 4px; display: block; }
.dir-popup__link { color: var(--mk-primary); font-size: 13px; text-decoration: none; }

.dir-maperror {
  position: absolute;
  inset-block-start: 12px;
  inset-inline: 12px;
  background: var(--mk-danger);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--mk-r);
  font-size: 13px;
  text-align: center;
  z-index: 500;
}

/* ---------- skeleton (AJAX loading state) ---------- */
.dir-skel-grid { display: grid; gap: 18px; grid-template-columns: 1fr; padding-block: 8px 16px; }
@media (min-width: 640px) { .dir-skel-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .dir-skel-grid { grid-template-columns: repeat(3, 1fr); } }
.dir-skel-card { block-size: 220px; border-radius: var(--mk-r); }

@media (prefers-reduced-motion: reduce) {
  .dir-filtersheet, .dir-viewbtn, .dir-card { transition: none !important; }
}