/* ══════════════════════════════════════════════════════════════════
   MAP COMPONENT — "Where will you eat?" and, later, the home-address
   pin. Drawn as SVG so it needs no API key and works offline; in the
   real app this layer is Google Maps with the same chrome on top.
   ══════════════════════════════════════════════════════════════════ */

.map{position:relative;flex:1;overflow:hidden;background:#F2F1ED;min-height:0}
.map__canvas{position:absolute;inset:0;width:100%;height:100%}

/* map paint — kept close to Google's light scheme so the swap is invisible */
.map .land{fill:#F2F1ED}
.map .block{fill:#FAF9F6;stroke:#E8E5DD;stroke-width:1}
.map .green{fill:#E7F0E2}
.map .road-case{stroke:#E4E1D8;stroke-linecap:round}
.map .road{stroke:#FFFFFF;stroke-linecap:round}
.map .road-lbl{fill:#9A968C;font-size:9px;font-weight:500;letter-spacing:.2px}
.map .poi-lbl{fill:#8C99A8;font-size:8.5px}

/* pins */
.pin{cursor:pointer;transition:transform var(--dur) var(--ease)}
.pin:hover{transform:translateY(-2px)}
.pin__body{fill:var(--secondary)}
.pin--on .pin__body{fill:var(--primary)}
.pin__dot{fill:#fff}
.pin__lbl{font-size:9px;font-weight:500;fill:var(--secondary);paint-order:stroke;
  stroke:#F2F1ED;stroke-width:3px;stroke-linejoin:round}
.pin--on .pin__lbl{fill:var(--primary)}
.pin__shadow{fill:rgba(19,28,59,.16)}

/* the centred callout, as in the reference screenshot */
.map__callout{position:absolute;left:50%;transform:translateX(-50%);
  background:rgba(16,15,13,.88);color:#fff;font-size:var(--fs-caption);
  padding:8px 13px;border-radius:10px;white-space:nowrap;pointer-events:none;z-index:3}
.map__callout::after{content:'';position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:6px solid transparent;border-top-color:rgba(16,15,13,.88)}

/* floating controls */
.map__fabs{position:absolute;right:12px;z-index:4;display:flex;flex-direction:column;gap:8px}
.map__fab{width:40px;height:40px;border-radius:50%;background:var(--white);
  box-shadow:0 3px 10px rgba(19,28,59,.20);display:grid;place-items:center;font-size:16px;
  color:var(--secondary)}
.map__fab--on{background:var(--secondary);color:var(--white)}

/* top bar — close + one search box, nothing else */
.maptop{display:flex;align-items:center;gap:10px;padding:2px var(--screen-pad) 11px;flex-shrink:0}
.maptop__x{width:34px;height:34px;border:1px solid var(--neutral-100);border-radius:50%;
  display:grid;place-items:center;font-size:14px;color:var(--secondary);flex-shrink:0}
.search--map{flex:1;min-height:40px}
.search--map input{padding:10px 0}
.search__clear{color:var(--text-muted);font-size:13px;padding:4px}

/* the "you are here" pin, centred like a delivery-address picker */
.map__me{position:absolute;left:50%;top:50%;transform:translate(-50%,-100%);font-size:30px;
  z-index:2;filter:drop-shadow(0 4px 6px rgba(19,28,59,.28))}

/* results cover the map only while typing */
.map__overlay{position:absolute;inset:0;background:var(--white);z-index:8;overflow-y:auto;
  padding:6px var(--screen-pad) 20px}
.map__grp{font-size:10px;letter-spacing:.8px;text-transform:uppercase;color:var(--text-muted);
  font-weight:500;margin:14px 0 2px}
.map__grp:first-child{margin-top:6px}

/* bottom bar — what happens next, changes with what's selected */
.mapbar{flex-shrink:0;background:var(--white);border-top:1px solid var(--hairline);
  padding:12px var(--screen-pad) max(16px,env(safe-area-inset-bottom));
  box-shadow:0 -6px 20px rgba(19,28,59,.07)}
.mapbar__sel{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.mapbar__clear{color:var(--text-muted);font-size:13px;padding:6px}

/* results / nearby sheet docked at the bottom of the map */
.mapsheet{background:var(--white);border-radius:var(--rd24) var(--rd24) 0 0;
  box-shadow:var(--sh-sheet);padding:8px var(--screen-pad) 14px;flex-shrink:0;
  max-height:52%;overflow-y:auto;position:relative;z-index:6}
.mapsheet__grab{width:38px;height:4px;border-radius:2px;background:#E4E1DA;margin:4px auto 10px}

/* list-mode fallback (same data, no map) */
.map-listmode{flex:1;overflow-y:auto;padding:0 var(--screen-pad)}