/*!
 * Vendor location card — [menu_location]
 * Design ref: baly-design-system/preview/components-vendor-location-map.html
 *
 * Branded card shell + header (pin badge, title, address, directions button),
 * a map viewport with a branded pin + vendor label and custom zoom/recenter
 * controls. The viewport hosts a real vector map (MapLibre GL + OpenFreeMap)
 * with a custom minimal Baly-design-language style, or a Leaflet raster
 * fallback on devices without WebGL. Design --color-*/--radius-*/--shadow-*
 * tokens are translated to their --bf-* equivalents; --font-*/--duration-*
 * become literals. Scoped under .menulocation.
 */

.menulocation{
  font-family:var(--bf-font);
  color:var(--bf-fg);
  direction:rtl;
  margin:24px 0;
  -webkit-font-smoothing:antialiased;
}
.menulocation *{box-sizing:border-box}

/* ── Card shell ─────────────────────────────────── */
.menulocation .loc-card{
  background:var(--bf-white);
  border:1px solid var(--bf-border-subtle);
  border-radius:var(--bf-radius-2xl);
  box-shadow:var(--bf-shadow-2);
  overflow:clip;
}

/* ── Header ─────────────────────────────────────── */
.menulocation .loc-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:20px 28px;
}
.menulocation .loc-head-main{display:flex;align-items:flex-start;gap:14px;min-width:0}
.menulocation .loc-pin-badge{
  width:44px;height:44px;flex:0 0 auto;border-radius:var(--bf-radius-md);
  background:var(--bf-brand-lighter);color:var(--bf-brand);
  display:flex;align-items:center;justify-content:center;
}
.menulocation .loc-pin-badge svg{width:22px;height:22px}
.menulocation .loc-titles{min-width:0}
.menulocation .loc-title{
  margin:0;font-size:19px;font-weight:700;line-height:1.25;
  color:var(--bf-fg);letter-spacing:-.01em;
}
.menulocation .loc-addr{
  margin:4px 0 0;font-size:14px;font-weight:400;
  color:var(--bf-grey-600);line-height:1.45;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.menulocation .loc-directions{
  flex:0 0 auto;display:inline-flex;align-items:center;gap:8px;
  background:var(--bf-brand);color:#fff;border:none;cursor:pointer;text-decoration:none;
  font-family:inherit;font-size:14px;font-weight:700;
  padding:11px 18px;border-radius:var(--bf-radius-pill);
  box-shadow:var(--bf-shadow-brand);
  transition:background .15s var(--bf-ease-out),transform .15s var(--bf-ease-out);
}
.menulocation .loc-directions:hover{background:var(--bf-brand-hover);transform:translateY(-1px)}
.menulocation .loc-directions:active{background:var(--bf-brand-active);transform:translateY(0)}
.menulocation .loc-directions svg{width:17px;height:17px}

/* ── Map viewport ───────────────────────────────── */
.menulocation .map-viewport{
  position:relative;
  height:460px;
  background:#F1F3F6;
  overflow:hidden;
  border-top:1px solid var(--bf-border-subtle);
}
/* MapLibre (or Leaflet fallback) container fills the viewport */
.menulocation .map{position:absolute;inset:0;background:#F1F3F6;}

/* faint vignette so controls/labels read clearly over the map */
.menulocation .map-fade{
  position:absolute;inset:0;pointer-events:none;z-index:400;
  background:linear-gradient(180deg,rgba(241,243,246,.55) 0%,rgba(241,243,246,0) 14%,rgba(241,243,246,0) 86%,rgba(241,243,246,.45) 100%);
}

/* ── Branded pin + vendor label (MapLibre/Leaflet marker element) ──
   IMPORTANT: do NOT set position here. MapLibre (.maplibregl-marker) and
   Leaflet (.leaflet-marker-icon) set position:absolute + the transform that
   places the marker at the coordinate. Forcing position:relative here
   overrode that and threw the pin off-screen (the "missing pin" bug). */
/* font-family must be set on the marker itself: MapLibre's CSS puts
   `font:…Helvetica Neue,Arial…` on .maplibregl-map, which the marker would
   otherwise inherit (dropping the brand font, and Arabic to a system font). */
.menulocation .baly-loc-pin{width:40px;height:52px;overflow:visible;will-change:transform;font-family:var(--bf-font)}
.menulocation .vendor-label{
  position:absolute;bottom:100%;left:50%;transform:translateX(-50%);
  margin-bottom:10px;
  display:flex;align-items:center;gap:10px;white-space:nowrap;
  background:#fff;border:1px solid var(--bf-border-subtle);
  border-radius:var(--bf-radius-pill);
  padding:7px 14px 7px 8px;
  box-shadow:var(--bf-shadow-2);
}
.menulocation .vendor-label .vl-logo{
  width:30px;height:30px;border-radius:var(--bf-radius-sm);flex:0 0 auto;
  background:#fff center/cover no-repeat;border:1px solid var(--bf-border-subtle);
}
.menulocation .vendor-label .vl-text{display:flex;flex-direction:column;line-height:1.15}
.menulocation .vendor-label .vl-name{font-size:13.5px;font-weight:700;color:var(--bf-fg)}
.menulocation .vendor-label .vl-sub{font-size:11.5px;font-weight:500;color:var(--bf-grey-500)}
.menulocation .vendor-label::after{
  content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-1px);
  width:14px;height:8px;background:#fff;
  border-right:1px solid var(--bf-border-subtle);border-bottom:1px solid var(--bf-border-subtle);
  clip-path:polygon(0 0,100% 0,50% 100%);
}
.menulocation .pin{position:relative;width:40px;height:52px;margin:0 auto}
.menulocation .pin .pin-shadow{
  position:absolute;left:50%;bottom:-3px;transform:translateX(-50%);
  width:22px;height:7px;border-radius:50%;
  background:rgba(10,10,10,.22);filter:blur(2px);
}
.menulocation .pin svg{position:relative;width:40px;height:52px;display:block;color:var(--bf-brand);
  filter:drop-shadow(0 6px 10px rgba(0,67,255,.28))}
.menulocation .pin .ping{
  position:absolute;left:50%;top:16px;width:18px;height:18px;
  transform:translate(-50%,-50%);border-radius:50%;
  background:var(--bf-brand);opacity:.35;
  animation:baly-loc-ping 2.4s var(--bf-ease-out) infinite;
}
@keyframes baly-loc-ping{
  0%{transform:translate(-50%,-50%) scale(1);opacity:.35}
  70%{transform:translate(-50%,-50%) scale(3.4);opacity:0}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){.menulocation .pin .ping{animation:none;opacity:0}}

/* ── Map UI — controls (anchored to viewport, NOT the map) ── */
.menulocation .map-ui{position:absolute;z-index:500;display:flex;flex-direction:column;gap:10px}
.menulocation .map-ui.bottom-start{bottom:18px;inset-inline-start:18px}

.menulocation .zoom-stack{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--bf-border-subtle);
  border-radius:var(--bf-radius-md);box-shadow:var(--bf-shadow-2);overflow:hidden;
}
.menulocation .zoom-stack button{
  width:44px;height:44px;border:none;background:#fff;cursor:pointer;
  color:var(--bf-fg);display:flex;align-items:center;justify-content:center;
  font-family:inherit;transition:background .15s var(--bf-ease-out);
}
.menulocation .zoom-stack button:hover{background:var(--bf-grey-100)}
.menulocation .zoom-stack button:active{background:var(--bf-brand-lighter);color:var(--bf-brand)}
.menulocation .zoom-stack button:disabled{color:var(--bf-grey-300);cursor:default;background:#fff}
.menulocation .zoom-stack button+button{border-top:1px solid var(--bf-border-subtle)}
.menulocation .zoom-stack svg{width:18px;height:18px}

.menulocation .icon-btn{
  width:44px;height:44px;border-radius:var(--bf-radius-md);
  background:#fff;border:1px solid var(--bf-border-subtle);
  box-shadow:var(--bf-shadow-2);cursor:pointer;color:var(--bf-brand);
  display:flex;align-items:center;justify-content:center;
  transition:background .15s var(--bf-ease-out),transform .15s var(--bf-ease-out);
}
.menulocation .icon-btn:hover{background:var(--bf-grey-50);transform:translateY(-1px)}
.menulocation .icon-btn:active{transform:translateY(0)}
.menulocation .icon-btn svg{width:20px;height:20px}

/* ── Map-engine chrome — hide attribution/logo/default controls ── */
.menulocation .maplibregl-ctrl-attrib,
.menulocation .maplibregl-ctrl-bottom-right,
.menulocation .maplibregl-ctrl-bottom-left,
.menulocation .maplibregl-ctrl-logo,
.menulocation .leaflet-control-attribution,
.menulocation .leaflet-control-zoom{display:none !important}
.menulocation .maplibregl-canvas{outline:none}

/* ── Responsive ─────────────────────────────────── */
@media (max-width:760px){
  .menulocation .loc-head{padding:16px 18px;flex-wrap:wrap}
  .menulocation .loc-directions .lbl{display:none}
  .menulocation .loc-directions{padding:11px}
  .menulocation .map-viewport{height:380px}
}