/* M2A Group — Sector 07 Commercial Centers signature visual
   Shared bilingual layer. Scoped to data-sector="commercial-centers". */
body.sector-detail-v9[data-sector="commercial-centers"] .sd-hero{
  background:
    radial-gradient(circle at 80% 24%,rgba(148,163,184,.22),transparent 30%),
    radial-gradient(circle at 18% 18%,rgba(125,211,252,.10),transparent 25%),
    linear-gradient(145deg,#070b10 0%,#101821 50%,#080c11 100%)!important;
}
body.sector-detail-v9[data-sector="commercial-centers"] .sd-sector-index strong{
  border-color:rgba(203,213,225,.34)!important;
  background:rgba(148,163,184,.14)!important;
  color:#f1f5f9!important;
}
body.sector-detail-v9[data-sector="commercial-centers"] .commercial-intel-frame{
  min-height:620px!important;
  border-color:rgba(203,213,225,.28)!important;
  background:#090e14!important;
  isolation:isolate;
}
body.sector-detail-v9[data-sector="commercial-centers"] .commercial-intel-frame::after{
  z-index:2!important;
  background:linear-gradient(180deg,rgba(4,8,12,.06) 18%,rgba(4,8,12,.18) 50%,rgba(4,8,12,.92) 100%)!important;
}
.commercial-intel-photo{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.74) contrast(1.07) brightness(.64)!important;
  transform:scale(1.025);
}
.commercial-intel-stage{position:absolute;inset:0;z-index:3;overflow:hidden;pointer-events:none}
.commercial-intel-stage::before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(6,10,15,.74) 0%,rgba(6,10,15,.20) 42%,rgba(6,10,15,.06) 62%,rgba(6,10,15,.42) 100%),
    radial-gradient(circle at 67% 36%,rgba(148,163,184,.13),transparent 33%);
}
.commercial-intel-grid{
  position:absolute;inset:8% 6% 24%;z-index:1;border:1px solid rgba(203,213,225,.10);border-radius:30px;
  background-image:
    linear-gradient(rgba(203,213,225,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(203,213,225,.065) 1px,transparent 1px);
  background-size:58px 58px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),rgba(0,0,0,.28));
}
.commercial-route-svg{position:absolute;z-index:3;inset:11% 5% 26%;width:90%;height:63%;overflow:visible}
.commercial-route-path{
  fill:none;stroke:url(#commercialRouteGradient);stroke-width:2.35;stroke-linecap:round;
  stroke-dasharray:8 10;filter:drop-shadow(0 0 6px rgba(125,211,252,.65));
  animation:commercialRouteFlow 5.4s linear infinite;
}
.commercial-route-path.secondary{opacity:.50;stroke-width:1.35;animation-duration:7.3s;animation-direction:reverse}
.commercial-route-node{fill:#e2e8f0;stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 0 8px rgba(226,232,240,.75))}
.commercial-route-node.active{fill:#7dd3fc;stroke:#e0f2fe;filter:drop-shadow(0 0 9px rgba(125,211,252,.95))}
.commercial-route-node.gold{fill:#f0d27b;stroke:#fff7d6;filter:drop-shadow(0 0 9px rgba(240,210,123,.9))}
.commercial-zone{
  position:absolute;z-index:5;display:flex;align-items:center;gap:7px;padding:8px 10px;
  border:1px solid rgba(203,213,225,.18);border-radius:999px;background:rgba(7,12,18,.80);
  color:#e2e8f0;font:900 9px/1.2 'Inter','Cairo',sans-serif;letter-spacing:.08em;white-space:nowrap;
  box-shadow:0 10px 28px rgba(0,0,0,.22);backdrop-filter:blur(9px);
}
.commercial-zone::before{content:"";width:6px;height:6px;border-radius:50%;background:#cbd5e1;box-shadow:0 0 10px rgba(203,213,225,.75)}
.commercial-zone.is-blue::before{background:#7dd3fc;box-shadow:0 0 10px rgba(125,211,252,.85)}
.commercial-zone.is-gold::before{background:#f0d27b;box-shadow:0 0 10px rgba(240,210,123,.85)}
.commercial-zone.entry{left:6%;top:48%}
.commercial-zone.retail{left:27%;top:24%}
.commercial-zone.fnb{right:31%;top:39%}
.commercial-zone.services{right:8%;top:23%}
.commercial-zone.experience{right:7%;top:56%}
.commercial-intel-pulse{
  position:absolute;z-index:4;width:84px;height:84px;border:1px solid rgba(125,211,252,.20);border-radius:50%;
  left:49%;top:39%;transform:translate(-50%,-50%);animation:commercialPulse 3.4s ease-out infinite;
}
.commercial-intel-pulse::after{content:"";position:absolute;inset:18px;border:1px solid rgba(203,213,225,.18);border-radius:50%}
.commercial-intel-panel{
  position:absolute;z-index:6;left:24px;bottom:24px;width:min(350px,calc(100% - 48px));padding:18px;border-radius:20px;
  border:1px solid rgba(203,213,225,.17);background:rgba(5,10,15,.86);backdrop-filter:blur(14px);box-shadow:0 18px 52px rgba(0,0,0,.28);
}
body.sector-detail-v9[data-sector="commercial-centers"] .commercial-intel-panel{display:none!important}
html[dir="rtl"] .commercial-intel-panel{left:auto;right:24px}
.commercial-intel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}
.commercial-intel-head small{color:#cbd5e1;font:900 10px/1.2 'Inter','Cairo',sans-serif;letter-spacing:.10em}
.commercial-intel-head b{color:#f0d27b;font-size:12px}
.commercial-intel-bars{display:grid;gap:8px}
.commercial-intel-row{display:grid;grid-template-columns:74px 1fr auto;gap:9px;align-items:center}
.commercial-intel-row span{color:#dbe4ee;font-size:9px;font-weight:800;white-space:nowrap}
.commercial-intel-row i{position:relative;height:6px;border-radius:999px;background:rgba(255,255,255,.07);overflow:hidden}
.commercial-intel-row i::after{content:"";position:absolute;inset:0 18% 0 0;border-radius:inherit;background:linear-gradient(90deg,#64748b,#cbd5e1,#7dd3fc);animation:commercialBars 4.8s ease-in-out infinite}
.commercial-intel-row:nth-child(2) i::after{inset-inline-end:30%;animation-delay:.35s}
.commercial-intel-row:nth-child(3) i::after{inset-inline-end:12%;animation-delay:.7s}
.commercial-intel-row:nth-child(4) i::after{inset-inline-end:24%;animation-delay:1.05s}
.commercial-intel-row em{font-style:normal;color:#94a3b8;font-size:8px;font-weight:900;letter-spacing:.05em}
.commercial-intel-status{position:absolute;z-index:6;top:28px;left:28px;display:flex;align-items:center;gap:8px;color:#e2e8f0;font:900 9px/1 'Inter','Cairo',sans-serif;letter-spacing:.12em;text-transform:uppercase}
html[dir="rtl"] .commercial-intel-status{left:auto;right:28px}
.commercial-intel-status i{width:7px;height:7px;border-radius:50%;background:#7dd3fc;box-shadow:0 0 0 5px rgba(125,211,252,.08),0 0 15px rgba(125,211,252,.58)}
.commercial-intel-tag{position:absolute;z-index:6;bottom:30px;right:24px;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid rgba(240,210,123,.18);border-radius:999px;background:rgba(5,10,15,.82);color:#f0d27b;font:900 9px/1.2 'Inter','Cairo',sans-serif;letter-spacing:.08em}
html[dir="rtl"] .commercial-intel-tag{right:auto;left:24px}
.commercial-intel-tag::before{content:"";width:7px;height:7px;border-radius:50%;background:#f0d27b;box-shadow:0 0 11px rgba(240,210,123,.72)}
@keyframes commercialRouteFlow{to{stroke-dashoffset:-72}}
@keyframes commercialPulse{0%{transform:translate(-50%,-50%) scale(.62);opacity:.75}100%{transform:translate(-50%,-50%) scale(1.55);opacity:0}}
@keyframes commercialBars{0%,100%{filter:brightness(.86)}50%{filter:brightness(1.16)}}
@media(max-width:1100px){
  body.sector-detail-v9[data-sector="commercial-centers"] .commercial-intel-frame{min-height:560px!important}
  .commercial-zone{font-size:8px}
}
@media(max-width:760px){
  body.sector-detail-v9[data-sector="commercial-centers"] .commercial-intel-frame{min-height:500px!important;border-radius:28px!important}
  .commercial-intel-stage::before{background:linear-gradient(180deg,rgba(4,9,14,.22),rgba(4,9,14,.76))}
  .commercial-intel-grid{inset:10% 4% 32%;background-size:44px 44px}
  .commercial-route-svg{inset:13% 2% 32%;width:96%;height:55%}
  .commercial-zone{font-size:7.3px;padding:6px 7px;letter-spacing:.045em}
  .commercial-zone.entry{left:3%;top:46%}.commercial-zone.retail{left:23%;top:24%}.commercial-zone.fnb{right:23%;top:38%}.commercial-zone.services{right:3%;top:24%}.commercial-zone.experience{right:3%;top:53%}
  .commercial-intel-panel{left:16px!important;right:16px!important;bottom:16px;width:auto;padding:14px}
  .commercial-intel-row{grid-template-columns:64px 1fr auto;gap:7px}.commercial-intel-row span{font-size:8px}.commercial-intel-row em{font-size:7px}
  .commercial-intel-status{top:18px;left:18px!important;right:auto!important;font-size:8px}.commercial-intel-tag{display:none}.commercial-intel-pulse{width:64px;height:64px}
}
@media(max-width:390px){
  body.sector-detail-v9[data-sector="commercial-centers"] .commercial-intel-frame{min-height:470px!important}
  .commercial-zone.fnb{display:none}.commercial-zone{font-size:7px}.commercial-intel-head small{font-size:8.5px}
}
@media(prefers-reduced-motion:reduce){
  .commercial-route-path,.commercial-intel-pulse,.commercial-intel-row i::after{animation:none!important}
}
