/* ═══════════════════════════════════════════════════════════════════════════
   zl-map-layers.css — the look of the zl-map model, applied to the platform
   map: the control cluster, the region and lens chips, the amenity filter
   panel, place search, landmark and airport markers, and the amenity popups.
   Uses the palette tokens zl-map.css defines on .zmap-page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE MAP IS THE PAGE (the model's full-bleed canvas) ──────────────────
   The side rail and the strip under the map are gone: the results live inside
   the map as the card slider below, so the canvas takes the whole width and
   the height the viewport can give it under the site navbar. */
.zmap-page .zmap{padding:0}
.zmap-page .zmap-in{max-width:none; margin:0; padding:0}
.zmap-page .zmap-head{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap}
.zmap-page .zmap-layout{display:block; grid-template-columns:none; gap:0}
.zmap-page .zmap-railslot,.zmap-page .zmap-railtoggle,.zmap-page #zmapRecs{display:none}
.zmap-page .zmap-canvas{height:calc(100dvh - var(--nav)); min-height:460px;
  border-radius:0; border:0; box-shadow:none}

/* ── the control cluster: one white card, 44px buttons, hairline dividers ── */
.zmap-page .zmap-dock{gap:0; overflow:hidden; border-radius:12px;
  background:rgba(255,255,255,.95); box-shadow:0 10px 15px -3px rgba(18,53,64,.10),0 4px 6px -4px rgba(18,53,64,.10);
  outline:1px solid rgba(18,53,64,.10); outline-offset:-1px}
.zmap-page .zmap-btn{position:relative; width:44px; height:44px; border:0; border-radius:0;
  background:transparent; box-shadow:none; color:#004F6C; transform:none}
.zmap-page .zmap-btn + .zmap-btn::before{content:""; position:absolute; top:0; left:50%;
  width:24px; height:1px; margin-left:-12px; background:rgba(18,53,64,.10)}
.zmap-page .zmap-btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round; display:block}
.zmap-page .zmap-btn:hover{background:#F1ECE1; color:#004F6C; transform:none}
.zmap-page .zmap-btn:active{background:#E3DCCB}
.zmap-page .zmap-btn.on{background:#004F6C; color:#fff}
.zmap-page .zmap-btn.on:hover{background:#00ABC7; color:#fff}
.zmap-page #zmapLocate.on{background:#00ABC7}
.zmap-page .zmap-btn.gold,
.zmap-page .zmap-btn[aria-expanded="true"]{background:#E6B563; color:#123540}
.zmap-page .zmap-btn.gold:hover,
.zmap-page .zmap-btn[aria-expanded="true"]:hover{background:#D9A54E; color:#123540}
.zmap-page .zmap-btn.busy svg{animation:zmapPulse 1s ease-in-out infinite}
@keyframes zmapPulse{50%{opacity:.35}}

/* ── region chips (the model's top row) ───────────────────────────────────── */
.zmap-chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; padding:2px 2px 4px;
  -webkit-overflow-scrolling:touch}
.zmap-chips::-webkit-scrollbar{display:none}
.zmap-chip{flex:none; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 14px;
  border:0; border-radius:999px; background:rgba(255,255,255,.92); color:#123540;
  box-shadow:0 1px 2px rgba(18,53,64,.08), inset 0 0 0 1px rgba(18,53,64,.10);
  font:inherit; font-size:13px; font-weight:700; white-space:nowrap; cursor:pointer;
  transition:background .15s, color .15s, transform .1s}
.zmap-chip:hover{background:#fff}
.zmap-chip:active{transform:scale(.95)}
.zmap-chip .dot{width:8px; height:8px; border-radius:50%; flex:none}
.zmap-chip .slogan{font-size:11px; font-weight:500; color:#5A6A72}
.zmap-chip svg{flex:none}
.zmap-chip.on{background:#00ABC7; color:#fff; box-shadow:none}
.zmap-chip.on .slogan{color:rgba(255,255,255,.8)}
.zmap-chip.ov.on{background:#004F6C}
@media (max-width:767px){ .zmap-chip .slogan{display:none} }

/* the experience lenses take the same chip shape */
.zmap-page .zmap-lens{height:36px; padding:0 14px; border:0; border-radius:999px;
  background:rgba(255,255,255,.92); color:#123540; font-size:13px; font-weight:700;
  box-shadow:0 1px 2px rgba(18,53,64,.08), inset 0 0 0 1px rgba(18,53,64,.10)}
.zmap-page .zmap-lens:hover{background:#fff; transform:none}
.zmap-page .zmap-lens.on{background:#00ABC7; color:#fff; box-shadow:none}
.zmap-page .zmap-2nd{height:36px; border-radius:999px}
@media (max-width:767px){ .zmap-page .zmap-lens,.zmap-page .zmap-2nd{height:38px} }

/* ══ مفتاحُ المرافق يفتح من جهةِ زرِّه (المالكة 2026-10-01) ════════════
   `.zmap-sheetpop` تستعمل `inset-inline-start`، والرصيفُ `inset-inline-end`
   — فالجهتان متعاكستان دائمًا: في العربيّة الزرُّ يسارًا والمفتاحُ يفتح
   يمينًا — تسعَ مئةِ بكسلٍ بعيدًا عمّا ضُغط. قِيس حيًّا: الزرّ 14→58،
   والمفتاح 937→1207. الآن يفتح من الجهةِ نفسِها، بإزاحةِ 68px تتخطّى
   الرصيفَ بفاصلِ 10px، و`top` أسفلَ صفِّ العدسات — تقاطعٌ صفرٌ مقيس.
   ⛔ ولا نظامَ تموضعٍ موازٍ، وعلى الجوّال تبقى ورقةً سفليّةً كما هي. */
@media (min-width:768px){
  .zmap-page #zmapLayersSheet{ inset-inline-start:auto; inset-inline-end:68px; top:180px; }
}
/* وعلى الجوّال: ورقةٌ سفليّةٌ كأخواتِها. القاعدةُ العامّةُ تقول
   `width:auto; inset-inline:0`، لكنّ عرضًا ثابتًا 270px أدناه كان يغلبُها بلا
   استعلامِ وسائط، فتصير لوحًا عائمًا بعرضِ 270 يقطعُ البطاقاتِ نصفًا.
   قِيس حيًّا عند 390px: هي [120,543,270,307] وأختُها [0,593,390,257]. */
@media (max-width:767px){
  .zmap-page #zmapLayersSheet{ width:auto; }
}

/* three rows float over the map now, so the popovers open below them */
.zmap-page .zmap-sheetpop{top:164px}

/* ── phones: no «استكشف» bar — the sheet appears only for a selection ─────── */
/* the preview card moves up, because the strip owns the bottom now */
@media (min-width:768px){
  .zmap-page .zmap-detail{top:170px; bottom:auto; max-height:calc(100% - 200px); overflow:auto}
  /* while the strip is up it keeps clear of it */
  .zmap-page .picks-open .zmap-detail{max-height:calc(100% - 430px)}
}

@media (max-width:767px){
  .zmap-page .zmap-card{width:240px}
  .zmap-page .zmap-slider{inset-inline-start:10px; inset-inline-end:68px; bottom:10px}
  .zmap-page .zmap-sheet:not(.showdetail){display:none}
  .zmap-page .zmap-grab .sum{display:none}
  .zmap-page .zmap-dock{bottom:14px}
  /* above the cluster, on the map's own side — the other side is the site's
     widget lane (e-visa, support) */
  .zmap-page .zmap-weather{top:auto; bottom:330px; inset-inline-end:10px}
  .zmap-page .zmap-sheetpop{top:auto}
}

/* the basemap is non-interactive, so the pointer is set from zl-map.js */
.leaflet-container.zmap-over-amenity{cursor:pointer}

/* ── the card slider (the model's bottom strip) ──────────────────────────── */
.zmap-slider{position:absolute; z-index:620; bottom:14px; inset-inline-start:14px;
  inset-inline-end:72px; pointer-events:none}
.zmap-cards{display:flex; gap:12px; overflow-x:auto; padding:2px 2px 6px; pointer-events:auto;
  scroll-snap-type:x proximity; scrollbar-width:none; -webkit-overflow-scrolling:touch}
.zmap-cards::-webkit-scrollbar{display:none}
.zmap-card{flex:none; width:196px; scroll-snap-align:start; display:flex; flex-direction:column;
  background:rgba(255,255,255,.96); border-radius:16px; backdrop-filter:blur(6px);
  box-shadow:0 10px 15px -3px rgba(18,53,64,.16),0 4px 6px -4px rgba(18,53,64,.12);
  border-top:3px solid var(--cc,#00ABC7); overflow:hidden}
.zmap-card .ph{position:relative; display:block; width:100%; height:74px; border:0; padding:0;
  background:linear-gradient(135deg,rgba(0,171,199,.12),rgba(0,79,108,.12)); cursor:pointer}
.zmap-card .ph img{width:100%; height:100%; object-fit:cover; display:block}
.zmap-card .ph .lt{display:grid; place-items:center; width:100%; height:100%;
  font-size:1.5rem; font-weight:800; color:#008BA6}
.zmap-card .ph .rec{position:absolute; top:6px; inset-inline-start:6px; width:20px; height:20px;
  display:grid; place-items:center; border-radius:999px; background:#E6B563; color:#3A2A08;
  font-size:11px; font-weight:800}
.zmap-card .ph .cat{position:absolute; bottom:6px; inset-inline-end:6px; max-width:calc(100% - 12px);
  padding:2px 8px; border-radius:999px; background:var(--cc,#00ABC7); color:#fff;
  font-size:9.5px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zmap-card .b{display:flex; flex-direction:column; padding:7px 10px 9px}
.zmap-card h3{margin:0; font-size:12.5px; font-weight:700; line-height:1.38; color:#123540;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  min-height:2.76em}
.zmap-card .mt{margin:3px 0 0; font-size:10.5px; color:#4E6470; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis}
.zmap-card .pr{margin:2px 0 0; font-size:12px; font-weight:800; color:#B57F2A}
.zmap-card .pr.muted{font-weight:600; color:#8AA0A8}
.zmap-card .loc{margin-top:7px; height:28px; display:flex; align-items:center; justify-content:center;
  gap:5px; width:100%; border:0; border-radius:9px; background:rgba(0,171,199,.12);
  color:#008BA6; font:inherit; font-size:11px; font-weight:700; cursor:pointer}
.zmap-card .loc svg{width:12px; height:12px}
.zmap-card .loc:hover{background:rgba(0,171,199,.22)}
.zmap-card.on{outline:2px solid #E6B563; outline-offset:-2px}
/* the region header card */
.zmap-card.head{position:relative; width:168px; justify-content:center; padding:13px;
  background:linear-gradient(135deg,#004F6C,#008BA6); color:#fff; border:0;
  border-inline-start:4px solid var(--cc,#00ABC7)}
.zmap-card.head .ht{font-size:14px; font-weight:800; line-height:1.35}
.zmap-card.head .hs{margin-top:4px; font-size:10.5px; line-height:1.45; color:rgba(255,255,255,.85)}
.zmap-card.head .hc{margin-top:7px; font-size:10px; font-weight:700; color:#E6B563}
.zmap-card.head .hx{position:absolute; top:8px; inset-inline-end:8px; width:26px; height:26px;
  display:grid; place-items:center; border:0; border-radius:999px; background:rgba(255,255,255,.15);
  color:#fff; font:inherit; font-size:13px; cursor:pointer}
.zmap-card.head .hx:hover{background:rgba(255,255,255,.3)}
/* prev / next — desktop and tablet; a phone swipes */
.zmap-cnav{position:absolute; top:50%; transform:translateY(-50%); z-index:2; width:36px; height:36px;
  display:none; place-items:center; pointer-events:auto; border:0; border-radius:999px;
  background:rgba(255,255,255,.95); color:#004F6C; cursor:pointer;
  box-shadow:0 8px 20px rgba(18,53,64,.25)}
.zmap-cnav:hover{color:#00ABC7}
.zmap-cnav.prev{inset-inline-start:0}
.zmap-cnav.next{inset-inline-end:0}
.zmap-cnav[hidden]{display:none}
@media (min-width:768px){ .zmap-cnav:not([hidden]){display:grid} }
[dir="rtl"] .zmap-cnav svg{transform:scaleX(-1)}
/* ── DESKTOP: the strip is folded away behind one button ──────────────────── */
.zmap-picks{position:absolute; z-index:621; bottom:14px; left:50%; transform:translateX(-50%);
  display:none; align-items:center; gap:8px; height:40px; padding:0 18px; border:0;
  border-radius:999px; background:rgba(255,255,255,.96); color:#004F6C; cursor:pointer;
  font:inherit; font-size:13px; font-weight:800; backdrop-filter:blur(6px);
  box-shadow:0 10px 15px -3px rgba(18,53,64,.18),0 4px 6px -4px rgba(18,53,64,.12)}
.zmap-picks:hover{background:#fff; color:#00ABC7}
.zmap-picks:active{transform:translateX(-50%) scale(.96)}
.zmap-picksdown{position:absolute; z-index:2; top:-14px; left:50%; transform:translateX(-50%);
  display:none; place-items:center; width:30px; height:30px; border:0; border-radius:999px;
  pointer-events:auto; background:rgba(255,255,255,.96); color:#004F6C; cursor:pointer;
  box-shadow:0 8px 20px rgba(18,53,64,.22)}
.zmap-picksdown:hover{color:#00ABC7}
@media (min-width:768px){
  body.zmap-page .zmap-picks{display:inline-flex}
  body.zmap-page .zmap-slider{display:none}
  body.zmap-page .picks-open .zmap-slider{display:block; animation:zmapRise .2s cubic-bezier(.22,.9,.28,1)}
  body.zmap-page .picks-open .zmap-picks{display:none}
  body.zmap-page .picks-open .zmap-picksdown{display:grid}
}
@keyframes zmapRise{from{opacity:0; transform:translateY(18px)}to{opacity:1; transform:none}}

/* the strip steps aside for the phone sheet and for an open preview card */
body.zmap-sheet-open .zmap-slider{opacity:0; pointer-events:none}
.zmap-slider{transition:opacity .18s}

/* THE STRIP OWNS THE FOOT OF THE MAP. The site's own floating widgets —
   support, e-visa, the payment badge — are body-level and were sitting on top
   of the cards, so on this page they move above the strip. !important because
   two of them are positioned with inline styles by their own scripts. */
.zmap-page .whatsapp-float,
.zmap-page .zl-cfab{bottom:268px !important}
.zmap-page .zl-evisa-tab{bottom:268px}
/* while a preview card is open they step aside entirely — zl-map.css already
   says so; what was missing was the body class, now set for experiences too */

/* ── pins (the model's photo / letter pin, for everything on the map) ─────── */
/* the merge wears the same pin, so it is a real box again — zl-map.css collapses
   .zmap-group to 0x0 for the old overflowing pill */
.zmap-page .zmap-group.zmap-lpin{width:auto !important; height:auto !important}
.zmap-page .zmap-group.zmap-lpin::after{width:50px; height:63px; top:50%}
.zmap-page .zmap-pin.zmap-lpin::after{width:46px; height:56px; top:45%}
.zmap-page .zmap-pin.zmap-lpin svg{filter:none; transform-origin:50% 92%}
.zmap-page .zmap-pin.zmap-lpin:hover svg{transform:translateY(-2px) scale(1.06)}
.zmap-page .zmap-pin.zmap-lpin.sel svg{transform:scale(1.06); filter:drop-shadow(0 6px 12px rgba(230,181,99,.5))}

.zmap-page .zmap-lpin::after{top:40%}
.zmap-page .zmap-lpin svg{filter:none; transform-origin:50% 92%}
.zmap-page .zmap-lpin:hover svg{transform:translateY(-2px) scale(1.06)}
.zmap-page .zmap-lpin.sel svg{transform:scale(1.1)}
.zmap-natl .zmap-lpin svg{transform:scale(.8); transform-origin:50% 92%}

/* ── airports (the model's badge and label) ───────────────────────────────── */
.zmap-page .zmap-air svg{filter:none}
.zmap-page .zmap-air-n{top:31px; font-size:12px; font-weight:700; color:#004F6C;
  text-shadow:0 0 2px #fff,0 0 2px #fff,0 0 3px #fff,0 0 4px #fff}

/* ── amenity filter panel (badge · label · switch) ────────────────────────── */
.zl-fhead{display:flex; align-items:center; justify-content:space-between; padding:2px 6px 6px}
.zl-fhead span{font-size:11.5px; font-weight:800; color:#004F6C; letter-spacing:.02em}
.zl-fall{border:0; background:transparent; border-radius:999px; padding:2px 8px; cursor:pointer;
  font:inherit; font-size:10.5px; font-weight:800; color:#008BA6}
.zl-fall:hover{background:#F1ECE1}
.zl-frow{display:flex; align-items:center; gap:10px; width:100%; padding:6px; border:0;
  border-radius:12px; background:transparent; cursor:pointer; font:inherit; text-align:start}
.zl-frow:hover{background:#F1ECE1}
.zl-frow.off{opacity:.55}
.zl-flabel{flex:1; font-size:12.5px; font-weight:700; color:#123540}
.zl-fbadge{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:30px; height:30px; border-radius:999px}
.zl-fbadge svg{width:16px; height:16px}
.zl-fbadge-restaurant{background:#fff; color:#123540; border:2px solid #00ABC7}
.zl-fbadge-cafe{background:#fff; color:#123540; border:2px solid #E6B563}
.zl-fbadge-hotel{background:linear-gradient(135deg,#00ABC7,#004F6C); color:#fff; border:2px solid #fff}
.zl-fbadge-airport{background:linear-gradient(135deg,#00ABC7,#004F6C); color:#fff; border:2px solid #E6B563}
.zl-fbadge-landmark{background:linear-gradient(135deg,#E6B563,#D9A54E); color:#123540; border:2px solid #fff}
.zl-switch{position:relative; flex:none; width:34px; height:20px; border-radius:999px;
  background:#CBD8DD; transition:background .18s}
.zl-switch::after{content:""; position:absolute; top:2px; left:2px; width:16px; height:16px;
  border-radius:999px; background:#fff; box-shadow:0 1px 3px rgba(18,53,64,.35); transition:transform .18s}
.zl-switch-on{background:#00ABC7}
.zl-switch-on::after{transform:translateX(14px)}
[dir="rtl"] .zl-switch::after{left:auto; right:2px}
[dir="rtl"] .zl-switch-on::after{transform:translateX(-14px)}
#zmapLayersSheet,#zmapPlacesSheet{width:min(270px,calc(100% - 28px)); padding:10px}
#zmapPlacesSheet{width:min(320px,calc(100% - 28px))}

/* ── place search ─────────────────────────────────────────────────────────── */
.zmap-place-q{height:44px; max-width:none; box-shadow:none; background:#F6F4EC; border-radius:12px}
.zmap-place-q:focus-within{border-color:#00ABC7}
.zmap-place-q svg{color:#008BA6; flex:none; width:16px; height:16px}
.zmap-place-list{margin-top:8px; max-height:240px; overflow:auto}
.zmap-place{display:flex; align-items:flex-start; gap:10px; width:100%; padding:8px;
  border:0; border-radius:12px; background:transparent; cursor:pointer; text-align:start;
  font:inherit; color:#123540}
.zmap-place:hover{background:#F1ECE1}
.zmap-place svg{width:16px; height:16px; flex:none; margin-top:2px; color:#00ABC7}
.zmap-place span{display:flex; flex-direction:column; min-width:0}
.zmap-place b{font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zmap-place small{font-size:10.5px; color:#5A6A72; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.zmap-place-msg{padding:10px 8px; font-size:12px; font-weight:600; color:#5A6A72}
.zmap-place-msg.err{color:#B3452E}
.zmap-place-credit{margin-top:6px; padding:6px 8px 0; border-top:1px solid rgba(18,53,64,.08);
  font-size:9.5px; font-weight:500; color:#8CA0A8}

/* a Commons photograph is credited where it is shown */
.zmap-credit{display:block; margin-top:8px; font-size:10px; color:#8AA0A8; text-decoration:none}
.zmap-credit:hover{color:#008BA6; text-decoration:underline}

/* ── amenity popups (Leaflet skin of the model's MapLibre popup) ─────────── */
.zl-popup-wrap .leaflet-popup-content-wrapper{padding:0; border-radius:14px; overflow:hidden;
  box-shadow:0 14px 40px rgba(18,53,64,.24)}
.zl-popup-wrap .leaflet-popup-content{margin:0; width:auto !important}
.zl-popup-wrap .leaflet-popup-tip{box-shadow:none}
.zl-popup-wrap a.leaflet-popup-close-button{width:26px; height:26px; font-size:18px; line-height:24px;
  color:#123540; top:4px; right:4px}
[dir="rtl"] .zl-popup-wrap a.leaflet-popup-close-button{right:auto; left:4px}
.zl-popup{display:flex; gap:11px; align-items:center; width:240px; padding:13px 14px 12px;
  font-family:inherit}
.zl-popup-body{min-width:0}
.zl-popup-cat{display:inline-block; padding:2px 9px; border-radius:999px;
  background:rgba(0,171,199,.14); color:#008BA6; font-size:10px; font-weight:700}
.zl-popup h3{margin:6px 0 4px; color:#123540; font-size:15px; font-weight:700; line-height:1.45}
.zl-popup p{margin:0 !important; color:#4E6470; font-size:11.5px; line-height:1.6}
.zl-amenity-badge{display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; height:44px; border-radius:999px; box-shadow:0 3px 10px rgba(0,75,108,.18)}
.zl-amenity-badge-restaurant{background:#fff; color:#123540; border:2.5px solid #00ABC7}
.zl-amenity-badge-cafe{background:#fff; color:#123540; border:2.5px solid #E6B563}
.zl-amenity-badge-hotel{background:linear-gradient(135deg,#00ABC7,#004F6C); color:#fff; border:2.5px solid #fff}
.zl-amenity-badge-landmark{background:linear-gradient(135deg,#E6B563,#D9A54E); color:#123540; border:2.5px solid #fff}
.zl-amenity-badge-place{background:#fff; color:#008BA6; border:2.5px solid #00ABC7}
.zl-popup-cat-landmark{background:rgba(230,181,99,.24); color:#8A6A1F}

/* ── the canvas ground matches the new basemap, so no cool flash on load ──── */
.zmap-canvas,#zmapMap{background:#EFE3C2}

/* a place added from the admin panel carries its own description */
.zmap-desc{margin:8px 0 0; font-size:12.5px; line-height:1.75; color:#4E6470;
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical; overflow:hidden}