/* =========================================================
   WOOTZ — Delivery & Installation
   Fulfillment radio-cards, OSM map picker, location card.

   Built entirely on the existing site.css tokens (--surface, --line, --accent,
   --r, --ease …), so this inherits the storefront's light/dark themes and its
   RTL/LTR behaviour without redefining a single colour. Everything here is
   logical-property based (inline-start/-end, margin-block) — the store is
   Arabic-first and must mirror cleanly.

   Also loaded by the admin fulfillment screens, which is why the map block is
   scoped to .wz-map rather than to the checkout.
   ========================================================= */

/* ── fulfillment method — radio cards ─────────────────────── */

.ff-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}

.ff-opt{
  position:relative;display:flex;flex-direction:column;gap:10px;cursor:pointer;
  border:1px solid var(--line);background:var(--surface-2);border-radius:var(--r);
  padding:16px 16px 15px;transition:.25s var(--ease)
}
.ff-opt:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.ff-opt input{position:absolute;opacity:0;width:0;height:0}

/* The whole card is the control; :has() gives the selected state without JS
   having to paint classes, which keeps the markup honest for a11y tooling. */
.ff-opt:has(input:checked){border-color:var(--accent);background:var(--accent-soft);box-shadow:0 0 0 1px var(--accent) inset}
.ff-opt input:focus-visible~.ff-top{outline:2px solid var(--accent);outline-offset:4px;border-radius:var(--r-sm)}

.ff-top{display:flex;align-items:center;gap:11px}

.ff-ic{
  flex:0 0 auto;display:grid;place-items:center;inline-size:38px;block-size:38px;
  border-radius:11px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--accent);transition:.25s var(--ease)
}
.ff-ic svg{inline-size:20px;block-size:20px}
.ff-opt:has(input:checked) .ff-ic{background:var(--accent);border-color:var(--accent);color:#fff}

.ff-title{display:flex;flex-direction:column;gap:2px;min-inline-size:0}
.ff-title b{font-size:.95rem;font-weight:600;line-height:1.35}
.ff-title small{font-size:12px;color:var(--text-3);line-height:1.6}

/* Selected tick, pinned to the card's trailing top corner. */
.ff-check{
  position:absolute;inset-block-start:14px;inset-inline-end:14px;
  inline-size:18px;block-size:18px;border-radius:50%;
  border:1.5px solid var(--line-strong);display:grid;place-items:center;transition:.2s var(--ease)
}
.ff-check::after{content:"";inline-size:8px;block-size:8px;border-radius:50%;background:var(--accent);transform:scale(0);transition:.2s var(--ease)}
.ff-opt:has(input:checked) .ff-check{border-color:var(--accent)}
.ff-opt:has(input:checked) .ff-check::after{transform:scale(1)}

.ff-price{
  font-family:var(--ff-mono);font-size:11.5px;letter-spacing:.3px;color:var(--text-2);
  padding-block-start:2px;margin-inline-start:49px
}
.ff-price.is-free{color:var(--premium-bright)}

/* "تركيب" chip on the summary lines the installer brings (mixed baskets). */
.ff-tag{
  display:inline-block;inline-size:max-content;margin-block-start:3px;padding:1px 7px;border-radius:999px;
  font-family:var(--ff-mono);font-size:10.5px;font-style:normal;letter-spacing:.3px;
  color:var(--accent);background:var(--accent-soft);border:1px solid var(--accent)
}

/* ── installation location panel ──────────────────────────── */

.ff-location{margin-block-start:16px}
.ff-location[hidden]{display:none}

.ff-location-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-block-end:10px}
.ff-location-head h4{margin:0;font-size:.9rem;font-weight:600}
.ff-location-head .req{font-family:var(--ff-mono);font-size:10px;letter-spacing:.4px;color:var(--rec)}

/* Confirmation card (§6): what was picked, plus the way back to the map. */
.ff-picked{
  display:flex;align-items:flex-start;gap:12px;
  border:1px solid var(--premium-line);background:var(--premium-soft);
  border-radius:var(--r-sm);padding:13px 15px;margin-block-start:12px
}
.ff-picked[hidden]{display:none}
.ff-picked .pin{flex:0 0 auto;color:var(--premium-bright);margin-block-start:2px}
.ff-picked .pin svg{inline-size:18px;block-size:18px}
.ff-picked .txt{display:flex;flex-direction:column;gap:3px;min-inline-size:0;flex:1}
.ff-picked .txt b{font-size:.9rem;font-weight:600;line-height:1.5}
.ff-picked .txt small{font-size:12px;color:var(--text-2);line-height:1.6;word-break:break-word}
.ff-picked .txt .coords{font-family:var(--ff-mono);font-size:10.5px;color:var(--text-3);letter-spacing:.2px}
.ff-picked .chg{
  flex:0 0 auto;background:none;border:0;padding:0;cursor:pointer;
  font:inherit;font-size:12px;font-weight:600;color:var(--accent);text-decoration:underline;text-underline-offset:3px
}
.ff-picked .chg:hover{color:var(--accent-press)}

/* ── map picker (shared: storefront + admin) ──────────────── */

.wz-map{position:relative;display:block}

.wz-map-search{position:relative;display:flex;gap:8px;margin-block-end:10px}

.wz-map-input{
  flex:1;min-inline-size:0;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-sm);padding:11px 13px;font:inherit;font-size:.9rem;
  transition:.2s var(--ease)
}
.wz-map-input:focus{outline:none;border-color:var(--accent);background:var(--surface);box-shadow:0 0 0 3px var(--accent-soft)}
.wz-map-input::placeholder{color:var(--text-3)}

.wz-map-locate{
  flex:0 0 auto;display:grid;place-items:center;inline-size:42px;block-size:42px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--text-2);
  border-radius:var(--r-sm);cursor:pointer;transition:.2s var(--ease)
}
.wz-map-locate:hover{border-color:var(--accent);color:var(--accent)}
.wz-map-locate svg{inline-size:18px;block-size:18px}
.wz-map-locate.is-loading{opacity:.5;pointer-events:none}
.wz-map-search.is-loading .wz-map-input{opacity:.7}

/* The results float over the map, so they need a solid panel. The site tokens
   (--surface, --line…) only exist on the storefront; the admin defines --br-*
   instead, so each falls back to the admin token, then to a plain colour —
   otherwise the list rendered transparent over the tiles in the admin. */
.wz-map-results{
  position:absolute;inset-block-start:calc(100% + 4px);inset-inline:0;z-index:1200;
  margin:0;padding:6px;list-style:none;max-block-size:260px;overflow-y:auto;
  border:1px solid var(--line-strong, var(--br-border, #d0d4da));
  background:var(--surface, var(--br-card, #fff));
  color:var(--text, var(--br-text, #1f2328));
  border-radius:var(--r-sm, 8px);
  box-shadow:var(--shadow, 0 12px 32px rgba(0,0,0,.28))
}
.wz-map-results[hidden]{display:none}
.wz-map-results li + li{border-block-start:1px solid var(--line, var(--br-border, #e6e8eb))}
.wz-map-results li button{
  display:block;inline-size:100%;text-align:start;background:none;border:0;cursor:pointer;
  font:inherit;font-size:13px;line-height:1.6;color:var(--text, var(--br-text, #1f2328));
  padding:9px 10px;border-radius:8px;transition:.15s var(--ease, ease)
}
.wz-map-results li button:hover,
.wz-map-results li button:focus-visible{
  outline:none;
  background:var(--accent-soft, rgba(var(--br-accent-rgb, 32, 165, 58), .12));
  color:var(--accent, var(--br-accent, #20a53a))
}
.wz-map-empty{padding:10px;font-size:13px;color:var(--text-3, var(--br-text2, #7b828b))}

.wz-map-canvas{
  block-size:300px;inline-size:100%;
  border:1px solid var(--line-strong);border-radius:var(--r-sm);
  background:var(--surface-2);overflow:hidden;
  /* Leaflet paints absolutely-positioned panes; without this the map's own
     stacking context can sit above the site header on scroll. */
  position:relative;z-index:0
}
.wz-map-hint{margin:8px 0 0;font-size:12px;color:var(--text-3);line-height:1.6}
.map-fallback{margin:0;padding:14px;border:1px dashed var(--line-strong);border-radius:var(--r-sm);font-size:13px;color:var(--text-2)}

/* Leaflet's own chrome, restyled to the site's surfaces rather than its
   default white — a white attribution strip on the dark theme reads as a bug. */
.wz-map .leaflet-container{font-family:inherit;background:var(--surface-2)}
.wz-map .leaflet-control-attribution{
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  color:var(--text-3);font-size:10px
}
.wz-map .leaflet-control-attribution a{color:var(--text-2)}
.wz-map .leaflet-bar a{background:var(--surface);color:var(--text);border-color:var(--line-strong)}
.wz-map .leaflet-bar a:hover{background:var(--surface-2);color:var(--accent)}

/* ── mobile ───────────────────────────────────────────────── */

@media (max-width:640px){
  .ff-options{grid-template-columns:1fr}
  .ff-price{margin-inline-start:0}
  .wz-map-canvas{block-size:260px}
  .ff-picked{flex-wrap:wrap}
  .ff-picked .chg{margin-inline-start:30px}
}