/* =============================================================================
   Ordering Redesign — shared route-map engine styles (Maps campaign KA1)
   -----------------------------------------------------------------------------
   Styles for the DOM the engine (menu/redesign_map.js) injects into a host box
   (.gzo-co-map--live on the checkout, .gzo-od-map--live on the order detail —
   wired in KA2/KA3): a real Leaflet canvas + status line + legend + footer row
   («Route öffnen» + «Karte ausblenden» consent revoke). Marker art ports the
   legacy delivery-map vocabulary (origin = restaurant logo disc, destination =
   dark name chip, vehicle = primary truck disc) onto the redesign tokens.
   The canvas keeps direction:ltr — Leaflet pane math is coordinate-based; the
   chip text stays bidi-safe via unicode-bidi:plaintext.
   ========================================================================== */

/* ---- host variants -------------------------------------------------------
   The checkout/history boxes (.gzo-co-map/.gzo-od-map) are 118/130px decorative
   frames; when they host the REAL engine they grow to content (canvas + status
   + legend + footer). Prefixed with .gz-order to outrank the base rules. */
.gz-order .gzo-co-map--real,
.gz-order .gzo-od-map--real {
  height: auto;
  background: var(--gzo-card, #fff);
}
/* PM3: the checkout placeholder mirrors the real box anatomy (canvas/status/
   legend/foot classes) so the placeholder→real swap keeps the same height —
   it grows to content exactly like --real; the decorative grid/pin sit
   inside the canvas-height box. */
.gz-order .gzo-co-map--skel {
  height: auto;
  background: var(--gzo-card, #fff);
}
.gz-order .gzo-co-map__skelcanvas {
  position: relative;
  background: #E9EDE4;
  overflow: hidden;
}
@media (min-width: 1024px) {
  .gz-order .gzo-co-map--real,
  .gz-order .gzo-od-map--real,
  .gz-order .gzo-co-map--skel {
    --gzo-map-h: 230px;
  }
}
.gz-order .gzo-co-map--note {
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: #fbf8f2;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gzo-text-2, #6b7280);
}
.gz-order .gzo-co-map--note .gzo-co-map__note-ic {
  width: 16px;
  height: 16px;
  flex: none;
  color: var(--gzo-muted, #9ca3af);
}
.gz-order .gzo-od-map--note {
  height: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  background: #fbf8f2;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gzo-text-2, #6b7280);
}

/* ---- courier contact row (order detail, KA3) ------------------------------ */
.gz-order .gzo-od-courier {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
  padding: 11px 13px;
  background: var(--gzo-card, #fff);
  border: 1px solid var(--gzo-border, #e5e0d8);
  border-radius: 13px;
}
.gz-order .gzo-od-courier__note {
  font-size: 12px;
  line-height: 1.45;
  color: var(--gzo-text-2, #6b7280);
}
.gz-order .gzo-od-courier__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 14px;
  border-radius: 999px;
  background: var(--gzo-ink, #1f2937);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  text-decoration: none;
}
.gz-order .gzo-od-courier__ic {
  width: 15px;
  height: 15px;
}

.gzo-map__canvas {
  position: relative;
  isolation: isolate; /* cage Leaflet's internal z-indexes below the SPA chrome */
  width: 100%;
  height: var(--gzo-map-h, 190px);
  background: #e9ede4;
  direction: ltr;
}
/* L.map() adds .leaflet-container ON the canvas element itself — compound
   selector (no descendant space), and (0,2,0) outranks leaflet.css's own
   .leaflet-container font rule regardless of its lazy-load order. Without
   this the marker chips rendered Leaflet's Helvetica (Arabic lost Cairo).
   NO width/height here: the base .gzo-map__canvas rule owns the sizing
   (a height:100% at this specificity collapsed the canvas to 0). */
.gzo-map__canvas.leaflet-container {
  background: #e9ede4;
  font: inherit;
}
.gzo-map__canvas .leaflet-control-attribution {
  font-size: 10px;
  line-height: 1.3;
  background: rgba(255, 255, 255, 0.75);
}
.gzo-map__canvas .leaflet-control-attribution a {
  color: var(--gzo-muted, #6b7280);
}

.gzo-map__status {
  padding: 9px 13px 0;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--gzo-text, #374151);
}
.gzo-map__status:empty {
  display: none;
}
.gzo-map__legend {
  padding: 4px 13px 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--gzo-muted, #6b7280);
}
.gzo-map__legend:empty {
  display: none;
}
.gzo-map__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 8px 13px 11px;
}
.gzo-map__open {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--gzo-primary, #c2410c);
  text-decoration: none;
}
.gzo-map__open:hover,
.gzo-map__open:focus-visible {
  text-decoration: underline;
}
.gzo-map__revoke {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--gzo-muted, #6b7280);
  text-decoration: underline;
  cursor: pointer;
}
.gzo-map__revoke:hover,
.gzo-map__revoke:focus-visible {
  color: var(--gzo-text, #374151);
}
/* consent-withdrawal affordance on the NON-map states (note/placeholder) */
.gzo-map__revoke--mini {
  margin-inline-start: auto;
  flex: none;
  white-space: nowrap;
}
.gzo-map__revoke--overlay {
  position: absolute;
  inset-block-start: 7px;
  inset-inline-end: 9px;
  background: rgba(255, 255, 255, 0.85);
  border-radius: 6px;
  padding: 3px 7px;
}

/* Pre-existing checkout placeholder pin mixed a logical inset with a physical
   translate → one pin-width off-center under RTL (review finding). Pin to the
   physical center exactly like the history twin; this file loads after
   ordering_redesign_checkout.css so the equal-specificity override wins. */
.gz-order .gzo-co-map__pin {
  inset-inline-start: auto;
  left: 50%;
}

/* Consent overlays gained two sub-lines (clarifier + provider/privacy link) —
   the 118/130px fixed frames would clip them. Let the consent state grow: the
   hatch stays on the box, the overlay flows in-page instead of absolute. */
.gz-order .gzo-co-map--consent,
.gz-order .gzo-od-map--consent {
  height: auto;
  min-height: 118px;
}
.gz-order .gzo-co-map--consent .gzo-co-map__overlay,
.gz-order .gzo-od-map--consent .gzo-od-map__overlay {
  position: static;
  inset: auto;
}

/* consent overlay sub-lines (clarifier + provider/privacy link) */
.gzo-co-map__sub,
.gzo-od-map__sub {
  font-size: 11px;
  line-height: 1.45;
  color: var(--gzo-text-2, #6b7280);
  margin-bottom: 7px;
  max-width: 340px;
}
.gzo-co-map__ds,
.gzo-od-map__ds {
  color: var(--gzo-primary, #c2410c);
  text-decoration: underline;
}

/* ---- markers (Leaflet divIcon content) ----------------------------------- */
.gzo-map-icon {
  background: none;
  border: none;
}
.gzo-map-marker--origin {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
  border: 2px solid #fff;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}
.gzo-map-marker--origin img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gzo-map-dest {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 190px;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--gzo-ink, #1f2937);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.3);
  transform: translate(-50%, -135%);
}
.gzo-map-dest__dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gzo-primary, #c2410c);
}
.gzo-map-dest__text {
  overflow: hidden;
  text-overflow: ellipsis;
  unicode-bidi: plaintext; /* Arabic names inside the LTR map stay readable */
}
.gzo-map-vehicle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--gzo-primary, #c2410c);
  color: var(--gzo-primary, #c2410c);
  box-shadow: 0 2px 8px rgba(15, 23, 42, 0.28);
}
.gzo-map-vehicle svg {
  width: 19px;
  height: 19px;
}