.ztabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.ztabs button{font:inherit;font-weight:700;font-size:.95rem;min-height:44px;padding:4px 16px;border-radius:999px;border:1.5px solid var(--navy);background:transparent;color:var(--navy);cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ztabs button:hover{border-color:var(--blue);color:var(--blue)}
.ztabs button[aria-selected="true"]{background:var(--blue);border-color:var(--blue);color:var(--light)}
.zpanels{min-height:8.5rem;border-inline-start:4px solid var(--blue);padding-inline-start:18px}
.zpanel h3{font-size:1.25rem;font-weight:700;margin-bottom:6px}
.zpanel p{margin-bottom:6px;font-size:1.05rem}
.zpanel a{color:var(--blue);font-weight:700}
.cover-map{position:relative}
.rmap{display:block;width:100%;max-width:640px;margin-inline:auto;height:auto;overflow:visible}
.city-fill{fill:var(--navy);fill-opacity:.05}
.city-line{fill:none;stroke:var(--navy);stroke-width:2.5;stroke-dasharray:1;stroke-dashoffset:0}
.rings path{fill:none;stroke:var(--navy);stroke-opacity:.5;stroke-width:2.6;stroke-dasharray:1;stroke-dashoffset:0}
.axes path{fill:none;stroke:var(--navy);stroke-opacity:.36;stroke-width:2.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.zone{cursor:pointer}
.zone-fill{fill:var(--blue);fill-opacity:.1;stroke:none;transition:fill-opacity .35s}
.zone:hover .zone-fill{fill-opacity:.3}
.zone.is-active .zone-fill{fill-opacity:.88}
.zone-label{font-family:"Cairo",sans-serif;font-weight:700;font-size:21px;fill:var(--navy);pointer-events:none;transition:fill .3s}
.zone.is-active .zone-label{fill:var(--light)}
.hq{cursor:pointer}
.hq-dot{fill:var(--blue);stroke:var(--light);stroke-width:3}
.hq-pulse{fill:var(--blue);opacity:.35;transform-box:fill-box;transform-origin:center}
.hq-leader{fill:none;stroke:var(--navy);stroke-opacity:.6;stroke-width:1.5}
.hq-text{font-family:"Cairo",sans-serif;font-weight:700;font-size:18px;fill:var(--navy)}
.map-note{text-align:center;font-size:.85rem;opacity:.7;margin-top:8px}
.js.motion .rmap:not(.is-in) .city-line,.js.motion .rmap:not(.is-in) .rings path,.js.motion .rmap:not(.is-in) .axes path{stroke-dashoffset:1}
.js.motion .rmap:not(.is-in) .zone-fill{fill-opacity:0}
.js.motion .rmap:not(.is-in) .hq,.js.motion .rmap:not(.is-in) .city-fill{opacity:0}
.js.motion .rmap .city-line{transition:stroke-dashoffset 2.2s var(--ease)}
.js.motion .rmap .rings path{transition:stroke-dashoffset 1.8s var(--ease)}
.js.motion .rmap .rings path:nth-child(2){transition-delay:.25s}.js.motion .rmap .rings path:nth-child(3){transition-delay:.5s}
.js.motion .rmap .axes path{transition:stroke-dashoffset 1.6s var(--ease) .6s}
.js.motion .rmap .city-fill,.js.motion .rmap .hq{transition:opacity .8s ease 1.5s}
.js.motion .rmap .zone-fill{transition:fill-opacity .9s ease,fill-opacity .35s}
.js.motion .rmap.is-in .zone:nth-child(1) .zone-fill{transition-delay:.9s}
.js.motion .rmap.is-in .zone:nth-child(2) .zone-fill{transition-delay:1.1s}
.js.motion .rmap.is-in .zone:nth-child(3) .zone-fill{transition-delay:1.25s}
.js.motion .rmap.is-in .zone:nth-child(4) .zone-fill{transition-delay:1.4s}
.js.motion .rmap.is-in .zone:nth-child(5) .zone-fill{transition-delay:1.55s}
@media (prefers-reduced-motion:no-preference){
  .hq-pulse{animation:pulse 2.4s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.6);opacity:.5}100%{transform:scale(2.6);opacity:0}}
}
/* خريطة OSM الفعلية: طريق الثمامة وتسميات الطرق */
.thum path{fill:none;stroke:var(--navy);stroke-opacity:.5;stroke-width:3.2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.road-label{font-family:"Cairo",sans-serif;font-weight:600;font-size:15px;fill:var(--navy);fill-opacity:.8;paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round;pointer-events:none}
.js.motion .rmap:not(.is-in) .thum path{stroke-dashoffset:1}
.js.motion .rmap:not(.is-in) .road-labels{opacity:0}
.js.motion .rmap .thum path{transition:stroke-dashoffset 1.6s var(--ease) .8s}
.js.motion .rmap .road-labels{transition:opacity .8s ease 1.8s}
.map-credit{text-align:center;font-size:.8rem;opacity:.75;margin-top:2px}
.map-credit a{text-decoration:underline}
/* قراءة أوضح على الجوال */
.rmap .hq-text{font-size:21px}
.rmap .zone-label{font-size:24px}
.road-label{font-size:17px}